opendesk

1<template>
2  <SettingsLayoutBase
3    :description="
4      __('Manage who can read your knowledge base and how it looks.')
5    "
6  >
7    <template #title>
8      <div class="flex items-center gap-2">
9        <h1 class="text-md-semibold text-ink-gray-8">
10          {{ __("Knowledge Base") }}
11        </h1>
12        <UnsavedBadge :show="isDirty" />
13      </div>
14    </template>
15    <template #header-actions>
16      <Transition name="fade">
17        <div v-if="isDirty" class="flex items-center gap-2">
18          <Button
19            icon-left="lucide-external-link"
20            :label="__('Preview')"
21            @click="preview"
22          />
23          <Button
24            variant="solid"
25            :label="__('Save')"
26            :loading="saving"
27            @click="save"
28          />
29        </div>
30      </Transition>
31    </template>
32    <template #content>
33      <KnowledgeBaseForm />
34    </template>
35  </SettingsLayoutBase>
36</template>
37
38<script setup lang="ts">
39import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
40import UnsavedBadge from "@/components/UnsavedBadge.vue";
41import { __ } from "@/translation";
42import KnowledgeBaseForm from "@opendesk/shared/settings/KnowledgeBaseForm.vue";
43import { useKnowledgeBaseDraft } from "@opendesk/shared/settings/knowledgeBaseDraft.ts";
44import { Button } from "frappe-ui";
45import { onUnmounted, watch } from "vue";
46import { disableSettingModalOutsideClick } from "../settingsModal";
47
48const { isDirty, saving, save, discard, preview } = useKnowledgeBaseDraft();
49
50// Unsaved edits keep the modal open and guard tab changes.
51watch(isDirty, (dirty) => (disableSettingModalOutsideClick.value = dirty), {
52  immediate: true,
53});
54
55// The draft is shared; drop edits left by a confirmed tab change.
56onUnmounted(() => {
57  if (isDirty.value) discard();
58  disableSettingModalOutsideClick.value = false;
59});
60</script>
61