refactor: 05 => xs scroll & adjust TableQuotation row index calculation
This commit is contained in:
puriphatt
parent
8a937dfa31
commit
1fc6b39e37
2 changed files with 137 additions and 102 deletions
|
|
@ -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')">
|
||||
|
|
|
|||
|
|
@ -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,106 +624,134 @@ async function storeDataLocal(id: string) {
|
|||
</article>
|
||||
<article v-else class="col surface-2 full-width scroll">
|
||||
<div class="q-pa-md">
|
||||
<TableQuotation
|
||||
:columns="columnQuotation"
|
||||
:rows="quotationData"
|
||||
:visible-columns="pageState.fieldSelected"
|
||||
:grid="pageState.gridView"
|
||||
:hide-edit="pageState.currentTab !== 'Issued'"
|
||||
@preview="(id: any) => storeDataLocal(id)"
|
||||
@view="
|
||||
(item) => {
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'info',
|
||||
quotationId: item.id,
|
||||
branchId: item.customerBranch.customer.registeredBranchId,
|
||||
<q-infinite-scroll
|
||||
:key="pageState.currentTab"
|
||||
:offset="100"
|
||||
@load="
|
||||
(_, done) => {
|
||||
if ($q.screen.gt.xs) return;
|
||||
quotationPage = quotationPage + 1;
|
||||
|
||||
fetchQuotationList().then(() => {
|
||||
done(quotationPage >= quotationPageMax);
|
||||
});
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
(item) =>
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'edit',
|
||||
quotationId: item.id,
|
||||
branchId: item.customerBranch.customer.registeredBranchId,
|
||||
})
|
||||
"
|
||||
@delete="(id) => triggerDialogDeleteQuottaion(id)"
|
||||
>
|
||||
<template #grid="{ item }">
|
||||
<div class="col-md-4 col-sm-6 col-12 column">
|
||||
<QuotationCard
|
||||
class="col"
|
||||
hide-kebab-delete
|
||||
:hide-kebab-edit="!(pageState.currentTab === 'Issued')"
|
||||
:urgent="item.row.urgent"
|
||||
:code="item.row.code"
|
||||
:title="item.row.workName"
|
||||
:created-at="
|
||||
new Date(item.row.createdAt).toLocaleString('th-TH', {
|
||||
hour12: false,
|
||||
})
|
||||
"
|
||||
:valid-until="
|
||||
(() => {
|
||||
const date = new Date(item.row.dueDate);
|
||||
date.setHours(23, 59, 59, 0);
|
||||
return date.toLocaleString('th-TH', {
|
||||
<TableQuotation
|
||||
:page="quotationPage"
|
||||
:page-size="quotationPageSize"
|
||||
:columns="columnQuotation"
|
||||
:rows="quotationData"
|
||||
:visible-columns="pageState.fieldSelected"
|
||||
:grid="pageState.gridView"
|
||||
:hide-edit="pageState.currentTab !== 'Issued'"
|
||||
@preview="(id: any) => storeDataLocal(id)"
|
||||
@view="
|
||||
(item) => {
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'info',
|
||||
quotationId: item.id,
|
||||
branchId: item.customerBranch.customer.registeredBranchId,
|
||||
});
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
(item) =>
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'edit',
|
||||
quotationId: item.id,
|
||||
branchId: item.customerBranch.customer.registeredBranchId,
|
||||
})
|
||||
"
|
||||
@delete="(id) => triggerDialogDeleteQuottaion(id)"
|
||||
>
|
||||
<template #grid="{ item }">
|
||||
<div class="col-md-4 col-sm-6 col-12 column">
|
||||
<QuotationCard
|
||||
class="col"
|
||||
hide-kebab-delete
|
||||
:hide-kebab-edit="!(pageState.currentTab === 'Issued')"
|
||||
:urgent="item.row.urgent"
|
||||
:code="item.row.code"
|
||||
:title="item.row.workName"
|
||||
:created-at="
|
||||
new Date(item.row.createdAt).toLocaleString('th-TH', {
|
||||
hour12: false,
|
||||
});
|
||||
})()
|
||||
"
|
||||
:status="$t(`quotation.status.${item.row.quotationStatus}`)"
|
||||
:worker-count="item.row._count.worker"
|
||||
:worker-max="item.row.workerMax || item.row._count.worker"
|
||||
:customer-name="
|
||||
item.row.customerBranch.registerName ||
|
||||
`${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
|
||||
"
|
||||
:reporter="
|
||||
$i18n.locale === 'eng'
|
||||
? item.row.createdBy.firstNameEN +
|
||||
' ' +
|
||||
item.row.createdBy.lastNameEN
|
||||
: item.row.createdBy.firstName +
|
||||
' ' +
|
||||
item.row.createdBy.lastName
|
||||
"
|
||||
:total-price="item.row.finalPrice"
|
||||
:badge-color="hslaColors[item.row.quotationStatus] || ''"
|
||||
@preview="storeDataLocal(item.row.id)"
|
||||
@view="
|
||||
() => {
|
||||
})
|
||||
"
|
||||
:valid-until="
|
||||
(() => {
|
||||
const date = new Date(item.row.dueDate);
|
||||
date.setHours(23, 59, 59, 0);
|
||||
return date.toLocaleString('th-TH', {
|
||||
hour12: false,
|
||||
});
|
||||
})()
|
||||
"
|
||||
:status="
|
||||
$t(`quotation.status.${item.row.quotationStatus}`)
|
||||
"
|
||||
:worker-count="item.row._count.worker"
|
||||
:worker-max="item.row.workerMax || item.row._count.worker"
|
||||
:customer-name="
|
||||
item.row.customerBranch.registerName ||
|
||||
`${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
|
||||
"
|
||||
:reporter="
|
||||
$i18n.locale === 'eng'
|
||||
? item.row.createdBy.firstNameEN +
|
||||
' ' +
|
||||
item.row.createdBy.lastNameEN
|
||||
: item.row.createdBy.firstName +
|
||||
' ' +
|
||||
item.row.createdBy.lastName
|
||||
"
|
||||
:total-price="item.row.finalPrice"
|
||||
:badge-color="hslaColors[item.row.quotationStatus] || ''"
|
||||
@preview="storeDataLocal(item.row.id)"
|
||||
@view="
|
||||
() => {
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'info',
|
||||
quotationId: item.row.id,
|
||||
branchId:
|
||||
item.row.customerBranch.customer
|
||||
.registeredBranchId,
|
||||
});
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'info',
|
||||
statusDialog: 'edit',
|
||||
quotationId: item.row.id,
|
||||
branchId:
|
||||
item.row.customerBranch.customer.registeredBranchId,
|
||||
});
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
triggerQuotationDialog({
|
||||
statusDialog: 'edit',
|
||||
quotationId: item.row.id,
|
||||
branchId:
|
||||
item.row.customerBranch.customer.registeredBranchId,
|
||||
})
|
||||
"
|
||||
@link="triggerReceiptDialog(item.row)"
|
||||
@upload="console.log('upload')"
|
||||
@delete="triggerDialogDeleteQuottaion(item.row.id)"
|
||||
/>
|
||||
})
|
||||
"
|
||||
@link="triggerReceiptDialog(item.row)"
|
||||
@upload="console.log('upload')"
|
||||
@delete="triggerDialogDeleteQuottaion(item.row.id)"
|
||||
/>
|
||||
</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>
|
||||
</TableQuotation>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue