เพิ่ม Socket mark-read , notify-message

src/modules/00_support/store/Main.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { io } from "socket.io-client";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -17,6 +17,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   const userId = ref<string>(keycloak.subject);
   const issue = ref<SupportIssueResponse>();
   const message = ref<SupportMessageResponse>();
+  const messageStatus = ref<SupportMessageStatus>();
   const statusUser = ref<SupportStatusUser>([]);
   const currentIssue = ref<string>("");
   const currentTitle = ref<string>("");
@@ -24,32 +25,56 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   const scrollContainer = ref();
 
   function scrollToEnd() {
-    scrollContainer.value.setScrollPosition("vertical", 10000);
+    scrollContainer.value.setScrollPosition("vertical", 1000000);
   }
 
   const socket = io("http://192.168.1.10:3000/", {
     auth: { token: keycloak.token },
+    autoConnect: false,
   });
 
-  socket.on("users", (users) => {
-    // console.log(users);
+  socket.on("users", (data: SupportStatusUser[]) => {
+    statusUser.value = data;
   });
 
   socket.on("online", (r) => {
-    console.log(r);
     statusUser.value.push({
       socketId: r.socketId,
       userId: r.userId,
       name: r.name,
       role: r.role,
     });
+  });
 
-    console.log(statusUser.value);
+  socket.on("offline", (socketId: string) => {
+    if (socketId === socket.id) return;
+    statusUser.value = statusUser.value.filter((v) => v.socketId !== socketId);
+  });
 
-    // console.log(JSON.stringify(r, null, -2));
+  socket.on("notify-message", (r) => {
+    issue.value.result = issue.value.result.map((v) => {
+      if (v.id === r.issueId) {
+        v.unreadCount++;
+        v.lastMessage = r.content;
+      }
+      return v;
+    });
+  });
+
+  socket.on("read", (r) => {
+    setTimeout(() => {
+      messageStatus.value.result = messageStatus.value.result.map((v) => {
+        if (v.issueId === r.issueId) {
+          v.lastAccessDate = r.lastAccessDate;
+        }
+        return v;
+      });
+    }, 100);
   });
 
   socket.on("message", (r) => {
+    console.log(r);
+
     message.value.result.message.push({
       id: r.id,
       fromUserId: r.fromUserId,
@@ -60,17 +85,29 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
       read: r.read,
       issueId: r.issueId,
     });
-    socket.emit("mark-read", { currentIssue });
+    socket.emit("mark-read", { issueId: currentIssue.value });
+    scrollToEnd();
   });
 
   function sendMessage(content: string, to: string) {
     socket.emit("message", { to, content });
-
     setTimeout(() => {
       scrollToEnd();
     }, 100);
   }
 
+  async function fetchMessageStatus(issueId: string) {
+    const res = await http
+      .get(config.API.supportMessageStatus(issueId))
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {});
+    if (res && res.data) {
+      messageStatus.value = res.data;
+    }
+  }
+
   async function fetchMessage(issueId: string) {
     showLoader();
     const res = await http
@@ -106,7 +143,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
 
     if (res && res.data) {
       issue.value = res.data;
-      // console.log(JSON.stringify(res.data, null, -2));
     }
   }
 
@@ -116,11 +152,14 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     message,
     fetchIssue,
     fetchMessage,
+    fetchMessageStatus,
     sendMessage,
     items,
     scrollToEnd,
     scrollContainer,
     currentIssue,
     currentTitle,
+    socket,
+    messageStatus,
   };
 });