From 3b717ae3de80768223b64fd3ed55050c1f90a9a3 Mon Sep 17 00:00:00 2001 From: Pete Matsyburka Date: Wed, 12 Jun 2024 20:05:55 +0300 Subject: [PATCH] double click to edit default value --- app/javascript/template_builder/area.vue | 180 +++++++++++++++++++---- app/javascript/template_builder/i18n.js | 2 + app/javascript/template_builder/page.vue | 7 +- 3 files changed, 154 insertions(+), 35 deletions(-) diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue index 040e0059..4676cede 100644 --- a/app/javascript/template_builder/area.vue +++ b/app/javascript/template_builder/area.vue @@ -3,7 +3,7 @@ class="absolute overflow-visible group" :style="positionStyle" @pointerdown.stop - @mousedown.stop="startDrag" + @mousedown="startMouseMove" @touchstart="startTouchDrag" >
{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}
+ +
{{ formatNumber(field.default_value, field.preferences?.format) }} {{ field.default_value }}
@@ -181,8 +205,11 @@
{ + 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) @@ -510,6 +557,38 @@ export default { this.save() }, + onDefaultValueBlur (e) { + const text = this.$refs.defaultValue.innerText.trim() + + this.isContenteditable = false + + if (text) { + if (this.field.type === 'number') { + const number = parseFloat(text) + + if (number || number === 0) { + this.field.default_value = parseFloat(text) + } + } else { + this.field.default_value = text + } + + if (![true, false].includes(this.field.readonly)) { + this.field.readonly = true + } + + this.$refs.defaultValue.innerText = text + } else { + delete this.field.readonly + delete this.field.default_value + this.$refs.defaultValue.innerText = '' + } + + this.save() + }, + onDefaultValueEnter (e) { + this.$refs.defaultValue.blur() + }, onNameEnter (e) { this.$refs.name.blur() }, @@ -569,8 +648,8 @@ export default { const page = this.$parent.$refs.mask.previousSibling const rect = page.getBoundingClientRect() - this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width - this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height + this.area.x = Math.min(Math.max((this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width, 0), 1 - this.area.w) + this.area.y = Math.min(Math.max((this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height, 0), 1 - this.area.h) }, stopTouchDrag () { this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag) @@ -584,6 +663,47 @@ export default { this.$emit('stop-drag') }, + startMouseMove (e) { + if (e.target !== this.$refs.touchTarget) { + return + } + + this.$refs?.name?.blur() + + e.preventDefault() + + this.isDragged = true + + const rect = e.target.getBoundingClientRect() + + this.selectedAreaRef.value = this.area + + this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY } + + this.$el.getRootNode().addEventListener('mousemove', this.mouseMove) + this.$el.getRootNode().addEventListener('mouseup', this.stopMouseMove) + + this.$emit('start-drag') + }, + mouseMove (e) { + const page = this.$parent.$refs.mask.previousSibling + const rect = page.getBoundingClientRect() + + this.area.x = Math.min(Math.max((this.dragFrom.x + e.clientX - rect.left) / rect.width, 0), 1 - this.area.w) + this.area.y = Math.min(Math.max((this.dragFrom.y + e.clientY - rect.top) / rect.height, 0), 1 - this.area.h) + }, + stopMouseMove (e) { + this.$el.getRootNode().removeEventListener('mousemove', this.mouseMove) + this.$el.getRootNode().removeEventListener('mouseup', this.stopMouseMove) + + if (this.isDragged) { + this.save() + } + + this.isDragged = false + + this.$emit('stop-drag') + }, stopDrag () { this.$el.getRootNode().removeEventListener('mousemove', this.drag) this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag) diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js index 030d96f2..9372b711 100644 --- a/app/javascript/template_builder/i18n.js +++ b/app/javascript/template_builder/i18n.js @@ -1,4 +1,5 @@ const en = { + editable: 'Editable', search_field: 'Search field', field_not_found: 'Field not found', clear: 'Clear', @@ -11,6 +12,7 @@ const en = { display_title: 'Display title', with_logo: 'With logo', unchecked: 'Unchecked', + type_value: 'Type value', equal: 'Equal', not_equal: 'Not equal', contains: 'Contains', diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue index 3437438c..5feb7380 100644 --- a/app/javascript/template_builder/page.vue +++ b/app/javascript/template_builder/page.vue @@ -27,8 +27,6 @@ :default-submitters="defaultSubmitters" @start-resize="resizeDirection = $event" @stop-resize="resizeDirection = null" - @start-drag="isMove = true" - @stop-drag="isMove = false" @remove="$emit('remove-area', item.area)" @scroll-to="$emit('scroll-to', $event)" /> @@ -40,11 +38,11 @@ />