fix: layout and utilsStore
This commit is contained in:
puriphatt
parent
7f3c22c79b
commit
bcd81d0f41
4 changed files with 7788 additions and 7723 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -87,11 +87,10 @@ function navigateTo(label: string, destination: string) {
|
|||
<template>
|
||||
<!-- Drawer -->
|
||||
<q-drawer
|
||||
:breakpoint="500"
|
||||
v-model="leftDrawerOpen"
|
||||
behavior="mobile"
|
||||
side="left"
|
||||
show-if-above
|
||||
:breakpoint="599"
|
||||
:width="$q.screen.lt.md ? 200 : 300"
|
||||
>
|
||||
<div class="main-bar">
|
||||
<div
|
||||
|
|
@ -155,4 +154,8 @@ function navigateTo(label: string, destination: string) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-drawer) {
|
||||
z-index: 5 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,7 @@
|
|||
import { ref, onMounted, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import {
|
||||
getName,
|
||||
getRole,
|
||||
getUserId,
|
||||
getUsername,
|
||||
logout,
|
||||
} from 'src/services/keycloak';
|
||||
import { getUserId, getUsername, logout } from 'src/services/keycloak';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
|
@ -19,9 +13,9 @@ import ProfileMenu from 'components/ProfileMenu.vue';
|
|||
import useUserStore from 'src/stores/user';
|
||||
import FormDialog from 'components/FormDialog.vue';
|
||||
import useOptionStore from 'src/stores/options';
|
||||
import { Option } from 'src/stores/user/types';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
import { setLocale } from 'src/utils/datetime';
|
||||
import useUtilsStore from 'src/stores/utils';
|
||||
|
||||
interface NotificationButton {
|
||||
item: string;
|
||||
|
|
@ -38,6 +32,7 @@ interface Notification {
|
|||
|
||||
const $q = useQuasar();
|
||||
const loaderStore = useLoader();
|
||||
const utilsStore = useUtilsStore();
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
const { visible } = storeToRefs(loaderStore);
|
||||
|
|
@ -46,10 +41,10 @@ const userStore = useUserStore();
|
|||
|
||||
const rawOption = ref();
|
||||
const canvasModal = ref(false);
|
||||
const leftDrawerOpen = ref(false);
|
||||
const leftDrawerOpen = ref(true);
|
||||
const filterUnread = ref(false);
|
||||
const unread = ref<number>(1);
|
||||
const filterRole = ref<string[]>();
|
||||
// const filterRole = ref<string[]>();
|
||||
const userImage = ref<string>();
|
||||
const canvasRef = ref();
|
||||
const currentLanguage = ref<string>('ไทย');
|
||||
|
|
@ -174,102 +169,153 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<q-layout view="lHh Lpr lFf">
|
||||
<q-header style="background-color: var(--background)">
|
||||
<div class="row items-center justify-between q-py-md q-px-lg">
|
||||
<q-btn
|
||||
round
|
||||
unelevated
|
||||
id="drawer-toggler"
|
||||
:icon="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
|
||||
:class="{ bordered: $q.dark.isActive }"
|
||||
class="surface-2"
|
||||
style="color: var(--gray-6)"
|
||||
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||
/>
|
||||
<drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
|
||||
|
||||
<div class="row q-gutter-x-md items-center">
|
||||
<!-- notification -->
|
||||
<q-page-container class="surface-1 q-pa-md">
|
||||
<!-- drawer control -->
|
||||
<div style="position: relative; z-index: 10">
|
||||
<q-avatar
|
||||
size="36px"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -18px;
|
||||
background-color: var(--surface-1);
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
class="noti-circle"
|
||||
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
||||
style="color: var(--surface-1)"
|
||||
@click="notiOpen = !notiOpen"
|
||||
dense
|
||||
round
|
||||
size="12px"
|
||||
aria-label="Menu"
|
||||
id="btn-open-drawer"
|
||||
style="
|
||||
background-color: hsl(var(--negative-bg) / 0.1);
|
||||
overflow: hidden;
|
||||
"
|
||||
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||
>
|
||||
<q-icon name="mdi-bell" size="20px" />
|
||||
<q-badge v-if="unread !== 0" rounded floating color="negative">
|
||||
{{ unread }}
|
||||
</q-badge>
|
||||
<q-icon
|
||||
:name="leftDrawerOpen ? 'mdi-backburger' : 'mdi-forwardburger'"
|
||||
size="16px"
|
||||
style="color: hsl(var(--negative-bg))"
|
||||
/>
|
||||
</q-btn>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<q-menu
|
||||
:offset="[0, 10]"
|
||||
anchor="bottom middle"
|
||||
self="top middle"
|
||||
style="width: 300px"
|
||||
@before-hide="notiOpen = false"
|
||||
<div
|
||||
class="surface-3 bordered rounded q-px-lg q-pb-lg scroll column"
|
||||
style="height: calc(100vh - 32px); flex-wrap: nowrap"
|
||||
>
|
||||
<!-- header -->
|
||||
<div
|
||||
class="row items-center justify-between q-pb-md surface-3 q-pt-lg"
|
||||
style="position: sticky; top: 0; z-index: 8"
|
||||
>
|
||||
<div class="column">
|
||||
<span class="title-gradient text-h6 text-weight-bold">
|
||||
{{
|
||||
utilsStore.currentTitle?.title
|
||||
? $t(utilsStore.currentTitle?.title)
|
||||
: 'Welcome to Jobs Worker Service'
|
||||
}}
|
||||
</span>
|
||||
<span class="text-caption">
|
||||
{{
|
||||
utilsStore.currentTitle?.caption
|
||||
? $t(utilsStore.currentTitle?.caption)
|
||||
: ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="row q-gutter-x-md items-center">
|
||||
<!-- notification -->
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
flat
|
||||
class="noti-circle"
|
||||
:class="{ bordered: $q.dark.isActive, dark: $q.dark.isActive }"
|
||||
style="color: var(--surface-1)"
|
||||
@click="notiOpen = !notiOpen"
|
||||
>
|
||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||
<div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
|
||||
<q-space />
|
||||
</div>
|
||||
<div class="q-px-md q-pb-md q-gutter-x-md">
|
||||
<q-btn
|
||||
rounded
|
||||
padding="0px 10px"
|
||||
class="text-weight-medium"
|
||||
v-for="(btn, index) in notiMenu"
|
||||
:flat="!btn.active"
|
||||
:unelevated="btn.active"
|
||||
:key="index"
|
||||
:label="btn.item"
|
||||
:class="btn.color"
|
||||
@click="setActive(btn)"
|
||||
/>
|
||||
</div>
|
||||
<q-infinite-scroll :offset="250">
|
||||
<div class="caption cursor-pointer">
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
v-ripple
|
||||
v-for="item in !filterUnread
|
||||
? notification
|
||||
: notification.filter((v) => !v.read)"
|
||||
:key="item.id"
|
||||
>
|
||||
<q-avatar
|
||||
color="positive"
|
||||
style="height: 30px; width: 30px"
|
||||
>
|
||||
<q-icon color="white" name="mdi-check" />
|
||||
</q-avatar>
|
||||
<q-icon name="mdi-bell" size="20px" />
|
||||
<q-badge v-if="unread !== 0" rounded floating color="negative">
|
||||
{{ unread }}
|
||||
</q-badge>
|
||||
|
||||
<div class="col-6 column text-caption q-pl-md ellipsis">
|
||||
<span class="block ellipsis full-width text-weight-bold">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span class="block ellipsis full-width text-stone">
|
||||
{{ item.content }}
|
||||
</span>
|
||||
</div>
|
||||
<span align="right" class="col text-caption text-stone">
|
||||
<!-- {{ moment(item.createdAt).fromNow() }} -->
|
||||
5 s
|
||||
</span>
|
||||
<q-tooltip
|
||||
anchor="top middle"
|
||||
self="bottom middle"
|
||||
:delay="1000"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ item.content }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
<q-menu
|
||||
:offset="[0, 10]"
|
||||
anchor="bottom middle"
|
||||
self="top middle"
|
||||
style="width: 300px"
|
||||
@before-hide="notiOpen = false"
|
||||
>
|
||||
<div class="q-px-md q-py-sm row col-12 items-center">
|
||||
<div class="text-subtitle1 text-weight-bold">แจ้งเตือน</div>
|
||||
<q-space />
|
||||
</div>
|
||||
<!-- <template v-slot:loading>
|
||||
<div class="q-px-md q-pb-md q-gutter-x-md">
|
||||
<q-btn
|
||||
rounded
|
||||
padding="0px 10px"
|
||||
class="text-weight-medium"
|
||||
v-for="(btn, index) in notiMenu"
|
||||
:flat="!btn.active"
|
||||
:unelevated="btn.active"
|
||||
:key="index"
|
||||
:label="btn.item"
|
||||
:class="btn.color"
|
||||
@click="setActive(btn)"
|
||||
/>
|
||||
</div>
|
||||
<q-infinite-scroll :offset="250">
|
||||
<div class="caption cursor-pointer">
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
v-ripple
|
||||
v-for="item in !filterUnread
|
||||
? notification
|
||||
: notification.filter((v) => !v.read)"
|
||||
:key="item.id"
|
||||
>
|
||||
<q-avatar
|
||||
color="positive"
|
||||
style="height: 30px; width: 30px"
|
||||
>
|
||||
<q-icon color="white" name="mdi-check" />
|
||||
</q-avatar>
|
||||
|
||||
<div class="col-6 column text-caption q-pl-md ellipsis">
|
||||
<span
|
||||
class="block ellipsis full-width text-weight-bold"
|
||||
>
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span class="block ellipsis full-width text-stone">
|
||||
{{ item.content }}
|
||||
</span>
|
||||
</div>
|
||||
<span align="right" class="col text-caption text-stone">
|
||||
<!-- {{ moment(item.createdAt).fromNow() }} -->
|
||||
5 s
|
||||
</span>
|
||||
<q-tooltip
|
||||
anchor="top middle"
|
||||
self="bottom middle"
|
||||
:delay="1000"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ item.content }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
</div>
|
||||
<!-- <template v-slot:loading>
|
||||
<div
|
||||
class="text-center q-my-md"
|
||||
v-if="noti && noti?.result.length < noti?.total"
|
||||
|
|
@ -277,91 +323,79 @@ onMounted(async () => {
|
|||
<q-spinner-dots color="primary" size="40px" />
|
||||
</div>
|
||||
</template> -->
|
||||
</q-infinite-scroll>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-infinite-scroll>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
|
||||
<!-- เปลี่นนภาษา -->
|
||||
<q-btn
|
||||
round
|
||||
unelevated
|
||||
v-model="currentLanguage"
|
||||
class="no-uppercase"
|
||||
size="md"
|
||||
>
|
||||
<Icon
|
||||
v-if="currentLanguage === 'English'"
|
||||
icon="circle-flags:us"
|
||||
style="width: 36px; height: 35px"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
icon="circle-flags:th"
|
||||
style="width: 36px; height: 35px"
|
||||
/>
|
||||
|
||||
<q-menu
|
||||
:offset="[0, 10]"
|
||||
fit
|
||||
anchor="bottom left"
|
||||
self="top left"
|
||||
auto-close
|
||||
<!-- เปลี่นนภาษา -->
|
||||
<q-btn
|
||||
round
|
||||
unelevated
|
||||
v-model="currentLanguage"
|
||||
class="no-uppercase"
|
||||
size="md"
|
||||
>
|
||||
<q-list v-for="v in language" :key="v.value">
|
||||
<q-item
|
||||
v-if="!v.label.includes(currentLanguage)"
|
||||
clickable
|
||||
@click="
|
||||
locale = v.value;
|
||||
currentLanguage = v.label;
|
||||
setLocale(v.date);
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<Icon
|
||||
v-if="currentLanguage === 'English'"
|
||||
icon="circle-flags:us"
|
||||
style="width: 36px; height: 35px"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
icon="circle-flags:th"
|
||||
style="width: 36px; height: 35px"
|
||||
/>
|
||||
|
||||
<!-- User -->
|
||||
<ProfileMenu
|
||||
@logout="doLogout"
|
||||
@edit-personal-info="console.log('edit')"
|
||||
@signature="
|
||||
() => {
|
||||
canvasModal = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
<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
|
||||
v-if="!v.label.includes(currentLanguage)"
|
||||
clickable
|
||||
@click="
|
||||
locale = v.value;
|
||||
currentLanguage = v.label;
|
||||
setLocale(v.date);
|
||||
"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- theme -->
|
||||
<!-- <q-btn
|
||||
round
|
||||
unelevated
|
||||
id="drawer-toggler"
|
||||
icon="mdi-switch"
|
||||
:class="{ bordered: $q.dark.isActive }"
|
||||
class="surface-2"
|
||||
style="color: var(--gray-6)"
|
||||
@click="$q.dark.toggle()"
|
||||
/> -->
|
||||
<!-- User -->
|
||||
<ProfileMenu
|
||||
@logout="doLogout"
|
||||
@edit-personal-info="console.log('edit')"
|
||||
@signature="
|
||||
() => {
|
||||
canvasModal = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-page class="col">
|
||||
<router-view />
|
||||
</q-page>
|
||||
</div>
|
||||
</q-header>
|
||||
|
||||
<q-page-container style="background-color: transparent">
|
||||
<q-page class="q-px-lg q-pb-lg">
|
||||
<router-view />
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
||||
<drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
|
||||
|
||||
<FormDialog
|
||||
width="800px"
|
||||
height="550px"
|
||||
|
|
@ -458,4 +492,16 @@ onMounted(async () => {
|
|||
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;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { Dialog } from 'quasar';
|
||||
import GlobalDialog from 'components/GlobalDialog.vue';
|
||||
import { ComposerTranslation, useI18n } from 'vue-i18n';
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export function dialog(opts: {
|
||||
title: string;
|
||||
|
|
@ -91,3 +93,16 @@ export function formatNumberDecimal(num: number, point: number): string {
|
|||
maximumFractionDigits: point,
|
||||
});
|
||||
}
|
||||
|
||||
const useUtilsStore = defineStore('utilsStore', () => {
|
||||
const currentTitle = ref<{ title: string; caption: string }>({
|
||||
title: '',
|
||||
caption: '',
|
||||
});
|
||||
|
||||
return {
|
||||
currentTitle,
|
||||
};
|
||||
});
|
||||
|
||||
export default useUtilsStore;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue