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

refactor: 07, 13 => remove console logs, improve infinite scroll handling, and enhance TableReceipt component

Browse source
This commit is contained in:
puriphatt 2025-02-03 17:05:04 +07:00
parent 465f126376
commit 74f0764ae8
3 changed files with 103 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/pages/07_agencies-management/MainPage.vue
View file

@ -460,7 +460,6 @@ watch(
@load=" @load="
(_, done) => { (_, done) => {
if ($q.screen.gt.xs || page === pageMax) return; if ($q.screen.gt.xs || page === pageMax) return;
console.log('load');
page = page + 1; page = page + 1;
fetchData().then(() => done(page >= pageMax)); fetchData().then(() => done(page >= pageMax));
} }

172
src/pages/13_receipt/MainPage.vue
View file

@ -15,10 +15,8 @@ import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
import { useNavigator } from 'src/stores/navigator'; import { useNavigator } from 'src/stores/navigator';
import { columns, hslaColors } from './constants'; import { columns, hslaColors } from './constants';
import useFlowStore from 'src/stores/flow'; import useFlowStore from 'src/stores/flow';
import { useRequestList } from 'src/stores/request-list';
import { usePayment, useReceipt } from 'src/stores/payment'; import { usePayment, useReceipt } from 'src/stores/payment';
import { Receipt, PaymentDataStatus } from 'src/stores/payment/types'; import { PaymentDataStatus } from 'src/stores/payment/types';
import { Quotation } from 'src/stores/quotations';
import { QSelect, useQuasar } from 'quasar'; import { QSelect, useQuasar } from 'quasar';
const $q = useQuasar(); const $q = useQuasar();
@ -53,7 +51,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
query: pageState.inputSearch, query: pageState.inputSearch,
}); });
if (ret) { if (ret) {
data.value = ret.result; data.value = $q.screen.xs ? [...data.value, ...ret.result] : ret.result;
pageState.total = ret.total; pageState.total = ret.total;
pageMax.value = Math.ceil(ret.total / pageSize.value); pageMax.value = Math.ceil(ret.total / pageSize.value);
} }
@ -89,7 +87,6 @@ onMounted(async () => {
navigatorStore.current.title = 'receipt.title'; navigatorStore.current.title = 'receipt.title';
navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }]; navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
await fetchList({ rotateFlowId: true }); await fetchList({ rotateFlowId: true });
}); });
@ -98,9 +95,12 @@ watch(
() => pageState.inputSearch, () => pageState.inputSearch,
() => pageState.statusFilter, () => pageState.statusFilter,
() => pageSize.value, () => pageSize.value,
() => page.value,
], ],
() => fetchList({ rotateFlowId: true }), () => {
page.value = 1;
data.value = [];
fetchList({ rotateFlowId: true });
},
); );
</script> </script>
<template> <template>
@ -289,81 +289,101 @@ watch(
<NoData :not-found="!!pageState.inputSearch" /> <NoData :not-found="!!pageState.inputSearch" />
</article> </article>
<article v-else class="col surface-2 full-width scroll q-pa-md"> <article v-else class="col surface-2 full-width scroll q-pa-md">
<TableReceipt <q-infinite-scroll
:columns="columns" :offset="10"
:rows="data" @load="
:grid="pageState.gridView" (_, done) => {
@view=" if ($q.screen.gt.xs || page === pageMax) return;
(data) => triggerView({ quotationId: data.invoice.quotation.id }) page = page + 1;
fetchList().then(() => done(page >= pageMax));
}
" "
@preview="(data) => viewDocExample(data.id)"
> >
<template #grid="{ item }"> <TableReceipt
<div class="col-md-4 col-sm-6 col-12"> :columns="columns"
<QuotationCard :rows="data"
hide-action :grid="pageState.gridView"
:code="item.row.code" @view="
:title="item.row.invoice.quotation.workName" (data) =>
:status="$t(`invoice.status.${item.row.paymentStatus}`)" triggerView({ quotationId: data.invoice.quotation.id })
:badge-color="hslaColors[item.row.paymentStatus] || ''" "
:custom-data="[ @preview="(data) => viewDocExample(data.id)"
{ >
label: $t('general.customer'), <template #grid="{ item }">
value: <div class="col-md-4 col-sm-6 col-12">
item.row.invoice.quotation.customerBranch <QuotationCard
.registerName || hide-action
`${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`, :code="item.row.code"
}, :title="item.row.invoice.quotation.workName"
{ :status="$t(`invoice.status.${item.row.paymentStatus}`)"
label: $t('taskOrder.issueDate'), :badge-color="hslaColors[item.row.paymentStatus] || ''"
value: new Date( :custom-data="[
item.row.invoice.quotation.createdAt, {
).toLocaleString('th-TH', { label: $t('general.customer'),
hour12: false, value:
}), item.row.invoice.quotation.customerBranch
}, .registerName ||
{ `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
label: $t('invoice.paymentDueDate'), },
value: new Date( {
item.row.invoice.quotation.dueDate, label: $t('taskOrder.issueDate'),
).toLocaleDateString('th-TH', { value: new Date(
year: 'numeric', item.row.invoice.quotation.createdAt,
month: '2-digit', ).toLocaleString('th-TH', {
day: 'numeric', hour12: false,
}), }),
}, },
{ {
label: $t('quotation.payType'), label: $t('invoice.paymentDueDate'),
value: $t( value: new Date(
`quotation.type.${item.row.invoice.quotation.payCondition}`, item.row.invoice.quotation.dueDate,
), ).toLocaleDateString('th-TH', {
}, year: 'numeric',
{ month: '2-digit',
label: $t('preview.netValue'), day: 'numeric',
value: item.row.amount, }),
}, },
]" {
@view=" label: $t('quotation.payType'),
() => value: $t(
triggerView({ `quotation.type.${item.row.invoice.quotation.payCondition}`,
quotationId: item.row.invoice.quotation.id, ),
}) },
" {
@preview=" label: $t('preview.netValue'),
() => { value: item.row.amount,
viewDocExample(item.row.invoice.quotation.id); },
} ]"
" @view="
/> () =>
triggerView({
quotationId: item.row.invoice.quotation.id,
})
"
@preview="
() => {
viewDocExample(item.row.invoice.quotation.id);
}
"
/>
</div>
</template>
</TableReceipt>
<template v-slot:loading>
<div
v-if="$q.screen.lt.sm && page !== pageMax"
class="row justify-center"
>
<q-spinner-dots color="primary" size="40px" />
</div> </div>
</template> </template>
</TableReceipt> </q-infinite-scroll>
</article> </article>
<!-- SEC: footer content --> <!-- SEC: footer content -->
<footer <footer
class="row justify-between items-center q-px-md q-py-sm surface-2" class="row justify-between items-center q-px-md q-py-sm surface-2"
v-if="pageMax > 0" v-if="pageMax > 0 && $q.screen.gt.xs"
> >
<div class="col-4"> <div class="col-4">
<div class="row items-center no-wrap"> <div class="row items-center no-wrap">
@ -394,7 +414,11 @@ watch(
<PaginationComponent <PaginationComponent
v-model:current-page="page" v-model:current-page="page"
v-model:max-page="pageMax" v-model:max-page="pageMax"
:fetch-data="() => fetchList({ rotateFlowId: true })" :fetch-data="
() => {
fetchList({ rotateFlowId: true });
}
"
/> />
</nav> </nav>
</footer> </footer>

8
src/pages/13_receipt/TableReceipt.vue
View file

@ -75,7 +75,7 @@ defineEmits<{
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>" } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
> >
<q-tr :class="{ dark: $q.dark.isActive }" class="text-center"> <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
<q-td v-for="col in columns" :align="col.align"> <q-td v-for="col in columns" :align="col.align" :key="col.name">
<!-- NOTE: custom column will starts with # --> <!-- NOTE: custom column will starts with # -->
<template v-if="!col.name.startsWith('#')"> <template v-if="!col.name.startsWith('#')">
<span> <span>
@ -88,8 +88,10 @@ defineEmits<{
</template> </template>
<template v-if="col.name === '#order'"> <template v-if="col.name === '#order'">
{{ {{
col.field(props.row) + $q.screen.xs
(receiptStore.page - 1) * receiptStore.pageSize ? props.rowIndex + 1
: col.field(props.row) +
(receiptStore.page - 1) * receiptStore.pageSize
}} }}
</template> </template>
<template v-if="col.name === '#action'"> <template v-if="col.name === '#action'">