refactor and fixes

app/javascript/application.js

@@ -49,6 +49,7 @@ document.addEventListener('turbo:before-fetch-request', encodeMethodIntoRequestB
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
     this.appElem = document.createElement('div')
+    this.appElem.classList.add('max-h-screen')
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template)),

app/javascript/template_builder/area.vue

@@ -226,14 +226,14 @@ export default {
       }
     },
     startResizeCell (e) {
-      document.addEventListener('mousemove', this.onResizeCell)
-      document.addEventListener('mouseup', this.stopResizeCell)
+      this.$el.getRootNode().addEventListener('mousemove', this.onResizeCell)
+      this.$el.getRootNode().addEventListener('mouseup', this.stopResizeCell)
 
       this.$emit('start-resize', 'ew')
     },
     stopResizeCell (e) {
-      document.removeEventListener('mousemove', this.onResizeCell)
-      document.removeEventListener('mouseup', this.stopResizeCell)
+      this.$el.getRootNode().removeEventListener('mousemove', this.onResizeCell)
+      this.$el.getRootNode().removeEventListener('mouseup', this.stopResizeCell)
 
       this.$emit('stop-resize')
 
@@ -266,11 +266,13 @@ export default {
       })
     },
     onNameBlur (e) {
+      const text = this.$refs.name.innerText.trim()
+
       this.isNameFocus = false
       this.$refs.name.style.minWidth = ''
 
-      if (e.target.innerText.trim()) {
-        this.field.name = e.target.innerText.trim()
+      if (text) {
+        this.field.name = text
       } else {
         this.field.name = ''
         this.$refs.name.innerText = this.defaultName
@@ -302,14 +304,14 @@ export default {
 
       this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
 
-      document.addEventListener('mousemove', this.drag)
-      document.addEventListener('mouseup', this.stopDrag)
+      this.$el.getRootNode().addEventListener('mousemove', this.drag)
+      this.$el.getRootNode().addEventListener('mouseup', this.stopDrag)
 
       this.$emit('start-drag')
     },
     stopDrag () {
-      document.removeEventListener('mousemove', this.drag)
-      document.removeEventListener('mouseup', this.stopDrag)
+      this.$el.getRootNode().removeEventListener('mousemove', this.drag)
+      this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag)
 
       if (this.isDragged) {
         this.save()
@@ -322,14 +324,14 @@ export default {
     startResize () {
       this.selectedAreaRef.value = this.area
 
-      document.addEventListener('mousemove', this.resize)
-      document.addEventListener('mouseup', this.stopResize)
+      this.$el.getRootNode().addEventListener('mousemove', this.resize)
+      this.$el.getRootNode().addEventListener('mouseup', this.stopResize)
 
       this.$emit('start-resize', 'nwse')
     },
     stopResize () {
-      document.removeEventListener('mousemove', this.resize)
-      document.removeEventListener('mouseup', this.stopResize)
+      this.$el.getRootNode().removeEventListener('mousemove', this.resize)
+      this.$el.getRootNode().removeEventListener('mouseup', this.stopResize)
 
       this.$emit('stop-resize')
 

app/javascript/template_builder/builder.vue

@@ -1,13 +1,17 @@
 <template>
   <div
     style="max-width: 1600px"
-    class="mx-auto pl-4"
+    class="mx-auto pl-4 h-full"
   >
     <div class="flex justify-between py-1.5 items-center pr-4">
       <div class="flex space-x-3">
-        <a href="/">
+        <a
+          v-if="withLogoLink"
+          href="/"
+        >
           <Logo />
         </a>
+        <Logo v-else />
         <Contenteditable
           :model-value="template.name"
           class="text-3xl font-semibold focus:text-clip"
@@ -16,46 +20,53 @@
         />
       </div>
       <div class="space-x-3 flex items-center">
-        <a
-          :href="`/templates/${template.id}/submissions/new`"
-          data-turbo-frame="modal"
-          class="btn btn-primary"
-        >
-          <IconUsersPlus
-            width="20"
-            class="inline"
-          />
-          <span class="hidden md:inline">
-            Recipients
-          </span>
-        </a>
-        <button
-          class="base-button"
-          :class="{ disabled: isSaving }"
-          v-bind="isSaving ? { disabled: true } : {}"
-          @click.prevent="onSaveClick"
-        >
-          <IconInnerShadowTop
-            v-if="isSaving"
-            width="20"
-            class="animate-spin"
-          />
-          <IconDeviceFloppy
-            v-else
-            width="20"
-          />
-          <span class="hidden md:inline">
-            Save
-          </span>
-        </button>
+        <slot
+          v-if="$slots.buttons"
+          name="buttons"
+        />
+        <template v-else>
+          <a
+            :href="`/templates/${template.id}/submissions/new`"
+            data-turbo-frame="modal"
+            class="btn btn-primary"
+          >
+            <IconUsersPlus
+              width="20"
+              class="inline"
+            />
+            <span class="hidden md:inline">
+              Recipients
+            </span>
+          </a>
+          <button
+            class="base-button"
+            :class="{ disabled: isSaving }"
+            v-bind="isSaving ? { disabled: true } : {}"
+            @click.prevent="onSaveClick"
+          >
+            <IconInnerShadowTop
+              v-if="isSaving"
+              width="20"
+              class="animate-spin"
+            />
+            <IconDeviceFloppy
+              v-else
+              width="20"
+            />
+            <span class="hidden md:inline">
+              Save
+            </span>
+          </button>
+        </template>
       </div>
     </div>
     <div
       class="flex"
-      style="max-height: calc(100vh - 60px)"
+      style="max-height: calc(100% - 60px)"
     >
       <div
         ref="previews"
+        :style="{ 'display': isBreakpointLg ? 'none' : 'initial' }"
         class="overflow-y-auto overflow-x-hidden w-52 flex-none pr-3 mt-0.5 pt-0.5 hidden lg:block"
       >
         <DocumentPreview
@@ -94,19 +105,46 @@
             @success="updateFromUpload"
           />
           <template v-else>
-            <Document
+            <template
               v-for="document in sortedDocuments"
               :key="document.uuid"
-              :ref="setDocumentRefs"
-              :areas-index="fieldAreasIndex[document.uuid]"
-              :selected-submitter="selectedSubmitter"
-              :document="document"
-              :is-drag="!!dragFieldType"
-              :draw-field="drawField"
-              @draw="onDraw"
-              @drop-field="onDropfield"
-              @remove-area="removeArea"
-            />
+            >
+              <Document
+                :ref="setDocumentRefs"
+                :areas-index="fieldAreasIndex[document.uuid]"
+                :selected-submitter="selectedSubmitter"
+                :document="document"
+                :is-drag="!!dragFieldType"
+                :draw-field="drawField"
+                @draw="onDraw"
+                @drop-field="onDropfield"
+                @remove-area="removeArea"
+              />
+              <DocumentControls
+                v-if="isBreakpointLg"
+                :with-arrows="template.schema.length > 1"
+                :item="template.schema.find((item) => item.attachment_uuid === document.uuid)"
+                :document="document"
+                :template="template"
+                :is-direct-upload="isDirectUpload"
+                class="pb-2 mb-2 border-b border-base-300 border-dashed"
+                @remove="onDocumentRemove"
+                @replace="onDocumentReplace"
+                @up="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), -1)"
+                @down="moveDocument(template.schema.find((item) => item.attachment_uuid === document.uuid), 1)"
+                @change="save"
+              />
+            </template>
+            <div
+              v-if="sortedDocuments.length && isBreakpointLg"
+              class="pb-4"
+            >
+              <Upload
+                :template-id="template.id"
+                :is-direct-upload="isDirectUpload"
+                @success="updateFromUpload"
+              />
+            </div>
           </template>
         </div>
         <div
@@ -122,7 +160,7 @@
         </div>
       </div>
       <div
-        class="relative w-80 flex-none pt-0.5 pr-4 pl-0.5 hidden md:block"
+        class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
         :class="drawField ? 'overflow-hidden' : 'overflow-auto'"
       >
         <div
@@ -149,6 +187,7 @@
             :fields="template.fields"
             :submitters="template.submitters"
             :selected-submitter="selectedSubmitter"
+            :with-sticky-submitters="withStickySubmitters"
             @set-draw="drawField = $event"
             @set-drag="dragFieldType = $event"
             @change-submitter="selectedSubmitter = $event"
@@ -169,6 +208,7 @@ import Document from './document'
 import Logo from './logo'
 import Contenteditable from './contenteditable'
 import DocumentPreview from './preview'
+import DocumentControls from './controls'
 import { IconUsersPlus, IconDeviceFloppy, IconInnerShadowTop } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed } from 'vue'
@@ -182,6 +222,7 @@ export default {
     Logo,
     Dropzone,
     DocumentPreview,
+    DocumentControls,
     IconInnerShadowTop,
     Contenteditable,
     IconUsersPlus,
@@ -191,6 +232,7 @@ export default {
     return {
       template: this.template,
       save: this.save,
+      baseFetch: this.baseFetch,
       selectedAreaRef: computed(() => this.selectedAreaRef)
     }
   },
@@ -201,13 +243,34 @@ export default {
     },
     isDirectUpload: {
       type: Boolean,
-      required: true,
+      required: false,
       default: false
+    },
+    baseUrl: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withLogoLink: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    withStickySubmitters: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    fetchOptions: {
+      type: Object,
+      required: false,
+      default: () => ({ headers: {} })
     }
   },
   data () {
     return {
       documentRefs: [],
+      isBreakpointLg: false,
       isSaving: false,
       selectedSubmitter: null,
       drawField: null,
@@ -244,15 +307,28 @@ export default {
     this.selectedSubmitter = this.template.submitters[0]
   },
   mounted () {
+    this.$nextTick(() => {
+      this.onWindowResize()
+    })
+
     document.addEventListener('keyup', this.onKeyUp)
+
+    window.addEventListener('resize', this.onWindowResize)
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
+
+    window.removeEventListener('resize', this.onWindowResize)
   },
   beforeUpdate () {
     this.documentRefs = []
   },
   methods: {
+    onWindowResize (e) {
+      const breakpointLg = 1024
+
+      this.isBreakpointLg = this.$el.getRootNode().children[0].offsetWidth < breakpointLg
+    },
     setDocumentRefs (el) {
       if (el) {
         this.documentRefs.push(el)
@@ -474,10 +550,18 @@ export default {
 
       this.selectedAreaRef.value = area
     },
+    baseFetch (path, options = {}) {
+      return fetch(this.baseUrl + path, {
+        ...options,
+        headers: { ...this.fetchOptions.headers, ...options.headers }
+      })
+    },
     save () {
-      this.$el.closest('template-builder').dataset.template = JSON.stringify(this.template)
+      if (this.$el.closest('template-builder')) {
+        this.$el.closest('template-builder').dataset.template = JSON.stringify(this.template)
+      }
 
-      return fetch(`/api/templates/${this.template.id}`, {
+      return this.baseFetch(`/api/templates/${this.template.id}`, {
         method: 'PUT',
         body: JSON.stringify({
           template: {

app/javascript/template_builder/controls.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex space-x-2">
+    <Contenteditable
+      class="w-full block mr-6"
+      :model-value="item.name"
+      :icon-width="16"
+      @update:model-value="onUpdateName"
+    />
+    <ReplaceButton
+      :is-direct-upload="isDirectUpload"
+      :template-id="template.id"
+      @click.stop
+      @success="$emit('replace', { replaceSchemaItem: item, ...$event })"
+    />
+    <button
+      v-if="withArrows"
+      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('up', item)"
+    >
+      &uarr;
+    </button>
+    <button
+      v-if="withArrows"
+      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('down', item)"
+    >
+      &darr;
+    </button>
+    <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', item)"
+    >
+      &times;
+    </button>
+  </div>
+</template>
+
+<script>
+import Contenteditable from './contenteditable'
+import Upload from './upload'
+import ReplaceButton from './replace'
+
+export default {
+  name: 'DocumentControls',
+  components: {
+    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: ['change', 'remove', 'up', 'down', 'replace'],
+  mounted () {
+    if (this.isDirectUpload) {
+      import('@rails/activestorage')
+    }
+  },
+  methods: {
+    upload: Upload.methods.upload,
+    onUpdateName (value) {
+      this.item.name = value
+
+      this.$emit('change')
+    }
+  }
+}
+</script>

app/javascript/template_builder/dropzone.vue

@@ -61,6 +61,7 @@ export default {
     IconCloudUpload,
     IconInnerShadowTop
   },
+  inject: ['baseFetch'],
   props: {
     templateId: {
       type: [Number, String],

app/javascript/template_builder/field.vue

@@ -58,7 +58,7 @@
             <label
               tabindex="0"
               title="Areas"
-              class="cursor-pointer text-base-100 group-hover:text-base-content"
+              class="cursor-pointer text-transparent group-hover:text-base-content"
             >
               <IconShape
                 :width="18"
@@ -104,7 +104,7 @@
           <button
             v-else
             title="Areas"
-            class="relative cursor-pointer text-base-100 group-hover:text-base-content"
+            class="relative cursor-pointer text-transparent group-hover:text-base-content"
             @click="$emit('set-draw', field)"
           >
             <IconShape
@@ -113,7 +113,7 @@
             />
           </button>
           <button
-            class="relative text-base-100 group-hover:text-base-content"
+            class="relative text-transparent group-hover:text-base-content"
             title="Remove"
             @click="$emit('remove', field)"
           >
@@ -122,7 +122,7 @@
               :stroke-width="1.6"
             />
           </button>
-          <div class="flex flex-col pr-1 text-base-100 group-hover:text-base-content">
+          <div class="flex flex-col pr-1 text-transparent group-hover:text-base-content">
             <button
               title="Up"
               class="relative"
@@ -156,7 +156,7 @@
           </span>
           <input
             v-model="field.options[index]"
-            class="w-full input input-primary input-xs text-sm"
+            class="w-full input input-primary input-xs text-sm bg-transparent"
             type="text"
             required
             @blur="save"
@@ -254,8 +254,10 @@ export default {
       })
     },
     onNameBlur (e) {
-      if (e.target.innerText.trim()) {
-        this.field.name = e.target.innerText.trim()
+      const text = this.$refs.name.$refs.contenteditable.innerText.trim()
+
+      if (text) {
+        this.field.name = text
       } else {
         this.field.name = ''
         this.$refs.name.$refs.contenteditable.innerText = this.defaultName

app/javascript/template_builder/fields.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="sticky -top-1 bg-base-100 pt-1 -mt-1 z-10">
+  <div :class="withStickySubmitters ? 'sticky top-0 z-10' : ''">
     <FieldSubmitter
       :model-value="selectedSubmitter.uuid"
-      class="w-full bg-base-100"
+      class="w-full rounded-lg"
+      :class="{ 'bg-base-100': withStickySubmitters }"
       :submitters="submitters"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -28,7 +29,7 @@
       v-for="(icon, type) in fieldIcons"
       :key="type"
       draggable="true"
-      class="flex items-center justify-center border border-dashed border-base-300 bg-base-100 w-full rounded relative"
+      class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
       @dragstart="onDragstart(type)"
       @dragend="$emit('drag-end')"
       @click="addField(type)"
@@ -106,6 +107,11 @@ export default {
       type: Array,
       required: true
     },
+    withStickySubmitters: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitters: {
       type: Array,
       required: true

app/javascript/template_builder/page.vue

@@ -4,7 +4,7 @@
       ref="image"
       :src="image.url"
       :width="width"
-      class="shadow-md mb-4"
+      class="border rounded mb-4"
       :height="height"
       loading="lazy"
     >

app/javascript/template_builder/replace.vue

@@ -26,6 +26,7 @@ import Upload from './upload'
 
 export default {
   name: 'ReplaceDocument',
+  inject: ['baseFetch'],
   props: {
     templateId: {
       type: [Number, String],

app/javascript/template_builder/upload.vue

@@ -50,6 +50,7 @@ export default {
     IconUpload,
     IconInnerShadowTop
   },
+  inject: ['baseFetch'],
   props: {
     templateId: {
       type: [Number, String],
@@ -113,7 +114,7 @@ export default {
 
         this.isProcessing = true
 
-        fetch(`/api/templates/${this.templateId}/documents`, {
+        this.baseFetch(`/api/templates/${this.templateId}/documents`, {
           method: 'POST',
           body: JSON.stringify({ blobs }),
           headers: { 'Content-Type': 'application/json' }
@@ -124,7 +125,7 @@ export default {
           this.isProcessing = false
         })
       } else {
-        fetch(`/api/templates/${this.templateId}/documents`, {
+        this.baseFetch(`/api/templates/${this.templateId}/documents`, {
           method: 'POST',
           body: new FormData(this.$refs.form)
         }).then(resp => resp.json()).then((data) => {