feat: เพิ่ม i18n เปลี่ยนภาษา

src/layouts/MainLayout.vue

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { getName, getRole, logout } from 'src/services/keycloak';
+import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
@@ -24,10 +25,21 @@ const $q = useQuasar();
 const loaderStore = useLoader();
 
 const { visible } = storeToRefs(loaderStore);
+const { locale } = useI18n({ useScope: 'global' });
 
 const leftDrawerOpen = ref($q.screen.gt.sm);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
+
+const currentLanguage = ref<string>('ไทย');
+const language: {
+  value: string;
+  label: string;
+}[] = [
+  { value: 'th-th', label: 'ไทย' },
+  { value: 'en-US', label: 'English' },
+];
+
 const notiOpen = ref(false);
 const notiMenu = ref<NotificationButton[]>([
   {
@@ -255,12 +267,42 @@ function doLogout() {
             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;
+                    console.log(locale);
+                  "
+                >
+                  <q-item-section>
+                    {{ v.label }}
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
         </div>
       </div>
     </q-header>
 
     <q-page-container style="background-color: transparent">
-      <q-page class="q-px-lg q-pa-md">
+      <q-page class="q-px-lg">
         <router-view />
       </q-page>
     </q-page-container>