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

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();
+    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,87 +225,79 @@ 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-px-md q-py-sm row col-12 items-center">
-              <div class="q-pa-md" v-if="notiList.length !== 0">
+              <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
-                <q-infinite-scroll @load="onLoad" :offset="250">
+              <q-space />
-                  <div class="q-px-md q-py-sm row col-12 items-center">
+              <div class="text-grey-5" style="font-size: 12px">
-                    <div class="text-subtitle1 text-weight-medium">
+                ทั้งหมด {{ totalInbox }} ข้อความ
-                      การแจ้งเตือน
-                    </div>
-                    <q-space />
-                    <div class="text-grey-5" style="font-size: 12px">
-                      ทั้งหมด {{ totalInbox }} ข้อความ
-                    </div>
-                  </div>
-                  <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.body[0]
-                          }}</span>
-                        </q-avatar>
-                      </q-item-section>
-                      <q-item-section>
-                        <q-item-label caption class="text-grey-7">
-                          {{ date2Thai(item.receiveDate) }}
-                          {{
-                            new Date(item.receiveDate).toLocaleTimeString(
-                              "th-TH",
-                              thaiOptions
-                            )
-                          }}
-                          น. <q-space />
-                        </q-item-label>
-                        <q-item-label
-                          caption
-                          :class="
-                            item.isOpen
-                              ? 'text-grey-7'
-                              : 'text-dark text-weight-medium'
-                          "
-                          >{{ 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"
-                          @click="clickDelete(item.id, index)"
-                        ></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>
               </div>
-              <div class="row justify-center q-my-md" v-else>
+            </div>
-                <q-spinner color="primary" size="3em" />
+            <q-infinite-scroll @load="onLoad" :offset="250">
+              <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.body[0]
+                      }}</span>
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-grey-7">
+                      {{ date2Thai(item.receiveDate) }}
+                      {{
+                        new Date(item.receiveDate).toLocaleTimeString(
+                          "th-TH",
+                          thaiOptions
+                        )
+                      }}
+                      น. <q-space />
+                    </q-item-label>
+                    <q-item-label
+                      caption
+                      :class="
+                        item.isOpen
+                          ? 'text-grey-7'
+                          : 'text-dark text-weight-medium'
+                      "
+                      >{{ 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"
+                      @click="clickDelete(item.id, index)"
+                    ></q-btn>
+                  </div>
+                </q-item>
               </div>
-            </q-card>
+
+              <template v-slot:loading>
+                <div class="text-center q-my-md">
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
           </q-menu>
         </q-btn>