fix: added listviewcomponent, filter, sort & list view settings in ca…

…ll logs list

crm/fcrm/doctype/crm_call_log/crm_call_log.py

@@ -6,7 +6,86 @@
 
 
 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>