style documents preview

app/controllers/flows_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class FlowsController < ApplicationController
+  layout false
+
   def show
     @flow = current_account.flows.preload(documents_attachments: { preview_images_attachments: :blob })
                            .find(params[:id])

app/javascript/flow_builder/builder.vue

@@ -1,37 +1,69 @@
 <template>
+  <div
+    style="max-width: 1600px"
+    class="mx-auto px-4"
+  >
+    <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="flex"
-    style="max-height: calc(100vh - 24px)"
+      style="max-height: calc(100vh - 60px)"
     >
       <div
-      class="overflow-auto w-full"
+        ref="previews"
-      style="max-width: 280px"
+        class="overflow-auto w-52 flex-none pr-4 mt-0.5 pt-0.5"
       >
-      Show documents preview (not pages but documents)
+        <DocumentPreview
-      Allow to edit name
+          v-for="(item, index) in flow.schema"
-      Allow to reorder
+          :key="index"
-      {{ flow.schema }}
+          :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"
           />
-      <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">
+      </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"
@@ -40,10 +72,10 @@
             @drop-field="onDropfield"
           />
         </div>
+      </div>
       <div
-      class="w-full relative"
+        class="relative w-72 flex-none"
         :class="drawField ? 'overflow-hidden' : 'overflow-auto'"
-      style="max-width: 280px"
       >
         <div
           v-if="drawField"
@@ -66,19 +98,27 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 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,4 +1,5 @@
 <template>
+  <div>
     <Page
       v-for="(image, index) in sortedPreviewImages"
       :key="image.id"
@@ -11,6 +12,7 @@
       @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>
+  <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
       })
     }
   }

app/views/dashboard/index.html.erb

@@ -1,12 +1,5 @@
-Hellp
+<div class="max-w-6xl mx-auto px-2 py-3">
-<div>
   <%= link_to 'Create Flow', new_flow_path, data: { turbo_frame: :modal } %>
-  <%= link_to 'Storage settings', settings_storage_index_path %>
-  <%= link_to 'Email settings', settings_email_index_path %>
-  <%= link_to 'eSign', settings_esign_index_path %>
-  <%= link_to 'Users', settings_users_path %>
-</div>
-<div>
   <% @flows.each do |flow| %>
     <div>
       <%= flow.name %> |

app/views/flows/show.html.erb

@@ -1 +1,16 @@
+<!DOCTYPE html>
+<html data-theme="docuseal" class="h-full">
+  <head>
+    <title>
+      Docuseal
+    </title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <%= javascript_pack_tag 'application', defer: true %>
+    <%= stylesheet_pack_tag 'application', media: 'all' %>
+  </head>
+  <body class="h-full" data>
     <flow-builder data-flow="<%= @flow.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></flow-builder>
+  </body>
+</html>

package.json

@@ -9,6 +9,7 @@
     "@github/catalyst": "^2.0.0-beta",
     "@hotwired/turbo-rails": "^7.3.0",
     "@rails/activestorage": "^7.0.4-3",
+    "@tabler/icons-vue": "^2.20.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "9.1.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",

yarn.lock

@@ -1131,6 +1131,18 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.25.24.tgz#8c7688559979f7079aacaf31aa881c3aa410b718"
   integrity sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==
 
+"@tabler/icons-vue@^2.20.0":
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons-vue/-/icons-vue-2.20.0.tgz#e8ff057727feceb58e480643d9fa0aace135c5b8"
+  integrity sha512-KLu2XjeUBScUlTq3GbISinXsolBnEIm/nGdQoUqlWaFH5haBlHYmv/pHTZuBdW32uRxzGnidxfu/LT3DvAU/AQ==
+  dependencies:
+    "@tabler/icons" "2.20.0"
+
+"@tabler/icons@2.20.0":
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-2.20.0.tgz#42a11bb91b9d347fdf6b296274cf68998122bb10"
+  integrity sha512-BsUEJoqREs8bqcrf5HfJBq6/rDvsRI3h+T+0X1o7i8LBHonsH0iAngcyL0I82YKoSy9NiVDvM3LV63zDP0nPYQ==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"