Merge pull request #2111 from RitvikSardana/refactor-listview-2

refactor: remove custom list view

desk/src/components/ListViewBuilder.vue

@@ -29,7 +29,7 @@
       :rows="rows"
       row-key="name"
       :options="{
-        selectable: true,
+        selectable: props.options.selectable ?? true ,
         showTooltip: true,
         resizeColumn: false,
         onRowClick: (row: Object) => emit('rowClick', row['name']),
@@ -61,6 +61,9 @@
             <div v-else-if="column.type === 'Datetime'">
               {{ dayjs.tz(item).fromNow() }}
             </div>
+            <div v-else-if="column.type === 'status'">
+              <Badge v-bind="handleStatusColor(item)" />
+            </div>
             <div v-else class="truncate">
               {{ item }}
             </div>
@@ -109,13 +112,16 @@ import {
   ListRow,
   ListHeader,
   ListHeaderItem,
+  Badge,
 } from "frappe-ui";
+
 import { Filter, SortBy, QuickFilters } from "@/components/view-controls";
 import { dayjs } from "@/dayjs";
 import FadedScrollableDiv from "./FadedScrollableDiv.vue";
 import Reload from "./view-controls/Reload.vue";
 import { useScreenSize } from "@/composables/screen";
 import EmptyState from "./EmptyState.vue";
+import { BadgeStatus } from "@/types";
 
 interface P {
   options: {
@@ -126,6 +132,9 @@ interface P {
       icon?: HTMLElement | string;
       title: string;
     };
+    hideViewControls?: boolean;
+    selectable?: boolean;
+    statusMap?: Record<string, BadgeStatus>;
   };
 }
 
@@ -134,7 +143,15 @@ interface E {
   (event: "rowClick", row: any): void;
 }
 
-const props = defineProps<P>();
+const props = withDefaults(defineProps<P>(), {
+  options: () => {
+    return {
+      doctype: "",
+      hideViewControls: false,
+      selectable: true,
+    };
+  },
+});
 
 const emit = defineEmits<E>();
 const { isMobileView } = useScreenSize();
@@ -190,10 +207,21 @@ function handleColumnConfig(column) {
   return column;
 }
 
+const statusMap: Record<string, BadgeStatus> = props.options
+  .statusMap as Record<string, BadgeStatus>;
+function handleStatusColor(status: "Published" | "Draft"): BadgeStatus {
+  if (!statusMap)
+    return {
+      label: status,
+      theme: "gray",
+    };
+  return statusMap[status];
+}
+
 const filterableFields = createResource({
   url: "helpdesk.api.doc.get_filterable_fields",
   cache: ["DocField", props.options.doctype],
-  auto: true,
+  auto: !props.options.hideViewControls,
   params: {
     doctype: props.options.doctype,
     append_assign: true,
@@ -212,15 +240,15 @@ const filterableFields = createResource({
 
 const sortableFields = createResource({
   url: "helpdesk.api.doc.sort_options",
-  auto: true,
+  auto: !props.options.hideViewControls,
   params: {
     doctype: props.options.doctype,
   },
 });
 
 const quickFilters = createResource({
   url: "helpdesk.api.doc.get_quick_filters",
-  auto: true,
+  auto: !props.options.hideViewControls,
   params: {
     doctype: props.options.doctype,
   },
@@ -232,7 +260,12 @@ const quickFilters = createResource({
 });
 
 const showViewControls = computed(() => {
-  return filterableFields.data && sortableFields.data && quickFilters.data;
+  return (
+    !props.options.hideViewControls &&
+    filterableFields.data &&
+    sortableFields.data &&
+    quickFilters.data
+  );
 });
 
 const listViewData = reactive({

desk/src/components/desk/global/NewContactDialog.vue

@@ -51,6 +51,7 @@ import {
   ErrorMessage,
   createResource,
   Autocomplete,
+  createListResource,
 } from "frappe-ui";
 import zod from "zod";
 
@@ -141,20 +142,17 @@ const open = computed({
   },
 });
 
-const customerResource = createResource({
-  url: "helpdesk.extends.client.get_list",
-  params: {
-    doctype: "HD Customer",
-    fields: ["name", "customer_name"],
-  },
+const customerResource = createListResource({
+  doctype: "HD Customer",
+  fields: ["name"],
+  cache: "customers",
   transform: (data) => {
-    let allData = data.map((option) => {
+    return data.map((option) => {
       return {
         label: option.name,
-        value: option.customer_name,
+        value: option.name,
       };
     });
-    return allData;
   },
   auto: true,
 });

desk/src/components/index.ts

@@ -1,7 +1,6 @@
 export { default as AttachmentItem } from "./AttachmentItem.vue";
 export { default as CommandPalette } from "./command-palette/CP.vue";
 export { default as HCard } from "./HCard.vue";
-export { default as ListView } from "./list-view/LV.vue";
 export { default as NestedPopover } from "./NestedPopover.vue";
 export { default as Notifications } from "./notifications/Notifications.vue";
 export { default as PageTitle } from "./PageTitle.vue";