updating delete and add blank image/page from backend for pdf too

app/controllers/api/templates_documents_controller.rb

@@ -26,11 +26,11 @@ module Api
 
     def del_image
       template = Template.find(params[:template_id])
-      attachment_id = params[:attachment_id]
+      document = template.documents.find(params[:documentId])
-      document_id = params[:documentId]
+      img_attachment_id = params[:attachment_id]
-      page_number = template.documents.find(document_id).preview_images.find_index { |pic| pic.id == attachment_id }
+      page_number = document.preview_images.find_index { |pic| pic.id == img_attachment_id }
       if page_number
-        Templates::ProcessDocument.delete_picture(template, attachment_id, page_number)
+        Templates::ProcessDocument.delete_picture(template, document, img_attachment_id, page_number)
         render json: { success: true, message: 'image deleted successfully' }
       else
         page_number = "No image found for deletion"

app/javascript/pdf_loader.js

@@ -1,15 +1,17 @@
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener('DOMContentLoaded', function () {
-  function showLoading() {
+  function showLoading () {
-    document.getElementById("loader").style.display = "block";
+    document.getElementById('loader').style.display = 'block'
   }
-  var editTemplateLink = document.getElementById("edit-template-link");
+  const editTemplateLink = document.getElementById('edit-template-link')
-  editTemplateLink.addEventListener("click", function (event) {
+  if (editTemplateLink) {
-    event.preventDefault();
+    editTemplateLink.addEventListener('click', function (event) {
-    showLoading();
+      event.preventDefault()
+      showLoading()
 
-    var template = this.getAttribute("data-template");
+      const template = this.getAttribute('data-template')
       setTimeout(function () {
-      window.location.href = template;
+        window.location.href = template
-    }, 3000);
+      }, 3000)
-  });
+    })
-});
+  }
+})

app/javascript/template_builder/builder.vue

@@ -452,7 +452,6 @@ export default {
     scrollIntoDocument (item, page) {
       const documentRef = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
       documentRef.scrollIntoDocument(page)
-      // pageRef.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
     },
     onKeyUp (e) {
       if (e.code === 'Escape') {
@@ -648,7 +647,7 @@ export default {
       this.save()
     },
     onDocumentRemove (item) {
-      if (window.confirm('Are you sure?')) {
+      if (window.confirm('Are you sure you want to delete the document?')) {
         this.template.schema.splice(this.template.schema.indexOf(item), 1)
       }
 
@@ -744,17 +743,9 @@ export default {
       })
     },
     removeImage (item, imageId) {
-      // console.log(this.template.documents[0].preview_secured_images)
+      const document = this.template.documents.find((e) => e.uuid === item.attachment_uuid)
-      // output: 0: {id: 26, name: 'preview_images', uuid: 'db2de68e-c52f-41e0-a743-550a5ba26ec0', record_type: 'ActiveStorage::Attachment', record_id: 25, …} 1 : {id: 27, name: 'preview_images', uuid: '4f2cd882-95fb-4344-8571-78c9bb5a20aa', record_type: 'ActiveStorage::Attachment', record_id: 25, …} 2: {id: 28, name: 'preview_images', uuid: '28bb656a-0799-4a73-b665-692aab2c690b', record_type: 'ActiveStorage::Attachment', record_id: 25, …} length: 3, imageId: 27
-      // const indexToRemove = this.template.documents.findIndex(item => item.id === imageId)
-      this.template.documents.forEach((document) => {
-        // Check if the document has a preview_images array
       if (Array.isArray(document.preview_images)) {
-          // Find the index of the preview image with the matching id
+        const indexToRemove = document.preview_images.findIndex((previewImage) => previewImage.id === imageId)
-          const indexToRemove = document.preview_images.findIndex(
-            (previewImage) => previewImage.id === imageId
-          )
-          // console.log('simple preview', document.preview_images, ': secured', document.preview_secured_images)
         console.log(indexToRemove)
         if (indexToRemove !== -1) {
           const confirmed = window.confirm('Are you sure you want to delete this image?')
@@ -770,7 +761,6 @@ export default {
                 template: this.template.id,
                 attachment_id: imageId,
                 documentId
-                  // page_number: document.preview_images.find(x => x.id === imageId).name
               })
             })
               .then((response) => {
@@ -780,8 +770,8 @@ export default {
                 return response.json()
               })
               .then((data) => {
-                  // remove from frontend
                 document.preview_images.splice(indexToRemove, 1)
+                window.location.reload()
                 console.log('Success:', data)
               })
               .catch((error) => {
@@ -790,12 +780,9 @@ export default {
           }
         }
       }
-      })
     },
     addBlankPage (item) {
-      const documentRef = this.documentRefs.find(
+      const documentRef = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
-        (e) => e.document.uuid === item.attachment_uuid
-      )
       const confirmed = window.confirm('Are you sure you want to create new image?')
       if (confirmed) {
         const documentId = documentRef.document.id
@@ -817,6 +804,7 @@ export default {
             return response.json()
           })
           .then((data) => {
+            window.location.reload()
             console.log('Success: ---', data)
           })
           .catch((error) => {

app/javascript/template_builder/preview.vue

@@ -19,7 +19,18 @@
           v-if="editable && index==0"
           class="flex justify-between w-full"
         >
-          <div style="width: 26px" />
+          <div
+            v-if="sortedPreviewImages.length != 1"
+            class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
+          >
+            <button
+              class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors"
+              style="width: 24px; height: 24px"
+              @click.stop="$emit('remove-image', item, previewImage.id)"
+            >
+              &times;
+            </button>
+          </div>
           <div class="">
             <ReplaceButton
               :is-direct-upload="isDirectUpload"

lib/templates/process_document.rb

@@ -104,22 +104,6 @@ module Templates
       io
     end
 
-    def modify_pdf_data(original_pdf_data, excluded_page_number)
-      pdf = HexaPDF::Document.new(io: StringIO.new(original_pdf_data))
-      pdf.pages.delete_at(excluded_page_number)
-      modified_pdf_data = StringIO.new
-      pdf.write(modified_pdf_data)
-      modified_pdf_data.string
-    end
-    
-    def create_blob_from_data(data, original_blob)
-      original_blob.tap do |blob|
-        blob.io = StringIO.new(data)
-        blob.filename = original_blob.filename
-        blob.save!
-      end
-    end
-
     def generate_pdf_secured_preview_images(template, attachment, data)
       ActiveStorage::Attachment.where(name: SECURED_ATTACHMENT_NAME, record: attachment).destroy_all
       number_of_pages = PDF::Reader.new(StringIO.new(data)).pages.size - 1
@@ -127,14 +111,6 @@ module Templates
         pdf = Vips::Image.new_from_buffer(data, '', dpi: DPI, page: page_number)
         pdf = pdf.resize(MAX_WIDTH / pdf.width.to_f)
         redacted_boxes = template.fields.select { |field| field['type'] == 'redact' && field['areas'][0]['page'] == page_number }
-        deleted_page_field = template.fields.select { |field| field['type'] == 'deleted_page' && field['areas'][0]['page'] == page_number }
-        if !deleted_page_field.empty?
-          modified_pdf_data = modify_pdf_data(data, page_number)
-          attachment.blob = create_blob_from_data(modified_pdf_data, attachment.blob)
-          template.fields.delete(deleted_page_field)
-          template.save!
-          next 
-        end
         if !redacted_boxes.empty?
           redacted_boxes.each do |box|
             x = (box['areas'][0]['x'] * pdf.width).to_i
@@ -159,62 +135,115 @@ module Templates
       end
     end
 
-    def delete_picture(template, attachment_id, page_number)
+    def delete_picture(template, document, image_attachment_id, page_number)
-      attachment = ActiveStorage::Attachment.find_by(id: attachment_id)
+      image_attachment = ActiveStorage::Attachment.find_by(id: image_attachment_id)
-      return unless attachment
+      return unless image_attachment
-      # attachment.purge
+      file_path =
-      deleted_page_field = {
+      if document.service.name == :disk
-        'type' => 'deleted_page',
+        ActiveStorage::Blob.service.path_for(document.key)
-        'areas' => [{
+      end
-          'x' => 0,
+      temp_dir = "#{Rails.root}/tmp/"
-          'y' => 0,
+      FileUtils.mkdir_p(temp_dir)
-          'w' => 1,
+      temp_file_path = "#{temp_dir}#{SecureRandom.uuid}.pdf"
-          'h' => 1,
+      File.open(temp_file_path, 'wb') do |file|
-          'attachment_uuid' => SecureRandom.uuid,
+        document.download { |chunk| file.write(chunk) }
-          'page' => page_number,
+      end
-        }]
+      pdf = HexaPDF::Document.open(temp_file_path)
-      }
+      pdf.pages.delete_at(page_number)
-      template.fields << deleted_page_field
+      pdf.write(temp_file_path)
-      template.save!
+      document.reload
-    end
+      document.metadata[:pdf]['number_of_pages'] -= 1
-
+      temp_doc = document.metadata
-    def upload_new_blank_image(template, document)
+      new_attachment = document.attachments.update!(
+        name: document.name, 
+        uuid: document.uuid,
+        blob: ActiveStorage::Blob.create_and_upload!(
+          io: File.open(temp_file_path),
+          filename: document.blob.filename,
+          content_type: document.blob.content_type,
+          metadata: temp_doc
+        )
+      )
+      document.blob.purge
+      image_attachment.purge
+      document.reload
+      File.delete(temp_file_path)
 
-      blank_image = generate_blank_image
+      remaining_images = document.preview_images
-      blank_blob = create_blob_from_image(blank_image, document )
+      remaining_images.each_with_index do |image, index|
-      # upload_new_attachment(template, blank_blob, ATTACHMENT_NAME)
+        new_filename = "#{index}.jpeg"
-      # puts '-----New blank image uploaded successfully!-----'
+        image.blob.update!(filename: new_filename)
-      if blank_blob
-       Rails.logger.info('New blank image uploaded successfully!')
-      else
-        Rails.logger.info('Blank image not uploaded')
-      end
       end
-
+    rescue StandardError => e
-   
+      Rails.logger.error("Error uploading new blank image: #{e.message}")
-    def generate_blank_image
+    ensure
-      height = 2000
+      File.delete(temp_file_path) if File.exist?(temp_file_path)
-      Vips::Image.new_from_array([[255]* MAX_WIDTH] * height, 255)
     end
 
-
+    def upload_new_blank_image(template, document)
-    def create_blob_from_image(image, attachment)
+      file_path =
-     
+        if document.service.name == :disk
-      begin
+          ActiveStorage::Blob.service.path_for(document.key)
-      previews_count = attachment.preview_images.count
+        end
-      ActiveStorage::Attachment.create!(
+      temp_dir = "#{Rails.root}/tmp/"
+      FileUtils.mkdir_p(temp_dir)
+      temp_file_path = "#{temp_dir}#{SecureRandom.uuid}.pdf"
+      File.open(temp_file_path, 'wb') do |file|
+        document.download { |chunk| file.write(chunk) }
+      end
+      pdf = HexaPDF::Document.open(temp_file_path)
+      pdf.pages.add
+      pdf.write(temp_file_path)
+      document.reload
+      document.metadata[:pdf]['number_of_pages'] += 1
+      temp_doc = document.metadata
+      new_attachment = document.attachments.update!(
+        name: document.name, 
+        uuid: document.uuid,
         blob: ActiveStorage::Blob.create_and_upload!(
-          io: StringIO.new(image.write_to_buffer(FORMAT, Q: Q, interlace: true)),
+          io: File.open(temp_file_path),
-        filename: "#{previews_count}#{FORMAT}",
+          filename: document.blob.filename,
-        metadata: { analyzed: true, identified: true, width: image.width, height: image.height }
+          content_type: document.blob.content_type,
-        ),
+          metadata: temp_doc
-        name: ATTACHMENT_NAME,
-        record: attachment
         )
-      rescue => e
+      )
-      Rails.logger.error("Error creating blob from image: #{e.message}")
+      document.blob.purge
-      end
+      document.reload
-    end
+
+      # to update pdf images in storage blob
+      self.generate_pdf_preview_images(document, document.blob.download)
+
+      File.delete(temp_file_path)
+    rescue StandardError => e
+      Rails.logger.error("Error uploading new blank image: #{e.message}")
+    ensure
+      File.delete(temp_file_path) if File.exist?(temp_file_path)
+    end
+   
+    # def generate_blank_image
+    #   # here height and width should be equal to height and width from existing pdf pages
+    #   height = 2000
+    #   width = MAX_WIDTH
+    #   Vips::Image.new_from_array([[255]* width] * height, 255)
+    # end
+
+    # # def create_blob_from_image(image, attachment)
+    # def create_image_blob(image, attachment)
+    #   begin
+    #   previews_count = attachment.preview_images.count
+    #   ActiveStorage::Attachment.create!(
+    #     blob: ActiveStorage::Blob.create_and_upload!(
+    #       io: StringIO.new(image.write_to_buffer(FORMAT, Q: Q, interlace: true)),
+    #     filename: "#{previews_count}#{FORMAT}",
+    #     metadata: { analyzed: true, identified: true, width: image.width, height: image.height }
+    #     ),
+    #     name: ATTACHMENT_NAME,
+    #     record: attachment
+    #   )
+    #   rescue => e
+    #   Rails.logger.error("Error creating blob from image: #{e.message}")
+    #   end
+    # end
 
   end
 end