From 6dff6483bf9ae31271bda1fd5f0ce7278a46d241 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Tue, 7 Jan 2025 17:30:21 +0200
Subject: [PATCH] fix default field title

---
 app/javascript/template_builder/area.vue   | 4 ++--
 app/javascript/template_builder/field.vue  | 2 +-
 app/javascript/template_builder/fields.vue | 9 ++++++++-
 app/javascript/template_builder/page.vue   | 9 ++++++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 61b1a200..f2390a73 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -70,7 +70,7 @@
         @keydown.enter.prevent="onNameEnter"
         @focus="onNameFocus"
         @blur="onNameBlur"
-      >{{ optionIndexText }} {{ (defaultField ? (field.title || field.name) : field.name) || defaultName }}</span>
+      >{{ optionIndexText }} {{ (defaultField ? (defaultField.title || field.title || field.name) : field.name) || defaultName }}</span>
       <div
         v-if="isSettingsFocus || (isValueInput && field.type !== 'heading') || (isNameFocus && !['checkbox', 'phone'].includes(field.type))"
         class="flex items-center ml-1.5"
@@ -212,7 +212,7 @@
               :contenteditable="isValueInput"
               class="whitespace-pre-wrap outline-none empty:before:content-[attr(placeholder)] before:text-gray-400"
               :class="{ 'cursor-text': isValueInput }"
-              :placeholder="withFieldPlaceholder && !isValueInput ? field.name || defaultName : t('type_value')"
+              :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : t('type_value')"
               @blur="onDefaultValueBlur"
               @paste.prevent="onPaste"
               @keydown.enter="onDefaultValueEnter"
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index b5a38f62..169f2ae3 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -23,7 +23,7 @@
           />
           <Contenteditable
             ref="name"
-            :model-value="(defaultField ? (field.title || field.name) : field.name) || defaultName"
+            :model-value="(defaultField ? (defaultField.title || field.title || field.name) : field.name) || defaultName"
             :editable="editable && !defaultField && field.type != 'heading'"
             :icon-inline="true"
             :icon-width="18"
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 55932181..8bff615b 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -26,7 +26,7 @@
       :field="field"
       :type-index="fields.filter((f) => f.type === field.type).indexOf(field)"
       :editable="editable && (!fieldsDragFieldRef.value || fieldsDragFieldRef.value !== field)"
-      :default-field="defaultFields.find((f) => f.name === field.name)"
+      :default-field="defaultFieldsIndex[field.name]"
       :draggable="editable"
       @dragstart="fieldsDragFieldRef.value = field"
       @dragend="fieldsDragFieldRef.value = null"
@@ -299,6 +299,13 @@ export default {
     isShowFieldSearch () {
       return this.submitterDefaultFields.length > 15
     },
+    defaultFieldsIndex () {
+      return this.defaultFields.reduce((acc, field) => {
+        acc[field.name] = field
+
+        return acc
+      }, {})
+    },
     fieldIconsSorted () {
       if (this.fieldTypes.length) {
         return this.fieldTypes.reduce((acc, type) => {
diff --git a/app/javascript/template_builder/page.vue b/app/javascript/template_builder/page.vue
index bd5e22f9..bd9f20dc 100644
--- a/app/javascript/template_builder/page.vue
+++ b/app/javascript/template_builder/page.vue
@@ -25,7 +25,7 @@
         :field="item.field"
         :editable="editable"
         :with-field-placeholder="withFieldPlaceholder"
-        :default-field="defaultFields.find((f) => f.name === item.field.name)"
+        :default-field="defaultFieldsIndex[item.field.name]"
         :default-submitters="defaultSubmitters"
         :max-page="totalPages - 1"
         @start-resize="resizeDirection = $event"
@@ -142,6 +142,13 @@ export default {
     }
   },
   computed: {
+    defaultFieldsIndex () {
+      return this.defaultFields.reduce((acc, field) => {
+        acc[field.name] = field
+
+        return acc
+      }, {})
+    },
     defaultFieldType () {
       if (this.drawFieldType) {
         return this.drawFieldType