didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

template builder adjustments

Browse Source
This commit is contained in:
Alex Turchyn
2023-06-08 00:20:42 +03:00
parent 7ccafa49bf
commit 00e3ee15ef
8 changed files with 102 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/area.vue
+22 -10
View File
@@ -6,7 +6,7 @@
@mousedown.stop="startDrag"
>
<div
v-if="isSelected"
v-if="isSelected || !field?.type"
class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
:class="borderColors[submitterIndex]"
/>
@@ -31,7 +31,7 @@
:button-width="27"
:button-classes="'px-1'"
:menu-classes="'bg-white rounded-t-none'"
@update:model-value="maybeDeleteOptions"
@update:model-value="maybeUpdateOptions"
@click="selectedAreaRef.value = area"
/>
<span
@@ -45,10 +45,10 @@
@blur="onNameBlur"
>{{ field.name || defaultName }}</span>
<button
class="pl-0.5 pr-1.5"
class="pr-1"
@click.prevent="$emit('remove')"
>
<span>&times;</span>
<IconX width="14" />
</button>
</div>
<div
@@ -57,16 +57,22 @@
>
<span
v-if="field"
class="flex justify-center items-center space-x-1"
class="flex justify-center items-center space-x-1 h-full"
>
<component :is="fieldIcons[field.type]" />
<component
:is="fieldIcons[field.type]"
width="100%"
height="100%"
class="max-h-10"
/>
</span>
</div>
<div
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
/>
<span
class="h-2.5 w-2.5 -right-1.5 rounded-full -bottom-1.5 bg-white shadow border absolute cursor-nwse-resize"
v-if="field?.type"
class="h-2.5 w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
@mousedown.stop="startResize"
/>
</div>
@@ -76,12 +82,14 @@
import FieldSubmitter from './field_submitter'
import FieldType from './field_type'
import Field from './field'
import { IconX } from '@tabler/icons-vue'
export default {
name: 'FieldArea',
components: {
FieldType,
FieldSubmitter
FieldSubmitter,
IconX
},
inject: ['template', 'selectedAreaRef'],
props: {
@@ -160,10 +168,14 @@ export default {
}, 1)
}
},
maybeDeleteOptions () {
if (!['radio', 'select', 'checkbox'].includes(this.field.type)) {
maybeUpdateOptions () {
if (!['radio', 'checkbox', 'select'].includes(this.field.type)) {
delete this.field.options
}
if (this.field.type === 'select') {
this.field.options ||= ['']
}
},
onNameBlur (e) {
this.isNameFocus = false
app/javascript/template_builder/builder.vue
+25 -8
View File
@@ -77,6 +77,7 @@
:selected-submitter="selectedSubmitter"
:document="document"
:is-drag="!!dragFieldType"
:is-draw="!!drawField"
@draw="onDraw"
@drop-field="onDropfield"
@remove-area="removeArea"
@@ -91,10 +92,19 @@
v-if="drawField"
class="sticky inset-0 bg-base-100 h-full"
>
Draw {{ drawField.name }} field on the page
<button @click="drawField = false">
Cancel
</button>
<div class="bg-base-300 rounded-lg p-5 text-center space-y-4">
<p>
Draw {{ drawField.name }} field on the document
</p>
<p>
<button
class="base-button"
@click="drawField = false"
>
Cancel
</button>
</p>
</div>
</div>
<div>
<Fields
@@ -244,12 +254,19 @@ export default {
const type = (pageMask.clientWidth * area.w) < 35 ? 'checkbox' : 'text'
if (type === 'checkbox') {
const previousField = [...this.template.fields].reverse().find((f) => f.type === type)
const previousArea = previousField?.areas?.[previousField.areas.length - 1]
const areaW = previousArea?.w || (30 / pageMask.clientWidth)
const areaH = previousArea?.h || (30 / pageMask.clientHeight)
if ((pageMask.clientWidth * area.w) < 5) {
area.x = area.x - (30 / pageMask.clientWidth) / 2
area.y = area.y - (30 / pageMask.clientHeight) / 2
area.x = area.x - (areaW / 2)
area.y = area.y - (areaH / 2)
}
area.w = 30 / pageMask.clientWidth
area.h = 30 / pageMask.clientHeight
area.w = areaW
area.h = areaH
}
const field = {
app/javascript/template_builder/document.vue
+6
View File
@@ -7,6 +7,7 @@
:number="index"
:areas="areasIndex[index]"
:is-drag="isDrag"
:is-draw="isDraw"
:selected-submitter="selectedSubmitter"
:image="image"
@drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
@@ -37,6 +38,11 @@ export default {
type: Object,
required: true
},
isDraw: {
type: Boolean,
required: false,
default: false
},
isDrag: {
type: Boolean,
required: false,
app/javascript/template_builder/field.vue
+19 -6
View File
@@ -1,17 +1,21 @@
<template>
<div
class="group pb-2"
@click="field.areas?.[0] && $emit('scroll-to', field.areas[0])"
>
<div
class="border border-base-300 rounded rounded-tr-none relative group"
>
<div
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
@click="scrollToFirstArea"
/>
<div class="flex items-center justify-between space-x-1">
<div class="flex items-center p-1 space-x-1">
<FieldType
v-model="field.type"
:button-width="20"
@update:model-value="maybeDeleteOptions"
@update:model-value="maybeUpdateOptions"
@click="scrollToFirstArea"
/>
<Contenteditable
ref="name"
@@ -19,7 +23,7 @@
:icon-inline="true"
:icon-width="18"
:icon-stroke-width="1.6"
@focus="onNameFocus"
@focus="[onNameFocus(), scrollToFirstArea()]"
@blur="onNameBlur"
/>
</div>
@@ -72,7 +76,7 @@
</ul>
</span>
<button
class=" text-base-100 group-hover:text-base-content"
class="relative text-base-100 group-hover:text-base-content"
title="Remove"
@click="$emit('remove', field)"
>
@@ -84,6 +88,7 @@
<div class="flex flex-col pr-1 text-base-100 group-hover:text-base-content">
<button
title="Up"
class="relative"
style="font-size: 10px; margin-bottom: -2px"
@click="$emit('move-up')"
>
@@ -91,6 +96,7 @@
</button>
<button
title="Down"
class="relative"
style="font-size: 10px; margin-top: -2px"
@click="$emit('move-down')"
>
@@ -176,13 +182,20 @@ export default {
}, 1)
}
},
scrollToFirstArea () {
return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
},
closeDropdown () {
document.activeElement.blur()
},
maybeDeleteOptions () {
if (!['radio', 'select', 'checkbox'].includes(this.field.type)) {
maybeUpdateOptions () {
if (!['radio', 'checkbox', 'select'].includes(this.field.type)) {
delete this.field.options
}
if (this.field.type === 'select') {
this.field.options ||= ['']
}
},
onNameBlur (e) {
if (e.target.innerText.trim()) {
app/javascript/template_builder/field_submitter.vue
+12 -2
View File
@@ -14,7 +14,7 @@
<label
v-else
tabindex="0"
class="rounded-md p-2 border border-base-300 w-full flex justify-between"
class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
>
<div class="flex items-center space-x-2">
<span
@@ -23,6 +23,7 @@
/>
<Contenteditable
v-model="selectedSubmitter.name"
class="cursor-text"
:icon-inline="true"
:icon-width="18"
/>
@@ -126,6 +127,15 @@ export default {
'bg-purple-600'
]
},
names () {
return [
'First Submitter',
'Second Submitter',
'Third Submitter',
'Fourth Submitter',
'Fifth Submitter'
]
},
selectedSubmitter () {
return this.submitters.find((e) => e.uuid === this.modelValue)
}
@@ -141,7 +151,7 @@ export default {
},
addSubmitter () {
const newSubmitter = {
name: `Submitter ${this.submitters.length + 1}`,
name: this.names[this.submitters.length],
uuid: v4()
}
app/javascript/template_builder/fields.vue
+11 -6
View File
@@ -116,16 +116,21 @@ export default {
}
},
move (field, direction) {
const currentIndex = this.fields.indexOf(field)
const currentIndex = this.submitterFields.indexOf(field)
const fieldsIndex = this.fields.indexOf(field)
this.fields.splice(currentIndex, 1)
this.fields.splice(fieldsIndex, 1)
if (currentIndex + direction > this.fields.length) {
this.fields.unshift(field)
if (currentIndex + direction > this.submitterFields.length) {
const firstIndex = this.fields.indexOf(this.submitterFields[0])
this.fields.splice(firstIndex, 0, field)
} else if (currentIndex + direction < 0) {
this.fields.push(field)
const lastIndex = this.fields.indexOf(this.submitterFields[this.submitterFields.length - 1])
this.fields.splice(lastIndex + 1, 0, field)
} else {
this.fields.splice(currentIndex + direction, 0, field)
this.fields.splice(fieldsIndex + direction, 0, field)
}
},
removeField (field) {
app/javascript/template_builder/page.vue
+6 -1
View File
@@ -35,7 +35,7 @@
id="mask"
ref="mask"
class="top-0 bottom-0 left-0 right-0 absolute z-10"
:class="{ 'cursor-grab': isDrag || isMove, ' cursor-nwse-resize': isResize }"
:class="{ 'cursor-grab': isDrag || isMove, 'cursor-nwse-resize': isResize || isDraw }"
@pointermove="onPointermove"
@dragover.prevent
@drop="onDrop"
@@ -66,6 +66,11 @@ export default {
type: Object,
required: true
},
isDraw: {
type: Boolean,
required: false,
default: false
},
isDrag: {
type: Boolean,
required: false,