Newsletter Config

src/components/admin/settings/newsletterConfig/NewsletterConfigListItem.vue

@@ -0,0 +1,102 @@
+<template>
+  <form ref="form" class="flex flex-col h-fit w-full border border-primary rounded-md" @submit.prevent="updateUsage">
+    <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+      <p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p>
+      <div v-if="can('create','settings','newsletter_config')" class="flex flex-row justify-end w-16">
+        <button v-if="status == null" type="submit" class="!p-0 !h-fit !w-fit" title="speichern">
+          <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
+        </button>
+        <Spinner v-else-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+        <button type="button" class="!p-0 !h-fit !w-fit" title="zurücksetzen" @click="resetForm">
+          <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
+        </button>
+      </div>
+    </div>
+    <div class="flex flex-col p-2 gap-2">
+      <div class="flex flex-row gap-2 items-center">
+        <select ref="config" id="config" :value="newsletterConfig?.config ?? 'def'">
+          <option value="def">Standard (pdf nur mit Name)</option>
+          <option v-for="config in configs" :key="config" :value="config">{{ config == "pdf" ? "pdf mit Adresse":config }}</option>
+        </select>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { ArchiveBoxArrowDownIcon, ArchiveBoxXMarkIcon } from "@heroicons/vue/24/outline";
+import { useNewsletterConfigStore } from "@/stores/admin/newsletterConfig";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useModalStore } from "@/stores/modal";
+import { NewsletterConfigType } from "@/enums/newsletterConfigType";
+import type { AxiosResponse } from "axios";
+import type { CommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    comType: { type: Object as PropType<CommunicationTypeViewModel>, default: {} },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+      configs: [] as Array<string>,
+    };
+  },
+  computed:{
+    ...mapState(useNewsletterConfigStore, ["config"]),
+    ...mapState(useAbilityStore, ["can"]),
+    newsletterConfig() {
+      return this.config.find(c => c.comTypeId == this.comType.id)
+    }
+  },
+  mounted() {
+    this.configs = Object.values(NewsletterConfigType);
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useNewsletterConfigStore, ["setNewsletterConfig", "deleteNewsletterConfig"]),
+    updateUsage(e: any) {
+      const fromData = e.target.elements;
+      const config = fromData.config.value === "def" ? null : fromData.config.value;
+
+      this.status = "loading"
+      let request: Promise<AxiosResponse<any, any>>
+      if(config){
+        request = this.setNewsletterConfig({
+          comTypeId: this.comType.id,
+          config: config
+        })
+      } else {
+        request = this.deleteNewsletterConfig(this.comType.id)
+      }
+      request.then(() => {
+        this.status = { status: "success" };
+        this.timeout = setTimeout(() => {
+          this.status = null;
+        }, 2000);
+      })
+      .catch(() => {
+        this.status = { status: "failed" };
+      });
+    },
+    resetForm() {
+      (this.$refs.config as HTMLSelectElement).value = String(this.newsletterConfig?.config ?? "def");
+    },
+  },
+});
+</script>

src/components/admin/settings/templateUsage/TemplatePreviewModal.vue

@@ -42,7 +42,7 @@ export default defineComponent({
           (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
         })
         .catch(() => {
-          this.status = { status: "success" };
+          this.status = { status: "failed" };
         });
     },
   },

src/components/admin/settings/templateUsage/TemplateUsageListItem.vue

@@ -6,13 +6,13 @@
         <button type="button" class="!p-0 !h-fit !w-fit" title="Vorschau erzeugen" @click="previewUsage">
           <EyeIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
-        <button v-if="status == null" type="submit" class="!p-0 !h-fit !w-fit" title="speichern">
+        <button v-if="status == null && can('create','settings','newsletter_config')" type="submit" class="!p-0 !h-fit !w-fit" title="speichern">
           <ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
         <Spinner v-else-if="status == 'loading'" class="my-auto" />
         <SuccessCheckmark v-else-if="status?.status == 'success'" />
         <FailureXMark v-else-if="status?.status == 'failed'" />
-        <button type="button" class="!p-0 !h-fit !w-fit" title="zurücksetzen" @click="resetForm">
+        <button type="button" v-if="can('create','settings','newsletter_config')" class="!p-0 !h-fit !w-fit" title="zurücksetzen" @click="resetForm">
           <ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
         </button>
       </div>
@@ -21,21 +21,21 @@
       <div class="flex flex-row gap-2 items-center">
         <p class="min-w-16">Kopfzeile:</p>
         <select ref="header" id="header" :value="templateUsage.header?.id ?? 'def'">
-          <option value="def">Standart-Vorlage verwenden</option>
+          <option value="def">Standard-Vorlage verwenden</option>
           <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
         </select>
       </div>
       <div class="flex flex-row gap-2 items-center">
         <p class="min-w-16">Hauptteil:</p>
         <select ref="body" id="body" :value="templateUsage.body?.id ?? 'def'">
-          <option value="def">Standart-Vorlage verwenden</option>
+          <option value="def">Standard-Vorlage verwenden</option>
           <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
         </select>
       </div>
       <div class="flex flex-row gap-2 items-center">
         <p class="min-w-16">Fußzeile:</p>
         <select ref="footer" id="footer" :value="templateUsage.footer?.id ?? 'def'">
-          <option value="def">Standart-Vorlage verwenden</option>
+          <option value="def">Standard-Vorlage verwenden</option>
           <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
         </select>
       </div>
@@ -54,6 +54,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
 </script>
 
 <script lang="ts">
@@ -69,6 +70,7 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useTemplateStore, ["templates"]),
+    ...mapState(useAbilityStore, ["can"]),
   },
   beforeUnmount() {
     try {
@@ -104,7 +106,7 @@ export default defineComponent({
           }, 2000);
         })
         .catch(() => {
-          this.status = { status: "success" };
+          this.status = { status: "failed" };
         });
     },
     resetForm() {

src/enums/newsletterConfigType.ts

@@ -0,0 +1,4 @@
+export enum NewsletterConfigType {
+  pdf = "pdf",
+  mail = "mail",
+}

src/router/index.ts

@@ -441,7 +441,7 @@ const router = createRouter({
             {
               path: "newsletter-config",
               name: "admin-settings-newsletter_config",
-              component: () => import("@/views/admin/ViewSelect.vue"),
+              component: () => import("@/views/admin/settings/newsletterConfig/NewsletterConfig.vue"),
               meta: { type: "read", section: "settings", module: "newsletter_config" },
               beforeEnter: [abilityAndNavUpdate],
             },

src/stores/admin/newsletterConfig.ts

@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+import type {
+  SetNewsletterConfigViewModel,
+  NewsletterConfigViewModel,
+} from "@/viewmodels/admin/newsletterConfig.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useNewsletterConfigStore = defineStore("newsletterConfi", {
+  state: () => {
+    return {
+      config: [] as Array<NewsletterConfigViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchNewsletterConfigs() {
+      this.loading = "loading";
+      http
+        .get("/admin/newsletterconfig")
+        .then((result) => {
+          this.config = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchNewsletterConfigById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/newsletterconfig/${id}`);
+    },
+    async setNewsletterConfig(setConfig: SetNewsletterConfigViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.put(`/admin/newsletterconfig`, {
+        comTypeId: setConfig.comTypeId,
+        config: setConfig.config,
+      });
+      this.fetchNewsletterConfigs();
+      return result;
+    },
+    async deleteNewsletterConfig(newsletterConfigStore: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/newsletterconfig/${newsletterConfigStore}`);
+      this.fetchNewsletterConfigs();
+      return result;
+    },
+  },
+});

src/viewmodels/admin/newsletterConfig.models.ts

@@ -0,0 +1,13 @@
+import type { NewsletterConfigType } from "../../enums/newsletterConfigType";
+import type { CommunicationTypeViewModel } from "./communicationType.models";
+
+export interface NewsletterConfigViewModel {
+  comTypeId: number;
+  config: NewsletterConfigType;
+  comType: CommunicationTypeViewModel;
+}
+
+export interface SetNewsletterConfigViewModel {
+  comTypeId: number;
+  config: NewsletterConfigType;
+}

src/views/admin/settings/newsletterConfig/NewsletterConfig.vue

@@ -0,0 +1,46 @@
+<template>
+  <MainTemplate>
+    <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">Newsletter Konfiguration</h1>
+      </div>
+    </template>
+    <template #main>
+      <p>
+        Ein Newsletter kann als pdf exportiert oder per Mail versandt werden. <br>
+        Die Entscheidung für den Export geschieht anhand der Einstellung "Newsletter hier hin versenden?". <br>
+        Wird keine Adresse gefunden oder sind die Typen mit den falschen Versandoptionen konfiguriert, 
+        erstellt das System als Fallback pdfs mit nur dem Namen des Mitglieds.
+      </p>
+      <NewsletterConfigListItem v-for="comType in communicationTypes" :key="comType.id" :comType="comType" />
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import {  defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useAbilityStore } from "@/stores/ability";
+import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
+import { useNewsletterConfigStore } from "../../../../stores/admin/newsletterConfig";
+import NewsletterConfigListItem from "../../../../components/admin/settings/newsletterConfig/NewsletterConfigListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useCommunicationTypeStore, ["communicationTypes"]),
+    ...mapState(useNewsletterConfigStore,["config"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchCommunicationTypes();
+    this.fetchNewsletterConfigs()
+  },
+  methods: {
+    ...mapActions(useCommunicationTypeStore, ["fetchCommunicationTypes"]),
+    ...mapActions(useNewsletterConfigStore, ["fetchNewsletterConfigs"])
+  },
+});
+</script>