feat: load list column from default lead/deal list data from backend

crm/api/doc.py

@@ -12,6 +12,7 @@ def sort_options(doctype: str):
 
 	return c.sort_options()
 
+
 @frappe.whitelist()
 def get_filterable_fields(doctype: str):
 	DocField = frappe.qb.DocType("DocField")
@@ -46,6 +47,34 @@ def get_filterable_fields(doctype: str):
 	res.extend(from_doc_fields)
 	return res
 
+
+@frappe.whitelist()
+def get_list_data(doctype: str, filters: dict, order_by: str):
+	columns = []
+	rows = []
+
+	data_fields = []
+
+	list = get_controller(doctype)
+
+	if hasattr(list, "default_list_data"):
+		columns = list.default_list_data().get("columns")
+		data_fields = list.default_list_data().get("data_fields")
+
+	rows = [i['key'] for i in columns]
+	rows = rows + data_fields
+
+	data = frappe.get_all(
+		doctype,
+		fields=rows,
+		filters=filters,
+		order_by=order_by,
+		page_length=20,
+	) or []
+
+	return {'data': data, 'columns': columns, 'rows': rows}
+
+
 @frappe.whitelist()
 def get_doctype_fields(doctype):
 	not_allowed_fieldtypes = [
@@ -87,6 +116,7 @@ def get_doctype_fields(doctype):
 
 	return all_fields
 
+
 def get_field_obj(field):
 	obj = {
 		"label": field.label,
@@ -107,6 +137,7 @@ def get_field_obj(field):
 
 	return obj
 
+
 def get_type(field):
 	if field.fieldtype == "Data" and field.options == "Phone":
 		return "phone"
@@ -120,4 +151,4 @@ def get_type(field):
 		return "textarea"
 	elif field.read_only:
 		return "read_only"
-	return field.fieldtype.lower()
+	return field.fieldtype.lower()

crm/fcrm/doctype/crm_deal/crm_deal.py

@@ -57,6 +57,48 @@ class CRMDeal(Document):
 			{ "label": 'Mobile no', "value": 'mobile_no' },
 		]
 
+	@staticmethod
+	def default_list_data():
+		columns = [
+			{
+				'label': 'Organization',
+				'key': 'organization',
+				'width': '11rem',
+			},
+			{
+				'label': 'Amount',
+				'key': 'annual_revenue',
+				'width': '9rem',
+			},
+			{
+				'label': 'Status',
+				'key': 'status',
+				'width': '10rem',
+			},
+			{
+				'label': 'Email',
+				'key': 'email',
+				'width': '12rem',
+			},
+			{
+				'label': 'Mobile no',
+				'key': 'mobile_no',
+				'width': '11rem',
+			},
+			{
+				'label': 'Deal owner',
+				'key': 'deal_owner',
+				'width': '10rem',
+			},
+			{
+				'label': 'Last modified',
+				'key': 'modified',
+				'width': '8rem',
+			},
+		]
+		data_fields = ['name']
+		return {'columns': columns, 'data_fields': data_fields}
+
 @frappe.whitelist()
 def add_contact(deal, contact):
 	if not frappe.has_permission("CRM Deal", "write", deal):

crm/fcrm/doctype/crm_lead/crm_lead.py

@@ -136,6 +136,48 @@ class CRMLead(Document):
 			{ "label": 'Mobile no', "value": 'mobile_no' },
 		]
 
+	@staticmethod
+	def default_list_data():
+		columns = [
+			{
+				'label': 'Name',
+				'key': 'lead_name',
+				'width': '12rem',
+			},
+			{
+				'label': 'Organization',
+				'key': 'organization',
+				'width': '10rem',
+			},
+			{
+				'label': 'Status',
+				'key': 'status',
+				'width': '8rem',
+			},
+			{
+				'label': 'Email',
+				'key': 'email',
+				'width': '12rem',
+			},
+			{
+				'label': 'Mobile no',
+				'key': 'mobile_no',
+				'width': '11rem',
+			},
+			{
+				'label': 'Lead owner',
+				'key': 'lead_owner',
+				'width': '10rem',
+			},
+			{
+				'label': 'Last modified',
+				'key': 'modified',
+				'width': '8rem',
+			},
+		]
+		data_fields = ['name', 'first_name', 'image']
+		return {'columns': columns, 'data_fields': data_fields}
+
 @frappe.whitelist()
 def convert_to_deal(lead):
 	if not frappe.has_permission("CRM Lead", "write", lead):

frontend/src/pages/Deals.vue

@@ -33,7 +33,7 @@
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <DealsListView :rows="rows" :columns="columns" />
+  <DealsListView v-if="deals.data" :rows="rows" :columns="deals.data.columns" />
   <Dialog
     v-model="showNewDialog"
     :options="{
@@ -95,26 +95,20 @@ const currentView = ref({
   icon: 'list',
 })
 
-function getFilter() {
+function getParams() {
-  return getArgs() || {}
+  const filters = getArgs() || {}
+  const order_by = getOrderBy() || 'modified desc'
+
+  return {
+    doctype: 'CRM Deal',
+    filters: filters,
+    order_by: order_by,
+  }
 }
 
-const deals = createListResource({
+const deals = createResource({
-  type: 'list',
+  url: 'crm.api.doc.get_list_data',
-  doctype: 'CRM Deal',
+  params: getParams(),
-  fields: [
-    'name',
-    'organization',
-    'annual_revenue',
-    'status',
-    'email',
-    'mobile_no',
-    'deal_owner',
-    'modified',
-  ],
-  filters: getFilter(),
-  orderBy: 'modified desc',
-  pageLength: 20,
   auto: true,
 })
 
@@ -122,7 +116,7 @@ watch(
   () => getOrderBy(),
   (value, old_value) => {
     if (!value && !old_value) return
-    deals.orderBy = getOrderBy() || 'modified desc'
+    deals.params = getParams()
     deals.reload()
   },
   { immediate: true }
@@ -132,75 +126,44 @@ watch(
   storage,
   useDebounceFn((value, old_value) => {
     if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    deals.filters = getFilter()
+    deals.params = getParams()
     deals.reload()
   }, 300),
   { deep: true }
 )
 
-const columns = [
-  {
-    label: 'Organization',
-    key: 'organization',
-    width: '11rem',
-  },
-  {
-    label: 'Amount',
-    key: 'annual_revenue',
-    width: '9rem',
-  },
-  {
-    label: 'Status',
-    key: 'status',
-    width: '10rem',
-  },
-  {
-    label: 'Email',
-    key: 'email',
-    width: '12rem',
-  },
-  {
-    label: 'Mobile no',
-    key: 'mobile_no',
-    width: '11rem',
-  },
-  {
-    label: 'Deal owner',
-    key: 'deal_owner',
-    width: '10rem',
-  },
-  {
-    label: 'Last modified',
-    key: 'modified',
-    width: '8rem',
-  },
-]
-
 const rows = computed(() => {
-  if (!deals.data) return []
+  if (!deals.data?.data) return []
-  return deals.data.map((deal) => {
+  return deals.data.data.map((deal) => {
-    return {
+    let _rows = {}
-      name: deal.name,
+    deals.data.rows.forEach((row) => {
-      organization: {
+      _rows[row] = deal[row]
-        label: deal.organization,
+
-        logo: getOrganization(deal.organization)?.organization_logo,
+      if (row == 'organization') {
-      },
+        _rows[row] = {
-      annual_revenue: formatNumberIntoCurrency(deal.annual_revenue),
+          label: deal.organization,
-      status: {
+          logo: getOrganization(deal.organization)?.organization_logo,
-        label: deal.status,
+        }
-        color: dealStatuses[deal.status]?.color,
+      } else if (row == 'annual_revenue') {
-      },
+        _rows[row] = formatNumberIntoCurrency(deal.annual_revenue)
-      email: deal.email,
+      } else if (row == 'status') {
-      mobile_no: deal.mobile_no,
+        _rows[row] = {
-      deal_owner: {
+          label: deal.status,
-        label: deal.deal_owner && getUser(deal.deal_owner).full_name,
+          color: dealStatuses[deal.status]?.color,
-        ...(deal.deal_owner && getUser(deal.deal_owner)),
+        }
-      },
+      } else if (row == 'deal_owner') {
-      modified: {
+        _rows[row] = {
-        label: dateFormat(deal.modified, dateTooltipFormat),
+          label: deal.deal_owner && getUser(deal.deal_owner).full_name,
-        timeAgo: timeAgo(deal.modified),
+          ...(deal.deal_owner && getUser(deal.deal_owner)),
-      },
+        }
-    }
+      } else if (row == 'modified') {
+        _rows[row] = {
+          label: dateFormat(deal.modified, dateTooltipFormat),
+          timeAgo: timeAgo(deal.modified),
+        }
+      }
+    })
+    return _rows
   })
 })
 

frontend/src/pages/Leads.vue

@@ -32,7 +32,11 @@
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <LeadsListView :rows="rows" :columns="columns" />
+  <LeadsListView
+    v-if="leads.data"
+    :rows="rows"
+    :columns="leads.data.columns"
+  />
   <Dialog
     v-model="showNewDialog"
     :options="{
@@ -88,35 +92,24 @@ const currentView = ref({
   icon: 'list',
 })
 
-function getFilter() {
+function getParams() {
-  return {
+  const filters = {
-    ...(getArgs() || {}),
     converted: 0,
+    ...(getArgs() || {}),
+  }
+
+  const order_by = getOrderBy() || 'modified desc'
+
+  return {
+    doctype: 'CRM Lead',
+    filters: filters,
+    order_by: order_by,
   }
 }
 
-function getSortBy() {
+const leads = createResource({
-  return getOrderBy() || 'modified desc'
+  url: 'crm.api.doc.get_list_data',
-}
+  params: getParams(),
-
-const leads = createListResource({
-  type: 'list',
-  doctype: 'CRM Lead',
-  fields: [
-    'name',
-    'first_name',
-    'lead_name',
-    'image',
-    'organization',
-    'status',
-    'email',
-    'mobile_no',
-    'lead_owner',
-    'modified',
-  ],
-  filters: getFilter(),
-  orderBy: getSortBy(),
-  pageLength: 20,
   auto: true,
 })
 
@@ -124,7 +117,7 @@ watch(
   () => getOrderBy(),
   (value, old_value) => {
     if (!value && !old_value) return
-    leads.orderBy = getSortBy()
+    leads.params = getParams()
     leads.reload()
   },
   { immediate: true }
@@ -134,79 +127,49 @@ watch(
   storage,
   useDebounceFn((value, old_value) => {
     if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    leads.filters = getFilter()
+    leads.params = getParams()
     leads.reload()
   }, 300),
   { deep: true }
 )
 
-const columns = [
-  {
-    label: 'Name',
-    key: 'lead_name',
-    width: '12rem',
-  },
-  {
-    label: 'Organization',
-    key: 'organization',
-    width: '10rem',
-  },
-  {
-    label: 'Status',
-    key: 'status',
-    width: '8rem',
-  },
-  {
-    label: 'Email',
-    key: 'email',
-    width: '12rem',
-  },
-  {
-    label: 'Mobile no',
-    key: 'mobile_no',
-    width: '11rem',
-  },
-  {
-    label: 'Lead owner',
-    key: 'lead_owner',
-    width: '10rem',
-  },
-  {
-    label: 'Last modified',
-    key: 'modified',
-    width: '8rem',
-  },
-]
-
 const rows = computed(() => {
-  if (!leads.data) return []
+  if (!leads.data?.data) return []
-  return leads.data.map((lead) => {
+  return leads.data.data.map((lead) => {
-    return {
+    let _rows = {}
-      name: lead.name,
+
-      lead_name: {
+    leads.data.rows.forEach((row) => {
-        label: lead.lead_name,
+      _rows[row] = lead[row]
-        image: lead.image,
+
-        image_label: lead.first_name,
+      if (row == 'lead_name') {
-      },
+        _rows[row] = {
-      organization: {
+          label: lead.lead_name,
-        label: lead.organization,
+          image: lead.image,
-        logo: getOrganization(lead.organization)?.organization_logo,
+          image_label: lead.first_name,
-      },
+        }
-      status: {
+      } else if (row == 'organization') {
-        label: lead.status,
+        _rows[row] = {
-        color: leadStatuses[lead.status]?.color,
+          label: lead.organization,
-      },
+          logo: getOrganization(lead.organization)?.organization_logo,
-      email: lead.email,
+        }
-      mobile_no: lead.mobile_no,
+      } else if (row == 'status') {
-      lead_owner: {
+        _rows[row] = {
-        label: lead.lead_owner && getUser(lead.lead_owner).full_name,
+          label: lead.status,
-        ...(lead.lead_owner && getUser(lead.lead_owner)),
+          color: leadStatuses[lead.status]?.color,
-      },
+        }
-      modified: {
+      } else if (row == 'lead_owner') {
-        label: dateFormat(lead.modified, dateTooltipFormat),
+        _rows[row] = {
-        timeAgo: timeAgo(lead.modified),
+          label: lead.lead_owner && getUser(lead.lead_owner).full_name,
-      },
+          ...(lead.lead_owner && getUser(lead.lead_owner)),
-    }
+        }
+      } else if (row == 'modified') {
+        _rows[row] = {
+          label: dateFormat(lead.modified, dateTooltipFormat),
+          timeAgo: timeAgo(lead.modified),
+        }
+      }
+    })
+    return _rows
   })
 })