0e685a99f7
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 8s
* refactor: enable profile signature option in ProfileMenu * feat: add signature api function * refactor: add new translation keys for 'Draw' and 'New Upload' in English and Thai * refactor: update image URL variable and improve translation keys in CanvasComponent and MainLayout * refactor: get function * feat: add delete signature function * feat: add canvas manipulation functions and integrate signature submission in MainLayout (unfinished) * chore(deps): update --------- Co-authored-by: puriphatt <puriphat@frappet.com> Co-authored-by: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
633 lines
18 KiB
Vue
633 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed, reactive } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useQuasar } from 'quasar';
|
|
import { getUserId, getUsername, logout, getRole } from 'src/services/keycloak';
|
|
import { Icon } from '@iconify/vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import moment from 'moment';
|
|
|
|
import useLoader from 'stores/loader';
|
|
import ProfileMenu from './ProfileMenu.vue';
|
|
import DrawerComponent from './DrawerComponent.vue';
|
|
import useUserStore from 'stores/user';
|
|
import { CanvasComponent, DialogForm } from 'components/index';
|
|
import { dialog } from 'stores/utils';
|
|
import useMyBranchStore from 'stores/my-branch';
|
|
import { useConfigStore } from 'src/stores/config';
|
|
import { useNavigator } from 'src/stores/navigator';
|
|
import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
|
|
import { baseUrl } from 'stores/utils';
|
|
import { useNotification } from 'src/stores/notification';
|
|
import NotiDialog from 'src/pages/00_notification/NotiDialog.vue';
|
|
|
|
const useMyBranch = useMyBranchStore();
|
|
const { fetchListMyBranch } = useMyBranch;
|
|
|
|
interface NotificationButton {
|
|
item: string;
|
|
color: string;
|
|
active: boolean;
|
|
}
|
|
|
|
const $q = useQuasar();
|
|
const loaderStore = useLoader();
|
|
const navigatorStore = useNavigator();
|
|
const notificationStore = useNotification();
|
|
const configStore = useConfigStore();
|
|
|
|
const { data: notificationData } = storeToRefs(notificationStore);
|
|
|
|
const { visible } = storeToRefs(loaderStore);
|
|
const { t } = useI18n({ useScope: 'global' });
|
|
const userStore = useUserStore();
|
|
|
|
const canvasModal = ref(false);
|
|
|
|
const leftDrawerOpen = ref<boolean>(false);
|
|
const leftDrawerMini = ref(false);
|
|
|
|
const unread = computed<number>(
|
|
() => notificationData.value.filter((v) => !v.read).length || 0,
|
|
);
|
|
const userImage = ref<string>();
|
|
const userGender = ref('');
|
|
const canvasRef = ref();
|
|
|
|
const language: {
|
|
value: Lang;
|
|
label: string;
|
|
icon: string;
|
|
date: string;
|
|
}[] = [
|
|
{ value: Lang.Thai, label: 'ไทย', icon: 'th', date: 'th' },
|
|
{ value: Lang.English, label: 'English', icon: 'us', date: 'en-gb' },
|
|
];
|
|
|
|
const state = reactive({
|
|
filterUnread: false,
|
|
notiOpen: false,
|
|
notiDialog: false,
|
|
notiId: '',
|
|
});
|
|
const notiMenu = ref<NotificationButton[]>([
|
|
{
|
|
item: 'all',
|
|
color: 'noti-switch-on',
|
|
active: true,
|
|
},
|
|
{
|
|
item: 'unread',
|
|
color: 'noti-switch-off',
|
|
active: false,
|
|
},
|
|
]);
|
|
|
|
function setActive(button: NotificationButton) {
|
|
notiMenu.value = notiMenu.value.map((current) => ({
|
|
item: current.item,
|
|
color: current.item !== button.item ? 'noti-switch-off' : 'noti-switch-on',
|
|
active: current.item === button.item,
|
|
}));
|
|
if (button.item === 'unread') {
|
|
// noti.value?.result &&
|
|
state.filterUnread = true;
|
|
}
|
|
if (button.item === 'all') {
|
|
state.filterUnread = false;
|
|
}
|
|
}
|
|
|
|
function doLogout() {
|
|
dialog({
|
|
icon: 'mdi-logout-variant',
|
|
title: t('dialog.title.confirmLogout'),
|
|
persistent: true,
|
|
color: 'negative',
|
|
message: t('dialog.message.confirmLogout'),
|
|
actionText: t('general.logout'),
|
|
action: async () => {
|
|
logout();
|
|
},
|
|
cancel: () => {},
|
|
});
|
|
}
|
|
|
|
function readNoti(id: string) {
|
|
const notification = notificationData.value.find((n) => n.id === id);
|
|
|
|
state.notiDialog = true;
|
|
state.notiId = id;
|
|
if (notification) {
|
|
notification.read = true;
|
|
}
|
|
}
|
|
|
|
function signatureSubmit() {
|
|
const signature = canvasRef.value.setCanvas();
|
|
userStore.setSignature(signature);
|
|
canvasModal.value = false;
|
|
}
|
|
|
|
async function signatureFetch() {
|
|
const ret = await userStore.getSignature();
|
|
if (ret) canvasRef.value.getCanvas(ret);
|
|
}
|
|
|
|
onMounted(async () => {
|
|
initTheme();
|
|
initLang();
|
|
|
|
await configStore.getConfig();
|
|
|
|
{
|
|
const noti = await notificationStore.getNotificationList();
|
|
|
|
if (noti) {
|
|
notificationData.value = noti.result;
|
|
}
|
|
}
|
|
|
|
await fetchListMyBranch(getUserId() ?? '');
|
|
leftDrawerOpen.value = $q.screen.gt.xs ? true : false;
|
|
|
|
const user = getUsername();
|
|
const uid = getUserId();
|
|
|
|
userStore.userOption.roleOpts.length === 0
|
|
? await userStore.fetchRoleOption()
|
|
: '';
|
|
|
|
if (user === 'admin') return;
|
|
if (uid) {
|
|
const res = await userStore.fetchById(uid);
|
|
if (res && res.gender) {
|
|
userGender.value = res.gender;
|
|
userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout
|
|
view="lHh Lpr lFf"
|
|
class="bg"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:style="`background-size: ${$q.screen.gt.sm ? '100% 100%' : 'cover'}`"
|
|
>
|
|
<drawer-component
|
|
:mini="leftDrawerMini || $q.screen.lt.sm"
|
|
v-model:left-drawer-open="leftDrawerOpen"
|
|
/>
|
|
|
|
<q-page-container>
|
|
<!-- drawer control -->
|
|
<div style="position: relative; z-index: 1000" :hidden="$q.screen.lt.sm">
|
|
<div
|
|
size="36px"
|
|
style="
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
top: 28px;
|
|
left: -22px;
|
|
background-color: var(--surface-1);
|
|
border: 4px solid var(--surface-1);
|
|
"
|
|
class="flex items-center justify-center"
|
|
>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
round
|
|
size="12px"
|
|
aria-label="Menu"
|
|
id="btn-open-drawer"
|
|
style="
|
|
background-color: hsl(var(--negative-bg) / 0.1);
|
|
overflow: hidden;
|
|
"
|
|
@click="leftDrawerMini = !leftDrawerMini"
|
|
>
|
|
<q-icon
|
|
:name="!leftDrawerMini ? 'mdi-backburger' : 'mdi-forwardburger'"
|
|
size="16px"
|
|
style="color: hsl(var(--negative-bg))"
|
|
/>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="app-content"
|
|
class="scroll column"
|
|
style="height: 100vh; flex-wrap: nowrap; padding-bottom: var(--size-4)"
|
|
>
|
|
<!-- header -->
|
|
<div
|
|
class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
|
|
style="position: sticky; top: 0; z-index: 8"
|
|
:style="`
|
|
background: ${$q.screen.lt.md ? ($q.dark.isActive ? '#1c1d21' : '#ecedef') : 'transparent'};
|
|
`"
|
|
>
|
|
<q-btn
|
|
v-if="$q.screen.lt.sm"
|
|
icon="mdi-menu"
|
|
flat
|
|
dense
|
|
rounded
|
|
class="q-mr-md"
|
|
@click="
|
|
() => {
|
|
leftDrawerMini = false;
|
|
leftDrawerOpen = !leftDrawerOpen;
|
|
}
|
|
"
|
|
/>
|
|
<div class="column col">
|
|
<span
|
|
class="title-gradient text-weight-bold"
|
|
:class="{ 'text-h6': $q.screen.gt.xs }"
|
|
:style="{
|
|
filter: `brightness(${$q.dark.isActive ? '2' : '1'})`,
|
|
}"
|
|
>
|
|
{{
|
|
navigatorStore.current?.title
|
|
? $t(navigatorStore.current?.title)
|
|
: $q.screen.gt.xs
|
|
? 'Welcome to Jobs Worker Service'
|
|
: 'Jobs Worker Service'
|
|
}}
|
|
</span>
|
|
<div class="flex items-center" style="gap: var(--size-1)">
|
|
<template
|
|
v-for="(item, i) in navigatorStore.current.path"
|
|
:key="i"
|
|
>
|
|
<span
|
|
class="text-caption cursor-pointer"
|
|
@click="item.handler?.()"
|
|
:class="{
|
|
'text-info': i !== navigatorStore.current.path.length - 1,
|
|
'hover-item': i !== navigatorStore.current.path.length - 1,
|
|
}"
|
|
>
|
|
{{
|
|
item.text
|
|
? item.i18n
|
|
? $t(item.text, {
|
|
...(item.argsi18n || {}),
|
|
})
|
|
: item.text
|
|
: ''
|
|
}}
|
|
</span>
|
|
<q-icon
|
|
:class="{
|
|
'text-info': i !== navigatorStore.current.path.length - 1,
|
|
}"
|
|
name="mdi-chevron-right"
|
|
v-if="i + 1 !== navigatorStore.current.path.length"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row q-gutter-x-md items-center" style="margin-left: auto">
|
|
<!-- notification -->
|
|
<q-btn
|
|
round
|
|
dense
|
|
flat
|
|
class="noti-circle"
|
|
:size="$q.screen.lt.sm ? 'sm' : ''"
|
|
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
|
style="color: var(--surface-1)"
|
|
@click="state.notiOpen = !state.notiOpen"
|
|
>
|
|
<q-icon name="mdi-bell" />
|
|
<q-badge v-if="unread !== 0" rounded floating color="negative">
|
|
{{ unread }}
|
|
</q-badge>
|
|
|
|
<q-menu
|
|
:offset="[0, 10]"
|
|
anchor="bottom middle"
|
|
self="top middle"
|
|
@before-hide="
|
|
() => {
|
|
state.notiOpen = false;
|
|
}
|
|
"
|
|
>
|
|
<div class="q-pa-sm row col-12 items-center">
|
|
<div class="text-subtitle1 text-weight-bold">
|
|
{{ $t('noti.title') }}
|
|
</div>
|
|
<q-space />
|
|
</div>
|
|
<div class="q-px-sm q-pb-md">
|
|
<q-btn
|
|
rounded
|
|
padding="0px 10px"
|
|
class="text-weight-medium text-capitalize"
|
|
v-for="(btn, index) in notiMenu"
|
|
:flat="!btn.active"
|
|
:unelevated="btn.active"
|
|
:key="index"
|
|
:label="$t('noti.' + btn.item)"
|
|
:class="btn.color"
|
|
@click="setActive(btn)"
|
|
/>
|
|
</div>
|
|
<section
|
|
v-if="
|
|
state.filterUnread
|
|
? notificationData.filter((v) => !v.read).length
|
|
: notificationData.length
|
|
"
|
|
class="caption cursor-pointer scroll"
|
|
style="max-height: 30vh; width: 300px"
|
|
>
|
|
<q-item
|
|
v-for="(item, i) in state.filterUnread
|
|
? notificationData.filter((v) => !v.read)
|
|
: notificationData"
|
|
dense
|
|
clickable
|
|
class="items-center q-py-xs q-px-sm"
|
|
v-ripple
|
|
@click="readNoti(item.id)"
|
|
:key="i"
|
|
>
|
|
<div
|
|
class="rounded q-mr-sm"
|
|
:style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
|
|
/>
|
|
<q-avatar
|
|
v-if="$q.screen.gt.xs"
|
|
color="positive"
|
|
style="height: 36px; width: 36px"
|
|
>
|
|
<q-icon color="white" name="mdi-check" />
|
|
</q-avatar>
|
|
|
|
<div class="col column text-caption q-pl-md ellipsis">
|
|
<span class="block ellipsis full-width text-weight-bold">
|
|
{{ item.title }}
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="bottom middle"
|
|
:delay="300"
|
|
:offset="[10, 10]"
|
|
>
|
|
{{ item.title }}
|
|
</q-tooltip>
|
|
</span>
|
|
<span
|
|
class="block ellipsis full-width text-stone"
|
|
:class="{ 'text-weight-medium': !item.read }"
|
|
>
|
|
{{ item.detail }}
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="bottom middle"
|
|
:delay="300"
|
|
:offset="[10, 10]"
|
|
>
|
|
{{ item.detail }}
|
|
</q-tooltip>
|
|
</span>
|
|
</div>
|
|
<span
|
|
align="right"
|
|
class="text-caption text-stone q-pl-md"
|
|
:class="{ 'text-weight-bold': !item.read }"
|
|
>
|
|
{{ moment(item.createdAt).fromNow() }}
|
|
</span>
|
|
</q-item>
|
|
</section>
|
|
<section
|
|
v-else
|
|
class="text-center q-py-sm"
|
|
style="max-height: 30vh; width: 300px"
|
|
>
|
|
<span class="app-text-muted">
|
|
{{ $t('general.noData') }}
|
|
</span>
|
|
</section>
|
|
<div class="col bordered-t">
|
|
<q-btn
|
|
flat
|
|
dense
|
|
color="info"
|
|
class="full-width text-capitalize"
|
|
@click="() => $router.push('/notification')"
|
|
>
|
|
{{ $t('noti.viewAll') }}
|
|
</q-btn>
|
|
</div>
|
|
</q-menu>
|
|
</q-btn>
|
|
|
|
<!-- เปลี่นนภาษา -->
|
|
<q-btn
|
|
id="btn-change-language"
|
|
round
|
|
unelevated
|
|
:size="$q.screen.lt.sm ? 'sm' : ''"
|
|
v-model="$i18n.locale"
|
|
class="no-uppercase"
|
|
>
|
|
<Icon
|
|
v-if="$i18n.locale === Lang.English"
|
|
icon="circle-flags:us"
|
|
:width="$q.screen.lt.sm ? '24px' : '33.6px'"
|
|
/>
|
|
<Icon
|
|
v-else
|
|
icon="circle-flags:th"
|
|
:width="$q.screen.lt.sm ? '24px' : '33.6px'"
|
|
/>
|
|
|
|
<q-menu
|
|
:offset="[0, 10]"
|
|
fit
|
|
anchor="bottom left"
|
|
self="top left"
|
|
auto-close
|
|
>
|
|
<q-list v-for="v in language" :key="v.value">
|
|
<q-item
|
|
:id="`btn-change-language-${v.value}`"
|
|
v-if="$i18n.locale !== v.value"
|
|
clickable
|
|
@click="() => setLang(v.value)"
|
|
>
|
|
<q-item-section>
|
|
<div class="row items-center">
|
|
<Icon
|
|
:icon="`circle-flags:${v.icon}`"
|
|
class="q-mr-md"
|
|
/>
|
|
{{ v.label }}
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
|
|
<!-- User -->
|
|
<ProfileMenu
|
|
id="btn-profile-menu"
|
|
@logout="doLogout"
|
|
@edit-personal-info="console.log('edit')"
|
|
@signature="
|
|
() => {
|
|
canvasModal = true;
|
|
}
|
|
"
|
|
:user-image="
|
|
getRole()?.includes('system') ? '/img-admin.png' : userImage
|
|
"
|
|
:gender="userGender"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-page class="col q-px-lg">
|
|
<router-view />
|
|
</q-page>
|
|
</div>
|
|
</q-page-container>
|
|
|
|
<DialogForm
|
|
width="800px"
|
|
height="550px"
|
|
v-model:modal="canvasModal"
|
|
no-app-box
|
|
:title="$t('menu.profile.addSignature')"
|
|
:close="() => (canvasModal = false)"
|
|
:submit="signatureSubmit"
|
|
:show="signatureFetch"
|
|
>
|
|
<CanvasComponent ref="canvasRef" v-model:modal="canvasModal" />
|
|
<template #footer>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
:label="$t('general.clear')"
|
|
@click="
|
|
() => {
|
|
canvasRef.clearCanvas(), canvasRef.clearUpload();
|
|
}
|
|
"
|
|
style="color: hsl(var(--text-mute))"
|
|
/>
|
|
</template>
|
|
</DialogForm>
|
|
|
|
<NotiDialog v-model="state.notiDialog" v-model:id="state.notiId" />
|
|
|
|
<global-loading :visibility="visible" />
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.bg {
|
|
background-image: url('/bg-l.png');
|
|
background-repeat: no-repeat;
|
|
|
|
&.dark {
|
|
background-image: url('/bg-d.png');
|
|
}
|
|
}
|
|
|
|
.text-stone {
|
|
--_color: var(--stone-5);
|
|
color: var(--_color);
|
|
}
|
|
|
|
.noti-circle {
|
|
--_color: var(--stone-5);
|
|
background-color: var(--_color);
|
|
|
|
&.dark {
|
|
--_color: var(--stone-9);
|
|
}
|
|
}
|
|
|
|
.noti-switch-on {
|
|
--_color: var(--blue-6-hsl);
|
|
background-color: hsla(var(--_color) / 0.1) !important;
|
|
color: hsl(var(--_color));
|
|
}
|
|
|
|
.noti-switch-off {
|
|
--_color: var(--stone-6);
|
|
color: var(--_color);
|
|
}
|
|
|
|
.account-menu-down {
|
|
& ::before {
|
|
color: var(--foreground);
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
border-radius: var(--radius-6);
|
|
background-color: var(--indigo-0);
|
|
text-wrap: nowrap;
|
|
|
|
&.dark {
|
|
background-color: var(--surface-3);
|
|
}
|
|
}
|
|
|
|
.account-cover {
|
|
height: 65px;
|
|
background-color: var(--indigo-0);
|
|
|
|
&.dark {
|
|
background-color: var(--surface-3);
|
|
}
|
|
}
|
|
|
|
.avatar-border {
|
|
margin-top: 24px;
|
|
border: 5px solid var(--surface-1);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.logout-btn {
|
|
color: hsl(var(--negative-bg));
|
|
background-color: hsl(var(--stone-3-hsl));
|
|
|
|
&.dark {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--negative-bg));
|
|
}
|
|
}
|
|
|
|
.title-gradient {
|
|
background: linear-gradient(to right, var(--brand-1), var(--brand-2));
|
|
background-clip: text; /* Standard property */
|
|
-webkit-background-clip: text; /* WebKit fallback */
|
|
-webkit-text-fill-color: transparent; /* WebKit fallback */
|
|
color: transparent; /* Fallback for browsers not supporting text-clip */
|
|
}
|
|
|
|
:deep(main.q-page) {
|
|
min-height: 0 !important;
|
|
}
|
|
|
|
.hover-item:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|