refactor: knowledge base & articles

.gitignore

@@ -8,6 +8,7 @@ __pycache__/
 *.log
 tags
 node_modules
+.vscode
 
 # Distribution / packaging
 .Python

desk/src/components/BrandLogo.vue

@@ -1,5 +1,10 @@
 <template>
-  <Avatar v-if="config.brandLogo" size="xl" :image="config.brandLogo" />
+  <img
+    v-if="config.brandLogo"
+    :src="config.brandLogo"
+    alt="Brand Logo"
+    class="h-8 w-8 shrink-0 object-cover"
+  />
   <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
 </template>
 

desk/src/components/CommentTextEditor.vue

@@ -104,6 +104,7 @@ import { AttachmentItem } from "@/components/";
 import { useAgentStore } from "@/stores/agent";
 import { useStorage } from "@vueuse/core";
 import { PreserveVideoControls } from "@/tiptap-extensions";
+import { textEditorMenuButtons } from "@/utils";
 
 const { agents: agentsList } = useAgentStore();
 
@@ -163,42 +164,4 @@ async function submitComment() {
 
   comment.submit();
 }
-
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
 </script>

desk/src/components/DiscardButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <Button :label="label" @click="handleDiscard" />
+</template>
+
+<script setup lang="ts">
+import { confirmDialog } from "frappe-ui";
+
+const emit = defineEmits<{
+  (event: "discard"): void;
+}>();
+
+const {
+  label = "Discard",
+  hideDialog = false,
+  title = "Discard?",
+  message = "Are you sure you want to discard this?",
+} = defineProps<{
+  label?: string;
+  hideDialog?: boolean;
+  title?: string;
+  message?: string;
+}>();
+
+function handleDiscard() {
+  if (hideDialog) {
+    emit("discard");
+    return;
+  }
+  confirmDialog({
+    title: title,
+    message: message,
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      emit("discard");
+      hideDialog();
+    },
+  });
+}
+</script>
+
+<style scoped></style>

desk/src/components/EmailEditor.vue

@@ -157,7 +157,7 @@ import {
   TextEditorFixedMenu,
   createResource,
 } from "frappe-ui";
-import { createToast, validateEmail } from "@/utils";
+import { createToast, validateEmail, textEditorMenuButtons } from "@/utils";
 import {
   MultiSelectInput,
   AttachmentItem,
@@ -298,44 +298,6 @@ function addToReply(
     .run();
 }
 
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
-
 const editor = computed(() => {
   return editorRef.value.editor;
 });

desk/src/components/ListRows.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="mx-3 h-full overflow-y-auto sm:mx-5" v-if="showGroupedRows">
+    <div v-for="group in groupedRows" :key="group.group">
+      <ListGroupHeader :group="group">
+        <div
+          class="my-2 flex items-center gap-2 text-base font-medium text-ink-gray-8 justify-between w-full mr-1"
+        >
+          <div class="flex items-center gap-2 w-full">
+            <component v-if="group.icon" :is="group.icon" />
+            <div
+              v-if="group.group.label != ''"
+              class="flex items-center gap-1 w-full"
+            >
+              <span>{{ group.group.label }}</span>
+              <span class="text-xs text-ink-gray-5"
+                >{{
+                  group.rows.length +
+                  " Article" +
+                  (group.rows.length > 1 ? "s" : "")
+                }}
+              </span>
+            </div>
+          </div>
+          <Dropdown :options="actions(group)" v-if="groupByActions.length > 0">
+            <Button variant="ghost">
+              <template #icon>
+                <IconMoreHorizontal class="h-4 w-4" />
+              </template>
+            </Button>
+          </Dropdown>
+        </div>
+      </ListGroupHeader>
+      <ListGroupRows :group="group" id="list-rows" class="!mt-0">
+        <ListRow
+          v-for="row in group.rows"
+          :key="row.name"
+          v-slot="{ idx, column, item }"
+          :row="row"
+          class="truncate text-base row"
+        >
+          <slot v-bind="{ idx, column, item, row }" />
+        </ListRow>
+      </ListGroupRows>
+    </div>
+  </div>
+  <ListRows class="mx-3 sm:mx-5" v-else id="list-rows">
+    <ListRow
+      v-for="row in groupedRows"
+      :key="row.name"
+      v-slot="{ idx, column, item }"
+      :row="row"
+      class="truncate text-base"
+    >
+      <slot v-bind="{ idx, column, item, row }" />
+    </ListRow>
+  </ListRows>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import {
+  ListRows,
+  ListRow,
+  ListGroupHeader,
+  ListGroupRows,
+  Dropdown,
+  Button,
+} from "frappe-ui";
+
+import IconMoreHorizontal from "~icons/lucide/more-horizontal";
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true,
+  },
+  groupByActions: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const groupedRows = ref(props.rows);
+
+const actions = (group) => {
+  let _actions = props.groupByActions.map((action) => {
+    return {
+      ...action,
+      onClick: () => action.onClick(group),
+    };
+  });
+  if (group.group.label == "General") {
+    _actions = _actions.filter((action) => action.label === "Add New Article");
+  }
+  return _actions;
+};
+
+watch(
+  () => props.rows,
+  (val) => (groupedRows.value = val)
+);
+
+let showGroupedRows = computed(() => {
+  return props.rows.every(
+    (row) => row.group && row.rows && Array.isArray(row.rows)
+  );
+});
+</script>
+
+<style></style>