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

<template>
  <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="fetchNewsletterPrintout" class="cursor-pointer">
      &#8634; laden fehlgeschlagen
    </p>

    <div class="flex flex-col gap-2 h-full overflow-y-auto">
      <div v-for="print in printout" :key="print" 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 }}</p>
          <div class="flex flex-row">
            <div v-if="print.endsWith('.pdf')">
              <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)" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-row flex-wrap justify-start gap-2">
      <button
        v-if="can('create', 'club', 'newsletter')"
        primary
        class="!w-fit whitespace-nowrap flex flex-row gap-2"
        :disabled="printing != undefined"
        @click="createNewsletterPrintout"
      >
        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 whitespace-nowrap flex flex-row gap-2"
        :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 whitespace-nowrap flex flex-row gap-2"
        :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>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
// 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">
export default defineComponent({
  props: {
    newsletterId: String,
  },
  computed: {
    ...mapState(useNewsletterPrintoutStore, ["printout", "loading", "printing", "sending", "sendingPreview"]),
    ...mapState(useAbilityStore, ["can"]),
  },
  mounted() {
    this.fetchNewsletterPrintout();
    this.subscribeMailSendingProgress();
    this.subscribePdfPrintingProgress();
  },
  methods: {
    ...mapActions(useModalStore, ["openModal"]),
    ...mapActions(useNewsletterPrintoutStore, [
      "fetchNewsletterPrintout",
      "createNewsletterPrintout",
      "fetchNewsletterPrintoutById",
      "createNewsletterMailPreview",
      "createNewsletterSend",
      "subscribeMailSendingProgress",
      "subscribePdfPrintingProgress",
    ]),
    openPdfShow(filename?: string) {
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPreviewModal.vue"))),
        filename
      );
    },
    downloadPdf(filename: string) {
      this.fetchNewsletterPrintoutById(filename)
        .then((response) => {
          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
          const fileLink = document.createElement("a");
          fileLink.href = fileURL;
          fileLink.setAttribute("download", filename);
          document.body.appendChild(fileLink);
          fileLink.click();
          fileLink.remove();
        })
        .catch(() => {});
    },
  },
});
</script>