feat: update Person Card
This commit is contained in:
Methapon2001
parent
e1e7eb4719
commit
4bfe1ccd34
4 changed files with 391 additions and 337 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue