feat: Add multi-language user name display to the profile menu.

src/layouts/MainLayout.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, reactive } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { getUserId, getUsername, logout, getRole } from 'src/services/keycloak';
+import { getUserId, getUsername, getName, logout, getRole } from 'src/services/keycloak';
 import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 import moment from 'moment';
@@ -39,7 +39,7 @@ const configStore = useConfigStore();
 const { data: notificationData } = storeToRefs(notificationStore);
 
 const { visible } = storeToRefs(loaderStore);
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 const userStore = useUserStore();
 
 const canvasModal = ref(false);
@@ -52,8 +52,14 @@ const unread = computed<number>(
 );
 const userImage = ref<string>();
 const userGender = ref('');
+const userName = ref({ th: '', en: '' });
 const canvasRef = ref();
 
+const displayName = computed(() => {
+  if (!userName.value.th && !userName.value.en) return getName() || 'Guest';
+  return locale.value === 'eng' ? userName.value.en : userName.value.th;
+});
+
 const language: {
   value: Lang;
   label: string;
@@ -161,9 +167,14 @@ onMounted(async () => {
   if (user === 'admin') return;
   if (uid) {
     const res = await userStore.fetchById(uid);
-    if (res && res.gender) {
-      userGender.value = res.gender;
-      userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
+    if (res) {
+      if (res.gender) {
+        userGender.value = res.gender;
+        userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
+      }
+      // เก็บชื่อทั้งสองภาษา
+      userName.value.th = `${res.firstName || ''} ${res.lastName || ''}`.trim();
+      userName.value.en = `${res.firstNameEN || ''} ${res.lastNameEN || ''}`.trim();
     }
   }
 });
@@ -484,6 +495,7 @@ onMounted(async () => {
             <!-- User -->
             <ProfileMenu
               id="btn-profile-menu"
+              :user-name="displayName"
               @logout="doLogout"
               @edit-personal-info="console.log('edit')"
               @signature="

src/layouts/ProfileMenu.vue

@@ -12,6 +12,7 @@ const filterRole = ref<string[]>();
 defineProps<{
   userImage?: string;
   gender?: string;
+  userName?: string;
 }>();
 
 const inputFile = document.createElement('input');
@@ -147,9 +148,9 @@ onMounted(async () => {
             class="text-weight-bold ellipsis"
             style="max-width: 9vw"
           >
-            {{ getName() }}
+            {{ userName || getName() }}
             <q-tooltip>
-              {{ getName() }}
+              {{ userName || getName() }}
             </q-tooltip>
           </span>
           <span
@@ -234,12 +235,12 @@ onMounted(async () => {
             style="margin-top: 58px"
           >
             <span v-if="isLoggedIn()">
-              {{ getName() }}
+              {{ userName || getName() }}
             </span>
             <span v-else>{{ 'Guest' }}</span>
             <q-tooltip>
               <span v-if="isLoggedIn()">
-                {{ getName() }}
+                {{ userName || getName() }}
               </span>
               <span v-else>{{ 'Guest' }}</span>
             </q-tooltip>