refactor: remove custom list view from knowledge base

frappe · Dec 23, 2024 · 52ac8db · 52ac8db
1 parent 0db7083
commit 52ac8db
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 61 deletions.
diff --git a/desk/src/components/ListViewBuilder.vue b/desk/src/components/ListViewBuilder.vue
@@ -29,7 +29,7 @@
       :rows="rows"
       row-key="name"
       :options="{
-        selectable: true,
+        selectable: props.options.listViewSelection ?? 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;
+    listViewSelection?: boolean;
+    statusMap?: Record<string, BadgeStatus>;
   };
 }
 
@@ -190,6 +199,17 @@ 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],
@@ -232,7 +252,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({

diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSubcategory.vue
@@ -29,27 +29,11 @@
         </div>
       </template>
     </KnowledgeBaseCategoryHeader>
-    <ListView :columns="columns" :resource="articles" doctype="HD Article">
-      <template #title="{ data }">
-        <div class="flex items-center gap-2">
-          <div><IconFile class="h-4 w-4" /></div>
-          <div class="truncate">
-            {{ data.title }}
-          </div>
-        </div>
-      </template>
-      <template #status="{ data }">
-        <Badge
-          :theme="data.status === 'Published' ? 'green' : 'orange'"
-          variant="subtle"
-        >
-          {{ data.status }}
-        </Badge>
-      </template>
-      <template #emptyMessage>
-        <EmptyMessage message="This sub category is empty" />
-      </template>
-    </ListView>
+    <ListViewBuilder
+      :options="options"
+      @row-click="handleClick"
+      @empty-state-action="toNewArticle"
+    />
     <Dialog v-model="showEdit" :options="{ title: 'Edit' }">
       <template #body-content>
         <form @submit.prevent="saveSubCategory">
@@ -80,26 +64,24 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, h } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useUserStore } from "@/stores/user";
 import {
   createDocumentResource,
   debounce,
-  Badge,
   Button,
   Dialog,
   FormControl,
+  Avatar,
 } from "frappe-ui";
 import { AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE } from "@/router";
-import { createListManager } from "@/composables/listManager";
 import { useError } from "@/composables/error";
-import { ListView } from "@/components";
 import KnowledgeBaseCategoryHeader from "./KnowledgeBaseCategoryHeader.vue";
-import EmptyMessage from "@/components/EmptyMessage.vue";
 import IconEdit from "~icons/lucide/edit-3";
-import IconFile from "~icons/lucide/file-text";
 import IconPlus from "~icons/lucide/plus";
-
+import ListViewBuilder from "@/components/ListViewBuilder.vue";
+const { getUser } = useUserStore();
 const props = defineProps({
   subCategoryId: {
     type: String,
@@ -132,41 +114,53 @@ const saveSubCategory = debounce(
   500
 );
 
-const articles = createListManager({
+const options = {
   doctype: "HD Article",
-  filters: {
-    category: props.subCategoryId,
+  defaultFilters: {
+    category: ["=", props.subCategoryId],
+    status: ["!=", "Archived"],
   },
-  auto: true,
-  transform: (data) => {
-    for (const d of data) {
-      d.onClick = {
-        name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
-        params: {
-          articleId: d.name,
-        },
-        query: {
-          category: route.params.categoryId,
-          subCategory: route.params.subCategoryId,
-        },
-      };
-    }
-    return data;
+  columnConfig: {
+    author: {
+      prefix: ({ row }) => {
+        return h(Avatar, {
+          shape: "circle",
+          image: getUser(row.author)?.user_image,
+          label: row.author,
+          size: "sm",
+        });
+      },
+    },
   },
-});
-
-const columns = [
-  {
-    label: "Title",
-    key: "title",
-    width: "w-96",
+  statusMap: {
+    Published: {
+      label: "Published",
+      theme: "green",
+    },
+    Draft: {
+      label: "Draft",
+      theme: "gray",
+    },
   },
-  {
-    label: "Status",
-    key: "status",
-    width: "w-40",
+  emptyState: {
+    title: "No Articles Found",
   },
-];
+  hideViewControls: true,
+  listViewSelection: false,
+};
+
+function handleClick(id: string) {
+  router.push({
+    name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
+    params: {
+      articleId: id,
+    },
+    query: {
+      category: route.params.categoryId,
+      subCategory: route.params.subCategoryId,
+    },
+  });
+}
 
 function toNewArticle() {
   router.push({

diff --git a/desk/src/types.ts b/desk/src/types.ts
@@ -247,4 +247,10 @@ export interface Category {
   children?: (Article | SubCategory)[];
 }
 
+// Badge
+export interface BadgeStatus {
+  label: string;
+  theme: string;
+}
+
 export type FeedbackAction = 0 | 1 | 2; // 0: neutral, 1: like, 2: dislike
diff --git a/desk/tsconfig.json b/desk/tsconfig.json
@@ -13,6 +13,6 @@
 			"vite/client"
 		],
 	},
-	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
+	"include": ["src","src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
 	"exclude": ["node_modules"]
 }
diff --git a/helpdesk/helpdesk/doctype/hd_article/hd_article.py b/helpdesk/helpdesk/doctype/hd_article/hd_article.py
@@ -52,6 +52,45 @@ def before_save(self):
                 )
             )
 
+    @staticmethod
+    def default_list_data():
+        columns = [
+            {
+                "label": "Title",
+                "type": "Data",
+                "key": "title",
+                "width": "17rem",
+            },
+            {
+                "label": "Status",
+                "type": "status",
+                "key": "status",
+                "width": "24rem",
+            },
+            {
+                "label": "Author",
+                "type": "Data",
+                "key": "author",
+                "width": "17rem",
+            },
+            {
+                "label": "Last Modified",
+                "type": "Datetime",
+                "key": "modified",
+                "width": "8rem",
+            },
+        ]
+        rows = [
+            "name",
+            "title",
+            "category",
+            "status",
+            "author",
+            "published_on",
+            "modified",
+        ]
+        return {"columns": columns, "rows": rows}
+
     @frappe.whitelist()
     def set_feedback(self, value):
         # 0 empty, 1 like, 2 dislike