send or print newsletter preview
This commit is contained in:
parent
81b7f533c7
commit
080b6a2b78
8 changed files with 322 additions and 58 deletions
|
|
@ -0,0 +1,57 @@
|
|||
<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>
|
||||
|
||||
<button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
|
||||
</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 { useNewsletterPrintoutStore } from "@/stores/admin/newsletterPrintout";
|
||||
</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(useNewsletterPrintoutStore, ["fetchNewsletterPrintoutPreview", "fetchNewsletterPrintoutById"]),
|
||||
fetchItem() {
|
||||
this.status = "loading";
|
||||
let query: Promise<AxiosResponse<any, any>>;
|
||||
if (this.data) {
|
||||
query = this.fetchNewsletterPrintoutById(this.data);
|
||||
} else {
|
||||
query = this.fetchNewsletterPrintoutPreview();
|
||||
}
|
||||
query
|
||||
.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);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
export const toolbarOptions = [
|
||||
[/*{ header: [1, 2, false] },*/ { font: [] }],
|
||||
[{ header: [1, 2, 3, 4, false] }, { font: [] }],
|
||||
//[{ header: 1 }, { header: 2 }],
|
||||
["bold", "italic", "underline", "strike"],
|
||||
["blockquote", "code-block", "link"],
|
||||
|
|
|
|||
|
|
@ -199,6 +199,12 @@ const router = createRouter({
|
|||
component: () => import("@/views/admin/club/newsletter/NewsletterOverview.vue"),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "data",
|
||||
name: "admin-club-newsletter-data",
|
||||
component: () => import("@/views/admin/club/newsletter/NewsletterData.vue"),
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "recipients",
|
||||
name: "admin-club-newsletter-recipients",
|
||||
|
|
|
|||
98
src/stores/admin/newsletterPrintout.ts
Normal file
98
src/stores/admin/newsletterPrintout.ts
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { http } from "@/serverCom";
|
||||
import { useNewsletterStore } from "./newsletter";
|
||||
import type { AxiosResponse } from "axios";
|
||||
|
||||
export const useNewsletterPrintoutStore = defineStore("newsletterPrintout", {
|
||||
state: () => {
|
||||
return {
|
||||
printout: [] as Array<string>,
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
printing: undefined as undefined | "loading" | "success" | "failed",
|
||||
sending: undefined as undefined | "loading" | "success" | "failed",
|
||||
sendingPreview: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
fetchNewsletterPrintout() {
|
||||
const newsletterId = useNewsletterStore().activeNewsletter;
|
||||
this.loading = "loading";
|
||||
http
|
||||
.get(`/admin/newsletter/${newsletterId}/printouts`)
|
||||
.then((result) => {
|
||||
this.printout = result.data;
|
||||
this.loading = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading = "failed";
|
||||
});
|
||||
},
|
||||
fetchNewsletterPrintoutById(printout: string): Promise<AxiosResponse<any, any>> {
|
||||
const newsletterId = useNewsletterStore().activeNewsletter;
|
||||
return http.get(`/admin/newsletter/${newsletterId}/printout/${printout}`, {
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
fetchNewsletterPrintoutPreview(): Promise<AxiosResponse<any, any>> {
|
||||
const newsletterId = useNewsletterStore().activeNewsletter;
|
||||
return http.get(`/admin/newsletter/${newsletterId}/printoutpreview`, {
|
||||
responseType: "blob",
|
||||
});
|
||||
},
|
||||
createNewsletterMailPreview() {
|
||||
this.sendingPreview = "loading";
|
||||
const newsletterId = useNewsletterStore().activeNewsletter;
|
||||
if (newsletterId == null) return;
|
||||
return http
|
||||
.post(`/admin/newsletter/${newsletterId}/mailpreview`)
|
||||
.then((res) => {
|
||||
this.sendingPreview = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.sendingPreview = "failed";
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.sendingPreview = undefined;
|
||||
}, 1500);
|
||||
});
|
||||
},
|
||||
createNewsletterPrintout() {
|
||||
this.printing = "loading";
|
||||
const newsletterId = useNewsletterStore().activeNewsletter;
|
||||
if (newsletterId == null) return;
|
||||
return http
|
||||
.post(`/admin/newsletter/${newsletterId}/printout`)
|
||||
.then((res) => {
|
||||
this.fetchNewsletterPrintout();
|
||||
this.printing = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.printing = "failed";
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.printing = undefined;
|
||||
}, 1500);
|
||||
});
|
||||
},
|
||||
createNewsletterSend() {
|
||||
this.sending = "loading";
|
||||
const newsletterId = useNewsletterStore().activeNewsletter;
|
||||
if (newsletterId == null) return;
|
||||
return http
|
||||
.post(`/admin/newsletter/${newsletterId}/send`)
|
||||
.then((res) => {
|
||||
this.sending = "success";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.sending = "failed";
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
this.sending = undefined;
|
||||
}, 1500);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
71
src/views/admin/club/newsletter/NewsletterData.vue
Normal file
71
src/views/admin/club/newsletter/NewsletterData.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="activeNewsletterObj != null" class="flex flex-col gap-2 w-full">
|
||||
<div class="w-full">
|
||||
<label for="title">Überschrift</label>
|
||||
<QuillEditor
|
||||
id="summary"
|
||||
theme="snow"
|
||||
placeholder="Überschrift des Newsletters..."
|
||||
style="height: 150px; max-height: 150px; min-height: 150px"
|
||||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="activeNewsletterObj.newsletterTitle"
|
||||
:enable="can('create', 'club', 'newsletter')"
|
||||
:style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col h-1/2">
|
||||
<label for="summary">Text</label>
|
||||
<QuillEditor
|
||||
id="summary"
|
||||
theme="snow"
|
||||
placeholder="Text zum Newsletter..."
|
||||
style="height: 150px; max-height: 150px; min-height: 150px"
|
||||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="activeNewsletterObj.newsletterText"
|
||||
:enable="can('create', 'club', 'newsletter')"
|
||||
:style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col h-1/2">
|
||||
<label for="summary">Signatur</label>
|
||||
<QuillEditor
|
||||
id="summary"
|
||||
theme="snow"
|
||||
placeholder="Zusammenfassung zum Newsletter..."
|
||||
style="height: 150px; max-height: 150px; min-height: 150px"
|
||||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="activeNewsletterObj.newsletterSignatur"
|
||||
:enable="can('create', 'club', 'newsletter')"
|
||||
:style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import { useNewsletterStore } from "@/stores/admin/newsletter";
|
||||
import { QuillEditor } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { toolbarOptions } from "@/helpers/quillConfig";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
newsletterId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(useNewsletterStore, ["loadingActive", "activeNewsletterObj"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="activeNewsletterObj != null" class="flex flex-col gap-2 w-full">
|
||||
<p class="italic">
|
||||
Titel und Zusammenfassung werden standardmäßig nicht im Newsletter angezeit, können aber bei Verwendung eines
|
||||
eigenen Templates verwendet werden.
|
||||
</p>
|
||||
<div class="w-full">
|
||||
<label for="title">Titel</label>
|
||||
<input
|
||||
|
|
|
|||
|
|
@ -1,49 +1,68 @@
|
|||
<template>
|
||||
<!-- <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<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">
|
||||
<p v-else-if="loading == 'failed'" @click="fetchNewsletterPrintout" 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 v-for="print in printout" :key="print" 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>
|
||||
<p>{{ print }}</p>
|
||||
<div class="flex flex-row">
|
||||
<div>
|
||||
<ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print.id)" />
|
||||
<ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print)" />
|
||||
</div>
|
||||
<div>
|
||||
<ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print.id)" />
|
||||
<ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print)" />
|
||||
</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">
|
||||
<div class="flex flex-row flex-wrap justify-start gap-2">
|
||||
<button
|
||||
v-if="can('create', 'club', 'newsletter')"
|
||||
primary
|
||||
class="!w-fit"
|
||||
:disabled="printing != undefined"
|
||||
@click="createProtocolPrintout"
|
||||
@click="createNewsletterPrintout"
|
||||
>
|
||||
Ausdruck erstellen
|
||||
</button>
|
||||
Newsletter drucken
|
||||
<Spinner v-if="printing == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="printing == 'success'" />
|
||||
<FailureXMark v-else-if="printing == 'failed'" />
|
||||
</button>
|
||||
<button
|
||||
v-if="can('create', 'club', 'newsletter')"
|
||||
primary
|
||||
class="!w-fit"
|
||||
:disabled="sending != undefined"
|
||||
@click="createNewsletterSend"
|
||||
>
|
||||
Mails versenden
|
||||
<Spinner v-if="sending == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="sending == 'success'" />
|
||||
<FailureXMark v-else-if="sending == 'failed'" />
|
||||
</button>
|
||||
<button v-if="can('create', 'club', 'newsletter')" primary-outline class="!w-fit" @click="openPdfShow()">
|
||||
Newsletter Vorschau
|
||||
</button>
|
||||
<button
|
||||
v-if="can('create', 'club', 'newsletter')"
|
||||
primary-outline
|
||||
class="!w-fit"
|
||||
:disabled="sendingPreview != undefined"
|
||||
@click="createNewsletterMailPreview"
|
||||
>
|
||||
Mail Vorschau
|
||||
<Spinner v-if="sendingPreview == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="sendingPreview == 'success'" />
|
||||
<FailureXMark v-else-if="sendingPreview == 'failed'" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -52,10 +71,11 @@ 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 { useNewsletterPrintoutStore } from "@/stores/admin/newsletterPrintout";
|
||||
import { ArrowDownTrayIcon, ViewfinderCircleIcon } from "@heroicons/vue/24/outline";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useNewsletterPrintoutStore } from "../../../../stores/admin/newsletterPrintout";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -63,40 +83,41 @@ 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(() => {});
|
||||
// },
|
||||
// },
|
||||
computed: {
|
||||
...mapState(useNewsletterPrintoutStore, ["printout", "loading", "printing", "sending", "sendingPreview"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchNewsletterPrintout();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
...mapActions(useNewsletterPrintoutStore, [
|
||||
"fetchNewsletterPrintout",
|
||||
"createNewsletterPrintout",
|
||||
"fetchNewsletterPrintoutById",
|
||||
"createNewsletterMailPreview",
|
||||
"createNewsletterSend",
|
||||
]),
|
||||
openPdfShow(filename?: string) {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/newsletter/NewsletterPreviewModal.vue"))),
|
||||
filename
|
||||
);
|
||||
},
|
||||
downloadPdf(filename: string) {
|
||||
this.fetchNewsletterPrintoutById(filename)
|
||||
.then((response) => {
|
||||
const fileURL = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const fileLink = document.createElement("a");
|
||||
fileLink.href = fileURL;
|
||||
fileLink.setAttribute("download", filename + ".pdf");
|
||||
document.body.appendChild(fileLink);
|
||||
fileLink.click();
|
||||
fileLink.remove();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ import { useNewsletterStore } from "@/stores/admin/newsletter";
|
|||
import { useModalStore } from "@/stores/modal";
|
||||
import NewsletterSyncing from "@/components/admin/club/newsletter/NewsletterSyncing.vue";
|
||||
import { PrinterIcon } from "@heroicons/vue/24/outline";
|
||||
import { useNewsletterDatesStore } from "../../../../stores/admin/newsletterDates";
|
||||
import { useNewsletterRecipientsStore } from "../../../../stores/admin/newsletterRecipients";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -72,6 +74,7 @@ export default defineComponent({
|
|||
return {
|
||||
tabs: [
|
||||
{ route: "admin-club-newsletter-overview", title: "Übersicht" },
|
||||
{ route: "admin-club-newsletter-data", title: "Daten" },
|
||||
{ route: "admin-club-newsletter-dates", title: "Termine" },
|
||||
{ route: "admin-club-newsletter-recipients", title: "Empfänger" },
|
||||
{ route: "admin-club-newsletter-printout", title: "Druck/Versand" },
|
||||
|
|
@ -86,6 +89,8 @@ export default defineComponent({
|
|||
},
|
||||
mounted() {
|
||||
this.fetchNewsletterByActiveId();
|
||||
this.fetchNewsletterDates();
|
||||
this.fetchNewsletterRecipients();
|
||||
},
|
||||
// this.syncState is undefined, so it will never work
|
||||
// beforeRouteLeave(to, from, next) {
|
||||
|
|
@ -106,6 +111,8 @@ export default defineComponent({
|
|||
// },
|
||||
methods: {
|
||||
...mapActions(useNewsletterStore, ["fetchNewsletterByActiveId"]),
|
||||
...mapActions(useNewsletterDatesStore, ["fetchNewsletterDates"]),
|
||||
...mapActions(useNewsletterRecipientsStore, ["fetchNewsletterRecipients"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openInfoModal() {
|
||||
this.openModal(
|
||||
|
|
|
|||
Loading…
Reference in a new issue