delete page from pdf

app/controllers/api/templates_documents_controller.rb

@@ -31,7 +31,7 @@ module Api
       page_number = template.documents.find(document_id).preview_images.find_index { |pic| pic.id == attachment_id }
       if page_number
         Templates::ProcessDocument.delete_picture(template, attachment_id, page_number)
-        render json: { success: true, message: 'New blank image added successfully' }
+        render json: { success: true, message: 'image deleted successfully' }
       else
         page_number = "No image found for deletion"
         render json: { success: false, message: "Error: #{page_number}" }, status: :unprocessable_entity

app/javascript/template_builder/builder.vue

@@ -742,8 +742,8 @@ export default {
         headers: { 'Content-Type': 'application/json' }
       })
     },
-    removeImage ({ item, imageId }) {
+    removeImage (item, imageId) {
-      console.log(this.template.documents[0].preview_secured_images)
+      // console.log(this.template.documents[0].preview_secured_images)
       // 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) => {
@@ -756,7 +756,8 @@ export default {
           // console.log('simple preview', document.preview_images, ': secured', document.preview_secured_images)
           console.log(indexToRemove)
           if (indexToRemove !== -1) {
-            // here I want to send call to a controller named template_document
+            const confirmed = window.confirm('Are you sure you want to delete this image?')
+            if (confirmed) {
               const documentId = document.id
               const apiUrl = `/api/templates/${this.template.id}/documents/${documentId}/del_image`
               fetch(apiUrl, {
@@ -787,6 +788,7 @@ export default {
                 })
             }
           }
+        }
       })
     },
     addBlankPage (item) {
@@ -823,6 +825,98 @@ export default {
           console.error('Error:', error)
         })
     }
+    // addBlankPage () {
+    //   console.log(this.sortedDocuments)
+    //   console.log(this.template)
+    //   // here I need to send call to api controller action named add_new_image passing this.template as an argument on success response log success message.
+    // }
+    // addBlankPage () {
+    //   console.log(this.sortedDocuments)
+    //   console.log(this.template)
+    //   // if (!document) {
+    //   //   console.error('No document available for adding a blank page.')
+    //   // }
+    //   // const selectedDocument = this.sortedDocuments.find(/* your condition to identify the selected document */)
+
+    //   // if (selectedDocument) {
+    //   //   // Add a new blank page to the selected document
+    //   //   const newBlankPage = {
+    //   //     // Set properties for the new blank page
+    //   //     // Ensure that you generate unique values for id, uuid, etc.
+    //   //     id: /* unique id for the new page */,
+    //   //     uuid: /* unique uuid for the new page */,
+    //   //     // ... other properties ...
+    //   //   }
+
+    //   //   // Add the new page to the document's pages array
+    //   //   selectedDocument.pages.push(newBlankPage)
+
+    //   //   // Create a new preview image for the blank page
+    //   //   const newPreviewImage = {
+    //   //     id: /* unique id for the new preview image */,
+    //   //     url: /* url for the blank page image */,
+    //   //     metadata: {
+    //   //       width: /* width of the blank page */,
+    //   //       height: /* height of the blank page */,
+    //   //     },
+    //   //     // ... other properties ...
+    //   //   }
+
+    //   //   // Add the new preview image to the document's preview_images array
+    //   //   selectedDocument.preview_images.push(newPreviewImage)
+
+    //   //   // Save the changes
+    //   //   this.save()
+    //   // }
+    // }
+    // async addBlankPage () {
+    //   try {
+    //     // Assuming 'this.document' refers to the current document or template
+    //     const document = this.document
+
+    //     // Check if the document is available
+    //     if (!document) {
+    //       console.error('No document available for adding a blank page.')
+    //       return
+    //     }
+
+    //     // Generate a blank page image using Vips
+    //     const blankPage = await this.generateBlankPage()
+
+    //     // Assuming 'Templates::ProcessDocument' is accessible in this component
+    //     // Add the blank page to the document using the processing module
+    //     Templates::ProcessDocument.generate_preview_image(document, blankPage)
+
+    //     // Assuming there's a method to save or update the document after adding the blank page
+    //     await this.saveDocument(document);
+
+    //     console.log('Blank page added successfully!');
+    //   } catch (error) {
+    //     console.error('Error adding blank page:', error);
+    //   }
+    // },
+
+    // Function to generate a blank page using Vips
+    // generateBlankPage () {
+    //   // Assuming you have a utility function or method to create a blank image
+    //   // This could be a simple white image with the desired dimensions
+    //   const blankPage = createBlankImage(); // You should implement this function
+
+    //   return blankPage;
+    // },
+
+    // Assuming there's a method to save or update the document after modification
+    // async saveDocument (document) {
+    //   try {
+    //     // Perform the necessary steps to save or update the document
+    //     // For example, you might use an API call or other methods to persist changes
+    //     await document.save(); // You should implement this method
+
+    //     console.log('Document saved successfully!');
+    //   } catch (error) {
+    //     console.error('Error saving document:', error);
+    //   }
+    // }
   }
 }
 </script>

app/javascript/template_builder/preview.vue

@@ -73,7 +73,7 @@
             <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, previewImageId: previewImage.id })"
+              @click.stop="$emit('remove-image', item, previewImage.id)"
             >
               &times;
             </button>

lib/templates/process_document.rb

@@ -51,6 +51,7 @@ module Templates
       attachment.save!
 
       (0..[number_of_pages - 1, MAX_NUMBER_OF_PAGES_PROCESSED].min).each do |page_number|
+
         page = Vips::Image.new_from_buffer(data, '', dpi: DPI, page: page_number)
         page = page.resize(MAX_WIDTH / page.width.to_f)
 
@@ -103,16 +104,37 @@ 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
-      # delete field image from pdf document throught hexapdf
       number_of_pages = PDF::Reader.new(StringIO.new(data)).pages.size - 1
       (0..number_of_pages).each do |page_number|
         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 }
+        deleted_page_field = template.fields.select { |field| field['type'] == 'deleted_page' && field['areas'][0]['page'] == page_number }
-        # break if !deleted_page_field.empty?
+        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
@@ -139,17 +161,17 @@ module Templates
 
     def delete_picture(template, attachment_id, page_number)
       attachment = ActiveStorage::Attachment.find_by(id: attachment_id)
-      byebug
       return unless attachment
       attachment.purge
       deleted_page_field = {
         'type' => 'deleted_page',
         'areas' => [{
-          'page' => page_number,
           'x' => 0,
           'y' => 0,
           'w' => 1,
           'h' => 1
+          'attachment_uuid' => SecureRandom.uuid,
+          'page' => page_number,
         }]
       }
       template.fields << deleted_page_field