From a478112b07628067c8d60af668af559d1600e159 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Sat, 6 Jan 2024 16:19:40 +0200
Subject: [PATCH] fix multiple area fields draw

---
 app/javascript/template_builder/builder.vue | 11 ++++++++++-
 app/javascript/template_builder/field.vue   |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 97035df2..dd3ffd39 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -673,7 +673,16 @@ export default {
         }
 
         this.drawField.areas ||= []
-        this.drawField.areas.push(area)
+
+        const insertBeforeAreaIndex = this.drawField.areas.findIndex((a) => {
+          return a.attachment_uuid === area.attachment_uuid && a.page > area.page
+        })
+
+        if (insertBeforeAreaIndex !== -1) {
+          this.drawField.areas.splice(insertBeforeAreaIndex, 0, area)
+        } else {
+          this.drawField.areas.push(area)
+        }
 
         if (this.template.fields.indexOf(this.drawField) === -1) {
           this.template.fields.push(this.drawField)
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index f38df25c..488c3501 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -419,7 +419,7 @@ export default {
       this.template.documents.forEach((attachment) => {
         attachment.preview_images.forEach((page) => {
           if (!field.areas.find((area) => area.attachment_uuid === attachment.uuid && area.page === parseInt(page.filename))) {
-            field.areas.push({ ...JSON.parse(areaString), page: parseInt(page.filename) })
+            field.areas.push({ ...JSON.parse(areaString), attachment_uuid: attachment.uuid, page: parseInt(page.filename) })
           }
         })
       })