refactor: change layout of stat card
This commit is contained in:
Methapon2001
parent
9126270de6
commit
16bd9d03c5
4 changed files with 158 additions and 189 deletions
|
|
@ -441,7 +441,6 @@ watch(locale, () => {
|
||||||
label-i18n
|
label-i18n
|
||||||
:branch="stats"
|
:branch="stats"
|
||||||
:dark="$q.dark.isActive"
|
:dark="$q.dark.isActive"
|
||||||
nowrap
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -533,190 +533,169 @@ watch(inputSearch, async () => await fetchUserList());
|
||||||
></q-fab-action>
|
></q-fab-action>
|
||||||
</ButtonAddComponent>
|
</ButtonAddComponent>
|
||||||
|
|
||||||
<div class="column full-height">
|
<!-- stat -->
|
||||||
<div class="row full-width q-pb-md q-gutter-y-md">
|
<div class="scroll q-mb-md">
|
||||||
<!-- selector -->
|
<div style="display: inline-block">
|
||||||
<div class="col-sm-5 col-md-3 col-12 q-mr-md">
|
<StatCardComponent
|
||||||
<SelectorList :list="selectorList" v-model:selector="selectorLabel" />
|
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>
|
</div>
|
||||||
|
<PersonCard
|
||||||
<!-- stat -->
|
:list="
|
||||||
<div class="col-12 col-sm bordered surface-1 rounded">
|
userData?.result
|
||||||
<div class="text-weight-bold text-subtitle1 q-pa-md">
|
.filter((v) => {
|
||||||
{{ $t('personnelStatTitle') }}
|
if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
|
||||||
{{ selectorLabel === '' ? '' : $t(selectorLabel) }}
|
return false;
|
||||||
</div>
|
}
|
||||||
|
if (
|
||||||
<div class="scroll">
|
statusFilter === 'statusINACTIVE' &&
|
||||||
<div class="q-mx-md" style="display: inline-block">
|
v.status !== 'INACTIVE'
|
||||||
<StatCardComponent
|
) {
|
||||||
v-if="sortedUserStats"
|
return false;
|
||||||
:branch="
|
}
|
||||||
sortedUserStats.map((v) => ({
|
return true;
|
||||||
count: v.count,
|
})
|
||||||
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
|
.map((v) => ({
|
||||||
color: v.isHeadOffice ? 'pink' : 'purple',
|
id: v.id,
|
||||||
}))
|
img: `${v.profileImageUrl}`,
|
||||||
"
|
name:
|
||||||
:dark="$q.dark.isActive"
|
$i18n.locale === 'en-US'
|
||||||
nowrap
|
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||||
class="q-mb-md"
|
: `${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>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- main -->
|
<div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
|
||||||
<div
|
<div class="app-text-muted">
|
||||||
class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
|
{{
|
||||||
>
|
$t('recordsPage', {
|
||||||
<div>
|
resultcurrentPage: userData?.result.length,
|
||||||
<div class="row q-mb-md justify-between">
|
total: userData?.total,
|
||||||
<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>
|
|
||||||
<q-input
|
|
||||||
for="input-search"
|
|
||||||
style="width: 250px"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:label="$t('search')"
|
|
||||||
debounce="500"
|
|
||||||
v-model="inputSearch"
|
|
||||||
></q-input>
|
|
||||||
</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="row justify-between q-pt-md" v-if="currentMaxPage > 0">
|
|
||||||
<div class="app-text-muted">
|
|
||||||
{{
|
|
||||||
$t('recordsPage', {
|
|
||||||
resultcurrentPage: userData?.result.length,
|
|
||||||
total: userData?.total,
|
|
||||||
})
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
<PaginationComponent
|
|
||||||
v-model:current-page="currentPage"
|
|
||||||
v-model:max-page="currentMaxPage"
|
|
||||||
:fetch-data="async () => await fetchUserList()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<PaginationComponent
|
||||||
|
v-model:current-page="currentPage"
|
||||||
|
v-model:max-page="currentMaxPage"
|
||||||
|
:fetch-data="async () => await fetchUserList()"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1332,16 +1332,7 @@ watch([inputSearch, currentStatus], async () => {
|
||||||
|
|
||||||
<div class="column full-height no-wrap">
|
<div class="column full-height no-wrap">
|
||||||
<div v-if="isMainPage" class="column full-height">
|
<div v-if="isMainPage" class="column full-height">
|
||||||
<div class="row full-width q-pb-md q-gutter-y-md">
|
<div class="row full-width">
|
||||||
<div class="col-sm-5 col-md-3 col-12 q-mr-md">
|
|
||||||
<SelectorList
|
|
||||||
clickable
|
|
||||||
:list="selectorList"
|
|
||||||
v-model:selector="selectorLabel"
|
|
||||||
class="full-height"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- stat -->
|
<!-- stat -->
|
||||||
<div class="col-12 col-sm bordered surface-1 rounded">
|
<div class="col-12 col-sm bordered surface-1 rounded">
|
||||||
<div class="text-weight-bold text-subtitle1 q-pa-md">
|
<div class="text-weight-bold text-subtitle1 q-pa-md">
|
||||||
|
|
|
||||||
|
|
@ -1183,9 +1183,9 @@ watch(inputSearchProductAndService, async () => {
|
||||||
|
|
||||||
<div
|
<div
|
||||||
v-if="productMode === 'group' || productMode === 'type'"
|
v-if="productMode === 'group' || productMode === 'type'"
|
||||||
class="q-mb-md bordered rounded surface-1 scroll"
|
class="scroll q-mb-md"
|
||||||
>
|
>
|
||||||
<div class="q-ma-md" style="display: inline-block">
|
<div style="display: inline-block">
|
||||||
<StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
|
<StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue