Merge pull request #33 from shariquerik/update-features

crm/api/doc.py

@@ -1,5 +1,6 @@
 import frappe
 from frappe.model.document import get_controller
+from frappe.model import no_value_fields
 from pypika import Criterion
 
 
@@ -50,8 +51,11 @@ def get_filterable_fields(doctype: str):
 
 @frappe.whitelist()
 def get_list_data(doctype: str, filters: dict, order_by: str):
-	columns = []
+	columns = [
-	rows = []
+		{"label": "Name", "type": "Data", "key": "name", "width": "16rem"},
+		{"label": "Last Modified", "type": "Datetime", "key": "modified", "width": "8rem"},
+	]
+	rows = ["name"]
 
 	if frappe.db.exists("CRM List View Settings", doctype):
 		list_view_settings = frappe.get_doc("CRM List View Settings", doctype)
@@ -77,22 +81,30 @@ def get_list_data(doctype: str, filters: dict, order_by: str):
 		page_length=20,
 	) or []
 
-	not_allowed_fieldtypes = [
+	fields = frappe.get_meta(doctype).fields
-		"Section Break",
+	fields = [field for field in fields if field.fieldtype not in no_value_fields]
-		"Column Break",
+	fields = [
-		"Tab Break",
+		{
+			"label": field.label,
+			"type": field.fieldtype,
+			"value": field.fieldname,
+			"options": field.options,
+		}
+		for field in fields
+		if field.label and field.fieldname
 	]
 
-	fields = frappe.get_meta(doctype).fields
-	fields = [field for field in fields if field.fieldtype not in not_allowed_fieldtypes]
-	fields = [{"label": field.label, "value": field.fieldname} for field in fields if field.label and field.fieldname]
-
 	std_fields = [
-		{'label': 'Name', 'value': 'name'},
+		{"label": "Name", "type": "Data", "value": "name"},
-		{'label': 'Created On', 'value': 'creation'},
+		{"label": "Created On", "type": "Datetime", "value": "creation"},
-		{'label': 'Last Modified', 'value': 'modified'},
+		{"label": "Last Modified", "type": "Datetime", "value": "modified"},
-		{'label': 'Modified By', 'value': 'modified_by'},
+		{
-		{'label': 'Owner', 'value': 'owner'},
+			"label": "Modified By",
+			"type": "Link",
+			"value": "modified_by",
+			"options": "User",
+		},
+		{"label": "Owner", "type": "Link", "value": "owner", "options": "User"},
 	]
 
 	for field in std_fields:

crm/fcrm/doctype/crm_call_log/crm_call_log.py

@@ -6,7 +6,86 @@ from frappe.model.document import Document
 
 
 class CRMCallLog(Document):
-	pass
+		@staticmethod
+		def sort_options():
+			return [
+				{ "label": 'Created', "value": 'creation' },
+				{ "label": 'Modified', "value": 'modified' },
+				{ "label": 'Status', "value": 'status' },
+				{ "label": 'Type', "value": 'type' },
+				{ "label": 'Duration', "value": 'duration' },
+				{ "label": 'From', "value": 'from' },
+				{ "label": 'To', "value": 'to' },
+				{ "label": 'Caller', "value": 'caller' },
+				{ "label": 'Receiver', "value": 'receiver' },
+			]
+
+		@staticmethod
+		def default_list_data():
+			columns = [
+				{
+					'label': 'From',
+					'type': 'Link',
+					'key': 'caller',
+					'options': 'User',
+					'width': '9rem',
+				},
+				{
+					'label': 'To',
+					'type': 'Link',
+					'key': 'receiver',
+					'options': 'User',
+					'width': '9rem',
+				},
+				{
+					'label': 'Type',
+					'type': 'Select',
+					'key': 'type',
+					'width': '9rem',
+				},
+				{
+					'label': 'Status',
+					'type': 'Select',
+					'key': 'status',
+					'width': '9rem',
+				},
+				{
+					'label': 'Duration',
+					'type': 'Duration',
+					'key': 'duration',
+					'width': '6rem',
+				},
+				{
+					'label': 'From (number)',
+					'type': 'Data',
+					'key': 'from',
+					'width': '9rem',
+				},
+				{
+					'label': 'To (number)',
+					'type': 'Data',
+					'key': 'to',
+					'width': '9rem',
+				},
+				{
+					'label': 'Created on',
+					'type': 'Datetime',
+					'key': 'creation',
+					'width': '8rem',
+				},
+				]
+			rows = [
+				"name",
+				"caller",
+				"receiver",
+				"type",
+				"status",
+				"duration",
+				"from",
+				"to",
+				"creation",
+			]
+			return {'columns': columns, 'rows': rows}
 
 @frappe.whitelist()
 def get_call_log(name):

crm/fcrm/doctype/crm_deal/crm_deal.py

@@ -62,36 +62,45 @@ class CRMDeal(Document):
 		columns = [
 			{
 				'label': 'Organization',
+				'type': 'Link',
 				'key': 'organization',
+				'options': 'CRM Organization',
 				'width': '11rem',
 			},
 			{
 				'label': 'Amount',
+				'type': 'Currency',
 				'key': 'annual_revenue',
 				'width': '9rem',
 			},
 			{
 				'label': 'Status',
+				'type': 'Select',
 				'key': 'status',
 				'width': '10rem',
 			},
 			{
 				'label': 'Email',
+				'type': 'Data',
 				'key': 'email',
 				'width': '12rem',
 			},
 			{
 				'label': 'Mobile no',
+				'type': 'Data',
 				'key': 'mobile_no',
 				'width': '11rem',
 			},
 			{
 				'label': 'Deal owner',
+				'type': 'Link',
 				'key': 'deal_owner',
+				'options': 'User',
 				'width': '10rem',
 			},
 			{
 				'label': 'Last modified',
+				'type': 'Datetime',
 				'key': 'modified',
 				'width': '8rem',
 			},

crm/fcrm/doctype/crm_lead/crm_lead.py

@@ -141,36 +141,45 @@ class CRMLead(Document):
 		columns = [
 			{
 				'label': 'Name',
+				'type': 'Data',
 				'key': 'lead_name',
 				'width': '12rem',
 			},
 			{
 				'label': 'Organization',
+				'type': 'Link',
 				'key': 'organization',
+				'options': 'CRM Organization',
 				'width': '10rem',
 			},
 			{
 				'label': 'Status',
+				'type': 'Select',
 				'key': 'status',
 				'width': '8rem',
 			},
 			{
 				'label': 'Email',
+				'type': 'Data',
 				'key': 'email',
 				'width': '12rem',
 			},
 			{
 				'label': 'Mobile no',
+				'type': 'Data',
 				'key': 'mobile_no',
 				'width': '11rem',
 			},
 			{
 				'label': 'Lead owner',
+				'type': 'Link',
 				'key': 'lead_owner',
+				'options': 'User',
 				'width': '10rem',
 			},
 			{
 				'label': 'Last modified',
+				'type': 'Datetime',
 				'key': 'modified',
 				'width': '8rem',
 			},

crm/fcrm/doctype/crm_list_view_settings/crm_list_view_settings.py

@@ -2,7 +2,7 @@
 # For license information, please see license.txt
 import json
 import frappe
-from frappe.model.document import Document
+from frappe.model.document import Document, get_controller
 
 
 class CRMListViewSettings(Document):
@@ -11,19 +11,35 @@ class CRMListViewSettings(Document):
 
 @frappe.whitelist()
 def update(doctype, columns, rows):
+	default_rows = sync_default_list_rows(doctype)
+
+	if default_rows:
+		rows = rows + default_rows
+
+	rows = remove_duplicates(rows)
+
 	if not frappe.db.exists("CRM List View Settings", doctype):
 		# create new CRM List View Settings
 		doc = frappe.new_doc("CRM List View Settings")
 		doc.name = doctype
 		doc.columns = json.dumps(columns)
-		doc.rows = json.dumps(remove_duplicates(rows))
+		doc.rows = json.dumps(rows)
 		doc.insert()
 	else:
 		# update existing CRM List View Settings
 		doc = frappe.get_doc("CRM List View Settings", doctype)
 		doc.columns = json.dumps(columns)
-		doc.rows = json.dumps(remove_duplicates(rows))
+		doc.rows = json.dumps(rows)
 		doc.save()
 
 def remove_duplicates(l):
 	return list(dict.fromkeys(l))
+
+def sync_default_list_rows(doctype):
+	list = get_controller(doctype)
+	rows = []
+
+	if hasattr(list, "default_list_data"):
+		rows = list.default_list_data().get("rows")
+
+	return rows

crm/fcrm/doctype/crm_organization/crm_organization.py

@@ -6,4 +6,59 @@ from frappe.model.document import Document
 
 
 class CRMOrganization(Document):
-	pass
+		@staticmethod
+		def sort_options():
+			return [
+				{ "label": 'Created', "value": 'creation' },
+				{ "label": 'Modified', "value": 'modified' },
+				{ "label": 'Name', "value": 'name' },
+				{ "label": 'Website', "value": 'website' },
+				{ "label": 'Amount', "value": 'annual_revenue' },
+				{ "label": 'Industry', "value": 'industry' },
+			]
+
+		@staticmethod
+		def default_list_data():
+			columns = [
+				{
+					'label': 'Organization',
+					'type': 'Data',
+					'key': 'organization_name',
+					'width': '16rem',
+				},
+				{
+					'label': 'Website',
+					'type': 'Data',
+					'key': 'website',
+					'width': '14rem',
+				},
+				{
+					'label': 'Industry',
+					'type': 'Link',
+					'key': 'industry',
+					'options': 'CRM Industry',
+					'width': '14rem',
+				},
+				{
+					'label': 'Annual Revenue',
+					'type': 'Currency',
+					'key': 'annual_revenue',
+					'width': '14rem',
+				},
+				{
+					'label': 'Last modified',
+					'type': 'Datetime',
+					'key': 'modified',
+					'width': '8rem',
+				},
+			]
+			rows = [
+				"name",
+				"organization_name",
+				"organization_logo",
+				"website",
+				"industry",
+				"annual_revenue",
+				"modified",
+			]
+			return {'columns': columns, 'rows': rows}

crm/hooks.py

@@ -117,9 +117,9 @@ website_route_rules = [
 # ---------------
 # Override standard doctype classes
 
-# override_doctype_class = {
+override_doctype_class = {
-#	"ToDo": "custom_app.overrides.CustomToDo"
+	"Contact": "crm.overrides.contact.CustomContact"
-# }
+}
 
 # Document Events
 # ---------------

crm/overrides/contact.py

@@ -0,0 +1,63 @@
+# import frappe
+from frappe import _
+from frappe.contacts.doctype.contact.contact import Contact
+
+
+class CustomContact(Contact):
+	@staticmethod
+	def sort_options():
+		return [
+			{ "label": 'Created', "value": 'creation' },
+			{ "label": 'Modified', "value": 'modified' },
+			{ "label": 'Organization', "value": 'company_name' },
+			{ "label": 'Full Name', "value": 'full_name' },
+			{ "label": 'First Name', "value": 'first_name' },
+			{ "label": 'Last Name', "value": 'last_name' },
+			{ "label": 'Email', "value": 'email' },
+			{ "label": 'Mobile no', "value": 'mobile_no' },
+		]
+
+	@staticmethod
+	def default_list_data():
+		columns = [
+			{
+				'label': 'Name',
+				'type': 'Data',
+				'key': 'full_name',
+				'width': '17rem',
+			},
+			{
+				'label': 'Email',
+				'type': 'Data',
+				'key': 'email_id',
+				'width': '12rem',
+			},
+			{
+				'label': 'Phone',
+				'type': 'Data',
+				'key': 'mobile_no',
+				'width': '12rem',
+			},
+			{
+				'label': 'Organization',
+				'type': 'Data',
+				'key': 'company_name',
+				'width': '12rem',
+			},
+			{
+				'label': 'Last modified',
+				'type': 'Datetime',
+				'key': 'modified',
+				'width': '8rem',
+			},
+		]
+		rows = [
+			"name",
+			"full_name",
+			"company_name",
+			"email_id",
+			"mobile_no",
+			"modified",
+			"image",
+		]
+		return {'columns': columns, 'rows': rows}

frontend/src/components/ListViews/CallLogsListView.vue

@@ -0,0 +1,96 @@
+<template>
+  <ListView
+    :columns="columns"
+    :rows="rows"
+    :options="{
+      getRowRoute: (row) => ({
+        name: 'Call Log',
+        params: { callLogId: row.name },
+      }),
+      selectable: options.selectable,
+    }"
+    row-key="name"
+  >
+    <ListHeader class="mx-5" />
+    <ListRows>
+      <ListRow
+        class="mx-5"
+        v-for="row in rows"
+        :key="row.name"
+        v-slot="{ column, item }"
+        :row="row"
+      >
+        <ListRowItem :item="item">
+          <template #prefix>
+            <div v-if="['caller', 'receiver'].includes(column.key)">
+              <Avatar
+                v-if="item.label"
+                class="flex items-center"
+                :image="item.image"
+                :label="item.label"
+                size="sm"
+              />
+            </div>
+            <div v-else-if="['type', 'duration'].includes(column.key)">
+              <FeatherIcon :name="item.icon" class="h-3 w-3" />
+            </div>
+          </template>
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+          >
+            {{ item.timeAgo }}
+          </div>
+          <div v-else-if="column.key === 'status'" class="truncate text-base">
+            <Badge
+              :variant="'subtle'"
+              :theme="item.color"
+              size="md"
+              :label="item.label"
+            />
+          </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
+        </ListRowItem>
+      </ListRow>
+    </ListRows>
+    <ListSelectBanner />
+  </ListView>
+</template>
+<script setup>
+import {
+  Avatar,
+  ListView,
+  ListHeader,
+  ListRows,
+  ListRow,
+  ListSelectBanner,
+  ListRowItem,
+  FormControl,
+  FeatherIcon,
+  Badge,
+} from 'frappe-ui'
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      selectable: true,
+    }),
+  },
+})
+</script>

frontend/src/components/ListViews/ContactsListView.vue

@@ -3,7 +3,10 @@
     :columns="columns"
     :rows="rows"
     :options="{
-      getRowRoute: (row) => ({ name: 'Contact', params: { contactId: row.name } }),
+      getRowRoute: (row) => ({
+        name: 'Contact',
+        params: { contactId: row.name },
+      }),
       selectable: options.selectable,
     }"
     row-key="name"
@@ -41,9 +44,20 @@
               <PhoneIcon class="h-4 w-4" />
             </div>
           </template>
-          <div v-if="column.key === 'modified'" class="truncate text-base">
+          <div
+            v-if="['modified', 'creation'].includes(column.key)"
+            class="truncate text-base"
+          >
             {{ item.timeAgo }}
           </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
         </ListRowItem>
       </ListRow>
     </ListRows>
@@ -60,6 +74,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
+  FormControl,
 } from 'frappe-ui'
 
 const props = defineProps({

frontend/src/components/ListViews/DealsListView.vue

@@ -47,6 +47,14 @@
           <div v-if="['modified', 'creation'].includes(column.key)" class="truncate text-base">
             {{ item.timeAgo }}
           </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
         </ListRowItem>
       </ListRow>
     </ListRows>
@@ -65,6 +73,7 @@ import {
   ListRow,
   ListRowItem,
   ListSelectBanner,
+  FormControl,
 } from 'frappe-ui'
 
 const props = defineProps({

frontend/src/components/ListViews/LeadsListView.vue

@@ -56,6 +56,14 @@
           <div v-if="['modified', 'creation'].includes(column.key)" class="truncate text-base">
             {{ item.timeAgo }}
           </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
         </ListRowItem>
       </ListRow>
     </ListRows>
@@ -74,6 +82,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
+  FormControl,
 } from 'frappe-ui'
 
 const props = defineProps({

frontend/src/components/ListViews/OrganizationsListView.vue

@@ -22,7 +22,7 @@
       >
         <ListRowItem :item="item">
           <template #prefix>
-            <div v-if="column.key === 'organization'">
+            <div v-if="column.key === 'organization_name'">
               <Avatar
                 v-if="item.label"
                 class="flex items-center"
@@ -32,9 +32,17 @@
               />
             </div>
           </template>
-          <div v-if="column.key === 'modified'" class="truncate text-base">
+          <div v-if="['modified', 'creation'].includes(column.key)" class="truncate text-base">
             {{ item.timeAgo }}
           </div>
+          <div v-else-if="column.type === 'Check'">
+            <FormControl
+              type="checkbox"
+              :modelValue="item"
+              :disabled="true"
+              class="text-gray-900"
+            />
+          </div>
         </ListRowItem>
       </ListRow>
     </ListRows>
@@ -50,6 +58,7 @@ import {
   ListRow,
   ListSelectBanner,
   ListRowItem,
+  FormControl,
 } from 'frappe-ui'
 
 const props = defineProps({

frontend/src/components/ViewSettings.vue

@@ -163,6 +163,7 @@ const fields = computed(() => {
 async function addColumn(c) {
   let _column = {
     label: c.label,
+    type: c.type,
     key: c.value,
     width: '10rem',
   }

frontend/src/pages/CallLogs.vue

@@ -6,74 +6,26 @@
   </LayoutHeader>
   <div class="flex items-center justify-between px-5 pb-4 pt-3">
     <div class="flex items-center gap-2">
-      <Button label="Sort">
+      <SortBy doctype="CRM Call Log" />
-        <template #prefix><SortIcon class="h-4" /></template>
+      <Filter doctype="CRM Call Log" />
-      </Button>
-      <Button label="Filter">
-        <template #prefix><FilterIcon class="h-4" /></template>
-      </Button>
     </div>
     <div class="flex items-center gap-2">
-      <Button icon="more-horizontal" />
+      <ViewSettings doctype="CRM Call Log" v-model="callLogs" />
     </div>
   </div>
-  <ListView
+  <CallLogsListView
-    :columns="columns"
+    v-if="callLogs.data"
     :rows="rows"
-    :options="{
+    :columns="callLogs.data.columns"
-      getRowRoute: (row) => ({
+  />
-        name: 'Call Log',
-        params: { callLogId: row.name },
-      }),
-    }"
-    row-key="name"
-  >
-    <ListHeader class="mx-5" />
-    <ListRows>
-      <ListRow
-        class="mx-5"
-        v-for="row in rows"
-        :key="row.name"
-        v-slot="{ column, item }"
-        :row="row"
-      >
-        <ListRowItem :item="item">
-          <template #prefix>
-            <div v-if="['caller', 'receiver'].includes(column.key)">
-              <Avatar
-                v-if="item.label"
-                class="flex items-center"
-                :image="item.image"
-                :label="item.label"
-                size="sm"
-              />
-            </div>
-            <div v-else-if="['type', 'duration'].includes(column.key)">
-              <FeatherIcon :name="item.icon" class="h-3 w-3" />
-            </div>
-          </template>
-          <div v-if="column.key === 'creation'" class="truncate text-base">
-            {{ item.timeAgo }}
-          </div>
-          <div v-else-if="column.key === 'status'" class="truncate text-base">
-            <Badge
-              :variant="'subtle'"
-              :theme="item.color"
-              size="md"
-              :label="item.label"
-            />
-          </div>
-        </ListRowItem>
-      </ListRow>
-    </ListRows>
-    <ListSelectBanner />
-  </ListView>
 </template>
 
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
-import SortIcon from '@/components/Icons/SortIcon.vue'
+import SortBy from '@/components/SortBy.vue'
-import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import Filter from '@/components/Filter.vue'
+import ViewSettings from '@/components/ViewSettings.vue'
+import CallLogsListView from '@/components/ListViews/CallLogsListView.vue'
 import {
   secondsToDuration,
   dateFormat,
@@ -82,140 +34,106 @@ import {
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
-import {
+import { useOrderBy } from '@/composables/orderby'
-  Avatar,
+import { useFilter } from '@/composables/filter'
-  Badge,
+import { useDebounceFn } from '@vueuse/core'
-  createListResource,
+import { createResource, Breadcrumbs } from 'frappe-ui'
-  Breadcrumbs,
+import { computed, watch } from 'vue'
-  ListView,
-  ListHeader,
-  ListRows,
-  ListRow,
-  ListRowItem,
-  ListSelectBanner,
-  FeatherIcon,
-} from 'frappe-ui'
-import { computed } from 'vue'
 
 const { getUser } = usersStore()
 const { getContact } = contactsStore()
+const { get: getOrderBy } = useOrderBy()
+const { getArgs, storage } = useFilter()
 
 const breadcrumbs = [{ label: 'Call Logs', route: { name: 'Call Logs' } }]
 
-const callLogs = createListResource({
+function getParams() {
-  type: 'list',
+  const filters = getArgs() || {}
-  doctype: 'CRM Call Log',
+  const order_by = getOrderBy() || 'creation desc'
-  fields: [
+
-    'name',
+  return {
-    'caller',
+    doctype: 'CRM Call Log',
-    'receiver',
+    filters: filters,
-    'from',
+    order_by: order_by,
-    'to',
+  }
-    'duration',
+}
-    'start_time',
+
-    'end_time',
+const callLogs = createResource({
-    'status',
+  url: 'crm.api.doc.get_list_data',
-    'type',
+  params: getParams(),
-    'recording_url',
-    'creation',
-  ],
-  orderBy: 'creation desc',
-  cache: 'Call Logs',
-  pageLength: 999,
   auto: true,
 })
 
-const columns = [
+watch(
-  {
+  () => getOrderBy(),
-    label: 'From',
+  (value, old_value) => {
-    key: 'caller',
+    if (!value && !old_value) return
-    width: '9rem',
+    callLogs.params = getParams()
+    callLogs.reload()
   },
-  {
+  { immediate: true }
-    label: 'To',
+)
-    key: 'receiver',
+
-    width: '9rem',
+watch(
-  },
+  storage,
-  {
+  useDebounceFn((value, old_value) => {
-    label: 'Type',
+    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
-    key: 'type',
+    callLogs.params = getParams()
-    width: '9rem',
+    callLogs.reload()
-  },
+  }, 300),
-  {
+  { deep: true }
-    label: 'Status',
+)
-    key: 'status',
-    width: '9rem',
-  },
-  {
-    label: 'Duration',
-    key: 'duration',
-    width: '6rem',
-  },
-  {
-    label: 'From (number)',
-    key: 'from',
-    width: '9rem',
-  },
-  {
-    label: 'To (number)',
-    key: 'to',
-    width: '9rem',
-  },
-  {
-    label: 'Created on',
-    key: 'creation',
-    width: '8rem',
-  },
-]
 
 const rows = computed(() => {
-  return callLogs.data?.map((callLog) => {
+  if (!callLogs.data?.data) return []
-    let caller = callLog.caller
+  return callLogs.data.data.map((callLog) => {
-    let receiver = callLog.receiver
+    let _rows = {}
+    callLogs.data.rows.forEach((row) => {
+      _rows[row] = callLog[row]
 
-    if (callLog.type === 'Incoming') {
+      let incoming = callLog.type === 'Incoming'
-      caller = {
-        label: getContact(callLog.from)?.full_name || 'Unknown',
-        image: getContact(callLog.from)?.image,
-      }
-      receiver = {
-        label: getUser(receiver).full_name,
-        image: getUser(receiver).user_image,
-      }
-    } else {
-      caller = {
-        label: getUser(caller).full_name,
-        image: getUser(caller).user_image,
-      }
-      receiver = {
-        label: getContact(callLog.to)?.full_name || 'Unknown',
-        image: getContact(callLog.to)?.image,
-      }
-    }
 
-    return {
+      if (row === 'caller') {
-      name: callLog.name,
+        _rows[row] = {
-      caller: caller,
+          label: incoming
-      receiver: receiver,
+            ? getContact(callLog.from)?.full_name || 'Unknown'
-      from: callLog.from,
+            : getUser(callLog.caller).full_name,
-      to: callLog.to,
+          image: incoming
-      duration: {
+            ? getContact(callLog.from)?.image
-        label: secondsToDuration(callLog.duration),
+            : getUser(callLog.caller).user_image,
-        icon: 'clock',
+        }
-      },
+      } else if (row === 'receiver') {
-      type: {
+        _rows[row] = {
-        label: callLog.type,
+          label: incoming
-        icon: callLog.type === 'Incoming' ? 'phone-incoming' : 'phone-outgoing',
+            ? getUser(callLog.receiver).full_name
-      },
+            : getContact(callLog.to)?.full_name || 'Unknown',
-      status: {
+          image: incoming
-        label: callLog.status,
+            ? getUser(callLog.receiver).user_image
-        color: callLog.status === 'Completed' ? 'green' : 'gray',
+            : getContact(callLog.to)?.image,
-      },
+        }
-      creation: {
+      } else if (row === 'duration') {
-        label: dateFormat(callLog.creation, dateTooltipFormat),
+        _rows[row] = {
-        timeAgo: timeAgo(callLog.creation),
+          label: secondsToDuration(callLog.duration),
-      },
+          icon: 'clock',
-    }
+        }
+      } else if (row === 'type') {
+        _rows[row] = {
+          label: callLog.type,
+          icon: incoming ? 'phone-incoming' : 'phone-outgoing',
+        }
+      } else if (row === 'status') {
+        _rows[row] = {
+          label: callLog.status,
+          color: callLog.status === 'Completed' ? 'green' : 'gray',
+        }
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: dateFormat(callLog[row], dateTooltipFormat),
+          timeAgo: timeAgo(callLog[row]),
+        }
+      }
+    })
+    return _rows
   })
 })
 </script>

frontend/src/pages/Contacts.vue

@@ -30,10 +30,14 @@
     <div class="flex items-center gap-2">
       <Filter doctype="Contact" />
       <SortBy doctype="Contact" />
-      <Button icon="more-horizontal" />
+      <ViewSettings doctype="Contact" v-model="contacts" />
     </div>
   </div>
-  <ContactsListView :rows="rows" :columns="columns" />
+  <ContactsListView
+    v-if="contacts.data"
+    :rows="rows"
+    :columns="contacts.data.columns"
+  />
   <ContactModal v-model="showContactModal" :contact="{}" />
 </template>
 
@@ -43,21 +47,25 @@ import ContactModal from '@/components/Modals/ContactModal.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
-import { FeatherIcon, Breadcrumbs, Dropdown } from 'frappe-ui'
+import ViewSettings from '@/components/ViewSettings.vue'
-import { contactsStore } from '@/stores/contacts.js'
+import { FeatherIcon, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
 import { organizationsStore } from '@/stores/organizations.js'
+import { useOrderBy } from '@/composables/orderby'
+import { useFilter } from '@/composables/filter'
 import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
-import { ref, computed, onMounted } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-const { contacts } = contactsStore()
 const { getOrganization } = organizationsStore()
+const { get: getOrderBy } = useOrderBy()
+const { getArgs, storage } = useFilter()
 const route = useRoute()
 
 const showContactModal = ref(false)
 
 const currentContact = computed(() => {
-  return contacts.data.find(
+  return contacts.data?.data?.find(
     (contact) => contact.name === route.params.contactId
   )
 })
@@ -80,6 +88,72 @@ const currentView = ref({
   icon: 'list',
 })
 
+function getParams() {
+  const filters = getArgs() || {}
+  const order_by = getOrderBy() || 'modified desc'
+
+  return {
+    doctype: 'Contact',
+    filters: filters,
+    order_by: order_by,
+  }
+}
+
+const contacts = createResource({
+  url: 'crm.api.doc.get_list_data',
+  params: getParams(),
+  auto: true,
+})
+
+watch(
+  () => getOrderBy(),
+  (value, old_value) => {
+    if (!value && !old_value) return
+    contacts.params = getParams()
+    contacts.reload()
+  },
+  { immediate: true }
+)
+
+watch(
+  storage,
+  useDebounceFn((value, old_value) => {
+    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
+    contacts.params = getParams()
+    contacts.reload()
+  }, 300),
+  { deep: true }
+)
+
+const rows = computed(() => {
+  if (!contacts.data?.data) return []
+  return contacts.data.data.map((contact) => {
+    let _rows = {}
+    contacts.data.rows.forEach((row) => {
+      _rows[row] = contact[row]
+
+      if (row == 'full_name') {
+        _rows[row] = {
+          label: contact.full_name,
+          image_label: contact.full_name,
+          image: contact.image,
+        }
+      } else if (row == 'company_name') {
+        _rows[row] = {
+          label: contact.company_name,
+          logo: getOrganization(contact.company_name)?.organization_logo,
+        }
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: dateFormat(contact[row], dateTooltipFormat),
+          timeAgo: timeAgo(contact[row]),
+        }
+      }
+    })
+    return _rows
+  })
+})
+
 const viewsDropdownOptions = [
   {
     label: 'List',
@@ -122,55 +196,4 @@ const viewsDropdownOptions = [
     },
   },
 ]
-
-const rows = computed(() => {
-  return contacts.data.map((contact) => {
-    return {
-      name: contact.name,
-      full_name: {
-        label: contact.full_name,
-        image_label: contact.full_name,
-        image: contact.image,
-      },
-      email: contact.email_id,
-      mobile_no: contact.mobile_no,
-      company_name: {
-        label: contact.company_name,
-        logo: getOrganization(contact.company_name)?.organization_logo,
-      },
-      modified: {
-        label: dateFormat(contact.modified, dateTooltipFormat),
-        timeAgo: timeAgo(contact.modified),
-      },
-    }
-  })
-})
-
-const columns = [
-  {
-    label: 'Name',
-    key: 'full_name',
-    width: '17rem',
-  },
-  {
-    label: 'Email',
-    key: 'email',
-    width: '12rem',
-  },
-  {
-    label: 'Phone',
-    key: 'mobile_no',
-    width: '12rem',
-  },
-  {
-    label: 'Organization',
-    key: 'company_name',
-    width: '12rem',
-  },
-  {
-    label: 'Last modified',
-    key: 'modified',
-    width: '8rem',
-  },
-]
 </script>

frontend/src/pages/Deals.vue

@@ -156,15 +156,10 @@ const rows = computed(() => {
           label: deal.deal_owner && getUser(deal.deal_owner).full_name,
           ...(deal.deal_owner && getUser(deal.deal_owner)),
         }
-      } else if (row == 'modified') {
+      } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(deal.modified, dateTooltipFormat),
+          label: dateFormat(deal[row], dateTooltipFormat),
-          timeAgo: timeAgo(deal.modified),
+          timeAgo: timeAgo(deal[row]),
-        }
-      } else if (row == 'creation') {
-        _rows[row] = {
-          label: dateFormat(deal.creation, dateTooltipFormat),
-          timeAgo: timeAgo(deal.creation),
         }
       }
     })

frontend/src/pages/Leads.vue

@@ -137,7 +137,6 @@ const rows = computed(() => {
   if (!leads.data?.data) return []
   return leads.data.data.map((lead) => {
     let _rows = {}
-
     leads.data.rows.forEach((row) => {
       _rows[row] = lead[row]
 
@@ -162,15 +161,10 @@ const rows = computed(() => {
           label: lead.lead_owner && getUser(lead.lead_owner).full_name,
           ...(lead.lead_owner && getUser(lead.lead_owner)),
         }
-      } else if (row == 'modified') {
+      } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(lead.modified, dateTooltipFormat),
+          label: dateFormat(lead[row], dateTooltipFormat),
-          timeAgo: timeAgo(lead.modified),
+          timeAgo: timeAgo(lead[row]),
-        }
-      } else if (row == 'creation') {
-        _rows[row] = {
-          label: dateFormat(lead.creation, dateTooltipFormat),
-          timeAgo: timeAgo(lead.creation),
         }
       }
     })

frontend/src/pages/Organizations.vue

@@ -34,14 +34,15 @@
     <div class="flex items-center gap-2">
       <Filter doctype="CRM Organization" />
       <SortBy doctype="CRM Organization" />
-      <Button icon="more-horizontal" />
+      <ViewSettings doctype="CRM Organization" v-model="organizations" />
     </div>
   </div>
-  <OrganizationsListView :rows="rows" :columns="columns" />
+  <OrganizationsListView
-  <OrganizationModal
+    v-if="organizations.data"
-    v-model="showOrganizationModal"
+    :rows="rows"
-    :organization="{}"
+    :columns="organizations.data.columns"
   />
+  <OrganizationModal v-model="showOrganizationModal" :organization="{}" />
 </template>
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
@@ -49,19 +50,28 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
-import { FeatherIcon, Breadcrumbs, Dropdown } from 'frappe-ui'
+import ViewSettings from '@/components/ViewSettings.vue'
-import { organizationsStore } from '@/stores/organizations.js'
+import { useOrderBy } from '@/composables/orderby'
-import { dateFormat, dateTooltipFormat, timeAgo, formatNumberIntoCurrency } from '@/utils'
+import { useFilter } from '@/composables/filter'
-import { ref, computed } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { FeatherIcon, Breadcrumbs, Dropdown, createResource } from 'frappe-ui'
+import {
+  dateFormat,
+  dateTooltipFormat,
+  timeAgo,
+  formatNumberIntoCurrency,
+} from '@/utils'
+import { ref, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-const { organizations } = organizationsStore()
 const route = useRoute()
+const { get: getOrderBy } = useOrderBy()
+const { getArgs, storage } = useFilter()
 
 const showOrganizationModal = ref(false)
 
 const currentOrganization = computed(() => {
-  return organizations.data.find(
+  return organizations.data?.data?.find(
     (organization) => organization.name === route.params.organizationId
   )
 })
@@ -84,6 +94,70 @@ const currentView = ref({
   icon: 'list',
 })
 
+function getParams() {
+  const filters = getArgs() || {}
+  const order_by = getOrderBy() || 'modified desc'
+
+  return {
+    doctype: 'CRM Organization',
+    filters: filters,
+    order_by: order_by,
+  }
+}
+
+const organizations = createResource({
+  url: 'crm.api.doc.get_list_data',
+  params: getParams(),
+  auto: true,
+})
+
+watch(
+  () => getOrderBy(),
+  (value, old_value) => {
+    if (!value && !old_value) return
+    organizations.params = getParams()
+    organizations.reload()
+  },
+  { immediate: true }
+)
+
+watch(
+  storage,
+  useDebounceFn((value, old_value) => {
+    if (JSON.stringify([...value]) === JSON.stringify([...old_value])) return
+    organizations.params = getParams()
+    organizations.reload()
+  }, 300),
+  { deep: true }
+)
+
+const rows = computed(() => {
+  if (!organizations.data?.data) return []
+  return organizations.data.data.map((organization) => {
+    let _rows = {}
+    organizations.data.rows.forEach((row) => {
+      _rows[row] = organization[row]
+
+      if (row === 'organization_name') {
+        _rows[row] = {
+          label: organization.organization_name,
+          logo: organization.organization_logo,
+        }
+      } else if (row === 'website') {
+        _rows[row] = website(organization.website)
+      } else if (row === 'annual_revenue') {
+        _rows[row] = formatNumberIntoCurrency(organization.annual_revenue)
+      } else if (['modified', 'creation'].includes(row)) {
+        _rows[row] = {
+          label: dateFormat(organization[row], dateTooltipFormat),
+          timeAgo: timeAgo(organization[row]),
+        }
+      }
+    })
+    return _rows
+  })
+})
+
 const viewsDropdownOptions = [
   {
     label: 'List',
@@ -127,53 +201,6 @@ const viewsDropdownOptions = [
   },
 ]
 
-const rows = computed(() => {
-  return organizations.data.map((organization) => {
-    return {
-      name: organization.name,
-      organization: {
-        label: organization.organization_name,
-        logo: organization.organization_logo,
-      },
-      website: website(organization.website),
-      industry: organization.industry,
-      annual_revenue: formatNumberIntoCurrency(organization.annual_revenue),
-      modified: {
-        label: dateFormat(organization.modified, dateTooltipFormat),
-        timeAgo: timeAgo(organization.modified),
-      },
-    }
-  })
-})
-
-const columns = [
-  {
-    label: 'Organization',
-    key: 'organization',
-    width: '16rem',
-  },
-  {
-    label: 'Website',
-    key: 'website',
-    width: '14rem',
-  },
-  {
-    label: 'Industry',
-    key: 'industry',
-    width: '14rem',
-  },
-  {
-    label: 'Annual Revenue',
-    key: 'annual_revenue',
-    width: '14rem',
-  },
-  {
-    label: 'Last modified',
-    key: 'modified',
-    width: '8rem',
-  },
-]
-
 function website(url) {
   return url && url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
 }