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

refactor: 05 => xs scroll & adjust TableQuotation row index calculation

Browse source
This commit is contained in:
puriphatt 2025-02-03 11:22:33 +07:00
parent 8a937dfa31
commit 1fc6b39e37
2 changed files with 137 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/05_quotation/TableQuotation.vue
View file

@ -16,12 +16,16 @@ const props = withDefaults(
grid?: boolean;
visibleColumns?: string[];
hideEdit?: boolean;
page?: number;
pageSize?: number;
}>(),
{
row: () => [],
column: () => [],
grid: false,
visibleColumns: () => [],
page: 1,
pageSize: 30,
},
);
@ -64,7 +68,11 @@ defineEmits<{
<template v-slot:body="props">
<q-tr :class="{ urgent: props.row.urgent }">
<q-td v-if="visibleColumns.includes('order')">
{{ props.rowIndex + 1 }}
{{
$q.screen.xs
? props.rowIndex + 1
: (page - 1) * pageSize + props.rowIndex + 1
}}
</q-td>
<q-td v-if="visibleColumns.includes('workName')">

69
src/pages/05_quotation/MainPage.vue
View file

@ -278,10 +278,10 @@ onMounted(async () => {
flowStore.rotate();
});
async function fetchQuotationList() {
async function fetchQuotationList(mobileFetch?: boolean) {
{
const ret = await quotationStore.getQuotationList({
page: quotationPage.value,
page: mobileFetch ? 1 : quotationPage.value,
pageSize: quotationPageSize.value,
status:
pageState.currentTab !== 'Issued'
@ -301,7 +301,10 @@ async function fetchQuotationList() {
});
if (ret) {
quotationData.value = ret.result;
quotationData.value =
$q.screen.xs && !mobileFetch
? [...quotationData.value, ...ret.result]
: ret.result;
quotationPageMax.value = Math.ceil(ret.total / quotationPageSize.value);
pageState.total = ret.total;
}
@ -319,7 +322,11 @@ async function fetchQuotationList() {
watch(
[() => pageState.currentTab, () => pageState.inputSearch, quotationPageSize],
fetchQuotationList,
() => {
quotationPage.value = 1;
quotationData.value = [];
fetchQuotationList();
},
);
async function storeDataLocal(id: string) {
@ -383,19 +390,11 @@ async function storeDataLocal(id: string) {
"
>
{{
pageState.currentTab === 'Issued'
? quotationStats.issued
: pageState.currentTab === 'Accepted'
? quotationStats.accepted
: pageState.currentTab === 'Expired'
? quotationStats.expired
: pageState.currentTab === 'Invoice'
? quotationStats.paymentInProcess
: pageState.currentTab === 'PaymentSuccess'
? quotationStats.paymentSuccess
: pageState.currentTab === 'ProcessComplete'
? quotationStats.processComplete
: 0
quotationStats[
pageState.currentTab === 'Invoice'
? 'paymentInProcess'
: (pageState.currentTab.toLowerCase() as keyof typeof quotationStats)
]
}}
</q-badge>
<q-btn
@ -625,7 +624,23 @@ async function storeDataLocal(id: string) {
</article>
<article v-else class="col surface-2 full-width scroll">
<div class="q-pa-md">
<q-infinite-scroll
:key="pageState.currentTab"
:offset="100"
@load="
(_, done) => {
if ($q.screen.gt.xs) return;
quotationPage = quotationPage + 1;
fetchQuotationList().then(() => {
done(quotationPage >= quotationPageMax);
});
}
"
>
<TableQuotation
:page="quotationPage"
:page-size="quotationPageSize"
:columns="columnQuotation"
:rows="quotationData"
:visible-columns="pageState.fieldSelected"
@ -674,7 +689,9 @@ async function storeDataLocal(id: string) {
});
})()
"
:status="$t(`quotation.status.${item.row.quotationStatus}`)"
:status="
$t(`quotation.status.${item.row.quotationStatus}`)
"
:worker-count="item.row._count.worker"
:worker-max="item.row.workerMax || item.row._count.worker"
:customer-name="
@ -699,7 +716,8 @@ async function storeDataLocal(id: string) {
statusDialog: 'info',
quotationId: item.row.id,
branchId:
item.row.customerBranch.customer.registeredBranchId,
item.row.customerBranch.customer
.registeredBranchId,
});
}
"
@ -718,13 +736,22 @@ async function storeDataLocal(id: string) {
</div>
</template>
</TableQuotation>
<template v-slot:loading>
<div
v-if="$q.screen.lt.sm && quotationPage !== quotationPageMax"
class="row justify-center"
>
<q-spinner-dots color="primary" size="40px" />
</div>
</template>
</q-infinite-scroll>
</div>
</article>
<!-- SEC: footer content -->
<footer
class="row justify-between items-center q-px-md q-py-sm surface-2"
v-if="quotationPageMax > 0"
v-if="quotationPageMax > 0 && $q.screen.gt.xs"
>
<div class="col-4">
<div class="row items-center no-wrap">
@ -755,7 +782,7 @@ async function storeDataLocal(id: string) {
<PaginationComponent
v-model:current-page="quotationPage"
v-model:max-page="quotationPageMax"
:fetch-data="fetchQuotationList"
:fetch-data="() => fetchQuotationList()"
/>
</nav>
</footer>