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

refactor: use page size component

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

31
src/pages/02_personnel-management/MainPage.vue
View file

@ -48,6 +48,7 @@ import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import FormByType from 'components/02_personnel-management/FormByType.vue';
import FormInformation from 'components/02_personnel-management/FormInformation.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
const { locale, t } = useI18n();
const $q = useQuasar();
@ -730,7 +731,7 @@ watch(
},
);
watch([inputSearch, statusFilter], async () => await fetchUserList());
watch([inputSearch, statusFilter, pageSize], async () => await fetchUserList());
watch(
() => $q.screen.lt.md,
@ -1418,33 +1419,7 @@ watch(
<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="pageSize"
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="
async () => {
pageSize = v;
await fetchUserList();
}
"
>
<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="pageSize" /></div>
</div>
</div>

14
src/pages/03_customer-management/BranchPage.vue
View file

@ -39,6 +39,7 @@ import {
EmployerFormContact,
} from './components';
import { formatAddress } from 'src/utils/address';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
const flowStore = useFlowStore();
const customerStore = useCustomerStore();
@ -232,7 +233,7 @@ onMounted(async () => {
await fetchList();
});
watch([customerId, inputSearch, currentStatus], async () => {
watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
await fetchList();
});
watch(
@ -638,8 +639,15 @@ watch(
</div>
<div class="row justify-between items-center q-px-md q-py-sm surface-2">
<div class="col"></div>
<div class="app-text-muted col text-center">
<div class="row col-4 items-center">
<div class="app-text-muted" style="width: 80px" v-if="$q.screen.gt.sm">
{{ $t('general.recordPerPage') }}
</div>
<div><PaginationPageSize v-model="pageSizeBranch" /></div>
</div>
<div class="col-4 flex justify-center app-text-muted">
{{
$t('general.recordsPage', {
resultcurrentPage: branch?.length,

63
src/pages/03_customer-management/MainPage.vue
View file

@ -79,6 +79,7 @@ import KebabAction from 'src/components/shared/KebabAction.vue';
import { nextTick } from 'vue';
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
import { group } from 'node:console';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
const { t, locale } = useI18n();
const $q = useQuasar();
@ -210,7 +211,7 @@ const onCreateImageList = ref<{
watch(() => route.name, init);
watch(
[currentTab, currentStatus, inputSearch, customerTypeSelected],
[currentTab, currentStatus, inputSearch, customerTypeSelected, pageSize],
async ([tabName]) => {
if (tabName === 'employer') {
currentPageCustomer.value = 1;
@ -1647,34 +1648,8 @@ const emptyCreateDialog = ref(false);
>
{{ $t('general.recordPerPage') }}
</div>
<div>
<q-btn-dropdown
dense
unelevated
class="bordered q-pl-md rounded"
:label="pageSize"
style="background-color: var(--surface-1)"
>
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
:key="v"
clickable
v-close-popup
@click="
async () => {
pageSize = v;
await fetchListCustomer();
}
"
>
<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="pageSize" /></div>
</div>
<div class="col-4 flex justify-center app-text-muted">
@ -1768,34 +1743,8 @@ const emptyCreateDialog = ref(false);
>
{{ $t('general.recordPerPage') }}
</div>
<div>
<q-btn-dropdown
dense
unelevated
:label="pageSize"
class="bordered q-pl-md"
style="background-color: var(--surface-1)"
>
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
:key="v"
clickable
v-close-popup
@click="
async () => {
pageSize = v;
await fetchListEmployee();
}
"
>
<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="pageSize" /></div>
</div>
<div class="col-4 flex justify-center app-text-muted">

26
src/pages/04_flow-managment/MainPage.vue
View file

@ -20,6 +20,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
import FlowDialog from './FlowDialog.vue';
import NoData from 'src/components/NoData.vue';
import KebabAction from 'src/components/shared/KebabAction.vue';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
const { t } = useI18n();
const workflowStore = useWorkflowTemplate();
@ -286,7 +287,7 @@ onMounted(async () => {
});
watch(statusFilter, fetchWorkflowList);
watch(() => pageState.inputSearch, fetchWorkflowList);
watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
</script>
<template>
<FloatingActionButton
@ -686,28 +687,7 @@ watch(() => pageState.inputSearch, fetchWorkflowList);
<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="workflowPageSize"
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="workflowPageSize = 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="workflowPageSize" /></div>
</div>
</div>
<div class="col-4 row justify-center app-text-muted">

30
src/pages/05_quotation/MainPage.vue
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">