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

refactor: ปรับ ui เปลี่ยนหน้า

Browse source
This commit is contained in:
Net 2024-07-04 14:55:09 +07:00
parent 8316d61201
commit 7fd7df5a1b
1 changed files with 132 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

166
src/pages/04_product-service/MainPage.vue
View file

@ -1403,9 +1403,38 @@ watch(inputSearchProductAndService, async () => {
<template v-else> <template v-else>
<div <div
v-if="productMode === 'group'" v-if="productMode === 'group'"
class="flex justify-between q-pt-xl" class="flex items-center justify-between q-pt-xl"
> >
<div class="app-text-muted"> <div class="col-4">
<div class="row items-center">
<div class="app-text-muted" style="width: 80px">
{{ $t('showing') }}
</div>
<div>
<q-btn-dropdown dense unelevated :label="pageSizeGroup">
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
clickable
v-close-popup
@click="
async () => {
pageSizeGroup = v;
await fetchListGroups();
}
"
>
<q-item-section>
<q-item-label>{{ v }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
</div>
<div class="col-4 row justify-center app-text-muted">
{{ {{
$t('recordsPage', { $t('recordsPage', {
resultcurrentPage: productGroup?.length, resultcurrentPage: productGroup?.length,
@ -1413,23 +1442,55 @@ watch(inputSearchProductAndService, async () => {
}) })
}} }}
</div> </div>
<PaginationComponent
v-model:current-page="currentPageGroup" <div class="col-4 row justify-end">
v-model:max-page="maxPageGroup" <PaginationComponent
:fetch-data=" v-model:current-page="currentPageGroup"
async () => { v-model:max-page="maxPageGroup"
await fetchListGroups(); :fetch-data="
flowStore.rotate(); async () => {
} await fetchListGroups();
" flowStore.rotate();
/> }
"
/>
</div>
</div> </div>
<div <div
v-if="productMode === 'type'" v-if="productMode === 'type'"
class="flex justify-between q-pt-xl" class="flex justify-between q-pt-xl"
> >
<div class="app-text-muted"> <div class="col-4">
<div class="row items-center">
<div class="app-text-muted" style="width: 80px">
{{ $t('showing') }}
</div>
<div>
<q-btn-dropdown dense unelevated :label="pageSizeType">
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
clickable
v-close-popup
@click="
async () => {
pageSizeType = v;
await fetchListType();
}
"
>
<q-item-section>
<q-item-label>{{ v }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
</div>
<div class="col-4 row justify-center app-text-muted">
{{ {{
$t('recordsPage', { $t('recordsPage', {
resultcurrentPage: productType?.length, resultcurrentPage: productType?.length,
@ -1437,16 +1498,18 @@ watch(inputSearchProductAndService, async () => {
}) })
}} }}
</div> </div>
<PaginationComponent <div class="col-4 row justify-end">
v-model:current-page="currentPageType" <PaginationComponent
v-model:max-page="maxPageType" v-model:current-page="currentPageType"
:fetch-data=" v-model:max-page="maxPageType"
async () => { :fetch-data="
await fetchListType(); async () => {
flowStore.rotate(); await fetchListType();
} flowStore.rotate();
" }
/> "
/>
</div>
</div> </div>
</template> </template>
</div> </div>
@ -1706,7 +1769,40 @@ watch(inputSearchProductAndService, async () => {
</div> </div>
</div> </div>
<div class="row justify-between q-pb-md q-px-lg"> <div class="row justify-between q-pb-md q-px-lg">
<div class="app-text-muted"> <div class="col-4">
<div class="row items-center">
<div class="app-text-muted" style="width: 80px">
{{ $t('showing') }}
</div>
<div>
<q-btn-dropdown
dense
unelevated
:label="pageSizeServiceAndProduct"
>
<q-list>
<q-item
v-for="v in [10, 30, 50, 100, 500, 1000]"
clickable
v-close-popup
@click="
async () => {
pageSizeServiceAndProduct = v;
await fetchListOfProductAndService();
}
"
>
<q-item-section>
<q-item-label>{{ v }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</div>
</div>
</div>
<div class="col-4 row justify-center app-text-muted">
{{ {{
$t('recordsPage', { $t('recordsPage', {
resultcurrentPage: resultcurrentPage:
@ -1719,16 +1815,18 @@ watch(inputSearchProductAndService, async () => {
}) })
}} }}
</div> </div>
<PaginationComponent <div class="col-4 row justify-end">
v-model:current-page="currentPageServiceAndProduct" <PaginationComponent
v-model:max-page="maxPageServiceAndProduct" v-model:current-page="currentPageServiceAndProduct"
:fetch-data=" v-model:max-page="maxPageServiceAndProduct"
async () => { :fetch-data="
await alternativeFetch(); async () => {
flowStore.rotate(); await alternativeFetch();
} flowStore.rotate();
" }
/> "
/>
</div>
</div> </div>
</div> </div>
</div> </div>