#27 Attendance list with all members

src/components/Notification.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed right-0 flex flex-col gap-4 p-2 w-full md:w-80"
+    class="fixed right-0 flex flex-col gap-4 p-2 w-full md:w-80 z-50"
     :class="position == 'bottom' ? 'bottom-0' : 'top-0'"
   >
     <TransitionGroup

src/components/admin/club/member/MemberNameListModal.vue

@@ -0,0 +1,60 @@
+<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>

src/stores/admin/club/member/member.ts

@@ -84,5 +84,10 @@ export const useMemberStore = defineStore("member", {
       this.fetchMembers();
       return result;
     },
+    async printMemberList(){
+      return http.get(`/admin/member/print/namelist`, {
+        responseType: "blob",
+      });
+    }
   },
 });

src/views/admin/club/members/Member.vue

@@ -3,6 +3,9 @@
     <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>
@@ -40,6 +43,7 @@ import { useModalStore } from "@/stores/modal";
 import Pagination from "@/components/Pagination.vue";
 import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
 import { useAbilityStore } from "@/stores/ability";
+import { DocumentTextIcon, PencilIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -65,6 +69,11 @@ 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>