fix: added draggable fields layout with sections

frontend/src/components/Settings/QuickEntryLayout.vue

@@ -1,15 +1,15 @@
 <template>
-  <div ref="parentRef" class="flex flex-col p-8 overflow-hidden">
+  <div class="flex flex-col overflow-hidden">
-    <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
+    <div class="flex flex-col gap-2 p-8 pb-5">
-      <div>{{ __('Quick Entry Layout') }}</div>
+      <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
-      <Badge
+        <div>{{ __('Quick Entry Layout') }}</div>
-        v-if="dirty"
+        <Badge
-        :label="__('Not Saved')"
+          v-if="dirty"
-        variant="subtle"
+          :label="__('Not Saved')"
-        theme="orange"
+          variant="subtle"
-      />
+          theme="orange"
-    </h2>
+        />
-    <div class="flex-1 flex flex-col justify-between -m-3 p-3 gap-6 overflow-y-auto">
+      </h2>
       <div class="flex gap-6 items-end">
         <FormControl
           class="flex-1"
@@ -29,19 +29,18 @@
           <Button :label="__('Reset')" @click="reload" />
         </div>
       </div>
-      <div v-if="sections?.data" class="">
+    </div>
-        <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
+    <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
-      </div>
+      <QuickEntryLayoutBuilder :sections="sections.data" :doctype="doctype" />
     </div>
   </div>
 </template>
 <script setup>
 import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
-import { Badge, createResource } from 'frappe-ui'
+import { Badge, call, createResource } from 'frappe-ui'
-import { ref, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 
-const parentRef = ref(null)
 const doctype = ref('CRM Lead')
 const loading = ref(false)
 const dirty = ref(false)
@@ -59,6 +58,15 @@ const sections = createResource({
   },
 })
 
+watch(
+  () => sections?.data,
+  () => {
+    dirty.value =
+      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
+  },
+  { deep: true },
+)
+
 onMounted(() => useDebounceFn(reload, 100)())
 
 function reload() {
@@ -67,6 +75,24 @@ function reload() {
 }
 
 function saveChanges() {
-  // TODO: Save changes
+  let _sections = JSON.parse(JSON.stringify(sections.data))
+  _sections.forEach((section) => {
+    if (!section.fields) return
+    section.fields = section.fields.map(
+      (field) => field.fieldname || field.name,
+    )
+  })
+  loading.value = true
+  call(
+    'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.save_fields_layout',
+    {
+      doctype: doctype.value,
+      type: 'Quick Entry',
+      layout: JSON.stringify(_sections),
+    },
+  ).then(() => {
+    loading.value = false
+    reload()
+  })
 }
 </script>

frontend/src/components/Settings/QuickEntryLayoutBuilder.vue

@@ -1,33 +1,190 @@
 <template>
   <div
-    class="border rounded-xl h-full inline-block w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
+    class="border rounded-xl h-full inline-block w-full transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
   >
-    <div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+    <div class="bg-white px-4 pb-6 pt-5 sm:px-6 overflow-y-auto">
-      <div class="mb-6 flex items-center justify-between">
+      <Draggable :list="sections" item-key="label" class="flex flex-col">
-        <div class="flex items-center space-x-2">
+        <template #item="{ element: section }">
-          <header>
+          <div class="border-b py-2 first:pt-0">
-            <h3 class="text-2xl font-semibold leading-6 text-gray-900">
+            <div class="flex items-center justify-between py-2">
-              {{ __('Create Lead') }}
+              <div
-            </h3>
+                class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
-          </header>
+              >
-        </div>
+                <div
-        <Button icon="x" disabled variant="ghost" />
+                  v-if="!section.editingLabel"
-      </div>
+                  :class="section.hideLabel ? 'text-gray-400' : ''"
-      <div>
+                >
-        <div v-for="section in sections">
+                  {{ __(section.label) || __('Untitled') }}
-          <div>{{ section.label }}</div>
+                </div>
-          <div v-for="field in section.fields">
+                <div v-else>
-            <div>{{ field.label }}</div>
+                  <Input
+                    v-model="section.label"
+                    @keydown.enter="section.editingLabel = false"
+                    @blur="section.editingLabel = false"
+                    @click.stop
+                  />
+                </div>
+              </div>
+              <div>
+                <Button
+                  :icon="section.hideLabel ? 'eye-off' : 'eye'"
+                  variant="ghost"
+                  @click="section.hideLabel = !section.hideLabel"
+                />
+                <Button
+                  :icon="section.editingLabel ? 'check' : 'edit'"
+                  variant="ghost"
+                  @click="section.editingLabel = !section.editingLabel"
+                />
+                <Button
+                  v-if="section.editable !== false"
+                  icon="x"
+                  variant="ghost"
+                  @click="sections.splice(sections.indexOf(section), 1)"
+                />
+              </div>
+            </div>
+            <div>
+              <Draggable
+                :list="section.fields"
+                group="fields"
+                item-key="label"
+                class="grid gap-2"
+                :class="
+                  section.columns
+                    ? 'grid-cols-' + section.columns
+                    : 'grid-cols-3'
+                "
+                handle=".cursor-grab"
+              >
+                <template #item="{ element: field }">
+                  <div
+                    class="px-1.5 py-1 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+                  >
+                    <div class="flex items-center gap-2">
+                      <DragVerticalIcon class="h-3.5 cursor-grab" />
+                      <div>{{ field.label }}</div>
+                    </div>
+                    <div>
+                      <Button
+                        variant="ghost"
+                        icon="x"
+                        @click="
+                          section.fields.splice(
+                            section.fields.indexOf(field),
+                            1,
+                          )
+                        "
+                      />
+                    </div>
+                  </div>
+                </template>
+              </Draggable>
+              <Autocomplete
+                v-if="fields.data"
+                value=""
+                :options="fields.data"
+                @change="(e) => addField(section, e)"
+              >
+                <template #target="{ togglePopover }">
+                  <div
+                    class="grid gap-2 w-full"
+                    :class="
+                      section.columns
+                        ? 'grid-cols-' + section.columns
+                        : 'grid-cols-3'
+                    "
+                  >
+                    <Button
+                      class="mt-2 w-full !h-[38px] !border-gray-200"
+                      variant="outline"
+                      @click="togglePopover()"
+                      :label="__('Add Field')"
+                    >
+                      <template #prefix>
+                        <FeatherIcon name="plus" class="h-4" />
+                      </template>
+                    </Button>
+                  </div>
+                </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>
           </div>
-        </div>
+        </template>
+      </Draggable>
+      <div class="py-2">
+        <Button
+          class="w-full !h-[38px] !border-gray-200"
+          variant="outline"
+          :label="__('Add Section')"
+          @click="
+            sections.push({
+              label: __('New Section'),
+              opened: true,
+              fields: [],
+            })
+          "
+        >
+          <template #prefix>
+            <FeatherIcon name="plus" class="h-4" />
+          </template>
+        </Button>
       </div>
     </div>
-    <!-- <div class="px-4 pb-7 pt-4 sm:px-6">Actions</div> -->
   </div>
 </template>
 <script setup>
+import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
+import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
+import Draggable from 'vuedraggable'
+import { 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>