103 lines
3.6 KiB
Vue
103 lines
3.6 KiB
Vue
|
<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">
|
||
|
|
↺ 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 class="flex flex-row">
|
||
|
|
<div>
|
||
|
|
<ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print.id)" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print.id)" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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
|
||
|
|
v-if="can('create', 'club', 'newsletter')"
|
||
|
|
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 { defineAsyncComponent, defineComponent, markRaw } 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/newsletterPrintout";
|
||
|
|
import { ArrowDownTrayIcon, ViewfinderCircleIcon } from "@heroicons/vue/24/outline";
|
||
|
|
import { useModalStore } from "@/stores/modal";
|
||
|
|
import { useAbilityStore } from "@/stores/ability";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
newsletterId: String,
|
||
|
|
},
|
||
|
|
// computed: {
|
||
|
|
// ...mapState(useProtocolPrintoutStore, ["printout", "loading", "printing"]),
|
||
|
|
// ...mapState(useAbilityStore, ["can"]),
|
||
|
|
// },
|
||
|
|
// mounted() {
|
||
|
|
// this.fetchProtocolPrintout();
|
||
|
|
// },
|
||
|
|
// methods: {
|
||
|
|
// ...mapActions(useModalStore, ["openModal"]),
|
||
|
|
// ...mapActions(useProtocolPrintoutStore, [
|
||
|
|
// "fetchProtocolPrintout",
|
||
|
|
// "createProtocolPrintout",
|
||
|
|
// "fetchProtocolPrintoutById",
|
||
|
|
// ]),
|
||
|
|
// openPdfShow(id: number) {
|
||
|
|
// this.openModal(
|
||
|
|
// markRaw(defineAsyncComponent(() => import("@/components/admin/club/newsletter/ProtocolPrintoutViewerModal.vue"))),
|
||
|
|
// id
|
||
|
|
// );
|
||
|
|
// },
|
||
|
|
// downloadPdf(id: number) {
|
||
|
|
// let clickedOn = this.printout.find((p) => p.id == id);
|
||
|
|
// this.fetchProtocolPrintoutById(id)
|
||
|
|
// .then((response) => {
|
||
|
|
// const fileURL = window.URL.createObjectURL(new Blob([response.data]));
|
||
|
|
// const fileLink = document.createElement("a");
|
||
|
|
// fileLink.href = fileURL;
|
||
|
|
// fileLink.setAttribute("download", clickedOn?.title ? clickedOn.title + ".pdf" : "Protokoll.pdf");
|
||
|
|
// document.body.appendChild(fileLink);
|
||
|
|
// fileLink.click();
|
||
|
|
// fileLink.remove();
|
||
|
|
// })
|
||
|
|
// .catch(() => {});
|
||
|
|
// },
|
||
|
|
// },
|
||
|
|
});
|
||
|
|
</script>
|