enhance: display process logs

src/components/admin/club/newsletter/NewsletterMailProgressModal.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Newsletter Mail-Versand Logs</p>
+    </div>
+    <br />
+
+    <div class="h-96 overflow-y-scroll">
+      <p v-for="entry in mailSourceMessages">
+        {{ entry }}
+      </p>
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+    };
+  },
+  computed:{
+    ...mapState(useNewsletterPrintoutStore, ["mailSourceMessages"])
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>

src/components/admin/club/newsletter/NewsletterPrintingProgressModal.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Newsletter Druck-Prozess Logs</p>
+    </div>
+    <br />
+
+    <div class="flex flex-col gap-2 h-96 overflow-y-scroll">
+      <div
+        v-for="entry in pdfSourceMessages"
+        class="flex flex-row gap-2 border border-gray-200 rounded-md p-1 items-center"
+      >
+        <SuccessCheckmark v-if="entry.factor == 'success'" class="w-5 h-5" />
+        <InformationCircleIcon v-else-if="entry.factor == 'info'" class="w-5 h-5 min-h-5 min-w-5 text-gray-500" />
+        <FailureXMark v-else-if="entry.factor == 'failed'" class="w-5 h-5" />
+        <p>{{ entry.iteration }}/{{ entry.total }}: {{ entry.msg }}</p>
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal">abbrechen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import { useNewsletterPrintoutStore } from "@/stores/admin/club/newsletter/newsletterPrintout";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import { InformationCircleIcon } from "@heroicons/vue/24/solid";
+import FailureXMark from "@/components/FailureXMark.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(useNewsletterPrintoutStore, ["pdfSourceMessages"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+  },
+});
+</script>

src/stores/admin/club/newsletter/newsletterPrintout.ts

@@ -13,8 +13,8 @@ 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<Object>,
+      pdfSourceMessages: [] as Array<{ kind: string; factor: string; [key: string]: string }>,
-      mailSourceMessages: [] as Array<Object>,
+      mailSourceMessages: [] as Array<{ kind: string; factor: string; [key: string]: string }>,
       pdfPrintingAbort: undefined as undefined | AbortController,
       mailSendingAbort: undefined as undefined | AbortController,
     };
@@ -118,8 +118,12 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
             let data = JSON.parse(r);
             this.pdfSourceMessages.push(data);
             let type: NotificationType = "info";
-            if (data.factor == "failed") type = "error";
+            let timeout = undefined;
-            notificationStore.push(`Druck: ${data.iteration}/${data.total}`, `${data.msg}`, type);
+            if (data.factor == "failed") {
+              type = "error";
+              timeout = 0;
+            }
+            notificationStore.push(`Druck: ${data.iteration}/${data.total}`, `${data.msg}`, type, timeout);
           }
         });
         this.fetchNewsletterPrintout();
@@ -136,8 +140,12 @@ export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
             let data = JSON.parse(r);
             this.mailSourceMessages.push(data);
             let type: NotificationType = "info";
-            if (data.factor == "failed") type = "error";
+            let timeout = undefined;
-            notificationStore.push(`Mailversand: ${data.iteration}/${data.total}`, `${data.msg}`, type);
+            if (data.factor == "failed") {
+              type = "error";
+              timeout = 0;
+            }
+            notificationStore.push(`Mailversand: ${data.iteration}/${data.total}`, `${data.msg}`, type, timeout);
           }
         });
       }

src/stores/notification.ts

@@ -27,12 +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);
+      }
     },
     revoke(id: string) {
       this.notifications.splice(

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

@@ -61,6 +61,12 @@
         <SuccessCheckmark v-else-if="sendingPreview == 'success'" />
         <FailureXMark v-else-if="sendingPreview == 'failed'" />
       </button>
+      <button v-if="pdfSourceMessages.length != 0" primary-outline class="!w-fit" @click="openPdfLogs">
+        Druck Logs
+      </button>
+      <button v-if="mailSourceMessages.length != 0" primary-outline class="!w-fit" @click="openMailLogs">
+        Versand Logs
+      </button>
     </div>
   </div>
 </template>
@@ -84,7 +90,15 @@ export default defineComponent({
     newsletterId: String,
   },
   computed: {
-    ...mapState(useNewsletterPrintoutStore, ["printout", "loading", "printing", "sending", "sendingPreview"]),
+    ...mapState(useNewsletterPrintoutStore, [
+      "printout",
+      "loading",
+      "printing",
+      "sending",
+      "sendingPreview",
+      "mailSourceMessages",
+      "pdfSourceMessages",
+    ]),
     ...mapState(useAbilityStore, ["can"]),
   },
   mounted() {
@@ -118,6 +132,20 @@ 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"))
+        )
+      );
+    },
   },
 });
 </script>