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

refactor: 03 => enhance customer list fetching for mobile responsiveness and adjust pagination logic

Browse source
This commit is contained in:
puriphatt 2025-01-31 16:05:03 +07:00
parent 07f0c0d47b
commit 15081f899d
2 changed files with 45 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/03_customer-management/TableEmpoloyee.vue
View file

@ -116,7 +116,11 @@ defineEmits<{
" "
> >
<q-td class="text-center" v-if="fieldSelected.includes('orderNumber')"> <q-td class="text-center" v-if="fieldSelected.includes('orderNumber')">
{{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} {{
$q.screen.xs
? props.rowIndex + 1
: (currentPage - 1) * pageSize + props.rowIndex + 1
}}
</q-td> </q-td>
<q-td v-if="fieldSelected.includes('firstName')"> <q-td v-if="fieldSelected.includes('firstName')">

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

@ -320,7 +320,7 @@ function deleteCustomerById(id: string) {
action: async () => { action: async () => {
await customerStore.deleteById(id); await customerStore.deleteById(id);
await fetchListCustomer(true); await fetchListCustomer(true, $q.screen.xs);
customerFormState.value.dialogModal = false; customerFormState.value.dialogModal = false;
flowStore.rotate(); flowStore.rotate();
}, },
@ -369,11 +369,16 @@ async function fetchListOfOptionBranch() {
// TODO: Assign (first) branch of the user as register branch of the data // TODO: Assign (first) branch of the user as register branch of the data
} }
async function fetchListCustomer(fetchStats = false) { async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
const resultList = await customerStore.fetchList({ const resultList = await customerStore.fetchList({
includeBranch: true, includeBranch: true,
page: currentPageCustomer.value, page: mobileFetch ? 1 : currentPageCustomer.value,
pageSize: pageSize.value, pageSize: mobileFetch
? listCustomer.value.length +
(total === listCustomer.value.length ? 1 : 0)
: pageSize.value,
status: status:
currentStatus.value === 'All' currentStatus.value === 'All'
? undefined ? undefined
@ -391,9 +396,9 @@ async function fetchListCustomer(fetchStats = false) {
}); });
if (resultList) { if (resultList) {
currentPageCustomer.value = resultList.page; // currentPageCustomer.value = resultList.page;
maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value); maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
$q.screen.xs $q.screen.xs && !mobileFetch
? listCustomer.value.push(...resultList.result) ? listCustomer.value.push(...resultList.result)
: (listCustomer.value = resultList.result); : (listCustomer.value = resultList.result);
} }
@ -410,11 +415,21 @@ async function fetchListEmployee(opt?: {
page?: number; page?: number;
pageSize?: number; pageSize?: number;
customerId?: string; customerId?: string;
mobileFetch?: boolean;
}) { }) {
const resultListEmployee = await employeeStore.fetchList({ const resultListEmployee = await employeeStore.fetchList({
customerId: opt?.customerId, customerId: opt?.customerId,
page: opt && opt.page ? opt.page : currentPageEmployee.value, page: opt
pageSize: opt && opt.pageSize ? opt.pageSize : pageSize.value, ? opt.mobileFetch
? 1
: opt.page || currentPageEmployee.value
: currentPageEmployee.value,
pageSize: opt
? opt.mobileFetch
? listEmployee.value.length +
(employeeStats.value === listEmployee.value.length ? 1 : 0)
: opt.pageSize || pageSize.value
: pageSize.value,
status: status:
currentStatus.value === 'All' currentStatus.value === 'All'
? undefined ? undefined
@ -429,7 +444,7 @@ async function fetchListEmployee(opt?: {
maxPageEmployee.value = Math.ceil( maxPageEmployee.value = Math.ceil(
resultListEmployee.total / pageSize.value, resultListEmployee.total / pageSize.value,
); );
$q.screen.xs $q.screen.xs && !(opt && opt.mobileFetch)
? listEmployee.value.push(...resultListEmployee.result) ? listEmployee.value.push(...resultListEmployee.result)
: (listEmployee.value = resultListEmployee.result); : (listEmployee.value = resultListEmployee.result);
} }
@ -474,7 +489,7 @@ async function toggleStatusEmployee(id: string, status: boolean) {
if (res && employeeFormState.value.drawerModal) if (res && employeeFormState.value.drawerModal)
currentFromDataEmployee.value.status = res.status; currentFromDataEmployee.value.status = res.status;
await fetchListEmployee(); await fetchListEmployee({ mobileFetch: $q.screen.xs });
flowStore.rotate(); flowStore.rotate();
} }
@ -485,7 +500,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
if (res && customerFormState.value.drawerModal) if (res && customerFormState.value.drawerModal)
customerFormData.value.status = res.status; customerFormData.value.status = res.status;
await fetchListCustomer(); await fetchListCustomer(false, $q.screen.xs);
flowStore.rotate(); flowStore.rotate();
} }
@ -535,7 +550,7 @@ async function deleteEmployeeById(opts: {
pageSize: 999, pageSize: 999,
customerId: customerFormState.value.currentCustomerId, customerId: customerFormState.value.currentCustomerId,
} }
: { fetchStats: true }, : { fetchStats: true, mobileFetch: $q.screen.xs },
); );
flowStore.rotate(); flowStore.rotate();
@ -839,8 +854,8 @@ const emptyCreateDialog = ref(false);
> >
{{ {{
currentTab === 'employer' currentTab === 'employer'
? listCustomer?.length ? statsCustomerType.PERS + statsCustomerType.CORP
: listEmployee.length : employeeStats
}} }}
</q-badge> </q-badge>
<q-btn <q-btn
@ -1208,7 +1223,7 @@ const emptyCreateDialog = ref(false);
class="col q-pa-md scroll full-width" class="col q-pa-md scroll full-width"
> >
<q-infinite-scroll <q-infinite-scroll
:offset="100" :offset="10"
@load=" @load="
(_, done) => { (_, done) => {
if ( if (
@ -1279,9 +1294,11 @@ const emptyCreateDialog = ref(false);
v-if="fieldSelected.includes('orderNumber')" v-if="fieldSelected.includes('orderNumber')"
> >
{{ {{
(currentPageCustomer - 1) * pageSize + $q.screen.xs
props.rowIndex + ? props.rowIndex + 1
1 : (currentPageCustomer - 1) * pageSize +
props.rowIndex +
1
}} }}
</q-td> </q-td>
@ -1839,7 +1856,7 @@ const emptyCreateDialog = ref(false);
class="surface-2 q-pa-md scroll col full-width" class="surface-2 q-pa-md scroll col full-width"
> >
<q-infinite-scroll <q-infinite-scroll
:offset="100" :offset="10"
@load=" @load="
(_, done) => { (_, done) => {
if ( if (
@ -2390,7 +2407,7 @@ const emptyCreateDialog = ref(false);
customerFormState.editCustomerId, customerFormState.editCustomerId,
); );
await fetchListCustomer(true); await fetchListCustomer(true, $q.screen.xs);
customerFormStore.resetForm(); customerFormStore.resetForm();
} }
" "
@ -2488,7 +2505,7 @@ const emptyCreateDialog = ref(false);
pageSize: 999, pageSize: 999,
customerId: customerFormState.currentCustomerId, customerId: customerFormState.currentCustomerId,
} }
: { fetchStats: true }, : { fetchStats: true, mobileFetch: $q.screen.xs },
); );
flowStore.rotate(); flowStore.rotate();
@ -2506,7 +2523,7 @@ const emptyCreateDialog = ref(false);
employeeConfirmUnsave(); employeeConfirmUnsave();
return true; return true;
} else { } else {
fetchListEmployee(); if ($q.screen.gt.xs) fetchListEmployee();
} }
employeeFormState.currentTab = 'personalInfo'; employeeFormState.currentTab = 'personalInfo';
@ -4449,7 +4466,7 @@ const emptyCreateDialog = ref(false);
pageSize: 999, pageSize: 999,
customerId: customerFormState.currentCustomerId, customerId: customerFormState.currentCustomerId,
} }
: undefined, : { mobileFetch: $q.screen.xs },
); );
} }