From 4848b09022ffe41c192e4fa4a792577f05c7c5f9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 14 Aug 2024 12:54:11 +0530
Subject: [PATCH] refactor: side panel layout builder modal

---
 .../Settings/SidePanelLayoutBuilder.vue       |  41 +++---
 .../components/Settings/SidePanelModal.vue    | 129 ++++++++---------
 .../Settings/SidebarFieldsLayout.vue          | 131 ------------------
 3 files changed, 92 insertions(+), 209 deletions(-)
 delete mode 100644 frontend/src/components/Settings/SidebarFieldsLayout.vue

diff --git a/frontend/src/components/Settings/SidePanelLayoutBuilder.vue b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
index cae8c605..e31e5b8f 100644
--- a/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
+++ b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
@@ -1,11 +1,13 @@
 <template>
-  <div>
-    <Draggable :list="sections" item-key="label" class="flex flex-col">
+  <FadedScrollableDiv>
+    <Draggable :list="sections" item-key="label" class="flex flex-col gap-5.5">
       <template #item="{ element: section }">
-        <div class="border-b">
-          <div class="flex items-center justify-between p-2">
+        <div class="flex flex-col gap-3">
+          <div
+            class="flex items-center justify-between rounded px-2.5 py-2 bg-gray-50"
+          >
             <div
-              class="flex h-7 max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
+              class="flex max-w-fit cursor-pointer items-center gap-2 text-base leading-4"
               @click="section.opened = !section.opened"
             >
               <FeatherIcon
@@ -26,37 +28,41 @@
                 <Button
                   v-if="section.editingLabel"
                   icon="check"
+                  class="!size-4 rounded-sm"
                   variant="ghost"
                   @click.stop="section.editingLabel = false"
                 />
               </div>
             </div>
-            <div>
+            <div class="flex gap-1 items-center">
               <Button
                 v-if="!section.editingLabel"
-                icon="edit"
+                class="!size-4 rounded-sm"
                 variant="ghost"
                 @click="section.editingLabel = true"
-              />
+              >
+                <EditIcon class="h-3.5" />
+              </Button>
               <Button
                 v-if="section.editable !== false"
+                class="!size-4 rounded-sm"
                 icon="x"
                 variant="ghost"
                 @click="sections.splice(sections.indexOf(section), 1)"
               />
             </div>
           </div>
-          <div v-show="section.opened" class="p-4 pt-0 pb-2">
+          <div v-show="section.opened">
             <Draggable
               :list="section.fields"
               group="fields"
               item-key="label"
-              class="flex flex-col gap-1"
+              class="flex flex-col gap-1.5"
               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"
+                  class="px-2.5 py-2 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" />
@@ -66,6 +72,7 @@
                     <Button
                       variant="ghost"
                       icon="x"
+                      class="!size-4 rounded-sm"
                       @click="
                         section.fields.splice(section.fields.indexOf(field), 1)
                       "
@@ -82,7 +89,7 @@
             >
               <template #target="{ togglePopover }">
                 <Button
-                  class="w-full mt-2"
+                  class="w-full h-8 mt-1.5 !border-gray-200 hover:!border-gray-300"
                   variant="outline"
                   @click="togglePopover()"
                   :label="__('Add Field')"
@@ -113,10 +120,10 @@
         </div>
       </template>
     </Draggable>
-    <div class="p-2">
+    <div class="mt-5.5">
       <Button
-        class="w-full"
-        variant="outline"
+        class="w-full h-8"
+        variant="subtle"
         :label="__('Add Section')"
         @click="
           sections.push({ label: __('New Section'), opened: true, fields: [] })
@@ -127,9 +134,11 @@
         </template>
       </Button>
     </div>
-  </div>
+  </FadedScrollableDiv>
 </template>
 <script setup>
+import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import DragVerticalIcon from '@/components/Icons/DragVerticalIcon.vue'
 import Draggable from 'vuedraggable'
diff --git a/frontend/src/components/Settings/SidePanelModal.vue b/frontend/src/components/Settings/SidePanelModal.vue
index 914589df..82fd67a8 100644
--- a/frontend/src/components/Settings/SidePanelModal.vue
+++ b/frontend/src/components/Settings/SidePanelModal.vue
@@ -1,67 +1,73 @@
 <template>
   <Dialog v-model="show" :options="{ size: '3xl' }">
-    <template #body>
-      <div ref="parentRef" class="flex h-[calc(100vh_-_8rem)]">
-        <div class="flex-1 flex flex-col justify-between gap-2 p-8">
-          <div class="flex flex-col gap-2">
-            <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
-              <div>{{ __('Edit Fields Layout') }}</div>
-              <Badge
-                v-if="dirty"
-                :label="__('Not Saved')"
-                variant="subtle"
-                theme="orange"
-              />
-            </h2>
-            <FormControl
-              type="select"
-              v-model="_doctype"
-              :label="__('DocType')"
-              :options="['CRM Lead', 'CRM Deal']"
-              @change="reload"
-            />
-          </div>
-          <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>
+    <template #body-title>
+      <h3
+        class="flex items-center gap-2 text-2xl font-semibold leading-6 text-gray-900"
+      >
+        <div>{{ __('Edit Field Layout') }}</div>
+        <Badge
+          v-if="dirty"
+          :label="__('Not Saved')"
+          variant="subtle"
+          theme="orange"
+        />
+      </h3>
+    </template>
+    <template #body-content>
+      <div class="flex flex-col gap-5.5 h-[calc(100vh_-_17rem)]">
+        <div class="flex justify-between gap-2">
+          <FormControl
+            type="select"
+            class="w-1/4"
+            v-model="_doctype"
+            :options="['CRM Lead', 'CRM Deal']"
+            @change="reload"
+          />
+          <Switch
+            v-model="preview"
+            :label="preview ? __('Hide preview') : __('Show preview')"
+            size="sm"
+          />
         </div>
-        <Resizer
-          v-if="sections.data"
-          class="flex flex-col justify-between border-l"
-          :parent="parentRef"
-          side="right"
-        >
-          <div class="flex flex-1 flex-col justify-between overflow-hidden">
-            <div class="flex flex-col overflow-y-auto">
-              <SidePanelLayoutBuilder
-                v-if="!preview"
-                :sections="sections.data"
-                :doctype="_doctype"
-              />
-              <div
-                v-else
-                v-for="(section, i) in sections.data"
-                :key="section.label"
-                class="flex flex-col p-3"
-                :class="{ 'border-b': i !== sections.data.length - 1 }"
-              >
-                <Section :is-opened="section.opened" :label="section.label">
-                  <SectionFields :fields="section.fields" v-model="data" />
-                </Section>
-              </div>
+        <div v-if="sections.data" class="flex gap-4 overflow-hidden">
+          <SidePanelLayoutBuilder
+            class="flex flex-1 flex-col overflow-y-auto pr-2"
+            :sections="sections.data"
+            :doctype="_doctype"
+          />
+          <div
+            v-if="preview"
+            class="flex flex-1 flex-col overflow-y-auto border rounded"
+          >
+            <div
+              v-for="(section, i) in sections.data"
+              :key="section.label"
+              class="flex flex-col py-1.5 px-1"
+              :class="{ 'border-b': i !== sections.data.length - 1 }"
+            >
+              <Section :is-opened="section.opened" :label="section.label">
+                <SectionFields :fields="section.fields" v-model="data" />
+              </Section>
             </div>
           </div>
-        </Resizer>
+          <div
+            v-else
+            class="flex flex-1 justify-center items-center text-gray-600 bg-gray-50 rounded border border-gray-50"
+          >
+            {{ __('Toggle on for preview') }}
+          </div>
+        </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>
@@ -69,10 +75,9 @@
 <script setup>
 import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
-import Resizer from '@/components/Resizer.vue'
 import SidePanelLayoutBuilder from '@/components/Settings/SidePanelLayoutBuilder.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({
@@ -84,7 +89,6 @@ const props = defineProps({
 
 const show = defineModel()
 const _doctype = ref(props.doctype)
-const parentRef = ref(null)
 const loading = ref(false)
 const dirty = ref(false)
 const preview = ref(false)
@@ -139,6 +143,7 @@ function saveChanges() {
     },
   ).then(() => {
     loading.value = false
+    show.value = false
     reload()
   })
 }
diff --git a/frontend/src/components/Settings/SidebarFieldsLayout.vue b/frontend/src/components/Settings/SidebarFieldsLayout.vue
deleted file mode 100644
index 86e8ace7..00000000
--- a/frontend/src/components/Settings/SidebarFieldsLayout.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <div ref="parentRef" class="flex h-full">
-    <div class="flex-1 flex flex-col justify-between gap-2 p-8">
-      <div class="flex flex-col gap-2">
-        <h2 class="flex gap-2 text-xl font-semibold leading-none h-5 mb-4">
-          <div>{{ __('Sidebar Fields Layout') }}</div>
-          <Badge
-            v-if="dirty"
-            :label="__('Not Saved')"
-            variant="subtle"
-            theme="orange"
-          />
-        </h2>
-        <FormControl
-          type="select"
-          v-model="doctype"
-          :label="__('DocType')"
-          :options="['CRM Lead', 'CRM Deal']"
-          @change="reload"
-        />
-      </div>
-      <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>
-    <Resizer
-      v-if="sections.data"
-      class="flex flex-col justify-between border-l"
-      :parent="parentRef"
-      side="right"
-    >
-      <div class="flex flex-1 flex-col justify-between overflow-hidden">
-        <div class="flex flex-col overflow-y-auto">
-          <SidebarLayoutBuilder
-            v-if="!preview"
-            :sections="sections.data"
-            :doctype="doctype"
-          />
-          <div
-            v-else
-            v-for="(section, i) in sections.data"
-            :key="section.label"
-            class="flex flex-col p-3"
-            :class="{ 'border-b': i !== sections.data.length - 1 }"
-          >
-            <Section :is-opened="section.opened" :label="section.label">
-              <SectionFields :fields="section.fields" v-model="data" />
-            </Section>
-          </div>
-        </div>
-      </div>
-    </Resizer>
-  </div>
-</template>
-<script setup>
-import Section from '@/components/Section.vue'
-import SectionFields from '@/components/SectionFields.vue'
-import Resizer from '@/components/Resizer.vue'
-import SidebarLayoutBuilder from '@/components/Settings/SidebarLayoutBuilder.vue'
-import { useDebounceFn } from '@vueuse/core'
-import { Badge, call, createResource } from 'frappe-ui'
-import { ref, watch, onMounted } from 'vue'
-
-const parentRef = ref(null)
-const doctype = ref('CRM Lead')
-const loading = ref(false)
-const dirty = ref(false)
-const preview = ref(false)
-const data = ref({})
-
-function getParams() {
-  return { doctype: doctype.value, type: 'Side Panel' }
-}
-
-const sections = createResource({
-  url: 'crm.fcrm.doctype.crm_fields_layout.crm_fields_layout.get_fields_layout',
-  cache: ['sidebar-sections', doctype.value],
-  params: getParams(),
-  onSuccess(data) {
-    sections.originalData = JSON.parse(JSON.stringify(data))
-  },
-})
-
-watch(
-  () => sections?.data,
-  () => {
-    dirty.value =
-      JSON.stringify(sections?.data) !== JSON.stringify(sections?.originalData)
-  },
-  { deep: true },
-)
-
-onMounted(() => useDebounceFn(reload, 100)())
-
-function reload() {
-  sections.params = getParams()
-  sections.reload()
-}
-
-function saveChanges() {
-  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: 'Side Panel',
-      layout: JSON.stringify(_sections),
-    },
-  ).then(() => {
-    loading.value = false
-    reload()
-  })
-}
-</script>