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