From d585a98ef3323f9384ba033a540b0293c9d288f0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 2 Jul 2024 13:49:39 +0530
Subject: [PATCH] feat: show side panel layout edit button in lead/deal side
 panel and remove from settings

---
 .../src/components/Settings/SettingsModal.vue |  14 +-
 ...Builder.vue => SidePanelLayoutBuilder.vue} |   0
 .../components/Settings/SidePanelModal.vue    | 145 ++++++++++++++++++
 frontend/src/pages/Deal.vue                   |  16 ++
 frontend/src/pages/Lead.vue                   |  21 ++-
 5 files changed, 179 insertions(+), 17 deletions(-)
 rename frontend/src/components/Settings/{SidebarLayoutBuilder.vue => SidePanelLayoutBuilder.vue} (100%)
 create mode 100644 frontend/src/components/Settings/SidePanelModal.vue

diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 938f0aec..cdfad34c 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/frontend/src/components/Settings/SettingsModal.vue
@@ -40,14 +40,12 @@
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import RightSideLayoutIcon from '@/components/Icons/RightSideLayoutIcon.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
-import SidebarFieldsLayout from '@/components/Settings/SidebarFieldsLayout.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
 import { isWhatsappInstalled } from '@/composables/settings'
-import { Dialog, FeatherIcon } from 'frappe-ui'
+import { Dialog } from 'frappe-ui'
 import { ref, markRaw, computed, h } from 'vue'
 
 const show = defineModel()
@@ -81,16 +79,6 @@ const tabs = computed(() => {
         },
       ],
     },
-    {
-      label: 'Customizations',
-      items: [
-        {
-          label: 'Sidebar Fields Layout',
-          icon: RightSideLayoutIcon,
-          component: markRaw(SidebarFieldsLayout),
-        },
-      ],
-    },
   ]
 
   return _tabs.map((tab) => {
diff --git a/frontend/src/components/Settings/SidebarLayoutBuilder.vue b/frontend/src/components/Settings/SidePanelLayoutBuilder.vue
similarity index 100%
rename from frontend/src/components/Settings/SidebarLayoutBuilder.vue
rename to frontend/src/components/Settings/SidePanelLayoutBuilder.vue
diff --git a/frontend/src/components/Settings/SidePanelModal.vue b/frontend/src/components/Settings/SidePanelModal.vue
new file mode 100644
index 00000000..02a66015
--- /dev/null
+++ b/frontend/src/components/Settings/SidePanelModal.vue
@@ -0,0 +1,145 @@
+<template>
+  <Dialog v-model="show" :options="{ size: '3xl' }">
+    <template #body>
+      <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>{{ __('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>
+        </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>
+          </div>
+        </Resizer>
+      </div>
+    </template>
+  </Dialog>
+</template>
+<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 { ref, watch, onMounted, nextTick } from 'vue'
+
+const props = defineProps({
+  doctype: {
+    type: String,
+    default: 'CRM Lead',
+  },
+})
+
+const show = defineModel()
+const _doctype = ref(props.doctype)
+const parentRef = ref(null)
+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() {
+  nextTick(() => {
+    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>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index bbf63456..babf60fc 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -146,6 +146,14 @@
                     </template>
                   </Link>
                 </div>
+                <Button
+                  v-else-if="(!section.contacts && i == 1) || i == 0"
+                  variant="ghost"
+                  class="w-7 mr-2"
+                  @click="showSidePanelModal = true"
+                >
+                  <EditIcon class="h-4 w-4" />
+                </Button>
               </template>
               <SectionFields
                 v-if="section.fields"
@@ -284,10 +292,16 @@
     :doc="deal.data"
     doctype="CRM Deal"
   />
+  <SidePanelModal
+    v-if="showSidePanelModal"
+    v-model="showSidePanelModal"
+    doctype="CRM Deal"
+  />
 </template>
 <script setup>
 import Resizer from '@/components/Resizer.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
@@ -305,6 +319,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import ContactModal from '@/components/Modals/ContactModal.vue'
+import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
 import SectionFields from '@/components/SectionFields.vue'
@@ -372,6 +387,7 @@ onMounted(() => {
 const reload = ref(false)
 const showOrganizationModal = ref(false)
 const showAssignmentModal = ref(false)
+const showSidePanelModal = ref(false)
 const _organization = ref({})
 
 const organization = computed(() => {
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index dccf8a47..0a9200aa 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -178,6 +178,15 @@
                 v-model="lead.data"
                 @update="updateField"
               />
+              <template v-if="i == 0" #actions>
+                <Button
+                  variant="ghost"
+                  class="w-7 mr-2"
+                  @click="showSidePanelModal = true"
+                >
+                  <EditIcon class="h-4 w-4" />
+                </Button>
+              </template>
             </Section>
           </div>
         </div>
@@ -227,7 +236,7 @@
         <div v-else class="mt-2.5 text-base">
           {{
             __(
-              'New organization will be created based on the data in details section'
+              'New organization will be created based on the data in details section',
             )
           }}
         </div>
@@ -257,9 +266,11 @@
       </div>
     </template>
   </Dialog>
+  <SidePanelModal v-if="showSidePanelModal" v-model="showSidePanelModal" />
 </template>
 <script setup>
 import Resizer from '@/components/Resizer.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
@@ -275,6 +286,7 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import Activities from '@/components/Activities.vue'
 import AssignmentModal from '@/components/Modals/AssignmentModal.vue'
+import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
 import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import Section from '@/components/Section.vue'
@@ -347,6 +359,7 @@ onMounted(() => {
 
 const reload = ref(false)
 const showAssignmentModal = ref(false)
+const showSidePanelModal = ref(false)
 
 function updateLead(fieldname, value, callback) {
   value = Array.isArray(fieldname) ? '' : value
@@ -454,7 +467,7 @@ const tabs = computed(() => {
 watch(tabs, (value) => {
   if (value && route.params.tabName) {
     let index = value.findIndex(
-      (tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase()
+      (tab) => tab.name.toLowerCase() === route.params.tabName.toLowerCase(),
     )
     if (index !== -1) {
       tabIndex.value = index
@@ -549,7 +562,7 @@ async function convertToDeal(updated) {
         organization: lead.data.organization,
       },
       '',
-      () => convertToDeal(true)
+      () => convertToDeal(true),
     )
     showConvertToDealModal.value = false
   } else {
@@ -557,7 +570,7 @@ async function convertToDeal(updated) {
       'crm.fcrm.doctype.crm_lead.crm_lead.convert_to_deal',
       {
         lead: lead.data.name,
-      }
+      },
     )
     if (deal) {
       if (updated) {