fix multiple area fields draw

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)

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) })
           }
         })
       })