load Inbox

src/api/api.message.ts

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

src/modules/01_dashboard/views/Dashboard.vue

@@ -11,7 +11,7 @@ import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, date2Thai } = mixin;
+const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
 const fullname = ref<string>("ธัญลักษณ์");
 const inboxList = ref<any>([
@@ -105,8 +105,9 @@ const fetchlistInbox = async (index: number) => {
             timereceive: date2Thai(e.createdAt),
             body: e.body ?? "-",
             ratingModel: 0,
-            receiveDate: date2Thai(e.receiveDate),
+            receiveDate: e.receiveDate,
             payload: e.payload,
+            isOpen: e.isOpen,
           });
         });
         inboxList.value.push(...listItem);
@@ -138,10 +139,25 @@ function modalReplyClose() {
 
 const dataInbox = ref<any>();
 const modalDetial = ref<boolean>(false);
-function onClickOpenPopupDetail(data: any) {
-  dataInbox.value = data;
-  link.value = data.no;
-  modalDetial.value = !modalDetial.value;
+async function onClickOpenPopupDetail(data: any) {
+  showLoader();
+  await http
+    .get(config.API.msgInboxRead(data.no))
+    .then(() => {
+      const filterDate = inboxList.value.filter((r: any) => r.no == data.no);
+      for (const item of filterDate) {
+        item.isOpen = true;
+      }
+      dataInbox.value = data;
+      link.value = data.no;
+      modalDetial.value = !modalDetial.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function updateModalDetail(val: boolean) {
@@ -156,9 +172,13 @@ async function onLoad(index: number, done: any) {
     setTimeout(() => {
       fetchlistInbox(num);
       done();
-    }, 2000);
+    }, 3000);
   }
 }
+const thaiOptions: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+};
 </script>
 
 <template>
@@ -220,14 +240,8 @@ async function onLoad(index: number, done: any) {
           <div class="text-subtitle1 text-weight-bold text-dark">
             กล่องข้อความ
           </div>
-          <!-- <q-space />
-          <q-btn
-            dense
-            icon="mdi-dots-vertical"
-            color="grey-6"
-            size="11px"
-            flat
-          /> -->
+          <q-space />
+          <div class="text-grey-5" style="font-size: 12px">ทั้งหมด {{ totalInbox }} ข้อความ</div>
         </div>
         <div
           v-if="totalInbox != 0"
@@ -248,13 +262,25 @@ async function onLoad(index: number, done: any) {
               <q-item
                 clickable
                 v-ripple
-                class="q-py-md q-mb-sm my-menu"
+                class="'q-py-md q-mb-sm my-menu'"
                 :active="link === item.no"
                 active-class="my-menu-link"
                 @click="onClickOpenPopupDetail(item)"
               >
                 <q-item-section>
-                  <q-item-label>
+                  <q-item-label caption class="text-weight-light">
+                    {{ date2Thai(item.receiveDate) }}
+                    {{
+                      new Date(item.receiveDate).toLocaleTimeString(
+                        "th-TH",
+                        thaiOptions
+                      )
+                    }}
+                    น. <q-space />
+                  </q-item-label>
+                  <q-item-label
+                    :class="!item.isOpen ? 'text-weight-medium' : 'text-grey-7'"
+                  >
                     {{ item.sender }}
                     <q-icon
                       v-if="item.payload"
@@ -262,9 +288,12 @@ async function onLoad(index: number, done: any) {
                       color="grey-6"
                       size="18px"
                   /></q-item-label>
-                  <q-item-label caption class="text-grey-6" lines="2">{{
-                    item.subject
-                  }}</q-item-label>
+                  <q-item-label
+                    caption
+                    :class="!item.isOpen ? 'text-weight-medium text-dark' : ''"
+                    lines="2"
+                    >{{ item.subject }}</q-item-label
+                  >
                 </q-item-section>
 
                 <q-item-section side top>
@@ -372,12 +401,19 @@ async function onLoad(index: number, done: any) {
   />
 </template>
 <style>
+.my-menu-notread {
+  color: #1bb19b;
+  background: #ebf9f7 !important;
+  font-weight: 600;
+  border-radius: 10px;
+}
 .my-menu-link {
   color: #1bb19b;
   background: #ebf9f7 !important;
   font-weight: 600;
   border-radius: 10px;
 }
+
 .my-menu-link .q-hoverable {
   border-radius: 10px;
 }

src/views/MainLayout.vue

@@ -33,53 +33,50 @@ const link = ref<string>("");
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  await fetchlistNotification(1, "NOMAL");
+  await fetchTotolNotificate();
   if (keycloak.tokenParsed != null) {
     fullname.value = keycloak.tokenParsed.name;
   }
 });
 
+const totalNoti = ref<number>(0);
+async function fetchTotolNotificate() {
+  await http
+    .get(config.API.msgNotificateTotal)
+    .then((res) => {
+      totalNoti.value = res.data.result;
+      console.log(totalNoti.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
 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[] = [];
       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);
-        totalInbox.value = res.data.result.total;
+        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),
+          isOpen: e.isOpen,
+          receiveDate: e.receiveDate,
+        });
+      });
+      notiList.value.push(...list);
+      totalInbox.value = res.data.result.total;
     })
     .catch((err) => {
       console.log(err);
@@ -109,29 +106,51 @@ const clickDelete = async (id: string, index: number) => {
       .delete(config.API.msgId(id))
       .then(() => {
         notiList.value.splice(index, 1);
+        totalInbox.value--;
         success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(async () => {
-        fetchlistNotification(1, "DEL");
+        notiList.value.length === 15 && fetchlistNotification(1, "DEL");
         hideLoader();
       });
   });
 };
 
 const totalInbox = ref<number>(0);
-const page = ref<number>(1);
+const round = ref<number>(0);
 function onLoad(index: any, done: any) {
-  page.value = index + 1;
   if (notiList.value.length < totalInbox.value) {
     setTimeout(() => {
-      fetchlistNotification(page.value, "NOMAL");
+      fetchlistNotification(index + 1, "NOMAL");
       done();
-    }, 2000);
+    }, 3000);
   }
 }
+
+watch(
+  () => notiTrigger.value,
+  () => {
+    if (!notiTrigger.value) {
+      const updatedNotifications = notiList.value.map((item: any) => ({
+        ...item,
+        isOpen: true,
+      }));
+      notiList.value = updatedNotifications;
+      fetchTotolNotificate();
+    } else {
+      round.value++;
+      round.value == 1 && fetchlistNotification(round.value, "NOMAL");
+    }
+  }
+);
+
+const thaiOptions: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+};
 </script>
 <!-- โครงเว็บ -->
 <template>
@@ -190,6 +209,7 @@ function onLoad(index: any, done: any) {
           </q-tabs>
         </div>
         <q-space />
+
         <!-- Notification -->
         <q-btn
           round
@@ -197,84 +217,98 @@ function onLoad(index: any, done: any) {
           flat
           size="13px"
           :class="$q.screen.gt.xs ? 'bg-white-btn q-mx-md' : 'q-mr-sm'"
-          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
-          :disable="notiList.length === 0"
+          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
         >
           <q-icon name="mdi-bell-outline" size="22px" color="white" />
           <q-badge
             rounded
-            v-show="notiList.length > 0"
+            v-show="totalNoti !== 0"
             color="negative"
             text-color="white"
             floating
-            >{{ totalInbox }}</q-badge
+            >{{ totalNoti }}</q-badge
           >
           <q-menu v-model="notiTrigger" :offset="[0, 10]">
-            <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
-                label="ล้างข้อมูล"
-                color="pink"
-                dense
-                class="text-caption"
-                flat
-              /> -->
-            </div>
-
-            <q-infinite-scroll @load="onLoad" :offset="250">
-              <div
-                v-for="(item, index) in notiList"
-                :key="index"
-                class="caption"
-                style="max-width: 480px"
-              >
-                <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.sender[0]
-                      }}</span>
-                    </q-avatar>
-                  </q-item-section>
-                  <q-item-section>
-                    <q-item-label caption class="text-black">{{
-                      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>
+            <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>
+                    <q-space />
+                    <div class="text-grey-5" style="font-size: 12px">
+                      ทั้งหมด {{ totalInbox }} ข้อความ
+                    </div>
                   </div>
-                </q-item>
+                  <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>
-
-              <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>
+              <div class="row justify-center q-my-md" v-else>
+                <q-spinner color="primary" size="3em" />
+              </div>
+            </q-card>
           </q-menu>
         </q-btn>