refactor: paging search
This commit is contained in:
Methapon2001
parent
33d98b4542
commit
65cc35bc33
1 changed files with 68 additions and 110 deletions
|
|
@ -1,8 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { computed, ref, watch, toRaw } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
||||
import { Pagination } from 'src/stores/types';
|
||||
import useCustomerStore from 'src/stores/customer';
|
||||
import useEmployeeStore from 'src/stores/employee';
|
||||
import useOptionStore from 'src/stores/options';
|
||||
|
|
@ -39,7 +37,6 @@ import {
|
|||
Customer,
|
||||
CustomerUpdate,
|
||||
CustomerBranch,
|
||||
CustomerBranchCreate,
|
||||
CustomerType,
|
||||
} from 'stores/customer/types';
|
||||
import {
|
||||
|
|
@ -47,7 +44,6 @@ import {
|
|||
Employee,
|
||||
EmployeeWork,
|
||||
EmployeeCheckup,
|
||||
EmployeeOther,
|
||||
} from 'stores/employee/types';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
|
|
@ -57,7 +53,6 @@ import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormE
|
|||
import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
|
||||
import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
|
||||
import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { dialog, calculateAge } from 'src/stores/utils';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import useFlowStore from 'src/stores/flow';
|
||||
|
|
@ -72,7 +67,6 @@ const {
|
|||
editById,
|
||||
fetchListById,
|
||||
createBranch,
|
||||
deleteBranchById,
|
||||
editBranchById,
|
||||
fetchListBranch,
|
||||
fetchListBranchById,
|
||||
|
|
@ -234,7 +228,10 @@ const profileUrl = ref<string | null>('');
|
|||
const infoDrawer = ref(false);
|
||||
const infoDrawerEdit = ref(false);
|
||||
const isMainPage = ref<boolean>(true);
|
||||
const statsCustomerType = ref<CustomerStats>();
|
||||
const statsCustomerType = ref<CustomerStats>({
|
||||
CORP: 0,
|
||||
PERS: 0,
|
||||
});
|
||||
const currentCustomerId = ref<string>('');
|
||||
const dialogInputCustomerBranchForm = ref<boolean>(false);
|
||||
const currentCustomer = ref<Customer>();
|
||||
|
|
@ -257,7 +254,7 @@ const pageSizeEmployee = ref<number>(30);
|
|||
const currentBranchId = ref<string>('');
|
||||
const currentCustomerName = ref<string>('');
|
||||
const currentCustomerUrlImage = ref<string | null>(null);
|
||||
const genderselector = ref<string>('');
|
||||
const genderSelector = ref<string>('');
|
||||
|
||||
const totalCustomer = ref<number>(0);
|
||||
|
||||
|
|
@ -600,6 +597,7 @@ function deleteCustomerById(id: string) {
|
|||
|
||||
if (resultList) listCustomer.value = resultList.result;
|
||||
infoDrawer.value = false;
|
||||
flowStore.rotate();
|
||||
},
|
||||
cancel: () => {},
|
||||
});
|
||||
|
|
@ -678,32 +676,6 @@ async function onSubmitCustomerBranch() {
|
|||
flowStore.rotate();
|
||||
}
|
||||
|
||||
const resultSearch = ref<(Customer & { branch: CustomerBranch[] })[]>();
|
||||
const resultSearchEmployee = ref();
|
||||
|
||||
async function searchCustomer() {
|
||||
const resultList = await fetchList({
|
||||
query: inputSearch.value,
|
||||
includeBranch: true,
|
||||
});
|
||||
|
||||
if (resultList) {
|
||||
resultSearch.value = resultList.result;
|
||||
}
|
||||
flowStore.rotate();
|
||||
}
|
||||
|
||||
async function searchEmployee() {
|
||||
const resultList = await employeeStore.fetchList({
|
||||
query: inputSearch.value,
|
||||
});
|
||||
|
||||
if (resultList) {
|
||||
resultSearchEmployee.value = resultList.result;
|
||||
}
|
||||
flowStore.rotate();
|
||||
}
|
||||
|
||||
async function fetchListCustomer() {
|
||||
const resultList = await fetchList({
|
||||
includeBranch: true,
|
||||
|
|
@ -715,6 +687,7 @@ async function fetchListCustomer() {
|
|||
: currentStatus.value === 'ACTIVE'
|
||||
? 'ACTIVE'
|
||||
: 'INACTIVE',
|
||||
query: inputSearch.value,
|
||||
});
|
||||
|
||||
if (resultList) {
|
||||
|
|
@ -727,13 +700,20 @@ async function fetchListCustomer() {
|
|||
}
|
||||
}
|
||||
|
||||
async function fetchListEmployee(param?: {
|
||||
gender?: string;
|
||||
status?: 'CREATED' | 'ACTIVE' | 'INACTIVE' | undefined;
|
||||
}) {
|
||||
const resultListEmployee = await employeeStore.fetchList(param);
|
||||
async function fetchListEmployee() {
|
||||
const resultListEmployee = await employeeStore.fetchList({
|
||||
page: currentPageCustomer.value,
|
||||
pageSize: pageSizeCustomer.value,
|
||||
status:
|
||||
currentStatus.value === 'All'
|
||||
? undefined
|
||||
: currentStatus.value === 'ACTIVE'
|
||||
? 'ACTIVE'
|
||||
: 'INACTIVE',
|
||||
query: inputSearch.value,
|
||||
gender: genderSelector.value,
|
||||
});
|
||||
if (resultListEmployee) {
|
||||
currentPageEmployee.value = resultListEmployee.page;
|
||||
maxPageEmployee.value = Math.ceil(
|
||||
resultListEmployee.total / pageSizeEmployee.value,
|
||||
);
|
||||
|
|
@ -1106,8 +1086,6 @@ onMounted(async () => {
|
|||
});
|
||||
|
||||
if (resultStats) {
|
||||
totalCustomer.value = resultStats.CORP + resultStats.PERS;
|
||||
|
||||
statsCustomerType.value = resultStats;
|
||||
}
|
||||
|
||||
|
|
@ -1222,33 +1200,24 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
watch(genderselector, async (gender) => {
|
||||
await fetchListEmployee({ gender: gender });
|
||||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(currentStatus, async () => {
|
||||
if (selectorLabel.value === 'EMPLOYER') {
|
||||
await fetchListCustomer();
|
||||
} else {
|
||||
await fetchListEmployee({
|
||||
status:
|
||||
currentStatus.value === 'All'
|
||||
? undefined
|
||||
: currentStatus.value === 'ACTIVE'
|
||||
? 'ACTIVE'
|
||||
: 'INACTIVE',
|
||||
});
|
||||
}
|
||||
watch(genderSelector, async () => {
|
||||
await fetchListEmployee();
|
||||
flowStore.rotate();
|
||||
});
|
||||
|
||||
watch(selectorLabel, async () => {
|
||||
if (inputSearch.value) {
|
||||
inputSearch.value = undefined;
|
||||
resultSearch.value = undefined;
|
||||
resultSearchEmployee.value = undefined;
|
||||
if (inputSearch.value) inputSearch.value = undefined;
|
||||
});
|
||||
|
||||
watch([inputSearch, currentStatus], async () => {
|
||||
if (selectorLabel.value === 'EMPLOYEE') {
|
||||
currentPageEmployee.value = 1;
|
||||
await fetchListEmployee();
|
||||
} else {
|
||||
currentPageCustomer.value = 1;
|
||||
await fetchListCustomer();
|
||||
}
|
||||
flowStore.rotate();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1368,7 +1337,7 @@ watch(selectorLabel, async () => {
|
|||
/>
|
||||
<q-btn-toggle
|
||||
v-else
|
||||
v-model="genderselector"
|
||||
v-model="genderSelector"
|
||||
id="btn-mode"
|
||||
class="no-shadow"
|
||||
padding="0px"
|
||||
|
|
@ -1384,9 +1353,9 @@ watch(selectorLabel, async () => {
|
|||
class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
|
||||
@click="
|
||||
async () => {
|
||||
if (genderselector === 'female') {
|
||||
if (genderSelector === 'female') {
|
||||
await fetchListEmployee();
|
||||
genderselector = '';
|
||||
genderSelector = '';
|
||||
}
|
||||
}
|
||||
"
|
||||
|
|
@ -1407,9 +1376,9 @@ watch(selectorLabel, async () => {
|
|||
class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
|
||||
@click="
|
||||
async () => {
|
||||
if (genderselector === 'male') {
|
||||
if (genderSelector === 'male') {
|
||||
await fetchListEmployee();
|
||||
genderselector = '';
|
||||
genderSelector = '';
|
||||
}
|
||||
}
|
||||
"
|
||||
|
|
@ -1433,9 +1402,6 @@ watch(selectorLabel, async () => {
|
|||
:bg-color="$q.dark.isActive ? 'dark' : 'white'"
|
||||
v-model="inputSearch"
|
||||
debounce="200"
|
||||
@update:model-value="
|
||||
selectorLabel === 'EMPLOYEE' ? searchEmployee() : searchCustomer()
|
||||
"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
|
|
@ -1484,26 +1450,21 @@ watch(selectorLabel, async () => {
|
|||
"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
listCustomer.length === 0 ||
|
||||
(resultSearch?.length === 0 && inputSearch !== undefined)
|
||||
"
|
||||
v-if="listCustomer.length === 0"
|
||||
class="row full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData />
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="listCustomer.length !== 0 && resultSearch?.length !== 0"
|
||||
v-if="listCustomer.length !== 0"
|
||||
class="row full-width customer-row"
|
||||
:style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<UsersDetailCardComponent
|
||||
v-for="i in inputSearch !== undefined
|
||||
? resultSearch ?? []
|
||||
: listCustomer"
|
||||
v-for="i in listCustomer"
|
||||
:key="i.id"
|
||||
class="hover-card"
|
||||
:color="i.customerType === 'CORP' ? 'purple' : 'green'"
|
||||
|
|
@ -1599,43 +1560,39 @@ watch(selectorLabel, async () => {
|
|||
"
|
||||
>
|
||||
<div
|
||||
v-if="
|
||||
listEmployee.length === 0 || resultSearchEmployee?.length === 0
|
||||
"
|
||||
v-if="listEmployee.length === 0"
|
||||
class="row full-width items-center justify-center"
|
||||
style="min-height: 250px"
|
||||
>
|
||||
<NoData />
|
||||
<NoData :not-found="!!inputSearch" />
|
||||
</div>
|
||||
|
||||
<div v-if="listEmployee.length !== 0">
|
||||
<PersonCard
|
||||
history
|
||||
:list="
|
||||
(!!inputSearch ? resultSearchEmployee ?? [] : listEmployee).map(
|
||||
(v: Employee) => ({
|
||||
disabled: v.status === 'INACTIVE',
|
||||
img: v.profileImageUrl,
|
||||
id: v.id,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
badge: v.code,
|
||||
detail: [
|
||||
{
|
||||
label: $t('personnelCardNationality'),
|
||||
value: v.nationality,
|
||||
},
|
||||
{
|
||||
label: $t('personnelCardAge'),
|
||||
value: calculateAge(v.dateOfBirth),
|
||||
},
|
||||
],
|
||||
}),
|
||||
) || []
|
||||
listEmployee.map((v: Employee) => ({
|
||||
disabled: v.status === 'INACTIVE',
|
||||
img: v.profileImageUrl,
|
||||
id: v.id,
|
||||
name:
|
||||
$i18n.locale === 'en-US'
|
||||
? `${v.firstNameEN} ${v.lastNameEN}`
|
||||
: `${v.firstName} ${v.lastName}`,
|
||||
male: v.gender === 'male',
|
||||
female: v.gender === 'female',
|
||||
badge: v.code,
|
||||
detail: [
|
||||
{
|
||||
label: $t('personnelCardNationality'),
|
||||
value: v.nationality,
|
||||
},
|
||||
{
|
||||
label: $t('personnelCardAge'),
|
||||
value: calculateAge(v.dateOfBirth),
|
||||
},
|
||||
],
|
||||
}))
|
||||
"
|
||||
@history="openHistory"
|
||||
@update-card="openDialogInputForm"
|
||||
|
|
@ -1659,7 +1616,8 @@ watch(selectorLabel, async () => {
|
|||
|
||||
<template
|
||||
v-if="
|
||||
(totalCustomer === 0 && selectorLabel === 'EMPLOYER') ||
|
||||
(statsCustomerType.CORP + statsCustomerType.PERS &&
|
||||
selectorLabel === 'EMPLOYER') ||
|
||||
(statsEmployee === 0 && selectorLabel === 'EMPLOYEE')
|
||||
"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue