opendesk

1<template>
2  <Dialog
3    title="Merge with another category"
4    @after-leave="
5      () => {
6        toCategory = null;
7      }
8    "
9    v-model:open="showDialog"
10  >
11    <template #default>
12      <p class="text-p-base text-ink-gray-8 mb-4">
13        This will move all articles of the
14        <span class="whitespace-nowrap font-semibold">{{ categoryTitle }}</span>
15        category to the selected category. This change is irreversible!
16      </p>
17      <Link
18        class="form-control"
19        doctype="OD Article Category"
20        placeholder="Select Category"
21        v-model="toCategory"
22        label="Category"
23        :page-length="100"
24      />
25      <AnimatedNote :note="joiningNote" />
26    </template>
27    <template #actions>
28      <Button
29        class="w-full"
30        variant="solid"
31        label="Merge"
32        @click="emit('merge', categoryId, toCategory)"
33      />
34    </template>
35  </Dialog>
36</template>
37<script setup lang="ts">
38import { computed, ref } from "vue";
39import { Dialog } from "frappe-ui";
40import { Link } from "@/components";
41import AnimatedNote from "./AnimatedNote.vue";
42import { useCategoryVisibility } from "@/stores/knowledgeBase";
43import { __ } from "@/translation";
44defineProps<{
45  categoryId: string;
46  categoryTitle: string;
47}>();
48const emit = defineEmits(["merge"]);
49const showDialog = defineModel<boolean>();
50
51const toCategory = ref("");
52const joining = useCategoryVisibility(toCategory);
53// A merge only narrows access; Public needs no note.
54const joiningNote = computed(
55  () =>
56    ({
57      Customers: __(
58        "Articles in this category are visible to customers only. Merged public articles will have the same visibility."
59      ),
60      Private: __(
61        "Articles in this category are visible to agents only. Merged articles will have the same visibility."
62      ),
63    }[joining.data])
64);
65</script>
66