diff --git a/src/components/Notification.vue b/src/components/Notification.vue index e320e19..f208413 100644 --- a/src/components/Notification.vue +++ b/src/components/Notification.vue @@ -113,10 +113,10 @@ export default defineComponent({ }, methods: { ...mapActions(useNotificationStore, ["revoke"]), - close(id: string) { + close(id: number) { this.revoke(id); }, - hovering(id: string, value: boolean, timeout?: number) { + hovering(id: number, value: boolean, timeout?: number) { if (value) { clearTimeout(this.timeouts[id]); } else { diff --git a/src/components/admin/club/newsletter/NewsletterMailProgressModal.vue b/src/components/admin/club/newsletter/NewsletterMailProgressModal.vue deleted file mode 100644 index 2083eeb..0000000 --- a/src/components/admin/club/newsletter/NewsletterMailProgressModal.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - - - diff --git a/src/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue b/src/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue deleted file mode 100644 index 416c1e1..0000000 --- a/src/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue +++ /dev/null @@ -1,50 +0,0 @@ - - - - - diff --git a/src/router/newsletterGuard.ts b/src/router/newsletterGuard.ts index 5d96cf9..d96cb8e 100644 --- a/src/router/newsletterGuard.ts +++ b/src/router/newsletterGuard.ts @@ -9,6 +9,8 @@ export async function setNewsletterId(to: any, from: any, next: any) { useNewsletterDatesStore().$reset(); useNewsletterRecipientsStore().$reset(); + useNewsletterPrintoutStore().unsubscribePdfPrintingProgress(); + useNewsletterPrintoutStore().unsubscribeMailSendingProgress(); useNewsletterPrintoutStore().$reset(); next(); @@ -21,6 +23,8 @@ export async function resetNewsletterStores(to: any, from: any, next: any) { useNewsletterDatesStore().$reset(); useNewsletterRecipientsStore().$reset(); + useNewsletterPrintoutStore().unsubscribePdfPrintingProgress(); + useNewsletterPrintoutStore().unsubscribeMailSendingProgress(); useNewsletterPrintoutStore().$reset(); next(); diff --git a/src/serverCom.ts b/src/serverCom.ts index 893a376..e5cc8e5 100644 --- a/src/serverCom.ts +++ b/src/serverCom.ts @@ -62,7 +62,7 @@ http.interceptors.response.use( .then(() => { return http(originalRequest); }) - .catch(() => {}); + .catch(); } const notificationStore = useNotificationStore(); @@ -108,25 +108,4 @@ function newEventSource(path: string) { }); } -async function* streamingFetch(path: string, abort?: AbortController) { - await refreshToken() - .then(() => {}) - .catch(() => {}); - - const token = localStorage.getItem("accessToken"); - const response = await fetch(url + "/api" + path, { - signal: abort?.signal, - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - const reader = response.body?.getReader(); - while (true && reader) { - const { done, value } = await reader.read(); - if (done) break; - yield new TextDecoder().decode(value); - } -} - -export { http, newEventSource, streamingFetch, host }; +export { http, newEventSource, host }; diff --git a/src/stores/admin/club/newsletter/newsletterPrintout.ts b/src/stores/admin/club/newsletter/newsletterPrintout.ts index 945ac24..0a12ef6 100644 --- a/src/stores/admin/club/newsletter/newsletterPrintout.ts +++ b/src/stores/admin/club/newsletter/newsletterPrintout.ts @@ -1,9 +1,8 @@ import { defineStore } from "pinia"; -import { http, newEventSource, streamingFetch } from "@/serverCom"; +import { http, newEventSource } 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: () => { @@ -13,10 +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", - pdfSourceMessages: [] as Array<{ kind: string; factor: string; [key: string]: string }>, - mailSourceMessages: [] as Array<{ kind: string; factor: string; [key: string]: string }>, - pdfPrintingAbort: undefined as undefined | AbortController, - mailSendingAbort: undefined as undefined | AbortController, + pdfProgessSource: undefined as undefined | EventSourcePolyfill, + mailProgessSource: undefined as undefined | EventSourcePolyfill, + pdfSourceMessages: [] as Array, + mailSourceMessages: [] as Array, }; }, actions: { @@ -64,7 +63,6 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", { }); }, createNewsletterPrintout() { - this.subscribePdfPrintingProgress(); this.printing = "loading"; const newsletterId = useNewsletterStore().activeNewsletter; if (newsletterId == null) return; @@ -80,12 +78,10 @@ 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; @@ -100,55 +96,32 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", { .finally(() => { setTimeout(() => { this.sending = undefined; - this.mailSendingAbort?.abort(); }, 1500); }); }, - 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"; - let timeout = undefined; - if (data.factor == "failed") { - type = "error"; - timeout = 0; - } - notificationStore.push(`Druck: ${data.iteration}/${data.total}`, `${data.msg}`, type, timeout); - } - }); - this.fetchNewsletterPrintout(); - } + 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 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"; - let timeout = undefined; - if (data.factor == "failed") { - type = "error"; - timeout = 0; - } - notificationStore.push(`Mailversand: ${data.iteration}/${data.total}`, `${data.msg}`, type, timeout); - } - }); - } + 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; }, }, }); diff --git a/src/stores/notification.ts b/src/stores/notification.ts index 872b108..249f2c0 100644 --- a/src/stores/notification.ts +++ b/src/stores/notification.ts @@ -1,7 +1,7 @@ import { defineStore } from "pinia"; export interface Notification { - id: string; + id: number; title: string; text: string; type: NotificationType; @@ -19,7 +19,7 @@ export const useNotificationStore = defineStore("notification", { }, actions: { push(title: string, text: string, type: NotificationType, timeout: number = 5000) { - let id = `${Date.now()}_${Math.random()}`; + let id = Date.now(); this.notifications.push({ id, title, @@ -27,16 +27,14 @@ export const useNotificationStore = defineStore("notification", { type, indicator: false, }); - if (timeout != 0) { - setTimeout(() => { - this.notifications[this.notifications.findIndex((n) => n.id === id)].indicator = true; - }, 100); - this.timeouts[id] = setTimeout(() => { - this.revoke(id); - }, timeout); - } + setTimeout(() => { + this.notifications[this.notifications.findIndex((n) => n.id === id)].indicator = true; + }, 100); + this.timeouts[id] = setTimeout(() => { + this.revoke(id); + }, timeout); }, - revoke(id: string) { + revoke(id: number) { this.notifications.splice( this.notifications.findIndex((n) => n.id === id), 1 diff --git a/src/views/admin/club/newsletter/NewsletterPrintout.vue b/src/views/admin/club/newsletter/NewsletterPrintout.vue index 0580400..90c06c0 100644 --- a/src/views/admin/club/newsletter/NewsletterPrintout.vue +++ b/src/views/admin/club/newsletter/NewsletterPrintout.vue @@ -61,12 +61,6 @@ - - @@ -90,19 +84,13 @@ export default defineComponent({ newsletterId: String, }, computed: { - ...mapState(useNewsletterPrintoutStore, [ - "printout", - "loading", - "printing", - "sending", - "sendingPreview", - "mailSourceMessages", - "pdfSourceMessages", - ]), + ...mapState(useNewsletterPrintoutStore, ["printout", "loading", "printing", "sending", "sendingPreview"]), ...mapState(useAbilityStore, ["can"]), }, mounted() { this.fetchNewsletterPrintout(); + this.subscribeMailSendingProgress(); + this.subscribePdfPrintingProgress(); }, methods: { ...mapActions(useModalStore, ["openModal"]), @@ -112,6 +100,8 @@ export default defineComponent({ "fetchNewsletterPrintoutById", "createNewsletterMailPreview", "createNewsletterSend", + "subscribeMailSendingProgress", + "subscribePdfPrintingProgress", ]), openPdfShow(filename?: string) { this.openModal( @@ -132,20 +122,6 @@ export default defineComponent({ }) .catch(() => {}); }, - openPdfLogs() { - this.openModal( - markRaw( - defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue")) - ) - ); - }, - openMailLogs() { - this.openModal( - markRaw( - defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterMailProgressModal.vue")) - ) - ); - }, }, });