printout page

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(