updating fields after deleting an image

app/controllers/api/templates_documents_controller.rb

@@ -31,6 +31,15 @@ module Api
       page_number = document.preview_images.find_index { |pic| pic.id == img_attachment_id }
       if page_number
         Templates::ProcessDocument.delete_picture(template, document, img_attachment_id, page_number)
+        template.fields.each do |field|
+          field['areas'] = (field['areas'] || []).reject do |area|
+            area['attachment_uuid'] == document[:uuid] && area['page'] == page_number
+          end
+        end
+        template.fields = (template.fields || []).reject do |field|
+          field['areas'].empty?
+        end
+        template.save
         updated_images = updated_preview_images(document)
         new_metadata = document.metadata
         render json: { success: true, message: 'image deleted successfully', updated_preview_images: updated_images, updated_metadata: new_metadata }

app/javascript/template_builder/builder.vue

@@ -778,6 +778,14 @@ export default {
                 console.log('Success:', data)
                 document.preview_images = data.updated_preview_images
                 document.metadata = data.updated_metadata
+                const pageNumber = document.preview_images.findIndex(pic => pic.id === imageId)
+                this.template.fields.forEach((field) => {
+                  [...(field.areas || [])].forEach((area) => {
+                    if (area.attachment_uuid === document.uuid && area.page === pageNumber) {
+                      field.areas.splice(field.areas.indexOf(area), 1)
+                    }
+                  })
+                })
               })
               .catch((error) => {
                 console.error('Error:', error)