เเก้ไข type

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

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import { io } from "socket.io-client";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,23 +9,30 @@ import type {
   SupportMessageResponse,
   SupportIssueResponse,
   SupportStatusUser,
+  SupportMessageStatus,
 } from "@/modules/00_support/interface/index/Main";
 import keycloak from "@/plugins/keycloak";
+import { useQuasar } from "quasar";
 
 export const useSupportStore = defineStore("supportServiceStore", () => {
-  const { showLoader, hideLoader } = useCounterMixin();
-  const userId = ref<string>(keycloak.subject);
+  const { showLoader, hideLoader, messageError } = useCounterMixin();
+  const $q = useQuasar();
+  const userId = ref<string | undefined>(keycloak.subject);
   const issue = ref<SupportIssueResponse>();
   const message = ref<SupportMessageResponse>();
   const messageStatus = ref<SupportMessageStatus>();
-  const statusUser = ref<SupportStatusUser>([]);
+  const statusUser = ref<SupportStatusUser[]>([]);
   const currentIssue = ref<string>("");
   const currentTitle = ref<string>("");
-  const items = ref<string>([{}, {}, {}, {}, {}, {}, {}]);
+  const currentTotalMessage = ref<number>();
+  const currentPage = ref<number>();
   const scrollContainer = ref();
-
-  function scrollToEnd() {
-    scrollContainer.value.setScrollPosition("vertical", 1000000);
+  const currentPageIssue = ref<number>();
+  const currentTotalIssue = ref<number>();
+  function scrollToEnd(position: Number = 1) {
+    setTimeout(() => {
+      scrollContainer.value?.setScrollPercentage("vertical", position);
+    }, 150);
   }
 
   const socket = io("http://192.168.1.10:3000/", {
@@ -52,48 +59,43 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   });
 
   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;
+    if (issue.value) {
+      issue.value.result = issue.value.result.map((v) => {
+        if (v.id === r.issueId) {
+          v.unreadCount++;
+          v.lastMessage = r.content;
         }
         return v;
       });
-    }, 100);
+    }
+  });
+
+  socket.on("read", (r) => {
+    if (messageStatus.value) {
+      messageStatus.value.result = messageStatus.value.result.map((v) => {
+        if (v.fromUserId !== r.fromUserId) return r;
+        return v;
+      });
+    }
   });
 
   socket.on("message", (r) => {
-    console.log(r);
+    message.value?.result.message.push(r);
+
+    if (issue.value) {
+      issue.value.result = issue.value.result.map((v) => {
+        if (v.id === r.issueId) v.lastMessage = r.content;
+        return v;
+      });
+    }
 
-    message.value.result.message.push({
-      id: r.id,
-      fromUserId: r.fromUserId,
-      fromUserName: r.fromUserName,
-      createdAt: r.createdAt,
-      updatedAt: r.updatedAt,
-      content: r.content,
-      read: r.read,
-      issueId: r.issueId,
-    });
     socket.emit("mark-read", { issueId: currentIssue.value });
     scrollToEnd();
   });
 
   function sendMessage(content: string, to: string) {
     socket.emit("message", { to, content });
-    setTimeout(() => {
-      scrollToEnd();
-    }, 100);
+    scrollToEnd();
   }
 
   async function fetchMessageStatus(issueId: string) {
@@ -103,11 +105,25 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
         messageError($q, err);
       })
       .finally(() => {});
+
     if (res && res.data) {
       messageStatus.value = res.data;
     }
   }
 
+  async function loadMessage(page: number) {
+    const res = await http
+      .get(`${config.API.supportMessage(currentIssue.value)}?page=${page}`)
+      .catch((err) => {
+        messageError($q, err);
+      });
+
+    if (res && res.data) {
+      message.value?.result.message.unshift(...res.data.result.message);
+      currentPage.value = res.data.page;
+    }
+  }
+
   async function fetchMessage(issueId: string) {
     showLoader();
     const res = await http
@@ -118,22 +134,22 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
       .finally(() => {
         hideLoader();
       });
+
     if (res && res.data) {
       message.value = await res.data;
-      message.value.result.message.reverse();
+      message.value?.result.message.reverse();
+      currentPage.value = res.data.page;
+      currentTotalMessage.value = res.data.total;
       socket.emit("join-issue", { issueId });
       socket.emit("mark-read", { issueId });
-
-      setTimeout(() => {
-        scrollToEnd();
-      }, 3);
+      scrollToEnd();
     }
   }
 
-  async function fetchIssue() {
+  async function fetchIssue(page: number = 1) {
     showLoader();
     const res = await http
-      .get(config.API.supportIssue)
+      .get(`${config.API.supportIssue}?page=${page}&&pageSize=6`)
       .catch((err) => {
         messageError($q, err);
       })
@@ -143,6 +159,8 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
 
     if (res && res.data) {
       issue.value = res.data;
+      currentPageIssue.value = res.data.page;
+      currentTotalIssue.value = res.data.total;
     }
   }
 
@@ -154,12 +172,16 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     fetchMessage,
     fetchMessageStatus,
     sendMessage,
-    items,
     scrollToEnd,
     scrollContainer,
     currentIssue,
     currentTitle,
     socket,
     messageStatus,
+    loadMessage,
+    currentTotalMessage,
+    currentPage,
+    currentPageIssue,
+    currentTotalIssue,
   };
 });