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/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: '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">