From b43ec15426c2d5185bb4ffeed87ed9be61c58030 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Wed, 15 Jan 2025 17:43:41 +0530
Subject: [PATCH] fix: add back article feedback

---
 desk/src/pages/knowledge-base/Article.vue     | 24 ++++---
 .../pages/knowledge-base/ArticleFeedback.vue  | 65 +++++++++++++++++++
 desk/src/stores/knowledgeBase.ts              | 14 ++++
 helpdesk/api/knowledge_base.py                |  9 +++
 4 files changed, 102 insertions(+), 10 deletions(-)
 create mode 100644 desk/src/pages/knowledge-base/ArticleFeedback.vue

diff --git a/desk/src/pages/knowledge-base/Article.vue b/desk/src/pages/knowledge-base/Article.vue
index d2533eb5b..310dc08b5 100644
--- a/desk/src/pages/knowledge-base/Article.vue
+++ b/desk/src/pages/knowledge-base/Article.vue
@@ -19,14 +19,13 @@
     </LayoutHeader>
 
     <div
-      class="py-4 mx-auto w-full max-w-3xl px-5 flex"
-      :class="editable && 'overflow-hidden'"
+      class="py-4 mx-auto w-full max-w-3xl px-5 flex flex-col"
       v-if="!article.loading"
     >
       <!-- article Info -->
       <div
         class="flex flex-col gap-3 p-4 w-full"
-        :class="editable && 'border rounded-lg  '"
+        :class="editable && 'border rounded-lg overflow-hidden'"
       >
         <!-- Top Element -->
         <div class="flex flex-col gap-3">
@@ -99,6 +98,9 @@
           </template>
         </TextEditor>
       </div>
+      <div class="p-4">
+        <ArticleFeedback :feedback="feedback" :article-id="articleId" />
+      </div>
     </div>
     <MoveToCategoryModal v-model="moveToModal" @move="handleMoveToCategory" />
   </div>
@@ -128,10 +130,11 @@ import { useUserStore } from "@/stores/user";
 import LayoutHeader from "@/components/LayoutHeader.vue";
 import MoveToCategoryModal from "@/components/knowledge-base/MoveToCategoryModal.vue";
 import DiscardButton from "@/components/DiscardButton.vue";
-import { Resource, Article } from "@/types";
+import { Resource, Article, FeedbackAction } from "@/types";
 import IconDot from "~icons/lucide/dot";
 import { createToast, textEditorMenuButtons, copyToClipboard } from "@/utils";
 import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+import ArticleFeedback from "./ArticleFeedback.vue";
 
 const props = defineProps({
   articleId: {
@@ -151,6 +154,7 @@ const editable = ref(route.query.isEdit ?? false);
 
 const content = ref("");
 const title = ref("");
+const feedback = ref<FeedbackAction>();
 
 const titleRef = ref(null);
 watch(
@@ -173,6 +177,7 @@ const article: Resource<Article> = createResource({
   onSuccess: (data: Article) => {
     content.value = data.content;
     title.value = data.title;
+    feedback.value = data.feedback;
   },
 });
 
@@ -299,12 +304,11 @@ watch([() => content.value, () => title.value], ([newContent, newTitle]) => {
 });
 
 const editorClass = computed(() => {
-  let basicStyles =
-    "rounded-b-lg max-w-[unset] prose-sm h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)]";
-  if (editable.value) {
-    basicStyles += " overflow-auto";
-  }
-  return basicStyles;
+  return [
+    "rounded-b-lg max-w-[unset] prose-sm",
+    editable.value &&
+      "overflow-auto h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)]",
+  ];
 });
 
 const options = computed(() => [
diff --git a/desk/src/pages/knowledge-base/ArticleFeedback.vue b/desk/src/pages/knowledge-base/ArticleFeedback.vue
new file mode 100644
index 000000000..acb7668b6
--- /dev/null
+++ b/desk/src/pages/knowledge-base/ArticleFeedback.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="flex items-center justify-between mb-8 p-4 rounded-lg bg-gray-50">
+    <!-- Feedback Section -->
+    <div>
+      <!-- was this article helpful? -->
+      <div class="flex items-center gap-2">
+        <span class="text-gray-800 text-sm"
+          >Did this article solve your issue?</span
+        >
+        <div class="flex items-center gap-1">
+          <component
+            :is="_feedback === 1 ? ThumbsUpFilledIcon : ThumbsUpIcon"
+            class="w-4 h-4 cursor-pointer"
+            @click="handleFeedbackClick(1)"
+          />
+          <component
+            :is="_feedback === 2 ? ThumbsDownFilledIcon : ThumbsDownIcon"
+            class="w-4 h-4 cursor-pointer"
+            @click="handleFeedbackClick(2)"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- Create a ticket CTA -->
+    <div class="flex items-center justify-center gap-2">
+      <span class="font-normal text-sm">
+        Can’t find what you’re looking for?
+      </span>
+      <router-link :to="{ name: 'TicketNew' }">
+        <p class="underline font-bold text-sm">Create a ticket &rightarrow;</p>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FeedbackAction } from "@/types";
+import {
+  ThumbsUpIcon,
+  ThumbsUpFilledIcon,
+  ThumbsDownIcon,
+  ThumbsDownFilledIcon,
+} from "@/components/icons";
+import { setFeedback } from "@/stores/knowledgeBase";
+import { ref } from "vue";
+
+interface P {
+  feedback: FeedbackAction;
+  articleId: string;
+}
+
+const props = withDefaults(defineProps<P>(), {
+  feedback: 0,
+});
+
+const _feedback = ref(props.feedback);
+
+function handleFeedbackClick(action: FeedbackAction) {
+  _feedback.value = action;
+  if (action === props.feedback) return;
+  setFeedback.submit({ articleId: props.articleId, action });
+}
+</script>
+
+<style scoped></style>
diff --git a/desk/src/stores/knowledgeBase.ts b/desk/src/stores/knowledgeBase.ts
index 6fef7d9bd..d94ba9601 100644
--- a/desk/src/stores/knowledgeBase.ts
+++ b/desk/src/stores/knowledgeBase.ts
@@ -107,3 +107,17 @@ export const categoryName = createResource({
     return { category };
   },
 });
+
+//feedback
+export const setFeedback = createResource({
+  url: "run_doc_method",
+  debounce: 300,
+  makeParams: ({ articleId, action }) => ({
+    dt: "HD Article",
+    dn: articleId,
+    method: "set_feedback",
+    args: {
+      value: action,
+    },
+  }),
+});
diff --git a/helpdesk/api/knowledge_base.py b/helpdesk/api/knowledge_base.py
index c4383869e..5c5434005 100644
--- a/helpdesk/api/knowledge_base.py
+++ b/helpdesk/api/knowledge_base.py
@@ -14,6 +14,14 @@ def get_article(name: str):
         frappe.throw(_("Access denied"), frappe.PermissionError)
 
     author = get_user_info_for_avatar(article["author"])
+    feedback = (
+        frappe.db.get_value(
+            "HD Article Feedback",
+            {"article": name, "user": frappe.session.user},
+            "feedback",
+        )
+        or 0
+    )
 
     return {
         "name": article.name,
@@ -28,6 +36,7 @@ def get_article(name: str):
             "HD Article Category", article.category, "category_name"
         ),
         "category_id": article.category,
+        "feedback": int(feedback),
     }
 
     return article