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

refactor: paging search

Browse source
This commit is contained in:
Methapon2001 2024-06-28 13:27:38 +07:00
parent 33d98b4542
commit 65cc35bc33
1 changed files with 68 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

178
src/pages/03_customer-management/MainPage.vue
View file

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