load การแจ้งเตือน,กล่องข้อความ

src/api/00_dashboard/api.message.ts

@@ -10,6 +10,7 @@ export default {
   msgNotificate: `${message}/my-notifications`,
   msgInbox: `${message}/my-inboxes`,
   msgId: (id: string) => `${message}/my-notifications/${id}`,
+  msgNoread: () => `${message}/my-notifications/noread`,
   msgInboxDelete: (id: string) => `${message}/my-inboxes/${id}`,
   replyMessage: (id: string) => `${reply}/${id}`,
 };

src/interface/request/main/main.ts

@@ -31,7 +31,8 @@ interface notiType {
   id: string;
   sender: string;
   body: string;
-  timereceive: Date;
+  timereceive: string;
+  isOpen: boolean;
 }
 
 interface optionType {

src/interface/response/dashboard/dashboard.ts

@@ -12,7 +12,7 @@ interface ResponseInbox {
   lastUpdateUserId: string;
   lastUpdatedAt: Date;
   openDate: Date | null;
-  payload: {attachments:attachments[]}
+  payload: { attachments: attachments[] };
   receiveDate: Date;
   receiverUserId: string;
   subject: string;
@@ -24,8 +24,9 @@ interface DataInbox {
   subject: string;
   timereceive: Date;
   body: string;
-  payload: {attachments:attachments[]}
+  payload: { attachments: attachments[] };
   ratingModel: number;
+  isOpen: boolean;
 }
 
 export type { ResponseInbox, DataInbox };

src/views/Dashboard.vue

@@ -54,11 +54,12 @@ const getData = async (index: number) => {
             body: e.body ?? "",
             payload: e.payload,
             ratingModel: 0,
+            isOpen: e.isOpen,
           });
         });
         inboxList.value.push(...list);
 
-        if (inboxList.value.length > 0) {
+        if (inboxList.value.length > 0 && index === 1) {
           selectInbox(inboxList.value[0].no);
         }
       })
@@ -71,8 +72,16 @@ const getData = async (index: number) => {
 };
 
 const selectInbox = (id: string) => {
-  link.value = id;
+  http
-  data.value = inboxList.value.filter((r) => r.no == id);
+    .get(config.API.msgInboxDelete(id))
+    .then(() => {
+      link.value = id;
+      data.value = inboxList.value.filter((r) => r.no == id);
+      for (const item of data.value) {
+        item.isOpen = true;
+      }
+    })
+    .catch((err) => {});
 };
 const deleteData = (id: string) => {
   dialogRemove($q, () => removeData(id));
@@ -116,9 +125,13 @@ function onLoad(index: number, done: any) {
     setTimeout(() => {
       getData(num);
       done();
-    }, 2000);
+    }, 1000);
   }
 }
+const thaiOptions: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+};
 </script>
 
 <!-- page:หน้าแรก -->
@@ -138,8 +151,10 @@ function onLoad(index: number, done: any) {
         bordered
         :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
       >
-        <div class="col-12 q-py-sm q-px-md bg-grey-1">
+        <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">ทั้งหมด {{ totalInbox }} ข้อความ</div>
         </div>
         <q-separator />
 
@@ -169,15 +184,28 @@ function onLoad(index: number, done: any) {
                 @click="selectInbox(contact.no)"
               >
                 <q-item-section>
-                  <q-item-label caption class="text-weight-light">{{
+                  <q-item-label caption class="text-weight-light">
-                    date2Thai(contact.timereceive)
+                    {{ date2Thai(contact.timereceive) }}
-                  }}</q-item-label>
+                    {{
-                  <q-item-label class="text-weight-medium">{{
+                      new Date(contact.timereceive).toLocaleTimeString(
-                    contact.sender
+                        "th-TH",
-                  }}</q-item-label>
+                        thaiOptions
-                  <q-item-label caption lines="2">{{
+                      )
-                    contact.subject
+                    }}
-                  }}</q-item-label>
+                    น. <q-space />
+                  </q-item-label>
+                  <q-item-label
+                    :class="!contact.isOpen ? 'text-weight-medium' : ''"
+                    >{{ contact.sender }}</q-item-label
+                  >
+                  <q-item-label
+                    :class="
+                      !contact.isOpen ? 'text-weight-medium text-black' : ''
+                    "
+                    caption
+                    lines="2"
+                    >{{ contact.subject }}</q-item-label
+                  >
                 </q-item-section>
                 <q-item-section side top>
                   <q-icon
@@ -189,6 +217,7 @@ function onLoad(index: number, done: any) {
                   />
                 </q-item-section>
               </q-item>
+
               <q-separator
                 v-if="index + 1 < inboxList.length"
                 :key="index"
@@ -203,67 +232,6 @@ function onLoad(index: number, done: any) {
             </template>
           </q-infinite-scroll>
         </div>
-        <!-- <q-scroll-area
-          :style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
-          class="bg-white rounded-borders q-px-md row col-12"
-        >
-          <q-list
-            v-for="(contact, index) in inboxList"
-            :key="contact.no"
-            class="q-pt-sm"
-          >
-            <q-item
-              clickable
-              v-ripple
-              class="mytry"
-              :active="link === contact.no"
-              active-class="my-menu-link"
-              @click="selectInbox(contact.no)"
-            >
-              <q-item-section>
-                <q-item-label caption class="text-weight-light">{{
-                  date2Thai(contact.timereceive)
-                }}</q-item-label>
-                <q-item-label class="text-weight-medium">{{
-                  contact.sender
-                }}</q-item-label>
-                <q-item-label caption lines="2">{{
-                  contact.subject
-                }}</q-item-label>
-              </q-item-section>
-              <q-item-section side top>
-                <q-icon
-                  v-if="contact.payload !== null"
-                  class="q-mt-md"
-                  name="mdi-paperclip"
-                  color="grey-5"
-                  size="xs"
-                />
-              </q-item-section>
-            </q-item>
-            <q-separator
-              v-if="index + 1 < inboxList.length"
-              :key="index"
-              color="grey-3 q-mt-sm"
-            />
-          </q-list>
-
-          <q-banner
-            rounded
-            class="bg-amber-1 text-center q-mt-sm"
-            v-if="inboxList.length < 1"
-          >
-            <div class="text-yellow-10">
-              <q-icon
-                name="mdi-alert-box"
-                class="q-mx-xs"
-                size="sm"
-                color="yellow-10"
-              />
-              ไม่พบข้อความ
-            </div>
-          </q-banner>
-        </q-scroll-area> -->
       </q-card>
     </template>
 

src/views/MainLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, watch } from "vue";
 import keycloak from "@/plugins/keycloak";
 import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
@@ -76,46 +76,48 @@ const options = ref<optionType[]>([
   },
 ]);
 
-const getDataNotification = async (index: number, type: string) => {
+async function fetchmsgNoread() {
-  // showLoader();
   await http
-    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
+    .get(config.API.msgNoread())
+    .then((res) => {
+      totalNoti.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+const getDataNotification = async (index: number, type: string) => {
+  const thaiOptions: Intl.DateTimeFormatOptions = {
+    hour: "2-digit",
+    minute: "2-digit",
+  };
+  await http
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${10}`)
     .then((res: any) => {
       const response = res.data.result.data;
-      let list: notiType[] = [];
+      totalInbox.value = res.data.result.total;
 
+      let list: notiType[] = [];
       if (type === "DEL") {
-        totalInbox.value = res.data.result.total;
+        notiList.value = [];
-        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);
-        totalInbox.value = res.data.result.total;
       }
+      response.map((e: any) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"[0]
+              : e.createdFullName[0],
+          body: e.body ?? "",
+          timereceive: `${date2Thai(e.receiveDate)} ${new Date(
+            e.receiveDate
+          ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
+          isOpen: e.isOpen,
+        });
+      });
+      notiList.value.push(...list);
+      totalInbox.value = res.data.result.total;
     })
     .catch((e) => {
       messageError($q, e);
@@ -231,8 +233,8 @@ onMounted(async () => {
   if (keycloak.tokenParsed) {
     await fetchroleUser(keycloak.tokenParsed.role);
   }
-
+  await fetchmsgNoread();
-  await getDataNotification(1, "NOMAL");
+  // await getDataNotification(1, "NOMAL");
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -431,26 +433,47 @@ const clickDelete = async (id: string, index: number) => {
       .then(() => {
         notiList.value.splice(index, 1);
         success($q, "ลบข้อมูลสำเร็จ");
+        totalInbox.value--;
       })
       .catch((e) => {
         messageError($q, e);
       })
       .finally(async () => {
-        getDataNotification(1, "DEL");
+        notiList.value.length === 7 && getDataNotification(1, "DEL");
         hideLoader();
       });
   });
 };
 
 const totalInbox = ref<number>(0);
+const totalNoti = ref<number>(0);
+const round = ref<number>(0);
+
 function onLoad(index: any, done: any) {
   if (notiList.value.length < totalInbox.value) {
     setTimeout(() => {
       getDataNotification(index + 1, "NOMAL");
       done();
-    }, 2000);
+    }, 1000);
   }
 }
+
+watch(
+  () => notiTrigger.value,
+  () => {
+    if (!notiTrigger.value) {
+      const updatedNotifications = notiList.value.map((item) => ({
+        ...item,
+        isOpen: true,
+      }));
+      notiList.value = updatedNotifications;
+      fetchmsgNoread();
+    } else {
+      round.value++;
+      round.value === 1 && getDataNotification(round.value, "NOMAL");
+    }
+  }
+);
 </script>
 
 <!-- โครงเว็บ -->
@@ -497,32 +520,33 @@ function onLoad(index: any, done: any) {
           flat
           size="13px"
           class="q-mx-md bg-grey-3"
-          :color="notiList.length === 0 ? 'grey-6' : 'grey-8'"
+          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
-          :disable="notiList.length === 0"
+          :disable="totalNoti === 0"
         >
           <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge
+          <q-badge rounded color="negative" text-color="white" floating>{{
-            rounded
+            totalNoti
-            v-show="notiList.length > 0"
+          }}</q-badge>
-            color="negative"
-            text-color="white"
-            floating
-            >{{ totalInbox }}</q-badge
-          >
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
-            <div class="q-px-md q-py-sm row col-12 items-center">
+            <div
+              class="q-px-md q-py-sm row col-12 items-center"
+              v-if="notiList.length !== 0"
+            >
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
+              <q-space />
+              <div class="text-grey-5">ทั้งหมด {{ totalInbox }} ข้อความ</div>
             </div>
 
             <q-infinite-scroll
               @load="onLoad"
               :offset="250"
-              style="min-width: 300px"
+              v-if="notiList.length !== 0"
+              style="max-height: 400px"
             >
               <q-list
-                style="min-width: 300px"
                 v-for="(n, index) in notiList"
                 :key="index"
+                :class="!n.isOpen ? 'my-menu-link q-mt-sm' : 'q-mt-sm'"
               >
                 <q-item v-ripple class="mytry q-py-xs" dense>
                   <q-item-section avatar top style="min-width: 40px">
@@ -539,7 +563,7 @@ function onLoad(index: any, done: any) {
                     <q-item-label
                       caption
                       class="row items-center text-grey-7"
-                      >{{ date2Thai(n.timereceive) }}</q-item-label
+                      >{{ n.timereceive }}</q-item-label
                     >
                   </q-item-section>
                   <q-btn
@@ -1051,6 +1075,12 @@ function onLoad(index: any, done: any) {
 </template>
 
 <style>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  border-radius: 5px;
+  border: 1px solid #1bb19ab8;
+  color: #1bb19ab8 !important;
+}
 .menuSub .q-item__section--avatar,
 .menu .q-item__section--avatar {
   min-width: 0px;