1<template>
2 <Dialog v-model:open="showDialog" title="Move To" :actions="actions">
3 <template #default>
4 <div class="flex flex-col flex-1">
5 <Link
6 ref="linkRef"
7 class="w-full"
8 doctype="OD Article Category"
9 placeholder="Select Category"
10 v-model="category"
11 label="Category"
12 :filters="defaultFilters"
13 :page-length="100"
14 />
15 <AnimatedNote :note="joiningNote" />
16 </div>
17 </template>
18 </Dialog>
19</template>
20
21<script setup lang="ts">
22import { ref, computed, watch, nextTick } from "vue";
23import { Dialog } from "frappe-ui";
24import Link from "@/components/frappe-ui/Link.vue";
25import AnimatedNote from "./AnimatedNote.vue";
26import { useCategoryVisibility } from "@/stores/knowledgeBase";
27import { __ } from "@/translation";
28
29const emit = defineEmits(["move"]);
30const showDialog = defineModel<boolean>();
31const category = ref("");
32const linkRef = ref(null);
33const joining = useCategoryVisibility(category);
34// A move only narrows access; Public needs no note.
35const joiningNote = computed(
36 () =>
37 ({
38 Customers: __(
39 "Articles in this category are visible to customers only. Moved public articles will have the same visibility."
40 ),
41 Private: __(
42 "Articles in this category are visible to agents only. Moved articles will have the same visibility."
43 ),
44 }[joining.data])
45);
46
47const props = defineProps<{
48 excludeCategory?: string;
49}>();
50
51const defaultFilters = computed(() => {
52 if (!props.excludeCategory) return {};
53
54 return {
55 name: ["!=", props.excludeCategory],
56 };
57});
58watch(showDialog, async (val) => {
59 if (!val) return;
60 await nextTick();
61 setTimeout(() => {
62 linkRef.value?.$el?.querySelector("button")?.click();
63 }, 300);
64});
65
66const actions = [
67 {
68 label: "Move",
69 variant: "solid",
70 onClick: () => {
71 emit("move", category.value);
72 category.value = "";
73 },
74 },
75];
76</script>
77