From 01604ca5bdcf9aea2b82a5c0cb0879605b79ea37 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 14 Aug 2024 13:37:33 +0530
Subject: [PATCH] refactor: quick entry layout builder modal

---
 .../Settings/QuickEntryLayoutBuilder.vue      | 135 ++++++++----------
 .../components/Settings/QuickEntryModal.vue   |  95 ++++++------
 .../Settings/SidePanelLayoutBuilder.vue       |  20 ++-
 3 files changed, 118 insertions(+), 132 deletions(-)

diff --git a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
index c285db8a..21fd0a01 100644
--- a/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
+++ b/frontend/src/components/Settings/QuickEntryLayoutBuilder.vue
@@ -1,14 +1,11 @@
 <template>
   <div>
-    <Draggable :list="sections" item-key="label" class="flex flex-col">
+    <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
       <template #item="{ element: section }">
-        <div
-          class="py-2 first:pt-0"
-          :class="section.hideBorder ? '' : 'border-t first:border-t-0'"
-        >
-          <div class="flex items-center justify-between pb-2">
+        <div class="flex flex-col gap-1.5 p-2.5 bg-gray-50 rounded">
+          <div class="flex items-center justify-between">
             <div
-              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
+              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 text-base font-medium leading-4"
             >
               <div
                 v-if="!section.editingLabel"
@@ -39,81 +36,71 @@
               </template>
             </Dropdown>
           </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>
+          <Draggable
+            :list="section.fields"
+            group="fields"
+            item-key="label"
+            class="grid gap-1.5"
+            :class="
+              section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
+            "
+            handle=".cursor-grab"
+          >
+            <template #item="{ element: field }">
+              <div
+                class="px-2.5 py-2 border rounded text-base bg-white text-gray-800 flex items-center leading-4 justify-between gap-2"
+              >
+                <div class="flex items-center gap-2">
+                  <DragVerticalIcon class="h-3.5 cursor-grab" />
+                  <div>{{ field.label }}</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
+                  variant="ghost"
+                  class="!size-4 rounded-sm"
+                  icon="x"
+                  @click="
+                    section.fields.splice(section.fields.indexOf(field), 1)
                   "
+                />
+              </div>
+            </template>
+          </Draggable>
+          <Autocomplete
+            v-if="fields.data"
+            value=""
+            :options="fields.data"
+            @change="(e) => addField(section, e)"
+          >
+            <template #target="{ togglePopover }">
+              <div class="gap-2 w-full">
+                <Button
+                  class="w-full !h-8 !border-gray-200 hover:!border-gray-300"
+                  variant="outline"
+                  @click="togglePopover()"
+                  :label="__('Add Field')"
                 >
-                  <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>
+                  <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>
-              </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>
+            </template>
+          </Autocomplete>
         </div>
       </template>
     </Draggable>
-    <div class="py-2 border-t">
+    <div class="mt-5.5">
       <Button
-        class="w-full !h-[38px] !border-gray-200"
-        variant="outline"
+        class="w-full h-8"
+        variant="subtle"
         :label="__('Add Section')"
         @click="
           sections.push({
diff --git a/frontend/src/components/Settings/QuickEntryModal.vue b/frontend/src/components/Settings/QuickEntryModal.vue
index 9e557156..a3ecca17 100644
--- a/frontend/src/components/Settings/QuickEntryModal.vue
+++ b/frontend/src/components/Settings/QuickEntryModal.vue
@@ -1,62 +1,62 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
-    <template #body>
-      <div class="flex flex-col overflow-hidden h-[calc(100vh_-_8rem)]">
-        <div class="flex flex-col gap-2 p-8 pb-5">
-          <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
-            <div>{{ __('Edit Quick Entry Layout') }}</div>
-            <Badge
-              v-if="dirty"
-              :label="__('Not Saved')"
-              variant="subtle"
-              theme="orange"
-            />
-          </h2>
-          <div class="flex gap-6 items-end">
-            <FormControl
-              class="flex-1"
-              type="select"
-              v-model="_doctype"
-              :label="__('DocType')"
-              :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
-              @change="reload"
-            />
-            <div class="flex flex-row-reverse gap-2">
-              <Button
-                :loading="loading"
-                :label="__('Save')"
-                variant="solid"
-                @click="saveChanges"
-              />
-              <Button :label="__('Reset')" @click="reload" />
-              <Button
-                :label="preview ? __('Hide Preview') : __('Show Preview')"
-                @click="preview = !preview"
-              />
-            </div>
-          </div>
+    <template #body-title>
+      <h3
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
+      >
+        <div>{{ __('Edit Quick Entry Layout') }}</div>
+        <Badge
+          v-if="dirty"
+          :label="__('Not Saved')"
+          variant="subtle"
+          theme="orange"
+        />
+      </h3>
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-3">
+        <div class="flex justify-between gap-2">
+          <FormControl
+            type="select"
+            class="w-1/4"
+            v-model="_doctype"
+            :options="['CRM Lead', 'CRM Deal', 'Contact', 'CRM Organization']"
+            @change="reload"
+          />
+          <Switch
+            v-model="preview"
+            :label="preview ? __('Hide preview') : __('Show preview')"
+            size="sm"
+          />
         </div>
-        <div v-if="sections?.data" class="overflow-y-auto p-8 pt-3">
-          <div
-            class="rounded-xl h-full inline-block w-full px-4 pb-6 pt-5 sm:px-6 transform overflow-y-auto bg-white text-left align-middle shadow-xl transition-all"
-          >
-            <QuickEntryLayoutBuilder
-              v-if="!preview"
-              :sections="sections.data"
-              :doctype="_doctype"
-            />
-            <Fields v-else :sections="sections.data" :data="{}" />
-          </div>
+        <div v-if="sections?.data">
+          <QuickEntryLayoutBuilder
+            v-if="!preview"
+            :sections="sections.data"
+            :doctype="_doctype"
+          />
+          <Fields v-else :sections="sections.data" :data="{}" />
         </div>
       </div>
     </template>
+    <template #actions>
+      <div class="flex flex-row-reverse gap-2">
+        <Button
+          :loading="loading"
+          :label="__('Save')"
+          variant="solid"
+          @click="saveChanges"
+        />
+        <Button :label="__('Reset')" @click="reload" />
+      </div>
+    </template>
   </Dialog>
 </template>
 <script setup>
 import Fields from '@/components/Fields.vue'
 import QuickEntryLayoutBuilder from '@/components/Settings/QuickEntryLayoutBuilder.vue'
 import { useDebounceFn } from '@vueuse/core'
-import { Dialog, Badge, call, createResource } from 'frappe-ui'
+import { Dialog, Badge, Switch, call, createResource } from 'frappe-ui'
 import { ref, watch, onMounted, nextTick } from 'vue'
 
 const props = defineProps({
@@ -121,6 +121,7 @@ function saveChanges() {
     },
   ).then(() => {
     loading.value = false
+    show.value = false
     reload()
   })
 }
diff --git a/frontend/src/components/Settings/SidePanelLayoutBuilder.vue b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
index e31e5b8f..6f99efcf 100644
--- a/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
+++ b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
@@ -62,22 +62,20 @@
             >
               <template #item="{ element: field }">
                 <div
-                  class="px-2.5 py-2 border rounded text-base text-gray-800 flex items-center justify-between gap-2"
+                  class="px-2.5 py-2 border rounded text-base leading-4 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"
-                      class="!size-4 rounded-sm"
-                      @click="
-                        section.fields.splice(section.fields.indexOf(field), 1)
-                      "
-                    />
-                  </div>
+                  <Button
+                    variant="ghost"
+                    icon="x"
+                    class="!size-4 rounded-sm"
+                    @click="
+                      section.fields.splice(section.fields.indexOf(field), 1)
+                    "
+                  />
                 </div>
               </template>
             </Draggable>