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