From 7fa87a387e3e360ace7daa11bee6401ff64b35f7 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Wed, 3 Apr 2024 14:24:32 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20=20i18n=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=A0=E0=B8=B2=E0=B8=A9=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue | 44 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 69a8623c..ed442512 100644
--- a/src/layouts/MainLayout.vue
+++ b/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>