Merge branch 'develop' into dev

src/modules/03_recruiting/views/01_compete/Period.vue

@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
@@ -12,6 +12,8 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { calculateFiscalYear } from "@/utils/function";
 import { useUploadProgressStore } from "@/stores/uploadProgress";
+import { useSocketStore } from "@/stores/socket";
+import { storeToRefs } from "pinia";
 
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import type {
@@ -39,6 +41,9 @@ const {
 
 const router = useRouter();
 const uploadProgress = useUploadProgressStore();
+const socketStore = useSocketStore();
+const { notificationCounter } = storeToRefs(socketStore);
+
 const name = ref<string>("");
 const year = ref<number>(calculateFiscalYear(new Date()) + 543);
 const order = ref<number>(1);
@@ -680,6 +685,11 @@ onMounted(async () => {
   hideLoader();
   await fetchData();
 });
+
+/** Watch notification counter on socket */
+watch(notificationCounter, () => {
+  fetchData();
+});
 </script>
 
 <template>

src/stores/socket.ts

@@ -3,6 +3,7 @@ import { getToken } from "@/plugins/auth";
 import { defineStore } from "pinia";
 import { Notify } from "quasar";
 import { io, Socket } from "socket.io-client";
+import { ref } from "vue";
 interface sockeBackup {
   message: string;
   success?: boolean;
@@ -10,6 +11,7 @@ interface sockeBackup {
 
 export const useSocketStore = defineStore("socket", () => {
   let socket: Socket;
+  const notificationCounter = ref(0);
 
   async function init() {
     socket = io(new URL(config.API.socket).origin, {
@@ -46,7 +48,8 @@ export const useSocketStore = defineStore("socket", () => {
 
     socket.on("socket-notification", (payload) => {
       let body: sockeBackup = JSON.parse(payload);
-      notifyStatus(body.message, body.success);
+      notifyStatusWithProgress(body.message, body.success);
+      notificationCounter.value++;
     });
   }
 
@@ -67,6 +70,27 @@ export const useSocketStore = defineStore("socket", () => {
     });
   }
 
+  function notifyStatusWithProgress(message: string, success?: boolean) {
+    Notify.create({
+      group: false,
+      type: success === undefined || success ? "positive" : "negative",
+      message: `${message}`,
+      position: "top",
+      timeout: success === undefined || success ? 3000 : 0,
+      actions:
+        success === undefined || success
+          ? []
+          : [
+              {
+                icon: "close",
+                color: "white",
+                round: true,
+              },
+            ],
+      progress: true,
+    });
+  }
+
   function fnStyleNotiOrg() {
     if (document.getElementById("notify-link-style")) return;
     const style = document.createElement("style");
@@ -89,10 +113,12 @@ export const useSocketStore = defineStore("socket", () => {
   `;
     document.head.appendChild(style);
   }
+
   (window as any).resetOrgPage = (type: string) => {
     localStorage.setItem("org_type", type);
     window.location.reload();
   };
+
   function notifyStatusOrg(type: string, message: string, success?: boolean) {
     fnStyleNotiOrg();
     Notify.create({
@@ -116,5 +142,5 @@ export const useSocketStore = defineStore("socket", () => {
 
   init();
 
-  return {};
+  return { notificationCounter };
 });