search default fields

app/javascript/template_builder/area.vue

@@ -42,7 +42,7 @@
         v-model="field.submitter_uuid"
         class="border-r"
         :compact="true"
-        :editable="editable && !defaultField"
+        :editable="editable && (!defaultField || defaultField.role !== submitter?.name)"
         :allow-add-new="!defaultSubmitters.length"
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
         :submitters="template.submitters"

app/javascript/template_builder/fields.vue

@@ -36,8 +36,38 @@
   </div>
   <div v-if="submitterDefaultFields.length">
     <hr class="mb-2">
+    <template v-if="isShowFieldSearch">
+      <input
+        v-model="defaultFieldsSearch"
+        :placeholder="t('search_field')"
+        class="input input-ghost input-xs px-0 text-base mb-2 !outline-0 !rounded bg-transparent w-full"
+      >
+      <hr class="mb-2">
+    </template>
+    <div
+      class="overflow-auto relative"
+      :style="{
+        maxHeight: isShowFieldSearch ? '210px' : '',
+        minHeight: isShowFieldSearch ? '210px' : ''
+      }"
+    >
+      <div
+        v-if="!filteredSubmitterDefaultFields.length && defaultFieldsSearch"
+        class="top-0 bottom-0 text-center absolute flex items-center justify-center w-full flex-col"
+      >
+        <div>
+          {{ t('field_not_found') }}
+        </div>
+        <a
+          href="#"
+          class="link"
+          @click.prevent="defaultFieldsSearch = ''"
+        >
+          {{ t('clear') }}
+        </a>
+      </div>
       <template
-      v-for="field in submitterDefaultFields"
+        v-for="field in filteredSubmitterDefaultFields"
         :key="field.name"
       >
         <div
@@ -63,6 +93,7 @@
         </div>
       </template>
     </div>
+  </div>
   <div
     v-if="editable && !onlyDefinedFields"
     class="grid grid-cols-3 gap-1 pb-2"
@@ -205,9 +236,17 @@ export default {
     }
   },
   emits: ['set-draw', 'set-drag', 'drag-end', 'scroll-to-area', 'change-submitter'],
+  data () {
+    return {
+      defaultFieldsSearch: ''
+    }
+  },
   computed: {
     fieldNames: FieldType.computed.fieldNames,
     fieldIcons: FieldType.computed.fieldIcons,
+    isShowFieldSearch () {
+      return this.submitterDefaultFields.length > 15
+    },
     fieldIconsSorted () {
       if (this.fieldTypes.length) {
         return this.fieldTypes.reduce((acc, type) => {
@@ -226,6 +265,13 @@ export default {
       return this.defaultFields.filter((f) => {
         return !this.submitterFields.find((field) => field.name === f.name) && (!f.role || f.role === this.selectedSubmitter.name)
       })
+    },
+    filteredSubmitterDefaultFields () {
+      if (this.defaultFieldsSearch) {
+        return this.submitterDefaultFields.filter((f) => f.name.toLowerCase().includes(this.defaultFieldsSearch.toLowerCase()))
+      } else {
+        return this.submitterDefaultFields
+      }
     }
   },
   methods: {

app/javascript/template_builder/i18n.js

@@ -1,4 +1,7 @@
 const en = {
+  search_field: 'Search field',
+  field_not_found: 'Field not found',
+  clear: 'Clear',
   align: 'Align',
   left: 'Left',
   right: 'Right',