fix: added listviewcomponent, filter, sort & list view settings in call logs list

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):

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/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>