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

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