From 7fd7df5a1b2f0b7b640b93511acc1fe738ecabe1 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:55:09 +0700
Subject: [PATCH] =?UTF-8?q?refactor:=20=E0=B8=9B=E0=B8=A3=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=9A=20=20ui=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/04_product-service/MainPage.vue | 166 +++++++++++++++++-----
 1 file changed, 132 insertions(+), 34 deletions(-)

diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 4cd81135..c4cf1bfe 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1403,9 +1403,38 @@ watch(inputSearchProductAndService, async () => {
         <template v-else>
           <div
             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', {
                   resultcurrentPage: productGroup?.length,
@@ -1413,23 +1442,55 @@ watch(inputSearchProductAndService, async () => {
                 })
               }}
             </div>
-            <PaginationComponent
-              v-model:current-page="currentPageGroup"
-              v-model:max-page="maxPageGroup"
-              :fetch-data="
-                async () => {
-                  await fetchListGroups();
-                  flowStore.rotate();
-                }
-              "
-            />
+
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageGroup"
+                v-model:max-page="maxPageGroup"
+                :fetch-data="
+                  async () => {
+                    await fetchListGroups();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
 
           <div
             v-if="productMode === 'type'"
             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', {
                   resultcurrentPage: productType?.length,
@@ -1437,16 +1498,18 @@ watch(inputSearchProductAndService, async () => {
                 })
               }}
             </div>
-            <PaginationComponent
-              v-model:current-page="currentPageType"
-              v-model:max-page="maxPageType"
-              :fetch-data="
-                async () => {
-                  await fetchListType();
-                  flowStore.rotate();
-                }
-              "
-            />
+            <div class="col-4 row justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageType"
+                v-model:max-page="maxPageType"
+                :fetch-data="
+                  async () => {
+                    await fetchListType();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
           </div>
         </template>
       </div>
@@ -1706,7 +1769,40 @@ watch(inputSearchProductAndService, async () => {
           </div>
         </div>
         <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', {
                 resultcurrentPage:
@@ -1719,16 +1815,18 @@ watch(inputSearchProductAndService, async () => {
               })
             }}
           </div>
-          <PaginationComponent
-            v-model:current-page="currentPageServiceAndProduct"
-            v-model:max-page="maxPageServiceAndProduct"
-            :fetch-data="
-              async () => {
-                await alternativeFetch();
-                flowStore.rotate();
-              }
-            "
-          />
+          <div class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="currentPageServiceAndProduct"
+              v-model:max-page="maxPageServiceAndProduct"
+              :fetch-data="
+                async () => {
+                  await alternativeFetch();
+                  flowStore.rotate();
+                }
+              "
+            />
+          </div>
         </div>
       </div>
     </div>