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
|
|
@ -21,13 +21,16 @@ declare module 'vue-i18n' {
|
|||
}
|
||||
/* eslint-enable @typescript-eslint/no-empty-interface */
|
||||
|
||||
export default boot(({ app }) => {
|
||||
const i18n = createI18n({
|
||||
locale: 'tha',
|
||||
legacy: false,
|
||||
messages,
|
||||
});
|
||||
export const i18n = createI18n({
|
||||
locale: 'tha',
|
||||
legacy: false,
|
||||
messages: {
|
||||
'en-US': {},
|
||||
...messages,
|
||||
},
|
||||
});
|
||||
|
||||
export default boot(({ app }) => {
|
||||
// Set i18n instance on app
|
||||
app.use(i18n);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
import { ProductTree, quotationProductTree } from './utils';
|
||||
|
||||
// NOTE: Import stores
|
||||
import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
|
||||
import { dateFormat, calculateAge } from 'src/utils/datetime';
|
||||
import { useEmployeeForm } from 'src/pages/03_customer-management/form';
|
||||
import { useQuotationStore } from 'src/stores/quotations';
|
||||
import useProductServiceStore from 'stores/product-service';
|
||||
|
|
@ -85,7 +85,7 @@ import BadgeComponent from 'src/components/BadgeComponent.vue';
|
|||
import PaymentForm from './PaymentForm.vue';
|
||||
import { api } from 'src/boot/axios';
|
||||
import { RouterLink, useRoute } from 'vue-router';
|
||||
import router from 'src/router';
|
||||
import { initLang, initTheme } from 'src/utils/ui';
|
||||
|
||||
type Node = {
|
||||
[key: string]: any;
|
||||
|
|
@ -737,33 +737,6 @@ function convertEmployeeToTable() {
|
|||
);
|
||||
}
|
||||
|
||||
function changeMode(mode: string) {
|
||||
if (mode === 'light') {
|
||||
localStorage.setItem('currentTheme', 'light');
|
||||
$q.dark.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'dark') {
|
||||
localStorage.setItem('currentTheme', 'dark');
|
||||
$q.dark.set(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === 'baseOnDevice') {
|
||||
localStorage.setItem('currentTheme', 'baseOnDevice');
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
) {
|
||||
$q.dark.set(true);
|
||||
} else {
|
||||
$q.dark.set(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
async function triggerDelete(name: string) {
|
||||
await quotationStore.delAttachment({
|
||||
parentId: quotationFormData.value.id || '',
|
||||
|
|
@ -827,29 +800,10 @@ async function uploadAttachment(file?: File) {
|
|||
const sessionData = ref<Record<string, any>>();
|
||||
|
||||
onMounted(async () => {
|
||||
await configStore.getConfig();
|
||||
// get language
|
||||
const getCurLang = localStorage.getItem('currentLanguage');
|
||||
if (getCurLang === 'English') {
|
||||
locale.value = 'eng';
|
||||
setLocale('en-gb');
|
||||
}
|
||||
if (getCurLang === 'ไทย') {
|
||||
locale.value = 'tha';
|
||||
setLocale('th');
|
||||
}
|
||||
initTheme();
|
||||
initLang();
|
||||
|
||||
// get theme
|
||||
const getCurTheme = localStorage.getItem('currentTheme');
|
||||
if (
|
||||
getCurTheme === 'light' ||
|
||||
getCurTheme === 'dark' ||
|
||||
getCurTheme === 'baseOnDevice'
|
||||
) {
|
||||
changeMode(getCurTheme);
|
||||
} else {
|
||||
changeMode('light');
|
||||
}
|
||||
await configStore.getConfig();
|
||||
|
||||
sessionStorage.setItem(
|
||||
'new-quotation',
|
||||
|
|
@ -874,12 +828,6 @@ onMounted(async () => {
|
|||
sessionData.value = parsed;
|
||||
}
|
||||
|
||||
// fetch option
|
||||
const resultOption = await fetch('/option/option.json');
|
||||
const rawOption = await resultOption.json();
|
||||
if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
|
||||
if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
|
||||
|
||||
await fetchStatus();
|
||||
|
||||
if (quotationFormState.value.mode === 'edit') {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ref } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
|
@ -7,7 +7,23 @@ const useOptionStore = defineStore('optionStore', () => {
|
|||
|
||||
const globalOption = ref();
|
||||
const rawOption = ref();
|
||||
function mapOption(value: string, categoryKey?: string) {
|
||||
|
||||
(async () => {
|
||||
rawOption.value = await fetch('/option/option.json').then((r) => r.json());
|
||||
|
||||
_switchOptionLang();
|
||||
})();
|
||||
|
||||
watch(locale, _switchOptionLang);
|
||||
|
||||
function _switchOptionLang() {
|
||||
if (rawOption.value) {
|
||||
if (locale.value === 'eng') globalOption.value = rawOption.value.eng;
|
||||
if (locale.value === 'tha') globalOption.value = rawOption.value.tha;
|
||||
}
|
||||
}
|
||||
|
||||
function mapOption(value: string, categoryKey?: string): string {
|
||||
if (categoryKey) {
|
||||
const option = globalOption.value[categoryKey].find(
|
||||
(opt: { value: string }) => opt.value === value,
|
||||
|
|
@ -25,17 +41,8 @@ const useOptionStore = defineStore('optionStore', () => {
|
|||
return value;
|
||||
}
|
||||
|
||||
async function fetchOption() {
|
||||
const resultOption = await fetch('/option/option.json');
|
||||
rawOption.value = await resultOption.json();
|
||||
if (locale.value === 'eng') globalOption.value = rawOption.value.eng;
|
||||
if (locale.value === 'tha') globalOption.value = rawOption.value.tha;
|
||||
}
|
||||
|
||||
return {
|
||||
globalOption,
|
||||
|
||||
fetchOption,
|
||||
mapOption,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
72
src/utils/ui.ts
Normal file
72
src/utils/ui.ts
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { Dark } from 'quasar';
|
||||
import { setLocale as setDateTimeLocale } from './datetime';
|
||||
import { i18n } from 'src/boot/i18n';
|
||||
|
||||
export enum Theme {
|
||||
Light = 'light',
|
||||
Dark = 'dark',
|
||||
Auto = 'auto',
|
||||
}
|
||||
|
||||
/**
|
||||
* This is used to detect current theme that set before entering app.
|
||||
*
|
||||
* **Warning:** This must be used after initialize vue and quasar as it use quasar api.
|
||||
*/
|
||||
export function initTheme(): Theme {
|
||||
const current = localStorage.getItem('currentTheme') as Theme | null;
|
||||
if (!current) return setTheme(Theme.Auto);
|
||||
return setTheme(current);
|
||||
}
|
||||
|
||||
/**
|
||||
* This is used to set quasar theme through quasar api.
|
||||
*
|
||||
* **Warning:** Must be called after initialize vue and quasar.
|
||||
*/
|
||||
export function setTheme(theme: Theme): Theme {
|
||||
localStorage.setItem('currentTheme', theme);
|
||||
|
||||
if (theme !== Theme.Auto) {
|
||||
Dark.set(theme === Theme.Dark);
|
||||
}
|
||||
|
||||
if (theme === Theme.Auto) {
|
||||
Dark.set(window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
export enum Lang {
|
||||
English = 'eng',
|
||||
Thai = 'tha',
|
||||
}
|
||||
|
||||
/**
|
||||
* This is used to get remembered language and use it.
|
||||
*
|
||||
* **Warning:** Must be used after initialize vue and vue-i18n
|
||||
*/
|
||||
export function initLang(): Lang {
|
||||
const { locale } = i18n.global;
|
||||
const current = localStorage.getItem('currentLanguage') as Lang | null;
|
||||
if (!current) return setLang(locale.value as Lang);
|
||||
return setLang(current);
|
||||
}
|
||||
|
||||
/**
|
||||
* This is used to set language and also remember the language set.
|
||||
*
|
||||
* **Warning:** Must be used after initialize vue and vue-i18n
|
||||
*/
|
||||
export function setLang(lang: Lang): Lang {
|
||||
const { locale } = i18n.global;
|
||||
locale.value = lang;
|
||||
localStorage.setItem('currentLanguage', lang);
|
||||
|
||||
// TODO: Make date time get locale from i18n instead of telling it to use specific lang.
|
||||
setDateTimeLocale(lang === Lang.English ? 'en-us' : 'th-th');
|
||||
|
||||
return lang;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue