style documents preview
This commit is contained in:
Alex Turchyn
@@ -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])
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
@@ -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'
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
ref="image"
|
||||
:src="image.url"
|
||||
:width="width"
|
||||
class="shadow-md mb-4"
|
||||
:height="height"
|
||||
loading="lazy"
|
||||
>
|
||||
|
||||
@@ -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)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="withArrows"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<button
|
||||
class="px-1.5"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
class="px-1.5"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</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>
|
||||
@@ -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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
Hellp
|
||||
<div>
|
||||
<div class="max-w-6xl mx-auto px-2 py-3">
|
||||
<%= 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 %> |
|
||||
|
||||
@@ -1 +1,16 @@
|
||||
<flow-builder data-flow="<%= @flow.to_json(include: { documents: { include: { preview_images: { methods: %i[url metadata filename] } } } }) %>"></flow-builder>
|
||||
<!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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user