fix: include section creation code in SidePanelLayout component

frontend/src/components/SidePanelLayout.vue

@@ -1,18 +1,76 @@
 <template>
+  <div class="sections flex flex-col overflow-y-auto">
+    <template v-for="(section, i) in _sections" :key="section.name">
+      <div v-if="section.visible" class="section flex flex-col">
+        <div
+          v-if="i !== firstVisibleIndex()"
+          class="w-full section-border h-px border-t"
+        />
+        <div class="p-3">
+          <Section
+            labelClass="px-2 font-semibold"
+            :label="section.label"
+            :opened="section.opened"
+          >
+            <template #actions>
+              <div v-if="section.contacts" class="pr-2">
+                <Link
+                  value=""
+                  doctype="Contact"
+                  @change="(e) => addContact(e)"
+                  :onCreate="
+                    (value, close) => {
+                      _contact = {
+                        first_name: value,
+                        company_name: deal.data.organization,
+                      }
+                      showContactModal = true
+                      close()
+                    }
+                  "
+                >
+                  <template #target="{ togglePopover }">
+                    <Button
+                      class="h-7 px-3"
+                      variant="ghost"
+                      icon="plus"
+                      @click="togglePopover()"
+                    />
+                  </template>
+                </Link>
+              </div>
+              <Button
+                v-else-if="
+                  ((!section.contacts && i == 1) || i == 0) && isManager()
+                "
+                variant="ghost"
+                class="w-7 mr-2"
+                @click="showSidePanelModal = true"
+              >
+                <EditIcon class="h-4 w-4" />
+              </Button>
+            </template>
+            <slot v-bind="{ section }">
               <FadedScrollableDiv
-    class="flex flex-col gap-1.5 overflow-y-auto"
+                v-if="section.columns?.[0].fields.length"
-    :class="[isLastSection ? '' : 'max-h-[300px]']"
+                class="column flex flex-col gap-1.5 overflow-y-auto"
+              >
+                <template
+                  v-for="field in section.columns[0].fields || []"
+                  :key="field.name"
                 >
                   <div
-      v-for="field in _fields"
+                    v-if="field.visible"
-      :key="field.name"
+                    class="field flex items-center gap-2 px-3 leading-5 first:mt-3"
-      :class="[field.hidden && 'hidden']"
-      class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
                   >
                     <Tooltip :text="__(field.label)" :hoverDelay="1">
-        <div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5">
+                      <div
+                        class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
+                      >
                         <span>{{ __(field.label) }}</span>
-          <span class="text-ink-red-3">{{ field.reqd ? ' *' : '' }}</span>
+                        <span class="text-ink-red-3">{{
+                          field.reqd ? ' *' : ''
+                        }}</span>
                       </div>
                     </Tooltip>
                     <div class="flex items-center justify-between w-[65%]">
@@ -21,7 +79,8 @@
                       >
                         <div
                           v-if="
-              field.read_only && !['checkbox', 'dropdown'].includes(field.type)
+                            field.read_only &&
+                            !['checkbox', 'dropdown'].includes(field.type)
                           "
                           class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
                         >
@@ -65,8 +124,12 @@
                                     :option="option"
                                   />
                                   <div v-else>
-                      <div class="p-1.5 px-7 text-base text-ink-gray-4">
+                                    <div
-                        {{ __('No {0} Available', [field.label]) }}
+                                      class="p-1.5 px-7 text-base text-ink-gray-4"
+                                    >
+                                      {{
+                                        __('No {0} Available', [field.label])
+                                      }}
                                     </div>
                                   </div>
                                 </div>
@@ -91,19 +154,28 @@
                           class="form-control"
                           :type="field.type"
                           v-model="data[field.name]"
-            @change.stop="emit('update', field.name, $event.target.checked)"
+                          @change.stop="
+                            emit('update', field.name, $event.target.checked)
+                          "
                           :disabled="Boolean(field.read_only)"
                         />
                         <FormControl
                           v-else-if="
-              ['email', 'number', 'password', 'textarea'].includes(field.type)
+                            [
+                              'email',
+                              'number',
+                              'password',
+                              'textarea',
+                            ].includes(field.type)
                           "
                           class="form-control"
                           :type="field.type"
                           :value="data[field.name]"
                           :placeholder="field.placeholder"
                           :debounce="500"
-            @change.stop="emit('update', field.name, $event.target.value)"
+                          @change.stop="
+                            emit('update', field.name, $event.target.value)
+                          "
                         />
                         <FormControl
                           v-else-if="field.type === 'select'"
@@ -112,12 +184,19 @@
                           v-model="data[field.name]"
                           :options="field.options"
                           :placeholder="field.placeholder"
-            @change.stop="emit('update', field.name, $event.target.value)"
+                          @change.stop="
+                            emit('update', field.name, $event.target.value)
+                          "
                         />
                         <Link
-            v-else-if="['lead_owner', 'deal_owner'].includes(field.name)"
+                          v-else-if="
+                            ['lead_owner', 'deal_owner'].includes(field.name)
+                          "
                           class="form-control"
-            :value="data[field.name] && getUser(data[field.name]).full_name"
+                          :value="
+                            data[field.name] &&
+                            getUser(data[field.name]).full_name
+                          "
                           doctype="User"
                           :filters="field.filters"
                           @change="(data) => emit('update', field.name, data)"
@@ -125,10 +204,18 @@
                           :hideMe="true"
                         >
                           <template v-if="data[field.name]" #prefix>
-              <UserAvatar class="mr-1.5" :user="data[field.name]" size="sm" />
+                            <UserAvatar
+                              class="mr-1.5"
+                              :user="data[field.name]"
+                              size="sm"
+                            />
                           </template>
                           <template #item-prefix="{ option }">
-              <UserAvatar class="mr-1.5" :user="option.value" size="sm" />
+                            <UserAvatar
+                              class="mr-1.5"
+                              :user="option.value"
+                              size="sm"
+                            />
                           </template>
                           <template #item-label="{ option }">
                             <Tooltip :text="option.value">
@@ -148,17 +235,25 @@
                           @change="(data) => emit('update', field.name, data)"
                           :onCreate="field.create"
                         />
-          <div v-else-if="field.type === 'datetime'" class="form-control">
+                        <div
+                          v-else-if="field.type === 'datetime'"
+                          class="form-control"
+                        >
                           <DateTimePicker
                             icon-left=""
                             :value="data[field.name]"
-              :formatter="(date) => getFormat(date, '', true, true)"
+                            :formatter="
+                              (date) => getFormat(date, '', true, true)
+                            "
                             :placeholder="field.placeholder"
                             placement="left-start"
                             @change="(data) => emit('update', field.name, data)"
                           />
                         </div>
-          <div v-else-if="field.type === 'date'" class="form-control">
+                        <div
+                          v-else-if="field.type === 'date'"
+                          class="form-control"
+                        >
                           <DatePicker
                             icon-left=""
                             :value="data[field.name]"
@@ -175,7 +270,9 @@
                           :value="getFormattedPercent(field.name, data)"
                           :placeholder="field.placeholder"
                           :debounce="500"
-            @change.stop="emit('update', field.name, flt($event.target.value))"
+                          @change.stop="
+                            emit('update', field.name, flt($event.target.value))
+                          "
                         />
                         <FormControl
                           v-else-if="field.type === 'float'"
@@ -184,7 +281,9 @@
                           :value="getFormattedFloat(field.name, data)"
                           :placeholder="field.placeholder"
                           :debounce="500"
-            @change.stop="emit('update', field.name, flt($event.target.value))"
+                          @change.stop="
+                            emit('update', field.name, flt($event.target.value))
+                          "
                         />
                         <FormControl
                           v-else-if="field.type === 'currency'"
@@ -193,7 +292,9 @@
                           :value="getFormattedCurrency(field.name, data)"
                           :placeholder="field.placeholder"
                           :debounce="500"
-            @change.stop="emit('update', field.name, flt($event.target.value))"
+                          @change.stop="
+                            emit('update', field.name, flt($event.target.value))
+                          "
                         />
                         <FormControl
                           v-else
@@ -202,27 +303,51 @@
                           :value="data[field.name]"
                           :placeholder="field.placeholder"
                           :debounce="500"
-            @change.stop="emit('update', field.name, $event.target.value)"
+                          @change.stop="
+                            emit('update', field.name, $event.target.value)
+                          "
                         />
                       </div>
                       <div class="ml-1">
                         <ArrowUpRightIcon
-            v-if="field.type === 'link' && field.link && data[field.name]"
+                          v-if="
+                            field.type === 'link' &&
+                            field.link &&
+                            data[field.name]
+                          "
                           class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
                           @click.stop="field.link(data[field.name])"
                         />
                         <EditIcon
-            v-if="field.type === 'link' && field.edit && data[field.name]"
+                          v-if="
+                            field.type === 'link' &&
+                            field.edit &&
+                            data[field.name]
+                          "
                           class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
                           @click.stop="field.edit(data[field.name])"
                         />
                       </div>
                     </div>
                   </div>
+                </template>
               </FadedScrollableDiv>
+            </slot>
+          </Section>
+        </div>
+      </div>
+    </template>
+  </div>
+  <SidePanelModal
+    v-if="showSidePanelModal"
+    v-model="showSidePanelModal"
+    :doctype="doctype"
+    @reload="() => sections.reload()"
+  />
 </template>
 
 <script setup>
+import Section from '@/components/Section.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import DropdownItem from '@/components/DropdownItem.vue'
 import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
@@ -230,51 +355,78 @@ import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Link from '@/components/Controls/Link.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
 import { getMeta } from '@/stores/meta'
 import { usersStore } from '@/stores/users'
 import { getFormat, evaluateDependsOnValue } from '@/utils'
 import { flt } from '@/utils/numberFormat.js'
 import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 
 const props = defineProps({
-  fields: {
+  sections: {
     type: Object,
   },
   doctype: {
     type: String,
     default: 'CRM Lead',
   },
-  isLastSection: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
   getMeta(props.doctype)
-const { getUser } = usersStore()
+const { isManager, getUser } = usersStore()
 
 const emit = defineEmits(['update'])
 
 const data = defineModel()
+const showSidePanelModal = ref(false)
 
-const _fields = computed(() => {
+const _sections = computed(() => {
-  let all_fields = []
+  if (!props.sections?.data?.length) return []
-  props.fields?.forEach((field) => {
+  return props.sections.data.map((section) => {
-    let df = field?.all_properties
+    if (section.columns?.length) {
-    if (df?.depends_on && !evaluateDependsOnValue(df.depends_on, data.value)) {
+      section.columns[0].fields = section.columns[0].fields.map((field) => {
-      field.hidden = true
+        let df = field?.all_properties || {}
-    }
+        let _field = {
-    all_fields.push({
           ...field,
-      filters: df?.link_filters && JSON.parse(df.link_filters),
+          depends_on: df.depends_on,
+          mandatory_depends_on: df.mandatory_depends_on,
+          display_via_depends_on: evaluateDependsOnValue(
+            df.depends_on,
+            data.value,
+          ),
+          mandatory_via_depends_on: evaluateDependsOnValue(
+            df.mandatory_depends_on,
+            data.value,
+          ),
+          filters: df.link_filters && JSON.parse(df.link_filters),
           placeholder: field.placeholder || field.label,
+        }
+        _field.visible = isFieldVisible(_field)
+        return _field
       })
+    }
+    section.visible =
+      section.isContactsSection ||
+      section.columns[0].fields.filter((f) => f.visible).length
+    return section
   })
-  return all_fields
 })
 
+function isFieldVisible(field) {
+  return (
+    (field.type == 'Check' ||
+      (field.read_only && data.value[field.name]) ||
+      !field.read_only) &&
+    (!field.depends_on || field.display_via_depends_on) &&
+    !field.hidden
+  )
+}
+
+function firstVisibleIndex() {
+  return _sections.value.findIndex((section) => section.visible)
+}
 </script>
 
 <style scoped>
@@ -309,4 +461,11 @@ const _fields = computed(() => {
   color: white;
   width: 0;
 }
+
+.sections .section .column {
+  max-height: 300px;
+}
+.sections .section:last-of-type .column {
+  max-height: none;
+}
 </style>