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

feat: update Person Card

Browse source
This commit is contained in:
Methapon2001 2024-07-05 16:29:06 +07:00
parent e1e7eb4719
commit 4bfe1ccd34
4 changed files with 391 additions and 337 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/DrawerComponent.vue
View file

@ -102,12 +102,12 @@ function branchSetting() {}
side="left"
:breakpoint="599"
class="column justify-between no-wrap"
:width="mini ? 110 : 256"
:width="mini ? 80 : 256"
>
<!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
<div class="scroll" style="overflow-x: hidden">
<div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
<div
class="flex justify-center items-center q-pa-md cursor-pointer"
class="flex justify-center items-center q-pl-sm cursor-pointer"
@click="$router.push('/')"
id="btn-drawer-home"
style="height: 128px"
@ -120,12 +120,12 @@ function branchSetting() {}
/>
</div>
<div id="drawer-menu" class="q-px-md">
<div id="drawer-menu" class="q-pl-md q-mr-xs">
<q-item
v-for="v in labelMenu"
dense
clickable
class="row items-center q-my-xs"
class="row items-center q-my-xs q-px-xs"
:key="v.label"
:disable="!!v.disabled"
:class="{

30
src/components/StatCardComponent.vue
View file

@ -5,7 +5,15 @@ const props = withDefaults(
icon: string;
count: number;
label: string;
color: 'pink' | 'purple' | 'green' | 'orange';
color:
| 'pink'
| 'purple'
| 'green'
| 'orange'
| 'cyan'
| 'yellow'
| 'red'
| 'magenta';
}[];
dark?: boolean;
labelI18n?: boolean;
@ -79,10 +87,26 @@ const props = withDefaults(
--_color: var(--teal-10-hsl);
}
.stat-card__cyan {
--_color: var(--cyan-7-hsl);
}
.stat-card__red {
--_color: var(--red-6-hsl);
}
.stat-card__yellow {
--_color: var(--orange-4-hsl);
}
.stat-card__orange {
--_color: var(--orange-5-hsl);
}
.stat-card__magenta {
--_color: var(--pink-8-hsl);
}
.dark .stat-card__purple {
--_color: var(--violet-10-hsl);
}
@ -94,4 +118,8 @@ const props = withDefaults(
.dark .stat-card__orange {
--_color: var(--orange-6-hsl);
}
.dark .stat-card__magenta {
--_color: var(--pink-7-hsl);
}
</style>

543
src/components/home/PersonCard.vue
View file

@ -5,264 +5,222 @@ import AppBox from 'components/app/AppBox.vue';
import AppCircle from 'components/app/AppCircle.vue';
defineProps<{
list: {
id: string;
data: {
name: string;
detail?: { label: string; value: string }[];
code: string;
male?: boolean;
female?: boolean;
disabled?: boolean;
badge?: string;
img?: string;
}[];
gridColumns?: number;
detail?: { icon: string; value: string }[];
};
tag?: [{ color: string; value: string }];
disabled?: boolean;
noHover?: boolean;
noAction?: boolean;
noDetail?: boolean;
noBg?: boolean;
detailColumnCount?: number;
canEditProfile?: boolean;
history?: boolean;
}>();
defineEmits<{
(e: 'editProfile'): void;
(e: 'history', id: string): void;
(e: 'deleteCard', id: string): void;
(
e: 'updateCard',
action: 'FORM' | 'INFO',
id: string,
isEdit?: boolean,
): void;
(e: 'enterCard', action: 'FORM' | 'INFO', id: string): void;
(e: 'toggleStatus', id: string, status: boolean): void;
(e: 'history'): void;
(e: 'deleteCard'): void;
(e: 'updateCard', action: 'FORM' | 'INFO', isEdit?: boolean): void;
(e: 'enterCard', action: 'FORM' | 'INFO'): void;
(e: 'toggleStatus', status: boolean): void;
}>();
</script>
<template>
<div
class="person-container"
:style="`grid-template-columns: repeat( ${
gridColumns
? `${gridColumns}, 1fr`
: $q.screen.gt.sm
? '4, 1fr'
: $q.screen.gt.xs
? '2, 1fr'
: '1, 1fr'
})`"
<AppBox
bordered
no-padding
class="column person-box"
:class="{
'person-box__disabled': disabled,
'person-box__no-hover': noHover,
'person-box__no-detail': !data.detail,
'person-box__no-bg': noBg,
}"
@click="$emit('enterCard', 'INFO')"
>
<AppBox
bordered
class="column person-box"
:class="{
'person-box__disabled': v.disabled,
'person-box__no-hover': noHover,
'person-box__no-detail': noDetail,
'person-box__no-bg': noBg,
}"
@click="$emit('enterCard', 'INFO', v.id)"
v-for="(v, i) in list"
:key="i"
>
<div class="q-pa-sm column items-center">
<!-- kebab menu -->
<div class="full-width text-right" v-if="!noAction">
<q-btn
v-if="history"
flat
round
class="app-text-muted-2"
padding="xs"
icon="mdi-history"
size="sm"
@click.stop="$emit('history', v.id)"
/>
<q-btn
flat
round
padding="xs"
class="app-text-muted-2"
icon="mdi-dots-vertical"
size="sm"
@click.stop
<div class="column items-center">
<!-- kebab menu -->
<div class="full-width flex" v-if="!noAction">
<div style="margin-right: auto">
<span
class="tags"
v-for="v in tag"
:class="{ [`tags__${v.color}`]: true }"
>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('enterCard', 'INFO', v.id)"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
dense
clickable
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('updateCard', 'INFO', v.id, true)"
v-close-popup
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
</span>
</q-item>
<q-item
dense
clickable
@click="$emit('deleteCard', v.id)"
v-close-popup
>
<q-icon
name="mdi-trash-can-outline"
size="xs"
class="col-3 app-text-negative"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
</span>
</q-item>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
dense
size="sm"
@click="
$emit('toggleStatus', v.id, v.disabled === false)
"
:model-value="!v.disabled"
val="xs"
padding="none"
>
<div class="q-ml-xs">
{{
!v.disabled
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<!-- profile -->
<div style="position: relative">
<AppCircle
bordered
class="avatar"
style="border: 2px solid var(--border-color)"
:class="{ 'edit-profile': canEditProfile }"
@click="
() => {
if (canEditProfile) $emit('editProfile');
}
"
>
<q-img
:src="v.img"
style="object-fit: cover; width: 100%; height: 100%"
/>
<div class="status-circle">
<q-icon
:name="`mdi-${v.disabled ? 'close' : 'check'}`"
:style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
/>
</div>
</AppCircle>
</div>
<!-- name symbol -->
<span class="items-center row q-my-sm">
{{ v.name }}
<Icon
class="q-pl-sm"
:class="{
'symbol-gender': v.male || v.female,
'symbol-gender__male': !v.disabled && v.male,
'symbol-gender__female': !v.disabled && v.female,
'symbol-gender__disable': v.disabled,
}"
:icon="`material-symbols:${v.male ? 'male' : 'female'}`"
width="24px"
/>
<!-- <Icon class="locale q-pl-sm" icon="circle-flags:th" width="24px" /> -->
</span>
<span
v-if="v.badge"
class="badge q-px-sm"
:class="{
'bg-gender': v.male || v.female,
'bg-gender__male': !v.disabled && v.male,
'bg-gender__female': !v.disabled && v.female,
'bg-gender__disable': v.disabled,
empty: !v.male && !v.female,
}"
>
{{ v.badge }}
</span>
</div>
<!-- detail -->
<q-separator v-if="!noDetail" />
<div
v-if="!noDetail"
class="q-pt-sm q-px-md q-pb-md person-detail rounded-b full-width"
:class="{
'bg-gender': v.male || v.female,
'bg-gender__light':
(!v.disabled && v.male) || (!v.disabled && v.female),
'bg-gender__male': !v.disabled && v.male,
'bg-gender__female': !v.disabled && v.female,
'bg-gender__disable': v.disabled,
}"
:style="
(detailColumnCount &&
`grid-template-columns: repeat(${detailColumnCount}, 1fr);`) ||
''
"
>
<div v-for="(d, j) in v.detail" :key="j">
<span class="app-text-muted-2">
{{ d.label }}
{{ v.value }}
</span>
<span>{{ d.value || '-' }}</span>
</div>
<q-btn
v-if="history"
flat
round
class="app-text-muted-2"
padding="xs"
icon="mdi-history"
size="sm"
@click.stop="$emit('history')"
/>
<q-btn
flat
round
padding="xs"
class="app-text-muted-2"
icon="mdi-dots-vertical"
size="sm"
@click.stop
>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('enterCard', 'INFO')"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
dense
clickable
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('updateCard', 'INFO', true)"
v-close-popup
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
</span>
</q-item>
<q-item
dense
clickable
@click="$emit('deleteCard')"
v-close-popup
>
<q-icon
name="mdi-trash-can-outline"
size="xs"
class="col-3 app-text-negative"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('delete') }}
</span>
</q-item>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
dense
size="sm"
@click="$emit('toggleStatus', disabled === false)"
:model-value="!disabled"
val="xs"
padding="none"
>
<div class="q-ml-xs">
{{
!disabled ? $t('switchOnLabel') : $t('switchOffLabel')
}}
</div>
</q-toggle>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<!-- profile -->
<AppCircle
bordered
class="avatar"
style="border: 2px solid var(--border-color); overflow: visible"
@click="$emit('editProfile')"
>
<q-img
:src="data.img"
style="
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 50%;
"
/>
<div class="avatar__status"></div>
</AppCircle>
<!-- name symbol -->
<span class="items-center row">
{{ data.name }}
<Icon
class="q-pl-xs"
:class="{
'symbol-gender': data.male || data.female,
'symbol-gender__male': !disabled && data.male,
'symbol-gender__female': !disabled && data.female,
'symbol-gender__disable': disabled,
}"
:icon="`material-symbols:${data.male ? 'male' : 'female'}`"
width="24px"
/>
</span>
<span style="color: hsl(var(--text-mute)); scale: 0.9">
{{ data.code || '-' }}
</span>
</div>
<!-- detail -->
<q-separator v-if="data.detail" class="q-my-sm q-mx-md" />
<div class="row" v-for="v in data.detail" :key="v.value" v-if="data.detail">
<div class="column items-center" style="width: min-content">
<div class="detail-icon">
<q-icon size="md" style="scale: 0.5" :name="v.icon" />
</div>
</div>
</AppBox>
</div>
<div class="col row items-center full-width">
<span class="ellipsis">{{ v.value || '-' }}</span>
<q-tooltip
anchor="bottom left"
self="bottom left"
:offset="[10, 20]"
:delay="500"
>
{{ v.value || '-' }}
</q-tooltip>
</div>
</div>
</AppBox>
</template>
<style scoped>
.person-box {
background-color: var(--surface-2);
border-radius: var(--radius-2) !important;
background-color: var(--surface-1);
transition: 100ms ease-in-out;
padding: 0;
padding: var(--size-2);
&.person-box__disabled {
opacity: 0.4;
@ -284,6 +242,13 @@ defineEmits<{
background-color: transparent;
}
& .detail-icon {
color: hsl(var(--text-mute-2));
background-color: hsla(var(--stone-6-hsl) / 0.15);
border-radius: 50%;
scale: 0.8;
}
& .bg-gender {
color: hsla(var(--_fg));
background-color: hsl(var(--_bg));
@ -297,16 +262,6 @@ defineEmits<{
color: unset;
background-color: hsla(var(--_bg) / 0.1);
}
&.bg-gender__male {
--_fg: 0 100 100%;
--_bg: var(--gender-male);
}
&.bg-gender__female {
--_fg: 0 100 100%;
--_bg: var(--gender-female);
}
}
& .symbol-gender {
@ -325,23 +280,6 @@ defineEmits<{
}
}
& .person-detail {
display: grid;
flex-grow: 1;
grid-template-columns: repeat(2, 1fr);
gap: var(--size-2);
overflow-x: scroll;
& > * {
display: flex;
flex-direction: column;
& > :first-child {
font-size: var(--font-size-0);
}
}
}
& .status-circle {
width: 18px;
height: 18px;
@ -360,11 +298,6 @@ defineEmits<{
--_hover: hsl(var(--gender-male));
cursor: pointer;
box-shadow: var(--shadow-2);
& .person-detail {
--_hover: hsl(var(--_bg));
box-shadow: inset 0em -5px hsl(var(--_bg));
}
}
}
@ -374,17 +307,25 @@ defineEmits<{
}
.avatar {
block-size: 7rem;
}
block-size: 5rem;
transform: rotate(45deg);
.badge {
display: inline-block;
border-radius: var(--radius-6);
background-color: var(--surface-2);
text-wrap: nowrap;
& .avatar__status {
content: ' ';
display: block;
block-size: 1rem;
aspect-ratio: 1;
position: absolute;
border-radius: 50%;
right: -0.5rem;
border: 1px solid var(--border-color);
top: calc(50% - 0.5rem);
bottom: calc(50% - 0.5rem);
background-color: hsla(var(--positive-bg) / 1);
}
&.empty {
background-color: var(--surface-tab);
& :deep(.q-img) {
transform: rotate(-45deg);
}
}
@ -396,4 +337,60 @@ defineEmits<{
opacity: 80%;
}
}
.tags {
display: inline-block;
color: hsla(var(--_color) / 1);
background: hsla(var(--_color) / 0.15);
border-radius: var(--radius-2);
padding-inline: var(--size-2);
}
.tags__purple {
--_color: var(--violet-11-hsl);
}
.tags__pink {
--_color: var(--pink-6-hsl);
}
.tags__green {
--_color: var(--teal-10-hsl);
}
.tags__cyan {
--_color: var(--cyan-7-hsl);
}
.tags__red {
--_color: var(--red-6-hsl);
}
.tags__yellow {
--_color: var(--orange-4-hsl);
}
.tags__orange {
--_color: var(--orange-5-hsl);
}
.tags__magenta {
--_color: var(--pink-8-hsl);
}
.dark .tags__purple {
--_color: var(--violet-10-hsl);
}
.dark .tags__green {
--_color: var(--teal-8-hsl);
}
.dark .tags__orange {
--_color: var(--orange-6-hsl);
}
.dark .tags__magenta {
--_color: var(--pink-7-hsl);
}
</style>

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue';
import { storeToRefs } from 'pinia';
import useUtilsStore, { dialog } from 'src/stores/utils';
import useUtilsStore, { dialog, calculateAge } from 'src/stores/utils';
import { useI18n } from 'vue-i18n';
import useFlowStore from 'src/stores/flow';
import useUserStore from 'stores/user';
@ -91,7 +91,7 @@ const statusToggle = ref(true);
const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
const inputSearch = ref('');
const userId = ref<string>();
const selectorLabel = ref<string>('');
const selectorLabel = ref<string>('MESSENGER');
const hqId = ref<string>();
const brId = ref<string>();
const formDialogRef = ref();
@ -170,7 +170,7 @@ const selectorList = computed(() => [
async function openDialog(
action?: 'FORM' | 'INFO',
idEdit?: string,
id?: string,
isPersonEdit: boolean = false,
) {
if (userStore.userOption.hqOpts.length === 0) {
@ -181,12 +181,12 @@ async function openDialog(
await userStore.fetchRoleOption();
}
if (idEdit && userData.value) {
assignFormData(idEdit);
if (id && userData.value) {
assignFormData(id);
isEdit.value = true;
if (formData.value.userType === 'AGENCY') {
const result = await userStore.fetchAttachment(idEdit);
const result = await userStore.fetchAttachment(id);
if (result) {
agencyFileList.value = result;
@ -201,7 +201,7 @@ async function openDialog(
infoDrawerEdit.value = isPersonEdit ? true : false;
infoDrawer.value = true;
const user = userData.value.result.find((x) => x.id === idEdit);
const user = userData.value.result.find((x) => x.id === id);
infoPersonCard.value = user
? [
{
@ -377,7 +377,7 @@ async function assignFormData(idEdit: string) {
infoPersonId.value = currentUser.value.id;
formData.value = {
branchId: foundUser.branch[0].id,
branchId: foundUser.branch[0]?.id,
provinceId: foundUser.provinceId,
districtId: foundUser.districtId,
subDistrictId: foundUser.subDistrictId,
@ -556,13 +556,21 @@ watch(inputSearch, async () => await fetchUserList());
<div v-if="!hideStat" class="scroll q-mb-md">
<div style="display: inline-block">
<StatCardComponent
v-if="sortedUserStats"
v-if="typeStats"
:branch="
sortedUserStats.map((v) => ({
count: v.count,
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
Object.entries(typeStats).map(([key, val]) => ({
count: val,
label: key,
icon: 'mdi-account',
color: v.isHeadOffice ? 'pink' : 'purple',
color:
(
{
USER: 'cyan',
MESSENGER: 'yellow',
DELEGATE: 'red',
AGENCY: 'magenta',
} as const
)[key] || 'pink',
}))
"
:dark="$q.dark.isActive"
@ -633,51 +641,69 @@ watch(inputSearch, async () => await fetchUserList());
</q-btn>
</div>
</div>
<div class="col column scroll q-pa-md">
<PersonCard
:list="
userData?.result
.filter((v) => {
if (
statusFilter === 'statusACTIVE' &&
v.status === 'INACTIVE'
) {
return false;
}
if (
statusFilter === 'statusINACTIVE' &&
v.status !== 'INACTIVE'
) {
return false;
}
return true;
})
.map((v) => ({
id: v.id,
img: `${v.profileImageUrl}`,
<div class="col scroll">
<div class="q-pa-md q-col-gutter-md row">
<div
v-for="v in userData?.result.filter((v) => {
if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
return false;
}
if (
statusFilter === 'statusINACTIVE' &&
v.status !== 'INACTIVE'
) {
return false;
}
return true;
})"
:key="v.id"
class="col-3"
>
<PersonCard
:data="{
code: v.code,
name:
$i18n.locale === 'en-US'
? `${v.firstNameEN} ${v.lastNameEN}`
: `${v.firstName} ${v.lastName}`,
? `${v.firstNameEN} ${v.lastNameEN}`.trim()
: `${v.firstName} ${v.lastName}`.trim(),
img: v.profileImageUrl,
male: v.gender === 'male',
female: v.gender === 'female',
detail: [
{ label: $t('personnelCardUserType'), value: $t(v.userType) },
{ label: $t('personnelCardTelephone'), value: v.telephoneNo },
{
label: $t('personnelCardAge'),
value: userStore.calculateAge(v.birthDate as Date) || '',
icon: 'mdi-phone',
value: v.telephoneNo,
},
{
icon: 'mdi-clock-outline',
value: (v.birthDate && calculateAge(v.birthDate)) || '-',
},
],
badge: v.code,
disabled: v.status === 'INACTIVE',
})) || []
"
@update-card="openDialog"
@delete-card="onDelete"
@enter-card="openDialog"
@toggle-status="toggleStatus"
/>
}"
:tag="[
{
color:
(
{
USER: 'cyan',
MESSENGER: 'yellow',
DELEGATE: 'red',
AGENCY: 'magenta',
} as const
)[v.userType] || 'pink',
value: $t(v.userType),
},
]"
:disabled="v.status === 'INACTIVE'"
@update-card="(a, b) => openDialog(a, v.id, b)"
@delete-card="onDelete(v.id)"
@enter-card="(a) => openDialog(a, v.id)"
@toggle-status="toggleStatus(v.id)"
/>
</div>
</div>
<template v-if="userData && userData.total === 0 && !inputSearch">
<div class="col-1 self-end">
<div class="row">
@ -807,17 +833,20 @@ watch(inputSearch, async () => await fetchUserList());
<AppBox class="surface-1" style="padding: 0">
<PersonCard
:can-edit-profile="infoDrawerEdit"
:data="{
code: currentUser.code,
name:
$i18n.locale === 'en-US'
? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`.trim()
: `${currentUser.firstName} ${currentUser.lastName}`.trim(),
img: currentUser.profileImageUrl,
male: currentUser.gender === 'male',
female: currentUser.gender === 'female',
}"
no-hover
no-action
no-detail
no-bg
:list="infoPersonCard"
:gridColumns="1"
@edit-profile="
() => {
inputFile.click();
}
"
@edit-profile="inputFile.click()"
/>
</AppBox>
</div>