fix: implemented add fields using autocomplete

crm/api/doc.py

@@ -431,17 +431,24 @@ def get_list_data(
 		"list_script": get_form_script(doctype, "List"),
 	}
 
-
-def get_fields_meta(doctype):
+@frappe.whitelist()
+def get_fields_meta(doctype, restricted_fieldtypes=None, as_array=False):
 	not_allowed_fieldtypes = [
 		"Tab Break",
 		"Section Break",
 		"Column Break",
 	]
 
+	if restricted_fieldtypes:
+		restricted_fieldtypes = frappe.parse_json(restricted_fieldtypes)
+		not_allowed_fieldtypes += restricted_fieldtypes
+
 	fields = frappe.get_meta(doctype).fields
 	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
 
+	if as_array:
+		return fields
+
 	fields_meta = {}
 	for field in fields:
 		fields_meta[field.fieldname] = field

frontend/src/components/Settings/FieldsLayout.vue

@@ -38,7 +38,7 @@
         class="flex flex-1 flex-col justify-between overflow-hidden"
       >
         <div class="flex flex-col overflow-y-auto">
-          <SidebarLayoutBuilder :sections="sections.data" />
+          <SidebarLayoutBuilder :sections="sections.data" :doctype="doctype" />
         </div>
       </div>
     </Resizer>
@@ -75,7 +75,7 @@ function saveChanges() {
   let _sections = JSON.parse(JSON.stringify(sections.data))
   _sections.forEach((section) => {
     if (!section.fields) return
-    section.fields = section.fields.map((field) => field.name)
+    section.fields = section.fields.map((field) => field.fieldname || field.name)
   })
   loading.value = true
   call('crm.api.doc.save_fields_layout', {

frontend/src/components/Settings/SidebarLayoutBuilder.vue

@@ -66,13 +66,33 @@
                 </div>
               </template>
             </Draggable>
-            <Button
-              v-if="section.editable !== false"
-              class="w-full mt-2"
-              variant="outline"
-              :label="__('Add Field')"
-              @click="section.fields.push({ label: 'New Field' })"
-            />
+            <Autocomplete
+              v-if="fields.data && section.editable !== false"
+              value=""
+              :options="fields.data"
+              @change="(e) => addField(section, e)"
+            >
+              <template #target="{ togglePopover }">
+                <Button
+                  class="w-full mt-2"
+                  variant="outline"
+                  @click="togglePopover()"
+                  :label="__('Add Field')"
+                >
+                  <template #prefix>
+                    <FeatherIcon name="plus" class="h-4" />
+                  </template>
+                </Button>
+              </template>
+              <template #item-label="{ option }">
+                <div class="flex flex-col gap-1">
+                  <div>{{ option.label }}</div>
+                  <div class="text-gray-500 text-sm">
+                    {{ `${option.fieldname} - ${option.fieldtype}` }}
+                  </div>
+                </div>
+              </template>
+            </Autocomplete>
             <div
               v-else
               class="flex justify-center items-center border rounded border-dashed p-3"
@@ -98,11 +118,49 @@
   </div>
 </template>
 <script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
 import Draggable from 'vuedraggable'
-import { Input } from 'frappe-ui'
+import { Input, createResource } from 'frappe-ui'
+import { computed, watch } from 'vue'
 
 const props = defineProps({
   sections: Object,
+  doctype: String,
 })
+
+const restrictedFieldTypes = [
+  'Table',
+  'Geolocation',
+  'Attach',
+  'Attach Image',
+  'HTML',
+  'Signature',
+]
+
+const params = computed(() => {
+  return {
+    doctype: props.doctype,
+    restricted_fieldtypes: restrictedFieldTypes,
+    as_array: true,
+  }
+})
+
+const fields = createResource({
+  url: 'crm.api.doc.get_fields_meta',
+  params: params.value,
+  cache: ['fieldsMeta', props.doctype],
+  auto: true,
+})
+
+function addField(section, field) {
+  if (!field) return
+  section.fields.push(field)
+}
+
+watch(
+  () => props.doctype,
+  () => fields.fetch(params.value),
+  { immediate: true },
+)
 </script>