blank page in preview document

app/controllers/api/templates_documents_controller.rb

@@ -39,10 +39,11 @@ module Api
     end
     
     def add_new_image
-      byebug
       template = Template.find(params[:template_id])
+      raw_document = params[:document]
+      document = template.documents.find_by(id: raw_document[:id])
       begin
-        Templates::ProcessDocument.upload_new_blank_image(template)
+        Templates::ProcessDocument.upload_new_blank_image(template, document)
         render json: { success: true, message: 'New blank image added successfully' }
       rescue StandardError => e
         render json: { success: false, message: "Error adding new blank image: #{e.message}" }, status: :unprocessable_entity

app/javascript/template_builder/builder.vue

@@ -81,6 +81,7 @@
           :template="template"
           :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument"
+          @add-blank-page="addBlankPage"
           @remove="onDocumentRemove"
           @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
@@ -791,27 +792,24 @@ export default {
         }
       })
     },
-    addBlankPage (item) {
-      console.log(this.sortedDocuments)
-      // console.log(this.template)
-      const documentId = item.id
-      console.log(documentId)
-      const apiUrl = `/api/templates/${this.template.id}/documents/${documentId}/add_new_image`
+    addBlankPage(item) {
+      const documentRef = this.documentRefs.find(
+        (e) => e.document.uuid === item.attachment_uuid
+      );
+      console.log(documentRef.document);
+
+      const documentId = documentRef.document.id;
+      const apiUrl = `/api/templates/${this.template.id}/documents/${documentId}/add_new_image`;
       fetch(apiUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({
-          template: this.template.id,
-          document: item
-        })
+          template_id: this.template.id,
+          document: documentRef.document,
+        }),
       })
-      // this.baseFetch(`/api/templates/${this.templateId}/documents/add_new_image`, {
-      //   method: 'POST',
-      //   body: JSON.stringify({ template: this.template }),
-      //   headers: { 'Content-Type': 'application/json' }
-      // })
         .then((response) => {
           if (!response.ok) {
             throw new Error(`HTTP error! Status: ${response.status}`)

app/javascript/template_builder/preview.vue

@@ -81,6 +81,13 @@
         </div>
       </div>
     </div>
+    <button
+      class="btn btn-outline w-full mt-2"
+      @click="$emit('add-blank-page', item)"
+    >
+      <span> Add blank page </span>
+    </button>
+
     <div class="flex pb-2 pt-1.5">
       <Contenteditable
         :model-value="item.name"
@@ -138,7 +145,7 @@ export default {
       default: true
     }
   },
-  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'remove-image'],
+  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'remove-image','add-blank-page'],
   computed: {
     previewImage () {
       return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))[0]

lib/templates/process_document.rb

@@ -163,46 +163,71 @@ module Templates
       attachment = ActiveStorage::Attachment.find_by(id: attachment_id)
       return unless attachment
       attachment.purge
-      deleted_page_field = {
-        'type' => 'deleted_page',
-        'areas' => [{
-          'x' => 0,
-          'y' => 0,
-          'w' => 1,
-          'h' => 1
-          'attachment_uuid' => SecureRandom.uuid,
-          'page' => page_number,
-        }]
-      }
+      # deleted_page_field = {
+      #   'type' => 'deleted_page',
+      #   'areas' => [{
+      #     'x' => 0,
+      #     'y' => 0,
+      #     'w' => 1,
+      #     'h' => 1
+      #     'attachment_uuid' => SecureRandom.uuid,
+      #     'page' => page_number,
+      #   }]
+      # }
       template.fields << deleted_page_field
       template.save!
     end
 
-    def upload_new_blank_image(template)
-      existing_document = template.documents.first
+    def upload_new_blank_image(template, document)
+     
       blank_image = generate_blank_image
-      blank_blob = create_blob_from_image(blank_image)
-      upload_new_attachment(template, blank_blob, ATTACHMENT_NAME)
+      blank_blob = create_blob_from_image(blank_image, document )
+      # upload_new_attachment(template, blank_blob, ATTACHMENT_NAME)
       # puts '-----New blank image uploaded successfully!-----'
-      Rails.logger.info('New blank image uploaded successfully!')
-    rescue StandardError => e
-      Rails.logger.error("Error uploading new blank image: #{e.message}")
+      if blank_blob
+       Rails.logger.info('New blank image uploaded successfully!')
+      else
+        Rails.logger.info('Blank image not uploaded')
+      end
     end
-    def generate_blank_image
+
+   
+    def generate_blank_image #gives images when debug
       height = 2000
-      Vips::Image.black(MAX_WIDTH, height)
+      Vips::Image.new_from_array([[255]* MAX_WIDTH] * height, 255)
     end
-    def create_blob_from_image(image)
-      ActiveStorage::Blob.create_and_upload!(
-        io: StringIO.new(image.write_to_buffer(FORMAT, Q: Q, interlace: true)),
+
+
+    def create_blob_from_image(image, attachment)
+     
+      begin
+      previews_count = attachment.preview_images.count
+      # base_filename = "#{SecureRandom.uuid}_#{previews_count + 1}"
+      ActiveStorage::Attachment.create!(
+        blob: ActiveStorage::Blob.create_and_upload!(
+          io: StringIO.new(image.write_to_buffer(FORMAT, Q: Q, interlace: true)),
         filename: "#{SecureRandom.uuid}#{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
-    def upload_new_attachment(template, blob, attachment_name)
-      template.documents.attach(blob)
-      template.documents.last.update!(name: attachment_name)
-    end
+
+
+    #   ActiveStorage::Blob.create_and_upload!(
+    #     io: StringIO.new(image.write_to_buffer(FORMAT, Q: Q, interlace: true)),
+    #     filename: "#{SecureRandom.uuid}#{FORMAT}",
+    #     metadata: { analyzed: true, identified: true, width: image.width, height: image.height }
+    #   )
+    # end
+    # def upload_new_attachment(template, blob, attachment_name)
+    #   template.documents.attach(blob)
+    #   template.documents.last.update!(name: attachment_name)
+    # end
 
   end
 end