src/stores/admin/club/listprint.ts

@@ -0,0 +1,40 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+
+export const useListPrintStore = defineStore("listprint", {
+  actions: {
+    async printList({
+      title,
+      queryStore,
+      headerId,
+      bodyId,
+      footerId,
+      headerHeight,
+      footerHeight,
+    }: {
+      title: string;
+      queryStore: string;
+      headerId?: string;
+      bodyId?: string;
+      footerId?: string;
+      headerHeight?: number;
+      footerHeight?: number;
+    }) {
+      return http.post(
+        `/admin/listprint`,
+        {
+          title,
+          queryStore,
+          headerId,
+          bodyId,
+          footerId,
+          headerHeight,
+          footerHeight,
+        },
+        {
+          responseType: "blob",
+        }
+      );
+    },
+  },
+});

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

@@ -6,15 +6,18 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
+      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
         <form
-          ref="form"
           class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
-          @submit.prevent=""
+          @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 ref="query" id="query" value="member">
+            <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">
@@ -25,7 +28,7 @@
           <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 ref="header" id="header" value="def">
+              <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 }}
@@ -39,7 +42,7 @@
           </div>
           <div class="flex flex-row gap-2 items-center">
             <p class="min-w-16">Hauptteil:</p>
-            <select ref="body" id="body" value="def">
+            <select id="body" value="def">
               <option value="def">Standard-Vorlage verwenden</option>
               <option value="listprint.member">Mitgliederliste</option>
               <option v-for="template in templates" :key="template.id" :value="template.id">
@@ -50,7 +53,7 @@
           <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 ref="footer" id="footer" value="def">
+              <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 }}
@@ -62,10 +65,21 @@
               <input id="footerHeight" type="number" :min="15" class="!w-24" placeholder="15" />
             </div>
           </div>
-          <div class="flex flex-row gap-4">
+          <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>
@@ -77,10 +91,18 @@ 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"]),
@@ -92,13 +114,41 @@ export default defineComponent({
   methods: {
     ...mapActions(useQueryStoreStore, ["fetchQueries"]),
     ...mapActions(useTemplateStore, ["fetchTemplates"]),
+    ...mapActions(useListPrintStore, ["printList"]),
     sendPrintJob(e: any) {
+      this.status = "loading";
+
       const fromData = e.target.elements;
-      const headerId = fromData.header.value === "def" ? null : fromData.header.value;
-      const bodyId = fromData.body.value === "def" ? null : fromData.body.value;
-      const footerId = fromData.footer.value === "def" ? null : fromData.footer.value;
-      const headerHeight = fromData.headerHeight.value === "" ? null : parseInt(fromData.headerHeight.value);
-      const footerHeight = fromData.footerHeight.value === "" ? null : parseInt(fromData.footerHeight.value);
+      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";
+        });
     },
   },
 });