send or print newsletter preview

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="w-full h-full flex flex-col gap-2">
+    <Spinner v-if="status == 'loading'" />
+    <div class="grow">
+      <iframe ref="viewer" class="w-full h-full" />
+    </div>
+
+    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import type { AxiosResponse } from "axios";
+import { useNewsletterPrintoutStore } from "@/stores/admin/newsletterPrintout";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+    };
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useNewsletterPrintoutStore, ["fetchNewsletterPrintoutPreview", "fetchNewsletterPrintoutById"]),
+    fetchItem() {
+      this.status = "loading";
+      let query: Promise<AxiosResponse<any, any>>;
+      if (this.data) {
+        query = this.fetchNewsletterPrintoutById(this.data);
+      } else {
+        query = this.fetchNewsletterPrintoutPreview();
+      }
+      query
+        .then((response) => {
+          this.status = { status: "success" };
+          const blob = new Blob([response.data], { type: "application/pdf" });
+          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>