refactor: 10 => enhance infinite scroll functionality and improve TableInvoice component structure
This commit is contained in:
puriphatt
parent
74f0764ae8
commit
00e8782ca5
2 changed files with 98 additions and 74 deletions
|
|
@ -16,10 +16,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 { useInvoice } from 'src/stores/payment';
|
import { useInvoice } from 'src/stores/payment';
|
||||||
import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
|
import { Invoice, PaymentDataStatus } from 'src/stores/payment/types';
|
||||||
import { Quotation } from 'src/stores/quotations';
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const navigatorStore = useNavigator();
|
const navigatorStore = useNavigator();
|
||||||
|
|
@ -60,7 +58,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
|
||||||
debitNoteOnly: false,
|
debitNoteOnly: false,
|
||||||
});
|
});
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
@ -122,9 +120,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>
|
||||||
|
|
@ -328,80 +329,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">
|
||||||
<TableInvoice
|
<q-infinite-scroll
|
||||||
:columns="columns"
|
:offset="100"
|
||||||
:rows="data"
|
@load="
|
||||||
:grid="pageState.gridView"
|
(_, done) => {
|
||||||
@view="(quotationId) => triggerView({ quotationId })"
|
if ($q.screen.gt.xs || page === pageMax) return;
|
||||||
@preview="(quotationId) => viewDocExample(quotationId)"
|
page = page + 1;
|
||||||
|
fetchList({ rotateFlowId: true }).then(() =>
|
||||||
|
done(page >= pageMax),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<template #grid="{ item }">
|
<TableInvoice
|
||||||
<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="(quotationId) => triggerView({ quotationId })"
|
||||||
:title="item.row.quotation.workName"
|
@preview="(quotationId) => viewDocExample(quotationId)"
|
||||||
:status="
|
>
|
||||||
$t(`invoice.status.${item.row.payment.paymentStatus}`)
|
<template #grid="{ item }">
|
||||||
"
|
<div class="col-md-4 col-sm-6 col-12">
|
||||||
:badge-color="
|
<QuotationCard
|
||||||
hslaColors[item.row.payment.paymentStatus] || ''
|
hide-action
|
||||||
"
|
:code="item.row.code"
|
||||||
:custom-data="[
|
:title="item.row.quotation.workName"
|
||||||
{
|
:status="
|
||||||
label: $t('general.customer'),
|
$t(`invoice.status.${item.row.payment.paymentStatus}`)
|
||||||
value:
|
"
|
||||||
item.row.quotation.customerBranch.registerName ||
|
:badge-color="
|
||||||
`${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
|
hslaColors[item.row.payment.paymentStatus] || ''
|
||||||
},
|
"
|
||||||
{
|
:custom-data="[
|
||||||
label: $t('taskOrder.issueDate'),
|
{
|
||||||
value: new Date(item.row.createdAt).toLocaleString(
|
label: $t('general.customer'),
|
||||||
'th-TH',
|
value:
|
||||||
{
|
item.row.quotation.customerBranch.registerName ||
|
||||||
hour12: false,
|
`${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
|
||||||
},
|
},
|
||||||
),
|
{
|
||||||
},
|
label: $t('taskOrder.issueDate'),
|
||||||
{
|
value: new Date(item.row.createdAt).toLocaleString(
|
||||||
label: $t('invoice.paymentDueDate'),
|
'th-TH',
|
||||||
value: new Date(
|
{
|
||||||
item.row.quotation.dueDate,
|
hour12: false,
|
||||||
).toLocaleDateString('th-TH', {
|
},
|
||||||
year: 'numeric',
|
),
|
||||||
month: '2-digit',
|
},
|
||||||
day: 'numeric',
|
{
|
||||||
}),
|
label: $t('invoice.paymentDueDate'),
|
||||||
},
|
value: new Date(
|
||||||
{
|
item.row.quotation.dueDate,
|
||||||
label: $t('quotation.payType'),
|
).toLocaleDateString('th-TH', {
|
||||||
value: $t(
|
year: 'numeric',
|
||||||
`quotation.type.${item.row.quotation.payCondition}`,
|
month: '2-digit',
|
||||||
),
|
day: 'numeric',
|
||||||
},
|
}),
|
||||||
{
|
},
|
||||||
label: $t('preview.netValue'),
|
{
|
||||||
value: item.row.amount,
|
label: $t('quotation.payType'),
|
||||||
},
|
value: $t(
|
||||||
]"
|
`quotation.type.${item.row.quotation.payCondition}`,
|
||||||
@view="
|
),
|
||||||
() => triggerView({ quotationId: item.row.quotation.id })
|
},
|
||||||
"
|
{
|
||||||
@preview="
|
label: $t('preview.netValue'),
|
||||||
() => {
|
value: item.row.amount,
|
||||||
viewDocExample(item.row.quotation.id);
|
},
|
||||||
}
|
]"
|
||||||
"
|
@view="
|
||||||
/>
|
() => triggerView({ quotationId: item.row.quotation.id })
|
||||||
|
"
|
||||||
|
@preview="
|
||||||
|
() => {
|
||||||
|
viewDocExample(item.row.quotation.id);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</TableInvoice>
|
||||||
|
<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>
|
||||||
</TableInvoice>
|
</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">
|
||||||
|
|
|
||||||
|
|
@ -79,7 +79,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>
|
||||||
|
|
@ -92,8 +92,10 @@ defineEmits<{
|
||||||
</template>
|
</template>
|
||||||
<template v-if="col.name === '#order'">
|
<template v-if="col.name === '#order'">
|
||||||
{{
|
{{
|
||||||
col.field(props.row) +
|
$q.screen.xs
|
||||||
(invoiceStore.page - 1) * invoiceStore.pageSize
|
? props.rowIndex + 1
|
||||||
|
: col.field(props.row) +
|
||||||
|
(invoiceStore.page - 1) * invoiceStore.pageSize
|
||||||
}}
|
}}
|
||||||
</template>
|
</template>
|
||||||
<template v-if="col.name === '#status'">
|
<template v-if="col.name === '#status'">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue