fix: copy to clipboard for article and category

frappe · Jan 21, 2025 · 5482059 · 5482059
1 parent bb53885
commit 5482059
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/desk/src/pages/knowledge-base/Article.vue b/desk/src/pages/knowledge-base/Article.vue
@@ -48,7 +48,10 @@
                 {{ dayjs(article.data.modified).short() }}
               </div>
             </div>
-            <Dropdown :options="options" v-if="!editable && !isCustomerPortal">
+            <Dropdown
+              :options="articleActions"
+              v-if="!editable && !isCustomerPortal"
+            >
               <Button variant="ghost">
                 <template #icon>
                   <IconMoreHorizontal class="h-4 w-4" />
@@ -380,7 +383,7 @@ const editorClass = computed(() => {
   ];
 });
 
-const options = computed(() => [
+const articleActions = computed(() => [
   {
     label: "Edit",
     icon: "edit",
@@ -394,11 +397,11 @@ const options = computed(() => [
     onClick: () => (moveToModal.value = true),
   },
   {
-    label: "Copy",
-    icon: "copy",
+    label: "Share",
+    icon: "link",
     onClick: () => {
       const url = new URL(window.location.href);
-      url.pathname = `/helpdesk/kb-help/articles/${props.articleId}`;
+      url.pathname = `/helpdesk/kb-public/articles/${props.articleId}`;
       copyToClipboard(url.href, article.data.title);
     },
   },

diff --git a/desk/src/pages/knowledge-base/Articles.vue b/desk/src/pages/knowledge-base/Articles.vue
@@ -6,7 +6,7 @@
       </template>
     </LayoutHeader>
     <div
-      class="pt-0 md:pt-3 sm:px-5 w-full flex flex-col gap-2 max-w-4xl 2xl:max-w-5xl"
+      class="pt-0 sm:px-5 w-full flex flex-col gap-2 max-w-4xl 2xl:max-w-5xl"
     >
       <div
         v-if="articles.data"

diff --git a/desk/src/pages/knowledge-base/KnowledgeBaseAgent.vue b/desk/src/pages/knowledge-base/KnowledgeBaseAgent.vue
@@ -60,7 +60,7 @@ import LayoutHeader from "@/components/LayoutHeader.vue";
 import ListViewBuilder from "@/components/ListViewBuilder.vue";
 import CategoryModal from "@/components/knowledge-base/CategoryModal.vue";
 import MoveToCategoryModal from "@/components/knowledge-base/MoveToCategoryModal.vue";
-import { createToast } from "@/utils";
+import { createToast, copyToClipboard } from "@/utils";
 import { Error } from "@/types";
 import LucideMerge from "~icons/lucide/merge";
 import MergeCategoryModal from "@/components/knowledge-base/MergeCategoryModal.vue";
@@ -150,6 +150,16 @@ const groupByActions = [
       category.id = groupedRow.group.value;
     },
   },
+  {
+    label: "Share",
+    icon: "link",
+    onClick: async ({ group }) => {
+      const { label, value } = group;
+      const url = new URL(window.location.href);
+      url.pathname = `/helpdesk/kb-public/${value}`;
+      await copyToClipboard(url.href, label);
+    },
+  },
   {
     label: "Delete",
     icon: "trash-2",

diff --git a/desk/src/utils.ts b/desk/src/utils.ts
@@ -120,8 +120,18 @@ export function setupCustomActions(data, obj) {
 
 export const isCustomerPortal = ref(false);
 
-export function copyToClipboard(text: string, message?: string) {
-  navigator.clipboard.writeText(text);
+export async function copyToClipboard(text: string, message?: string) {
+  if (navigator.clipboard && window.isSecureContext) {
+    await navigator.clipboard.writeText(text);
+  } else {
+    let input = document.createElement("input");
+    let body = document.querySelector("body");
+    body.appendChild(input);
+    input.value = text;
+    input.select();
+    document.execCommand("copy");
+    input.remove();
+  }
   createToast({
     title: "Copied to clipboard",
     text: message,