fix: added filter, sort & list view settings in organization list

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}

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"

frontend/src/pages/Contacts.vue

@@ -143,15 +143,10 @@ const rows = computed(() => {
           label: contact.company_name,
           logo: getOrganization(contact.company_name)?.organization_logo,
         }
-      } else if (row == 'modified') {
+      } else if (['modified', 'creation'].includes(row)) {
         _rows[row] = {
-          label: dateFormat(contact.modified, dateTooltipFormat),
-          timeAgo: timeAgo(contact.modified),
-        }
-      } else if (row == 'creation') {
-        _rows[row] = {
-          label: dateFormat(contact.creation, dateTooltipFormat),
-          timeAgo: timeAgo(contact.creation),
+          label: dateFormat(contact[row], dateTooltipFormat),
+          timeAgo: timeAgo(contact[row]),
         }
       }
     })

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),
-          timeAgo: timeAgo(deal.modified),
-        }
-      } else if (row == 'creation') {
-        _rows[row] = {
-          label: dateFormat(deal.creation, dateTooltipFormat),
-          timeAgo: timeAgo(deal.creation),
+          label: dateFormat(deal[row], dateTooltipFormat),
+          timeAgo: timeAgo(deal[row]),
         }
       }
     })

frontend/src/pages/Leads.vue

@@ -161,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),
-          timeAgo: timeAgo(lead.modified),
-        }
-      } else if (row == 'creation') {
-        _rows[row] = {
-          label: dateFormat(lead.creation, dateTooltipFormat),
-          timeAgo: timeAgo(lead.creation),
+          label: dateFormat(lead[row], dateTooltipFormat),
+          timeAgo: timeAgo(lead[row]),
         }
       }
     })

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" />
-  <OrganizationModal
-    v-model="showOrganizationModal"
-    :organization="{}"
+  <OrganizationsListView
+    v-if="organizations.data"
+    :rows="rows"
+    :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 { organizationsStore } from '@/stores/organizations.js'
-import { dateFormat, dateTooltipFormat, timeAgo, formatNumberIntoCurrency } from '@/utils'
-import { ref, computed } from 'vue'
+import ViewSettings from '@/components/ViewSettings.vue'
+import { useOrderBy } from '@/composables/orderby'
+import { useFilter } from '@/composables/filter'
+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, '')
 }