style documents preview

app/javascript/flow_builder/builder.vue

@@ -1,68 +1,101 @@
 <template>
   <div
-    class="flex"
-    style="max-height: calc(100vh - 24px)"
+    style="max-width: 1600px"
+    class="mx-auto px-4"
   >
-    <div
-      class="overflow-auto w-full"
-      style="max-width: 280px"
-    >
-      Show documents preview (not pages but documents)
-      Allow to edit name
-      Allow to reorder
-      {{ flow.schema }}
-      <Upload
-        :flow-id="flow.id"
-        @success="updateFromUpload"
-      />
-      <button
-        class="bg-green-300"
-        @click="save"
-      >
-        Save changes
-      </button>
-
-      <a
-        :href="`/flows/${flow.id}/submissions`"
-      >
-        Add Recepients
-      </a>
-    </div>
-    <div class="w-full overflow-auto">
-      <Document
-        v-for="document in sortedDocuments"
-        :key="document.uuid"
-        :areas-index="fieldAreasIndex[document.uuid]"
-        :document="document"
-        :is-draw="!!drawField"
-        :is-drag="!!dragFieldType"
-        @draw="onDraw"
-        @drop-field="onDropfield"
+    <div class="flex justify-between py-1.5 items-center">
+      <Contenteditable
+        :model-value="flow.name"
+        class="text-3xl focus:text-clip"
+        @update:model-value="updateName"
       />
+      <div class="space-x-3 flex items-center">
+        <a
+          :href="`/flows/${flow.id}/submissions`"
+          class="btn btn-primary"
+        >
+          <IconUsersPlus
+            width="20"
+            class="mr-2 inline"
+          />
+          Recipients
+        </a>
+        <a
+          :href="`/`"
+          class="base-button"
+          v-bind="isSaving ? { disabled: true } : {}"
+          @click.prevent="onSaveClick"
+        ><IconDeviceFloppy
+          width="20"
+          class="mr-2"
+        />Save</a>
+      </div>
     </div>
     <div
-      class="w-full relative"
-      :class="drawField ? 'overflow-hidden' : 'overflow-auto'"
-      style="max-width: 280px"
+      class="flex"
+      style="max-height: calc(100vh - 60px)"
     >
       <div
-        v-if="drawField"
-        class="sticky inset-0 bg-white h-full"
+        ref="previews"
+        class="overflow-auto w-52 flex-none pr-4 mt-0.5 pt-0.5"
       >
-        Draw {{ drawField.name }} field on the page
-        <button @click="drawField = false">
-          Cancel
-        </button>
-      </div>
-      <div>
-        FIelds
-        <Fields
-          ref="fields"
-          v-model:fields="flow.fields"
-          @set-draw="drawField = $event"
-          @set-drag="dragFieldType = $event"
-          @drag-end="dragFieldType = null"
+        <DocumentPreview
+          v-for="(item, index) in flow.schema"
+          :key="index"
+          :with-arrows="flow.schema.length > 1"
+          :item="item"
+          :document="sortedDocuments[index]"
+          @scroll-to="scrollIntoDocument(item)"
+          @remove="onDocumentRemove"
+          @up="moveDocument(item, -1)"
+          @down="moveDocument(item, 1)"
+          @change="save"
         />
+        <div class="sticky bottom-0 bg-base-100 py-2">
+          <Upload
+            :flow-id="flow.id"
+            @success="updateFromUpload"
+          />
+        </div>
+      </div>
+      <div class="w-full overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5">
+        <div class="px-3">
+          <Document
+            v-for="document in sortedDocuments"
+            :key="document.uuid"
+            :ref="setDocumentRefs"
+            :areas-index="fieldAreasIndex[document.uuid]"
+            :document="document"
+            :is-draw="!!drawField"
+            :is-drag="!!dragFieldType"
+            @draw="onDraw"
+            @drop-field="onDropfield"
+          />
+        </div>
+      </div>
+      <div
+        class="relative w-72 flex-none"
+        :class="drawField ? 'overflow-hidden' : 'overflow-auto'"
+      >
+        <div
+          v-if="drawField"
+          class="sticky inset-0 bg-white h-full"
+        >
+          Draw {{ drawField.name }} field on the page
+          <button @click="drawField = false">
+            Cancel
+          </button>
+        </div>
+        <div>
+          FIelds
+          <Fields
+            ref="fields"
+            v-model:fields="flow.fields"
+            @set-draw="drawField = $event"
+            @set-drag="dragFieldType = $event"
+            @drag-end="dragFieldType = null"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -72,13 +105,20 @@
 import Upload from './upload'
 import Fields from './fields'
 import Document from './document'
+import Contenteditable from './contenteditable'
+import DocumentPreview from './preview'
+import { IconUsersPlus, IconDeviceFloppy } from '@tabler/icons-vue'
 
 export default {
   name: 'FlowBuilder',
   components: {
     Upload,
     Document,
-    Fields
+    Fields,
+    DocumentPreview,
+    Contenteditable,
+    IconUsersPlus,
+    IconDeviceFloppy
   },
   props: {
     flow: {
@@ -88,6 +128,8 @@ export default {
   },
   data () {
     return {
+      documentRefs: [],
+      isSaving: false,
       drawField: null,
       dragFieldType: null
     }
@@ -120,7 +162,20 @@ export default {
   unmounted () {
     document.removeEventListener('keyup', this.disableDrawOnEsc)
   },
+  beforeUpdate () {
+    this.documentRefs = []
+  },
   methods: {
+    setDocumentRefs (el) {
+      if (el) {
+        this.documentRefs.push(el)
+      }
+    },
+    scrollIntoDocument (item) {
+      const ref = this.documentRefs.find((e) => e.document.uuid === item.attachment_uuid)
+
+      ref.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    },
     disableDrawOnEsc (e) {
       if (e.code === 'Escape') {
         this.drawField = null
@@ -139,8 +194,50 @@ export default {
       this.flow.schema.push(...schema)
       this.flow.documents.push(...documents)
 
+      this.$nextTick(() => {
+        this.$refs.previews.scrollTop = this.$refs.previews.scrollHeight
+
+        this.scrollIntoDocument(schema[0])
+      })
+
       this.save()
     },
+    updateName (value) {
+      this.flow.name = value
+
+      this.save()
+    },
+    onDocumentRemove (item) {
+      if (window.confirm('Are you sure?')) {
+        this.flow.schema.splice(this.flow.schema.indexOf(item), 1)
+      }
+
+      this.save()
+    },
+    moveDocument (item, direction) {
+      const currentIndex = this.flow.schema.indexOf(item)
+
+      this.flow.schema.splice(currentIndex, 1)
+
+      if (currentIndex + direction > this.flow.schema.length) {
+        this.flow.schema.unshift(item)
+      } else if (currentIndex + direction < 0) {
+        this.flow.schema.push(item)
+      } else {
+        this.flow.schema.splice(currentIndex + direction, 0, item)
+      }
+
+      this.save()
+    },
+    onSaveClick () {
+      this.isSaving = true
+
+      this.save().then(() => {
+        window.Turbo.visit('/')
+      }).finally(() => {
+        this.isSaving = false
+      })
+    },
     save () {
       return fetch(`/api/flows/${this.flow.id}`, {
         method: 'PUT',

app/javascript/flow_builder/contenteditable.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="group flex items-center relative overflow-visible">
+    <div
+      ref="contenteditable"
+      contenteditable
+      style="min-width: 2px"
+      class="peer outline-none"
+      @keydown.enter.prevent="onEnter"
+      @blur="onBlur"
+    >
+      {{ value }}
+    </div>
+    <IconPencil
+      contenteditable="false"
+      class="absolute ml-1 cursor-pointer inline opacity-0 group-hover:opacity-100 peer-focus:opacity-0 align-middle"
+      :style="{ right: -(1.1 * iconWidth) + 'px' }"
+      :width="iconWidth"
+      @click="onPencilClick"
+    />
+  </div>
+</template>
+
+<script>
+import { IconPencil } from '@tabler/icons-vue'
+
+export default {
+  name: 'ContenteditableField',
+  components: {
+    IconPencil
+  },
+  props: {
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    iconWidth: {
+      type: Number,
+      required: false,
+      default: 30
+    }
+  },
+  emits: ['update:model-value'],
+  data () {
+    return {
+      value: ''
+    }
+  },
+  watch: {
+    modelValue: {
+      handler (value) {
+        this.value = value
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onBlur (e) {
+      this.value = this.$refs.contenteditable.innerText.trim() || this.modelValue
+
+      this.$emit('update:model-value', this.value)
+    },
+    onPencilClick () {
+      this.$refs.contenteditable.focus()
+    },
+    onEnter () {
+      this.$refs.contenteditable.blur()
+    }
+  }
+}
+</script>

app/javascript/flow_builder/document.vue

@@ -1,16 +1,18 @@
 <template>
-  <Page
-    v-for="(image, index) in sortedPreviewImages"
-    :key="image.id"
-    :number="index"
-    :areas="areasIndex[index]"
-    :is-draw="isDraw"
-    :is-drag="isDrag"
-    :class="{ 'cursor-crosshair': isDraw }"
-    :image="image"
-    @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
-    @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
-  />
+  <div>
+    <Page
+      v-for="(image, index) in sortedPreviewImages"
+      :key="image.id"
+      :number="index"
+      :areas="areasIndex[index]"
+      :is-draw="isDraw"
+      :is-drag="isDrag"
+      :class="{ 'cursor-crosshair': isDraw }"
+      :image="image"
+      @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
+      @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
+    />
+  </div>
 </template>
 <script>
 import Page from './page'

app/javascript/flow_builder/page.vue

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

app/javascript/flow_builder/preview.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div class="relative">
+      <img
+        :src="previewImage.url"
+        :width="previewImage.metadata.width"
+        :height="previewImage.metadata.height"
+        class="rounded border"
+        loading="lazy"
+      >
+      <div
+        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute"
+        @click="$emit('scroll-to', item)"
+      >
+        <div
+          class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
+        >
+          <div>
+            <button
+              class="px-1.5 rounded bg-white border border-red-400 text-red-400 hover:bg-red-50"
+              @click.stop="$emit('remove', item)"
+            >
+              &times;
+            </button>
+          </div>
+          <div
+            v-if="withArrows"
+            class="flex flex-col"
+          >
+            <button
+              class="px-1.5"
+              @click.stop="$emit('up', item)"
+            >
+              &uarr;
+            </button>
+            <button
+              class="px-1.5"
+              @click.stop="$emit('down', item)"
+            >
+              &darr;
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex py-2">
+      <Contenteditable
+        :model-value="item.name"
+        :icon-width="16"
+        class="mx-auto"
+        @update:model-value="onUpdateName"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Contenteditable from './contenteditable'
+
+export default {
+  name: 'DocumentPreview',
+  components: {
+    Contenteditable
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    document: {
+      type: Object,
+      required: true
+    },
+    withArrows: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ['scroll-to', 'change', 'remove', 'up', 'down'],
+  computed: {
+    previewImage () {
+      return this.document.preview_images[0]
+    }
+  },
+  methods: {
+    onUpdateName (value) {
+      this.item.name = value
+
+      this.$emit('change')
+    }
+  }
+}
+</script>

app/javascript/flow_builder/upload.vue

@@ -1,17 +1,36 @@
 <template>
-  <input
-    ref="input"
-    type="file"
-    multiple
-    @change="upload"
-  >
+  <div>
+    <label
+      :for="inputId"
+      class="btn btn-outline w-full"
+      :class="{ 'btn-disabled': isLoading }"
+    >
+      <IconUpload
+        width="20"
+        class="mr-2"
+      />
+      Add Document
+    </label>
+    <input
+      :id="inputId"
+      ref="input"
+      type="file"
+      class="hidden"
+      multiple
+      @change="upload"
+    >
+  </div>
 </template>
 
 <script>
 import { DirectUpload } from '@rails/activestorage'
+import { IconUpload } from '@tabler/icons-vue'
 
 export default {
   name: 'DocumentsUpload',
+  components: {
+    IconUpload
+  },
   props: {
     flowId: {
       type: [Number, String],
@@ -19,8 +38,20 @@ export default {
     }
   },
   emits: ['success'],
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    }
+  },
   methods: {
     async upload () {
+      this.isLoading = true
+
       const blobs = await Promise.all(
         Array.from(this.$refs.input.files).map(async (file) => {
           const upload = new DirectUpload(
@@ -52,6 +83,8 @@ export default {
       }).then(resp => resp.json()).then((data) => {
         this.$emit('success', data)
         this.$refs.input.value = ''
+      }).finally(() => {
+        this.isLoading = false
       })
     }
   }