add ability to replace documents

app/javascript/template_builder/builder.vue

@@ -64,8 +64,11 @@
           :with-arrows="template.schema.length > 1"
           :item="item"
           :document="sortedDocuments[index]"
+          :template="template"
+          :is-direct-upload="isDirectUpload"
           @scroll-to="scrollIntoDocument(item)"
           @remove="onDocumentRemove"
+          @replace="onDocumentReplace"
           @up="moveDocument(item, -1)"
           @down="moveDocument(item, 1)"
           @change="save"
@@ -419,6 +422,19 @@ export default {
 
       this.save()
     },
+    onDocumentReplace ({ replaceSchemaItem, schema, documents }) {
+      this.template.schema.splice(this.template.schema.indexOf(replaceSchemaItem), 1, schema[0])
+      this.template.documents.push(...documents)
+      this.template.fields.forEach((field) => {
+        field.areas.forEach((area) => {
+          if (area.attachment_uuid === replaceSchemaItem.attachment_uuid) {
+            area.attachment_uuid = schema[0].attachment_uuid
+          }
+        })
+      })
+
+      this.save()
+    },
     moveDocument (item, direction) {
       const currentIndex = this.template.schema.indexOf(item)
 

app/javascript/template_builder/dropzone.vue

@@ -93,6 +93,11 @@ export default {
       }
     }
   },
+  mounted () {
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+  },
   methods: {
     upload: Upload.methods.upload,
     onDropFiles (e) {

app/javascript/template_builder/preview.vue

@@ -9,39 +9,51 @@
         loading="lazy"
       >
       <div
-        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute"
+        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
         @click="$emit('scroll-to', item)"
       >
-        <div
-          class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
-        >
-          <div class="rounded-bl rounded-tr bg-white border">
-            <button
-              class="rounded-bl rounded-tr hover:text-base-100 hover:bg-base-content w-full transition-colors"
-              style="width: 24px"
-              @click.stop="$emit('remove', item)"
-            >
-              &times;
-            </button>
+        <div class="flex justify-between w-full">
+          <div style="width: 26px" />
+          <div class="">
+            <ReplaceButton
+              :is-direct-upload="isDirectUpload"
+              :template-id="template.id"
+              class="opacity-0 group-hover:opacity-100"
+              @click.stop
+              @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
+            />
           </div>
           <div
-            v-if="withArrows"
-            class="flex flex-col border rounded-br rounded-tl bg-white divide-y"
+            class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
           >
-            <button
-              class="rounded-tl hover:text-base-100 hover:bg-base-content w-full transition-colors"
-              style="width: 24px"
-              @click.stop="$emit('up', item)"
-            >
-              &uarr;
-            </button>
-            <button
-              class="rounded-br hover:text-base-100 hover:bg-base-content w-full transition-colors"
-              style="width: 24px"
-              @click.stop="$emit('down', item)"
+            <div>
+              <button
+                class="btn btn-neutral btn-xs rounded text-white border border-base-content w-full"
+                style="width: 24px; height: 24px"
+                @click.stop="$emit('remove', item)"
+              >
+                &times;
+              </button>
+            </div>
+            <div
+              v-if="withArrows"
+              class="flex flex-col space-y-1"
             >
-              &darr;
-            </button>
+              <button
+                class="btn btn-neutral btn-xs text-white rounded hover:text-base-100 hover:bg-base-content w-full transition-colors"
+                style="width: 24px; height: 24px"
+                @click.stop="$emit('up', item)"
+              >
+                &uarr;
+              </button>
+              <button
+                class="btn btn-neutral btn-xs text-white rounded hover:text-base-100 hover:bg-base-content w-full transition-colors"
+                style="width: 24px; height: 24px"
+                @click.stop="$emit('down', item)"
+              >
+                &darr;
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -60,34 +72,52 @@
 
 <script>
 import Contenteditable from './contenteditable'
+import Upload from './upload'
+import ReplaceButton from './replace'
 
 export default {
   name: 'DocumentPreview',
   components: {
-    Contenteditable
+    Contenteditable,
+    ReplaceButton
   },
   props: {
     item: {
       type: Object,
       required: true
     },
+    template: {
+      type: Object,
+      required: true
+    },
     document: {
       type: Object,
       required: true
     },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
     withArrows: {
       type: Boolean,
       required: false,
       default: true
     }
   },
-  emits: ['scroll-to', 'change', 'remove', 'up', 'down'],
+  emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace'],
   computed: {
     previewImage () {
       return this.document.preview_images[0]
     }
   },
+  mounted () {
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+  },
   methods: {
+    upload: Upload.methods.upload,
     onUpdateName (value) {
       this.item.name = value
 

app/javascript/template_builder/replace.vue

@@ -0,0 +1,70 @@
+<template>
+  <label
+    :for="inputId"
+    class="btn btn-neutral btn-xs text-white transition-none"
+    :class="{ 'opacity-100': isLoading || isProcessing }"
+  >
+    {{ message }}
+    <form
+      ref="form"
+      class="hidden"
+    >
+      <input
+        :id="inputId"
+        ref="input"
+        name="files[]"
+        type="file"
+        accept="image/*, application/pdf"
+        @change="upload"
+      >
+    </form>
+  </label>
+</template>
+
+<script>
+import Upload from './upload'
+
+export default {
+  name: 'ReplaceDocument',
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    isDirectUpload: {
+      type: Boolean,
+      required: true,
+      default: false
+    }
+  },
+  emits: ['success'],
+  data () {
+    return {
+      isLoading: false,
+      isProcessing: false
+    }
+  },
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    },
+    message () {
+      if (this.isLoading) {
+        return 'Uploading...'
+      } else if (this.isProcessing) {
+        return 'Processing...'
+      } else {
+        return 'Replace'
+      }
+    }
+  },
+  mounted () {
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+  },
+  methods: {
+    upload: Upload.methods.upload
+  }
+}
+</script>

app/models/template.rb

@@ -44,6 +44,9 @@ class Template < ApplicationRecord
 
   has_many_attached :documents
 
+  has_many :schema_documents, ->(e) { where(uuid: e.schema.pluck('attachment_uuid')) },
+           class_name: 'ActiveStorage::Attachment', dependent: :destroy, as: :record, inverse_of: :record
+
   has_many :submissions, dependent: :destroy
 
   scope :active, -> { where(deleted_at: nil) }

app/views/templates/edit.html.erb

@@ -1 +1 @@
-<template-builder data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-template="<%= @template.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></template-builder>
+<template-builder data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-template="<%= @template.as_json.merge(documents: @template.schema_documents.as_json(include: { preview_images: { methods: %i[url metadata filename] } })).to_json %>"></template-builder>