refactor: misc

src/layouts/MainLayout.vue

@@ -19,6 +19,7 @@ import useMyBranchStore from 'stores/my-branch';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 
 interface NotificationButton {
   item: string;
@@ -52,6 +53,7 @@ const filterUnread = ref(false);
 const unread = ref<number>(1);
 // const filterRole = ref<string[]>();
 const userImage = ref<string>();
+const userGender = ref('');
 const canvasRef = ref();
 const currentLanguage = ref<string>('ไทย');
 const language: {
@@ -169,9 +171,12 @@ onMounted(async () => {
 
   if (user === 'admin') return;
   if (uid) {
-    const res = await userStore.fetchById(uid);
+    userImage.value = `${apiBaseUrl}/user/${uid}/image`;
 
-    if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
+    const res = await userStore.fetchById(uid);
+    if (res && res.gender) {
+      userGender.value = res.gender;
+    }
   }
 });
 </script>
@@ -455,8 +460,9 @@ onMounted(async () => {
                 }
               "
               :user-image="
-                getRole()?.includes('system') ? '/img-admin.png' : ' '
+                getRole()?.includes('system') ? '/img-admin.png' : userImage
               "
+              :gender="userGender"
             />
           </div>
         </div>

src/layouts/ProfileMenu.vue

@@ -12,6 +12,7 @@ const filterRole = ref<string[]>();
 
 defineProps<{
   userImage?: string;
+  gender?: string;
 }>();
 
 const inputFile = document.createElement('input');
@@ -166,10 +167,40 @@ onMounted(async () => {
             class="surface-1 bordered"
             :size="$q.screen.lt.sm ? '30px' : '40px'"
           >
-            <img :src="userImage" v-if="userImage" />
+            <q-img
+              :ratio="1"
+              class="text-center"
+              :src="userImage"
+              v-if="userImage"
+            >
+              <template #error>
+                <div
+                  class="no-padding full-width full-height flex items-center justify-center"
+                  style="
+                    background: linear-gradient(
+                      135deg,
+                      rgba(43, 137, 223, 1) 0%,
+                      rgba(230, 51, 81, 1) 100%
+                    );
+                  "
+                >
+                  <q-img
+                    v-if="gender"
+                    :ratio="1"
+                    :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
+                  ></q-img>
+                  <q-icon
+                    v-else
+                    name="mdi-account-outline"
+                    color="white"
+                    :size="$q.screen.lt.sm ? 'xs' : 'sm'"
+                  />
+                </div>
+              </template>
+            </q-img>
             <q-icon
-              name="mdi-account"
               v-else
+              name="mdi-account-outline"
               :size="$q.screen.lt.sm ? 'xs' : 'sm'"
             />
           </q-avatar>
@@ -213,7 +244,7 @@ onMounted(async () => {
         </div>
       </div>
 
-      <q-menu :offset="[5, 10]">
+      <q-menu :offset="[5, 10]" max-width="300px">
         <div
           no-padding
           class="row justify-center bordered rounded"
@@ -240,20 +271,55 @@ onMounted(async () => {
                     }
                   "
                 >
-                  <img :src="userImage" v-if="userImage" />
-                  <q-icon name="mdi-account" v-else />
+                  <q-img
+                    :ratio="1"
+                    class="text-center"
+                    :src="userImage"
+                    v-if="userImage"
+                  >
+                    <template #error>
+                      <div
+                        class="no-padding full-width full-height flex items-center justify-center"
+                        style="
+                          background: linear-gradient(
+                            135deg,
+                            rgba(43, 137, 223, 1) 0%,
+                            rgba(230, 51, 81, 1) 100%
+                          );
+                        "
+                      >
+                        <q-img
+                          v-if="gender"
+                          :ratio="1"
+                          :src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
+                        ></q-img>
+                        <q-icon
+                          v-else
+                          name="mdi-account-outline"
+                          color="white"
+                        />
+                      </div>
+                    </template>
+                  </q-img>
+                  <q-icon name="mdi-account-outline" v-else />
                 </q-avatar>
               </div>
             </div>
 
             <div
-              class="text-subtitle2 q-mb-xs text-center"
+              class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
               style="margin-top: 58px"
             >
               <span v-if="isLoggedIn()">
                 {{ getName() }}
               </span>
               <span v-else>{{ 'Guest' }}</span>
+              <q-tooltip>
+                <span v-if="isLoggedIn()">
+                  {{ getName() }}
+                </span>
+                <span v-else>{{ 'Guest' }}</span>
+              </q-tooltip>
             </div>
             <div
               class="badge q-px-sm q-mb-md text-caption"
@@ -368,7 +434,7 @@ onMounted(async () => {
 </template>
 <style scoped lang="scss">
 .account-menu-down {
-  & ::before {
+  & ::before:not(.q-icon) {
     color: var(--foreground);
   }
 }