refactor: customer list-view

desk/src/components/ListViewBuilder.vue

@@ -28,7 +28,7 @@
         showTooltip: true,
         resizeColumn: false,
         onRowClick: (row: Object) => emit('onRowClick', row['name']),
-        emptyState: props.options?.emptyState || defaultEmptyState,
+        empty_state: props.options?.empty_state || defaultEmptyState,
       }"
     >
       <ListHeader class="sm:mx-5 mx-3">
@@ -101,7 +101,8 @@ interface P {
     doctype: string;
     default_filters?: Record<string, any>;
     column_config?: Record<string, any>;
-    emptyState?: {
+    update_list_view?: boolean;
+    empty_state?: {
       title: string;
       description?: string;
       button?: {
@@ -268,4 +269,9 @@ function handlePageLength(count: number, loadMore: boolean = false) {
   }
   list.reload();
 }
+
+// to handle cases where the list view is updated
+defineExpose({
+  reload,
+});
 </script>

desk/src/pages/desk/agent/Agents.vue

@@ -54,7 +54,7 @@ const options = computed(() => {
         },
       },
     },
-    emptyState: {
+    empty_state: {
       title: "No Data",
       description: "No data available",
       button: {

desk/src/pages/desk/customer/CustomerList.vue

@@ -17,19 +17,11 @@
         </Button>
       </template>
     </LayoutHeader>
-    <ListView
-      :columns="columns"
-      :resource="customers"
-      class="mt-2.5"
-      doctype="HD Customer"
-    >
-      <template #name="{ data }">
-        <div class="flex items-center gap-2">
-          <Avatar :label="data.name" :image="data.image" size="sm" />
-          <div class="line-clamp-1">{{ data.name }}</div>
-        </div>
-      </template>
-    </ListView>
+    <ListViewBuilder
+      ref="listViewRef"
+      :options="options"
+      @on-row-click="openCustomer"
+    />
     <NewCustomerDialog
       v-model="isDialogVisible"
       @customer-created="handleCustomer"
@@ -46,46 +38,18 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { usePageMeta, Avatar } from "frappe-ui";
-import { createListManager } from "@/composables/listManager";
 import NewCustomerDialog from "@/components/desk/global/NewCustomerDialog.vue";
-import { ListView } from "@/components";
 import CustomerDialog from "./CustomerDialog.vue";
 import LayoutHeader from "@/components/LayoutHeader.vue";
+import ListViewBuilder from "@/components/ListViewBuilder.vue";
+import { computed } from "vue";
+import { h } from "vue";
 
 const isDialogVisible = ref(false);
 const isCustomerDialogVisible = ref(false);
 const selectedCustomer = ref(null);
+const listViewRef = ref(null);
 // const emptyMessage = "No Customers Found";
-const columns = [
-  {
-    label: "Name",
-    key: "name",
-    width: "w-80",
-  },
-  {
-    label: "Domain",
-    key: "domain",
-    width: "w-80",
-  },
-];
-
-const customers = createListManager({
-  doctype: "HD Customer",
-  fields: ["name", "image", "domain"],
-  auto: true,
-  transform: (data) => {
-    for (const d of data) {
-      d.onClick = () => openCustomer(d.name);
-    }
-    return data;
-  },
-});
-
-usePageMeta(() => {
-  return {
-    title: "Customers",
-  };
-});
 
 function openCustomer(id: string) {
   selectedCustomer.value = id;
@@ -95,6 +59,30 @@ function handleCustomer(updated = false) {
   updated
     ? (isCustomerDialogVisible.value = false)
     : (isDialogVisible.value = false);
-  customers.reload();
+  listViewRef.value?.reload();
 }
+
+const options = computed(() => {
+  return {
+    doctype: "HD Customer",
+    column_config: {
+      name: {
+        prefix: ({ row }) => {
+          return h(Avatar, {
+            shape: "circle",
+            image: row.image,
+            label: row.name,
+            size: "sm",
+          });
+        },
+      },
+    },
+  };
+});
+
+usePageMeta(() => {
+  return {
+    title: "Customers",
+  };
+});
 </script>

desk/src/pages/desk/team/TeamList.vue → desk/src/pages/desk/team/Teams.vue

@@ -51,11 +51,10 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { createResource, usePageMeta, Dialog, FormControl } from "frappe-ui";
 import { isEmpty } from "lodash";
-import { AGENT_PORTAL_TEAM_SINGLE } from "@/router";
-import { createListManager } from "@/composables/listManager";
-import { useError } from "@/composables/error";
 import LayoutHeader from "@/components/LayoutHeader.vue";
 import ListViewBuilder from "@/components/ListViewBuilder.vue";
+import { AGENT_PORTAL_TEAM_SINGLE } from "@/router";
+import { useError } from "@/composables/error";
 
 const router = useRouter();
 const showNewDialog = ref(false);

desk/src/router/index.ts

@@ -195,7 +195,7 @@ const routes = [
       {
         path: "teams",
         name: AGENT_PORTAL_TEAM_LIST,
-        component: () => import("@/pages/desk/team/TeamList.vue"),
+        component: () => import("@/pages/desk/team/Teams.vue"),
       },
       {
         path: "teams/:teamId",

helpdesk/api/doc.py

@@ -263,7 +263,7 @@ def get_quick_filters(doctype: str):
     fields = [field for field in meta.fields if field.in_standard_filter]
     quick_filters = []
 
-    if doctype == "HD Agent":
+    if doctype == "HD Agent" or doctype == "HD Customer":
         quick_filters.append({"label": "ID", "value": "", "name": "name"})
 
     for field in fields:

helpdesk/helpdesk/doctype/hd_customer/hd_customer.json

@@ -46,7 +46,7 @@
  "image_field": "image",
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-07-26 14:18:18.944543",
+ "modified": "2024-12-08 00:00:52.219212",
  "modified_by": "Administrator",
  "module": "Helpdesk",
  "name": "HD Customer",
@@ -76,6 +76,18 @@
    "role": "Agent",
    "share": 1,
    "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Administrator",
+   "share": 1,
+   "write": 1
   }
  ],
  "sort_field": "modified",

helpdesk/helpdesk/doctype/hd_customer/hd_customer.py

@@ -6,4 +6,33 @@
 
 
 class HDCustomer(Document):
-    pass
+    @staticmethod
+    def default_list_data():
+        columns = [
+            {
+                "label": "Name",
+                "key": "name",
+                "width": "30rem",
+                "type": "Data",
+            },
+            {
+                "label": "Domain",
+                "key": "domain",
+                "width": "30rem",
+                "type": "Data",
+            },
+            {
+                "label": "Created On",
+                "key": "creation",
+                "width": "20rem",
+                "type": "Datetime",
+            },
+        ]
+        rows = [
+            "name",
+            "image",
+            "domain",
+            "modified",
+            "creation",
+        ]
+        return {"columns": columns, "rows": rows}