sse for progress (disabled)

src/router/newsletterGuard.ts

@@ -1,6 +1,7 @@
 import { useNewsletterStore } from "@/stores/admin/newsletter";
 import { useNewsletterDatesStore } from "@/stores/admin/newsletterDates";
 import { useNewsletterRecipientsStore } from "@/stores/admin/newsletterRecipients";
+import { useNewsletterPrintoutStore } from "../stores/admin/newsletterPrintout";
 
 export async function setNewsletterId(to: any, from: any, next: any) {
   const newsletter = useNewsletterStore();
@@ -8,6 +9,9 @@ export async function setNewsletterId(to: any, from: any, next: any) {
 
   useNewsletterDatesStore().$reset();
   useNewsletterRecipientsStore().$reset();
+  useNewsletterPrintoutStore().unsubscribePdfPrintingProgress();
+  useNewsletterPrintoutStore().unsubscribeMailSendingProgress();
+  useNewsletterPrintoutStore().$reset();
 
   next();
 }
@@ -19,6 +23,9 @@ export async function resetNewsletterStores(to: any, from: any, next: any) {
 
   useNewsletterDatesStore().$reset();
   useNewsletterRecipientsStore().$reset();
+  useNewsletterPrintoutStore().unsubscribePdfPrintingProgress();
+  useNewsletterPrintoutStore().unsubscribeMailSendingProgress();
+  useNewsletterPrintoutStore().$reset();
 
   next();
 }

src/serverCom.ts

@@ -2,6 +2,7 @@ import axios from "axios";
 import { isAuthenticatedPromise, type Payload } from "./router/authGuard";
 import router from "./router";
 import { useNotificationStore } from "./stores/notification";
+import { EventSourcePolyfill } from "event-source-polyfill";
 
 let devMode = process.env.NODE_ENV === "development";
 
@@ -88,4 +89,13 @@ export async function refreshToken(): Promise<void> {
   });
 }
 
-export { http, host };
+function newEventSource(path: string) {
+  const token = localStorage.getItem("accessToken");
+  return new EventSourcePolyfill(url + "/api" + path, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+}
+
+export { http, newEventSource, host };

src/stores/admin/newsletterPrintout.ts

@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
-import { http } from "@/serverCom";
+import { http, newEventSource } from "@/serverCom";
 import { useNewsletterStore } from "./newsletter";
 import type { AxiosResponse } from "axios";
+import type { EventSourcePolyfill } from "event-source-polyfill";
 
 export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
   state: () => {
@@ -11,6 +12,10 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
       printing: undefined as undefined | "loading" | "success" | "failed",
       sending: undefined as undefined | "loading" | "success" | "failed",
       sendingPreview: undefined as undefined | "loading" | "success" | "failed",
+      pdfProgessSource: undefined as undefined | EventSourcePolyfill,
+      mailProgessSource: undefined as undefined | EventSourcePolyfill,
+      pdfSourceMessages: [] as Array<Object>,
+      mailSourceMessages: [] as Array<Object>,
     };
   },
   actions: {
@@ -94,5 +99,29 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
           }, 1500);
         });
     },
+    subscribePdfPrintingProgress() {
+      // const newsletterId = useNewsletterStore().activeNewsletter;
+      // if (this.pdfProgessSource != undefined) return;
+      // this.pdfProgessSource = newEventSource(`/admin/newsletter/${newsletterId}/printoutprogress`);
+      // this.pdfProgessSource.onmessage = (event) => {
+      //   console.log("pdf", event);
+      // };
+    },
+    subscribeMailSendingProgress() {
+      // const newsletterId = useNewsletterStore().activeNewsletter;
+      // if (this.mailProgessSource != undefined) return;
+      // this.mailProgessSource = newEventSource(`/admin/newsletter/${newsletterId}/sendprogress`);
+      // this.mailProgessSource.onmessage = (event) => {
+      //   console.log("mail", event);
+      // };
+    },
+    unsubscribePdfPrintingProgress() {
+      this.pdfProgessSource?.close();
+      this.pdfProgessSource = undefined;
+    },
+    unsubscribeMailSendingProgress() {
+      this.mailProgessSource?.close();
+      this.mailProgessSource = undefined;
+    },
   },
 });

src/views/admin/club/newsletter/NewsletterPrintout.vue

@@ -89,6 +89,8 @@ export default defineComponent({
   },
   mounted() {
     this.fetchNewsletterPrintout();
+    this.subscribeMailSendingProgress();
+    this.subscribePdfPrintingProgress();
   },
   methods: {
     ...mapActions(useModalStore, ["openModal"]),
@@ -98,6 +100,8 @@ export default defineComponent({
       "fetchNewsletterPrintoutById",
       "createNewsletterMailPreview",
       "createNewsletterSend",
+      "subscribeMailSendingProgress",
+      "subscribePdfPrintingProgress",
     ]),
     openPdfShow(filename?: string) {
       this.openModal(