diff --git a/src/stores/admin/club/listprint.ts b/src/stores/admin/club/listprint.ts
new file mode 100644
index 0000000..65f6cff
--- /dev/null
+++ b/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",
+ }
+ );
+ },
+ },
+});
diff --git a/src/views/admin/club/listprint/ListPrint.vue b/src/views/admin/club/listprint/ListPrint.vue
index 6c82e27..7b66e98 100644
--- a/src/views/admin/club/listprint/ListPrint.vue
+++ b/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";
+ });
},
},
});