List print base structure

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/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,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>