printout page

src/router/index.ts

@@ -197,6 +197,12 @@ const router = createRouter({
                       component: () => import("@/views/admin/club/protocol/ProtocolAgenda.vue"),
                       props: true,
                     },
+                    {
+                      path: "printout",
+                      name: "admin-club-protocol-printout",
+                      component: () => import("@/views/admin/club/protocol/ProtocolPrintout.vue"),
+                      props: true,
+                    },
                   ],
                 },
               ],

src/router/protocolGuard.ts

@@ -3,6 +3,7 @@ import { useProtocolAgendaStore } from "@/stores/admin/protocolAgenda";
 import { useProtocolDecisionStore } from "@/stores/admin/protocolDecision";
 import { useProtocolPresenceStore } from "@/stores/admin/protocolPresence";
 import { useProtocolVotingStore } from "@/stores/admin/protocolVoting";
+import { useProtocolPrintoutStore } from "../stores/admin/protocolPrintout";
 
 export async function setProtocolId(to: any, from: any, next: any) {
   const protocol = useProtocolStore();
@@ -12,6 +13,7 @@ export async function setProtocolId(to: any, from: any, next: any) {
   useProtocolDecisionStore().$reset();
   useProtocolPresenceStore().$reset();
   useProtocolVotingStore().$reset();
+  useProtocolPrintoutStore().$reset();
 
   next();
 }
@@ -25,6 +27,7 @@ export async function resetProtocolStores(to: any, from: any, next: any) {
   useProtocolDecisionStore().$reset();
   useProtocolPresenceStore().$reset();
   useProtocolVotingStore().$reset();
+  useProtocolPrintoutStore().$reset();
 
   next();
 }

src/stores/admin/protocol.ts

@@ -100,11 +100,5 @@ export const useProtocolStore = defineStore("protocol", {
         })
         .catch((err) => {});
     },
-    printProtocol() {
-      return http
-        .post(`/admin/protocol/${this.activeProtocol}/render`)
-        .then(() => {})
-        .catch(() => {});
-    },
   },
 });

src/stores/admin/protocolPrintout.ts

@@ -0,0 +1,60 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { ProtocolPrintoutViewModel } from "../../viewmodels/admin/protocolPrintout.models";
+import { useProtocolStore } from "./protocol";
+
+export const useProtocolPrintoutStore = defineStore("protocolPrintout", {
+  state: () => {
+    return {
+      printout: [] as Array<ProtocolPrintoutViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      printing: undefined as undefined | "loading" | "success" | "failed",
+    };
+  },
+  actions: {
+    fetchProtocolPrintout() {
+      const protocolId = useProtocolStore().activeProtocol;
+      this.loading = "loading";
+      http
+        .get(`/admin/protocol/${protocolId}/printouts`)
+        .then((result) => {
+          this.printout = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchProtocolPrintoutById(printoutId: string) {
+      const protocolId = useProtocolStore().activeProtocol;
+      this.loading = "loading";
+      http
+        .get(`/admin/protocol/${protocolId}/printout/${printoutId}`)
+        .then((result) => {
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    createProtocolPrintout() {
+      this.printing = "loading";
+      const protocolId = useProtocolStore().activeProtocol;
+      if (protocolId == null) return;
+      return http
+        .post(`/admin/protocol/${protocolId}/printout`)
+        .then((res) => {
+          this.fetchProtocolPrintout();
+          this.printing = "success";
+        })
+        .catch((err) => {
+          this.printing = "failed";
+        })
+        .finally(() => {
+          setTimeout(() => {
+            this.printing = undefined;
+          }, 1500);
+        });
+    },
+  },
+});

src/viewmodels/admin/protocolPrintout.models.ts

@@ -0,0 +1,7 @@
+export interface ProtocolPrintoutViewModel {
+  id: number;
+  title: string;
+  iteration: number;
+  createdAt: Date;
+  protocolId: number;
+}

src/views/admin/club/protocol/ProtocolPrintout.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <Spinner v-if="loading == 'loading'" class="mx-auto" />
+    <p v-else-if="loading == 'failed'" @click="fetchProtocolPrintout" class="cursor-pointer">
+      &#8634; laden fehlgeschlagen
+    </p>
+
+    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+      <div
+        v-for="print in printout"
+        :key="print.id"
+        class="flex flex-col h-fit w-full border border-primary rounded-md"
+      >
+        <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+          <p>{{ print.title }}</p>
+        </div>
+        <div class="p-2">
+          <p>Ausdruck Nummer: {{ print.iteration }}</p>
+          <p>Ausdruck erstellt: {{ print.createdAt }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-start gap-2">
+      <button primary class="!w-fit" :disabled="printing != undefined" @click="createProtocolPrintout">
+        Ausdruck erstellen
+      </button>
+      <Spinner v-if="printing == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="printing == 'success'" />
+      <FailureXMark v-else-if="printing == 'failed'" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useProtocolPrintoutStore } from "@/stores/admin/protocolPrintout";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    protocolId: String,
+  },
+  computed: {
+    ...mapState(useProtocolPrintoutStore, ["printout", "loading", "printing"]),
+  },
+  mounted() {
+    this.fetchProtocolPrintout();
+  },
+  methods: {
+    ...mapActions(useProtocolPrintoutStore, ["fetchProtocolPrintout", "createProtocolPrintout"]),
+  },
+});
+</script>

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -6,7 +6,6 @@
     <template #topBar>
       <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
-        <PrinterIcon class="w-5 h-5" @click="printProtocol" />
         <ProtocolSyncing
           :executeSyncAll="executeSyncAll"
           @syncState="
@@ -78,6 +77,7 @@ export default defineComponent({
         { route: "admin-club-protocol-voting", title: "Abstimmungen" },
         { route: "admin-club-protocol-decisions", title: "Beschlüsse" },
         { route: "admin-club-protocol-agenda", title: "Protokoll" },
+        { route: "admin-club-protocol-printout", title: "Druck" },
       ],
       wantToClose: false as boolean,
       executeSyncAll: undefined as any,
@@ -102,7 +102,7 @@ export default defineComponent({
   //   }
   // },
   methods: {
-    ...mapActions(useProtocolStore, ["fetchProtocolByActiveId", "printProtocol"]),
+    ...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
     ...mapActions(useModalStore, ["openModal"]),
     openInfoModal() {
       this.openModal(