From c847199f914b15d4797cca07bd8107f539e94eaa Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 1 Oct 2024 04:08:54 +0530
Subject: [PATCH] feat: New Knowledge Base for Customer Portal

---
 desk/src/components/SidebarLink.vue           |  6 +-
 .../KnowledgeBaseCategoryHandler.vue          | 62 ++++++++++++++++
 .../KnowledgeBaseSidebar.vue                  | 60 +++++++++++++++
 desk/src/components/layouts/Sidebar.vue       |  8 +-
 desk/src/components/layouts/layoutSettings.ts |  2 +-
 .../knowledge-base-v2/KnowledgeBasePublic.vue | 27 +++++++
 desk/src/router/index.ts                      | 73 ++++++-------------
 helpdesk/api/kbase.py                         |  7 ++
 8 files changed, 187 insertions(+), 58 deletions(-)
 create mode 100644 desk/src/components/knowledge-base-v2/KnowledgeBaseCategoryHandler.vue
 create mode 100644 desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue
 create mode 100644 desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
 create mode 100644 helpdesk/api/kbase.py

diff --git a/desk/src/components/SidebarLink.vue b/desk/src/components/SidebarLink.vue
index 80df3f3da..36d4e1bca 100644
--- a/desk/src/components/SidebarLink.vue
+++ b/desk/src/components/SidebarLink.vue
@@ -5,7 +5,7 @@
       'w-full': isExpanded,
       'w-8': !isExpanded,
       'shadow-sm': isActive,
-      'bg-white': isActive,
+      [bgColor]: isActive,
       'hover:bg-gray-100': !isActive,
     }"
     @click="handle"
@@ -40,16 +40,18 @@ import { Icon } from "@iconify/vue";
 interface P {
   icon: unknown;
   label: string;
-  isExpanded: boolean;
+  isExpanded?: boolean;
   isActive?: boolean;
   onClick?: () => void;
   to?: string;
+  bgColor?: string;
 }
 
 const props = withDefaults(defineProps<P>(), {
   isActive: false,
   onClick: () => () => true,
   to: "",
+  bgColor: "bg-white",
 });
 const router = useRouter();
 
diff --git a/desk/src/components/knowledge-base-v2/KnowledgeBaseCategoryHandler.vue b/desk/src/components/knowledge-base-v2/KnowledgeBaseCategoryHandler.vue
new file mode 100644
index 000000000..aab5170a8
--- /dev/null
+++ b/desk/src/components/knowledge-base-v2/KnowledgeBaseCategoryHandler.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col p-5 px-10">
+    <h3 class="text-xl font-semibold text-gray-800">
+      {{ categoryName }}
+    </h3>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createListResource, createResource } from "frappe-ui";
+import { ref } from "vue";
+import { watch } from "vue";
+
+const props = defineProps<{
+  categoryId: string;
+}>();
+
+const categoryName = ref("");
+
+const categoryResource = createResource({
+  url: "helpdesk.api.kbase.get_category",
+  name: props.categoryId,
+  cache: ["category", props.categoryId],
+  params: {
+    category: props.categoryId,
+  },
+  onSuccess: (data) => {
+    categoryName.value = data.category_name ?? data.name;
+  },
+  auto: true,
+});
+
+const subCategories = createListResource({
+  doctype: "HD Article Category",
+  name: props.categoryId,
+  cache: ["category", props.categoryId],
+  fields: ["name", "category_name", "icon", "parent_category"],
+  filters: {
+    parent_category: props.categoryId,
+  },
+  auto: true,
+});
+watch(
+  () => props.categoryId,
+  () => {
+    categoryResource.update({
+      params: {
+        category: props.categoryId,
+      },
+    });
+
+    subCategories.update({
+      params: { name: props.categoryId },
+    });
+
+    categoryResource.reload();
+    subCategories.reload();
+  }
+);
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue b/desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue
new file mode 100644
index 000000000..b171ad48e
--- /dev/null
+++ b/desk/src/components/knowledge-base-v2/KnowledgeBaseSidebar.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="h-full space-y-2 border-r px-3.5 py-2.5"
+    :style="{
+      'min-width': '242px',
+      'max-width': '242px',
+    }"
+  >
+    <div class="flex flex-col gap-1">
+      <div class="text-sm font-medium text-gray-600">Categories</div>
+      <div v-if="!categories.isLoading" class="flex flex-col gap-1">
+        <!-- all categories here -->
+        <SidebarLink
+          v-for="category in categories.data"
+          :key="category.label"
+          :icon="getIcon(category.icon, true)"
+          :is-active="activeCategory === category.name"
+          :is-expanded="true"
+          :label="category.category_name"
+          :bg-color="'bg-gray-100'"
+          @click="handleClick(category.name)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import SidebarLink from "../SidebarLink.vue";
+import { createListResource } from "frappe-ui";
+import { getIcon } from "@/pages/knowledge-base/util";
+const emit = defineEmits(["category-change"]);
+
+const activeCategory = defineModel();
+
+const categories = createListResource({
+  doctype: "HD Article Category",
+  auto: true,
+  fields: ["name", "category_name", "icon", "parent_category"],
+  filters: {
+    parent_category: "",
+  },
+  transform: (data) => {
+    const firstCategory = {
+      name: "Explore All Articles",
+      category_name: "Explore All Articles",
+      icon: "search",
+    };
+    return [firstCategory, ...data];
+  },
+});
+
+function handleClick(name: string) {
+  if (activeCategory.value === name) return;
+  activeCategory.value = name;
+}
+</script>
+
+<style scoped></style>
diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue
index feea230c7..2435ff3cd 100644
--- a/desk/src/components/layouts/Sidebar.vue
+++ b/desk/src/components/layouts/Sidebar.vue
@@ -96,12 +96,10 @@ const notificationStore = useNotificationStore();
 const { isExpanded, width } = storeToRefs(useSidebarStore());
 const device = useDevice();
 const showSettingsModal = ref(false);
-const isCustomerPortal = computed(() =>
-  CUSTOMER_PORTAL_ROUTES.includes(route.name)
-);
+const isCustomerPortal = route.meta.public ?? false;
 
 const menuOptions = computed(() => {
-  return isCustomerPortal.value
+  return isCustomerPortal
     ? customerPortalSidebarOptions
     : agentPortalSidebarOptions;
 });
@@ -149,7 +147,7 @@ const agentPortalDropdown = computed(() => [
 ]);
 
 const profileSettings = computed(() => {
-  return isCustomerPortal.value
+  return isCustomerPortal
     ? customerPortalDropdown.value
     : agentPortalDropdown.value;
 });
diff --git a/desk/src/components/layouts/layoutSettings.ts b/desk/src/components/layouts/layoutSettings.ts
index b2ddeae63..5a7b834d7 100644
--- a/desk/src/components/layouts/layoutSettings.ts
+++ b/desk/src/components/layouts/layoutSettings.ts
@@ -60,6 +60,6 @@ export const customerPortalSidebarOptions = [
   {
     label: "Knowledge base",
     icon: LucideBookOpen,
-    to: "KBHome",
+    to: "KnowledgeBasePublicNew",
   },
 ];
diff --git a/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue b/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
new file mode 100644
index 000000000..d18c72791
--- /dev/null
+++ b/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col">
+    <LayoutHeader>
+      <template #left-header>
+        <div class="text-lg font-medium text-gray-900">Knowledge base</div>
+      </template>
+    </LayoutHeader>
+    <div class="flex grow">
+      <KnowledgeBaseSidebar v-model="currentCategory" />
+      <KnowledgeBaseCategoryHandler
+        v-if="currentCategory !== 'Explore All Articles'"
+        :category-id="currentCategory"
+      />
+      <div v-else>All</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { LayoutHeader } from "@/components";
+import KnowledgeBaseSidebar from "@/components/knowledge-base-v2/KnowledgeBaseSidebar.vue";
+import KnowledgeBaseCategoryHandler from "@/components/knowledge-base-v2/KnowledgeBaseCategoryHandler.vue";
+const currentCategory = ref("Explore All Articles");
+</script>
+
+<style scoped></style>
diff --git a/desk/src/router/index.ts b/desk/src/router/index.ts
index fb808cbdd..703d7554e 100644
--- a/desk/src/router/index.ts
+++ b/desk/src/router/index.ts
@@ -54,32 +54,7 @@ const routes = [
     path: "",
     component: () => import("@/pages/HRoot.vue"),
   },
-  {
-    path: "/knowledge-base",
-    component: () => import("@/pages/KnowledgeBasePublic.vue"),
-    children: [
-      {
-        path: "",
-        name: "KBHome",
-        component: () => import("@/pages/KnowledgeBasePublicHome.vue"),
-      },
-      {
-        path: ":categoryId",
-        name: "KBCategoryPublic",
-        component: () => import("@/pages/KnowledgeBasePublicCategory.vue"),
-        props: true,
-      },
-      {
-        path: "articles/:articleId",
-        name: "KBArticlePublic",
-        component: () => import("@/pages/KnowledgeBaseArticle.vue"),
-        meta: {
-          public: true,
-        },
-        props: true,
-      },
-    ],
-  },
+  // Customer portal routing
   {
     path: "",
     name: "CustomerRoot",
@@ -93,17 +68,11 @@ const routes = [
       // handle tickets routing
       {
         path: "my-tickets",
-        meta: {
-          auth: true,
-        },
         children: [
           {
             path: "",
             name: "TicketsCustomer",
             component: () => import("@/pages/Tickets.vue"),
-            meta: {
-              public: true,
-            },
           },
           {
             path: "new/:templateId?",
@@ -113,7 +82,6 @@ const routes = [
             meta: {
               onSuccessRoute: "TicketCustomer",
               parent: "TicketsCustomer",
-              public: true,
             },
           },
           {
@@ -121,30 +89,24 @@ const routes = [
             name: "TicketCustomer",
             component: () => import("@/pages/TicketCustomer.vue"),
             props: true,
-            meta: {
-              public: true,
-            },
           },
         ],
       },
+      // handle knowledge base routing
       {
-        path: "kb-new",
-        meta: {
-          auth: true,
-        },
+        path: "knowledge-base-public",
+        children: [
+          {
+            path: "",
+            name: "KnowledgeBasePublicNew",
+            component: () =>
+              import("@/pages/knowledge-base-v2/KnowledgeBasePublic.vue"),
+          },
+        ],
       },
     ],
   },
-  {
-    path: "/onboarding",
-    name: ONBOARDING_PAGE,
-    component: () => import("@/pages/onboarding/SimpleOnboarding.vue"),
-  },
-  {
-    path: "/:invalidpath",
-    name: "Invalid Page",
-    component: () => import("@/pages/InvalidPage.vue"),
-  },
+  // Agent Portal Routing
   {
     path: "",
     name: "AgentRoot",
@@ -248,6 +210,17 @@ const routes = [
       },
     ],
   },
+  // Additonal routes
+  {
+    path: "/onboarding",
+    name: ONBOARDING_PAGE,
+    component: () => import("@/pages/onboarding/SimpleOnboarding.vue"),
+  },
+  {
+    path: "/:invalidpath",
+    name: "Invalid Page",
+    component: () => import("@/pages/InvalidPage.vue"),
+  },
 ];
 
 const handleMobileView = (componentName) => {
diff --git a/helpdesk/api/kbase.py b/helpdesk/api/kbase.py
new file mode 100644
index 000000000..a79b8aa36
--- /dev/null
+++ b/helpdesk/api/kbase.py
@@ -0,0 +1,7 @@
+import frappe
+
+
+@frappe.whitelist()
+def get_category(category):
+    category_doc = frappe.get_doc("HD Article Category", category)
+    return category_doc