From e4c8e2727f3e423d9430c8fc1eaf39247bec4e9d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 2 Jan 2025 15:03:42 +0530
Subject: [PATCH] fix: preview of side panel modal

---
 .../src/components/Modals/SidePanelModal.vue  | 31 +++++++------------
 frontend/src/components/SidePanelLayout.vue   | 10 ++++--
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Modals/SidePanelModal.vue b/frontend/src/components/Modals/SidePanelModal.vue
index e4f674d4..5897bf3a 100644
--- a/frontend/src/components/Modals/SidePanelModal.vue
+++ b/frontend/src/components/Modals/SidePanelModal.vue
@@ -37,26 +37,20 @@
             :doctype="_doctype"
           />
           <div v-if="preview" class="flex flex-1 flex-col border rounded">
-            <div
-              v-for="(section, i) in tabs.data[0].sections"
-              :key="section.name"
-              class="flex flex-col py-1.5 px-1"
-              :class="{
-                'border-b': i !== tabs.data[0].sections?.length - 1,
-              }"
+            <SidePanelLayout
+              :sections="{ data: tabs.data[0].sections }"
+              :doctype="_doctype"
+              v-model="data"
+              :preview="true"
+              v-slot="{ section }"
             >
-              <Section
-                labelClass="p-2"
-                :label="section.label"
-                :opened="section.opened"
+              <div
+                v-if="section.name == 'contacts_section'"
+                class="flex h-16 items-center justify-center text-base text-ink-gray-5"
               >
-                <SidePanelLayout
-                  :fields="section.columns?.[0].fields || []"
-                  :isLastSection="i == tabs.data[0].sections?.length - 1"
-                  v-model="data"
-                />
-              </Section>
-            </div>
+                {{ __('No contacts added') }}
+              </div>
+            </SidePanelLayout>
           </div>
           <div
             v-else
@@ -70,7 +64,6 @@
   </Dialog>
 </template>
 <script setup>
-import Section from '@/components/Section.vue'
 import SidePanelLayout from '@/components/SidePanelLayout.vue'
 import SidePanelLayoutEditor from '@/components/SidePanelLayoutEditor.vue'
 import { useDebounceFn } from '@vueuse/core'
diff --git a/frontend/src/components/SidePanelLayout.vue b/frontend/src/components/SidePanelLayout.vue
index 3692d81b..fc4b3386 100644
--- a/frontend/src/components/SidePanelLayout.vue
+++ b/frontend/src/components/SidePanelLayout.vue
@@ -12,7 +12,7 @@
             :label="section.label"
             :opened="section.opened"
           >
-            <template #actions>
+            <template v-if="!preview" #actions>
               <div v-if="section.contacts" class="pr-2">
                 <Link
                   value=""
@@ -371,6 +371,10 @@ const props = defineProps({
     type: String,
     default: 'CRM Lead',
   },
+  preview: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
@@ -408,8 +412,8 @@ const _sections = computed(() => {
       })
     }
     section.visible =
-      section.isContactsSection ||
-      section.columns[0].fields.filter((f) => f.visible).length
+      section.name == 'contacts_section' ||
+      section.columns?.[0].fields.filter((f) => f.visible).length
     return section
   })
 })