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

creating a date prefill fields for both template editor and form submission

Browse Source
pull/150/merge^2
iozeey 2 years ago
parent 9f7bdc0dcc
commit ae570b3e31
7 changed files with 187 additions and 13 deletions
Show Stats Download Patch File Download Diff File

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

@ -36,6 +36,21 @@
/>
</div>
<!-- show myDate prefill with stored value -->
<div
v-else-if="field.type === 'my_date'"
class="flex absolute"
:style="{ ...computedStyle, backgroundColor: 'transparent' }"
:class="{ 'cursor-default ': !submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
>
<span
style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
class="!text-2xl w-full h-full"
>
{{ getFormattedDate }}
</span>
</div>
<!-- show mySignature prefill with stored value -->
<div
v-else-if="['my_signature', 'my_initials'].includes(field.type)"
@ -285,7 +300,8 @@ export default {
data () {
return {
textOverflowChars: 0,
showLocalText: ''
showLocalText: '',
showLocalDate: ''
}
},
computed: {
@ -306,7 +322,8 @@ export default {
redact: 'Redact',
my_text: 'Text',
my_signature: 'My Signature',
my_initials: 'My Initials'
my_initials: 'My Initials',
my_date: 'Date'
}
},
fieldIcons () {
@ -375,6 +392,14 @@ export default {
return ''
}
},
getFormattedDate () {
if (this.field.type === 'my_date' && this.showLocalDate) {
console.log('date returned ___-----', new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.showLocalDate)))
return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.showLocalDate))
} else {
return ''
}
},
attachments () {
if (this.field.type === 'file') {
return (this.modelValue || []).map((uuid) => this.attachmentsIndex[uuid])
@ -410,6 +435,15 @@ export default {
}
}
if (this.field.type === 'my_date') {
const fieldUuid = this.field.uuid
if (this.templateValues && this.templateValues[fieldUuid]) {
this.showLocalDate = this.templateValues[fieldUuid]
} else {
this.showLocalDate = ''
}
}
if (this.field.type === 'text' && this.$refs.textContainer) {
this.$nextTick(() => {
this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0

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

@ -130,6 +130,19 @@
@input="makeMyText"
/>
</div>
<!-- adding my_date prefills -->
<div
v-else-if="field.type === 'my_date'"
class="flex items-center justify-center h-full w-full"
style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
>
<span
:id="field.uuid"
ref="my_date"
>
{{ getFormattedDate }}
</span>
</div>
<!-- adding my_signature and my_initials for prefills -->
<div
v-else-if="['my_signature', 'my_initials'].includes(field.type)"
@ -187,7 +200,7 @@
</span>
</div>
<div
v-if="!['my_text', 'my_signature', 'my_initials'].includes(field.type)"
v-if="!['my_text', 'my_signature', 'my_initials', 'my_date'].includes(field.type)"
ref="touchTarget"
class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
/>
@ -236,6 +249,19 @@
@start="$refs.areas.scrollIntoField(field)"
/>
</div>
<div
v-if="showMyDate"
class="absolute"
style="z-index: 50;"
:style="{ ...mySignatureStyle }"
>
<MyDate
:key="field.uuid"
v-model="setMyDateValue"
:my-signature-style="mySignatureStyle"
:field="field"
/>
</div>
</div>
</template>
@ -247,6 +273,7 @@ import { IconX, IconWriting } from '@tabler/icons-vue'
import { v4 } from 'uuid'
import MySignature from './my_signature'
import MyInitials from './my_initials'
import MyDate from './my_date'
export default {
name: 'FieldArea',
@ -256,7 +283,8 @@ export default {
IconX,
IconWriting,
MySignature,
MyInitials
MyInitials,
MyDate
},
inject: ['template', 'selectedAreaRef', 'save', 'templateAttachments', 'isDirectUpload'],
props: {
@ -291,8 +319,10 @@ export default {
dragFrom: { x: 0, y: 0 },
showMySignature: false,
showMyInitials: false,
showMyDate: false,
myLocalSignatureValue: '',
myLocalInitialsValue: ''
myLocalInitialsValue: '',
myLocalDateValue: ''
}
},
computed: {
@ -315,6 +345,15 @@ export default {
this.makeMyInitials(value)
}
},
setMyDateValue: {
get () {
return this.myLocalDateValue
},
set (value) {
this.myLocalDateValue = value
this.makeMyDate(value)
}
},
optionIndexText () {
if (this.area.option_uuid && this.field.options) {
return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
@ -363,6 +402,13 @@ export default {
return null
}
},
getFormattedDate () {
if (this.field.type === 'my_date' && this.myLocalDateValue) {
return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.myLocalDateValue))
} else {
return ''
}
},
cells () {
const cells = []
@ -461,6 +507,15 @@ export default {
}
}
if (this.field.type === 'my_date') {
const fieldUuid = this.field.uuid
if (this.template.values && this.template.values[fieldUuid]) {
this.myLocalDateValue = this.template.values[fieldUuid]
} else {
this.myLocalDateValue = ''
}
}
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.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
@ -479,7 +534,6 @@ export default {
this.myLocalSignatureValue = value
this.saveFieldValue({ [this.field.uuid]: value })
} else {
console.log('My signature field value was empty')
this.saveFieldValue({ [this.field.uuid]: '' })
}
},
@ -488,10 +542,15 @@ export default {
this.myLocalInitialsValue = value
this.saveFieldValue({ [this.field.uuid]: value })
} else {
console.log('My initial field value was empty')
this.saveFieldValue({ [this.field.uuid]: '' })
}
},
makeMyDate (value) {
this.saveFieldValue(
{ [this.field.uuid]: value }
)
this.save()
},
saveFieldValue (event) {
this.$emit('update:myField', event)
},
@ -596,6 +655,8 @@ export default {
this.handleMySignatureClick()
} else if (this.field.type === 'my_initials') {
this.handleMyInitialClick()
} else if (this.field.type === 'my_date') {
this.handleMyDateClick()
}
this.selectedAreaRef.value = this.area
@ -713,6 +774,9 @@ export default {
},
handleMyInitialClick () {
this.showMyInitials = !this.showMyInitials
},
handleMyDateClick () {
this.showMyDate = !this.showMyDate
}
}
}

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

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

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

@ -126,7 +126,7 @@
style="background-color: grey;"
class="w-3 h-3 rounded-full"
/>
<div class="items-center space-x-2">show submitters fields</div>
<div class="items-center space-x-2">show submitter fields</div>
</div>
</label>
<label

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

@ -95,7 +95,8 @@ export default {
redact: 'Redact',
my_text: 'Text',
my_signature: 'My Signature',
my_initials: 'My Initials'
my_initials: 'My Initials',
my_date: 'Date'
}
},
fieldIcons () {
@ -115,7 +116,8 @@ export default {
redact: IconBarrierBlock,
my_text: IconTextResize,
my_signature: IconWritingSign,
my_initials: IconLetterCaseUpper
my_initials: IconLetterCaseUpper,
my_date: IconCalendarEvent
}
}
},

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

@ -72,7 +72,7 @@
:key="type"
>
<div
v-if="!['my_text', 'my_signature', 'my_initials'].includes(type)"
v-if="!['my_text', 'my_signature', 'my_initials', 'my_date'].includes(type)"
>
<button
v-if="withPhone || type != 'phone'"
@ -131,7 +131,7 @@
:key="type"
>
<div
v-if="['my_text', 'my_signature', 'my_initials'].includes(type)"
v-if="['my_text', 'my_signature', 'my_initials', 'my_date'].includes(type)"
>
<button
draggable="true"

74
app/javascript/template_builder/my_date.vue
Unescape View File

@ -0,0 +1,74 @@
<template>
<div>
<div
class="flex justify-between items-center w-full mb-2"
>
<label
:for="field.uuid"
class="label text-2xl"
>{{ field.name || t('date') }}
</label>
<button
class="btn btn-outline btn-sm !normal-case font-normal"
@click.prevent="setCurrentDate"
>
<IconCalendarCheck :width="16" />
{{ t('set_today') }}
</button>
</div>
<div class="text-center">
<input
ref="input"
v-model="value"
class="base-input !text-2xl text-center w-full"
:required="field.required"
type="date"
:name="`values[${field.uuid}]`"
@focus="$emit('focus')"
>
</div>
</div>
</template>
<script>
import { IconCalendarCheck } from '@tabler/icons-vue'
export default {
name: 'MyDate',
components: {
IconCalendarCheck
},
inject: ['t'],
props: {
field: {
type: Object,
required: true
},
modelValue: {
type: String,
required: false,
default: ''
}
},
emits: ['update:model-value', 'focus'],
computed: {
value: {
set (value) {
this.$emit('update:model-value', value)
},
get () {
return this.modelValue
}
}
},
methods: {
setCurrentDate () {
const inputEl = this.$refs.input
inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
inputEl.dispatchEvent(new Event('input', { bubbles: true }))
}
}
}
</script>
Write Preview
Loading…
Cancel
Save