fix: preview of side panel modal

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
+            <SidePanelLayout
-              v-for="(section, i) in tabs.data[0].sections"
+              :sections="{ data: tabs.data[0].sections }"
-              :key="section.name"
+              :doctype="_doctype"
-              class="flex flex-col py-1.5 px-1"
+              v-model="data"
-              :class="{
+              :preview="true"
-                'border-b': i !== tabs.data[0].sections?.length - 1,
+              v-slot="{ section }"
-              }"
             >
-              <Section
+              <div
-                labelClass="p-2"
+                v-if="section.name == 'contacts_section'"
-                :label="section.label"
+                class="flex h-16 items-center justify-center text-base text-ink-gray-5"
-                :opened="section.opened"
               >
-                <SidePanelLayout
+                {{ __('No contacts added') }}
-                  :fields="section.columns?.[0].fields || []"
+              </div>
-                  :isLastSection="i == tabs.data[0].sections?.length - 1"
+            </SidePanelLayout>
-                  v-model="data"
-                />
-              </Section>
-            </div>
           </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'

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.name == 'contacts_section' ||
-      section.columns[0].fields.filter((f) => f.visible).length
+      section.columns?.[0].fields.filter((f) => f.visible).length
     return section
   })
 })