refactor: use page size component

This commit is contained in:
Methapon Metanipat 2024-11-15 11:36:51 +07:00
parent c2b3fe68f6
commit 0c8e314c8b
5 changed files with 29 additions and 135 deletions

View file

@ -41,6 +41,7 @@ import {
import { useCustomerForm } from 'src/pages/03_customer-management/form';
import { Quotation } from 'src/stores/quotations/types';
import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
const quotationFormStore = useQuotationForm();
const customerFormStore = useCustomerForm();
@ -307,8 +308,10 @@ async function fetchQuotationList() {
flowStore.rotate();
}
watch(() => pageState.currentTab, fetchQuotationList);
watch(() => pageState.inputSearch, fetchQuotationList);
watch(
[() => pageState.currentTab, () => pageState.inputSearch, quotationPageSize],
fetchQuotationList,
);
async function storeDataLocal(id: string) {
await quotationFormStore.assignFormData(id, 'assign');
@ -692,28 +695,7 @@ async function storeDataLocal(id: string) {
<div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
{{ $t('general.recordPerPage') }}
</div>
<div>
<q-btn-dropdown
dense
unelevated
:label="quotationPageSize"
class="bordered q-pl-md"
>
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
:key="v"
clickable
v-close-popup
@click="quotationPageSize = v"
>
<q-item-section>
<q-item-label>{{ v }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
<div><PaginationPageSize v-model="quotationPageSize" /></div>
</div>
</div>
<div class="col-4 row justify-center app-text-muted">