feat: profile image for non system admin user

src/layouts/MainLayout.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { getName, getRole, logout } from 'src/services/keycloak';
+import {
+  getName,
+  getRole,
+  getUserId,
+  getUsername,
+  logout,
+} from 'src/services/keycloak';
 import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
 import GlobalDialog from 'components/GlobalDialog.vue';
+import useUserStore from 'src/stores/user';
 
 interface NotificationButton {
   item: string;
@@ -76,6 +83,8 @@ const notification = ref<Notification[]>([
   },
 ]);
 
+const userImage = ref<string>();
+
 function setActive(button: NotificationButton) {
   notiMenu.value = notiMenu.value.map((current) => ({
     item: current.item,
@@ -98,6 +107,18 @@ function doLogout(confirm: boolean = false) {
     logout();
   }
 }
+
+onMounted(async () => {
+  const user = getUsername();
+  const uid = getUserId();
+
+  if (user === 'admin') return;
+  if (uid) {
+    const res = await useUserStore().fetchById(uid);
+
+    if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
+  }
+});
 </script>
 
 <template>
@@ -226,7 +247,9 @@ function doLogout(confirm: boolean = false) {
                   class="q-pa-none"
                   style="min-width: 30px"
                 >
-                  <q-avatar class="bg-primary" />
+                  <q-avatar class="bg-primary">
+                    <img :src="userImage" />
+                  </q-avatar>
                 </q-item-section>
                 <q-item-section
                   class="text-left q-pa-none q-px-md"