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

src/views/MainLayout.vue

@@ -45,7 +45,6 @@ async function fetchTotolNotificate() {
     .get(config.API.msgNotificateTotal)
     .then((res) => {
       totalNoti.value = res.data.result;
-      console.log(totalNoti.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -54,12 +53,12 @@ async function fetchTotolNotificate() {
 
 const fetchlistNotification = async (index: number, type: string) => {
   await http
-    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${15}`)
     .then((res: any) => {
       const data = res.data.result.data;
       totalInbox.value = res.data.result.total;
       let list: any[] = [];
-      if (type === "DEL") {
+      if (type === "DEL" || index === 1) {
         notiList.value = [];
       }
       data.map((e: any) => {
@@ -76,6 +75,7 @@ const fetchlistNotification = async (index: number, type: string) => {
         });
       });
       notiList.value.push(...list);
+
       totalInbox.value = res.data.result.total;
     })
     .catch((err) => {
@@ -101,7 +101,7 @@ const doLogout = () => {
 
 const clickDelete = async (id: string, index: number) => {
   dialogRemove($q, async () => {
-    showLoader();
+    // showLoader();
     await http
       .delete(config.API.msgId(id))
       .then(() => {
@@ -113,21 +113,20 @@ const clickDelete = async (id: string, index: number) => {
         messageError($q, e);
       })
       .finally(async () => {
-        notiList.value.length === 15 && fetchlistNotification(1, "DEL");
+        notiList.value.length === 12 && fetchlistNotification(1, "DEL");
-        hideLoader();
+        // hideLoader();
       });
   });
 };
 
 const totalInbox = ref<number>(0);
-const round = ref<number>(0);
+const page = ref<number>(0);
-function onLoad(index: any, done: any) {
+async function onLoad(index: any, done: any) {
-  if (notiList.value.length < totalInbox.value) {
+  page.value++;
-    setTimeout(() => {
+  setTimeout(async () => {
-      fetchlistNotification(index + 1, "NOMAL");
+    await fetchlistNotification(page.value, "NOMAL");
     done();
-    }, 3000);
+  }, 1500);
-  }
 }
 
 watch(
@@ -140,9 +139,6 @@ watch(
       }));
       notiList.value = updatedNotifications;
       fetchTotolNotificate();
-    } else {
-      round.value++;
-      round.value == 1 && fetchlistNotification(round.value, "NOMAL");
     }
   }
 );
@@ -218,6 +214,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
           size="13px"
           :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
           :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
+          no-caps
         >
           <q-icon name="mdi-bell-outline" size="22px" color="white" />
           <q-badge
@@ -228,19 +225,15 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
             floating
             >{{ totalNoti }}</q-badge
           >
-          <q-menu v-model="notiTrigger" :offset="[0, 10]">
+          <q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
-            <q-card style="height: 700px; width: 480px">
-              <div class="q-pa-md" v-if="notiList.length !== 0">
-                <q-infinite-scroll @load="onLoad" :offset="250">
             <div class="q-px-md q-py-sm row col-12 items-center">
-                    <div class="text-subtitle1 text-weight-medium">
+              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
-                      การแจ้งเตือน
-                    </div>
               <q-space />
               <div class="text-grey-5" style="font-size: 12px">
                 ทั้งหมด {{ totalInbox }} ข้อความ
               </div>
             </div>
+            <q-infinite-scroll @load="onLoad" :offset="250">
               <div
                 v-for="(item, index) in notiList"
                 :key="index"
@@ -298,17 +291,13 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
                   </div>
                 </q-item>
               </div>
-                  <template v-slot:loading v-if="notiList.length < totalInbox">
+
-                    <div class="row justify-center q-my-md">
+              <template v-slot:loading>
+                <div class="text-center q-my-md">
                   <q-spinner-dots color="primary" size="40px" />
                 </div>
               </template>
             </q-infinite-scroll>
-              </div>
-              <div class="row justify-center q-my-md" v-else>
-                <q-spinner color="primary" size="3em" />
-              </div>
-            </q-card>
           </q-menu>
         </q-btn>