fix: 02-personnel layout
This commit is contained in:
puriphatt
parent
bfec8255ff
commit
2fd21a5ac7
1 changed files with 188 additions and 181 deletions
|
|
@ -534,201 +534,208 @@ watch(inputSearch, async () => await fetchUserList());
|
|||
</ButtonAddComponent>
|
||||
|
||||
<!-- stat -->
|
||||
<div class="scroll q-mb-md">
|
||||
<div style="display: inline-block">
|
||||
<StatCardComponent
|
||||
v-if="sortedUserStats"
|
||||
:branch="
|
||||
sortedUserStats.map((v) => ({
|
||||
count: v.count,
|
||||
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
|
||||
icon: 'mdi-account',
|
||||
color: v.isHeadOffice ? 'pink' : 'purple',
|
||||
}))
|
||||
"
|
||||
:dark="$q.dark.isActive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- main -->
|
||||
<div
|
||||
class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
|
||||
>
|
||||
<div>
|
||||
<div class="row q-mb-md justify-end" style="gap: var(--size-2)">
|
||||
<q-input
|
||||
for="input-search"
|
||||
style="width: 250px"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('search')"
|
||||
debounce="500"
|
||||
v-model="inputSearch"
|
||||
></q-input>
|
||||
<q-btn
|
||||
id="btn-filter"
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
class="bordered rounded"
|
||||
:class="{ 'app-text-info': statusFilter !== 'all' }"
|
||||
unelevated
|
||||
>
|
||||
<q-menu class="bordered">
|
||||
<q-list v-close-popup dense>
|
||||
<q-item
|
||||
id="btn-filter-all"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
:class="{ 'app-text-info': statusFilter === 'all' }"
|
||||
@click="statusFilter = 'all'"
|
||||
>
|
||||
{{ $t('all') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
id="btn-filter-active"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'app-text-info': statusFilter === 'statusACTIVE',
|
||||
}"
|
||||
@click="statusFilter = 'statusACTIVE'"
|
||||
>
|
||||
{{ $t('statusACTIVE') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
id="btn-filter-inactive"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'app-text-info': statusFilter === 'statusINACTIVE',
|
||||
}"
|
||||
@click="statusFilter = 'statusINACTIVE'"
|
||||
>
|
||||
{{ $t('statusINACTIVE') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<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}`,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
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) || '',
|
||||
},
|
||||
],
|
||||
badge: v.code,
|
||||
disabled: v.status === 'INACTIVE',
|
||||
})) || []
|
||||
"
|
||||
@update-card="openDialog"
|
||||
@delete-card="onDelete"
|
||||
@enter-card="openDialog"
|
||||
@toggle-status="toggleStatus"
|
||||
/>
|
||||
<template v-if="userData && userData.total === 0 && !inputSearch">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
<TooltipComponent
|
||||
title="personnelTooltipTitle"
|
||||
caption="personnelTooltipCaption"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col self-center"
|
||||
style="display: flex; flex-grow: 1; align-items: center"
|
||||
>
|
||||
<AddButton
|
||||
:label="'personnelAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialog('FORM')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="userData?.total === 0 && !!inputSearch"
|
||||
class="row full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
<div class="column full-height no-wrap">
|
||||
<div class="scroll q-mb-md">
|
||||
<div style="display: inline-block">
|
||||
<StatCardComponent
|
||||
v-if="sortedUserStats"
|
||||
:branch="
|
||||
sortedUserStats.map((v) => ({
|
||||
count: v.count,
|
||||
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
|
||||
icon: 'mdi-account',
|
||||
color: v.isHeadOffice ? 'pink' : 'purple',
|
||||
}))
|
||||
"
|
||||
:dark="$q.dark.isActive"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- main -->
|
||||
<div
|
||||
class="row justify-between items-center q-pt-md"
|
||||
v-if="currentMaxPage > 0"
|
||||
class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
{{ $t('showing') }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn-dropdown dense unelevated :label="pageSize">
|
||||
<q-list>
|
||||
<div>
|
||||
<div class="row q-mb-md justify-end" style="gap: var(--size-2)">
|
||||
<q-input
|
||||
for="input-search"
|
||||
style="width: 250px"
|
||||
outlined
|
||||
dense
|
||||
:label="$t('search')"
|
||||
debounce="500"
|
||||
v-model="inputSearch"
|
||||
></q-input>
|
||||
<q-btn
|
||||
id="btn-filter"
|
||||
icon="mdi-tune-vertical-variant"
|
||||
size="sm"
|
||||
class="bordered rounded"
|
||||
:class="{ 'app-text-info': statusFilter !== 'all' }"
|
||||
unelevated
|
||||
>
|
||||
<q-menu class="bordered">
|
||||
<q-list v-close-popup dense>
|
||||
<q-item
|
||||
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||
id="btn-filter-all"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
async () => {
|
||||
pageSize = v;
|
||||
await fetchUserList();
|
||||
}
|
||||
"
|
||||
class="flex items-center"
|
||||
:class="{ 'app-text-info': statusFilter === 'all' }"
|
||||
@click="statusFilter = 'all'"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
{{ $t('all') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
id="btn-filter-active"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'app-text-info': statusFilter === 'statusACTIVE',
|
||||
}"
|
||||
@click="statusFilter = 'statusACTIVE'"
|
||||
>
|
||||
{{ $t('statusACTIVE') }}
|
||||
</q-item>
|
||||
<q-item
|
||||
id="btn-filter-inactive"
|
||||
clickable
|
||||
class="flex items-center"
|
||||
:class="{
|
||||
'app-text-info': statusFilter === 'statusINACTIVE',
|
||||
}"
|
||||
@click="statusFilter = 'statusINACTIVE'"
|
||||
>
|
||||
{{ $t('statusINACTIVE') }}
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<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}`,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
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) || '',
|
||||
},
|
||||
],
|
||||
badge: v.code,
|
||||
disabled: v.status === 'INACTIVE',
|
||||
})) || []
|
||||
"
|
||||
@update-card="openDialog"
|
||||
@delete-card="onDelete"
|
||||
@enter-card="openDialog"
|
||||
@toggle-status="toggleStatus"
|
||||
/>
|
||||
<template v-if="userData && userData.total === 0 && !inputSearch">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
<TooltipComponent
|
||||
title="personnelTooltipTitle"
|
||||
caption="personnelTooltipCaption"
|
||||
imgSrc="personnel-table-"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col self-center"
|
||||
style="display: flex; flex-grow: 1; align-items: center"
|
||||
>
|
||||
<AddButton
|
||||
:label="'personnelAdd'"
|
||||
:cyanOn="true"
|
||||
@trigger="openDialog('FORM')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="userData?.total === 0 && !!inputSearch"
|
||||
class="row full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 row justify-center app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: userData?.result.length,
|
||||
total: userData?.total,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 row justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPage"
|
||||
v-model:max-page="currentMaxPage"
|
||||
:fetch-data="async () => await fetchUserList()"
|
||||
/>
|
||||
<div
|
||||
class="row justify-between items-center q-pt-md"
|
||||
v-if="currentMaxPage > 0"
|
||||
>
|
||||
<div class="col-4">
|
||||
<div class="row items-center">
|
||||
<div class="app-text-muted" style="width: 80px">
|
||||
{{ $t('showing') }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn-dropdown dense unelevated :label="pageSize">
|
||||
<q-list>
|
||||
<q-item
|
||||
v-for="v in [10, 30, 50, 100, 500, 1000]"
|
||||
:key="v"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
async () => {
|
||||
pageSize = v;
|
||||
await fetchUserList();
|
||||
}
|
||||
"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ v }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 row justify-center app-text-muted">
|
||||
{{
|
||||
$t('recordsPage', {
|
||||
resultcurrentPage: userData?.result.length,
|
||||
total: userData?.total,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
<div class="col-4 row justify-end">
|
||||
<PaginationComponent
|
||||
v-model:current-page="currentPage"
|
||||
v-model:max-page="currentMaxPage"
|
||||
:fetch-data="async () => await fetchUserList()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue