From 219d8f28478fd25a04a94c69a6b7df53daa899be Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Wed, 2 Oct 2024 12:57:04 +0530
Subject: [PATCH] fix: article page for customer portal

---
 desk/src/pages/KnowledgeBaseArticle.vue       | 75 ++++++++++++++-----
 .../knowledge-base-v2/KnowledgeBasePublic.vue | 35 ++++-----
 .../knowledge-base/KnowledgeBaseSidebar.vue   |  1 +
 desk/src/router/index.ts                      |  3 +-
 helpdesk/helpdesk/doctype/hd_article/api.py   |  2 +-
 5 files changed, 77 insertions(+), 39 deletions(-)

diff --git a/desk/src/pages/KnowledgeBaseArticle.vue b/desk/src/pages/KnowledgeBaseArticle.vue
index 0c41ba0cf..49403338b 100644
--- a/desk/src/pages/KnowledgeBaseArticle.vue
+++ b/desk/src/pages/KnowledgeBaseArticle.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex h-full flex-col overflow-hidden">
-    <PageTitle v-if="!route.meta.public">
+    <PageTitle>
       <template #title>
         <Breadcrumbs :items="breadcrumbs" />
       </template>
-      <template #right>
+      <template #right v-if="!route.meta.public">
         <component
           :is="actionsComponent"
           :status="article.data?.status"
@@ -33,12 +33,13 @@
           editor-class="prose-f"
           @change="articleContent = $event"
         >
-          <template #top>
+          <template #top v-if="!route.meta.public">
             <component
               :is="topComponent"
               v-model:title="articleTitle"
               v-bind="options__"
             />
+
             <TextEditorFixedMenu
               v-if="editMode"
               class="-ml-1"
@@ -122,10 +123,15 @@ const router = useRouter();
 const authStore = useAuthStore();
 const isNew = props.articleId === "new";
 const editMode = ref(isNew);
-const categoryId = computed(() => route.query.category);
-const subCategoryId = computed(() => route.query.subCategory);
+const categoryId = computed(() => router.currentRoute.value.query.category);
+const subCategoryId = computed(
+  () => router.currentRoute.value.query.subCategory
+);
+
+const isCustomerPortal = computed(() => route.meta.public);
+
 const breadcrumbs = computed(() => {
-  const items = [
+  const agentPortalItems = [
     {
       label: options__.value.categoryName,
       route: {
@@ -133,26 +139,57 @@ const breadcrumbs = computed(() => {
         params: { categoryId: options__.value.categoryId },
       },
     },
-    {
-      label: options__.value.subCategoryName,
-      route: {
-        name: AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY,
-        params: {
-          categoryId: options__.value.categoryId,
-          subCategoryId: options__.value.subCategoryId,
-        },
+  ];
+  // if (options__.value.subCategoryId !== options__.value.categoryId) {
+  agentPortalItems.push({
+    label: options__.value.subCategoryName,
+    route: {
+      name: AGENT_PORTAL_KNOWLEDGE_BASE_SUB_CATEGORY,
+      params: {
+        categoryId: options__.value.categoryId,
+        subCategoryId:
+          options__.value.subCategoryId || options__.value.categoryId,
       },
     },
-  ];
+  });
+  // }
 
   if (!isNew) {
-    items.push({
+    agentPortalItems.push({
       label: article.data?.title,
       route: {
         name: AGENT_PORTAL_KNOWLEDGE_BASE_ARTICLE,
         params: {
           articleId: article.data?.name,
         },
+      },
+    });
+  }
+  if (!isCustomerPortal.value) {
+    return agentPortalItems;
+  }
+  const customerPortalItems = [
+    {
+      label: "Knowledge Base",
+      route: {
+        name: "KnowledgeBasePublicNew",
+      },
+    },
+  ];
+  if (options__.value.categoryId) {
+    customerPortalItems.push({
+      label: options__.value.categoryName,
+      route: {
+        name: "KnowledgeBasePublicNew",
+        query: { category: options__.value.categoryId },
+      },
+    });
+  }
+  if (options__.value.subCategoryId) {
+    customerPortalItems.push({
+      label: options__.value.subCategoryName,
+      route: {
+        name: "KnowledgeBasePublicNew",
         query: {
           category: options__.value.categoryId,
           subCategory: options__.value.subCategoryId,
@@ -160,7 +197,8 @@ const breadcrumbs = computed(() => {
       },
     });
   }
-  return items;
+
+  return customerPortalItems;
 });
 const placeholder = computed(() =>
   editMode.value ? "Write something..." : "Content is empty"
@@ -175,7 +213,6 @@ const actionsComponent = computed(() => {
 });
 
 const topComponent = computed(() => {
-  if (route.meta.public) return KnowledgeBaseArticleTopPublic;
   if (isNew) return KnowledgeBaseArticleTopNew;
   if (editMode.value) return KnowledgeBaseArticleTopEdit;
   return KnowledgeBaseArticleTopView;
@@ -208,7 +245,7 @@ const category = createDocumentResource({
 const subCategory = createDocumentResource({
   doctype: "HD Article Category",
   name: subCategoryId.value,
-  auto: true,
+  auto: subCategoryId.value !== categoryId.value ? true : false,
 });
 
 const options__ = computed(() => ({
diff --git a/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue b/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
index de7a765c9..c0efbb9de 100644
--- a/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
+++ b/desk/src/pages/knowledge-base-v2/KnowledgeBasePublic.vue
@@ -17,12 +17,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, Ref } from "vue";
+import { ref, watch, computed } from "vue";
 import { LayoutHeader } from "@/components";
 import KnowledgeBaseSidebar from "@/components/knowledge-base-v2/KnowledgeBaseSidebar.vue";
 import KnowledgeBaseCategory from "@/components/knowledge-base-v2/KnowledgeBaseCategory.vue";
 import { useRouter } from "vue-router";
-import { Breadcrumbs } from "frappe-ui";
+import { Breadcrumbs, createResource, call } from "frappe-ui";
+import { reactive } from "vue";
 
 const router = useRouter();
 const defaultCategory = computed(
@@ -48,21 +49,21 @@ const breadcrumbs = computed(() => {
   // return items;
   // TODO: Add category and subcategory name to breadcrumbs
 
-  if (category) {
-    items.push({
-      label: category,
-      route: {
-        name: "KnowledgeBasePublicNew",
-        query: { category },
-      },
-    });
-  }
-  if (subCategory) {
-    items.push({
-      label: subCategory,
-      route: { name: "KnowledgeBasePublicNew", query: { subCategory } },
-    });
-  }
+  // if (category) {
+  //   items.push({
+  //     label: category,
+  //     route: {
+  //       name: "KnowledgeBasePublicNew",
+  //       query: { category },
+  //     },
+  //   });
+  // }
+  // if (subCategory) {
+  //   items.push({
+  //     label: subCategory,
+  //     route: { name: "KnowledgeBasePublicNew", query: { subCategory } },
+  //   });
+  // }
   return items;
 });
 
diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue b/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue
index adb7777c7..7875fd72c 100644
--- a/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue
+++ b/desk/src/pages/knowledge-base/KnowledgeBaseSidebar.vue
@@ -27,6 +27,7 @@
         :is-expanded="true"
         :label="category.category_name"
         :on-click="() => toCategory(category.name)"
+        class="truncate"
       />
     </div>
     <KnowledgeBaseCategoryNew
diff --git a/desk/src/router/index.ts b/desk/src/router/index.ts
index bd43f515c..82b23dd4f 100644
--- a/desk/src/router/index.ts
+++ b/desk/src/router/index.ts
@@ -105,8 +105,7 @@ const routes = [
           {
             path: "articles/:articleId?",
             name: "KBArticlePublicNew",
-            component: () =>
-              import("@/pages/knowledge-base-v2/KnowledgeBaseArticle.vue"),
+            component: () => import("@/pages/KnowledgeBaseArticle.vue"),
             props: true,
           },
         ],
diff --git a/helpdesk/helpdesk/doctype/hd_article/api.py b/helpdesk/helpdesk/doctype/hd_article/api.py
index 445eb07c1..a88a8f587 100644
--- a/helpdesk/helpdesk/doctype/hd_article/api.py
+++ b/helpdesk/helpdesk/doctype/hd_article/api.py
@@ -14,7 +14,7 @@ def get_article(name: str):
     author = frappe.get_cached_doc("User", article["author"])
     sub_category = frappe.get_cached_doc("HD Article Category", article["category"])
     category = frappe.get_cached_doc(
-        "HD Article Category", sub_category.parent_category
+        "HD Article Category", sub_category.get("parent_category", article["category"])
     )
 
     return {