From 25925133b832018b1729fdd5ab0f8800ce3cc576 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 18 Mar 2025 16:58:42 +0100
Subject: [PATCH 1/4] deprecate member list printing inside member

---
 .../admin/club/member/MemberNameListModal.vue | 60 -------------------
 src/stores/admin/club/member/member.ts        |  5 --
 src/views/admin/club/members/Member.vue       |  8 ---
 3 files changed, 73 deletions(-)
 delete mode 100644 src/components/admin/club/member/MemberNameListModal.vue

diff --git a/src/components/admin/club/member/MemberNameListModal.vue b/src/components/admin/club/member/MemberNameListModal.vue
deleted file mode 100644
index dab66ad..0000000
--- a/src/components/admin/club/member/MemberNameListModal.vue
+++ /dev/null
@@ -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>
diff --git a/src/stores/admin/club/member/member.ts b/src/stores/admin/club/member/member.ts
index fb7ea49..30d778b 100644
--- a/src/stores/admin/club/member/member.ts
+++ b/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",
-      });
-    },
   },
 });
diff --git a/src/views/admin/club/members/Member.vue b/src/views/admin/club/members/Member.vue
index 2794fd5..59b8b9f 100644
--- a/src/views/admin/club/members/Member.vue
+++ b/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>
-- 
2.45.3


From 4c25969b78b47f2a080b8dfa610833bdd4f69738 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 19 Mar 2025 14:38:35 +0100
Subject: [PATCH 2/4] List print base structure

---
 src/router/index.ts                          |   7 ++
 src/stores/admin/navigation.ts               |   1 +
 src/types/permissionTypes.ts                 |   4 +-
 src/views/admin/club/listprint/ListPrint.vue | 105 +++++++++++++++++++
 4 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/views/admin/club/listprint/ListPrint.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 6defe12..e2e484c 100644
--- a/src/router/index.ts
+++ b/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],
+            },
           ],
         },
         {
diff --git a/src/stores/admin/navigation.ts b/src/stores/admin/navigation.ts
index c32fb96..cc9024a 100644
--- a/src/stores/admin/navigation.ts
+++ b/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: {
diff --git a/src/types/permissionTypes.ts b/src/types/permissionTypes.ts
index a031c0e..e9ed138 100644
--- a/src/types/permissionTypes.ts
+++ b/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",
diff --git a/src/views/admin/club/listprint/ListPrint.vue b/src/views/admin/club/listprint/ListPrint.vue
new file mode 100644
index 0000000..6c82e27
--- /dev/null
+++ b/src/views/admin/club/listprint/ListPrint.vue
@@ -0,0 +1,105 @@
+<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-hidden">
+        <form
+          ref="form"
+          class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
+          @submit.prevent=""
+        >
+          <div class="flex flex-row gap-2 items-center">
+            <p class="min-w-16">Query:</p>
+            <select ref="query" 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 ref="header" 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 ref="body" 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">
+                {{ 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 ref="footer" 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-4">
+            <button type="submit" primary class="!w-fit">Liste drucken</button>
+          </div>
+        </form>
+      </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";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useQueryStoreStore, ["queries"]),
+    ...mapState(useTemplateStore, ["templates"]),
+  },
+  mounted() {
+    this.fetchQueries();
+    this.fetchTemplates();
+  },
+  methods: {
+    ...mapActions(useQueryStoreStore, ["fetchQueries"]),
+    ...mapActions(useTemplateStore, ["fetchTemplates"]),
+    sendPrintJob(e: any) {
+      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);
+    },
+  },
+});
+</script>
-- 
2.45.3


From 1e0802acdae2db6377e97823f10cfe95ca19c17c Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 19 Mar 2025 15:18:58 +0100
Subject: [PATCH 3/4] execute printing and display

---
 src/stores/admin/club/listprint.ts           | 40 +++++++++++
 src/views/admin/club/listprint/ListPrint.vue | 76 ++++++++++++++++----
 2 files changed, 103 insertions(+), 13 deletions(-)
 create mode 100644 src/stores/admin/club/listprint.ts

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";
+        });
     },
   },
 });
-- 
2.45.3


From 352aa3fcad0de7dea86a4bc9fd19c342a5195a1f Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 19 Mar 2025 15:23:20 +0100
Subject: [PATCH 4/4] mark template as system

---
 src/views/admin/club/listprint/ListPrint.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/admin/club/listprint/ListPrint.vue b/src/views/admin/club/listprint/ListPrint.vue
index 7b66e98..b193917 100644
--- a/src/views/admin/club/listprint/ListPrint.vue
+++ b/src/views/admin/club/listprint/ListPrint.vue
@@ -44,7 +44,7 @@
             <p class="min-w-16">Hauptteil:</p>
             <select id="body" value="def">
               <option value="def">Standard-Vorlage verwenden</option>
-              <option value="listprint.member">Mitgliederliste</option>
+              <option value="listprint.member">(system) Mitgliederliste</option>
               <option v-for="template in templates" :key="template.id" :value="template.id">
                 {{ template.template }}
               </option>
-- 
2.45.3