ff-admin/src/views/admin/club/listprint/ListPrint.vue

<template>
  <MainTemplate>
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">Liste Drucken</h1>
      </div>
    </template>
    <template #diffMain>
      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
        <form
          class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
          @submit.prevent="sendPrintJob"
        >
          <div class="flex flex-row gap-2 items-center">
            <p class="min-w-16">Titel:</p>
            <input id="title" type="text" required />
          </div>
          <div class="flex flex-row gap-2 items-center">
            <p class="min-w-16">Query:</p>
            <select id="query" value="member">
              <option value="member">(system) alle Mitglieder</option>
              <option value="memberByRunningMembership">(system) alle Mitglieder mit laufender Mitgliedschaft</option>
              <option v-for="query in queries" :key="query.id" :value="query.id">
                {{ query.title }}
              </option>
            </select>
          </div>
          <div class="flex flex-col md:flex-row gap-2 md:items-center">
            <div class="flex flex-row w-full gap-2 items-center">
              <p class="min-w-16">Kopfzeile:</p>
              <select id="header" value="def">
                <option value="def">Standard-Vorlage verwenden</option>
                <option v-for="template in templates" :key="template.id" :value="template.id">
                  {{ template.template }}
                </option>
              </select>
            </div>
            <div class="flex flex-row gap-2 items-center">
              <p class="whitespace-nowrap">Höhe [mm]:</p>
              <input id="headerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
            </div>
          </div>
          <div class="flex flex-row gap-2 items-center">
            <p class="min-w-16">Hauptteil:</p>
            <select id="body" value="def">
              <option value="def">Standard-Vorlage verwenden</option>
              <option value="listprint.member">(system) Mitgliederliste</option>
              <option v-for="template in templates" :key="template.id" :value="template.id">
                {{ template.template }}
              </option>
            </select>
          </div>
          <div class="flex flex-col md:flex-row gap-2 md:items-center">
            <div class="flex flex-row w-full gap-2 items-center">
              <p class="min-w-16">Fußzeile:</p>
              <select id="footer" value="def">
                <option value="def">Standard-Vorlage verwenden</option>
                <option v-for="template in templates" :key="template.id" :value="template.id">
                  {{ template.template }}
                </option>
              </select>
            </div>
            <div class="flex flex-row gap-2 items-center">
              <p class="whitespace-nowrap">Höhe [mm]:</p>
              <input id="footerHeight" type="number" :min="15" class="w-24!" placeholder="15" />
            </div>
          </div>
          <div class="flex flex-row gap-2">
            <button type="submit" primary class="w-fit!">Liste drucken</button>
            <button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
          </div>
        </form>
        <div class="w-full grow min-h-[50%] flex flex-col gap-2">
          <Spinner v-if="status == 'loading'" />
          <div class="grow">
            <iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
          </div>

          <div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
            <a ref="download" button primary class="w-fit!">download</a>
          </div>
        </div>
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
import { useTemplateStore } from "@/stores/admin/configuration/template";
import Spinner from "@/components/Spinner.vue";
import type { AxiosResponse } from "axios";
import { useListPrintStore } from "@/stores/admin/club/listprint";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      status: null as null | "loading" | "success" | "failed",
    };
  },
  computed: {
    ...mapState(useQueryStoreStore, ["queries"]),
    ...mapState(useTemplateStore, ["templates"]),
  },
  mounted() {
    this.fetchQueries();
    this.fetchTemplates();
  },
  methods: {
    ...mapActions(useQueryStoreStore, ["fetchQueries"]),
    ...mapActions(useTemplateStore, ["fetchTemplates"]),
    ...mapActions(useListPrintStore, ["printList"]),
    sendPrintJob(e: any) {
      this.status = "loading";

      const fromData = e.target.elements;
      const title = fromData.title.value;
      const queryStore = fromData.query.value;
      const headerId = fromData.header.value === "def" ? undefined : fromData.header.value;
      const bodyId = fromData.body.value === "def" ? undefined : fromData.body.value;
      const footerId = fromData.footer.value === "def" ? undefined : fromData.footer.value;
      const headerHeight = fromData.headerHeight.value === "" ? undefined : parseInt(fromData.headerHeight.value);
      const footerHeight = fromData.footerHeight.value === "" ? undefined : parseInt(fromData.footerHeight.value);

      this.printList({
        title,
        queryStore,
        headerId,
        bodyId,
        footerId,
        headerHeight,
        footerHeight,
      })
        .then((response) => {
          this.status = "success";
          const blob = new Blob([response.data], { type: "application/pdf" });
          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);

          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
          const fileLink = this.$refs.download as HTMLAnchorElement;
          fileLink.href = fileURL;
          fileLink.setAttribute("download", `Listen-Ausdruck_${title}.pdf`);
        })
        .catch(() => {
          this.status = "failed";
        });
    },
  },
});
</script>