Newsletter base views and Data display

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