adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding first self editable text-field for prefills portion

Browse Source
pull/150/merge^2
iozeey 2 years ago
parent 15fe135ce7
commit d809bf6684
17 changed files with 268 additions and 93 deletions
Show Stats Download Patch File Download Diff File

2
app/controllers/api/templates_controller.rb
Unescape View File

@ -53,7 +53,7 @@ module Api
def template_params def template_params
params.require(:template).permit( params.require(:template).permit(
:name, :name, values: {},
schema: [%i[attachment_uuid name]], schema: [%i[attachment_uuid name]],
submitters: [%i[name uuid]], submitters: [%i[name uuid]],
fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value, fields: [[:uuid, :submitter_uuid, :name, :type, :required, :readonly, :default_value,

1
app/javascript/form.js
Unescape View File

@ -10,6 +10,7 @@ window.customElements.define('submission-form', class extends HTMLElement {
this.app = createApp(Form, { this.app = createApp(Form, {
submitter: JSON.parse(this.dataset.submitter), submitter: JSON.parse(this.dataset.submitter),
templateValues: JSON.parse(this.dataset.templateValues),
authenticityToken: this.dataset.authenticityToken, authenticityToken: this.dataset.authenticityToken,
canSendEmail: this.dataset.canSendEmail === 'true', canSendEmail: this.dataset.canSendEmail === 'true',
isDirectUpload: this.dataset.isDirectUpload === 'true', isDirectUpload: this.dataset.isDirectUpload === 'true',

49
app/javascript/submission_form/area.vue
Unescape View File

@ -21,20 +21,19 @@
/> />
</span> </span>
</div> </div>
<div </div>
v-else <!-- show myText prefill with stored value -->
class="flex items-center px-0.5" <div
> v-else-if="field.type === 'my_text'"
<span v-if="Array.isArray(modelValue)"> class="flex absolute"
{{ modelValue.join(', ') }} :style="{ ...computedStyle, backgroundColor: 'white' }"
</span> :class="{ 'cursor-default ': !submittable, 'border ': submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
<span v-else-if="field.type === 'date'"> >
{{ formattedDate }} <span
</span> style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2;"
<span v-else> class="!text-2xl w-full h-full"
{{ modelValue }} v-text="showLocalText"
</span> />
</div>
</div> </div>
<div <div
@ -248,12 +247,20 @@ export default {
area: { area: {
type: Object, type: Object,
required: true required: true
},
templateValues: {
type: Object,
required: false,
default () {
return {}
}
} }
}, },
emits: ['update:model-value'], emits: ['update:model-value'],
data () { data () {
return { return {
textOverflowChars: 0 textOverflowChars: 0,
showLocalText: ''
} }
}, },
computed: { computed: {
@ -271,7 +278,8 @@ export default {
radio: 'Radio', radio: 'Radio',
multiple: 'Multiple Select', multiple: 'Multiple Select',
phone: 'Phone', phone: 'Phone',
redact: 'redact' redact: 'Redact',
my_text: 'My Text'
} }
}, },
fieldIcons () { fieldIcons () {
@ -345,6 +353,15 @@ export default {
} }
}, },
mounted () { mounted () {
if (this.field.type === 'my_text') {
const fieldUuid = this.field.uuid
if (this.templateValues && this.templateValues[fieldUuid]) {
this.showLocalText = this.templateValues[fieldUuid]
} else {
this.showLocalText = ''
}
}
if (this.field.type === 'text' && this.$refs.textContainer) { if (this.field.type === 'text' && this.$refs.textContainer) {
this.$nextTick(() => { this.$nextTick(() => {
this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0 this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0

8
app/javascript/submission_form/areas.vue
Unescape View File

@ -25,6 +25,7 @@
:with-label="withLabel" :with-label="withLabel"
:is-value-set="step.some((f) => f.uuid in values)" :is-value-set="step.some((f) => f.uuid in values)"
:attachments-index="attachmentsIndex" :attachments-index="attachmentsIndex"
:template-values="templateValues"
@click="$emit('focus-step', step)" @click="$emit('focus-step', step)"
/> />
</Teleport> </Teleport>
@ -66,6 +67,13 @@ export default {
type: Array, type: Array,
required: false, required: false,
default: () => [] default: () => []
},
templateValues: {
type: Object,
required: false,
default () {
return {}
}
} }
}, },
emits: ['focus-step'], emits: ['focus-step'],

8
app/javascript/submission_form/form.vue
Unescape View File

@ -6,6 +6,7 @@
:attachments-index="attachmentsIndex" :attachments-index="attachmentsIndex"
:with-label="!isAnonymousChecboxes" :with-label="!isAnonymousChecboxes"
:current-step="currentStepFields" :current-step="currentStepFields"
:template-values="templateValues"
@focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']" @focus-step="[saveStep(), goToStep($event, false, true), currentField.type !== 'checkbox' ? isFormVisible = true : '']"
/> />
<button <button
@ -65,6 +66,9 @@
@focus="$refs.areas.scrollIntoField(currentField)" @focus="$refs.areas.scrollIntoField(currentField)"
/> />
</div> </div>
<div v-if="['my_text'].includes(currentField.type)">
<!-- do nothing on this side just chill for now -->
</div>
<DateStep <DateStep
v-else-if="currentField.type === 'date'" v-else-if="currentField.type === 'date'"
:key="currentField.uuid" :key="currentField.uuid"
@ -375,6 +379,10 @@ export default {
type: Object, type: Object,
required: true required: true
}, },
templateValues: {
type: Object,
required: true
},
canSendEmail: { canSendEmail: {
type: Boolean, type: Boolean,
required: false, required: false,

48
app/javascript/template_builder/area.vue
Unescape View File

@ -39,6 +39,7 @@
@pointerdown.stop @pointerdown.stop
> >
<FieldSubmitter <FieldSubmitter
v-if="(field.type !== 'my_text')"
v-model="field.submitter_uuid" v-model="field.submitter_uuid"
class="border-r" class="border-r"
:compact="true" :compact="true"
@ -49,6 +50,7 @@
@click="selectedAreaRef.value = area" @click="selectedAreaRef.value = area"
/> />
<FieldType <FieldType
v-if="(field.type !== 'my_text')"
v-model="field.type" v-model="field.type"
:button-width="27" :button-width="27"
:editable="editable" :editable="editable"
@ -68,7 +70,7 @@
@blur="onNameBlur" @blur="onNameBlur"
>{{ optionIndexText }} {{ field.name || defaultName }}</span> >{{ optionIndexText }} {{ field.name || defaultName }}</span>
<div <div
v-if="isNameFocus && !['checkbox', 'phone', 'redact'].includes(field.type)" v-if="isNameFocus && !['checkbox', 'phone', 'redact', 'my_text'].includes(field.type)"
class="flex items-center ml-1.5" class="flex items-center ml-1.5"
> >
<input <input
@ -110,6 +112,23 @@
/> />
</span> </span>
</div> </div>
<!-- adding editable textarea for prefills -->
<div
v-else-if="field.type === 'my_text'"
class="flex items-center justify-center h-full w-full"
style="background-color: rgb(185, 185, 185);"
>
<textarea
:id="field.uuid"
ref="textarea"
:value="myLocalText"
style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2;"
class="!text-2xl w-full h-full"
:placeholder="`type here`"
:name="`values[${field.uuid}]`"
@input="makeMyText"
/>
</div>
<div <div
v-else v-else
class="flex items-center h-full w-full" class="flex items-center h-full w-full"
@ -140,6 +159,7 @@
</span> </span>
</div> </div>
<div <div
v-if="field.type !== 'my_text'"
ref="touchTarget" ref="touchTarget"
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer" class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
/> />
@ -156,7 +176,7 @@
import FieldSubmitter from './field_submitter' import FieldSubmitter from './field_submitter'
import FieldType from './field_type' import FieldType from './field_type'
import Field from './field' import Field from './field'
import { IconX } from '@tabler/icons-vue' import { IconX, IconWriting } from '@tabler/icons-vue'
import { v4 } from 'uuid' import { v4 } from 'uuid'
export default { export default {
@ -164,7 +184,8 @@ export default {
components: { components: {
FieldType, FieldType,
FieldSubmitter, FieldSubmitter,
IconX IconX,
IconWriting
}, },
inject: ['template', 'selectedAreaRef', 'save'], inject: ['template', 'selectedAreaRef', 'save'],
props: { props: {
@ -188,12 +209,13 @@ export default {
default: null default: null
} }
}, },
emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove'], emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'update:myText'],
data () { data () {
return { return {
isResize: false, isResize: false,
isDragged: false, isDragged: false,
isNameFocus: false, isNameFocus: false,
myLocalText: '',
textOverflowChars: 0, textOverflowChars: 0,
dragFrom: { x: 0, y: 0 } dragFrom: { x: 0, y: 0 }
} }
@ -278,6 +300,15 @@ export default {
} }
}, },
mounted () { mounted () {
if (this.field.type === 'my_text') {
const fieldUuid = this.field.uuid
if (this.template.values && this.template.values[fieldUuid]) {
this.myLocalText = this.template.values[fieldUuid]
} else {
this.myLocalText = ''
}
}
if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) { if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
this.$nextTick(() => { this.$nextTick(() => {
this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0 this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
@ -285,6 +316,15 @@ export default {
} }
}, },
methods: { methods: {
makeMyText (e) {
this.myLocalText = e.target.value ? e.target.value : this.myLocalText
this.sendSaveText(
{ [this.field.uuid]: e.target.value }
)
},
sendSaveText (event) {
this.$emit('update:myText', event)
},
onNameFocus (e) { onNameFocus (e) {
this.selectedAreaRef.value = this.area this.selectedAreaRef.value = this.area

15
app/javascript/template_builder/builder.vue
Unescape View File

@ -134,6 +134,7 @@
@draw="onDraw" @draw="onDraw"
@drop-field="onDropfield" @drop-field="onDropfield"
@remove-area="removeArea" @remove-area="removeArea"
@update:my-text="updateMyText"
/> />
<DocumentControls <DocumentControls
v-if="isBreakpointLg && editable" v-if="isBreakpointLg && editable"
@ -426,6 +427,11 @@ export default {
this.documentRefs = [] this.documentRefs = []
}, },
methods: { methods: {
updateMyText (values) {
const existingValues = this.template.values || {}
const updatedValues = { ...existingValues, ...values }
this.template.values = updatedValues
},
startFieldDraw (type) { startFieldDraw (type) {
const field = { const field = {
name: '', name: '',
@ -435,7 +441,9 @@ export default {
submitter_uuid: this.selectedSubmitter.uuid, submitter_uuid: this.selectedSubmitter.uuid,
type type
} }
if (['redact', 'my_text'].includes(type)) {
field.required = 'false'
}
if (['select', 'multiple', 'radio'].includes(type)) { if (['select', 'multiple', 'radio'].includes(type)) {
field.options = [{ value: '', uuid: v4() }] field.options = [{ value: '', uuid: v4() }]
} }
@ -611,7 +619,7 @@ export default {
...this.dragField ...this.dragField
} }
if (['redact'].includes(field.type)) { if (['redact', 'my_text'].includes(field.type)) {
field.required = 'false' field.required = 'false'
} }
if (['select', 'multiple', 'radio'].includes(field.type)) { if (['select', 'multiple', 'radio'].includes(field.type)) {
@ -785,7 +793,8 @@ export default {
name: this.template.name, name: this.template.name,
schema: this.template.schema, schema: this.template.schema,
submitters: this.template.submitters, submitters: this.template.submitters,
fields: this.template.fields fields: this.template.fields,
values: this.template.values
} }
}), }),
headers: { 'Content-Type': 'application/json' } headers: { 'Content-Type': 'application/json' }

3
app/javascript/template_builder/document.vue
Unescape View File

@ -14,6 +14,7 @@
@drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })" @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
@remove-area="$emit('remove-area', $event)" @remove-area="$emit('remove-area', $event)"
@draw="$emit('draw', {...$event, attachment_uuid: document.uuid })" @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
@update:my-text="$emit('update:myText', $event)"
/> />
</div> </div>
</template> </template>
@ -60,7 +61,7 @@ export default {
default: false default: false
} }
}, },
emits: ['draw', 'drop-field', 'remove-area'], emits: ['draw', 'drop-field', 'remove-area', 'update:myText'],
data () { data () {
return { return {
pageRefs: [] pageRefs: []

2
app/javascript/template_builder/field.vue
Unescape View File

@ -31,7 +31,7 @@
/> />
</div> </div>
<div <div
v-if="isNameFocus && !['redact'].includes(field.type)" v-if="isNameFocus && !['redact', 'my_text'].includes(field.type)"
class="flex items-center relative" class="flex items-center relative"
> >
<template v-if="field.type != 'phone'"> <template v-if="field.type != 'phone'">

88
app/javascript/template_builder/field_submitter.vue
Unescape View File

@ -97,33 +97,64 @@
:class="colors[submitters.indexOf(selectedSubmitter)]" :class="colors[submitters.indexOf(selectedSubmitter)]"
/> />
</label> </label>
<label <!-- adding button to show and hide prefills -->
<div
v-else v-else
tabindex="0"
class="cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 w-full flex justify-between"
> >
<div class="flex items-center space-x-2"> <label
<span v-if="!showNewFields"
class="w-3 h-3 rounded-full" class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
:class="colors[submitters.indexOf(selectedSubmitter)]" @click="$emit('add-prefills')"
/> >
<Contenteditable <div class="flex items-center space-x-2">
v-model="selectedSubmitter.name" <span
class="cursor-text" style="background-color: grey;"
:icon-inline="true" class="w-3 h-3 rounded-full"
:editable="editable" />
:select-on-edit-click="true" <div class="items-center space-x-2">Show Prefills</div>
:icon-width="18" </div>
@update:model-value="$emit('name-change', selectedSubmitter)" </label>
/>
</div> <label
<span class="flex items-center"> v-else
<IconPlus class="cursor-pointer rounded-md p-2 border border-base-300 w-full flex justify-between"
width="18" @click="$emit('add-prefills')"
height="18" >
/> <div class="flex items-center space-x-2">
</span> <span
</label> style="background-color: grey;"
class="w-3 h-3 rounded-full"
/>
<div class="items-center space-x-2">Hide Prefills</div>
</div>
</label>
<label
tabindex="0"
class="cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 w-full flex justify-between"
>
<div class="flex items-center space-x-2">
<span
class="w-3 h-3 rounded-full"
:class="colors[submitters.indexOf(selectedSubmitter)]"
/>
<Contenteditable
v-model="selectedSubmitter.name"
class="cursor-text"
:icon-inline="true"
:editable="editable"
:select-on-edit-click="true"
:icon-width="18"
@update:model-value="$emit('name-change', selectedSubmitter)"
/>
</div>
<span class="flex items-center">
<IconPlus
width="18"
height="18"
/>
</span>
</label>
</div>
<ul <ul
v-if="editable || !compact" v-if="editable || !compact"
tabindex="0" tabindex="0"
@ -192,6 +223,11 @@ export default {
IconChevronUp IconChevronUp
}, },
props: { props: {
showNewFields: {
type: Boolean,
required: false,
default: false
},
submitters: { submitters: {
type: Array, type: Array,
required: true required: true
@ -221,7 +257,7 @@ export default {
default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10' default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10'
} }
}, },
emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'], emits: ['update:model-value', 'remove', 'new-submitter', 'name-change', 'add-prefills'],
computed: { computed: {
colors () { colors () {
return [ return [

8
app/javascript/template_builder/field_type.vue
Unescape View File

@ -46,7 +46,7 @@
</template> </template>
<script> <script>
import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconBarrierBlock, IconLetterCaseUpper } from '@tabler/icons-vue' import { IconTextSize, IconWritingSign, IconCalendarEvent, IconPhoto, IconCheckbox, IconPaperclip, IconSelect, IconCircleDot, IconChecks, IconColumns3, IconPhoneCheck, IconBarrierBlock, IconLetterCaseUpper, IconTextResize } from '@tabler/icons-vue'
export default { export default {
name: 'FiledTypeDropdown', name: 'FiledTypeDropdown',
inject: ['withPhone'], inject: ['withPhone'],
@ -92,7 +92,8 @@ export default {
radio: 'Radio', radio: 'Radio',
cells: 'Cells', cells: 'Cells',
phone: 'Phone', phone: 'Phone',
redact: 'redact' redact: 'Redact',
my_text: 'My_Text'
} }
}, },
fieldIcons () { fieldIcons () {
@ -109,7 +110,8 @@ export default {
multiple: IconChecks, multiple: IconChecks,
radio: IconCircleDot, radio: IconCircleDot,
phone: IconPhoneCheck, phone: IconPhoneCheck,
redact: IconBarrierBlock redact: IconBarrierBlock,
my_text: IconTextResize
} }
} }
}, },

110
app/javascript/template_builder/fields.vue
Unescape View File

@ -6,10 +6,12 @@
:class="{ 'bg-base-100': withStickySubmitters }" :class="{ 'bg-base-100': withStickySubmitters }"
:submitters="submitters" :submitters="submitters"
:editable="editable" :editable="editable"
:show-new-fields="showNewFields"
@new-submitter="save" @new-submitter="save"
@remove="removeSubmitter" @remove="removeSubmitter"
@name-change="save" @name-change="save"
@update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))" @update:model-value="$emit('change-submitter', submitters.find((s) => s.uuid === $event))"
@add-prefills="toggleNewFields"
/> />
</div> </div>
<div <div
@ -62,49 +64,85 @@
</template> </template>
</div> </div>
<div <div
v-if="editable" v-if="editable && !showNewFields"
class="grid grid-cols-3 gap-1 pb-2" class="grid grid-cols-3 gap-1 pb-2"
> >
<template <template
v-for="(icon, type) in fieldIcons" v-for="(icon, type) in fieldIcons"
:key="type" :key="type"
> >
<button <div
v-if="withPhone || type != 'phone'" v-if="!['redact', 'my_text'].includes(type)"
draggable="true"
class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
:style="{ backgroundColor: backgroundColor }"
@dragstart="onDragstart({ type: type })"
@dragend="$emit('drag-end')"
@click="addField(type)"
> >
<div class="w-0 absolute left-0"> <button
<IconDrag class="cursor-grab" /> v-if="withPhone || type != 'phone'"
</div> draggable="true"
<div class="flex items-center flex-col px-2 py-2"> class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
<component :is="icon" /> :style="{ backgroundColor }"
<span class="text-xs mt-1"> @dragstart="onDragstart({ type: type })"
{{ fieldNames[type] }} @dragend="$emit('drag-end')"
</span> @click="addField(type)"
>
<div class="w-0 absolute left-0">
<IconDrag class="cursor-grab" />
</div>
<div class="flex items-center flex-col px-2 py-2">
<component :is="icon" />
<span class="text-xs mt-1">
{{ fieldNames[type] }}
</span>
</div>
</button>
<div
v-else
class="tooltip tooltip-bottom-end flex"
data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
>
<a
href="https://www.docuseal.co/pricing"
target="_blank"
class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
:style="{ backgroundColor: backgroundColor }"
>
<div class="w-0 absolute left-0">
<IconLock
width="18"
height="18"
stroke-width="1.5"
/>
</div>
<div class="flex items-center flex-col px-2 py-2">
<component :is="icon" />
<span class="text-xs mt-1">
{{ fieldNames[type] }}
</span>
</div>
</a>
</div> </div>
</button> </div>
</template>
</div>
<div
v-else-if="editable && showNewFields"
class="grid grid-cols-3 gap-1 pb-2"
>
<template
v-for="(icon, type) in fieldIcons"
:key="type"
>
<div <div
v-else v-if="['redact', 'my_text'].includes(type)"
class="tooltip tooltip-bottom-end flex"
data-tip="Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification."
> >
<a <button
href="https://www.docuseal.co/pricing" draggable="true"
target="_blank" class="flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative" :style="{ backgroundColor }"
:style="{ backgroundColor: backgroundColor }" @dragstart="onDragstart({ type: type })"
@dragend="$emit('drag-end')"
@click="addField(type)"
> >
<div class="w-0 absolute left-0"> <div class="w-0 absolute left-0">
<IconLock <IconDrag class="cursor-grab" />
width="18"
height="18"
stroke-width="1.5"
/>
</div> </div>
<div class="flex items-center flex-col px-2 py-2"> <div class="flex items-center flex-col px-2 py-2">
<component :is="icon" /> <component :is="icon" />
@ -112,7 +150,7 @@
{{ fieldNames[type] }} {{ fieldNames[type] }}
</span> </span>
</div> </div>
</a> </button>
</div> </div>
</template> </template>
</div> </div>
@ -184,7 +222,8 @@ export default {
emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'], emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
data () { data () {
return { return {
dragField: null dragField: null,
showNewFields: false
} }
}, },
computed: { computed: {
@ -200,6 +239,9 @@ export default {
} }
}, },
methods: { methods: {
toggleNewFields () {
this.showNewFields = !this.showNewFields
},
onDragstart (field) { onDragstart (field) {
this.$emit('set-drag', field) this.$emit('set-drag', field)
}, },
@ -250,7 +292,7 @@ export default {
submitter_uuid: this.selectedSubmitter.uuid, submitter_uuid: this.selectedSubmitter.uuid,
type type
} }
if (['redact'].includes(type)) { if (['redact', 'my_text'].includes(type)) {
field.required = 'false' field.required = 'false'
} }
if (['select', 'multiple', 'radio'].includes(type)) { if (['select', 'multiple', 'radio'].includes(type)) {

4
app/javascript/template_builder/page.vue
Unescape View File

@ -28,12 +28,14 @@
@start-drag="isMove = true" @start-drag="isMove = true"
@stop-drag="isMove = false" @stop-drag="isMove = false"
@remove="$emit('remove-area', item.area)" @remove="$emit('remove-area', item.area)"
@update:my-text="$emit('update:myText', $event)"
/> />
<FieldArea <FieldArea
v-if="newArea" v-if="newArea"
:is-draw="true" :is-draw="true"
:field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || 'text' }" :field="{ submitter_uuid: selectedSubmitter.uuid, type: drawField?.type || 'text' }"
:area="newArea" :area="newArea"
@update:my-text="$emit('update:myText', $event)"
/> />
</div> </div>
<div <div
@ -93,7 +95,7 @@ export default {
required: true required: true
} }
}, },
emits: ['draw', 'drop-field', 'remove-area'], emits: ['draw', 'drop-field', 'remove-area', 'update:myText'],
data () { data () {
return { return {
areaRefs: [], areaRefs: [],

2
app/models/template.rb
Unescape View File

@ -13,6 +13,7 @@
# slug :string not null # slug :string not null
# source :text not null # source :text not null
# submitters :text not null # submitters :text not null
# values :text
# created_at :datetime not null # created_at :datetime not null
# updated_at :datetime not null # updated_at :datetime not null
# account_id :bigint not null # account_id :bigint not null
@ -50,6 +51,7 @@ class Template < ApplicationRecord
serialize :fields, JSON serialize :fields, JSON
serialize :schema, JSON serialize :schema, JSON
serialize :submitters, JSON serialize :submitters, JSON
serialize :values, JSON
has_many_attached :documents has_many_attached :documents

3
app/views/submit_form/_submission_form.html.erb
Unescape View File

@ -1,4 +1,5 @@
<% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %> <% data_attachments = attachments_index.values.select { |e| e.record_id == submitter.id }.to_json(only: %i[uuid], methods: %i[url filename content_type]) %>
<% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %> <% data_fields = (submitter.submission.template_fields || submitter.submission.template.fields).select { |f| f['submitter_uuid'] == submitter.uuid }.to_json %>
<% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %> <% completed_button_params = submitter.submission.template.account.account_configs.find_by(key: AccountConfig::FORM_COMPLETED_BUTTON_KEY)&.value || {} %>
<submission-form data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= completed_button_params.to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-authenticity-token="<%= form_authenticity_token %>" data-values="<%= submitter.values.to_json %>"></submission-form> <% templateValues = submitter.submission.template.values %>
<submission-form data-template-values="<%= templateValues.to_json %>" data-is-demo="<%= Docuseal.demo? %>" data-completed-button="<%= completed_button_params.to_json %>" data-go-to-last="<%= submitter.opened_at? %>" data-is-direct-upload="<%= Docuseal.active_storage_public? %>" data-submitter="<%= submitter.to_json(only: %i[uuid slug name phone email]) %>" data-can-send-email="<%= Accounts.can_send_emails?(Struct.new(:id).new(@submitter.submission.template.account_id)) %>" data-attachments="<%= data_attachments %>" data-fields="<%= data_fields %>" data-authenticity-token="<%= form_authenticity_token %>" data-values="<%= submitter.values.to_json %>"></submission-form>

5
db/migrate/20231130132129_add_values_to_templates.rb
Unescape View File

@ -0,0 +1,5 @@
class AddValuesToTemplates < ActiveRecord::Migration[7.0]
def change
add_column :templates, :values, :text
end
end

5
db/schema.rb
Unescape View File

@ -10,7 +10,7 @@
# #
# It's strongly recommended that you check this file into your version control system. # It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema[7.0].define(version: 2023_11_19_222105) do ActiveRecord::Schema[7.0].define(version: 2023_11_30_132129) do
# These are extensions that must be enabled in order to support this database # These are extensions that must be enabled in order to support this database
enable_extension "plpgsql" enable_extension "plpgsql"
@ -77,7 +77,7 @@ ActiveRecord::Schema[7.0].define(version: 2023_11_19_222105) do
t.string "event_name", null: false t.string "event_name", null: false
t.datetime "created_at", null: false t.datetime "created_at", null: false
t.datetime "updated_at", null: false t.datetime "updated_at", null: false
t.index ["submitter_id", "event_name"], name: "index_document_generation_events_on_submitter_id_and_event_name", unique: true, where: "((event_name)::text = ANY ((ARRAY['start'::character varying, 'complete'::character varying])::text[]))" t.index ["submitter_id", "event_name"], name: "index_document_generation_events_on_submitter_id_and_event_name", unique: true, where: "((event_name)::text = ANY (ARRAY[('start'::character varying)::text, ('complete'::character varying)::text]))"
t.index ["submitter_id"], name: "index_document_generation_events_on_submitter_id" t.index ["submitter_id"], name: "index_document_generation_events_on_submitter_id"
end end
@ -176,6 +176,7 @@ ActiveRecord::Schema[7.0].define(version: 2023_11_19_222105) do
t.text "source", null: false t.text "source", null: false
t.bigint "folder_id", null: false t.bigint "folder_id", null: false
t.string "application_key" t.string "application_key"
t.text "values"
t.index ["account_id"], name: "index_templates_on_account_id" t.index ["account_id"], name: "index_templates_on_account_id"
t.index ["author_id"], name: "index_templates_on_author_id" t.index ["author_id"], name: "index_templates_on_author_id"
t.index ["folder_id"], name: "index_templates_on_folder_id" t.index ["folder_id"], name: "index_templates_on_folder_id"

Write Preview
Loading…
Cancel
Save