Merge branch 'nice_dev' into develop

2024-01-19 10:20:24 +07:00 · 2024-01-19 10:20:24 +07:00 · da586e568f
commit da586e568f
parent dcab2e0908 a4cfdeed38
5 changed files with 132 additions and 131 deletions
--- a/src/api/00_dashboard/api.message.ts
+++ b/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}`,
 };
--- a/src/interface/request/main/main.ts
+++ b/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 {
--- a/src/interface/response/dashboard/dashboard.ts
+++ b/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 };
--- a/src/views/Dashboard.vue
+++ b/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;
-  data.value = inboxList.value.filter((r) => r.no == id);
+  http
+    .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">{{
-                    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-label caption class="text-weight-light">
+                    {{ date2Thai(contact.timereceive) }}
+                    {{
+                      new Date(contact.timereceive).toLocaleTimeString(
+                        "th-TH",
+                        thaiOptions
+                      )
+                    }}
+                    น. <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>

--- a/src/views/MainLayout.vue
+++ b/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) => {
-  // showLoader();
+async function fetchmsgNoread() {
  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;
-        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;
+        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: `${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 getDataNotification(1, "NOMAL");
+  await fetchmsgNoread();
+  // 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'"
-          :disable="notiList.length === 0"
+          :color="totalNoti === 0 ? 'grey-6' : 'grey-8'"
+          :disable="totalNoti === 0"
        >
          <q-icon name="mdi-bell" size="18px" color="grey-7" />
-          <q-badge
-            rounded
-            v-show="notiList.length > 0"
-            color="negative"
-            text-color="white"
-            floating
-            >{{ totalInbox }}</q-badge
-          >
+          <q-badge rounded color="negative" text-color="white" floating>{{
+            totalNoti
+          }}</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;