From e2ff0a023c4f232e7567c80de0dd2ac1660fc8d9 Mon Sep 17 00:00:00 2001
From: Sabu Siyad <hello@ssiyad.com>
Date: Thu, 13 Jul 2023 21:39:36 +0530
Subject: [PATCH] feat: article page

---
 desk/src/components/TopBar.vue                |   4 +-
 .../knowledge-base/KnowledgeBaseArticle.vue   | 157 ++++++++++++++++++
 desk/src/router.js                            |   5 +-
 helpdesk/helpdesk/doctype/hd_article/api.py   |  18 ++
 .../doctype/hd_article/hd_article.json        |  30 +---
 5 files changed, 185 insertions(+), 29 deletions(-)
 create mode 100644 desk/src/pages/desk/knowledge-base/KnowledgeBaseArticle.vue
 create mode 100644 helpdesk/helpdesk/doctype/hd_article/api.py

diff --git a/desk/src/components/TopBar.vue b/desk/src/components/TopBar.vue
index ec18473f3..70e013fe1 100644
--- a/desk/src/components/TopBar.vue
+++ b/desk/src/components/TopBar.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="flex items-center justify-between gap-2 border-b px-6 py-3">
+  <div
+    class="flex items-center justify-between gap-2 border-b bg-white px-6 py-3"
+  >
     <div class="space-y-2">
       <div class="flex items-center gap-3">
         <IconChevronLeft
diff --git a/desk/src/pages/desk/knowledge-base/KnowledgeBaseArticle.vue b/desk/src/pages/desk/knowledge-base/KnowledgeBaseArticle.vue
new file mode 100644
index 000000000..629e5e21a
--- /dev/null
+++ b/desk/src/pages/desk/knowledge-base/KnowledgeBaseArticle.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="flex flex-col">
+    <TopBar
+      :back-to="{ name: AGENT_PORTAL_KNOWLEDGE_BASE }"
+      :title="article.data?.title"
+      class="sticky top-0"
+    >
+      <template #right>
+        <div class="flex gap-2">
+          <Button
+            :label="bLabel"
+            theme="gray"
+            variant="solid"
+            @click="bClick"
+          />
+          <Dropdown :options="dOptions">
+            <Button theme="gray" variant="ghost">
+              <template #icon>
+                <IconMoreHorizontal class="h-4 w-4" />
+              </template>
+            </Button>
+          </Dropdown>
+        </div>
+      </template>
+    </TopBar>
+    <div
+      class="my-8 place-self-center"
+      :style="{
+        width: '742px',
+      }"
+    >
+      <div class="mb-8 flex items-center gap-1.5">
+        <div class="text-base text-gray-600">
+          {{ article.data?.category.category_name }}
+        </div>
+        <IconChevronRight class="h-3 w-3 text-gray-600" />
+        <div class="text-base text-gray-800">
+          {{ article.data?.sub_category.category_name }}
+        </div>
+      </div>
+      <div class="mb-4.5 flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <Avatar
+            :label="article.data?.author.full_name"
+            :image="article.data?.author.user_image"
+          />
+          <div class="text-base text-gray-800">
+            {{ article.data?.author.full_name }}
+          </div>
+          <IconDot class="h-4 w-4 text-gray-600" />
+          <div class="text-xs text-gray-800">
+            {{ dateFormatted }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-gray-600">
+          <IconThumbsUp class="h-4 w-4" />
+          <div class="text-base">
+            {{ article.data?.helpful }}
+          </div>
+          <div class="text-base text-gray-300">|</div>
+          <IconThumbsDown class="h-4 w-4" />
+          <div class="text-base">
+            {{ article.data?.not_helpful }}
+          </div>
+        </div>
+      </div>
+      <div class="border-b pb-3 text-3xl font-semibold text-gray-900">
+        {{ article.data?.title }}
+      </div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div
+        class="prose-sm my-4 max-w-none"
+        v-html="article.data?.content"
+      ></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { createResource, debounce, Avatar, Button, Dropdown } from "frappe-ui";
+import dayjs from "dayjs";
+import { AGENT_PORTAL_KNOWLEDGE_BASE } from "@/router";
+import { createToast } from "@/utils/toasts";
+import TopBar from "@/components/TopBar.vue";
+import IconChevronRight from "~icons/lucide/chevron-right";
+import IconDot from "~icons/lucide/dot";
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+import IconThumbsDown from "~icons/lucide/thumbs-down";
+import IconThumbsUp from "~icons/lucide/thumbs-up";
+import IconEdit from "~icons/lucide/edit-3";
+import IconTrash from "~icons/lucide/trash-2";
+
+const article = createResource({
+  url: "helpdesk.helpdesk.doctype.hd_article.api.get_article",
+  params: {
+    name: "de99e3d725",
+  },
+  auto: true,
+});
+
+const dateFormatted = computed(() =>
+  dayjs(article.data?.creation).format("MMMM D, YYYY")
+);
+
+const setValueRes = createResource({
+  url: "frappe.client.set_value",
+  onSuccess() {
+    article.reload();
+  },
+  onError(error) {
+    const msg = error.messages.join(", ");
+    createToast({
+      title: "Error updating article",
+      text: msg,
+      icon: "x",
+      iconClasses: "text-red-500",
+    });
+  },
+});
+
+const publish = debounce(() => {
+  setValueRes.submit({
+    doctype: "HD Article",
+    name: article.data.name,
+    fieldname: "status",
+    value: "Published",
+  });
+}, 500);
+
+const unpublish = debounce(() => {
+  setValueRes.submit({
+    doctype: "HD Article",
+    name: article.data.name,
+    fieldname: "status",
+    value: "Draft",
+  });
+}, 500);
+
+const bLabel = computed(() =>
+  article.data?.status === "Published" ? "Unpublish" : "Publish"
+);
+const bClick = computed(() =>
+  article.data?.status === "Published" ? unpublish : publish
+);
+const dOptions = [
+  {
+    label: "Edit",
+    icon: IconEdit,
+    onClick: () => console.log("Edit"),
+  },
+  {
+    label: "Delete",
+    icon: IconTrash,
+    onClick: () => console.log("Delete"),
+  },
+];
+</script>
diff --git a/desk/src/router.js b/desk/src/router.js
index 9a68d8fe6..368bafa45 100644
--- a/desk/src/router.js
+++ b/desk/src/router.js
@@ -34,6 +34,7 @@ export const AGENT_PORTAL_TICKET_LIST = "DeskTickets";
 export const AGENT_PORTAL_TICKET_TYPE_LIST = "TicketTypes";
 export const AGENT_PORTAL_TICKET_TYPE_NEW = "NewTicketType";
 export const AGENT_PORTAL_TICKET_TYPE_SINGLE = "TicketType";
+export const AGENT_PORTAL_KNOWLEDGE_BASE = "DeskKBHome";
 
 export const KB_PUBLIC = "Knowledge Base";
 export const KB_PUBLIC_ARTICLE = "PortalKBArticle";
@@ -168,9 +169,9 @@ const routes = [
       },
       {
         path: "kb",
-        name: "DeskKBHome",
+        name: AGENT_PORTAL_KNOWLEDGE_BASE,
         component: () =>
-          import("@/pages/desk/knowledge-base/KnowledgeBase.vue"),
+          import("@/pages/desk/knowledge-base/KnowledgeBaseArticle.vue"),
       },
       // {
       //   path: "kb",
diff --git a/helpdesk/helpdesk/doctype/hd_article/api.py b/helpdesk/helpdesk/doctype/hd_article/api.py
new file mode 100644
index 000000000..74b109cc2
--- /dev/null
+++ b/helpdesk/helpdesk/doctype/hd_article/api.py
@@ -0,0 +1,18 @@
+import frappe
+
+
+@frappe.whitelist()
+def get_article(name: str):
+	article = frappe.get_doc("HD Article", name).as_dict()
+	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
+	)
+
+	return {
+		**article,
+		"author": author,
+		"category": category,
+		"sub_category": sub_category,
+	}
diff --git a/helpdesk/helpdesk/doctype/hd_article/hd_article.json b/helpdesk/helpdesk/doctype/hd_article/hd_article.json
index ae8302e73..cab2be5a2 100644
--- a/helpdesk/helpdesk/doctype/hd_article/hd_article.json
+++ b/helpdesk/helpdesk/doctype/hd_article/hd_article.json
@@ -15,13 +15,10 @@
   "published_on",
   "author",
   "content_section",
-  "content_type",
   "content",
-  "content_md",
   "views",
   "helpful",
-  "not_helpful",
-  "note"
+  "not_helpful"
  ],
  "fields": [
   {
@@ -63,30 +60,16 @@
    "hidden": 1,
    "label": "Not Helpful"
   },
-  {
-   "allow_in_quick_entry": 1,
-   "default": "Rich Text",
-   "fieldname": "content_type",
-   "fieldtype": "Select",
-   "label": "Content Type",
-   "options": "Rich Text\nMarkdown"
-  },
   {
    "allow_in_quick_entry": 1,
    "fieldname": "content_section",
    "fieldtype": "Section Break",
    "label": "Content"
   },
-  {
-   "allow_in_quick_entry": 1,
-   "fieldname": "content_md",
-   "fieldtype": "Markdown Editor",
-   "label": "Content (Markdown)"
-  },
   {
    "allow_in_quick_entry": 1,
    "fieldname": "content",
-   "fieldtype": "Text Editor",
+   "fieldtype": "Text",
    "label": "Content"
   },
   {
@@ -107,11 +90,6 @@
    "fieldname": "column_break_7",
    "fieldtype": "Column Break"
   },
-  {
-   "fieldname": "note",
-   "fieldtype": "Long Text",
-   "label": "Note"
-  },
   {
    "default": "-1",
    "fieldname": "idx",
@@ -133,7 +111,7 @@
   }
  ],
  "links": [],
- "modified": "2023-03-27 14:39:39.750824",
+ "modified": "2023-07-13 20:32:16.298366",
  "modified_by": "Administrator",
  "module": "Helpdesk",
  "name": "HD Article",
@@ -178,4 +156,4 @@
  "sort_order": "DESC",
  "states": [],
  "track_changes": 1
-}
+}
\ No newline at end of file