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

src/api/api.message.ts

@@ -4,7 +4,8 @@ const message = `${env.API_URI}/message`;
 const reply = `${env.API_URI}/placement/noti`;
 
 export default {
-    msgNotificate: `${message}/my-notifications`,
-    msgInbox: `${message}/my-inboxes`,
-    replyMessage: (id: string) => `${reply}/${id}`,
+  msgNotificate: `${message}/my-notifications`,
+  msgInbox: `${message}/my-inboxes`,
+  msgId: (id: string) => `${message}/my-notifications/${id}`,
+  replyMessage: (id: string) => `${reply}/${id}`,
 };

src/views/MainLayout.vue

@@ -13,7 +13,14 @@ const router = useRouter();
 const $q = useQuasar();
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const {
+  date2Thai,
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
 
 const fullname = ref<string>("");
 const notiList = ref<any>([]);
@@ -26,31 +33,53 @@ const link = ref<string>("");
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchlistNotification(1);
+  await fetchlistNotification(1, "NOMAL");
   if (keycloak.tokenParsed != null) {
     fullname.value = keycloak.tokenParsed.name;
   }
 });
 
-const fetchlistNotification = async (index: number) => {
+const fetchlistNotification = async (index: number, type: string) => {
   await http
     .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res: any) => {
       const data = res.data.result.data;
-      totalInbox.value = res.data.result.total;
+
       let list: any[] = [];
-      data.map((e: any) => {
-        list.push({
-          id: e.id,
-          sender:
-            e.createdFullName == "" || e.createdFullName == null
-              ? "เจ้าหน้าที่"[0]
-              : e.createdFullName[0],
-          body: e.body ?? "",
-          timereceive: date2Thai(e.createdAt),
+      if (type === "DEL") {
+        totalInbox.value = res.data.result.total;
+        console.log(notiList.value.length);
+
+        if (notiList.value.length === 14) {
+          notiList.value = [];
+          data.map((e: any) => {
+            list.push({
+              id: e.id,
+              sender:
+                e.createdFullName == "" || e.createdFullName == null
+                  ? "เจ้าหน้าที่"[0]
+                  : e.createdFullName[0],
+              body: e.body ?? "",
+              timereceive: date2Thai(e.createdAt),
+            });
+          });
+          notiList.value.push(...list);
+        }
+      } else {
+        data.map((e: any) => {
+          list.push({
+            id: e.id,
+            sender:
+              e.createdFullName == "" || e.createdFullName == null
+                ? "เจ้าหน้าที่"[0]
+                : e.createdFullName[0],
+            body: e.body ?? "",
+            timereceive: date2Thai(e.createdAt),
+          });
         });
-      });
-      notiList.value.push(...list);
+        notiList.value.push(...list);
+        totalInbox.value = res.data.result.total;
+      }
     })
     .catch((err) => {
       console.log(err);
@@ -73,11 +102,32 @@ const doLogout = () => {
   });
 };
 
+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 () => {
+        fetchlistNotification(1, "DEL");
+        hideLoader();
+      });
+  });
+};
+
 const totalInbox = ref<number>(0);
+const page = ref<number>(1);
 function onLoad(index: any, done: any) {
+  page.value = index + 1;
   if (notiList.value.length < totalInbox.value) {
     setTimeout(() => {
-      fetchlistNotification(index + 1);
+      fetchlistNotification(page.value, "NOMAL");
       done();
     }, 2000);
   }
@@ -159,24 +209,24 @@ function onLoad(index: any, done: any) {
             floating
             >{{ totalInbox }}</q-badge
           >
-          <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
+          <q-menu
+            v-model="notiTrigger"
+            :offset="[0, 10]"
+            style="max-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 />
-              <q-btn
+              <!-- <q-btn
                 label="ล้างข้อมูล"
                 color="pink"
                 dense
                 class="text-caption"
                 flat
-              />
+              /> -->
             </div>
 
-            <q-infinite-scroll
-              @load="onLoad"
-              :offset="250"
-              style="min-width: 300px"
-            >
+            <q-infinite-scroll @load="onLoad" :offset="250">
               <div
                 v-for="(item, index) in notiList"
                 :key="index"
@@ -213,66 +263,21 @@ function onLoad(index: any, done: any) {
                       dense
                       icon="mdi-close"
                       class="mybtn q-mx-xs"
-                      v-close-popup
+                      @click="clickDelete(item.id, index)"
                     ></q-btn>
                   </div>
                 </q-item>
               </div>
 
-              <template v-slot:loading v-if="notiList.length < totalInbox">
+              <template
+                v-slot:loading
+                v-if="notiList.length < totalInbox || notiList.length !== 19"
+              >
                 <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"
-            >
-              <q-item v-ripple class="mytry q-py-sm" dense>
-                <q-item-section avatar top style="min-width: 40px">
-                  <q-avatar
-                    rounded
-                    color="primary"
-                    size="25px"
-                    text-color="white"
-                  >
-                    <span class="text-weight-medium text-uppercase">{{
-                      n.sender[0]
-                    }}</span>
-                  </q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label caption class="text-black">{{
-                    n.body
-                  }}</q-item-label>
-                  <q-item-label
-                    caption
-                    class="row items-center text-grey-7"
-                    style="font-size: 12px"
-                    >{{ n.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>
-              <q-separator
-                class="q-my-xs"
-                color="grey-2"
-                v-if="index + 1 < notiList.length"
-                :key="index"
-              />
-            </q-list> -->
           </q-menu>
         </q-btn>