refactor: 07, 13 => remove console logs, improve infinite scroll handling, and enhance TableReceipt component
This commit is contained in:
puriphatt
parent
465f126376
commit
74f0764ae8
3 changed files with 103 additions and 78 deletions
|
|
@ -460,7 +460,6 @@ watch(
|
|||
@load="
|
||||
(_, done) => {
|
||||
if ($q.screen.gt.xs || page === pageMax) return;
|
||||
console.log('load');
|
||||
page = page + 1;
|
||||
fetchData().then(() => done(page >= pageMax));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,10 +15,8 @@ import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
|
|||
import { useNavigator } from 'src/stores/navigator';
|
||||
import { columns, hslaColors } from './constants';
|
||||
import useFlowStore from 'src/stores/flow';
|
||||
import { useRequestList } from 'src/stores/request-list';
|
||||
import { usePayment, useReceipt } from 'src/stores/payment';
|
||||
import { Receipt, PaymentDataStatus } from 'src/stores/payment/types';
|
||||
import { Quotation } from 'src/stores/quotations';
|
||||
import { PaymentDataStatus } from 'src/stores/payment/types';
|
||||
import { QSelect, useQuasar } from 'quasar';
|
||||
|
||||
const $q = useQuasar();
|
||||
|
|
@ -53,7 +51,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
|
|||
query: pageState.inputSearch,
|
||||
});
|
||||
if (ret) {
|
||||
data.value = ret.result;
|
||||
data.value = $q.screen.xs ? [...data.value, ...ret.result] : ret.result;
|
||||
pageState.total = ret.total;
|
||||
pageMax.value = Math.ceil(ret.total / pageSize.value);
|
||||
}
|
||||
|
|
@ -89,7 +87,6 @@ onMounted(async () => {
|
|||
|
||||
navigatorStore.current.title = 'receipt.title';
|
||||
navigatorStore.current.path = [{ text: 'receipt.caption', i18n: true }];
|
||||
|
||||
await fetchList({ rotateFlowId: true });
|
||||
});
|
||||
|
||||
|
|
@ -98,9 +95,12 @@ watch(
|
|||
() => pageState.inputSearch,
|
||||
() => pageState.statusFilter,
|
||||
() => pageSize.value,
|
||||
() => page.value,
|
||||
],
|
||||
() => fetchList({ rotateFlowId: true }),
|
||||
() => {
|
||||
page.value = 1;
|
||||
data.value = [];
|
||||
fetchList({ rotateFlowId: true });
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -289,81 +289,101 @@ watch(
|
|||
<NoData :not-found="!!pageState.inputSearch" />
|
||||
</article>
|
||||
<article v-else class="col surface-2 full-width scroll q-pa-md">
|
||||
<TableReceipt
|
||||
:columns="columns"
|
||||
:rows="data"
|
||||
:grid="pageState.gridView"
|
||||
@view="
|
||||
(data) => triggerView({ quotationId: data.invoice.quotation.id })
|
||||
<q-infinite-scroll
|
||||
:offset="10"
|
||||
@load="
|
||||
(_, done) => {
|
||||
if ($q.screen.gt.xs || page === pageMax) return;
|
||||
page = page + 1;
|
||||
fetchList().then(() => done(page >= pageMax));
|
||||
}
|
||||
"
|
||||
@preview="(data) => viewDocExample(data.id)"
|
||||
>
|
||||
<template #grid="{ item }">
|
||||
<div class="col-md-4 col-sm-6 col-12">
|
||||
<QuotationCard
|
||||
hide-action
|
||||
:code="item.row.code"
|
||||
:title="item.row.invoice.quotation.workName"
|
||||
:status="$t(`invoice.status.${item.row.paymentStatus}`)"
|
||||
:badge-color="hslaColors[item.row.paymentStatus] || ''"
|
||||
:custom-data="[
|
||||
{
|
||||
label: $t('general.customer'),
|
||||
value:
|
||||
item.row.invoice.quotation.customerBranch
|
||||
.registerName ||
|
||||
`${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
|
||||
},
|
||||
{
|
||||
label: $t('taskOrder.issueDate'),
|
||||
value: new Date(
|
||||
item.row.invoice.quotation.createdAt,
|
||||
).toLocaleString('th-TH', {
|
||||
hour12: false,
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: $t('invoice.paymentDueDate'),
|
||||
value: new Date(
|
||||
item.row.invoice.quotation.dueDate,
|
||||
).toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: 'numeric',
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: $t('quotation.payType'),
|
||||
value: $t(
|
||||
`quotation.type.${item.row.invoice.quotation.payCondition}`,
|
||||
),
|
||||
},
|
||||
{
|
||||
label: $t('preview.netValue'),
|
||||
value: item.row.amount,
|
||||
},
|
||||
]"
|
||||
@view="
|
||||
() =>
|
||||
triggerView({
|
||||
quotationId: item.row.invoice.quotation.id,
|
||||
})
|
||||
"
|
||||
@preview="
|
||||
() => {
|
||||
viewDocExample(item.row.invoice.quotation.id);
|
||||
}
|
||||
"
|
||||
/>
|
||||
<TableReceipt
|
||||
:columns="columns"
|
||||
:rows="data"
|
||||
:grid="pageState.gridView"
|
||||
@view="
|
||||
(data) =>
|
||||
triggerView({ quotationId: data.invoice.quotation.id })
|
||||
"
|
||||
@preview="(data) => viewDocExample(data.id)"
|
||||
>
|
||||
<template #grid="{ item }">
|
||||
<div class="col-md-4 col-sm-6 col-12">
|
||||
<QuotationCard
|
||||
hide-action
|
||||
:code="item.row.code"
|
||||
:title="item.row.invoice.quotation.workName"
|
||||
:status="$t(`invoice.status.${item.row.paymentStatus}`)"
|
||||
:badge-color="hslaColors[item.row.paymentStatus] || ''"
|
||||
:custom-data="[
|
||||
{
|
||||
label: $t('general.customer'),
|
||||
value:
|
||||
item.row.invoice.quotation.customerBranch
|
||||
.registerName ||
|
||||
`${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
|
||||
},
|
||||
{
|
||||
label: $t('taskOrder.issueDate'),
|
||||
value: new Date(
|
||||
item.row.invoice.quotation.createdAt,
|
||||
).toLocaleString('th-TH', {
|
||||
hour12: false,
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: $t('invoice.paymentDueDate'),
|
||||
value: new Date(
|
||||
item.row.invoice.quotation.dueDate,
|
||||
).toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: 'numeric',
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: $t('quotation.payType'),
|
||||
value: $t(
|
||||
`quotation.type.${item.row.invoice.quotation.payCondition}`,
|
||||
),
|
||||
},
|
||||
{
|
||||
label: $t('preview.netValue'),
|
||||
value: item.row.amount,
|
||||
},
|
||||
]"
|
||||
@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>
|
||||
</template>
|
||||
</TableReceipt>
|
||||
</q-infinite-scroll>
|
||||
</article>
|
||||
|
||||
<!-- SEC: footer content -->
|
||||
<footer
|
||||
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="row items-center no-wrap">
|
||||
|
|
@ -394,7 +414,11 @@ watch(
|
|||
<PaginationComponent
|
||||
v-model:current-page="page"
|
||||
v-model:max-page="pageMax"
|
||||
:fetch-data="() => fetchList({ rotateFlowId: true })"
|
||||
:fetch-data="
|
||||
() => {
|
||||
fetchList({ rotateFlowId: true });
|
||||
}
|
||||
"
|
||||
/>
|
||||
</nav>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ defineEmits<{
|
|||
} & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
|
||||
>
|
||||
<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 # -->
|
||||
<template v-if="!col.name.startsWith('#')">
|
||||
<span>
|
||||
|
|
@ -88,8 +88,10 @@ defineEmits<{
|
|||
</template>
|
||||
<template v-if="col.name === '#order'">
|
||||
{{
|
||||
col.field(props.row) +
|
||||
(receiptStore.page - 1) * receiptStore.pageSize
|
||||
$q.screen.xs
|
||||
? props.rowIndex + 1
|
||||
: col.field(props.row) +
|
||||
(receiptStore.page - 1) * receiptStore.pageSize
|
||||
}}
|
||||
</template>
|
||||
<template v-if="col.name === '#action'">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue