refactor: global shared state and function (#79)
* refactor: expose i18n instance * feat: add global app utility function * refactor: use global utility function * refactor: avoid undefined when use outside vue refactor: avoid undefined when use outside vue * refactor: remove dup code and use util * refactor: auto fetch option when use store
This commit is contained in:
Methapon Metanipat
GitHub
parent
aa79a4ef7d
commit
b0136bba4d
6 changed files with 136 additions and 216 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { getUserId, getUsername, logout, getRole } from 'src/services/keycloak';
|
||||
|
|
@ -11,12 +11,11 @@ import ProfileMenu from './ProfileMenu.vue';
|
|||
import DrawerComponent from './DrawerComponent.vue';
|
||||
import useUserStore from 'stores/user';
|
||||
import { CanvasComponent, DialogForm } from 'components/index';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { dialog } from 'stores/utils';
|
||||
import { setLocale } from 'src/utils/datetime';
|
||||
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';
|
||||
|
||||
const useMyBranch = useMyBranchStore();
|
||||
const { fetchListMyBranch } = useMyBranch;
|
||||
|
|
@ -38,14 +37,12 @@ interface Notification {
|
|||
const $q = useQuasar();
|
||||
const loaderStore = useLoader();
|
||||
const navigatorStore = useNavigator();
|
||||
const optionStore = useOptionStore();
|
||||
const configStore = useConfigStore();
|
||||
|
||||
const { visible } = storeToRefs(loaderStore);
|
||||
const { t, locale } = useI18n({ useScope: 'global' });
|
||||
const { t } = useI18n({ useScope: 'global' });
|
||||
const userStore = useUserStore();
|
||||
|
||||
const rawOption = ref();
|
||||
const canvasModal = ref(false);
|
||||
|
||||
const leftDrawerOpen = ref<boolean>(false);
|
||||
|
|
@ -57,15 +54,15 @@ const unread = ref<number>(1);
|
|||
const userImage = ref<string>();
|
||||
const userGender = ref('');
|
||||
const canvasRef = ref();
|
||||
const currentLanguage = ref<string>('ไทย');
|
||||
|
||||
const language: {
|
||||
value: string;
|
||||
value: Lang;
|
||||
label: string;
|
||||
icon: string;
|
||||
date: string;
|
||||
}[] = [
|
||||
{ value: 'tha', label: 'ไทย', icon: 'th', date: 'th' },
|
||||
{ value: 'eng', label: 'English', icon: 'us', date: 'en-gb' },
|
||||
{ value: Lang.Thai, label: 'ไทย', icon: 'th', date: 'th' },
|
||||
{ value: Lang.English, label: 'English', icon: 'us', date: 'en-gb' },
|
||||
];
|
||||
|
||||
const notiOpen = ref(false);
|
||||
|
|
@ -126,41 +123,15 @@ function doLogout() {
|
|||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => currentLanguage.value,
|
||||
() => {
|
||||
localStorage.setItem('currentLanguage', currentLanguage.value);
|
||||
if (rawOption.value) {
|
||||
if (locale.value === 'eng')
|
||||
optionStore.globalOption = rawOption.value.eng;
|
||||
if (locale.value === 'tha')
|
||||
optionStore.globalOption = rawOption.value.tha;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
initTheme();
|
||||
initLang();
|
||||
|
||||
await configStore.getConfig();
|
||||
|
||||
await fetchListMyBranch(getUserId() ?? '');
|
||||
leftDrawerOpen.value = $q.screen.gt.xs ? true : false;
|
||||
|
||||
const getCurLang = localStorage.getItem('currentLanguage');
|
||||
if (getCurLang) currentLanguage.value = getCurLang;
|
||||
if (currentLanguage.value === 'English') {
|
||||
locale.value = 'eng';
|
||||
setLocale('en-gb');
|
||||
}
|
||||
if (currentLanguage.value === 'ไทย') {
|
||||
locale.value = 'tha';
|
||||
setLocale('th');
|
||||
}
|
||||
|
||||
const resultOption = await fetch('/option/option.json');
|
||||
rawOption.value = await resultOption.json();
|
||||
if (locale.value === 'eng') optionStore.globalOption = rawOption.value.eng;
|
||||
if (locale.value === 'tha') optionStore.globalOption = rawOption.value.tha;
|
||||
|
||||
const user = getUsername();
|
||||
const uid = getUserId();
|
||||
|
||||
|
|
@ -405,11 +376,11 @@ onMounted(async () => {
|
|||
round
|
||||
unelevated
|
||||
:size="$q.screen.lt.sm ? 'sm' : ''"
|
||||
v-model="currentLanguage"
|
||||
v-model="$i18n.locale"
|
||||
class="no-uppercase"
|
||||
>
|
||||
<Icon
|
||||
v-if="currentLanguage === 'English'"
|
||||
v-if="$i18n.locale === Lang.English"
|
||||
icon="circle-flags:us"
|
||||
:width="$q.screen.lt.sm ? '24px' : '33.6px'"
|
||||
/>
|
||||
|
|
@ -429,13 +400,9 @@ onMounted(async () => {
|
|||
<q-list v-for="v in language" :key="v.value">
|
||||
<q-item
|
||||
:id="`btn-change-language-${v.value}`"
|
||||
v-if="!v.label.includes(currentLanguage)"
|
||||
v-if="$i18n.locale !== v.value"
|
||||
clickable
|
||||
@click="
|
||||
locale = v.value;
|
||||
currentLanguage = v.label;
|
||||
setLocale(v.date);
|
||||
"
|
||||
@click="() => setLang(v.value)"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="row items-center">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
// import useOption from 'stores/option';
|
||||
|
||||
// const optionStore = useOption();
|
||||
import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
|
||||
import { getName, getRole, isLoggedIn } from 'src/services/keycloak';
|
||||
import { initTheme, setTheme, Theme } from 'src/utils/ui';
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
|
|
@ -18,9 +17,7 @@ defineProps<{
|
|||
const inputFile = document.createElement('input');
|
||||
inputFile.type = 'file';
|
||||
inputFile.accept = 'image/*';
|
||||
// const profileFile = ref<File | undefined>(undefined);
|
||||
|
||||
const currentTheme = ref();
|
||||
const options = ref([
|
||||
{
|
||||
icon: 'mdi-account',
|
||||
|
|
@ -45,96 +42,22 @@ const options = ref([
|
|||
const themeMode = ref([
|
||||
{
|
||||
label: 'light',
|
||||
value: 'light',
|
||||
isActive: false,
|
||||
value: Theme.Light,
|
||||
},
|
||||
{
|
||||
label: 'dark',
|
||||
value: 'dark',
|
||||
isActive: false,
|
||||
value: Theme.Dark,
|
||||
},
|
||||
{
|
||||
label: 'baseOnDevice',
|
||||
value: 'baseOnDevice',
|
||||
isActive: false,
|
||||
value: Theme.Auto,
|
||||
},
|
||||
]);
|
||||
|
||||
// inputFile.addEventListener('change', async (e) => {
|
||||
// profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
|
||||
// if (profileFile.value) {
|
||||
// await storageStore.uploadProfile(profileFile.value);
|
||||
// }
|
||||
// userImage.value = (await storageStore.getProfile()) ?? '';
|
||||
// });
|
||||
|
||||
function changeMode(mode: string) {
|
||||
if (mode === 'light') {
|
||||
localStorage.setItem('currentTheme', 'light');
|
||||
themeMode.value[0].isActive = true;
|
||||
themeMode.value[1].isActive = false;
|
||||
themeMode.value[2].isActive = false;
|
||||
currentTheme.value = 'light';
|
||||
$q.dark.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'dark') {
|
||||
localStorage.setItem('currentTheme', 'dark');
|
||||
themeMode.value[0].isActive = false;
|
||||
themeMode.value[1].isActive = true;
|
||||
themeMode.value[2].isActive = false;
|
||||
currentTheme.value = 'dark';
|
||||
$q.dark.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'baseOnDevice') {
|
||||
localStorage.setItem('currentTheme', 'baseOnDevice');
|
||||
themeMode.value[0].isActive = false;
|
||||
themeMode.value[1].isActive = false;
|
||||
themeMode.value[2].isActive = true;
|
||||
currentTheme.value = 'baseOnDevice';
|
||||
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
) {
|
||||
$q.dark.set(true);
|
||||
} else {
|
||||
$q.dark.set(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function themeChange() {
|
||||
if (themeMode.value[2].isActive) changeMode('baseOnDevice');
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.removeEventListener('change', themeChange);
|
||||
});
|
||||
const theme = ref<Theme>();
|
||||
|
||||
onMounted(async () => {
|
||||
window
|
||||
.matchMedia('(prefers-color-scheme: dark)')
|
||||
.addEventListener('change', themeChange);
|
||||
// if (isLoggedIn()) {
|
||||
// userImage.value = (await storageStore.getProfile()) ?? '';
|
||||
// }
|
||||
currentTheme.value = localStorage.getItem('currentTheme');
|
||||
if (
|
||||
currentTheme.value === 'light' ||
|
||||
currentTheme.value === 'dark' ||
|
||||
currentTheme.value === 'baseOnDevice'
|
||||
) {
|
||||
changeMode(currentTheme.value);
|
||||
} else {
|
||||
changeMode('light');
|
||||
}
|
||||
theme.value = initTheme();
|
||||
|
||||
const userRoles = getRole();
|
||||
if (userRoles) {
|
||||
|
|
@ -373,7 +296,11 @@ onMounted(async () => {
|
|||
{{ $t(op.label) }}
|
||||
</span>
|
||||
<span class="app-text-muted-2">
|
||||
{{ $t(`general.${currentTheme}`) }}
|
||||
{{
|
||||
$t(
|
||||
`general.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
|
||||
)
|
||||
}}
|
||||
<q-icon name="mdi-chevron-right" />
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -388,20 +315,16 @@ onMounted(async () => {
|
|||
style="width: 160px"
|
||||
>
|
||||
<div v-for="(mode, index) in themeMode" :key="index">
|
||||
<q-item
|
||||
clickable
|
||||
@click="
|
||||
() => {
|
||||
changeMode(mode.value);
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item clickable @click="theme = setTheme(mode.value)">
|
||||
<q-item-section>
|
||||
<div class="row justify-between">
|
||||
<span>
|
||||
{{ $t(`general.${mode.label}`) }}
|
||||
</span>
|
||||
<q-icon v-if="mode.isActive" name="mdi-check" />
|
||||
<q-icon
|
||||
v-if="mode.value === theme"
|
||||
name="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue