src/stores/admin/protocol.ts

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

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

@@ -6,6 +6,7 @@
     <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="
@@ -53,6 +54,7 @@ import { RouterLink, RouterView } from "vue-router";
 import { useProtocolStore } from "@/stores/admin/protocol";
 import { useModalStore } from "@/stores/modal";
 import ProtocolSyncing from "@/components/admin/club/protocol/ProtocolSyncing.vue";
+import { PrinterIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -100,7 +102,7 @@ export default defineComponent({
   //   }
   // },
   methods: {
-    ...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
+    ...mapActions(useProtocolStore, ["fetchProtocolByActiveId", "printProtocol"]),
     ...mapActions(useModalStore, ["openModal"]),
     openInfoModal() {
       this.openModal(