opendesk

1<template>
2  <Dialog
3    v-model:open="show"
4    size="5xl"
5    bare
6    :dismissible="!disableSettingModalOutsideClick"
7  >
8    <template #default>
9      <div
10        class="flex z-50 overflow-hidden"
11        :style="{ height: 'calc(100vh - 8rem)' }"
12      >
13        <div
14          class="flex-col rounded-l-6 w-56 shrink-0 ps-1 py-1 bg-surface-sidebar overflow-y-auto hide-scrollbar"
15        >
16          <h1
17            class="h-7.5 px-2 py-[7px] my-[3px] flex cursor-pointer gap-1.5 text-xs-medium text-ink-gray-5 transition-all duration-300 ease-in-out sticky top-0 z-10 bg-surface-sidebar ml-1"
18          >
19            {{ __("Account") }}
20          </h1>
21          <div v-for="tab in tabs" class="last:mb-2">
22            <div v-if="!tab.noborder" class="mx-2 my-2.5"></div>
23
24            <div
25              v-if="!tab.hideLabel"
26              class="h-7.5 px-2 py-[7px] my-[3px] flex cursor-pointer gap-1.5 text-xs-medium text-ink-gray-5 transition-all duration-300 ease-in-out sticky top-0 z-10 bg-surface-sidebar ml-1"
27            >
28              <Tooltip :text="__(tab.label)" side="right">
29                <span class="truncate">{{ __(tab.label) }}</span>
30              </Tooltip>
31            </div>
32
33            <nav class="space-y-[3px] pr-2 pl-1">
34              <button
35                v-for="item in tab.items"
36                :key="item.label"
37                class="flex h-7 w-full items-center gap-2 rounded-4 px-2 py-[7px]"
38                :class="[
39                  activeTab?.label == item.label
40                    ? 'bg-surface-elevation-3 shadow-sm'
41                    : 'hover:bg-surface-gray-2',
42                ]"
43                @click="() => onTabChange(item)"
44              >
45                <component
46                  :is="item.icon"
47                  class="h-4 w-4 text-ink-gray-7 shrink-0"
48                />
49                <Tooltip :text="__(item.label)" side="right">
50                  <span class="text-p-sm text-ink-gray-8 truncate">
51                    {{ __(item.label) }}
52                  </span>
53                </Tooltip>
54              </button>
55            </nav>
56          </div>
57        </div>
58        <div
59          class="flex flex-1 flex-col bg-surface-elevation-2 max-w-[816px] overflow-hidden relative"
60        >
61          <component
62            :is="activeTab.component"
63            v-if="activeTab"
64            class="h-full flex flex-col w-full"
65          />
66        </div>
67      </div>
68    </template>
69  </Dialog>
70  <ConfirmDialog
71    v-model="showConfirmDialog"
72    :title="__('Unsaved changes')"
73    :message="
74      __('Are you sure you want to change tabs? Unsaved changes will be lost.')
75    "
76    :onConfirm="
77      () => {
78        if (nextActiveTab !== null) {
79          activeTab = nextActiveTab;
80        }
81        nextActiveTab = null;
82        showConfirmDialog = false;
83        disableSettingModalOutsideClick = false;
84      }
85    "
86    :onCancel="
87      () => {
88        nextActiveTab = null;
89      }
90    "
91  />
92</template>
93<script setup lang="ts">
94import { Dialog, Tooltip } from "frappe-ui";
95import { ModelRef, ref } from "vue";
96import ConfirmDialog from "@/components/ConfirmDialog.vue";
97import {
98  activeTab,
99  disableSettingModalOutsideClick,
100  nextActiveTab,
101  tabs,
102} from "./settingsModal";
103
104const show: ModelRef<boolean> = defineModel();
105
106const showConfirmDialog = ref(false);
107
108function onTabChange(tab) {
109  if (!disableSettingModalOutsideClick.value) {
110    activeTab.value = tab;
111    return;
112  }
113  nextActiveTab.value = tab;
114  showConfirmDialog.value = true;
115}
116</script>
117