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

src/views/MainLayout.vue

@@ -26,17 +26,18 @@ const link = ref<string>("");
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchlistNotification();
+  await fetchlistNotification(1);
   if (keycloak.tokenParsed != null) {
     fullname.value = keycloak.tokenParsed.name;
   }
 });
 
-const fetchlistNotification = async () => {
+const fetchlistNotification = async (index: number) => {
   await http
-    .get(config.API.msgNotificate)
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res: any) => {
-      const data = res.data.result;
+      const data = res.data.result.data;
+      totalInbox.value = res.data.result.total;
       let list: any[] = [];
       data.map((e: any) => {
         list.push({
@@ -49,7 +50,7 @@ const fetchlistNotification = async () => {
           timereceive: date2Thai(e.createdAt),
         });
       });
-      notiList.value = list;
+      notiList.value.push(...list);
     })
     .catch((err) => {
       console.log(err);
@@ -71,6 +72,16 @@ const doLogout = () => {
     keycloak.logout();
   });
 };
+
+const totalInbox = ref<number>(0);
+function onLoad(index: any, done: any) {
+  if (notiList.value.length < totalInbox.value) {
+    setTimeout(() => {
+      fetchlistNotification(index + 1);
+      done();
+    }, 2000);
+  }
+}
 </script>
 <!-- โครงเว็บ -->
 <template>
@@ -125,7 +136,6 @@ const doLogout = () => {
               label="การลา"
               icon="mdi-calendar-blank-outline"
               @click="router.push(`/leave`)"
-  
             />
           </q-tabs>
         </div>
@@ -147,7 +157,7 @@ const doLogout = () => {
             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">
@@ -162,7 +172,61 @@ const doLogout = () => {
               />
             </div>
 
-            <q-list
+            <q-infinite-scroll
+              @load="onLoad"
+              :offset="250"
+              style="min-width: 300px"
+            >
+              <div
+                v-for="(item, index) in notiList"
+                :key="index"
+                class="caption"
+              >
+                <q-item v-ripple class="mytry q-py-sm" dense>
+                  <q-item-section avatar top style="min-width: 10px">
+                    <q-avatar
+                      rounded
+                      color="primary"
+                      size="25px"
+                      text-color="white"
+                    >
+                      <span class="text-weight-medium text-uppercase">{{
+                        item.sender[0]
+                      }}</span>
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">{{
+                      item.body
+                    }}</q-item-label>
+                    <q-item-label
+                      caption
+                      class="row items-center text-grey-7"
+                      style="font-size: 12px"
+                      >{{ item.timereceive }}</q-item-label
+                    >
+                  </q-item-section>
+                  <div>
+                    <q-btn
+                      size="sm"
+                      unelevated
+                      dense
+                      icon="mdi-close"
+                      class="mybtn q-mx-xs"
+                      v-close-popup
+                    ></q-btn>
+                  </div>
+                </q-item>
+              </div>
+
+              <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-list
               style="min-width: 300px"
               v-for="(n, index) in notiList"
               :key="index"
@@ -208,7 +272,7 @@ const doLogout = () => {
                 v-if="index + 1 < notiList.length"
                 :key="index"
               />
-            </q-list>
+            </q-list> -->
           </q-menu>
         </q-btn>