ปรับ กล่องข้อความ

src/views/MainLayout.vue

@@ -83,12 +83,13 @@ const options = ref<optionType[]>([
   },
 ]);
 
-const getDataNotification = async () => {
+const getDataNotification = async (index: number) => {
   // showLoader();
   await http
-    .get(config.API.msgNotificate)
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res: any) => {
-      const response = res.data.result;
+      const response = res.data.result.data;
+      totalInbox.value = res.data.result.total;
       let list: notiType[] = [];
       response.map((e: any) => {
         list.push({
@@ -101,7 +102,7 @@ const getDataNotification = async () => {
           timereceive: new Date(e.receiveDate),
         });
       });
-      notiList.value = list;
+      notiList.value.push(...list);
     })
     .catch((e) => {
       // messageError($q, e);
@@ -218,7 +219,7 @@ onMounted(async () => {
     await fetchroleUser(keycloak.tokenParsed.role);
   }
 
-  await getDataNotification();
+  await getDataNotification(1);
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -421,7 +422,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      getDataNotification();
+      getDataNotification(1);
       hideLoader();
     });
 };
@@ -429,6 +430,16 @@ const deleteData = async (id: string) => {
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteData(id));
 };
+
+const totalInbox = ref<number>(0);
+function onLoad(index: any, done: any) {
+  if (notiList.value.length < totalInbox.value) {
+    setTimeout(() => {
+      getDataNotification(index + 1);
+      done();
+    }, 2000);
+  }
+}
 </script>
 
 <!-- โครงเว็บ -->
@@ -485,41 +496,58 @@ const clickDelete = (id: string) => {
             color="negative"
             text-color="white"
             floating
-            >{{ notiList.length }}</q-badge
+            >{{ totalInbox }}</q-badge
           >
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
             </div>
 
-            <q-list style="min-width: 300px" v-for="n in notiList" :key="n.id">
-              <q-item v-ripple class="mytry q-py-xs" dense>
-                <q-item-section avatar top style="min-width: 40px">
-                  <q-avatar color="primary" size="22px" text-color="white">
-                    <span class="text-weight-medium text-uppercase">{{
-                      n.sender
-                    }}</span>
-                  </q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label caption class="text-black">{{
-                    n.body
-                  }}</q-item-label>
-                  <q-item-label caption class="row items-center text-grey-7">{{
-                    date2Thai(n.timereceive)
-                  }}</q-item-label>
-                </q-item-section>
-                <q-btn
-                  size="sm"
-                  unelevated
-                  dense
-                  icon="mdi-close"
-                  class="mybtn q-mx-xs"
-                  @click="clickDelete(n.id)"
-                ></q-btn>
-              </q-item>
-              <q-separator color="grey-2" />
-            </q-list>
+            <q-infinite-scroll
+              @load="onLoad"
+              :offset="250"
+              style="min-width: 300px"
+            >
+              <q-list
+                style="min-width: 300px"
+                v-for="n in notiList"
+                :key="n.id"
+              >
+                <q-item v-ripple class="mytry q-py-xs" dense>
+                  <q-item-section avatar top style="min-width: 40px">
+                    <q-avatar color="primary" size="22px" text-color="white">
+                      <span class="text-weight-medium text-uppercase">{{
+                        n.sender
+                      }}</span>
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">{{
+                      n.body
+                    }}</q-item-label>
+                    <q-item-label
+                      caption
+                      class="row items-center text-grey-7"
+                      >{{ date2Thai(n.timereceive) }}</q-item-label
+                    >
+                  </q-item-section>
+                  <q-btn
+                    size="sm"
+                    unelevated
+                    dense
+                    icon="mdi-close"
+                    class="mybtn q-mx-xs"
+                    @click="clickDelete(n.id)"
+                  ></q-btn>
+                </q-item>
+                <q-separator color="grey-2" />
+              </q-list>
+              <template v-slot:loading v-if="notiList.length < totalInbox">
+                <div class="row justify-center q-my-md">
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
           </q-menu>
         </q-btn>
         <div class="row items-center no-wrap">