การแจ้งเตือน

src/views/Dashboard.vue

@@ -157,7 +157,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
         <div class="q-px-md q-py-sm row col-12 items-center">
           <div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
           <q-space />
-          <div class="text-grey-5">ทั้งหมด {{ totalInbox }} ข้อความ</div>
+          <div class="text-grey-5" style="font-size: 12px;">ทั้งหมด {{ totalInbox }} ข้อความ</div>
         </div>
         <q-separator />
 

src/views/MainLayout.vue

@@ -451,14 +451,14 @@ const clickDelete = async (id: string, index: number) => {
 const totalInbox = ref<number>(0);
 const totalNoti = ref<number>(0);
 const round = ref<number>(0);
+const page = ref<number>(0);
 
 function onLoad(index: any, done: any) {
-  if (notiList.value.length < totalInbox.value && isLoad) {
-    setTimeout(() => {
-      done();
-      getDataNotification(index + 1, "NOMAL");
-    }, 3000);
-  }
+  page.value++;
+  setTimeout(() => {
+    done();
+    getDataNotification(page.value, "NOMAL");
+  }, 1500);
 }
 
 watch(
@@ -471,9 +471,6 @@ watch(
       }));
       notiList.value = updatedNotifications;
       fetchmsgNoread();
-    } else {
-      round.value++;
-      round.value === 1 && getDataNotification(round.value, "NOMAL");
     }
   }
 );
@@ -534,27 +531,21 @@ watch(
             v-if="totalNoti !== 0"
             >{{ totalNoti }}</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"
-              v-if="notiList.length !== 0"
-            >
+          <q-menu
+            v-model="notiTrigger"
+            :offset="[0, 8]"
+            style="height: 400px; width: 480px"
+          >
+            <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
               <q-space />
-              <div class="text-grey-5">ทั้งหมด {{ totalInbox }} ข้อความ</div>
+              <div class="text-grey-5" style="font-size: 12px">
+                ทั้งหมด {{ totalInbox }} ข้อความ
+              </div>
             </div>
 
-            <q-infinite-scroll
-              @load="onLoad"
-              :offset="250"
-              v-if="notiList.length !== 0"
-              style="max-height: 400px"
-            >
-              <q-list
-                v-for="(n, index) in notiList"
-                :key="index"
-                :class="!n.isOpen ? 'my-menu-link q-mt-sm' : 'q-mt-sm'"
-              >
+            <q-infinite-scroll @load="onLoad" :offset="250">
+              <div v-for="(n, index) in notiList" :key="index" class="caption">
                 <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">
@@ -582,9 +573,11 @@ watch(
                     @click="clickDelete(n.id, index)"
                   ></q-btn>
                 </q-item>
-                <q-separator color="grey-2" />
-              </q-list>
-              <template v-if="notiList.length < totalInbox">
+              </div>
+
+              <q-separator color="grey-2" />
+
+              <template v-slot:loading>
                 <div class="row justify-center q-my-md">
                   <q-spinner-dots color="primary" size="40px" />
                 </div>