fix: pretty view of mail sending logs

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

@@ -5,17 +5,21 @@
     </div>
     <br />
 
-    <div class="h-96 overflow-y-scroll">
-      <p v-for="entry in mailSourceMessages">
-        {{ entry }}
-      </p>
+    <div class="flex flex-col gap-2 h-96 overflow-y-scroll">
+      <div
+        v-for="entry in mailSourceMessages"
+        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>
+        <button primary-outline @click="closeModal">abbrechen</button>
       </div>
     </div>
   </div>
@@ -26,16 +30,18 @@ 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 {
-    };
+    return {};
   },
-  computed:{
-    ...mapState(useNewsletterPrintoutStore, ["mailSourceMessages"])
+  computed: {
+    ...mapState(useNewsletterPrintoutStore, ["mailSourceMessages"]),
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),