From de14330449b6b52f03c73778685a9994ecf705c3 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Wed, 7 Aug 2024 23:50:52 +0300
Subject: [PATCH] allow to remove page area

---
 app/javascript/template_builder/field.vue          |  6 ++++++
 app/javascript/template_builder/field_settings.vue | 14 ++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index 94ba721c..73001e1e 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -130,6 +130,7 @@
                 @click-description="isShowDescriptionModal = true"
                 @click-condition="isShowConditionsModal = true"
                 @set-draw="$emit('set-draw', $event)"
+                @remove-area="removeArea"
                 @scroll-to="$emit('scroll-to', $event)"
               />
             </ul>
@@ -345,6 +346,11 @@ export default {
     }
   },
   methods: {
+    removeArea (area) {
+      this.field.areas.splice(this.field.areas.indexOf(area), 1)
+
+      this.save()
+    },
     buildDefaultName (field, fields) {
       if (field.type === 'payment' && field.preferences?.price && !field.preferences?.formula) {
         const { price, currency } = field.preferences || {}
diff --git a/app/javascript/template_builder/field_settings.vue b/app/javascript/template_builder/field_settings.vue
index ec0f910f..a2340027 100644
--- a/app/javascript/template_builder/field_settings.vue
+++ b/app/javascript/template_builder/field_settings.vue
@@ -358,7 +358,7 @@
     >
       <a
         href="#"
-        class="text-sm py-1 px-2"
+        class="text-sm py-1 px-2 group/1"
         @click.prevent="$emit('scroll-to', area)"
       >
         <IconShape
@@ -367,6 +367,11 @@
         />
         {{ t('page') }}
         <template v-if="template.schema.length > 1">{{ template.schema.findIndex((item) => item.attachment_uuid === area.attachment_uuid) + 1 }}-</template>{{ area.page + 1 }}
+        <IconX
+          :width="12"
+          class="group-hover/1:inline hidden"
+          @click.prevent.stop="[$emit('remove-area', area), $event.target.closest('.dropdown').querySelector('label').focus()]"
+        />
       </a>
     </li>
     <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
@@ -399,7 +404,7 @@
 </template>
 
 <script>
-import { IconRouteAltLeft, IconShape, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
+import { IconRouteAltLeft, IconShape, IconX, IconMathFunction, IconNewSection, IconInfoCircle, IconCopy } from '@tabler/icons-vue'
 
 export default {
   name: 'FieldSettings',
@@ -409,7 +414,8 @@ export default {
     IconMathFunction,
     IconRouteAltLeft,
     IconCopy,
-    IconNewSection
+    IconNewSection,
+    IconX
   },
   inject: ['template', 'save', 't'],
   props: {
@@ -443,7 +449,7 @@ export default {
       default: true
     }
   },
-  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition'],
+  emits: ['set-draw', 'scroll-to', 'click-formula', 'click-description', 'click-condition', 'remove-area'],
   data () {
     return {
     }