feat: load custom fields in deal page

crm/fcrm/doctype/crm_deal/crm_deal.json

@@ -6,23 +6,24 @@
  "doctype": "DocType",
  "engine": "InnoDB",
  "field_order": [
-  "naming_series",
+  "organization_tab",
   "organization",
   "website",
   "annual_revenue",
-  "column_break_afce",
-  "deal_owner",
   "close_date",
-  "status",
   "probability",
   "next_step",
-  "section_break_eepu",
-  "lead",
-  "column_break_bqvs",
   "contacts_tab",
   "email",
   "mobile_no",
-  "contacts"
+  "contacts",
+  "others_tab",
+  "naming_series",
+  "status",
+  "deal_owner",
+  "section_break_eepu",
+  "lead",
+  "column_break_bqvs"
  ],
  "fields": [
   {
@@ -40,18 +41,16 @@
    "fetch_from": "organization.annual_revenue",
    "fieldname": "annual_revenue",
    "fieldtype": "Int",
-   "label": "Annual Revenue"
+   "label": "Amount",
-  },
+   "read_only": 1
-  {
-   "fieldname": "column_break_afce",
-   "fieldtype": "Column Break"
   },
   {
    "fetch_from": "organization.website",
    "fieldname": "website",
    "fieldtype": "Data",
    "label": "Website",
-   "options": "URL"
+   "options": "URL",
+   "read_only": 1
   },
   {
    "fieldname": "close_date",
@@ -92,7 +91,8 @@
   {
    "fieldname": "contacts_tab",
    "fieldtype": "Tab Break",
-   "label": "Contacts"
+   "label": "Contacts",
+   "read_only": 1
   },
   {
    "fieldname": "email",
@@ -121,11 +121,22 @@
    "fieldtype": "Table",
    "label": "Contacts",
    "options": "CRM Contacts"
+  },
+  {
+   "fieldname": "others_tab",
+   "fieldtype": "Tab Break",
+   "label": "Others",
+   "read_only": 1
+  },
+  {
+   "fieldname": "organization_tab",
+   "fieldtype": "Tab Break",
+   "label": "Organization"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-11-09 19:58:15.620483",
+ "modified": "2023-11-22 13:26:52.401192",
  "modified_by": "Administrator",
  "module": "FCRM",
  "name": "CRM Deal",

frontend/src/pages/Deal.vue

@@ -96,10 +96,10 @@
       <div class="flex flex-1 flex-col justify-between overflow-hidden">
         <div class="flex flex-col overflow-y-auto">
           <div
-            v-for="(section, i) in detailSections"
+            v-for="(section, i) in detailSections.data"
             :key="section.label"
             class="flex flex-col p-3"
-            :class="{ 'border-b': i !== detailSections.length - 1 }"
+            :class="{ 'border-b': i !== detailSections.data.length - 1 }"
           >
             <Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
               <div class="flex items-center justify-between">
@@ -191,13 +191,14 @@
                       </Tooltip>
                       <FormControl
                         v-else
+                        class="form-control"
                         type="text"
                         :value="deal.data[field.name]"
                         @change.stop="
                           updateDeal(field.name, $event.target.value)
                         "
                         :debounce="500"
-                        class="form-control"
+                        :placeholder="field.placeholder"
                       />
                     </div>
                     <ExternalLinkIcon
@@ -474,78 +475,53 @@ const tabs = [
   },
 ]
 
-const detailSections = computed(() => {
+const detailSections = createResource({
-  return [
+  url: 'crm.api.doc.get_doctype_fields',
-    {
+  params: { doctype: 'CRM Deal' },
-      label: 'Organization',
+  cache: 'dealFields',
-      opened: true,
+  auto: true,
-      fields: [
+  transform: (data) => {
-        {
+    return getParsedFields(data)
-          label: 'Organization',
+  },
-          type: 'link',
-          name: 'organization',
-          placeholder: 'Select organization',
-          doctype: 'CRM Organization',
-          change: (data) => updateField('organization', data),
-          create: (value, close) => {
-            _organization.value.organization_name = value
-            showOrganizationModal.value = true
-            close()
-          },
-          link: () => {
-            router.push({
-              name: 'Organization',
-              params: { organizationId: organization.value.name },
-            })
-          },
-        },
-        {
-          label: 'Website',
-          type: 'read_only',
-          name: 'website',
-          value: organization.value?.website,
-          tooltip:
-            'It is a read only field, value is fetched from organization',
-        },
-        {
-          label: 'Amount',
-          type: 'read_only',
-          name: 'annual_revenue',
-          value: organization.value?.annual_revenue,
-          tooltip:
-            'It is a read only field, value is fetched from organization',
-        },
-        {
-          label: 'Close date',
-          type: 'date',
-          name: 'close_date',
-        },
-        {
-          label: 'Probability',
-          type: 'data',
-          name: 'probability',
-        },
-        {
-          label: 'Next step',
-          type: 'data',
-          name: 'next_step',
-        },
-      ],
-    },
-    {
-      label: 'Contacts',
-      opened: true,
-      contacts: deal.data.contacts.map((contact) => {
-        return {
-          name: contact.contact,
-          is_primary: contact.is_primary,
-          opened: false,
-        }
-      }),
-    },
-  ]
 })
 
+function getParsedFields(sections) {
+  sections.forEach((section) => {
+    section.fields.forEach((field) => {
+      if (['website', 'annual_revenue'].includes(field.name)) {
+        field.value = organization.value?.[field.name]
+        field.tooltip =
+          'This field is read-only and is fetched from the organization'
+      } else if (field.name == 'organization') {
+        field.create = (value, close) => {
+          _organization.value.organization_name = value
+          showOrganizationModal.value = true
+          close()
+        }
+        field.link = () =>
+          router.push({
+            name: 'Organization',
+            params: { organizationId: deal.data.organization },
+          })
+      }
+    })
+  })
+
+  let contactSection = {
+    label: 'Contacts',
+    opened: true,
+    contacts: deal.data.contacts.map((contact) => {
+      return {
+        name: contact.contact,
+        is_primary: contact.is_primary,
+        opened: false,
+      }
+    }),
+  }
+
+  return [...sections, contactSection]
+}
+
 const showContactModal = ref(false)
 const _contact = ref({})