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

add heading field

Browse Source
This commit is contained in:
Pete Matsyburka
2024-07-11 21:40:15 +03:00
parent 21c087cba7
commit 286b8d7067
8 changed files with 89 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/area.vue
+57 -51
View File
@@ -9,7 +9,7 @@
<div <div
v-if="isSelected || isDraw" v-if="isSelected || isDraw"
class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none" class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
:class="borderColors[submitterIndex]" :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
/> />
<div <div
v-if="field.type === 'cells' && (isSelected || isDraw)" v-if="field.type === 'cells' && (isSelected || isDraw)"
@@ -19,7 +19,7 @@
v-for="(cellW, index) in cells" v-for="(cellW, index) in cells"
:key="index" :key="index"
class="absolute top-0 bottom-0 border-r" class="absolute top-0 bottom-0 border-r"
:class="borderColors[submitterIndex]" :class="field.type === 'heading' ? '' : borderColors[submitterIndex]"
:style="{ left: (cellW / area.w * 100) + '%' }" :style="{ left: (cellW / area.w * 100) + '%' }"
> >
<span <span
@@ -31,14 +31,14 @@
</div> </div>
</div> </div>
<div <div
v-if="field?.type" v-if="field?.type && (isSelected || isNameFocus)"
class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap group-hover:flex group-hover:z-10" class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10"
:class="{ 'flex z-10': isNameFocus || isSelected, invisible: !isNameFocus && !isSelected }"
style="top: -25px; height: 25px" style="top: -25px; height: 25px"
@mousedown.stop @mousedown.stop
@pointerdown.stop @pointerdown.stop
> >
<FieldSubmitter <FieldSubmitter
v-if="field.type != 'heading'"
v-model="field.submitter_uuid" v-model="field.submitter_uuid"
class="border-r" class="border-r"
:compact="true" :compact="true"
@@ -61,7 +61,7 @@
<span <span
v-if="field.type !== 'checkbox' || field.name" v-if="field.type !== 'checkbox' || field.name"
ref="name" ref="name"
:contenteditable="editable && !defaultField" :contenteditable="editable && !defaultField && field.type !== 'heading'"
dir="auto" dir="auto"
class="pr-1 cursor-text outline-none block" class="pr-1 cursor-text outline-none block"
style="min-width: 2px" style="min-width: 2px"
@@ -71,11 +71,11 @@
@blur="onNameBlur" @blur="onNameBlur"
>{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span> >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
<div <div
v-if="isSettingsFocus || isContenteditable || (isNameFocus && !['checkbox', 'phone'].includes(field.type))" v-if="isSettingsFocus || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
class="flex items-center ml-1.5" class="flex items-center ml-1.5"
> >
<input <input
v-if="!isContenteditable" v-if="!isValueInput"
:id="`required-checkbox-${field.uuid}`" :id="`required-checkbox-${field.uuid}`"
v-model="field.required" v-model="field.required"
type="checkbox" type="checkbox"
@@ -83,14 +83,14 @@
@mousedown.prevent @mousedown.prevent
> >
<label <label
v-if="!isContenteditable" v-if="!isValueInput"
:for="`required-checkbox-${field.uuid}`" :for="`required-checkbox-${field.uuid}`"
class="label text-xs" class="label text-xs"
@click.prevent="field.required = !field.required" @click.prevent="field.required = !field.required"
@mousedown.prevent @mousedown.prevent
>{{ t('required') }}</label> >{{ t('required') }}</label>
<input <input
v-if="isContenteditable" v-if="isValueInput"
:id="`readonly-checkbox-${field.uuid}`" :id="`readonly-checkbox-${field.uuid}`"
type="checkbox" type="checkbox"
class="checkbox checkbox-xs no-animation rounded" class="checkbox checkbox-xs no-animation rounded"
@@ -99,14 +99,14 @@
@mousedown.prevent @mousedown.prevent
> >
<label <label
v-if="isContenteditable" v-if="isValueInput"
:for="`readonly-checkbox-${field.uuid}`" :for="`readonly-checkbox-${field.uuid}`"
class="label text-xs" class="label text-xs"
@click.prevent="field.readonly = !(field.readonly ?? true)" @click.prevent="field.readonly = !(field.readonly ?? true)"
@mousedown.prevent @mousedown.prevent
>{{ t('editable') }}</label> >{{ t('editable') }}</label>
<span <span
v-if="field.type !== 'payment' && !isContenteditable" v-if="field.type !== 'payment' && !isValueInput"
class="dropdown dropdown-end" class="dropdown dropdown-end"
@mouseenter="renderDropdown = true" @mouseenter="renderDropdown = true"
@touchstart="renderDropdown = true" @touchstart="renderDropdown = true"
@@ -157,17 +157,19 @@
</button> </button>
</div> </div>
<div <div
ref="touchValueTarget"
class="flex items-center h-full w-full" class="flex items-center h-full w-full"
dir="auto" dir="auto"
:class="[isContenteditable ? 'bg-opacity-50' : 'bg-opacity-80', bgColors[submitterIndex], isDefaultValuePresent || isContenteditable ? (alignClasses[field.preferences?.align] || '') : 'justify-center']" :class="[isValueInput ? 'bg-opacity-50' : 'bg-opacity-80', field.type === 'heading' ? 'bg-gray-50' : bgColors[submitterIndex], isDefaultValuePresent || isValueInput ? (alignClasses[field.preferences?.align] || '') : 'justify-center']"
@click="focusValueInput"
> >
<span <span
v-if="field" v-if="field"
class="flex justify-center items-center space-x-1 h-full" class="flex justify-center items-center space-x-1"
:class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }" :class="{ 'w-full': ['cells', 'checkbox'].includes(field.type), 'h-full': !isValueInput }"
> >
<div <div
v-if="isDefaultValuePresent || isContenteditable" v-if="isDefaultValuePresent || isValueInput"
:class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }" :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type), 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
> >
<div <div
@@ -181,7 +183,7 @@
:class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }" :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
/> />
<span <span
v-else-if="field.type === 'number' && !isContenteditable" v-else-if="field.type === 'number' && !isValueInput"
class="whitespace-pre-wrap" class="whitespace-pre-wrap"
>{{ formatNumber(field.default_value, field.preferences?.format) }}</span> >{{ formatNumber(field.default_value, field.preferences?.format) }}</span>
<span <span
@@ -205,13 +207,13 @@
<span <span
v-else v-else
ref="defaultValue" ref="defaultValue"
:contenteditable="isContenteditable" :contenteditable="isValueInput"
class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400" class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
:class="{ 'cursor-text': isContenteditable }" :class="{ 'cursor-text': isValueInput }"
:placeholder="t('type_value')" :placeholder="t('type_value')"
@blur="onDefaultValueBlur" @blur="onDefaultValueBlur"
@paste.prevent="onPaste" @paste.prevent="onPaste"
@keydown.enter.prevent="onDefaultValueEnter" @keydown.enter="onDefaultValueEnter"
>{{ field.default_value }}</span> >{{ field.default_value }}</span>
</div> </div>
</div> </div>
@@ -225,7 +227,7 @@
</span> </span>
</div> </div>
<div <div
v-if="!isContenteditable" v-if="!isValueInput"
ref="touchTarget" ref="touchTarget"
class="absolute top-0 bottom-0 right-0 left-0" class="absolute top-0 bottom-0 right-0 left-0"
:class="isDragged ? 'cursor-grab' : 'cursor-pointer'" :class="isDragged ? 'cursor-grab' : 'cursor-pointer'"
@@ -355,6 +357,9 @@ export default {
return this.field?.default_value || this.field?.default_value === 0 return this.field?.default_value || this.field?.default_value === 0
} }
}, },
isValueInput () {
return (this.field.type === 'heading' && this.isSelected) || this.isContenteditable
},
modalContainerEl () { modalContainerEl () {
return this.$el.getRootNode().querySelector('#docuseal_modal_container') return this.$el.getRootNode().querySelector('#docuseal_modal_container')
}, },
@@ -481,16 +486,7 @@ export default {
if (['text', 'number'].includes(this.field.type)) { if (['text', 'number'].includes(this.field.type)) {
this.isContenteditable = true this.isContenteditable = true
this.$nextTick(() => { this.$nextTick(() => this.focusValueInput())
this.$refs.defaultValue.focus()
if (this.$refs.defaultValue.innerText.length) {
window.getSelection().collapse(
this.$refs.defaultValue.firstChild,
this.$refs.defaultValue.innerText.length
)
}
})
} else if (this.field.type === 'checkbox') { } else if (this.field.type === 'checkbox') {
this.field.readonly = !this.field.readonly this.field.readonly = !this.field.readonly
this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true
@@ -503,6 +499,18 @@ export default {
this.save() this.save()
} }
}, },
focusValueInput () {
if (this.$refs.defaultValue !== document.activeElement) {
this.$refs.defaultValue.focus()
if (this.$refs.defaultValue.innerText.length) {
window.getSelection().collapse(
this.$refs.defaultValue.firstChild,
this.$refs.defaultValue.innerText.length
)
}
}
},
formatNumber (number, format) { formatNumber (number, format) {
if (format === 'comma') { if (format === 'comma') {
return new Intl.NumberFormat('en-US').format(number) return new Intl.NumberFormat('en-US').format(number)
@@ -572,6 +580,10 @@ export default {
delete this.field.options delete this.field.options
} }
if (['heading'].includes(this.field.type)) {
this.field.readonly = true
}
if (['select', 'multiple', 'radio'].includes(this.field.type)) { if (['select', 'multiple', 'radio'].includes(this.field.type)) {
this.field.options ||= [{ value: '', uuid: v4() }] this.field.options ||= [{ value: '', uuid: v4() }]
} }
@@ -633,7 +645,11 @@ export default {
this.save() this.save()
}, },
onDefaultValueEnter (e) { onDefaultValueEnter (e) {
this.$refs.defaultValue.blur() if (this.field.type !== 'heading') {
e.preventDefault()
this.$refs.defaultValue.blur()
}
}, },
onNameEnter (e) { onNameEnter (e) {
this.$refs.name.blur() this.$refs.name.blur()
@@ -652,24 +668,8 @@ export default {
this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight this.area.y = (e.offsetY - this.dragFrom.y) / e.target.clientHeight
} }
}, },
startDrag (e) {
this.selectedAreaRef.value = this.area
if (!this.editable) {
return
}
const rect = e.target.getBoundingClientRect()
this.dragFrom = { x: e.clientX - rect.left, y: e.clientY - rect.top }
this.$el.getRootNode().addEventListener('mousemove', this.drag)
this.$el.getRootNode().addEventListener('mouseup', this.stopDrag)
this.$emit('start-drag')
},
startTouchDrag (e) { startTouchDrag (e) {
if (e.target !== this.$refs.touchTarget) { if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
return return
} }
@@ -714,11 +714,13 @@ export default {
this.$emit('stop-drag') this.$emit('stop-drag')
}, },
startMouseMove (e) { startMouseMove (e) {
if (e.target !== this.$refs.touchTarget) { if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) {
return return
} }
document.activeElement?.blur() if (document.activeElement !== this.$refs.defaultValue) {
document.activeElement?.blur()
}
e.preventDefault() e.preventDefault()
@@ -728,6 +730,10 @@ export default {
this.selectedAreaRef.value = this.area this.selectedAreaRef.value = this.area
if (this.field.type === 'heading') {
this.$nextTick(() => this.focusValueInput())
}
this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY } this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
this.$el.getRootNode().addEventListener('mousemove', this.mouseMove) this.$el.getRootNode().addEventListener('mousemove', this.mouseMove)
app/javascript/template_builder/builder.vue
+11 -2
View File
@@ -327,7 +327,7 @@
{{ t('cancel') }} {{ t('cancel') }}
</button> </button>
<a <a
v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials'].includes(drawField?.type || drawFieldType)" v-if="!drawField && !drawOption && !['stamp', 'signature', 'initials', 'heading'].includes(drawField?.type || drawFieldType)"
href="#" href="#"
class="link block mt-3 text-sm" class="link block mt-3 text-sm"
@click.prevent="[addField(drawFieldType), drawField = null, drawOption = null, withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]" @click.prevent="[addField(drawFieldType), drawField = null, drawOption = null, withSelectedFieldType ? '' : drawFieldType = '', showDrawField = false]"
@@ -1120,7 +1120,7 @@ export default {
field.options = [{ value: '', uuid: v4() }] field.options = [{ value: '', uuid: v4() }]
} }
if (field.type === 'stamp') { if (['stamp', 'heading'].includes(field.type)) {
field.readonly = true field.readonly = true
} }
@@ -1204,6 +1204,15 @@ export default {
this.save() this.save()
document.activeElement?.blur() document.activeElement?.blur()
if (field.type === 'heading') {
this.$nextTick(() => {
const documentRef = this.documentRefs.find((e) => e.document.uuid === area.attachment_uuid)
const areaRef = documentRef.pageRefs[area.page].areaRefs.find((ref) => ref.area === this.selectedAreaRef.value)
areaRef.focusValueInput()
})
}
}, },
addBlankPage () { addBlankPage () {
this.isLoadingBlankPage = true this.isLoadingBlankPage = true
app/javascript/template_builder/field.vue
+13 -6
View File
@@ -14,7 +14,7 @@
<div class="flex items-center p-1 space-x-1"> <div class="flex items-center p-1 space-x-1">
<FieldType <FieldType
v-model="field.type" v-model="field.type"
:editable="editable && !defaultField" :editable="editable && !defaultField && field.type != 'heading'"
:button-width="20" :button-width="20"
:menu-classes="'mt-1.5'" :menu-classes="'mt-1.5'"
:menu-style="{ backgroundColor: dropdownBgColor }" :menu-style="{ backgroundColor: dropdownBgColor }"
@@ -24,7 +24,7 @@
<Contenteditable <Contenteditable
ref="name" ref="name"
:model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName" :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
:editable="editable && !defaultField" :editable="editable && !defaultField && field.type != 'heading'"
:icon-inline="true" :icon-inline="true"
:icon-width="18" :icon-width="18"
:icon-stroke-width="1.6" :icon-stroke-width="1.6"
@@ -96,7 +96,7 @@
@click-description="isShowDescriptionModal = true" @click-description="isShowDescriptionModal = true"
/> />
<span <span
v-else v-else-if="field.type !== 'heading'"
class="dropdown dropdown-end" class="dropdown dropdown-end"
@mouseenter="renderDropdown = true" @mouseenter="renderDropdown = true"
@touchstart="renderDropdown = true" @touchstart="renderDropdown = true"
@@ -357,9 +357,12 @@ export default {
} else { } else {
const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field) const typeIndex = fields.filter((f) => f.type === field.type).indexOf(field)
const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field') if (this.field.type === 'heading') {
return `${this.fieldNames[field.type]} ${typeIndex + 1}`
return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}` } else {
const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field')
return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}`
}
} }
}, },
onNameFocus (e) { onNameFocus (e) {
@@ -417,6 +420,10 @@ export default {
this.field.options ||= [{ value: '', uuid: v4() }] this.field.options ||= [{ value: '', uuid: v4() }]
} }
if (['heading'].includes(this.field.type)) {
this.field.readonly = true
}
(this.field.areas || []).forEach((area) => { (this.field.areas || []).forEach((area) => {
if (this.field.type === 'cells') { if (this.field.type === 'cells') {
area.cell_w = area.w * 2 / Math.floor(area.w / area.h) area.cell_w = area.w * 2 / Math.floor(area.w / area.h)
app/javascript/template_builder/field_type.vue
+4 -2
View File
@@ -51,7 +51,7 @@
</template> </template>
<script> <script>
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1 } from '@tabler/icons-vue' import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconLetterCaseUpper, IconCreditCard, IconRubberStamp, IconSquareNumber1, IconHeading } from '@tabler/icons-vue'
export default { export default {
name: 'FiledTypeDropdown', name: 'FiledTypeDropdown',
@@ -96,6 +96,7 @@ export default {
computed: { computed: {
fieldNames () { fieldNames () {
return { return {
heading: this.t('heading'),
text: this.t('text'), text: this.t('text'),
signature: this.t('signature'), signature: this.t('signature'),
initials: this.t('initials'), initials: this.t('initials'),
@@ -115,6 +116,7 @@ export default {
}, },
fieldIcons () { fieldIcons () {
return { return {
heading: IconHeading,
text: IconTextSize, text: IconTextSize,
signature: IconWritingSign, signature: IconWritingSign,
initials: IconLetterCaseUpper, initials: IconLetterCaseUpper,
@@ -140,7 +142,7 @@ export default {
return acc return acc
}, {}) }, {})
} else { } else {
return this.fieldIcons return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading'))
} }
} }
}, },
app/javascript/template_builder/fields.vue
+1 -1
View File
@@ -277,7 +277,7 @@ export default {
return acc return acc
}, {}) }, {})
} else { } else {
return this.fieldIcons return Object.fromEntries(Object.entries(this.fieldIcons).filter(([key]) => key !== 'heading'))
} }
}, },
submitterFields () { submitterFields () {
app/javascript/template_builder/i18n.js
+1
View File
@@ -8,6 +8,7 @@ const en = {
uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Uploaded PDF contains form fields. Keep or remove them?', uploaded_pdf_contains_form_fields_keep_or_remove_them: 'Uploaded PDF contains form fields. Keep or remove them?',
keep: 'Keep', keep: 'Keep',
left: 'Left', left: 'Left',
heading: 'Heading',
validation: 'Validation', validation: 'Validation',
add_blank_page: 'Add blank page', add_blank_page: 'Add blank page',
right: 'Right', right: 'Right',
lib/submissions/generate_audit_trail.rb
+1
View File
@@ -224,6 +224,7 @@ module Submissions
submission.template_fields.filter_map do |field| submission.template_fields.filter_map do |field|
next if field['submitter_uuid'] != submitter.uuid next if field['submitter_uuid'] != submitter.uuid
next if field['type'] == 'heading'
submitter_field_counters[field['type']] += 1 submitter_field_counters[field['type']] += 1
lib/submitters/serialize_for_webhook.rb
+1
View File
@@ -48,6 +48,7 @@ module Submitters
submitter_field_counters[field['type']] += 1 submitter_field_counters[field['type']] += 1
next if field['submitter_uuid'] != submitter.uuid next if field['submitter_uuid'] != submitter.uuid
next if field['type'] == 'heading'
field_name = field_name =
field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}" field['name'].presence || "#{field['type'].titleize} Field #{submitter_field_counters[field['type']]}"