fix: display newsletter progress in client

This commit is contained in:
Julian Krauser 2025-01-12 13:25:55 +01:00
parent 52a35be6c5
commit a8e2b05d8e
6 changed files with 72 additions and 40 deletions

View file

@ -1,8 +1,9 @@
import { defineStore } from "pinia";
import { http, newEventSource } from "@/serverCom";
import { http, newEventSource, streamingFetch } from "@/serverCom";
import { useNewsletterStore } from "./newsletter";
import type { AxiosResponse } from "axios";
import type { EventSourcePolyfill } from "event-source-polyfill";
import { useNotificationStore, type NotificationType } from "../../../notification";
export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
state: () => {
@ -12,10 +13,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>,
pdfPrintingAbort: undefined as undefined | AbortController,
mailSendingAbort: undefined as undefined | AbortController,
};
},
actions: {
@ -63,6 +64,7 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
});
},
createNewsletterPrintout() {
this.subscribePdfPrintingProgress();
this.printing = "loading";
const newsletterId = useNewsletterStore().activeNewsletter;
if (newsletterId == null) return;
@ -78,10 +80,12 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
.finally(() => {
setTimeout(() => {
this.printing = undefined;
this.pdfPrintingAbort?.abort();
}, 1500);
});
},
createNewsletterSend() {
this.subscribeMailSendingProgress();
this.sending = "loading";
const newsletterId = useNewsletterStore().activeNewsletter;
if (newsletterId == null) return;
@ -96,32 +100,47 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
.finally(() => {
setTimeout(() => {
this.sending = undefined;
this.mailSendingAbort?.abort();
}, 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);
// };
async subscribePdfPrintingProgress() {
this.pdfSourceMessages = [];
const newsletterId = useNewsletterStore().activeNewsletter;
const notificationStore = useNotificationStore();
this.pdfPrintingAbort = new AbortController();
for await (let chunk of streamingFetch(
`/admin/newsletter/${newsletterId}/printoutprogress`,
this.pdfPrintingAbort
)) {
chunk.split("//").forEach((r) => {
if (r.trim() != "") {
let data = JSON.parse(r);
this.pdfSourceMessages.push(data);
let type: NotificationType = "info";
if (data.factor == "failed") type = "error";
notificationStore.push(`Druck: ${data.iteration}/${data.total}`, `${data.msg}`, type);
}
});
this.fetchNewsletterPrintout();
}
},
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;
async subscribeMailSendingProgress() {
this.mailSourceMessages = [];
const newsletterId = useNewsletterStore().activeNewsletter;
const notificationStore = useNotificationStore();
this.mailSendingAbort = new AbortController();
for await (let chunk of streamingFetch(`/admin/newsletter/${newsletterId}/sendprogress`, this.mailSendingAbort)) {
chunk.split("//").forEach((r) => {
if (r.trim() != "") {
let data = JSON.parse(r);
this.mailSourceMessages.push(data);
let type: NotificationType = "info";
if (data.factor == "failed") type = "error";
notificationStore.push(`Mailversand: ${data.iteration}/${data.total}`, `${data.msg}`, type);
}
});
}
},
},
});