From e2ede08319f220a4e591e05c265154fb6147560e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 30 Jan 2025 16:54:28 +0700
Subject: [PATCH] refactor: 02 => optimize screen.xs fetch scroll logic

---
 .../02_personnel-management/MainPage.vue      | 618 ++++++++++--------
 1 file changed, 333 insertions(+), 285 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 4d3f8553..f0d317ca 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -74,6 +74,7 @@ const imageDialog = ref(false);
 const infoDrawerEdit = ref(false);
 const refreshImageState = ref(false);
 const refFilter = ref<InstanceType<typeof QSelect>>();
+const firstScroll = ref(false);
 
 const inputSearch = ref('');
 const currentTab = ref<string>('ALL');
@@ -434,7 +435,7 @@ async function onSubmit(excludeDialog?: boolean) {
       }
     }
 
-    await fetchUserList();
+    $q.screen.xs ? await fetchUserEditXs() : await fetchUserList();
     typeStats.value = await userStore.typeStats();
     const res = await branchStore.userStats(formData.value.userType);
     if (res) {
@@ -466,9 +467,14 @@ async function onSubmit(excludeDialog?: boolean) {
       }
     }
 
-    currentTab.value = formData.value.userType;
+    if (
+      currentTab.value === formData.value.userType &&
+      currentTab.value !== 'ALL'
+    ) {
+      $q.screen.gt.xs ? await fetchUserEditXs() : await fetchUserList();
+    }
 
-    await fetchUserList();
+    currentTab.value = formData.value.userType;
 
     typeStats.value = await userStore.typeStats();
     const res = await branchStore.userStats(formData.value.userType);
@@ -658,6 +664,9 @@ async function fetchUserList() {
       if (!userData.value) {
         userData.value = ret;
       } else {
+        userData.value.page = ret.page;
+        userData.value.pageSize = ret.pageSize;
+        userData.value.total = ret.total;
         userData.value?.result.push(...ret.result);
       }
     } else {
@@ -666,6 +675,26 @@ async function fetchUserList() {
   }
 }
 
+async function fetchUserEditXs() {
+  const ret = await userStore.fetchList({
+    includeBranch: true,
+    pageSize: userData.value?.result.length || 0,
+    page: 1,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
+    userType: currentTab.value === 'ALL' ? undefined : currentTab.value,
+    status:
+      statusFilter.value === 'all'
+        ? undefined
+        : statusFilter.value === 'statusACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+  });
+
+  if (ret) {
+    userData.value = ret;
+  }
+}
+
 function noPersonnel() {
   const number =
     typeStats.value &&
@@ -700,8 +729,11 @@ onMounted(async () => {
 watch(
   () => currentTab.value,
   async (label) => {
+    firstScroll.value = true;
     mapUserType(label);
-    await fetchUserList();
+    if (userData.value) userData.value.result = [];
+    currentPage.value = 1;
+    if ($q.screen.gt.xs) await fetchUserList();
     const res = await branchStore.userStats(label);
     if (res) {
       userStats.value = res;
@@ -734,7 +766,12 @@ watch(
   },
 );
 
-watch([inputSearch, statusFilter, pageSize], async () => await fetchUserList());
+watch([inputSearch, statusFilter, pageSize], async () => {
+  if (userData.value) userData.value.result = [];
+  currentPage.value = 1;
+
+  await fetchUserList();
+});
 
 watch(
   () => $q.screen.lt.md,
@@ -1083,74 +1120,79 @@ watch(
         class="flex full-width full-height q-pa-md surface-2 column col scroll"
       >
         <q-infinite-scroll
+          :key="currentTab"
+          :offset="100"
           @load="
             (_, done) => {
-              if ($q.screen.gt.xs || currentPage === currentMaxPage) return;
-              currentPage = currentPage + 1;
+              if ($q.screen.gt.xs) return;
+              currentPage = firstScroll ? 1 : currentPage + 1;
 
-              fetchUserList().then(() => done(currentPage >= currentMaxPage));
+              fetchUserList().then(() => {
+                firstScroll = false;
+                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"
-                >
-                  <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-table
+            v-if="userData && userData.total > 0"
+            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>
 
-              <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`
-                      : ''
-                  "
+            <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-td
-                    class="text-center"
-                    v-if="fieldSelected.includes('orderNumber')"
-                  >
-                    {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
-                  </q-td>
+                  {{
+                    $q.screen.xs
+                      ? props.rowIndex + 1
+                      : (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="`
+                <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;
@@ -1164,245 +1206,251 @@ 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>
-                          </div>
+                            <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 class="column">
-                        <div class="col ellipsis" style="max-width: 20vw">
+                    </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"
+                        >
                           {{
                             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"
-                          >
-                            {{
-                              locale === 'eng'
-                                ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
-                                : `${props.row.firstName} ${props.row.lastName}`.trim()
-                            }}
-                          </q-tooltip>
+                        </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>
+                        <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>
-                  </q-td>
+                  </div>
+                </q-td>
 
-                  <q-td v-if="fieldSelected.includes('telephoneNo')">
-                    {{ props.row.telephoneNo || '-' }}
-                  </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('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('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 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)
+                <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);
+                      }
                     "
-                  >
-                    <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%
-                              );
+                  />
+                  <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-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>
+                          />
+                          <q-icon
+                            v-else
+                            size="lg"
+                            name="mdi-account-outline"
+                            style="color: white"
+                          />
+                        </div>
+                      </template>
+                    </q-img>
+                  </template>
+                </PersonCard>
+              </div>
+            </template>
+          </q-table>
+          <template v-slot:loading>
+            <div
+              v-if="$q.screen.lt.sm && currentPage !== currentMaxPage"
+              class="row justify-center"
+            >
+              <q-spinner-dots color="primary" size="40px" />
+            </div>
           </template>
         </q-infinite-scroll>