refactor: update user image handling and disabled profile menu options

src/layouts/MainLayout.vue

@@ -16,10 +16,10 @@ import useMyBranchStore from 'stores/my-branch';
 import { useConfigStore } from 'src/stores/config';
 import { useNavigator } from 'src/stores/navigator';
 import { initLang, initTheme, Lang, setLang } from 'src/utils/ui';
+import { baseUrl } from 'stores/utils';
 
 const useMyBranch = useMyBranchStore();
 const { fetchListMyBranch } = useMyBranch;
-const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 
 interface NotificationButton {
   item: string;
@@ -141,11 +141,10 @@ onMounted(async () => {
 
   if (user === 'admin') return;
   if (uid) {
-    userImage.value = `${apiBaseUrl}/user/${uid}/image`;
-
     const res = await userStore.fetchById(uid);
     if (res && res.gender) {
       userGender.value = res.gender;
+      userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
     }
   }
 });
@@ -276,7 +275,7 @@ onMounted(async () => {
 
           <div class="row q-gutter-x-md items-center" style="margin-left: auto">
             <!-- notification -->
-            <q-btn
+            <!-- <q-btn
               round
               dense
               flat
@@ -345,7 +344,7 @@ onMounted(async () => {
                         </span>
                       </div>
                       <span align="right" class="col text-caption text-stone">
-                        <!-- {{ moment(item.createdAt).fromNow() }} -->
+                        {{ moment(item.createdAt).fromNow() }}
                         5 s
                       </span>
                       <q-tooltip
@@ -358,17 +357,17 @@ onMounted(async () => {
                       </q-tooltip>
                     </q-item>
                   </div>
-                  <!-- <template v-slot:loading>
-                  <div
-                    class="text-center q-my-md"
-                    v-if="noti && noti?.result.length < noti?.total"
-                  >
-                    <q-spinner-dots color="primary" size="40px" />
-                  </div>
-                </template> -->
+                  <template v-slot:loading>
+                    <div
+                      class="text-center q-my-md"
+                      v-if="noti && noti?.result.length < noti?.total"
+                    >
+                      <q-spinner-dots color="primary" size="40px" />
+                    </div>
+                  </template>
                 </q-infinite-scroll>
               </q-menu>
-            </q-btn>
+            </q-btn> -->
 
             <!-- เปลี่นนภาษา -->
             <q-btn

src/layouts/ProfileMenu.vue

@@ -18,26 +18,29 @@ const inputFile = document.createElement('input');
 inputFile.type = 'file';
 inputFile.accept = 'image/*';
 
-const options = ref([
+const options = [
   {
     icon: 'mdi-account',
     label: 'menu.profile.editPersonalInfo',
-    value: 'op1',
+    value: 'updateProfile',
     color: 'grey',
+    disabled: true,
   },
   {
     icon: 'mdi-signature-freehand',
     label: 'menu.profile.signature',
-    value: 'op2',
+    value: 'signature',
     color: 'grey',
+    disabled: true,
   },
   {
     icon: 'mdi-brightness-6',
     label: 'menu.profile.mode',
-    value: 'op3',
+    value: 'mode',
     color: 'grey',
+    disabled: false,
   },
-]);
+];
 
 const themeMode = ref([
   {
@@ -263,14 +266,15 @@ onMounted(async () => {
               <q-list
                 :dense="true"
                 v-for="op in options"
-                :key="op.label"
-                :id="op.label"
+                :key="op.value"
+                :id="op.value"
               >
                 <q-item
-                  v-if="op.label !== 'menu.profile.mode'"
+                  v-if="op.value !== 'mode'"
                   clickable
-                  :id="`btn-${op.label}`"
-                  @click="$emit(op.label)"
+                  :disable="op.disabled"
+                  :id="`btn-${op.value}`"
+                  @click="$emit(op.value)"
                 >
                   <q-item-section avatar>
                     <q-icon :name="op.icon" :color="op.color" size="20px" />
@@ -280,12 +284,12 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
 
-                <q-separator v-if="op.label === 'menu.profile.mode'" />
+                <q-separator v-if="op.value === 'mode'" />
                 <q-item
-                  v-if="op.label === 'menu.profile.mode'"
+                  v-if="op.value === 'mode'"
                   clickable
-                  :id="`btn-${op.label}`"
-                  @click="$emit(op.label)"
+                  :id="`btn-${op.value}`"
+                  @click="$emit(op.value)"
                 >
                   <q-item-section avatar>
                     <q-icon :name="op.icon" :color="op.color" size="20px" />