opendesk

1<template>
2  <SettingsLayoutBase :description="__('Manage your personal preferences.')">
3    <template #title>
4      <div class="flex items-center gap-2">
5        <h1 class="text-md-semibold text-ink-gray-8">
6          {{ __("Preferences") }}
7        </h1>
8        <UnsavedBadge :show="isDirty" />
9      </div>
10    </template>
11    <template #header-actions>
12      <Transition name="fade">
13        <Button
14          v-if="isDirty"
15          variant="solid"
16          :label="__('Save')"
17          :loading="user.save.loading"
18          @click="save"
19        />
20      </Transition>
21    </template>
22    <template #content>
23      <div class="flex flex-col">
24        <div>
25          <div class="text-base-semibold text-ink-gray-9">
26            {{ __("Appearance") }}
27          </div>
28          <ThemeSwitcher
29            :name="config.brandName || 'Opendesk'"
30            :logo="config.brandLogo || ODLogo"
31          />
32        </div>
33        <hr class="my-8" />
34        <div>
35          <div class="text-base-semibold text-ink-gray-9">
36            {{ __("Language & Time") }}
37          </div>
38          <div class="mt-6">
39            <LanguageTimezoneSetting :user="user" />
40          </div>
41        </div>
42      </div>
43    </template>
44  </SettingsLayoutBase>
45</template>
46
47<script setup lang="ts">
48import { computed, watch } from "vue";
49import { Button, createDocumentResource, toast } from "frappe-ui";
50import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
51import UnsavedBadge from "@/components/UnsavedBadge.vue";
52import ODLogo from "@/assets/logos/ODLogo.vue";
53import { __ } from "@/translation";
54import { useAuthStore } from "@/stores/auth";
55import { useConfigStore } from "@/stores/config";
56import { disableSettingModalOutsideClick } from "../settingsModal";
57import ThemeSwitcher from "./components/ThemeSwitcher.vue";
58import LanguageTimezoneSetting from "./components/LanguageTimezoneSetting.vue";
59
60const config = useConfigStore();
61const { userId } = useAuthStore();
62const user = createDocumentResource({ doctype: "User", name: userId });
63
64const isDirty = computed(() => {
65  if (!user.originalDoc) return false;
66  return (
67    user.doc?.language !== user.originalDoc?.language ||
68    user.doc?.time_zone !== user.originalDoc?.time_zone
69  );
70});
71
72function save() {
73  user.save.submit(null, {
74    onSuccess: () => {
75      toast.success(__("Preferences updated successfully."));
76      // Language/timezone changes require a reload to take effect app-wide.
77      window.location.reload();
78    },
79    onError: (error: { message: string; messages: string[] }) => {
80      toast.error(error.message + ": " + error.messages?.[0]);
81    },
82  });
83}
84
85watch(isDirty, (value) => {
86  disableSettingModalOutsideClick.value = value;
87});
88</script>
89