chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: update user image handling and disabled profile menu options

Browse source
This commit is contained in:
puriphatt 2024-12-26 11:58:07 +07:00
parent 7b78c95292
commit 7faef797cc
2 changed files with 31 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/layouts/MainLayout.vue
View file

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

32
src/layouts/ProfileMenu.vue
View file

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