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

src/views/MainLayout.vue

@@ -54,14 +54,7 @@ const role = ref<string[]>([]);
 const notiTrigger = ref<boolean>(false);
 const text = ref<string>("");
 
-const notiList = ref<notiType[]>([
-  {
-    id: "1",
-    sender: "ท",
-    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: new Date(),
-  },
-]);
+const notiList = ref<notiType[]>([]);
 const options = ref<optionType[]>([
   {
     icon: "mdi-account-cog",
@@ -83,29 +76,49 @@ const options = ref<optionType[]>([
   },
 ]);
 
-const getDataNotification = async (index: number) => {
+const getDataNotification = async (index: number, type: string) => {
   // showLoader();
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res: any) => {
       const response = res.data.result.data;
-      totalInbox.value = res.data.result.total;
       let list: notiType[] = [];
-      response.map((e: any) => {
-        list.push({
-          id: e.id,
-          sender:
-            e.createdFullName == "" || e.createdFullName == null
-              ? "เจ้าหน้าที่"[0]
-              : e.createdFullName[0],
-          body: e.body ?? "",
-          timereceive: new Date(e.receiveDate),
+
+      if (type === "DEL") {
+        totalInbox.value = res.data.result.total;
+        if (notiList.value.length === 16) {
+          notiList.value = [];
+          response.map((e: any) => {
+            list.push({
+              id: e.id,
+              sender:
+                e.createdFullName == "" || e.createdFullName == null
+                  ? "เจ้าหน้าที่"[0]
+                  : e.createdFullName[0],
+              body: e.body ?? "",
+              timereceive: new Date(e.receiveDate),
+            });
+          });
+          notiList.value.push(...list);
+        }
+      } else {
+        response.map((e: any) => {
+          list.push({
+            id: e.id,
+            sender:
+              e.createdFullName == "" || e.createdFullName == null
+                ? "เจ้าหน้าที่"[0]
+                : e.createdFullName[0],
+            body: e.body ?? "",
+            timereceive: new Date(e.receiveDate),
+          });
         });
-      });
-      notiList.value.push(...list);
+        notiList.value.push(...list);
+        totalInbox.value = res.data.result.total;
+      }
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     })
     .finally(() => {
       // hideLoader();
@@ -219,7 +232,7 @@ onMounted(async () => {
     await fetchroleUser(keycloak.tokenParsed.role);
   }
 
-  await getDataNotification(1);
+  await getDataNotification(1, "NOMAL");
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -410,32 +423,30 @@ if (keycloak.tokenParsed != null) {
   role.value = keycloak.tokenParsed.role;
 }
 
-const deleteData = async (id: string) => {
-  console.log("delete=", id);
-  showLoader();
-  await http
-    .delete(config.API.msgId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      getDataNotification(1);
-      hideLoader();
-    });
-};
-
-const clickDelete = (id: string) => {
-  dialogRemove($q, () => deleteData(id));
+const clickDelete = async (id: string, index: number) => {
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.msgId(id))
+      .then(() => {
+        notiList.value.splice(index, 1);
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        getDataNotification(1, "DEL");
+        hideLoader();
+      });
+  });
 };
 
 const totalInbox = ref<number>(0);
 function onLoad(index: any, done: any) {
   if (notiList.value.length < totalInbox.value) {
     setTimeout(() => {
-      getDataNotification(index + 1);
+      getDataNotification(index + 1, "NOMAL");
       done();
     }, 2000);
   }
@@ -510,8 +521,8 @@ function onLoad(index: any, done: any) {
             >
               <q-list
                 style="min-width: 300px"
-                v-for="n in notiList"
-                :key="n.id"
+                v-for="(n, index) in notiList"
+                :key="index"
               >
                 <q-item v-ripple class="mytry q-py-xs" dense>
                   <q-item-section avatar top style="min-width: 40px">
@@ -537,7 +548,7 @@ function onLoad(index: any, done: any) {
                     dense
                     icon="mdi-close"
                     class="mybtn q-mx-xs"
-                    @click="clickDelete(n.id)"
+                    @click="clickDelete(n.id, index)"
                   ></q-btn>
                 </q-item>
                 <q-separator color="grey-2" />