From 21b9ca8ea565ed0c7f720e879d244d8900b38f3e Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Wed, 26 Jul 2023 23:17:24 +0300
Subject: [PATCH] detach areas on remove docuemnt

---
 app/javascript/submission_form/areas.vue    |  5 ++++-
 app/javascript/template_builder/builder.vue | 10 +++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/app/javascript/submission_form/areas.vue b/app/javascript/submission_form/areas.vue
index d0cdb527..c606dadd 100644
--- a/app/javascript/submission_form/areas.vue
+++ b/app/javascript/submission_form/areas.vue
@@ -11,7 +11,10 @@
         v-for="(area, areaIndex) in field.areas"
         :key="areaIndex"
       >
-        <Teleport :to="`#page-${area.attachment_uuid}-${area.page}`">
+        <Teleport
+          v-if="attachmentsIndex[area.attachment_uuid]"
+          :to="`#page-${area.attachment_uuid}-${area.page}`"
+        >
           <FieldArea
             :ref="setAreaRef"
             v-model="values[field.uuid]"
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 4a72277c..5d704f33 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -356,7 +356,7 @@ export default {
 
       if (this.selectedField?.type === this.dragFieldType) {
         baseArea = this.selectedAreaRef.value
-      } else if (previousField?.areas) {
+      } else if (previousField?.areas?.length) {
         baseArea = previousField.areas[previousField.areas.length - 1]
       } else {
         if (['checkbox'].includes(this.dragFieldType)) {
@@ -420,6 +420,14 @@ export default {
         this.template.schema.splice(this.template.schema.indexOf(item), 1)
       }
 
+      this.template.fields.forEach((field) => {
+        [...field.areas].forEach((area) => {
+          if (area.attachment_uuid === item.attachment_uuid) {
+            field.areas.splice(field.areas.indexOf(area), 1)
+          }
+        })
+      })
+
       this.save()
     },
     onDocumentReplace ({ replaceSchemaItem, schema, documents }) {