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

refactor: add border

Browse source
This commit is contained in:
Net 2024-09-06 17:54:27 +07:00
parent 0a8d9cf143
commit a0c8a2153e
1 changed files with 58 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

100
src/pages/02_personnel-management/MainPage.vue
View file

@ -327,8 +327,6 @@ async function openDialog(
hqId.value = userStore.userOption.hqOpts[0].value; hqId.value = userStore.userOption.hqOpts[0].value;
} }
if (userStore.userOption.hqOpts.length === 0) { if (userStore.userOption.hqOpts.length === 0) {
console.log('no hq');
dialog({ dialog({
color: 'warning', color: 'warning',
icon: 'mdi-alert', icon: 'mdi-alert',
@ -1126,47 +1124,65 @@ watch(
<div class="row items-center" style="flex-wrap: nowrap"> <div class="row items-center" style="flex-wrap: nowrap">
<div style="display: flex"> <div style="display: flex">
<div class="q-mr-md"> <div class="q-mr-md">
<q-avatar size="md"> <div
<q-img :style="`
class="text-center" border-radius: 50%;
:ratio="1" border-style: solid;
:src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`" border-width: 2px;
> border-color: hsl(var(${
<template #error> {
<div USER: '--cyan-7-hsl',
class="no-padding full-width full-height flex items-center justify-center" MESSENGER: '--orange-4-hsl',
:style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`" DELEGATE: '--red-6-hsl',
> AGENCY: '--pink-8-hsl',
<q-img }[props.row.userType as string] ||
v-if="props.row.gender" '--pink-8-hsl'
:src=" }
props.row.gender === 'male' `"
? '/no-img-man.png' class="q-pa-xs"
: '/no-img-female.png' >
" <q-avatar size="md">
/> <q-img
<q-icon class="text-center"
v-else :ratio="1"
size="sm" :src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`"
name="mdi-account-outline" >
style="color: white" <template #error>
/> <div
</div> class="no-padding full-width full-height flex items-center justify-center"
</template> :style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
</q-img> >
<q-img
v-if="props.row.gender"
:src="
props.row.gender === 'male'
? '/no-img-man.png'
: '/no-img-female.png'
"
/>
<q-icon
v-else
size="sm"
name="mdi-account-outline"
style="color: white"
/>
</div>
</template>
</q-img>
<q-badge <q-badge
class="absolute-bottom-right no-padding" class="absolute-bottom-right no-padding"
style=" style="
border-radius: 50%; border-radius: 50%;
min-width: 8px; min-width: 8px;
min-height: 8px; min-height: 8px;
" "
:style="{ :style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`, background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
}" }"
></q-badge> ></q-badge>
</q-avatar> </q-avatar>
</div>
</div> </div>
</div> </div>
<div class="column"> <div class="column">