src/components/admin/club/member/MemberNameListModal.vue

@@ -1,60 +0,0 @@
-<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>
-
-    <div class="flex flex-row gap-2 justify-end">
-      <a ref="download" button primary class="!w-fit">download</a>
-      <button primary-outline class="!w-fit" @click="closeModal">schließen</button>
-    </div>
-
-  </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 { useMemberStore } from "@/stores/admin/club/member/member";
-</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(useMemberStore, ["printMemberList"]),
-    fetchItem() {
-      this.status = "loading";
-      this.printMemberList()
-        .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);
-
-          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
-          const fileLink = (this.$refs.download as HTMLAnchorElement)
-          fileLink.href = fileURL;
-          fileLink.setAttribute("download", "Mitgliederliste.pdf");
-        })
-        .catch(() => {
-          this.status = { status: "failed" };
-        });
-    },
-  },
-});
-</script>

src/router/index.ts

@@ -295,6 +295,13 @@ const router = createRouter({
               meta: { type: "read", section: "club", module: "query" },
               beforeEnter: [abilityAndNavUpdate],
             },
+            {
+              path: "listprint",
+              name: "admin-club-listprint",
+              component: () => import("@/views/admin/club/listprint/ListPrint.vue"),
+              meta: { type: "read", section: "club", module: "listprint" },
+              beforeEnter: [abilityAndNavUpdate],
+            },
           ],
         },
         {

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/stores/admin/club/member/member.ts

@@ -124,10 +124,5 @@ export const useMemberStore = defineStore("member", {
       this.fetchMembers();
       return result;
     },
-    async printMemberList() {
-      return http.get(`/admin/member/print/namelist`, {
-        responseType: "blob",
-      });
-    },
   },
 });

src/stores/admin/navigation.ts

@@ -92,6 +92,7 @@ export const useNavigationStore = defineStore("navigation", {
             ...(abilityStore.can("read", "club", "protocol") ? [{ key: "protocol", title: "Protokolle" }] : []),
             ...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
             ...(abilityStore.can("read", "club", "query") ? [{ key: "query_builder", title: "Query Builder" }] : []),
+            ...(abilityStore.can("read", "club", "listprint") ? [{ key: "listprint", title: "Liste Drucken" }] : []),
           ],
         },
         configuration: {

src/types/permissionTypes.ts

@@ -6,6 +6,7 @@ export type PermissionModule =
   | "newsletter"
   | "newsletter_config"
   | "protocol"
+  | "listprint"
   | "qualification"
   | "award"
   | "executive_position"
@@ -50,6 +51,7 @@ export const permissionModules: Array<PermissionModule> = [
   "newsletter",
   "newsletter_config",
   "protocol",
+  "listprint",
   "qualification",
   "award",
   "executive_position",
@@ -68,7 +70,7 @@ export const permissionModules: Array<PermissionModule> = [
 ];
 export const permissionTypes: Array<PermissionType> = ["read", "create", "update", "delete"];
 export const sectionsAndModules: SectionsAndModulesObject = {
-  club: ["member", "calendar", "newsletter", "protocol", "query"],
+  club: ["member", "calendar", "newsletter", "protocol", "query", "listprint"],
   configuration: [
     "qualification",
     "award",

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

@@ -0,0 +1,155 @@
+<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>

src/views/admin/club/members/Member.vue

@@ -3,9 +3,6 @@
     <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">Mitglieder</h1>
-        <div title="Mitgliederliste drucken" @click="openPrintModal">
-          <DocumentTextIcon class="w-5 h-5 cursor-pointer" />
-        </div>
       </div>
     </template>
     <template #diffMain>
@@ -69,11 +66,6 @@ export default defineComponent({
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/CreateMemberModal.vue")))
       );
     },
-    openPrintModal() {
-      this.openModal(
-        markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberNameListModal.vue")))
-      );
-    },
   },
 });
 </script>