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>

src/helpers/quillConfig.ts

@@ -1,5 +1,5 @@
 export const toolbarOptions = [
-  [/*{ header: [1, 2, false] },*/ { font: [] }],
+  [{ header: [1, 2, 3, 4, false] }, { font: [] }],
   //[{ header: 1 }, { header: 2 }],
   ["bold", "italic", "underline", "strike"],
   ["blockquote", "code-block", "link"],

src/router/index.ts

@@ -199,6 +199,12 @@ const router = createRouter({
                       component: () => import("@/views/admin/club/newsletter/NewsletterOverview.vue"),
                       props: true,
                     },
+                    {
+                      path: "data",
+                      name: "admin-club-newsletter-data",
+                      component: () => import("@/views/admin/club/newsletter/NewsletterData.vue"),
+                      props: true,
+                    },
                     {
                       path: "recipients",
                       name: "admin-club-newsletter-recipients",

src/stores/admin/newsletterPrintout.ts

@@ -0,0 +1,98 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import { useNewsletterStore } from "./newsletter";
+import type { AxiosResponse } from "axios";
+
+export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
+  state: () => {
+    return {
+      printout: [] as Array<string>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      printing: undefined as undefined | "loading" | "success" | "failed",
+      sending: undefined as undefined | "loading" | "success" | "failed",
+      sendingPreview: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  actions: {
+    fetchNewsletterPrintout() {
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      this.loading = "loading";
+      http
+        .get(`/admin/newsletter/${newsletterId}/printouts`)
+        .then((result) => {
+          this.printout = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchNewsletterPrintoutById(printout: string): Promise<AxiosResponse<any, any>> {
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      return http.get(`/admin/newsletter/${newsletterId}/printout/${printout}`, {
+        responseType: "blob",
+      });
+    },
+    fetchNewsletterPrintoutPreview(): Promise<AxiosResponse<any, any>> {
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      return http.get(`/admin/newsletter/${newsletterId}/printoutpreview`, {
+        responseType: "blob",
+      });
+    },
+    createNewsletterMailPreview() {
+      this.sendingPreview = "loading";
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      if (newsletterId == null) return;
+      return http
+        .post(`/admin/newsletter/${newsletterId}/mailpreview`)
+        .then((res) => {
+          this.sendingPreview = "success";
+        })
+        .catch((err) => {
+          this.sendingPreview = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.sendingPreview = undefined;
+          }, 1500);
+        });
+    },
+    createNewsletterPrintout() {
+      this.printing = "loading";
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      if (newsletterId == null) return;
+      return http
+        .post(`/admin/newsletter/${newsletterId}/printout`)
+        .then((res) => {
+          this.fetchNewsletterPrintout();
+          this.printing = "success";
+        })
+        .catch((err) => {
+          this.printing = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.printing = undefined;
+          }, 1500);
+        });
+    },
+    createNewsletterSend() {
+      this.sending = "loading";
+      const newsletterId = useNewsletterStore().activeNewsletter;
+      if (newsletterId == null) return;
+      return http
+        .post(`/admin/newsletter/${newsletterId}/send`)
+        .then((res) => {
+          this.sending = "success";
+        })
+        .catch((err) => {
+          this.sending = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.sending = undefined;
+          }, 1500);
+        });
+    },
+  },
+});

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeNewsletterObj != null" class="flex flex-col gap-2 w-full">
+      <div class="w-full">
+        <label for="title">Überschrift</label>
+        <QuillEditor
+          id="summary"
+          theme="snow"
+          placeholder="Überschrift des Newsletters..."
+          style="height: 150px; max-height: 150px; min-height: 150px"
+          contentType="html"
+          :toolbar="toolbarOptions"
+          v-model:content="activeNewsletterObj.newsletterTitle"
+          :enable="can('create', 'club', 'newsletter')"
+          :style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
+        />
+      </div>
+      <div class="flex flex-col h-1/2">
+        <label for="summary">Text</label>
+        <QuillEditor
+          id="summary"
+          theme="snow"
+          placeholder="Text zum Newsletter..."
+          style="height: 150px; max-height: 150px; min-height: 150px"
+          contentType="html"
+          :toolbar="toolbarOptions"
+          v-model:content="activeNewsletterObj.newsletterText"
+          :enable="can('create', 'club', 'newsletter')"
+          :style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
+        />
+      </div>
+      <div class="flex flex-col h-1/2">
+        <label for="summary">Signatur</label>
+        <QuillEditor
+          id="summary"
+          theme="snow"
+          placeholder="Zusammenfassung zum Newsletter..."
+          style="height: 150px; max-height: 150px; min-height: 150px"
+          contentType="html"
+          :toolbar="toolbarOptions"
+          v-model:content="activeNewsletterObj.newsletterSignatur"
+          :enable="can('create', 'club', 'newsletter')"
+          :style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState, mapWritableState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import { useNewsletterStore } from "@/stores/admin/newsletter";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { toolbarOptions } from "@/helpers/quillConfig";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    newsletterId: String,
+  },
+  computed: {
+    ...mapWritableState(useNewsletterStore, ["loadingActive", "activeNewsletterObj"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+});
+</script>

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

@@ -1,6 +1,10 @@
 <template>
   <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
     <div v-if="activeNewsletterObj != null" class="flex flex-col gap-2 w-full">
+      <p class="italic">
+        Titel und Zusammenfassung werden standardmäßig nicht im Newsletter angezeit, können aber bei Verwendung eines
+        eigenen Templates verwendet werden.
+      </p>
       <div class="w-full">
         <label for="title">Titel</label>
         <input

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

@@ -1,49 +1,68 @@
 <template>
-  <!-- <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
-    <p v-else-if="loading == 'failed'" @click="fetchProtocolPrintout" class="cursor-pointer">
+    <p v-else-if="loading == 'failed'" @click="fetchNewsletterPrintout" class="cursor-pointer">
       &#8634; laden fehlgeschlagen
     </p>
 
     <div class="flex flex-col gap-2 h-full overflow-y-auto">
-      <div
+      <div v-for="print in printout" :key="print" class="flex flex-col h-fit w-full border border-primary rounded-md">
-        v-for="print in printout"
-        :key="print.id"
-        class="flex flex-col h-fit w-full border border-primary rounded-md"
-      >
         <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
-          <p>{{ print.title }}</p>
+          <p>{{ print }}</p>
           <div class="flex flex-row">
             <div>
-              <ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print.id)" />
+              <ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print)" />
             </div>
             <div>
-              <ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print.id)" />
+              <ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print)" />
             </div>
           </div>
         </div>
-        <div class="p-2">
-          <p>Ausdruck Nummer: {{ print.iteration }}</p>
-          <p>Ausdruck erstellt: {{ print.createdAt }}</p>
-        </div>
       </div>
     </div>
 
-    <div class="flex flex-row justify-start gap-2">
+    <div class="flex flex-row flex-wrap justify-start gap-2">
       <button
         v-if="can('create', 'club', 'newsletter')"
         primary
         class="!w-fit"
         :disabled="printing != undefined"
-        @click="createProtocolPrintout"
+        @click="createNewsletterPrintout"
       >
-        Ausdruck erstellen
+        Newsletter drucken
+        <Spinner v-if="printing == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="printing == 'success'" />
+        <FailureXMark v-else-if="printing == 'failed'" />
+      </button>
+      <button
+        v-if="can('create', 'club', 'newsletter')"
+        primary
+        class="!w-fit"
+        :disabled="sending != undefined"
+        @click="createNewsletterSend"
+      >
+        Mails versenden
+        <Spinner v-if="sending == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="sending == 'success'" />
+        <FailureXMark v-else-if="sending == 'failed'" />
+      </button>
+      <button v-if="can('create', 'club', 'newsletter')" primary-outline class="!w-fit" @click="openPdfShow()">
+        Newsletter Vorschau
+      </button>
+      <button
+        v-if="can('create', 'club', 'newsletter')"
+        primary-outline
+        class="!w-fit"
+        :disabled="sendingPreview != undefined"
+        @click="createNewsletterMailPreview"
+      >
+        Mail Vorschau
+        <Spinner v-if="sendingPreview == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="sendingPreview == 'success'" />
+        <FailureXMark v-else-if="sendingPreview == 'failed'" />
       </button>
-      <Spinner v-if="printing == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="printing == 'success'" />
-      <FailureXMark v-else-if="printing == 'failed'" />
     </div>
-  </div> -->
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,10 +71,11 @@ import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-// import { useProtocolPrintoutStore } from "@/stores/admin/newsletterPrintout";
+// import { useNewsletterPrintoutStore } from "@/stores/admin/newsletterPrintout";
 import { ArrowDownTrayIcon, ViewfinderCircleIcon } from "@heroicons/vue/24/outline";
 import { useModalStore } from "@/stores/modal";
 import { useAbilityStore } from "@/stores/ability";
+import { useNewsletterPrintoutStore } from "../../../../stores/admin/newsletterPrintout";
 </script>
 
 <script lang="ts">
@@ -63,40 +83,41 @@ export default defineComponent({
   props: {
     newsletterId: String,
   },
-  // computed: {
+  computed: {
-  //   ...mapState(useProtocolPrintoutStore, ["printout", "loading", "printing"]),
+    ...mapState(useNewsletterPrintoutStore, ["printout", "loading", "printing", "sending", "sendingPreview"]),
-  //   ...mapState(useAbilityStore, ["can"]),
+    ...mapState(useAbilityStore, ["can"]),
-  // },
+  },
-  // mounted() {
+  mounted() {
-  //   this.fetchProtocolPrintout();
+    this.fetchNewsletterPrintout();
-  // },
+  },
-  // methods: {
+  methods: {
-  //   ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useModalStore, ["openModal"]),
-  //   ...mapActions(useProtocolPrintoutStore, [
+    ...mapActions(useNewsletterPrintoutStore, [
-  //     "fetchProtocolPrintout",
+      "fetchNewsletterPrintout",
-  //     "createProtocolPrintout",
+      "createNewsletterPrintout",
-  //     "fetchProtocolPrintoutById",
+      "fetchNewsletterPrintoutById",
-  //   ]),
+      "createNewsletterMailPreview",
-  //   openPdfShow(id: number) {
+      "createNewsletterSend",
-  //     this.openModal(
+    ]),
-  //       markRaw(defineAsyncComponent(() => import("@/components/admin/club/newsletter/ProtocolPrintoutViewerModal.vue"))),
+    openPdfShow(filename?: string) {
-  //       id
+      this.openModal(
-  //     );
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPreviewModal.vue"))),
-  //   },
+        filename
-  //   downloadPdf(id: number) {
+      );
-  //     let clickedOn = this.printout.find((p) => p.id == id);
+    },
-  //     this.fetchProtocolPrintoutById(id)
+    downloadPdf(filename: string) {
-  //       .then((response) => {
+      this.fetchNewsletterPrintoutById(filename)
-  //         const fileURL = window.URL.createObjectURL(new Blob([response.data]));
+        .then((response) => {
-  //         const fileLink = document.createElement("a");
+          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
-  //         fileLink.href = fileURL;
+          const fileLink = document.createElement("a");
-  //         fileLink.setAttribute("download", clickedOn?.title ? clickedOn.title + ".pdf" : "Protokoll.pdf");
+          fileLink.href = fileURL;
-  //         document.body.appendChild(fileLink);
+          fileLink.setAttribute("download", filename + ".pdf");
-  //         fileLink.click();
+          document.body.appendChild(fileLink);
-  //         fileLink.remove();
+          fileLink.click();
-  //       })
+          fileLink.remove();
-  //       .catch(() => {});
+        })
-  //   },
+        .catch(() => {});
-  // },
+    },
+  },
 });
 </script>

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

@@ -53,6 +53,8 @@ import { useNewsletterStore } from "@/stores/admin/newsletter";
 import { useModalStore } from "@/stores/modal";
 import NewsletterSyncing from "@/components/admin/club/newsletter/NewsletterSyncing.vue";
 import { PrinterIcon } from "@heroicons/vue/24/outline";
+import { useNewsletterDatesStore } from "../../../../stores/admin/newsletterDates";
+import { useNewsletterRecipientsStore } from "../../../../stores/admin/newsletterRecipients";
 </script>
 
 <script lang="ts">
@@ -72,6 +74,7 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-club-newsletter-overview", title: "Übersicht" },
+        { route: "admin-club-newsletter-data", title: "Daten" },
         { route: "admin-club-newsletter-dates", title: "Termine" },
         { route: "admin-club-newsletter-recipients", title: "Empfänger" },
         { route: "admin-club-newsletter-printout", title: "Druck/Versand" },
@@ -86,6 +89,8 @@ export default defineComponent({
   },
   mounted() {
     this.fetchNewsletterByActiveId();
+    this.fetchNewsletterDates();
+    this.fetchNewsletterRecipients();
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {
@@ -106,6 +111,8 @@ export default defineComponent({
   // },
   methods: {
     ...mapActions(useNewsletterStore, ["fetchNewsletterByActiveId"]),
+    ...mapActions(useNewsletterDatesStore, ["fetchNewsletterDates"]),
+    ...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
     ...mapActions(useModalStore, ["openModal"]),
     openInfoModal() {
       this.openModal(