From ae570b3e316e65e29f6fd2d45a9b56f1f0eab689 Mon Sep 17 00:00:00 2001 From: iozeey Date: Tue, 12 Dec 2023 18:50:01 +0500 Subject: [PATCH] creating a date prefill fields for both template editor and form submission --- app/javascript/submission_form/area.vue | 38 +++++++++- app/javascript/template_builder/area.vue | 74 +++++++++++++++++-- app/javascript/template_builder/field.vue | 2 +- .../template_builder/field_submitter.vue | 2 +- .../template_builder/field_type.vue | 6 +- app/javascript/template_builder/fields.vue | 4 +- app/javascript/template_builder/my_date.vue | 74 +++++++++++++++++++ 7 files changed, 187 insertions(+), 13 deletions(-) create mode 100644 app/javascript/template_builder/my_date.vue diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue index 7c07cf0f..5607c29d 100644 --- a/app/javascript/submission_form/area.vue +++ b/app/javascript/submission_form/area.vue @@ -36,6 +36,21 @@ /> + +
+ + {{ getFormattedDate }} + +
+
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 diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue index c276e377..7420b1bb 100644 --- a/app/javascript/template_builder/area.vue +++ b/app/javascript/template_builder/area.vue @@ -130,6 +130,19 @@ @input="makeMyText" />
+ +
+ + {{ getFormattedDate }} + +
@@ -236,6 +249,19 @@ @start="$refs.areas.scrollIntoField(field)" />
+
+ +
@@ -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 } } } diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue index ae030452..6ecfa6f1 100644 --- a/app/javascript/template_builder/field.vue +++ b/app/javascript/template_builder/field.vue @@ -31,7 +31,7 @@ />
+ +