fix: layout change lang btn & profile menu

src/components/ProfileMenu.vue

@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+// import useOption from 'src/stores/option';
+
+// const optionStore = useOption();
+import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
+
+const userImage = ref<string>('');
+const filterRole = ref<string[]>();
+const inputFile = document.createElement('input');
+inputFile.type = 'file';
+inputFile.accept = 'image/*';
+// const profileFile = ref<File | undefined>(undefined);
+const options = ref([
+  {
+    icon: 'mdi-account',
+    label: 'editPersonalInfo',
+    value: 'op1',
+    color: 'grey',
+  },
+  {
+    icon: 'mdi-signature-freehand',
+    label: 'signature',
+    value: 'op2',
+    color: 'grey',
+  },
+]);
+
+// inputFile.addEventListener('change', async (e) => {
+//   profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
+//   if (profileFile.value) {
+//     await storageStore.uploadProfile(profileFile.value);
+//   }
+//   userImage.value = (await storageStore.getProfile()) ?? '';
+// });
+
+onMounted(async () => {
+  //   if (isLoggedIn()) {
+  //     userImage.value = (await storageStore.getProfile()) ?? '';
+  //   }
+
+  const userRoles = getRole();
+  if (userRoles) {
+    filterRole.value = userRoles
+      .filter(
+        (role) =>
+          role !== 'default-roles-' + getRealm() &&
+          role !== 'offline_access' &&
+          role !== 'uma_authorization',
+      )
+      .map((role) =>
+        role.replace(/_/g, ' ').replace(/^./, (match) => match.toUpperCase()),
+      );
+  }
+});
+</script>
+<template>
+  <div>
+    <q-btn-dropdown
+      rounded
+      dense
+      flat
+      no-caps
+      content-style="border: 1px solid var(--border-color)"
+      :menu-offset="[0, 10]"
+      color="dark"
+      class="q-pa-none account-menu-down dropdown-menu"
+    >
+      <template v-slot:label>
+        <q-item dense class="q-pa-none">
+          <q-item-section avatar class="q-pa-none" style="min-width: 30px">
+            <q-avatar class="surface-1 bordered">
+              <img :src="userImage" v-if="userImage" />
+              <q-icon name="mdi-account" v-else size="sm" />
+            </q-avatar>
+          </q-item-section>
+          <q-item-section
+            v-if="$q.screen.gt.xs"
+            class="text-left q-pa-none q-px-md"
+          >
+            <q-item-label class="text-caption column">
+              <span
+                v-if="isLoggedIn()"
+                class="text-weight-bold q-pb-xs ellipsis"
+                style="max-width: 9vw"
+              >
+                {{ getName() }}
+                <q-tooltip>
+                  {{ getName() }}
+                </q-tooltip>
+              </span>
+              <span
+                v-else
+                class="text-weight-bold q-pb-xs ellipsis"
+                style="max-width: 9vw"
+              >
+                {{ 'Guest' }}
+                <q-tooltip>
+                  {{ 'Guest' }}
+                </q-tooltip>
+              </span>
+
+              <div style="font-size: 11px; color: var(--surface)">
+                {{ filterRole?.join(' | ') }}
+              </div>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+
+      <div no-padding class="row justify-center" style="width: 273.797px">
+        <div class="column col-12 items-center">
+          <div class="full-width row justify-center" style="position: relative">
+            <div
+              class="full-width account-cover"
+              :class="{ dark: $q.dark.isActive }"
+            ></div>
+            <div class="avartar-border">
+              <q-avatar
+                id="changeAvatar"
+                size="72px"
+                class="surface-1 bordered"
+                :class="{ 'hover-profile': isLoggedIn() }"
+                @click="
+                  () => {
+                    isLoggedIn() ? inputFile.click() : '';
+                  }
+                "
+              >
+                <img :src="userImage" v-if="userImage" />
+                <q-icon name="mdi-account" v-else />
+              </q-avatar>
+            </div>
+          </div>
+
+          <div
+            class="text-subtitle2 q-mb-xs text-center"
+            style="margin-top: 58px"
+          >
+            <span v-if="isLoggedIn()">
+              {{ getName() }}
+            </span>
+            <span v-else>{{ 'Guest' }}</span>
+          </div>
+          <div
+            class="badge q-px-sm q-mb-md text-caption"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            {{ filterRole?.join(' | ') }}
+          </div>
+        </div>
+
+        <div class="column col-12">
+          <q-separator />
+          <div class="column justify-center q-mb-md">
+            <div v-for="op in options" :key="op.label">
+              <q-list :dense="true">
+                <q-separator v-if="op.label === 'option'" />
+                <q-item
+                  clickable
+                  :id="`btn-${op.label}`"
+                  @click="$emit(op.label)"
+                >
+                  <q-item-section avatar>
+                    <q-icon :name="op.icon" :color="op.color" size="20px" />
+                  </q-item-section>
+                  <q-item-section class="q-py-sm">
+                    {{ $t(op.label) }}
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
+          </div>
+
+          <q-btn
+            v-if="isLoggedIn()"
+            no-caps
+            dense
+            color="negative"
+            unelevated
+            class="q-ma-sm app-text-negative"
+            :class="{ dark: $q.dark.isActive }"
+            :label="$t('logout')"
+            @click="$emit('logout')"
+            id="btn-logout"
+            v-close-popup
+          />
+          <q-btn
+            v-else
+            no-caps
+            dense
+            color="primary"
+            unelevated
+            class="q-ma-sm app-text-negative"
+            :label="$t('login')"
+            @click="$emit('login')"
+            id="btn-login"
+            v-close-popup
+          />
+        </div>
+      </div>
+    </q-btn-dropdown>
+  </div>
+</template>
+<style scoped>
+.account-menu-down {
+  & ::before {
+    color: var(--foreground);
+  }
+}
+
+.avartar-border {
+  margin-top: 24px;
+  border: 5px solid var(--surface-1);
+  border-radius: 50%;
+  position: absolute;
+}
+
+.account-cover {
+  height: 65px;
+  background-color: var(--indigo-0);
+
+  &.dark {
+    background-color: var(--surface-3);
+  }
+}
+
+.badge {
+  display: inline-block;
+  border-radius: var(--radius-6);
+  background-color: var(--indigo-0);
+  text-wrap: nowrap;
+
+  &.dark {
+    background-color: var(--surface-3);
+  }
+}
+
+.logout-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsl(var(--stone-3-hsl));
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
+
+.hover-profile:hover {
+  opacity: 0.7;
+  cursor: pointer;
+}
+</style>

src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import {
@@ -9,15 +9,18 @@ import {
   getUsername,
   logout,
 } from 'src/services/keycloak';
+import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
 import CanvasComponent from 'components/CanvasComponent.vue';
+import ProfileMenu from 'components/ProfileMenu.vue';
 import useUserStore from 'src/stores/user';
 import FormDialog from 'src/components/FormDialog.vue';
 import { Option } from 'src/stores/user/types';
 import { dialog } from 'src/stores/utils';
+import { setLocale } from 'src/utils/datetime';
 
 interface NotificationButton {
   item: string;
@@ -51,9 +54,10 @@ const language: {
   value: string;
   label: string;
   icon: string;
+  date: string;
 }[] = [
-  { value: 'th-th', label: 'ไทย', icon: 'circle-flags:th' },
+  { value: 'th-th', label: 'ไทย', icon: 'th', date: 'th' },
-  { value: 'en-US', label: 'English', icon: 'circle-flags:us' },
+  { value: 'en-US', label: 'English', icon: 'us', date: 'en-gb' },
 ];
 
 const notiOpen = ref(false);
@@ -89,20 +93,6 @@ const notification = ref<Notification[]>([
     read: true,
   },
 ]);
-const options = ref([
-  {
-    icon: 'mdi-lock-outline',
-    label: 'changePassword',
-    value: 'op1',
-    color: 'primary',
-  },
-  {
-    icon: 'mdi-signature-freehand',
-    label: 'signature',
-    value: 'signature',
-    color: 'primary',
-  },
-]);
 
 function setActive(button: NotificationButton) {
   notiMenu.value = notiMenu.value.map((current) => ({
@@ -131,17 +121,26 @@ function doLogout() {
   });
 }
 
-function getRoleName(roleOptions: Option[], userRoleValue?: string[]) {
+watch(
-  if (!userRoleValue || !roleOptions) return;
+  () => currentLanguage.value,
-
+  () => {
-  const matchingRole: string | undefined = roleOptions.find(
+    localStorage.setItem('currentLanguage', currentLanguage.value);
-    (role) => role.value === userRoleValue[0],
+  },
-  )?.label;
+);
-
-  return matchingRole ? matchingRole : '';
-}
 
 onMounted(async () => {
+  const getCurLang = localStorage.getItem('currentLanguage');
+  console.log(getCurLang);
+  if (getCurLang) currentLanguage.value = getCurLang;
+  if (currentLanguage.value === 'English') {
+    locale.value = 'en-US';
+    setLocale('en-gb');
+  }
+  if (currentLanguage.value === 'ไทย') {
+    locale.value = 'th-th';
+    setLocale('th');
+  }
+
   const user = getUsername();
   const uid = getUserId();
 
@@ -149,16 +148,6 @@ onMounted(async () => {
     ? await userStore.fetchRoleOption()
     : '';
 
-  const userRoles = getRole();
-  if (userRoles) {
-    filterRole.value = userRoles.filter(
-      (role) =>
-        role !== 'default-roles-dev' &&
-        role !== 'offline_access' &&
-        role !== 'uma_authorization',
-    );
-  }
-
   if (user === 'admin') return;
   if (uid) {
     const res = await userStore.fetchById(uid);
@@ -183,8 +172,8 @@ onMounted(async () => {
           @click="leftDrawerOpen = !leftDrawerOpen"
         />
 
-        <!-- notification -->
+        <div class="row q-gutter-x-md items-end">
-        <div class="q-gutter-x-md row items-end">
+          <!-- notification -->
           <q-btn
             round
             dense
@@ -277,111 +266,63 @@ onMounted(async () => {
             </q-menu>
           </q-btn>
 
-          <!-- User -->
+          <!-- เปลี่นนภาษา -->
-          <q-btn-dropdown
+          <q-btn
-            rounded
+            round
-            dense
+            unelevated
-            flat
+            v-model="currentLanguage"
-            no-caps
+            class="no-uppercase"
-            content-style="border: 1px solid var(--border-color)"
+            size="md"
-            :menu-offset="[30, 10]"
-            color="dark"
-            class="q-pa-none account-menu-down dropdown-menu"
           >
-            <template v-slot:label>
+            <Icon
-              <q-item dense class="q-pa-none">
+              v-if="currentLanguage === 'English'"
-                <q-item-section
+              icon="circle-flags:us"
-                  avatar
+              style="width: 36px; height: 35px"
-                  class="q-pa-none"
+            />
-                  style="min-width: 30px"
+            <Icon
+              v-else
+              icon="circle-flags:th"
+              style="width: 36px; height: 35px"
+            />
+
+            <q-menu
+              :offset="[0, 10]"
+              fit
+              anchor="bottom left"
+              self="top left"
+              auto-close
+            >
+              <q-list v-for="v in language" :key="v.value">
+                <q-item
+                  v-if="!v.label.includes(currentLanguage)"
+                  clickable
+                  @click="
+                    locale = v.value;
+                    currentLanguage = v.label;
+                    setLocale(v.date);
+                  "
                 >
-                  <q-avatar class="bg-primary">
+                  <q-item-section>
-                    <img :src="userImage" v-if="userImage" />
+                    <div class="row items-center">
-                  </q-avatar>
+                      <Icon :icon="`circle-flags:${v.icon}`" class="q-mr-md" />
-                </q-item-section>
+                      {{ v.label }}
-                <q-item-section
-                  class="text-left q-pa-none q-px-md"
-                  v-if="$q.screen.gt.xs"
-                >
-                  <q-item-label class="text-caption column">
-                    <span class="text-weight-bold q-pb-xs text-primary">
-                      {{ getName() }}
-                    </span>
-                    <div style="font-size: 11px; color: var(--surface)">
-                      {{
-                        getRoleName(userStore.userOption.roleOpts, filterRole)
-                      }}
                     </div>
-                  </q-item-label>
+                  </q-item-section>
-                </q-item-section>
+                </q-item>
-              </q-item>
+              </q-list>
-            </template>
+            </q-menu>
+          </q-btn>
 
-            <div no-padding class="row justify-center" style="width: 273.797px">
+          <!-- User -->
-              <div class="column col-12 items-center">
+          <ProfileMenu
-                <div
+            @logout="doLogout"
-                  class="full-width row justify-center"
+            @edit-personal-info="console.log('edit')"
-                  style="position: relative"
+            @signature="
-                >
+              () => {
-                  <div
+                canvasModal = true;
-                    class="full-width account-cover"
+              }
-                    :class="{ dark: $q.dark.isActive }"
+            "
-                  ></div>
+          />
-                  <div class="avartar-border">
-                    <q-avatar size="72px" class="bg-primary">
-                      <img :src="userImage" v-if="userImage" />
-                    </q-avatar>
-                  </div>
-                </div>
-
-                <div
-                  class="text-subtitle2 q-mb-xs text-center"
-                  style="margin-top: 58px"
-                >
-                  {{ getName() }}
-                </div>
-                <div
-                  class="badge q-px-sm q-mb-md text-caption"
-                  :class="{ dark: $q.dark.isActive }"
-                >
-                  {{ getRoleName(userStore.userOption.roleOpts, filterRole) }}
-                </div>
-              </div>
-
-              <div class="column col-12">
-                <q-separator />
-                <div class="column justify-center">
-                  <q-list dense v-for="op in options" :key="op.label">
-                    <q-item
-                      clickable
-                      @click="
-                        () => {
-                          if (op.value === 'signature') {
-                            canvasModal = true;
-                          }
-                        }
-                      "
-                    >
-                      <q-item-section avatar>
-                        <q-icon :name="op.icon" :color="op.color" size="20px" />
-                      </q-item-section>
-                      <q-item-section class="q-py-sm">
-                        {{ $t(op.label) }}
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </div>
-                <q-btn
-                  dense
-                  flat
-                  class="q-ma-sm logout-btn"
-                  :class="{ dark: $q.dark.isActive }"
-                  label="ออกจากระบบ"
-                  @click="doLogout()"
-                />
-              </div>
-            </div>
-          </q-btn-dropdown>
 
           <!-- theme -->
           <q-btn
@@ -394,35 +335,6 @@ onMounted(async () => {
             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;
-                  "
-                >
-                  <q-item-section>
-                    {{ v.label }}
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
         </div>
       </div>
     </q-header>

src/services/keycloak.ts

@@ -59,3 +59,7 @@ export function getRole(): string[] | undefined {
 export function isLoggedIn() {
   return !!keycloak.token;
 }
+
+export function getRealm(): string | undefined {
+  return keycloak.tokenParsed?.iss?.split('/').at(-1);
+}