package-lock.json

@@ -18,6 +18,7 @@
         "@heroicons/vue": "^2.1.5",
         "@vueup/vue-quill": "^1.2.0",
         "axios": "^0.26.1",
+        "event-source-polyfill": "^1.0.31",
         "grapesjs": "^0.22.4",
         "grapesjs-preset-newsletter": "^1.0.2",
         "jwt-decode": "^4.0.0",
@@ -39,6 +40,7 @@
         "@rushstack/eslint-patch": "^1.8.0",
         "@tsconfig/node20": "^20.1.4",
         "@types/eslint": "~9.6.0",
+        "@types/event-source-polyfill": "^1.0.5",
         "@types/lodash.clonedeep": "^4.5.9",
         "@types/lodash.difference": "^4.5.9",
         "@types/lodash.differencewith": "^4.5.9",
@@ -3101,6 +3103,13 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/event-source-polyfill": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.5.tgz",
+      "integrity": "sha512-iaiDuDI2aIFft7XkcwMzDWLqo7LVDixd2sR6B4wxJut9xcp/Ev9bO4EFg4rm6S9QxATLBj5OPxdeocgmhjwKaw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/jquery": {
       "version": "3.5.32",
       "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
@@ -5400,6 +5409,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-source-polyfill": {
+      "version": "1.0.31",
+      "resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
+      "integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA==",
+      "license": "MIT"
+    },
     "node_modules/eventemitter3": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",

package.json

@@ -33,6 +33,7 @@
     "@heroicons/vue": "^2.1.5",
     "@vueup/vue-quill": "^1.2.0",
     "axios": "^0.26.1",
+    "event-source-polyfill": "^1.0.31",
     "grapesjs": "^0.22.4",
     "grapesjs-preset-newsletter": "^1.0.2",
     "jwt-decode": "^4.0.0",
@@ -54,6 +55,7 @@
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/eslint": "~9.6.0",
+    "@types/event-source-polyfill": "^1.0.5",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.difference": "^4.5.9",
     "@types/lodash.differencewith": "^4.5.9",

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(