From 4a088c1aab8ef78ce207f380ec8e20ab510e2e15 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 29 Jan 2025 14:02:10 +0700
Subject: [PATCH] refactor: 02, 08 => screen.xs fetch scroll

---
 .../02_personnel-management/MainPage.vue      | 599 +++++++++---------
 src/pages/08_request-list/MainPage.vue        |  41 +-
 src/stores/user/index.ts                      |   5 +-
 3 files changed, 347 insertions(+), 298 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 66d90986..4d3f8553 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -639,7 +639,7 @@ async function fetchImageList(id: string, selectedName?: string) {
 }
 
 async function fetchUserList() {
-  await userStore.fetchList({
+  const ret = await userStore.fetchList({
     includeBranch: true,
     pageSize: pageSize.value,
     page: currentPage.value,
@@ -652,6 +652,18 @@ async function fetchUserList() {
           ? 'ACTIVE'
           : 'INACTIVE',
   });
+
+  if (ret) {
+    if ($q.screen.xs) {
+      if (!userData.value) {
+        userData.value = ret;
+      } else {
+        userData.value?.result.push(...ret.result);
+      }
+    } else {
+      userData.value = ret;
+    }
+  }
 }
 
 function noPersonnel() {
@@ -1066,64 +1078,79 @@ watch(
         </div>
       </div>
 
-      <div
+      <article
+        v-if="userData"
         class="flex full-width full-height q-pa-md surface-2 column col scroll"
       >
-        <template v-if="userData && userData.total > 0">
-          <q-table
-            flat
-            bordered
-            :grid="modeView"
-            :rows="userData.result"
-            :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"
-              >
-                <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>
+        <q-infinite-scroll
+          @load="
+            (_, done) => {
+              if ($q.screen.gt.xs || currentPage === currentMaxPage) return;
+              currentPage = currentPage + 1;
 
-            <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')"
+              fetchUserList().then(() => done(currentPage >= currentMaxPage));
+            }
+          "
+        >
+          <template v-if="userData && userData.total > 0">
+            <q-table
+              flat
+              bordered
+              :grid="modeView"
+              :rows="userData.result"
+              :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"
                 >
-                  {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
-                </q-td>
+                  <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>
 
-                <q-td v-if="fieldSelected.includes('name')">
-                  <div class="row items-center" style="flex-wrap: nowrap">
-                    <div style="display: flex">
-                      <div class="q-mr-md">
-                        <div
-                          :style="`
+              <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')"
+                  >
+                    {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
+                  </q-td>
+
+                  <q-td v-if="fieldSelected.includes('name')">
+                    <div class="row items-center" style="flex-wrap: nowrap">
+                      <div style="display: flex">
+                        <div class="q-mr-md">
+                          <div
+                            :style="`
                                   border-radius: 50%;
                                   border-style: solid;
                                   border-width: 2px;
@@ -1137,245 +1164,247 @@ watch(
                                     '--pink-8-hsl'
                                   }
                                 `"
-                          class="q-pa-xs"
-                        >
-                          <q-avatar size="md">
-                            <q-img
-                              class="text-center"
-                              :ratio="1"
-                              :src="`${baseUrl}/user/${props.row.id}/profile-image/${props.row.selectedImage}?ts=${Date.now()}`"
-                            >
-                              <template #error>
-                                <div
-                                  class="no-padding full-width full-height flex items-center justify-center"
-                                  :style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
-                                >
-                                  <q-img
-                                    v-if="props.row.gender"
-                                    :src="
-                                      props.row.gender === 'male'
-                                        ? '/no-img-man.png'
-                                        : '/no-img-female.png'
-                                    "
-                                  />
-                                  <q-icon
-                                    v-else
-                                    size="sm"
-                                    name="mdi-account-outline"
-                                    style="color: white"
-                                  />
-                                </div>
-                              </template>
-                            </q-img>
+                            class="q-pa-xs"
+                          >
+                            <q-avatar size="md">
+                              <q-img
+                                class="text-center"
+                                :ratio="1"
+                                :src="`${baseUrl}/user/${props.row.id}/profile-image/${props.row.selectedImage}?ts=${Date.now()}`"
+                              >
+                                <template #error>
+                                  <div
+                                    class="no-padding full-width full-height flex items-center justify-center"
+                                    :style="`${props.row.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                                  >
+                                    <q-img
+                                      v-if="props.row.gender"
+                                      :src="
+                                        props.row.gender === 'male'
+                                          ? '/no-img-man.png'
+                                          : '/no-img-female.png'
+                                      "
+                                    />
+                                    <q-icon
+                                      v-else
+                                      size="sm"
+                                      name="mdi-account-outline"
+                                      style="color: white"
+                                    />
+                                  </div>
+                                </template>
+                              </q-img>
 
-                            <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>
+                              <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>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div class="column">
-                      <div class="col ellipsis" style="max-width: 20vw">
-                        {{
-                          locale === 'eng'
-                            ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
-                            : `${props.row.firstName} ${props.row.lastName}`.trim()
-                        }}
-                        <q-tooltip
-                          anchor="bottom left"
-                          self="center left"
-                          :delay="300"
-                        >
+                      <div class="column">
+                        <div class="col ellipsis" style="max-width: 20vw">
                           {{
                             locale === 'eng'
                               ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                               : `${props.row.firstName} ${props.row.lastName}`.trim()
                           }}
-                        </q-tooltip>
+                          <q-tooltip
+                            anchor="bottom left"
+                            self="center left"
+                            :delay="300"
+                          >
+                            {{
+                              locale === 'eng'
+                                ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                                : `${props.row.firstName} ${props.row.lastName}`.trim()
+                            }}
+                          </q-tooltip>
 
-                        <q-icon
-                          class="q-pl-xs"
-                          :class="{
-                            'symbol-gender': props.row.gender,
-                            'symbol-gender__male': props.row.gender === 'male',
-                            'symbol-gender__female':
-                              props.row.gender === 'female',
-                          }"
-                          :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
-                          width="24px"
-                        />
-                      </div>
-                      <div class="app-text-muted">
-                        {{ props.row.code || '-' }}
-                      </div>
-                    </div>
-                  </div>
-                </q-td>
-
-                <q-td v-if="fieldSelected.includes('telephoneNo')">
-                  {{ props.row.telephoneNo || '-' }}
-                </q-td>
-
-                <q-td v-if="fieldSelected.includes('birthDate')">
-                  {{ calculateAge(props.row.birthDate) || '-' }}
-                </q-td>
-
-                <q-td v-if="fieldSelected.includes('email')">
-                  {{ props.row.email || '-' }}
-                </q-td>
-
-                <q-td v-if="fieldSelected.includes('userRole')">
-                  <span class="tags tags__purple">
-                    {{ mapRole(props.row.userRole) }}
-                  </span>
-                </q-td>
-
-                <q-td>
-                  <q-btn
-                    :id="`btn-view-${props.row.username}`"
-                    icon="mdi-eye-outline"
-                    size="sm"
-                    dense
-                    round
-                    flat
-                    @click.stop="
-                      () => {
-                        openDialog('INFO', props.row.id);
-                      }
-                    "
-                  />
-                  <KebabAction
-                    :id-name="props.row.username"
-                    :status="props.row.status"
-                    @view="
-                      () => {
-                        openDialog('INFO', props.row.id);
-                      }
-                    "
-                    @edit="
-                      () => {
-                        openDialog('INFO', props.row.id, true);
-                      }
-                    "
-                    @delete="onDelete(props.row.id)"
-                    @change-status="
-                      async () => {
-                        triggerChangeStatus(props.row.id, props.row.status);
-                      }
-                    "
-                  />
-                </q-td>
-              </q-tr>
-            </template>
-
-            <template v-slot:item="props">
-              <div class="col-md-3 col-sm-6 col-12">
-                <PersonCard
-                  :prefix-id="props.row.username"
-                  :data="{
-                    code: props.row.code,
-                    name:
-                      locale === 'eng'
-                        ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
-                        : `${props.row.firstName} ${props.row.lastName}`.trim(),
-                    img: props.row.profileImageUrl
-                      ? props.row.profileImageUrl
-                      : props.row.userRole.includes('system')
-                        ? '/img-admin.png'
-                        : props.row.gender === 'male'
-                          ? '/no-img-man.png'
-                          : '/no-img-female.png',
-                    male: props.row.gender === 'male',
-                    female: props.row.gender === 'female',
-                    detail: [
-                      {
-                        icon: 'mdi-phone-outline',
-                        value: props.row.telephoneNo,
-                      },
-                      {
-                        icon: 'mdi-clock-outline',
-                        value:
-                          (props.row.birthDate &&
-                            calculateAge(props.row.birthDate)) ||
-                          '-',
-                      },
-                    ],
-                  }"
-                  :tag="[
-                    {
-                      color:
-                        {
-                          USER: 'cyan',
-                          MESSENGER: 'yellow',
-                          DELEGATE: 'red',
-                          AGENCY: 'magenta',
-                        }[props.row.userType as string] || 'pink',
-                      value: $t(`personnel.${props.row.userType}`),
-                    },
-                  ]"
-                  :disabled="props.row.status === 'INACTIVE'"
-                  @update-card="(a, b) => openDialog(a, props.row.id, b)"
-                  @delete-card="onDelete(props.row.id)"
-                  @enter-card="(a) => openDialog(a, props.row.id)"
-                  @toggle-status="
-                    triggerChangeStatus(props.row.id, props.row.status)
-                  "
-                >
-                  <template #img>
-                    <q-img
-                      class="text-center"
-                      :ratio="1"
-                      :src="`${baseUrl}/user/${props.row.id}/profile-image/${props.row.selectedImage}?ts=${Date.now()}`"
-                      style="
-                        object-fit: cover;
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 50%;
-                      "
-                    >
-                      <template #error>
-                        <div
-                          class="no-padding full-width full-height flex items-center justify-center"
-                          style="
-                            background: linear-gradient(
-                              135deg,
-                              rgba(43, 137, 223, 1) 0%,
-                              rgba(230, 51, 81, 1) 100%
-                            );
-                          "
-                        >
-                          <q-img
-                            v-if="props.row.gender"
-                            :src="
-                              props.row.gender === 'male'
-                                ? '/no-img-man.png'
-                                : '/no-img-female.png'
-                            "
-                          />
                           <q-icon
-                            v-else
-                            size="lg"
-                            name="mdi-account-outline"
-                            style="color: white"
+                            class="q-pl-xs"
+                            :class="{
+                              'symbol-gender': props.row.gender,
+                              'symbol-gender__male':
+                                props.row.gender === 'male',
+                              'symbol-gender__female':
+                                props.row.gender === 'female',
+                            }"
+                            :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
+                            width="24px"
                           />
                         </div>
-                      </template>
-                    </q-img>
-                  </template>
-                </PersonCard>
-              </div>
-            </template>
-          </q-table>
-        </template>
+                        <div class="app-text-muted">
+                          {{ props.row.code || '-' }}
+                        </div>
+                      </div>
+                    </div>
+                  </q-td>
+
+                  <q-td v-if="fieldSelected.includes('telephoneNo')">
+                    {{ props.row.telephoneNo || '-' }}
+                  </q-td>
+
+                  <q-td v-if="fieldSelected.includes('birthDate')">
+                    {{ calculateAge(props.row.birthDate) || '-' }}
+                  </q-td>
+
+                  <q-td v-if="fieldSelected.includes('email')">
+                    {{ props.row.email || '-' }}
+                  </q-td>
+
+                  <q-td v-if="fieldSelected.includes('userRole')">
+                    <span class="tags tags__purple">
+                      {{ mapRole(props.row.userRole) }}
+                    </span>
+                  </q-td>
+
+                  <q-td>
+                    <q-btn
+                      :id="`btn-view-${props.row.username}`"
+                      icon="mdi-eye-outline"
+                      size="sm"
+                      dense
+                      round
+                      flat
+                      @click.stop="
+                        () => {
+                          openDialog('INFO', props.row.id);
+                        }
+                      "
+                    />
+                    <KebabAction
+                      :id-name="props.row.username"
+                      :status="props.row.status"
+                      @view="
+                        () => {
+                          openDialog('INFO', props.row.id);
+                        }
+                      "
+                      @edit="
+                        () => {
+                          openDialog('INFO', props.row.id, true);
+                        }
+                      "
+                      @delete="onDelete(props.row.id)"
+                      @change-status="
+                        async () => {
+                          triggerChangeStatus(props.row.id, props.row.status);
+                        }
+                      "
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <div class="col-md-3 col-sm-6 col-12">
+                  <PersonCard
+                    :prefix-id="props.row.username"
+                    :data="{
+                      code: props.row.code,
+                      name:
+                        locale === 'eng'
+                          ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                          : `${props.row.firstName} ${props.row.lastName}`.trim(),
+                      img: props.row.profileImageUrl
+                        ? props.row.profileImageUrl
+                        : props.row.userRole.includes('system')
+                          ? '/img-admin.png'
+                          : props.row.gender === 'male'
+                            ? '/no-img-man.png'
+                            : '/no-img-female.png',
+                      male: props.row.gender === 'male',
+                      female: props.row.gender === 'female',
+                      detail: [
+                        {
+                          icon: 'mdi-phone-outline',
+                          value: props.row.telephoneNo,
+                        },
+                        {
+                          icon: 'mdi-clock-outline',
+                          value:
+                            (props.row.birthDate &&
+                              calculateAge(props.row.birthDate)) ||
+                            '-',
+                        },
+                      ],
+                    }"
+                    :tag="[
+                      {
+                        color:
+                          {
+                            USER: 'cyan',
+                            MESSENGER: 'yellow',
+                            DELEGATE: 'red',
+                            AGENCY: 'magenta',
+                          }[props.row.userType as string] || 'pink',
+                        value: $t(`personnel.${props.row.userType}`),
+                      },
+                    ]"
+                    :disabled="props.row.status === 'INACTIVE'"
+                    @update-card="(a, b) => openDialog(a, props.row.id, b)"
+                    @delete-card="onDelete(props.row.id)"
+                    @enter-card="(a) => openDialog(a, props.row.id)"
+                    @toggle-status="
+                      triggerChangeStatus(props.row.id, props.row.status)
+                    "
+                  >
+                    <template #img>
+                      <q-img
+                        class="text-center"
+                        :ratio="1"
+                        :src="`${baseUrl}/user/${props.row.id}/profile-image/${props.row.selectedImage}?ts=${Date.now()}`"
+                        style="
+                          object-fit: cover;
+                          width: 100%;
+                          height: 100%;
+                          border-radius: 50%;
+                        "
+                      >
+                        <template #error>
+                          <div
+                            class="no-padding full-width full-height flex items-center justify-center"
+                            style="
+                              background: linear-gradient(
+                                135deg,
+                                rgba(43, 137, 223, 1) 0%,
+                                rgba(230, 51, 81, 1) 100%
+                              );
+                            "
+                          >
+                            <q-img
+                              v-if="props.row.gender"
+                              :src="
+                                props.row.gender === 'male'
+                                  ? '/no-img-man.png'
+                                  : '/no-img-female.png'
+                              "
+                            />
+                            <q-icon
+                              v-else
+                              size="lg"
+                              name="mdi-account-outline"
+                              style="color: white"
+                            />
+                          </div>
+                        </template>
+                      </q-img>
+                    </template>
+                  </PersonCard>
+                </div>
+              </template>
+            </q-table>
+          </template>
+        </q-infinite-scroll>
 
         <div
           v-if="
@@ -1410,11 +1439,11 @@ watch(
         >
           <NoData :not-found="!!inputSearch" />
         </div>
-      </div>
+      </article>
 
-      <div
+      <footer
         class="row justify-between items-center q-px-md q-py-sm"
-        v-if="currentMaxPage > 0"
+        v-if="currentMaxPage > 0 && $q.screen.gt.xs"
       >
         <div class="col-4">
           <div class="row items-center no-wrap">
@@ -1445,7 +1474,7 @@ watch(
             :fetch-data="async () => await fetchUserList()"
           />
         </div>
-      </div>
+      </footer>
     </div>
   </div>
 
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 9097c43d..7d37ac74 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -58,7 +58,8 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
   });
 
   if (ret) {
-    data.value = ret.result;
+    $q.screen.xs ? data.value.push(...ret.result) : (data.value = ret.result);
+
     pageState.total = ret.total;
     pageMax.value = Math.ceil(ret.total / pageSize.value);
   }
@@ -332,20 +333,40 @@ watch([() => pageState.inputSearch, () => pageState.statusFilter], () =>
           <NoData :not-found="!!pageState.inputSearch" />
         </article>
         <article v-else class="col surface-2 full-width scroll q-pa-md">
-          <TableRequestList
-            :columns="column"
-            :rows="data"
-            :grid="pageState.gridView"
-            :visible-columns="pageState.fieldSelected"
-            @view="(data) => triggerView({ requestData: data })"
-            @delete="(data) => triggerCancel(data.id)"
-          />
+          <q-infinite-scroll
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs) return;
+                page = page + 1;
+                fetchList({ rotateFlowId: true }).then(() =>
+                  done(page >= pageMax),
+                );
+              }
+            "
+          >
+            <TableRequestList
+              :columns="column"
+              :rows="data"
+              :grid="pageState.gridView"
+              :visible-columns="pageState.fieldSelected"
+              @view="(data) => triggerView({ requestData: data })"
+              @delete="(data) => triggerCancel(data.id)"
+            />
+            <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-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">
diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index 0a171101..1d26ea90 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -209,11 +209,10 @@ const useUserStore = defineStore('api-user', () => {
     responsibleDistrictId?: string;
     activeBranchOnly?: boolean;
   }) {
-    const res = await api.get<Pagination<User[]>>(`/user`, { params: opts });
+    const res = await api.get<Pagination<User[]>>('/user', { params: opts });
 
     if (res && res.status === 200) {
-      data.value = res.data;
-      return data.value;
+      return res.data;
     }
     return false;
   }