fix: implemented quick entry fields rendering for lead/deal/contact & organization

frontend/src/components/Modals/ContactModal.vue

@@ -57,7 +57,11 @@
               <div v-else>{{ field.value }}</div>
             </div>
           </div>
-          <Fields v-else :sections="sections" :data="_contact" />
+          <Fields
+            v-else-if="filteredSections"
+            :sections="filteredSections"
+            :data="_contact"
+          />
         </div>
       </div>
       <div v-if="!detailMode" class="px-4 pb-7 pt-4 sm:px-6">
@@ -87,7 +91,7 @@ import AddressIcon from '@/components/Icons/AddressIcon.vue'
 import CertificateIcon from '@/components/Icons/CertificateIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import Dropdown from '@/components/frappe-ui/Dropdown.vue'
-import { call } from 'frappe-ui'
+import { call, createResource } from 'frappe-ui'
 import { ref, nextTick, watch, computed, h } from 'vue'
 import { createToast } from '@/utils'
 import { useRouter } from 'vue-router'
@@ -230,52 +234,22 @@ const detailFields = computed(() => {
   return details.filter((detail) => detail.value)
 })
 
-const sections = computed(() => {
+const sections = createResource({
-  return [
+  url: 'crm.api.doc.get_quick_entry_fields',
-    {
+  cache: ['quickEntryFields', 'Contact'],
-      section: 'Salutation',
+  params: { doctype: 'Contact' },
-      columns: 1,
+  auto: true,
-      fields: [
+})
-        {
+
-          label: 'Salutation',
+const filteredSections = computed(() => {
-          name: 'salutation',
+  let allSections = sections.data || []
-          type: 'link',
+  if (!allSections.length) return []
-          placeholder: 'Mr',
+
-          doctype: 'Salutation',
+  allSections.forEach((s) => {
-        },
+    s.fields.forEach((field) => {
-      ],
+      if (field.name == 'email_id') {
-    },
+        field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
-    {
+        field.options =
-      section: 'Full Name',
-      columns: 2,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'First Name',
-          name: 'first_name',
-          type: 'data',
-          mandatory: true,
-          placeholder: 'John',
-        },
-        {
-          label: 'Last Name',
-          name: 'last_name',
-          type: 'data',
-          placeholder: 'Doe',
-        },
-      ],
-    },
-    {
-      section: 'Email',
-      columns: 1,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'Email',
-          name: 'email_id',
-          type: props.contact?.data?.name ? 'dropdown' : 'data',
-          placeholder: 'john@doe.com',
-          options:
           props.contact.data?.email_ids?.map((email) => {
             return {
               name: email.name,
@@ -306,43 +280,31 @@ const sections = computed(() => {
                   if (props.contact.data.email_ids.length === 0) {
                     _contact.value.email_id = ''
                   } else {
-                      _contact.value.email_id =
+                    _contact.value.email_id = props.contact.data.email_ids.find(
-                        props.contact.data.email_ids.find(
                       (email) => email.is_primary
                     )?.email_id
                   }
                 }
               },
             }
-            }) || [],
+          }) || []
-          create: () => {
+        field.create = () => {
           props.contact.data?.email_ids?.push({
             name: 'new-1',
             value: '',
             selected: false,
             isNew: true,
           })
-          },
+        }
-        },
+      } else if (field.name == 'mobile_no' || field.name == 'actual_mobile_no') {
-      ],
+        field.type = props.contact?.data?.name ? 'Dropdown' : 'Data'
-    },
+        field.name = 'actual_mobile_no'
-    {
+        field.options =
-      section: 'Mobile No. & Gender',
-      columns: 2,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'Mobile No.',
-          name: 'actual_mobile_no',
-          type: props.contact?.data?.name ? 'dropdown' : 'data',
-          placeholder: '+91 9876543210',
-          options:
           props.contact.data?.phone_nos?.map((phone) => {
             return {
               name: phone.name,
               value: phone.phone,
               selected: phone.phone === props.contact.data.actual_mobile_no,
-                placeholder: '+91 1234567890',
               onClick: () => {
                 _contact.value.actual_mobile_no = phone.phone
                 _contact.value.mobile_no = phone.phone
@@ -376,53 +338,20 @@ const sections = computed(() => {
                 }
               },
             }
-            }) || [],
+          }) || []
-          create: () => {
+        field.create = () => {
           props.contact.data?.phone_nos?.push({
             name: 'new-1',
             value: '',
             selected: false,
             isNew: true,
           })
-          },
+        }
-        },
+      }
-        {
+    })
-          label: 'Gender',
+  })
-          name: 'gender',
+
-          type: 'link',
+  return allSections
-          doctype: 'Gender',
-          placeholder: 'Male',
-        },
-      ],
-    },
-    {
-      section: 'Organization',
-      columns: 1,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'Organization',
-          name: 'company_name',
-          type: 'link',
-          doctype: 'CRM Organization',
-          placeholder: 'Frappé Technologies',
-        },
-      ],
-    },
-    {
-      section: 'Designation',
-      columns: 1,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'Designation',
-          name: 'designation',
-          type: 'data',
-          placeholder: 'CEO',
-        },
-      ],
-    },
-  ]
 })
 
 async function setAsPrimary(field, value) {

frontend/src/components/Modals/DealModal.vue

@@ -7,7 +7,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-4 grid sm:grid-cols-3 grid-cols-1 gap-4">
+      <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
         <div class="flex items-center gap-3 text-sm text-gray-600">
           <div>{{ __('Choose Existing Organization') }}</div>
           <Switch v-model="chooseExistingOrganization" />
@@ -17,7 +17,12 @@
           <Switch v-model="chooseExistingContact" />
         </div>
       </div>
-      <Fields class="border-t pt-4" :sections="sections" :data="deal" />
+      <Fields
+        v-if="filteredSections"
+        class="border-t pt-4"
+        :sections="filteredSections"
+        :data="deal"
+      />
       <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
     </template>
     <template #actions>
@@ -71,155 +76,66 @@ const isDealCreating = ref(false)
 const chooseExistingContact = ref(false)
 const chooseExistingOrganization = ref(false)
 
-const sections = computed(() => {
+const sections = createResource({
-  let fields = []
+  url: 'crm.api.doc.get_quick_entry_fields',
+  cache: ['quickEntryFields', 'CRM Deal'],
+  params: { doctype: 'CRM Deal' },
+  auto: true,
+  transform: (data) => {
+    return data.forEach((section) => {
+      section.fields.forEach((field) => {
+        if (field.name == 'status') {
+          field.type = 'Select'
+          field.options = dealStatuses.value
+          field.prefix = getDealStatus(deal.status).iconColorClass
+        } else if (field.name == 'deal_owner') {
+          field.type = 'User'
+        }
+      })
+    })
+  },
+})
+
+const filteredSections = computed(() => {
+  let allSections = sections.data || []
+  if (!allSections.length) return []
+
+  let _filteredSections = []
+
   if (chooseExistingOrganization.value) {
-    fields.push({
+    _filteredSections.push(
-      section: 'Select Organization',
+      allSections.find((s) => s.label === 'Select Organization')
-      fields: [
+    )
-        {
-          label: 'Organization',
-          name: 'organization',
-          type: 'link',
-          placeholder: 'Frappé Technologies',
-          doctype: 'CRM Organization',
-        },
-      ],
-    })
   } else {
-    fields.push({
+    _filteredSections.push(
-      section: 'Organization Details',
+      allSections.find((s) => s.label === 'Organization Details')
-      fields: [
+    )
-        {
-          label: 'Organization Name',
-          name: 'organization_name',
-          type: 'data',
-          placeholder: 'Frappé Technologies',
-        },
-        {
-          label: 'Website',
-          name: 'website',
-          type: 'data',
-          placeholder: 'https://frappe.io',
-        },
-        {
-          label: 'No of Employees',
-          name: 'no_of_employees',
-          type: 'select',
-          options: [
-            { label: __('1-10'), value: '1-10' },
-            { label: __('11-50'), value: '11-50' },
-            { label: __('51-200'), value: '51-200' },
-            { label: __('201-500'), value: '201-500' },
-            { label: __('501-1000'), value: '501-1000' },
-            { label: __('1001-5000'), value: '1001-5000' },
-            { label: __('5001-10000'), value: '5001-10000' },
-            { label: __('10001+'), value: '10001+' },
-          ],
-          placeholder: '1-10',
-        },
-        {
-          label: 'Territory',
-          name: 'territory',
-          type: 'link',
-          doctype: 'CRM Territory',
-          placeholder: 'India',
-        },
-        {
-          label: 'Annual Revenue',
-          name: 'annual_revenue',
-          type: 'data',
-          placeholder: '9,999,999',
-        },
-        {
-          label: 'Industry',
-          name: 'industry',
-          type: 'link',
-          doctype: 'CRM Industry',
-          placeholder: 'Technology',
-        },
-      ],
-    })
   }
+
   if (chooseExistingContact.value) {
-    fields.push({
+    _filteredSections.push(
-      section: 'Select Contact',
+      allSections.find((s) => s.label === 'Select Contact')
-      fields: [
+    )
-        {
-          label: 'Contact',
-          name: 'contact',
-          type: 'link',
-          placeholder: 'John Doe',
-          doctype: 'Contact',
-        },
-      ],
-    })
   } else {
-    fields.push({
+    _filteredSections.push(
-      section: 'Contact Details',
+      allSections.find((s) => s.label === 'Contact Details')
-      fields: [
+    )
-        {
+  }
-          label: 'Salutation',
+
-          name: 'salutation',
+  allSections.forEach((s) => {
-          type: 'link',
+    if (
-          doctype: 'Salutation',
+      ![
-          placeholder: 'Mr',
+        'Select Organization',
-        },
+        'Organization Details',
-        {
+        'Select Contact',
-          label: 'First Name',
+        'Contact Details',
-          name: 'first_name',
+      ].includes(s.label)
-          type: 'data',
+    ) {
-          placeholder: 'John',
+      _filteredSections.push(s)
-        },
-        {
-          label: 'Last Name',
-          name: 'last_name',
-          type: 'data',
-          placeholder: 'Doe',
-        },
-        {
-          label: 'Email',
-          name: 'email',
-          type: 'data',
-          placeholder: 'john@doe.com',
-        },
-        {
-          label: 'Mobile No',
-          name: 'mobile_no',
-          type: 'data',
-          placeholder: '+91 1234567890',
-        },
-        {
-          label: 'Gender',
-          name: 'gender',
-          type: 'link',
-          doctype: 'Gender',
-          placeholder: 'Male',
-        },
-      ],
-    })
     }
-  fields.push({
-    section: 'Deal Details',
-    columns: 2,
-    fields: [
-      {
-        label: 'Status',
-        name: 'status',
-        type: 'select',
-        options: dealStatuses.value,
-        prefix: getDealStatus(deal.status).iconColorClass,
-      },
-      {
-        label: 'Deal Owner',
-        name: 'deal_owner',
-        type: 'user',
-        placeholder: 'Deal Owner',
-        doctype: 'User',
-      },
-    ],
   })
-  return fields
+
+  return _filteredSections
 })
 
 const dealStatuses = computed(() => {

frontend/src/components/Modals/LeadModal.vue

@@ -7,7 +7,7 @@
     }"
   >
     <template #body-content>
-      <Fields :sections="sections" :data="lead" />
+      <Fields v-if="sections.data" :sections="sections.data" :data="lead" />
       <ErrorMessage class="mt-4" v-if="error" :message="__(error)" />
     </template>
     <template #actions>
@@ -39,6 +39,26 @@ const router = useRouter()
 const error = ref(null)
 const isLeadCreating = ref(false)
 
+const sections = createResource({
+  url: 'crm.api.doc.get_quick_entry_fields',
+  cache: ['quickEntryFields', 'CRM Lead'],
+  params: { doctype: 'CRM Lead' },
+  auto: true,
+  transform: (data) => {
+    return data.forEach((section) => {
+      section.fields.forEach((field) => {
+        if (field.name == 'status') {
+          field.type = 'Select'
+          field.options = leadStatuses.value
+          field.prefix = getLeadStatus(lead.status).iconColorClass
+        } else if (field.name == 'lead_owner') {
+          field.type = 'User'
+        }
+      })
+    })
+  },
+})
+
 const lead = reactive({
   salutation: '',
   first_name: '',
@@ -56,128 +76,6 @@ const lead = reactive({
   lead_owner: '',
 })
 
-const sections = computed(() => {
-  return [
-    {
-      section: 'Contact Details',
-      fields: [
-        {
-          label: 'Salutation',
-          name: 'salutation',
-          type: 'link',
-          placeholder: 'Mr',
-          doctype: 'Salutation',
-        },
-        {
-          label: 'First Name',
-          name: 'first_name',
-          mandatory: true,
-          type: 'data',
-          placeholder: 'John',
-        },
-        {
-          label: 'Last Name',
-          name: 'last_name',
-          type: 'data',
-          placeholder: 'Doe',
-        },
-        {
-          label: 'Email',
-          name: 'email',
-          type: 'data',
-          placeholder: 'john@doe.com',
-        },
-        {
-          label: 'Mobile No',
-          name: 'mobile_no',
-          type: 'data',
-          placeholder: '+91 9876543210',
-        },
-        {
-          label: 'Gender',
-          name: 'gender',
-          type: 'link',
-          doctype: 'Gender',
-          placeholder: 'Male',
-        },
-      ],
-    },
-    {
-      section: 'Organization Details',
-      fields: [
-        {
-          label: 'Organization',
-          name: 'organization',
-          type: 'data',
-          placeholder: 'Frappé Technologies',
-        },
-        {
-          label: 'Website',
-          name: 'website',
-          type: 'data',
-          placeholder: 'https://frappe.io',
-        },
-        {
-          label: 'No of Employees',
-          name: 'no_of_employees',
-          type: 'select',
-          options: [
-            { label: __('1-10'), value: '1-10' },
-            { label: __('11-50'), value: '11-50' },
-            { label: __('51-200'), value: '51-200' },
-            { label: __('201-500'), value: '201-500' },
-            { label: __('501-1000'), value: '501-1000' },
-            { label: __('1001-5000'), value: '1001-5000' },
-            { label: __('5001-10000'), value: '5001-10000' },
-            { label: __('10001+'), value: '10001+' },
-          ],
-          placeholder: '1-10',
-        },
-        {
-          label: 'Territory',
-          name: 'territory',
-          type: 'link',
-          doctype: 'CRM Territory',
-          placeholder: 'India',
-        },
-        {
-          label: 'Annual Revenue',
-          name: 'annual_revenue',
-          type: 'data',
-          placeholder: '1000000',
-        },
-        {
-          label: 'Industry',
-          name: 'industry',
-          type: 'link',
-          doctype: 'CRM Industry',
-          placeholder: 'Technology',
-        },
-      ],
-    },
-    {
-      section: 'Other Details',
-      columns: 2,
-      fields: [
-        {
-          label: 'Status',
-          name: 'status',
-          type: 'select',
-          options: leadStatuses.value,
-          prefix: getLeadStatus(lead.status).iconColorClass,
-        },
-        {
-          label: 'Lead Owner',
-          name: 'lead_owner',
-          type: 'user',
-          placeholder: 'Lead Owner',
-          doctype: 'User',
-        },
-      ],
-    },
-  ]
-})
-
 const createLead = createResource({
   url: 'frappe.client.insert',
   makeParams(values) {

frontend/src/components/Modals/OrganizationModal.vue

@@ -35,7 +35,11 @@
               <div>{{ field.value }}</div>
             </div>
           </div>
-          <Fields v-else :sections="sections" :data="_organization" />
+          <Fields
+            v-else-if="sections.data"
+            :sections="sections.data"
+            :data="_organization"
+          />
         </div>
       </div>
       <div v-if="!detailMode" class="px-4 pb-7 pt-4 sm:px-6">
@@ -60,7 +64,7 @@ import EditIcon from '@/components/Icons/EditIcon.vue'
 import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import TerritoryIcon from '@/components/Icons/TerritoryIcon.vue'
-import { call, FeatherIcon } from 'frappe-ui'
+import { call, FeatherIcon, createResource } from 'frappe-ui'
 import { ref, nextTick, watch, computed, h } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -220,83 +224,11 @@ const fields = computed(() => {
   return details.filter((field) => field.value)
 })
 
-const sections = computed(() => {
+const sections = createResource({
-  return [
+  url: 'crm.api.doc.get_quick_entry_fields',
-    {
+  cache: ['quickEntryFields', 'CRM Organization'],
-      section: 'Organization Name',
+  params: { doctype: 'CRM Organization' },
-      columns: 1,
+  auto: true,
-      fields: [
-        {
-          label: 'Organization Name',
-          name: 'organization_name',
-          type: 'data',
-          placeholder: 'Frappé Technologies',
-        },
-      ],
-    },
-    {
-      section: 'Website & Revenue',
-      columns: 2,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'Website',
-          name: 'website',
-          type: 'data',
-          placeholder: 'https://example.com',
-        },
-        {
-          label: 'Annual Revenue',
-          name: 'annual_revenue',
-          type: 'data',
-          placeholder: '9,999,999',
-        },
-      ],
-    },
-    {
-      section: 'Territory',
-      columns: 1,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'Territory',
-          name: 'territory',
-          type: 'link',
-          doctype: 'CRM Territory',
-          placeholder: 'India',
-        },
-      ],
-    },
-    {
-      section: 'No of Employees & Industry',
-      columns: 2,
-      hideBorder: true,
-      fields: [
-        {
-          label: 'No of Employees',
-          name: 'no_of_employees',
-          type: 'select',
-          options: [
-            { label: __('1-10'), value: '1-10' },
-            { label: __('11-50'), value: '11-50' },
-            { label: __('51-200'), value: '51-200' },
-            { label: __('201-500'), value: '201-500' },
-            { label: __('501-1000'), value: '501-1000' },
-            { label: __('1001-5000'), value: '1001-5000' },
-            { label: __('5001-10000'), value: '5001-10000' },
-            { label: __('10001+'), value: '10001+' },
-          ],
-        },
-        {
-          label: 'Industry',
-          name: 'industry',
-          type: 'link',
-          doctype: 'CRM Industry',
-          placeholder: 'Technology',
-        },
-      ],
-    },
-  ]
 })
 
 watch(