chamomind/jws-frontend
chamomind/jws-frontend
6
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

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">