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

---
 src/pages/07_agencies-management/MainPage.vue | 467 +++++++++---------
 1 file changed, 246 insertions(+), 221 deletions(-)

diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 7e1dcf5b..c80f114a 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -241,7 +241,7 @@ async function fetchData() {
   });
 
   if (ret) {
-    data.value = ret.result;
+    $q.screen.xs ? data.value.push(...ret.result) : (data.value = ret.result);
     pageMax.value = Math.ceil(ret.total / pageSize.value);
     pageState.total = ret.total;
   }
@@ -316,7 +316,7 @@ watch(
 
     <!-- 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"
@@ -448,107 +448,104 @@ watch(
         </article>
 
         <article v-else class="col q-pa-md surface-2 scroll full-width">
-          <q-table
-            flat
-            bordered
-            :grid="pageState.gridView"
-            :rows="data"
-            :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 || page === pageMax) return;
+                page = page + 1;
+                fetchData().then(() => done(page >= pageMax));
+              }
+            "
           >
-            <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" :props="props">
-                  {{ $t(col.label) }}
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
-            </template>
-
-            <template v-slot:body="props">
-              <q-tr
-                :class="{
-                  'app-text-muted': props.row.status === 'INACTIVE',
-                  'status-active': props.row.status !== 'INACTIVE',
-                  'status-inactive': props.row.status === 'INACTIVE',
-                }"
-                :props="props"
-                :style="
-                  props.rowIndex % 2 !== 0
-                    ? $q.dark.isActive
-                      ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                      : `background: #f9fafc`
-                    : ''
-                "
-              >
-                <q-td
-                  class="text-center"
-                  v-if="fieldSelected.includes('orderNumber')"
+            <q-table
+              flat
+              bordered
+              :grid="pageState.gridView"
+              :rows="data"
+              :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 v-slot:header="props">
+                <q-tr
+                  style="background-color: hsla(var(--info-bg) / 0.07)"
+                  :props="props"
                 >
-                  {{ 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 size="md">
-                      <q-img
-                        class="text-center"
-                        :ratio="1"
-                        :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
-                      >
-                        <template #error>
-                          <div
-                            class="no-padding full-width full-height flex items-center justify-center"
-                            style="
-                              background: hsla(var(--green-8-hsl) / 0.1);
-                              color: hsla(var(--green-8-hsl) / 1);
-                            "
-                          >
-                            <Icon icon="ph-building-office" />
-                          </div>
-                        </template>
-                      </q-img>
-                    </q-avatar>
-                    <span class="col q-pl-md">
-                      <div>
-                        {{
-                          $i18n.locale === 'eng'
-                            ? props.row.nameEN
-                            : props.row.name
-                        }}
-                      </div>
-                      <div class="app-text-muted">
-                        {{ props.row.code }}
-                      </div>
-                    </span>
-                  </section>
-                </q-td>
-                <q-td v-if="fieldSelected.includes('address')">
-                  {{
-                    formatAddress({
-                      address: props.row.address,
-                      addressEN: props.row.addressEN,
-                      moo: props.row.moo,
-                      mooEN: props.row.mooEN,
-                      soi: props.row.soi,
-                      soiEN: props.row.soiEN,
-                      street: props.row.street,
-                      streetEN: props.row.streetEN,
-                      province: props.row.province,
-                      district: props.row.district,
-                      subDistrict: props.row.subDistrict,
-                      en: $i18n.locale === 'eng',
-                    })
-                  }}
-                  <q-tooltip>
+                  <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
+                  :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  :props="props"
+                  :style="
+                    props.rowIndex % 2 !== 0
+                      ? $q.dark.isActive
+                        ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                        : `background: #f9fafc`
+                      : ''
+                  "
+                >
+                  <q-td
+                    class="text-center"
+                    v-if="fieldSelected.includes('orderNumber')"
+                  >
+                    {{ 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 size="md">
+                        <q-img
+                          class="text-center"
+                          :ratio="1"
+                          :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
+                        >
+                          <template #error>
+                            <div
+                              class="no-padding full-width full-height flex items-center justify-center"
+                              style="
+                                background: hsla(var(--green-8-hsl) / 0.1);
+                                color: hsla(var(--green-8-hsl) / 1);
+                              "
+                            >
+                              <Icon icon="ph-building-office" />
+                            </div>
+                          </template>
+                        </q-img>
+                      </q-avatar>
+                      <span class="col q-pl-md">
+                        <div>
+                          {{
+                            $i18n.locale === 'eng'
+                              ? props.row.nameEN
+                              : props.row.name
+                          }}
+                        </div>
+                        <div class="app-text-muted">
+                          {{ props.row.code }}
+                        </div>
+                      </span>
+                    </section>
+                  </q-td>
+                  <q-td v-if="fieldSelected.includes('address')">
                     {{
                       formatAddress({
                         address: props.row.address,
@@ -565,119 +562,7 @@ watch(
                         en: $i18n.locale === 'eng',
                       })
                     }}
-                  </q-tooltip>
-                </q-td>
-                <q-td>
-                  <q-btn
-                    icon="mdi-eye-outline"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop="
-                      () => {
-                        assignFormData(props.row);
-                        triggerDialog('view');
-                      }
-                    "
-                  />
-                  <KebabAction
-                    hide-toggle
-                    :id-name="props.row.id"
-                    :status="props.row.status"
-                    @view="
-                      () => {
-                        assignFormData(props.row);
-                        triggerDialog('view');
-                      }
-                    "
-                    @edit="
-                      () => {
-                        assignFormData(props.row);
-                        triggerDialog('edit');
-                      }
-                    "
-                    @delete="() => triggerDelete(props.row.id)"
-                    @change-status="() => triggerChangeStatus(props.row)"
-                  />
-                </q-td>
-              </q-tr>
-            </template>
-
-            <template v-slot:item="props">
-              <section class="column col-12 col-md-6">
-                <div class="bordered col surface-1 rounded q-pa-md">
-                  <header class="row items-center">
-                    <q-avatar size="xl">
-                      <q-img
-                        class="text-center"
-                        :ratio="1"
-                        :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
-                      >
-                        <template #error>
-                          <div
-                            class="no-padding full-width full-height flex items-center justify-center"
-                            style="
-                              background: hsla(var(--green-8-hsl) / 0.1);
-                              color: hsla(var(--green-8-hsl) / 1);
-                            "
-                          >
-                            <Icon icon="ph-building-office" />
-                          </div>
-                        </template>
-                      </q-img>
-                    </q-avatar>
-                    <span class="text-weight-bold column q-pl-md">
-                      {{
-                        $i18n.locale === 'eng'
-                          ? props.row.nameEN
-                          : props.row.name
-                      }}
-                      <span class="text-caption app-text-muted-2">
-                        {{ props.row.code }}
-                      </span>
-                    </span>
-                    <nav class="row q-ml-auto items-center justify-end no-wrap">
-                      <q-btn
-                        icon="mdi-eye-outline"
-                        size="sm"
-                        dense
-                        round
-                        flat
-                        @click.stop="
-                          () => {
-                            assignFormData(props.row);
-                            triggerDialog('view');
-                          }
-                        "
-                      />
-                      <KebabAction
-                        hide-toggle
-                        :id-name="props.row.id"
-                        :status="props.row.status"
-                        @view="
-                          () => {
-                            assignFormData(props.row);
-                            triggerDialog('view');
-                          }
-                        "
-                        @edit="
-                          () => {
-                            assignFormData(props.row);
-                            triggerDialog('edit');
-                          }
-                        "
-                        @delete="() => triggerDelete(props.row.id)"
-                        @change-status="() => triggerChangeStatus(props.row)"
-                      />
-                    </nav>
-                  </header>
-                  <q-separator spaced="lg" />
-                  <div class="row full-width">
-                    <span class="col-2 app-text-muted">
-                      {{ $t('general.address') }}
-                    </span>
-                    <span class="col">
+                    <q-tooltip>
                       {{
                         formatAddress({
                           address: props.row.address,
@@ -694,7 +579,121 @@ watch(
                           en: $i18n.locale === 'eng',
                         })
                       }}
-                      <q-tooltip>
+                    </q-tooltip>
+                  </q-td>
+                  <q-td>
+                    <q-btn
+                      icon="mdi-eye-outline"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('view');
+                        }
+                      "
+                    />
+                    <KebabAction
+                      hide-toggle
+                      :id-name="props.row.id"
+                      :status="props.row.status"
+                      @view="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('view');
+                        }
+                      "
+                      @edit="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('edit');
+                        }
+                      "
+                      @delete="() => triggerDelete(props.row.id)"
+                      @change-status="() => triggerChangeStatus(props.row)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <section class="column col-12 col-md-6">
+                  <div class="bordered col surface-1 rounded q-pa-md">
+                    <header class="row items-center">
+                      <q-avatar size="xl">
+                        <q-img
+                          class="text-center"
+                          :ratio="1"
+                          :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
+                        >
+                          <template #error>
+                            <div
+                              class="no-padding full-width full-height flex items-center justify-center"
+                              style="
+                                background: hsla(var(--green-8-hsl) / 0.1);
+                                color: hsla(var(--green-8-hsl) / 1);
+                              "
+                            >
+                              <Icon icon="ph-building-office" />
+                            </div>
+                          </template>
+                        </q-img>
+                      </q-avatar>
+                      <span class="text-weight-bold column q-pl-md">
+                        {{
+                          $i18n.locale === 'eng'
+                            ? props.row.nameEN
+                            : props.row.name
+                        }}
+                        <span class="text-caption app-text-muted-2">
+                          {{ props.row.code }}
+                        </span>
+                      </span>
+                      <nav
+                        class="row q-ml-auto items-center justify-end no-wrap"
+                      >
+                        <q-btn
+                          icon="mdi-eye-outline"
+                          size="sm"
+                          dense
+                          round
+                          flat
+                          @click.stop="
+                            () => {
+                              assignFormData(props.row);
+                              triggerDialog('view');
+                            }
+                          "
+                        />
+                        <KebabAction
+                          hide-toggle
+                          :id-name="props.row.id"
+                          :status="props.row.status"
+                          @view="
+                            () => {
+                              assignFormData(props.row);
+                              triggerDialog('view');
+                            }
+                          "
+                          @edit="
+                            () => {
+                              assignFormData(props.row);
+                              triggerDialog('edit');
+                            }
+                          "
+                          @delete="() => triggerDelete(props.row.id)"
+                          @change-status="() => triggerChangeStatus(props.row)"
+                        />
+                      </nav>
+                    </header>
+                    <q-separator spaced="lg" />
+                    <div class="row full-width">
+                      <span class="col-2 app-text-muted">
+                        {{ $t('general.address') }}
+                      </span>
+                      <span class="col">
                         {{
                           formatAddress({
                             address: props.row.address,
@@ -711,19 +710,45 @@ watch(
                             en: $i18n.locale === 'eng',
                           })
                         }}
-                      </q-tooltip>
-                    </span>
+                        <q-tooltip>
+                          {{
+                            formatAddress({
+                              address: props.row.address,
+                              addressEN: props.row.addressEN,
+                              moo: props.row.moo,
+                              mooEN: props.row.mooEN,
+                              soi: props.row.soi,
+                              soiEN: props.row.soiEN,
+                              street: props.row.street,
+                              streetEN: props.row.streetEN,
+                              province: props.row.province,
+                              district: props.row.district,
+                              subDistrict: props.row.subDistrict,
+                              en: $i18n.locale === 'eng',
+                            })
+                          }}
+                        </q-tooltip>
+                      </span>
+                    </div>
                   </div>
-                </div>
-              </section>
+                </section>
+              </template>
+            </q-table>
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && page !== pageMax"
+                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="pageMax > 0"
+          v-if="pageMax > 0 && $q.screen.gt.xs"
         >
           <div class="col-4">
             <div class="row items-center no-wrap">