fix: layout change lang btn & profile menu
This commit is contained in:
puriphatt
parent
d9913e9903
commit
c4c7fd0b16
3 changed files with 337 additions and 168 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import {
|
||||
|
|
@ -9,15 +9,18 @@ import {
|
|||
getUsername,
|
||||
logout,
|
||||
} from 'src/services/keycloak';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import useLoader from 'stores/loader';
|
||||
import DrawerComponent from 'components/DrawerComponent.vue';
|
||||
import CanvasComponent from 'components/CanvasComponent.vue';
|
||||
import ProfileMenu from 'components/ProfileMenu.vue';
|
||||
import useUserStore from 'src/stores/user';
|
||||
import FormDialog from 'src/components/FormDialog.vue';
|
||||
import { Option } from 'src/stores/user/types';
|
||||
import { dialog } from 'src/stores/utils';
|
||||
import { setLocale } from 'src/utils/datetime';
|
||||
|
||||
interface NotificationButton {
|
||||
item: string;
|
||||
|
|
@ -51,9 +54,10 @@ const language: {
|
|||
value: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
date: string;
|
||||
}[] = [
|
||||
{ value: 'th-th', label: 'ไทย', icon: 'circle-flags:th' },
|
||||
{ value: 'en-US', label: 'English', icon: 'circle-flags:us' },
|
||||
{ value: 'th-th', label: 'ไทย', icon: 'th', date: 'th' },
|
||||
{ value: 'en-US', label: 'English', icon: 'us', date: 'en-gb' },
|
||||
];
|
||||
|
||||
const notiOpen = ref(false);
|
||||
|
|
@ -89,20 +93,6 @@ const notification = ref<Notification[]>([
|
|||
read: true,
|
||||
},
|
||||
]);
|
||||
const options = ref([
|
||||
{
|
||||
icon: 'mdi-lock-outline',
|
||||
label: 'changePassword',
|
||||
value: 'op1',
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-signature-freehand',
|
||||
label: 'signature',
|
||||
value: 'signature',
|
||||
color: 'primary',
|
||||
},
|
||||
]);
|
||||
|
||||
function setActive(button: NotificationButton) {
|
||||
notiMenu.value = notiMenu.value.map((current) => ({
|
||||
|
|
@ -131,17 +121,26 @@ function doLogout() {
|
|||
});
|
||||
}
|
||||
|
||||
function getRoleName(roleOptions: Option[], userRoleValue?: string[]) {
|
||||
if (!userRoleValue || !roleOptions) return;
|
||||
|
||||
const matchingRole: string | undefined = roleOptions.find(
|
||||
(role) => role.value === userRoleValue[0],
|
||||
)?.label;
|
||||
|
||||
return matchingRole ? matchingRole : '';
|
||||
}
|
||||
watch(
|
||||
() => currentLanguage.value,
|
||||
() => {
|
||||
localStorage.setItem('currentLanguage', currentLanguage.value);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
const getCurLang = localStorage.getItem('currentLanguage');
|
||||
console.log(getCurLang);
|
||||
if (getCurLang) currentLanguage.value = getCurLang;
|
||||
if (currentLanguage.value === 'English') {
|
||||
locale.value = 'en-US';
|
||||
setLocale('en-gb');
|
||||
}
|
||||
if (currentLanguage.value === 'ไทย') {
|
||||
locale.value = 'th-th';
|
||||
setLocale('th');
|
||||
}
|
||||
|
||||
const user = getUsername();
|
||||
const uid = getUserId();
|
||||
|
||||
|
|
@ -149,16 +148,6 @@ onMounted(async () => {
|
|||
? await userStore.fetchRoleOption()
|
||||
: '';
|
||||
|
||||
const userRoles = getRole();
|
||||
if (userRoles) {
|
||||
filterRole.value = userRoles.filter(
|
||||
(role) =>
|
||||
role !== 'default-roles-dev' &&
|
||||
role !== 'offline_access' &&
|
||||
role !== 'uma_authorization',
|
||||
);
|
||||
}
|
||||
|
||||
if (user === 'admin') return;
|
||||
if (uid) {
|
||||
const res = await userStore.fetchById(uid);
|
||||
|
|
@ -183,8 +172,8 @@ onMounted(async () => {
|
|||
@click="leftDrawerOpen = !leftDrawerOpen"
|
||||
/>
|
||||
|
||||
<!-- notification -->
|
||||
<div class="q-gutter-x-md row items-end">
|
||||
<div class="row q-gutter-x-md items-end">
|
||||
<!-- notification -->
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
|
|
@ -277,111 +266,63 @@ onMounted(async () => {
|
|||
</q-menu>
|
||||
</q-btn>
|
||||
|
||||
<!-- User -->
|
||||
<q-btn-dropdown
|
||||
rounded
|
||||
dense
|
||||
flat
|
||||
no-caps
|
||||
content-style="border: 1px solid var(--border-color)"
|
||||
:menu-offset="[30, 10]"
|
||||
color="dark"
|
||||
class="q-pa-none account-menu-down dropdown-menu"
|
||||
<!-- เปลี่นนภาษา -->
|
||||
<q-btn
|
||||
round
|
||||
unelevated
|
||||
v-model="currentLanguage"
|
||||
class="no-uppercase"
|
||||
size="md"
|
||||
>
|
||||
<template v-slot:label>
|
||||
<q-item dense class="q-pa-none">
|
||||
<q-item-section
|
||||
avatar
|
||||
class="q-pa-none"
|
||||
style="min-width: 30px"
|
||||
<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-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-avatar class="bg-primary">
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
class="text-left q-pa-none q-px-md"
|
||||
v-if="$q.screen.gt.xs"
|
||||
>
|
||||
<q-item-label class="text-caption column">
|
||||
<span class="text-weight-bold q-pb-xs text-primary">
|
||||
{{ getName() }}
|
||||
</span>
|
||||
<div style="font-size: 11px; color: var(--surface)">
|
||||
{{
|
||||
getRoleName(userStore.userOption.roleOpts, filterRole)
|
||||
}}
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
<Icon :icon="`circle-flags:${v.icon}`" class="q-mr-md" />
|
||||
{{ v.label }}
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
|
||||
<div no-padding class="row justify-center" style="width: 273.797px">
|
||||
<div class="column col-12 items-center">
|
||||
<div
|
||||
class="full-width row justify-center"
|
||||
style="position: relative"
|
||||
>
|
||||
<div
|
||||
class="full-width account-cover"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
></div>
|
||||
<div class="avartar-border">
|
||||
<q-avatar size="72px" class="bg-primary">
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-subtitle2 q-mb-xs text-center"
|
||||
style="margin-top: 58px"
|
||||
>
|
||||
{{ getName() }}
|
||||
</div>
|
||||
<div
|
||||
class="badge q-px-sm q-mb-md text-caption"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ getRoleName(userStore.userOption.roleOpts, filterRole) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
<q-separator />
|
||||
<div class="column justify-center">
|
||||
<q-list dense v-for="op in options" :key="op.label">
|
||||
<q-item
|
||||
clickable
|
||||
@click="
|
||||
() => {
|
||||
if (op.value === 'signature') {
|
||||
canvasModal = true;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
{{ $t(op.label) }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
class="q-ma-sm logout-btn"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
label="ออกจากระบบ"
|
||||
@click="doLogout()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-btn-dropdown>
|
||||
<!-- User -->
|
||||
<ProfileMenu
|
||||
@logout="doLogout"
|
||||
@edit-personal-info="console.log('edit')"
|
||||
@signature="
|
||||
() => {
|
||||
canvasModal = true;
|
||||
}
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- theme -->
|
||||
<q-btn
|
||||
|
|
@ -394,35 +335,6 @@ onMounted(async () => {
|
|||
style="color: var(--gray-6)"
|
||||
@click="$q.dark.toggle()"
|
||||
/>
|
||||
<!-- เปลี่นนภาษา -->
|
||||
<q-btn
|
||||
flat
|
||||
color="grey"
|
||||
v-model="currentLanguage"
|
||||
:label="currentLanguage"
|
||||
class="no-uppercase"
|
||||
>
|
||||
<q-menu fit anchor="bottom left" self="top left" auto-close>
|
||||
<q-list
|
||||
v-for="v in language"
|
||||
:key="v.value"
|
||||
style="min-width: 50px"
|
||||
>
|
||||
<q-item
|
||||
v-if="!v.label.includes(currentLanguage)"
|
||||
clickable
|
||||
@click="
|
||||
locale = v.value;
|
||||
currentLanguage = v.label;
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
{{ v.label }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-header>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue