From f559987e0c3526e9726f37e8ecc8bba1dde2a65d Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 29 Jan 2025 17:07:43 +0700
Subject: [PATCH] refactor: 04 => screen.xs fetch scroll

---
 src/pages/04_flow-managment/MainPage.vue  |  368 ++++----
 src/pages/04_product-service/MainPage.vue | 1036 +++++++++++----------
 2 files changed, 733 insertions(+), 671 deletions(-)

diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 5e0a8042..d5003bcd 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -276,7 +276,10 @@ async function fetchWorkflowList() {
             : 'INACTIVE',
     });
     if (res) {
-      workflowData.value = res.result;
+      $q.screen.xs
+        ? workflowData.value.push(...res.result)
+        : (workflowData.value = res.result);
+
       workflowPageMax.value = Math.ceil(res.total / workflowPageSize.value);
       if (pageState.inputSearch || statusFilter.value !== 'all') return;
       pageState.total = res.total;
@@ -351,7 +354,7 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
 
     <!-- SEC: header content -->
     <section class="col surface-1 rounded bordered overflow-hidden">
-      <div class="column full-height">
+      <div class="column full-height no-wrap">
         <header
           class="row surface-3 justify-between full-width items-center bordered-b"
           style="z-index: 1"
@@ -500,173 +503,113 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
         </article>
 
         <article v-else class="col q-pa-md surface-2 scroll full-width">
-          <q-table
-            flat
-            bordered
-            :grid="pageState.gridView"
-            :rows="workflowData"
-            :columns="columns"
-            class="full-width"
-            card-container-class="q-col-gutter-md"
-            row-key="name"
-            :rows-per-page-options="[0]"
-            hide-pagination
-            :visible-columns="fieldSelected"
+          <q-infinite-scroll
+            :offset="100"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || workflowPage === workflowPageMax) return;
+                workflowPage = workflowPage + 1;
+                fetchWorkflowList().then(() =>
+                  done(workflowPage >= workflowPageMax),
+                );
+              }
+            "
           >
-            <template #header="{ cols }">
-              <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
-                <q-th
-                  v-for="v in cols"
-                  :key="v"
-                  :class="{
-                    'text-left': v.name === 'name',
-                    'text-right': v.name === 'step',
-                  }"
-                >
-                  {{
-                    v.label &&
-                    $t(v.label, {
-                      msg:
-                        v.name === 'step'
-                          ? $t('flow.step')
-                          : v.name === 'name'
-                            ? $t('flow.title')
-                            : '',
-                    })
-                  }}
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
-            </template>
-
-            <template #body="props">
-              <q-tr
-                :class="{
-                  'app-text-muted': props.row.status === 'INACTIVE',
-                  'status-active': props.row.status !== 'INACTIVE',
-                  'status-inactive': props.row.status === 'INACTIVE',
-                }"
-                :style="
-                  props.rowIndex % 2 !== 0
-                    ? $q.dark.isActive
-                      ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                      : `background: #f9fafc`
-                    : ''
-                "
-              >
-                <q-td
-                  v-if="fieldSelected.includes('order')"
-                  class="text-center"
-                >
-                  {{ props.rowIndex + 1 }}
-                  <!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
-                </q-td>
-                <q-td v-if="fieldSelected.includes('name')">
-                  <section class="row items-center no-wrap">
-                    <q-avatar
-                      class="q-mr-sm"
-                      size="md"
-                      style="
-                        color: var(--gray-6);
-                        background: hsla(var(--gray-6-hsl) / 0.1);
-                      "
-                    >
-                      <q-icon name="mdi-cogs" />
-
-                      <q-badge
-                        class="absolute-bottom-right no-padding"
-                        style="
-                          border-radius: 50%;
-                          min-width: 8px;
-                          min-height: 8px;
-                        "
-                        :style="{
-                          background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                        }"
-                      ></q-badge>
-                    </q-avatar>
-                    {{ props.row.name }}
-                  </section>
-                </q-td>
-                <q-td v-if="fieldSelected.includes('step')" class="text-right">
-                  {{ props.row.step.length }}
-                </q-td>
-                <q-td style="width: 20%" class="text-right">
-                  <q-btn
-                    icon="mdi-eye-outline"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop="
-                      () => {
-                        assignFormData(props.row);
-                        triggerDialog('view');
-                      }
-                    "
-                  />
-                  <KebabAction
-                    :id-name="props.row.id"
-                    :status="props.row.status"
-                    @view="
-                      () => {
-                        assignFormData(props.row);
-                        triggerDialog('view');
-                      }
-                    "
-                    @edit="
-                      () => {
-                        assignFormData(props.row);
-                        triggerDialog('edit');
-                      }
-                    "
-                    @delete="() => deleteWorkflow(props.row.id)"
-                    @change-status="() => triggerChangeStatus(props.row)"
-                  />
-                </q-td>
-              </q-tr>
-            </template>
-
-            <template v-slot:item="props">
-              <section class="col-12 col-md-4 column">
-                <div
+            <q-table
+              flat
+              bordered
+              :grid="pageState.gridView"
+              :rows="workflowData"
+              :columns="columns"
+              class="full-width"
+              card-container-class="q-col-gutter-md"
+              row-key="name"
+              :rows-per-page-options="[0]"
+              hide-pagination
+              :visible-columns="fieldSelected"
+            >
+              <template #header="{ cols }">
+                <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
+                  <q-th
+                    v-for="v in cols"
+                    :key="v"
+                    :class="{
+                      'text-left': v.name === 'name',
+                      'text-right': v.name === 'step',
+                    }"
+                  >
+                    {{
+                      v.label &&
+                      $t(v.label, {
+                        msg:
+                          v.name === 'step'
+                            ? $t('flow.step')
+                            : v.name === 'name'
+                              ? $t('flow.title')
+                              : '',
+                      })
+                    }}
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+
+              <template #body="props">
+                <q-tr
                   :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
                     'status-inactive': props.row.status === 'INACTIVE',
                   }"
-                  class="surface-1 rounded bordered row no-wrap col"
-                  style="overflow: hidden"
+                  :style="
+                    props.rowIndex % 2 !== 0
+                      ? $q.dark.isActive
+                        ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                        : `background: #f9fafc`
+                      : ''
+                  "
                 >
-                  <div
-                    class="col-md-2 col-3 flex items-center justify-center"
-                    style="
-                      color: var(--gray-6);
-                      background: hsla(var(--gray-6-hsl) / 0.1);
-                    "
+                  <q-td
+                    v-if="fieldSelected.includes('order')"
+                    class="text-center"
                   >
-                    <q-icon name="mdi-cogs" size="md" />
-                  </div>
-                  <article class="row q-pa-sm q-gutter-y-sm col">
-                    <div
-                      v-if="fieldSelected.includes('name')"
-                      class="text-weight-bold col-12 ellipsis-2-lines"
-                      :class="{
-                        'app-text-muted': props.row.status === 'INACTIVE',
-                      }"
-                    >
-                      {{ props.row.name }}
+                    {{ props.rowIndex + 1 }}
+                    <!-- {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }} -->
+                  </q-td>
+                  <q-td v-if="fieldSelected.includes('name')">
+                    <section class="row items-center no-wrap">
+                      <q-avatar
+                        class="q-mr-sm"
+                        size="md"
+                        style="
+                          color: var(--gray-6);
+                          background: hsla(var(--gray-6-hsl) / 0.1);
+                        "
+                      >
+                        <q-icon name="mdi-cogs" />
 
-                      <q-tooltip>
-                        {{ props.row.name }}
-                      </q-tooltip>
-                    </div>
-                    <div v-if="fieldSelected.includes('step')" class="self-end">
-                      <div class="bordered rounded q-px-sm">
-                        <q-icon name="mdi-note-edit-outline" class="q-pr-sm" />
-                        {{ props.row.step.length }}
-                      </div>
-                    </div>
-                  </article>
-                  <nav class="q-pa-sm row items-center self-start">
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 8px;
+                            min-height: 8px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
+                      </q-avatar>
+                      {{ props.row.name }}
+                    </section>
+                  </q-td>
+                  <q-td
+                    v-if="fieldSelected.includes('step')"
+                    class="text-right"
+                  >
+                    {{ props.row.step.length }}
+                  </q-td>
+                  <q-td style="width: 20%" class="text-right">
                     <q-btn
                       icon="mdi-eye-outline"
                       size="sm"
@@ -698,17 +641,108 @@ watch([() => pageState.inputSearch, workflowPageSize], fetchWorkflowList);
                       @delete="() => deleteWorkflow(props.row.id)"
                       @change-status="() => triggerChangeStatus(props.row)"
                     />
-                  </nav>
-                </div>
-              </section>
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <section class="col-12 col-md-4 column">
+                  <div
+                    :class="{
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    class="surface-1 rounded bordered row no-wrap col"
+                    style="overflow: hidden"
+                  >
+                    <div
+                      class="col-md-2 col-3 flex items-center justify-center"
+                      style="
+                        color: var(--gray-6);
+                        background: hsla(var(--gray-6-hsl) / 0.1);
+                      "
+                    >
+                      <q-icon name="mdi-cogs" size="md" />
+                    </div>
+                    <article class="row q-pa-sm q-gutter-y-sm col">
+                      <div
+                        v-if="fieldSelected.includes('name')"
+                        class="text-weight-bold col-12 ellipsis-2-lines"
+                        :class="{
+                          'app-text-muted': props.row.status === 'INACTIVE',
+                        }"
+                      >
+                        {{ props.row.name }}
+
+                        <q-tooltip>
+                          {{ props.row.name }}
+                        </q-tooltip>
+                      </div>
+                      <div
+                        v-if="fieldSelected.includes('step')"
+                        class="self-end"
+                      >
+                        <div class="bordered rounded q-px-sm">
+                          <q-icon
+                            name="mdi-note-edit-outline"
+                            class="q-pr-sm"
+                          />
+                          {{ props.row.step.length }}
+                        </div>
+                      </div>
+                    </article>
+                    <nav class="q-pa-sm row items-center self-start">
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('view');
+                          }
+                        "
+                      />
+                      <KebabAction
+                        :id-name="props.row.id"
+                        :status="props.row.status"
+                        @view="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('view');
+                          }
+                        "
+                        @edit="
+                          () => {
+                            assignFormData(props.row);
+                            triggerDialog('edit');
+                          }
+                        "
+                        @delete="() => deleteWorkflow(props.row.id)"
+                        @change-status="() => triggerChangeStatus(props.row)"
+                      />
+                    </nav>
+                  </div>
+                </section>
+              </template>
+            </q-table>
+
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && workflowPage !== workflowPageMax"
+                class="row justify-center"
+              >
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
             </template>
-          </q-table>
+          </q-infinite-scroll>
         </article>
 
         <!-- SEC: footer content -->
         <footer
           class="row justify-between items-center q-px-md q-py-sm surface-2"
-          v-if="workflowPageMax > 0"
+          v-if="workflowPageMax > 0 && $q.screen.gt.xs"
         >
           <div class="col-4">
             <div class="row items-center no-wrap">
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 8dfe53ee..75e63a9d 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -35,6 +35,7 @@ import {
   ToggleButton,
 } from 'components/button';
 import TableProduct from 'src/components/04_product-service/TableProduct.vue';
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 
 import useFlowStore from 'stores/flow';
 
@@ -612,7 +613,10 @@ async function fetchListGroups() {
     currentPageGroup.value = res.page;
     totalGroup.value = res.total;
     maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value);
-    productGroup.value = res.result;
+    if (!productGroup.value) productGroup.value = [];
+    $q.screen.lt.md
+      ? productGroup.value.push(...res.result)
+      : (productGroup.value = res.result);
   }
 }
 
@@ -668,13 +672,22 @@ async function fetchListOfProduct() {
     maxPageServiceAndProduct.value = Math.ceil(
       res.total / pageSizeServiceAndProduct.value,
     );
-
-    product.value = res.result.map((v) => {
-      return {
-        ...v,
-        type: 'product',
-      };
-    });
+    if (!product.value) product.value = [];
+    $q.screen.xs
+      ? product.value.push(
+          ...res.result.map((v) => {
+            return {
+              ...v,
+              type: 'product' as const,
+            };
+          }),
+        )
+      : (product.value = res.result.map((v) => {
+          return {
+            ...v,
+            type: 'product',
+          };
+        }));
   }
 }
 
@@ -701,12 +714,22 @@ async function fetchListOfService() {
     maxPageServiceAndProduct.value = Math.ceil(
       res.total / pageSizeServiceAndProduct.value,
     );
-    service.value = res.result.map((v) => {
-      return {
-        ...v,
-        type: 'service',
-      };
-    });
+    if (!service.value) service.value = [];
+    $q.screen.xs
+      ? service.value.push(
+          ...res.result.map((v) => {
+            return {
+              ...v,
+              type: 'service' as const,
+            };
+          }),
+        )
+      : (service.value = res.result.map((v) => {
+          return {
+            ...v,
+            type: 'service',
+          };
+        }));
   }
 }
 
@@ -1541,8 +1564,11 @@ async function enterNext(type: 'service' | 'product') {
     filterStat.value.push('group');
     filterStat.value.push('service');
   }
-  if (productMode.value === 'service') await fetchListOfService();
-  if (productMode.value === 'product') await fetchListOfProduct();
+
+  if (productMode.value === 'service' && $q.screen.gt.xs)
+    await fetchListOfService();
+  if (productMode.value === 'product' && $q.screen.gt.xs)
+    await fetchListOfProduct();
   flowStore.rotate();
 }
 
@@ -1566,6 +1592,8 @@ async function fetchImageList(
 }
 
 onMounted(async () => {
+  $q.screen.gt.sm && (await fetchListGroups());
+
   navigatorStore.current.title = 'productService.title';
   navigatorStore.current.path = [
     {
@@ -1581,7 +1609,6 @@ onMounted(async () => {
   modeView.value = $q.screen.lt.md ? true : false;
 
   calculateStats();
-  await fetchListGroups();
 
   flowStore.rotate();
 });
@@ -1876,8 +1903,20 @@ watch(
               </q-input>
             </div>
 
-            <div class="col full-width scroll">
-              <div class="q-pa-md">
+            <div class="col full-width scroll q-pa-md">
+              <q-infinite-scroll
+                :offset="100"
+                @load="
+                  async (_, done) => {
+                    if ($q.screen.gt.sm) return;
+
+                    fetchListGroups().then(() => {
+                      currentPageGroup = currentPageGroup + 1;
+                      done(currentPageGroup > maxPageGroup);
+                    });
+                  }
+                "
+              >
                 <TreeComponent
                   v-model:nodes="treeProductTypeAndGroup"
                   v-model:expanded-tree="expandedTree"
@@ -1980,7 +2019,15 @@ watch(
                   "
                   @handle-hold="handleHold"
                 />
-              </div>
+                <template v-slot:loading>
+                  <div
+                    v-if="$q.screen.lt.sm && currentPageGroup !== maxPageGroup"
+                    class="row justify-center"
+                  >
+                    <q-spinner-dots color="primary" size="40px" />
+                  </div>
+                </template>
+              </q-infinite-scroll>
             </div>
           </div>
         </template>
@@ -2438,7 +2485,8 @@ watch(
                   </q-table>
                 </div>
 
-                <div
+                <!-- footer group -->
+                <footer
                   v-if="productMode === 'group'"
                   class="row items-center justify-between q-px-md q-py-sm full-width"
                 >
@@ -2451,31 +2499,7 @@ watch(
                         {{ $t('general.recordPerPage') }}
                       </div>
                       <div>
-                        <q-btn-dropdown
-                          dense
-                          unelevated
-                          :label="pageSizeGroup"
-                          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 () => {
-                                  pageSizeGroup = v;
-                                  await fetchListGroups();
-                                }
-                              "
-                            >
-                              <q-item-section>
-                                <q-item-label>{{ v }}</q-item-label>
-                              </q-item-section>
-                            </q-item>
-                          </q-list>
-                        </q-btn-dropdown>
+                        <PaginationPageSize v-model="pageSizeGroup" />
                       </div>
                     </div>
                   </div>
@@ -2506,7 +2530,7 @@ watch(
                       "
                     />
                   </div>
-                </div>
+                </footer>
               </template>
             </div>
 
@@ -2673,479 +2697,513 @@ watch(
                 <div
                   class="flex scroll full-width q-pa-md surface-2 column col"
                 >
-                  <q-table
-                    class="full-width"
-                    flat
-                    bordered
-                    :rows-per-page-options="[0]"
-                    :rows="{ product, service }[productAndServiceTab] || []"
-                    :columns="
-                      {
-                        product: tbColumn.product,
-                        service: tbColumn.service,
-                      }[productAndServiceTab]
-                    "
-                    :grid="modeView"
-                    card-container-class="row q-col-gutter-md"
-                    row-key="name"
-                    hide-pagination
-                    :visible-columns="
-                      {
-                        product: tbControl.product.fieldSelected,
-                        service: tbControl.service.fieldSelected,
-                      }[productAndServiceTab]
+                  <q-infinite-scroll
+                    :offset="100"
+                    @load="
+                      (_, done) => {
+                        if ($q.screen.gt.xs) return;
+                        alternativeFetch().then(() => {
+                          currentPageServiceAndProduct =
+                            currentPageServiceAndProduct + 1;
+                          done(
+                            currentPageServiceAndProduct >
+                              maxPageServiceAndProduct,
+                          );
+                        });
+                      }
                     "
                   >
-                    <template v-slot:header="props">
-                      <q-tr
-                        style="background-color: hsla(var(--info-bg) / 0.07)"
-                        :props="props"
-                      >
-                        <q-th
-                          v-for="col in props.cols"
-                          :key="col.name"
+                    <q-table
+                      class="full-width"
+                      flat
+                      bordered
+                      :rows-per-page-options="[0]"
+                      :rows="{ product, service }[productAndServiceTab] || []"
+                      :columns="
+                        {
+                          product: tbColumn.product,
+                          service: tbColumn.service,
+                        }[productAndServiceTab]
+                      "
+                      :grid="modeView"
+                      card-container-class="row q-col-gutter-md"
+                      row-key="name"
+                      hide-pagination
+                      :visible-columns="
+                        {
+                          product: tbControl.product.fieldSelected,
+                          service: tbControl.service.fieldSelected,
+                        }[productAndServiceTab]
+                      "
+                    >
+                      <template v-slot:header="props">
+                        <q-tr
+                          style="background-color: hsla(var(--info-bg) / 0.07)"
                           :props="props"
                         >
-                          {{ $t(col.label) }}
-                        </q-th>
-                        <q-th auto-width />
-                      </q-tr>
-                    </template>
+                          <q-th
+                            v-for="col in props.cols"
+                            :key="col.name"
+                            :props="props"
+                          >
+                            {{ $t(col.label) }}
+                          </q-th>
+                          <q-th auto-width />
+                        </q-tr>
+                      </template>
 
-                    <template v-slot:body="props">
-                      <q-tr
-                        :style="
-                          props.rowIndex % 2 !== 0
-                            ? $q.dark.isActive
-                              ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                              : `background: #f9fafc`
-                            : ''
-                        "
-                        :class="{
-                          'app-text-muted': props.row.status === 'INACTIVE',
-                        }"
-                        :props="props"
-                      >
-                        <q-td
-                          class="text-center"
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
-                              {
-                                product: 'branchLabelNo',
-                                service: 'branchLabelNo',
-                              }[productAndServiceTab],
-                            )
+                      <template v-slot:body="props">
+                        <q-tr
+                          :style="
+                            props.rowIndex % 2 !== 0
+                              ? $q.dark.isActive
+                                ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                                : `background: #f9fafc`
+                              : ''
                           "
+                          :class="{
+                            'app-text-muted': props.row.status === 'INACTIVE',
+                          }"
+                          :props="props"
                         >
-                          {{
-                            (currentPageServiceAndProduct - 1) *
-                              pageSizeServiceAndProduct +
-                            props.rowIndex +
-                            1
-                          }}
-                        </q-td>
-
-                        <q-td
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
+                          <q-td
+                            class="text-center"
+                            v-if="
                               {
-                                product: 'productName',
-                                service: 'serviceName',
-                              }[productAndServiceTab],
-                            )
-                          "
-                        >
-                          <div class="row items-center no-wrap">
-                            <div
-                              :class="{
-                                'status-active':
-                                  props.row.status !== 'INACTIVE',
-                                'status-inactive':
-                                  props.row.status === 'INACTIVE',
-                              }"
-                              style="
-                                width: 50px;
-                                display: flex;
-                                margin-bottom: var(--size-2);
-                              "
-                            >
+                                product: tbControl.product.fieldSelected,
+
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'branchLabelNo',
+                                  service: 'branchLabelNo',
+                                }[productAndServiceTab],
+                              )
+                            "
+                          >
+                            {{
+                              (currentPageServiceAndProduct - 1) *
+                                pageSizeServiceAndProduct +
+                              props.rowIndex +
+                              1
+                            }}
+                          </q-td>
+
+                          <q-td
+                            v-if="
+                              {
+                                product: tbControl.product.fieldSelected,
+
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'productName',
+                                  service: 'serviceName',
+                                }[productAndServiceTab],
+                              )
+                            "
+                          >
+                            <div class="row items-center no-wrap">
                               <div
-                                class="table__icon"
-                                :class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
+                                :class="{
+                                  'status-active':
+                                    props.row.status !== 'INACTIVE',
+                                  'status-inactive':
+                                    props.row.status === 'INACTIVE',
+                                }"
+                                style="
+                                  width: 50px;
+                                  display: flex;
+                                  margin-bottom: var(--size-2);
+                                "
                               >
-                                <q-avatar size="md">
-                                  <q-img
-                                    class="text-center"
-                                    :ratio="1"
-                                    :src="`${baseUrl}/${productAndServiceTab}/${props.row.id}/image/${props.row.selectedImage}`"
-                                  >
-                                    <template #error>
-                                      <q-icon
-                                        size="sm"
-                                        :name="
-                                          productAndServiceTab === 'product'
-                                            ? 'mdi-shopping-outline'
-                                            : 'mdi-server-outline'
-                                        "
-                                        style="top: 10%"
-                                        :style="`color: var(--${productAndServiceTab === 'product' ? 'teal-10' : 'orange-5'})`"
-                                      />
-                                    </template>
-                                  </q-img>
-                                </q-avatar>
-                              </div>
-                            </div>
-                            <div class="column">
-                              <div class="ellipsis" style="max-width: 20vw">
-                                {{ props.row.name }}
-                                <q-tooltip
-                                  anchor="bottom left"
-                                  self="center left"
-                                  :delay="300"
+                                <div
+                                  class="table__icon"
+                                  :class="`icon-color-${productAndServiceTab === 'product' ? 'green' : 'orange'}`"
                                 >
-                                  {{ props.row.name }}
-                                </q-tooltip>
+                                  <q-avatar size="md">
+                                    <q-img
+                                      class="text-center"
+                                      :ratio="1"
+                                      :src="`${baseUrl}/${productAndServiceTab}/${props.row.id}/image/${props.row.selectedImage}`"
+                                    >
+                                      <template #error>
+                                        <q-icon
+                                          size="sm"
+                                          :name="
+                                            productAndServiceTab === 'product'
+                                              ? 'mdi-shopping-outline'
+                                              : 'mdi-server-outline'
+                                          "
+                                          style="top: 10%"
+                                          :style="`color: var(--${productAndServiceTab === 'product' ? 'teal-10' : 'orange-5'})`"
+                                        />
+                                      </template>
+                                    </q-img>
+                                  </q-avatar>
+                                </div>
                               </div>
-                              <div class="app-text-muted">
-                                {{ props.row.code }}
+                              <div class="column">
+                                <div class="ellipsis" style="max-width: 20vw">
+                                  {{ props.row.name }}
+                                  <q-tooltip
+                                    anchor="bottom left"
+                                    self="center left"
+                                    :delay="300"
+                                  >
+                                    {{ props.row.name }}
+                                  </q-tooltip>
+                                </div>
+                                <div class="app-text-muted">
+                                  {{ props.row.code }}
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </q-td>
+                          </q-td>
 
-                        <q-td
-                          class="ellipsis"
-                          style="max-width: 150px"
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
+                          <q-td
+                            class="ellipsis"
+                            style="max-width: 150px"
+                            v-if="
                               {
-                                product: 'productDetail',
-                                service: 'serviceDetail',
-                              }[productAndServiceTab],
-                            )
-                          "
-                        >
-                          {{
-                            props.row.detail.replace(/<\/?[^>]+(>|$)/g, '') ||
-                            '-'
-                          }}
-                          <!-- <div
+                                product: tbControl.product.fieldSelected,
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'productDetail',
+                                  service: 'serviceDetail',
+                                }[productAndServiceTab],
+                              )
+                            "
+                          >
+                            {{
+                              props.row.detail.replace(/<\/?[^>]+(>|$)/g, '') ||
+                              '-'
+                            }}
+                            <!-- <div
                             class="ellipsis"
                             style="max-width: 150px"
                             v-html="props.row.detail || '-'"
                           /> -->
-                        </q-td>
+                          </q-td>
 
-                        <q-td
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
+                          <q-td
+                            v-if="
                               {
-                                product: 'productExpenseType',
-                                service: 'serviceWorkTotal',
-                              }[productAndServiceTab],
-                            )
-                          "
-                        >
-                          {{
-                            optionStore.mapOption(
+                                product: tbControl.product.fieldSelected,
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'productExpenseType',
+                                  service: 'serviceWorkTotal',
+                                }[productAndServiceTab],
+                              )
+                            "
+                          >
+                            {{
+                              optionStore.mapOption(
+                                {
+                                  product: props.row.expenseType || '-',
+                                  service: props.row.work?.length,
+                                }[productAndServiceTab],
+                              )
+                            }}
+                          </q-td>
+                          <q-td
+                            v-if="
                               {
-                                product: props.row.expenseType || '-',
+                                product: tbControl.product.fieldSelected,
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'productProcessingTime',
+                                  service: 'empty',
+                                }[productAndServiceTab],
+                              )
+                            "
+                          >
+                            {{
+                              {
+                                product: props.row.process,
                                 service: props.row.work?.length,
-                              }[productAndServiceTab],
-                            )
-                          }}
-                        </q-td>
-                        <q-td
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
+                              }[productAndServiceTab]
+                            }}
+                          </q-td>
+                          <q-td
+                            v-if="
                               {
-                                product: 'productProcessingTime',
-                                service: 'empty',
-                              }[productAndServiceTab],
-                            )
-                          "
-                        >
-                          {{
-                            {
-                              product: props.row.process,
-                              service: props.row.work?.length,
-                            }[productAndServiceTab]
-                          }}
-                        </q-td>
-                        <q-td
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
+                                product: tbControl.product.fieldSelected,
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'productVat',
+                                  service: 'empty',
+                                }[productAndServiceTab],
+                              )
+                            "
+                          >
+                            {{
                               {
-                                product: 'productVat',
-                                service: 'empty',
-                              }[productAndServiceTab],
-                            )
-                          "
-                        >
-                          {{
-                            {
-                              product: props.row.vatIncluded,
-                              service: props.row.work?.length,
-                            }[productAndServiceTab]
-                              ? $t('productService.product.vatIncluded')
-                              : $t('productService.product.vatExcluded')
-                          }}
-                        </q-td>
-                        <q-td
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes(
+                                product: props.row.vatIncluded,
+                                service: props.row.work?.length,
+                              }[productAndServiceTab]
+                                ? $t('productService.product.vatIncluded')
+                                : $t('productService.product.vatExcluded')
+                            }}
+                          </q-td>
+                          <q-td
+                            v-if="
                               {
-                                product: 'priceInformation',
-                                service: 'empty',
-                              }[productAndServiceTab],
-                            )
-                          "
-                        >
-                          <div
-                            class="row full-width q-gutter-x-md no-wrap items-center text-right"
+                                product: tbControl.product.fieldSelected,
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes(
+                                {
+                                  product: 'priceInformation',
+                                  service: 'empty',
+                                }[productAndServiceTab],
+                              )
+                            "
                           >
                             <div
-                              class="tags tags-color-orange col column ellipsis-2-lines"
-                              :class="{
-                                disable: props.row.status === 'INACTIVE',
-                              }"
-                              style="min-width: 50px"
-                              v-if="priceDisplay.price"
+                              class="row full-width q-gutter-x-md no-wrap items-center text-right"
                             >
-                              <div class="col app-text-muted-2 text-caption">
-                                {{ $t('productService.product.salePrice') }}
+                              <div
+                                class="tags tags-color-orange col column ellipsis-2-lines"
+                                :class="{
+                                  disable: props.row.status === 'INACTIVE',
+                                }"
+                                style="min-width: 50px"
+                                v-if="priceDisplay.price"
+                              >
+                                <div class="col app-text-muted-2 text-caption">
+                                  {{ $t('productService.product.salePrice') }}
+                                </div>
+                                <div class="col text-weight-bold">
+                                  ฿{{
+                                    formatNumberDecimal(props.row.price || 0, 2)
+                                  }}
+                                </div>
                               </div>
-                              <div class="col text-weight-bold">
-                                ฿{{
-                                  formatNumberDecimal(props.row.price || 0, 2)
-                                }}
+                              <div
+                                class="tags tags-color-purple col column ellipsis-2-lines"
+                                :class="{
+                                  disable: props.row.status === 'INACTIVE',
+                                }"
+                                style="min-width: 50px"
+                                v-if="priceDisplay.agentPrice"
+                              >
+                                <div class="col app-text-muted-2 text-caption">
+                                  {{ $t('productService.product.agentPrice') }}
+                                </div>
+                                <div class="col text-weight-bold">
+                                  ฿{{
+                                    formatNumberDecimal(
+                                      props.row.agentPrice || 0,
+                                      2,
+                                    )
+                                  }}
+                                </div>
+                              </div>
+                              <div
+                                class="tags tags-color-pink col column ellipsis-2-lines"
+                                :class="{
+                                  disable: props.row.status === 'INACTIVE',
+                                }"
+                                style="min-width: 50px"
+                                v-if="priceDisplay.serviceCharge"
+                              >
+                                <div class="col app-text-muted-2 text-caption">
+                                  {{
+                                    $t('productService.product.processingPrice')
+                                  }}
+                                </div>
+                                <div class="col">
+                                  ฿{{
+                                    formatNumberDecimal(
+                                      props.row.serviceCharge || 0,
+                                      2,
+                                    )
+                                  }}
+                                </div>
                               </div>
                             </div>
-                            <div
-                              class="tags tags-color-purple col column ellipsis-2-lines"
-                              :class="{
-                                disable: props.row.status === 'INACTIVE',
-                              }"
-                              style="min-width: 50px"
-                              v-if="priceDisplay.agentPrice"
-                            >
-                              <div class="col app-text-muted-2 text-caption">
-                                {{ $t('productService.product.agentPrice') }}
-                              </div>
-                              <div class="col text-weight-bold">
-                                ฿{{
-                                  formatNumberDecimal(
-                                    props.row.agentPrice || 0,
-                                    2,
-                                  )
-                                }}
-                              </div>
-                            </div>
-                            <div
-                              class="tags tags-color-pink col column ellipsis-2-lines"
-                              :class="{
-                                disable: props.row.status === 'INACTIVE',
-                              }"
-                              style="min-width: 50px"
-                              v-if="priceDisplay.serviceCharge"
-                            >
-                              <div class="col app-text-muted-2 text-caption">
-                                {{
-                                  $t('productService.product.processingPrice')
-                                }}
-                              </div>
-                              <div class="col">
-                                ฿{{
-                                  formatNumberDecimal(
-                                    props.row.serviceCharge || 0,
-                                    2,
-                                  )
-                                }}
-                              </div>
-                            </div>
-                          </div>
-                        </q-td>
+                          </q-td>
 
-                        <q-td
-                          v-if="
-                            {
-                              product: tbControl.product.fieldSelected,
-                              service: tbControl.service.fieldSelected,
-                            }[productAndServiceTab].includes('createdAt')
-                          "
-                        >
-                          {{ dateFormat(props.row.createdAt) }}
-                        </q-td>
-                        <q-td>
-                          <q-btn
-                            icon="mdi-eye-outline"
-                            :id="`btn-eye-${props.row.name}`"
-                            size="sm"
-                            dense
-                            round
-                            flat
-                            @click.stop="
-                              async () => {
-                                if (props.row.type === 'product') {
-                                  currentIdProduct = props.row.id;
-                                  assignFormDataProduct(props.row);
-                                  dialogProductEdit = true;
-                                }
-                                if (props.row.type === 'service') {
-                                  currentIdService = props.row.id;
-                                  infoServiceEdit = false;
-                                  assignFormService(props.row.id);
-                                  dialogServiceEdit = true;
-                                }
-                              }
+                          <q-td
+                            v-if="
+                              {
+                                product: tbControl.product.fieldSelected,
+                                service: tbControl.service.fieldSelected,
+                              }[productAndServiceTab].includes('createdAt')
                             "
-                          />
-                          <KebabAction
-                            :status="props.row.status"
-                            :id-name="props.row.name"
-                            @view="
-                              async () => {
-                                if (props.row.type === 'product') {
-                                  currentIdProduct = props.row.id;
-                                  assignFormDataProduct(props.row);
-                                  dialogProductEdit = true;
+                          >
+                            {{ dateFormat(props.row.createdAt) }}
+                          </q-td>
+                          <q-td>
+                            <q-btn
+                              icon="mdi-eye-outline"
+                              :id="`btn-eye-${props.row.name}`"
+                              size="sm"
+                              dense
+                              round
+                              flat
+                              @click.stop="
+                                async () => {
+                                  if (props.row.type === 'product') {
+                                    currentIdProduct = props.row.id;
+                                    assignFormDataProduct(props.row);
+                                    dialogProductEdit = true;
+                                  }
+                                  if (props.row.type === 'service') {
+                                    currentIdService = props.row.id;
+                                    infoServiceEdit = false;
+                                    assignFormService(props.row.id);
+                                    dialogServiceEdit = true;
+                                  }
                                 }
-                                if (props.row.type === 'service') {
-                                  currentIdService = props.row.id;
-                                  infoServiceEdit = false;
-                                  assignFormService(props.row.id);
-                                  dialogServiceEdit = true;
+                              "
+                            />
+                            <KebabAction
+                              :status="props.row.status"
+                              :id-name="props.row.name"
+                              @view="
+                                async () => {
+                                  if (props.row.type === 'product') {
+                                    currentIdProduct = props.row.id;
+                                    assignFormDataProduct(props.row);
+                                    dialogProductEdit = true;
+                                  }
+                                  if (props.row.type === 'service') {
+                                    currentIdService = props.row.id;
+                                    infoServiceEdit = false;
+                                    assignFormService(props.row.id);
+                                    dialogServiceEdit = true;
+                                  }
                                 }
-                              }
+                              "
+                              @edit="
+                                async () => {
+                                  if (props.row.type === 'product') {
+                                    currentIdProduct = props.row.id;
+                                    infoProductEdit = true;
+                                    assignFormDataProduct(props.row);
+                                    dialogProductEdit = true;
+                                  }
+                                  if (props.row.type === 'service') {
+                                    currentIdService = props.row.id;
+                                    infoServiceEdit = true;
+                                    assignFormService(props.row.id);
+                                    dialogServiceEdit = true;
+                                  }
+                                }
+                              "
+                              @delete="
+                                () => {
+                                  if (props.row.type === 'product') {
+                                    deleteProductConfirm(props.row.id);
+                                  }
+                                  if (props.row.type === 'service') {
+                                    deleteServiceConfirm(props.row.id);
+                                  }
+                                }
+                              "
+                              @change-status="
+                                () => {
+                                  triggerChangeStatus(
+                                    props.row.id,
+                                    props.row.status,
+                                    props.row.type,
+                                  );
+                                }
+                              "
+                            />
+                          </q-td>
+                        </q-tr>
+                      </template>
+
+                      <template v-slot:item="{ row }">
+                        <div class="col-12 col-md-6 col-lg-4">
+                          <TotalProductCardComponent
+                            :data="row"
+                            :key="row.id"
+                            :title="row.name"
+                            :is-disabled="
+                              row.status === 'INACTIVE' ? true : false
                             "
-                            @edit="
-                              async () => {
-                                if (props.row.type === 'product') {
-                                  currentIdProduct = props.row.id;
-                                  infoProductEdit = true;
-                                  assignFormDataProduct(props.row);
-                                  dialogProductEdit = true;
-                                }
-                                if (props.row.type === 'service') {
-                                  currentIdService = props.row.id;
-                                  infoServiceEdit = true;
-                                  assignFormService(props.row.id);
-                                  dialogServiceEdit = true;
-                                }
-                              }
-                            "
-                            @delete="
-                              () => {
-                                if (props.row.type === 'product') {
-                                  deleteProductConfirm(props.row.id);
-                                }
-                                if (props.row.type === 'service') {
-                                  deleteServiceConfirm(props.row.id);
-                                }
-                              }
-                            "
-                            @change-status="
+                            :action="actionDisplay"
+                            :price-display="priceDisplay"
+                            @toggle-status="
                               () => {
                                 triggerChangeStatus(
-                                  props.row.id,
-                                  props.row.status,
-                                  props.row.type,
+                                  row.id,
+                                  row.status,
+                                  row.type,
                                 );
                               }
                             "
+                            @menu-view-detail="
+                              async () => {
+                                if (row.type === 'product') {
+                                  currentIdProduct = row.id;
+                                  assignFormDataProduct(row);
+                                  dialogProductEdit = true;
+                                }
+                                if (row.type === 'service') {
+                                  currentIdService = row.id;
+                                  infoServiceEdit = false;
+                                  assignFormService(row.id);
+                                  dialogServiceEdit = true;
+                                }
+                              }
+                            "
+                            @menu-edit="
+                              async () => {
+                                if (row.type === 'product') {
+                                  currentIdProduct = row.id;
+                                  infoProductEdit = true;
+                                  assignFormDataProduct(row);
+                                  dialogProductEdit = true;
+                                }
+                                if (row.type === 'service') {
+                                  currentIdService = row.id;
+                                  infoServiceEdit = true;
+                                  assignFormService(row.id);
+                                  dialogServiceEdit = true;
+                                }
+                              }
+                            "
+                            @menu-delete="
+                              () => {
+                                if (row.type === 'product') {
+                                  deleteProductConfirm(row.id);
+                                }
+                                if (row.type === 'service') {
+                                  deleteServiceConfirm(row.id);
+                                }
+                              }
+                            "
                           />
-                        </q-td>
-                      </q-tr>
-                    </template>
-
-                    <template v-slot:item="{ row }">
-                      <div class="col-12 col-md-6 col-lg-4">
-                        <TotalProductCardComponent
-                          :data="row"
-                          :key="row.id"
-                          :title="row.name"
-                          :is-disabled="
-                            row.status === 'INACTIVE' ? true : false
-                          "
-                          :action="actionDisplay"
-                          :price-display="priceDisplay"
-                          @toggle-status="
-                            () => {
-                              triggerChangeStatus(row.id, row.status, row.type);
-                            }
-                          "
-                          @menu-view-detail="
-                            async () => {
-                              if (row.type === 'product') {
-                                currentIdProduct = row.id;
-                                assignFormDataProduct(row);
-                                dialogProductEdit = true;
-                              }
-                              if (row.type === 'service') {
-                                currentIdService = row.id;
-                                infoServiceEdit = false;
-                                assignFormService(row.id);
-                                dialogServiceEdit = true;
-                              }
-                            }
-                          "
-                          @menu-edit="
-                            async () => {
-                              if (row.type === 'product') {
-                                currentIdProduct = row.id;
-                                infoProductEdit = true;
-                                assignFormDataProduct(row);
-                                dialogProductEdit = true;
-                              }
-                              if (row.type === 'service') {
-                                currentIdService = row.id;
-                                infoServiceEdit = true;
-                                assignFormService(row.id);
-                                dialogServiceEdit = true;
-                              }
-                            }
-                          "
-                          @menu-delete="
-                            () => {
-                              if (row.type === 'product') {
-                                deleteProductConfirm(row.id);
-                              }
-                              if (row.type === 'service') {
-                                deleteServiceConfirm(row.id);
-                              }
-                            }
-                          "
-                        />
+                        </div>
+                      </template>
+                    </q-table>
+                    <template v-slot:loading>
+                      <div
+                        v-if="
+                          $q.screen.lt.sm &&
+                          currentPageServiceAndProduct !==
+                            maxPageServiceAndProduct
+                        "
+                        class="row justify-center"
+                      >
+                        <q-spinner-dots color="primary" size="40px" />
                       </div>
                     </template>
-                  </q-table>
+                  </q-infinite-scroll>
                 </div>
               </template>
-              <!-- footer -->
-              <div
+              <!-- footer product service -->
+              <footer
+                v-if="$q.screen.gt.xs"
                 class="row items-center justify-between q-py-sm q-px-md surface-2"
               >
                 <div class="col-4">
@@ -3154,37 +3212,7 @@ watch(
                       {{ $t('general.recordPerPage') }}
                     </div>
                     <div>
-                      <q-btn-dropdown
-                        dense
-                        unelevated
-                        :label="pageSizeServiceAndProduct"
-                        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 () => {
-                                pageSizeServiceAndProduct = v;
-
-                                if (productAndServiceTab === 'product') {
-                                  await fetchListOfProduct();
-                                }
-                                if (productAndServiceTab === 'service') {
-                                  await fetchListOfService();
-                                }
-                              }
-                            "
-                          >
-                            <q-item-section>
-                              <q-item-label>{{ v }}</q-item-label>
-                            </q-item-section>
-                          </q-item>
-                        </q-list>
-                      </q-btn-dropdown>
+                      <PaginationPageSize v-model="pageSizeServiceAndProduct" />
                     </div>
                   </div>
                 </div>
@@ -3220,7 +3248,7 @@ watch(
                     "
                   />
                 </div>
-              </div>
+              </footer>
             </div>
           </div>
         </template>