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

src/boot/i18n.ts

@@ -21,13 +21,16 @@ declare module 'vue-i18n' {
 }
 /* eslint-enable @typescript-eslint/no-empty-interface */
 
-export default boot(({ app }) => {
+export const i18n = createI18n({
-  const i18n = createI18n({
+  locale: 'tha',
-    locale: 'tha',
+  legacy: false,
-    legacy: false,
+  messages: {
-    messages,
+    'en-US': {},
-  });
+    ...messages,
+  },
+});
 
+export default boot(({ app }) => {
   // Set i18n instance on app
   app.use(i18n);
 });

src/layouts/MainLayout.vue

@@ -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: Lang.Thai, label: 'ไทย', icon: 'th', date: 'th' },
-  { value: 'eng', label: 'English', icon: 'us', date: 'en-gb' },
+  { 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="
+                    @click="() => setLang(v.value)"
-                      locale = v.value;
-                      currentLanguage = v.label;
-                      setLocale(v.date);
-                    "
                   >
                     <q-item-section>
                       <div class="row items-center">

src/layouts/ProfileMenu.vue

@@ -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, getRole, isLoggedIn } from 'src/services/keycloak';
-import { getName, getRealm, 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',
+    value: Theme.Light,
-    isActive: false,
   },
   {
     label: 'dark',
-    value: 'dark',
+    value: Theme.Dark,
-    isActive: false,
   },
   {
     label: 'baseOnDevice',
-    value: 'baseOnDevice',
+    value: Theme.Auto,
-    isActive: false,
   },
 ]);
 
-// inputFile.addEventListener('change', async (e) => {
+const theme = ref<Theme>();
-//   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);
-});
 
 onMounted(async () => {
-  window
+  theme.value = initTheme();
-    .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');
-  }
 
   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
+                      <q-item clickable @click="theme = setTheme(mode.value)">
-                        clickable
-                        @click="
-                          () => {
-                            changeMode(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>

src/pages/05_quotation/QuotationForm.vue

@@ -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();
+  initTheme();
-  // get language
+  initLang();
-  const getCurLang = localStorage.getItem('currentLanguage');
-  if (getCurLang === 'English') {
-    locale.value = 'eng';
-    setLocale('en-gb');
-  }
-  if (getCurLang === 'ไทย') {
-    locale.value = 'tha';
-    setLocale('th');
-  }
 
-  // get theme
+  await configStore.getConfig();
-  const getCurTheme = localStorage.getItem('currentTheme');
-  if (
-    getCurTheme === 'light' ||
-    getCurTheme === 'dark' ||
-    getCurTheme === 'baseOnDevice'
-  ) {
-    changeMode(getCurTheme);
-  } else {
-    changeMode('light');
-  }
 
   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') {

src/stores/options/index.ts

@@ -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,
   };
 });

src/utils/ui.ts

@@ -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;
+}