Merge pull request '#15-messages' (#22) from #15-messages into main

Reviewed-on: Ehrenamt/member-administration-ui#22

src/components/UserMenu.vue

@@ -21,7 +21,7 @@
         </div>
         <div class="px-1 py-1 w-full flex flex-col gap-2">
           <MenuItem v-slot="{ close }">
-            <RouterLink to="/account">
+            <RouterLink to="/account/me">
               <button button primary @click="close">Mein Account</button>
             </RouterLink>
           </MenuItem>

src/components/admin/club/calendar/CalendarLinkModal.vue

@@ -72,6 +72,14 @@
       </p>
       <br />
       <TextCopy :copyText="generatedLink" />
+      <div v-if="selectedTypes.length != 0" class="flex flex-row gap-2 items-center">
+        <input
+          type="checkbox"
+          id="nscdr"
+          v-model="provideNSCDR"
+        />
+        <label for="nscdr">Standard-Typen trotz Auswahl ausliefern</label>
+      </div>
       <br />
     </div>
 
@@ -111,6 +119,7 @@ export default defineComponent({
   data() {
     return {
       selectedTypes: [] as Array<CalendarTypeViewModel>,
+      provideNSCDR: false as boolean
     };
   },
   computed: {
@@ -124,7 +133,7 @@ export default defineComponent({
     },
     generatedLink() {
       let extend = this.selectedTypes.map((t) => [t.type, t.passphrase].filter((at) => at).join(":"));
-      return `webcal://${host || window.location.host}/api/public/calendar${extend.length == 0 ? "" : "?types=" + extend.join("&types=")}`;
+      return `webcal://${host || window.location.host}/api/public/calendar${extend.length == 0 ? "" : "?types=" + extend.join("&types=")}${this.provideNSCDR && extend.length != 0 ? '&nscdr=true':''}`;
     },
   },
   mounted() {

src/components/admin/club/newsletter/CreateNewsletterModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Newsletter erstellen</p>
+    </div>
+    <br />
+    <form ref="form" class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" required autocomplete="false" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </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 SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useProtocolStore } from "@/stores/admin/protocol";
+import type { CreateProtocolViewModel } from "@/viewmodels/admin/protocol.models";
+import { useNewsletterStore } from "../../../../stores/admin/newsletter";
+import type { CreateNewsletterViewModel } from "../../../../viewmodels/admin/newsletter.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useNewsletterStore, ["createNewsletter"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createNewsletter: CreateNewsletterViewModel = {
+        title: formData.title.value,
+      };
+      this.createNewsletter(createNewsletter)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            (this.$refs.form as HTMLFormElement).reset();
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/club/newsletter/CurrentlySyncingModal.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Newsletter wird noch synchronisiert</p>
+    </div>
+    <br />
+
+    <p>Es gibt noch Daten, welche synchronisiert werden müssen.</p>
+    <p>Dieses PopUp entfernt sich von selbst nach erfolgreicher Synchronisierung.</p>
+  </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 SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useProtocolStore } from "@/stores/admin/protocol";
+import type { CreateProtocolViewModel } from "@/viewmodels/admin/protocol.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({});
+</script>

src/components/admin/club/newsletter/NewsletterListItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <RouterLink
+      :to="{ name: 'admin-club-newsletter-overview', params: { newsletterId: newsletter.id } }"
+      class="bg-primary p-2 text-white flex flex-row justify-between items-center"
+    >
+      <p>{{ newsletter.title }}</p>
+      <PaperAirplaneIcon v-if="newsletter.isSent" class="w-5 h-5" />
+    </RouterLink>
+    <div class="p-2 max-h-48 overflow-y-auto">
+      <p v-html="newsletter.description"></p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { NewsletterViewModel } from "@/viewmodels/admin/newsletter.models";
+import { PaperAirplaneIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    newsletter: { type: Object as PropType<NewsletterViewModel>, default: {} },
+  },
+});
+</script>

src/components/admin/club/newsletter/NewsletterPreviewModal.vue

@@ -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>

src/components/admin/club/newsletter/NewsletterSyncing.vue

@@ -0,0 +1,123 @@
+<template>
+  <CloudIcon v-if="syncing == 'synced'" class="w-5 h-5" />
+  <CloudArrowUpIcon
+    v-else-if="syncing == 'detectedChanges'"
+    class="w-5 h-5 cursor-pointer animate-bounce"
+    @click="syncAll"
+  />
+  <ArrowPathIcon v-else-if="syncing == 'syncing'" class="w-5 h-5 animate-spin" />
+  <ExclamationTriangleIcon
+    v-else
+    class="w-5 h-5 animate-[ping_1s_ease-in-out_3] text-red-500 cursor-pointer"
+    @click="syncAll"
+  />
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useNewsletterStore } from "@/stores/admin/newsletter";
+import { ArrowPathIcon, CloudArrowUpIcon, CloudIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
+import { useNewsletterDatesStore } from "@/stores/admin/newsletterDates";
+import { useNewsletterRecipientsStore } from "@/stores/admin/newsletterRecipients";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: ["executeSyncAll"],
+  watch: {
+    executeSyncAll() {
+      this.syncAll();
+    },
+    syncing() {
+      this.$emit("syncState", this.syncing);
+    },
+    detectedChangeNewsletter() {
+      clearTimeout(this.newsletterTimer);
+      this.setNewsletterSyncingState("synced");
+      if (this.detectedChangeNewsletter == false) {
+        return;
+      }
+      this.setNewsletterSyncingState("detectedChanges");
+      this.newsletterTimer = setTimeout(() => {
+        this.synchronizeActiveNewsletter();
+      }, 10000);
+    },
+    detectedChangeNewsletterDates() {
+      clearTimeout(this.newsletterDatesTimer);
+      if (this.detectedChangeNewsletterDates == false) {
+        this.setNewsletterDatesSyncingState("synced");
+        return;
+      }
+      this.setNewsletterDatesSyncingState("detectedChanges");
+      this.newsletterDatesTimer = setTimeout(() => {
+        this.synchronizeActiveNewsletterDates();
+      }, 10000);
+    },
+    detectedChangeNewsletterRecipients() {
+      clearTimeout(this.newsletterRecipientsTimer);
+      this.setNewsletterRecipientsSyncingState("synced");
+      if (this.detectedChangeNewsletterRecipients == false) {
+        return;
+      }
+      this.setNewsletterRecipientsSyncingState("detectedChanges");
+      this.newsletterRecipientsTimer = setTimeout(() => {
+        this.synchronizeActiveNewsletterRecipients();
+      }, 10000);
+    },
+  },
+  emits: {
+    syncState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      return typeof state == "string";
+    },
+  },
+  data() {
+    return {
+      newsletterTimer: undefined as undefined | any,
+      newsletterDatesTimer: undefined as undefined | any,
+      newsletterRecipientsTimer: undefined as undefined | any,
+    };
+  },
+  mounted() {
+    this.$emit("syncState", this.syncing);
+  },
+  beforeUnmount() {
+    if (!this.newsletterTimer) clearTimeout(this.newsletterTimer);
+    if (!this.newsletterDatesTimer) clearTimeout(this.newsletterDatesTimer);
+    if (!this.newsletterRecipientsTimer) clearTimeout(this.newsletterRecipientsTimer);
+  },
+  computed: {
+    ...mapState(useNewsletterStore, ["syncingNewsletter", "detectedChangeNewsletter"]),
+    ...mapState(useNewsletterDatesStore, ["syncingNewsletterDates", "detectedChangeNewsletterDates"]),
+    ...mapState(useNewsletterRecipientsStore, ["syncingNewsletterRecipients", "detectedChangeNewsletterRecipients"]),
+
+    syncing(): "synced" | "syncing" | "detectedChanges" | "failed" {
+      let states = [
+        this.syncingNewsletter,
+        this.syncingNewsletterDates,
+        this.syncingNewsletterRecipients,
+      ];
+
+      if (states.includes("failed")) return "failed";
+      else if (states.includes("syncing")) return "syncing";
+      else if (states.includes("detectedChanges")) return "detectedChanges";
+      else return "synced";
+    },
+  },
+  methods: {
+    ...mapActions(useNewsletterStore, ["synchronizeActiveNewsletter", "setNewsletterSyncingState"]),
+    ...mapActions(useNewsletterDatesStore, ["synchronizeActiveNewsletterDates", "setNewsletterDatesSyncingState"]),
+    ...mapActions(useNewsletterRecipientsStore, ["synchronizeActiveNewsletterRecipients", "setNewsletterRecipientsSyncingState"]),
+
+    syncAll() {
+      if (!this.newsletterTimer) clearTimeout(this.newsletterTimer);
+      if (!this.newsletterDatesTimer) clearTimeout(this.newsletterDatesTimer);
+      if (!this.newsletterRecipientsTimer) clearTimeout(this.newsletterRecipientsTimer);
+
+      this.synchronizeActiveNewsletter();
+      this.synchronizeActiveNewsletterDates();
+      this.synchronizeActiveNewsletterRecipients();
+    },
+  },
+});
+</script>

src/components/admin/club/protocol/ProtocolListItem.vue

@@ -15,7 +15,7 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapState, mapActions } from "pinia";
-import type { ProtocolViewModel } from "../../../../viewmodels/admin/protocol.models";
+import type { ProtocolViewModel } from "@/viewmodels/admin/protocol.models";
 </script>
 
 <script lang="ts">

src/components/admin/club/protocol/ProtocolSyncing.vue

@@ -20,8 +20,8 @@ import { useProtocolStore } from "@/stores/admin/protocol";
 import { ArrowPathIcon, CloudArrowUpIcon, CloudIcon, ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
 import { useProtocolAgendaStore } from "@/stores/admin/protocolAgenda";
 import { useProtocolPresenceStore } from "@/stores/admin/protocolPresence";
-import { useProtocolDecisionStore } from "../../../../stores/admin/protocolDecision";
-import { useProtocolVotingStore } from "../../../../stores/admin/protocolVoting";
+import { useProtocolDecisionStore } from "@/stores/admin/protocolDecision";
+import { useProtocolVotingStore } from "@/stores/admin/protocolVoting";
 </script>
 
 <script lang="ts">

src/components/admin/settings/communicationType/CommunicationTypeListItem.vue

@@ -4,12 +4,12 @@
       <p>{{ communicationType.type }}</p>
       <div class="flex flex-row">
         <RouterLink
-          v-if="can('update', 'settings', 'communication')"
-          :to="{ name: 'admin-settings-communication-edit', params: { id: communicationType.id } }"
+          v-if="can('update', 'settings', 'communication_type')"
+          :to="{ name: 'admin-settings-communication_type-edit', params: { id: communicationType.id } }"
         >
           <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
         </RouterLink>
-        <div v-if="can('delete', 'settings', 'communication')" @click="openDeleteModal">
+        <div v-if="can('delete', 'settings', 'communication_type')" @click="openDeleteModal">
           <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
         </div>
       </div>

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/template/CreateTemplateModal.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Template erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="template">Bezeichnung</label>
+        <input type="text" id="template" required />
+      </div>
+      <div>
+        <label for="description">Beschreibung (optional)</label>
+        <input type="text" id="description" />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </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 SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useTemplateStore } from "@/stores/admin/template";
+import type { CreateTemplateViewModel } from "@/viewmodels/admin/template.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useTemplateStore, ["createTemplate"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createTemplate: CreateTemplateViewModel = {
+        template: formData.template.value,
+        description: formData.description.value,
+      };
+      this.createTemplate(createTemplate)
+        .then((res) => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+            this.$router.push({ name: "admin-settings-template-edit", params: { id: res.data } });
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/template/DeleteTemplateModal.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Auszeichnung {{ template?.template }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+      </div>
+    </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 SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useQueryStoreStore } from "@/stores/admin/queryStore";
+import { useTemplateStore } from "@/stores/admin/template";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useTemplateStore, ["templates"]),
+    template() {
+      return this.templates.find((t) => t.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useTemplateStore, ["deleteTemplate"]),
+    triggerDelete() {
+      this.deleteTemplate(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/template/TemplateListItem.vue

@@ -0,0 +1,88 @@
+<template>
+  <div 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>{{ template.template }}</p>
+      <div class="flex flex-row justify-end w-24">
+        <RouterLink
+          v-if="can('update', 'settings', 'template')"
+          :to="{ name: 'admin-settings-template-edit', params: { id: template.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>        
+        <button v-if="status == null" class="!p-0 !h-fit !w-fit" title="duplizieren" @click="cloneElement">
+          <DocumentDuplicateIcon 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'" />
+        <div v-if="can('delete', 'settings', 'template')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col p-2">
+      <div class="flex flex-row gap-2">
+        <p class="min-w-16">Beschreibung:</p>
+        <p class="grow overflow-hidden">{{ template.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon, TrashIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import type { TemplateViewModel } from "@/viewmodels/admin/template.models";
+import { useTemplateStore } from "@/stores/admin/template";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    template: { type: Object as PropType<TemplateViewModel>, default: {} },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useTemplateStore,["cloneTemplate"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/template/DeleteTemplateModal.vue"))),
+        this.template.id
+      );
+    },
+    cloneElement(){
+      this.cloneTemplate(this.template.id)
+        .then((res) => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.status = null;
+            this.$router.push({ name: "admin-settings-template-edit", params: { id: res.data } });
+          }, 2000);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    }
+  },
+});
+</script>

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

@@ -0,0 +1,50 @@
+<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 { useTemplateUsageStore } from "@/stores/admin/templateUsage";
+</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(useTemplateUsageStore, ["previewTemplateUsage"]),
+    fetchItem() {
+      this.status = "loading"
+      this.previewTemplateUsage(this.data)
+        .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>

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

@@ -0,0 +1,119 @@
+<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>Templates zu "{{ templateUsage.scope }}" zuweisen</p>
+      <div class="flex flex-row justify-end w-16">
+        <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 && 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" 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>
+    </div>
+    <div class="flex flex-col p-2 gap-2">
+      <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">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">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">Standard-Vorlage verwenden</option>
+          <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
+        </select>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { ArchiveBoxArrowDownIcon, ArchiveBoxXMarkIcon, EyeIcon } from "@heroicons/vue/24/outline";
+import type { TemplateUsageViewModel } from "@/viewmodels/admin/templateUsage.models";
+import { useTemplateStore } from "@/stores/admin/template";
+import { useTemplateUsageStore } from "@/stores/admin/templateUsage";
+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">
+export default defineComponent({
+  props: {
+    templateUsage: { type: Object as PropType<TemplateUsageViewModel>, default: {} },
+  },
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  computed: {
+    ...mapState(useTemplateStore, ["templates"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useTemplateUsageStore, ["updateTemplateUsage"]),
+    previewUsage() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/templateUsage/TemplatePreviewModal.vue"))),
+        this.templateUsage.scope
+      )
+    },
+    updateUsage(e: any) {
+      const fromData = e.target.elements;
+      const headerId = fromData.header.value === "def" ? null : fromData.header.value;
+      const bodyId = fromData.body.value === "def" ? null : fromData.body.value;
+      const footerId = fromData.footer.value === "def" ? null : fromData.footer.value;
+
+      this.status = "loading"
+      this.updateTemplateUsage({
+        scope: this.templateUsage.scope,
+        headerId: headerId,
+        bodyId: bodyId,
+        footerId: footerId,
+      })
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+    resetForm() {
+      (this.$refs.header as HTMLSelectElement).value = String(this.templateUsage.header?.id ?? "def");
+      (this.$refs.body as HTMLSelectElement).value = String(this.templateUsage.body?.id ?? "def");
+      (this.$refs.footer as HTMLSelectElement).value = String(this.templateUsage.footer?.id ?? "def");
+    },
+  },
+});
+</script>

src/components/queryBuilder/BuilderHost.vue

@@ -86,7 +86,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw, type PropType } from "vue";
 import { mapActions, mapState, mapWritableState } from "pinia";
-import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import type { DynamicQueryStructure } from "@/types/dynamicQueries";
 import {
   ArchiveBoxArrowDownIcon,
   CommandLineIcon,
@@ -97,8 +97,8 @@ import {
   TrashIcon,
   SparklesIcon,
 } from "@heroicons/vue/24/outline";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
-import { useModalStore } from "../../stores/modal";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
+import { useModalStore } from "@/stores/modal";
 import Table from "./Table.vue";
 import { useAbilityStore } from "@/stores/ability";
 import { useQueryStoreStore } from "@/stores/admin/queryStore";

src/components/queryBuilder/ColumnSelect.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 </script>
 
 <script lang="ts">

src/components/queryBuilder/Condition.vue

@@ -60,8 +60,8 @@ import {
   type ConditionValue,
   type WhereOperation,
   type WhereType,
-} from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+} from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 </script>
 

src/components/queryBuilder/Join.vue

@@ -21,8 +21,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { DynamicQueryStructure } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import { PlusIcon } from "@heroicons/vue/24/outline";
 import JoinTable from "./JoinTable.vue";
 </script>

src/components/queryBuilder/JoinTable.vue

@@ -20,8 +20,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { DynamicQueryStructure } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { DynamicQueryStructure } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import Table from "./Table.vue";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 import { joinTableName } from "@/helpers/queryFormatter";

src/components/queryBuilder/NestedCondition.vue

@@ -19,8 +19,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { ConditionStructure, WhereType } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { ConditionStructure, WhereType } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 import NestedWhere from "./NestedWhere.vue";
 </script>

src/components/queryBuilder/NestedWhere.vue

@@ -32,8 +32,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { ConditionStructure } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { ConditionStructure } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import NestedCondition from "./NestedCondition.vue";
 import Condition from "./Condition.vue";
 import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";

src/components/queryBuilder/Order.vue

@@ -22,8 +22,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { OrderByStructure } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { OrderByStructure } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import OrderStructure from "./OrderStructure.vue";
 import { PlusIcon } from "@heroicons/vue/24/outline";
 </script>

src/components/queryBuilder/OrderStructure.vue

@@ -21,8 +21,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { OrderByStructure, OrderByType } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { OrderByStructure, OrderByType } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import { TrashIcon } from "@heroicons/vue/24/outline";
 </script>
 

src/components/queryBuilder/Table.vue

@@ -11,8 +11,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { ConditionStructure, DynamicQueryStructure, OrderByStructure } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import ColumnSelect from "./ColumnSelect.vue";
 import Where from "./Where.vue";
 import Order from "./Order.vue";

src/components/queryBuilder/TableSelect.vue

@@ -13,7 +13,7 @@
 <script setup lang="ts">
 import { defineComponent } from "vue";
 import { mapState } from "pinia";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 </script>
 
 <script lang="ts">

src/components/queryBuilder/Where.vue

@@ -33,8 +33,8 @@
 <script setup lang="ts">
 import { defineComponent, type PropType } from "vue";
 import { mapActions, mapState } from "pinia";
-import type { ConditionStructure } from "../../types/dynamicQueries";
-import { useQueryBuilderStore } from "../../stores/admin/queryBuilder";
+import type { ConditionStructure } from "@/types/dynamicQueries";
+import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
 import NestedCondition from "./NestedCondition.vue";
 import Condition from "./Condition.vue";
 import { PlusIcon, RectangleStackIcon } from "@heroicons/vue/24/outline";