From 286b8d7067542f4fa40a3bca0c3aa9f73cfab7af Mon Sep 17 00:00:00 2001 From: Pete Matsyburka Date: Thu, 11 Jul 2024 21:40:15 +0300 Subject: [PATCH] add heading field --- app/javascript/template_builder/area.vue | 108 +++++++++--------- app/javascript/template_builder/builder.vue | 13 ++- app/javascript/template_builder/field.vue | 19 ++- .../template_builder/field_type.vue | 6 +- app/javascript/template_builder/fields.vue | 2 +- app/javascript/template_builder/i18n.js | 1 + lib/submissions/generate_audit_trail.rb | 1 + lib/submitters/serialize_for_webhook.rb | 1 + 8 files changed, 89 insertions(+), 62 deletions(-) diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue index e018ca31..f37dd16b 100644 --- a/app/javascript/template_builder/area.vue +++ b/app/javascript/template_builder/area.vue @@ -9,7 +9,7 @@
{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}
{{ formatNumber(field.default_value, field.preferences?.format) }} {{ field.default_value }}
@@ -225,7 +227,7 @@
{ - this.$refs.defaultValue.focus() - - if (this.$refs.defaultValue.innerText.length) { - window.getSelection().collapse( - this.$refs.defaultValue.firstChild, - this.$refs.defaultValue.innerText.length - ) - } - }) + this.$nextTick(() => this.focusValueInput()) } else if (this.field.type === 'checkbox') { this.field.readonly = !this.field.readonly this.field.default_value === true ? delete this.field.default_value : this.field.default_value = true @@ -503,6 +499,18 @@ export default { 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) { if (format === 'comma') { return new Intl.NumberFormat('en-US').format(number) @@ -572,6 +580,10 @@ export default { delete this.field.options } + if (['heading'].includes(this.field.type)) { + this.field.readonly = true + } + if (['select', 'multiple', 'radio'].includes(this.field.type)) { this.field.options ||= [{ value: '', uuid: v4() }] } @@ -633,7 +645,11 @@ export default { this.save() }, onDefaultValueEnter (e) { - this.$refs.defaultValue.blur() + if (this.field.type !== 'heading') { + e.preventDefault() + + this.$refs.defaultValue.blur() + } }, onNameEnter (e) { this.$refs.name.blur() @@ -652,24 +668,8 @@ export default { 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) { - if (e.target !== this.$refs.touchTarget) { + if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) { return } @@ -714,11 +714,13 @@ export default { this.$emit('stop-drag') }, startMouseMove (e) { - if (e.target !== this.$refs.touchTarget) { + if (e.target !== this.$refs.touchTarget && e.target !== this.$refs.touchValueTarget) { return } - document.activeElement?.blur() + if (document.activeElement !== this.$refs.defaultValue) { + document.activeElement?.blur() + } e.preventDefault() @@ -728,6 +730,10 @@ export default { 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.$el.getRootNode().addEventListener('mousemove', this.mouseMove) diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue index 0e5d1d39..af1fe2f4 100644 --- a/app/javascript/template_builder/builder.vue +++ b/app/javascript/template_builder/builder.vue @@ -327,7 +327,7 @@ {{ t('cancel') }} { + 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 () { this.isLoadingBlankPage = true diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue index f27c6abd..e0b1b234 100644 --- a/app/javascript/template_builder/field.vue +++ b/app/javascript/template_builder/field.vue @@ -14,7 +14,7 @@
f.type === field.type).indexOf(field) - const suffix = { multiple: this.t('select'), radio: this.t('group') }[field.type] || this.t('field') - - return `${this.fieldNames[field.type]} ${suffix} ${typeIndex + 1}` + if (this.field.type === 'heading') { + return `${this.fieldNames[field.type]} ${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) { @@ -417,6 +420,10 @@ export default { this.field.options ||= [{ value: '', uuid: v4() }] } + if (['heading'].includes(this.field.type)) { + this.field.readonly = true + } + (this.field.areas || []).forEach((area) => { if (this.field.type === 'cells') { area.cell_w = area.w * 2 / Math.floor(area.w / area.h) diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue index 17e8ae44..debd1448 100644 --- a/app/javascript/template_builder/field_type.vue +++ b/app/javascript/template_builder/field_type.vue @@ -51,7 +51,7 @@