From 9ef171b913b682ae11f33ed5a1d467ce304738ff Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Thu, 26 Dec 2024 12:34:36 +0100
Subject: [PATCH] newsletter syncing store

---
 .../admin/club/protocol/ProtocolListItem.vue  |   2 +-
 .../admin/club/protocol/ProtocolSyncing.vue   |   4 +-
 .../settings/template/DeleteTemplateModal.vue |   2 +-
 .../settings/template/TemplateListItem.vue    |   2 +-
 .../templateUsage/TemplateUsageListItem.vue   |   6 +-
 src/components/queryBuilder/BuilderHost.vue   |   6 +-
 src/components/queryBuilder/ColumnSelect.vue  |   2 +-
 src/components/queryBuilder/Condition.vue     |   4 +-
 src/components/queryBuilder/Join.vue          |   4 +-
 src/components/queryBuilder/JoinTable.vue     |   4 +-
 .../queryBuilder/NestedCondition.vue          |   4 +-
 src/components/queryBuilder/NestedWhere.vue   |   4 +-
 src/components/queryBuilder/Order.vue         |   4 +-
 .../queryBuilder/OrderStructure.vue           |   4 +-
 src/components/queryBuilder/Table.vue         |   4 +-
 src/components/queryBuilder/TableSelect.vue   |   2 +-
 src/components/queryBuilder/Where.vue         |   4 +-
 src/stores/admin/communicationType.ts         |   2 +-
 src/stores/admin/newsletter.ts                | 105 ++++++++++++++++++
 src/stores/admin/newsletterDates.ts           |  64 +++++++++++
 src/stores/admin/newsletterRecipients.ts      |  65 +++++++++++
 src/stores/admin/protocolAgenda.ts            |   5 +-
 src/stores/admin/protocolDecision.ts          |   2 +-
 src/stores/admin/protocolPresence.ts          |   2 +-
 src/stores/admin/protocolPrintout.ts          |   2 +-
 src/stores/admin/protocolVoting.ts            |   5 +-
 src/stores/admin/queryBuilder.ts              |   6 +-
 src/stores/admin/template.ts                  |   2 +-
 src/stores/admin/templateUsage.ts             |   6 +-
 .../admin/communicationType.models.ts         |   2 +-
 src/viewmodels/admin/newsletter.models.ts     |  31 ++++++
 .../admin/newsletterConfig.models.ts          |   2 +-
 .../admin/newsletterDates.models.ts           |  15 +++
 .../admin/newsletterRecipients.models.ts      |  11 ++
 src/viewmodels/admin/query.models.ts          |   2 +-
 src/viewmodels/admin/templateUsage.models.ts  |   2 +-
 src/views/admin/club/query/Builder.vue        |   2 +-
 .../newsletterConfig/NewsletterConfig.vue     |   4 +-
 .../admin/settings/template/TemplateEdit.vue  |   4 +-
 .../settings/templateUsage/TemplateUsage.vue  |   4 +-
 src/views/public/View.vue                     |   2 +-
 41 files changed, 347 insertions(+), 62 deletions(-)
 create mode 100644 src/stores/admin/newsletter.ts
 create mode 100644 src/stores/admin/newsletterDates.ts
 create mode 100644 src/stores/admin/newsletterRecipients.ts
 create mode 100644 src/viewmodels/admin/newsletter.models.ts
 create mode 100644 src/viewmodels/admin/newsletterDates.models.ts
 create mode 100644 src/viewmodels/admin/newsletterRecipients.models.ts

diff --git a/src/components/admin/club/protocol/ProtocolListItem.vue b/src/components/admin/club/protocol/ProtocolListItem.vue
index 141006a..168477e 100644
--- a/src/components/admin/club/protocol/ProtocolListItem.vue
+++ b/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">
diff --git a/src/components/admin/club/protocol/ProtocolSyncing.vue b/src/components/admin/club/protocol/ProtocolSyncing.vue
index eb5feb4..eb2c25b 100644
--- a/src/components/admin/club/protocol/ProtocolSyncing.vue
+++ b/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">
diff --git a/src/components/admin/settings/template/DeleteTemplateModal.vue b/src/components/admin/settings/template/DeleteTemplateModal.vue
index cd42728..1be82f9 100644
--- a/src/components/admin/settings/template/DeleteTemplateModal.vue
+++ b/src/components/admin/settings/template/DeleteTemplateModal.vue
@@ -30,7 +30,7 @@ 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";
+import { useTemplateStore } from "@/stores/admin/template";
 </script>
 
 <script lang="ts">
diff --git a/src/components/admin/settings/template/TemplateListItem.vue b/src/components/admin/settings/template/TemplateListItem.vue
index e28d0ee..a4084d6 100644
--- a/src/components/admin/settings/template/TemplateListItem.vue
+++ b/src/components/admin/settings/template/TemplateListItem.vue
@@ -35,7 +35,7 @@ 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 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";
diff --git a/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue b/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue
index a82bc9d..c5562fe 100644
--- a/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue
+++ b/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue
@@ -47,9 +47,9 @@
 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 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";
diff --git a/src/components/queryBuilder/BuilderHost.vue b/src/components/queryBuilder/BuilderHost.vue
index baa4d91..7583774 100644
--- a/src/components/queryBuilder/BuilderHost.vue
+++ b/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";
diff --git a/src/components/queryBuilder/ColumnSelect.vue b/src/components/queryBuilder/ColumnSelect.vue
index 7113f6b..53e0370 100644
--- a/src/components/queryBuilder/ColumnSelect.vue
+++ b/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">
diff --git a/src/components/queryBuilder/Condition.vue b/src/components/queryBuilder/Condition.vue
index 3766198..9c56a3d 100644
--- a/src/components/queryBuilder/Condition.vue
+++ b/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>
 
diff --git a/src/components/queryBuilder/Join.vue b/src/components/queryBuilder/Join.vue
index 2a2a793..6678aa7 100644
--- a/src/components/queryBuilder/Join.vue
+++ b/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>
diff --git a/src/components/queryBuilder/JoinTable.vue b/src/components/queryBuilder/JoinTable.vue
index ba6723a..c4db5b9 100644
--- a/src/components/queryBuilder/JoinTable.vue
+++ b/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";
diff --git a/src/components/queryBuilder/NestedCondition.vue b/src/components/queryBuilder/NestedCondition.vue
index dde4d9c..111e8e3 100644
--- a/src/components/queryBuilder/NestedCondition.vue
+++ b/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>
diff --git a/src/components/queryBuilder/NestedWhere.vue b/src/components/queryBuilder/NestedWhere.vue
index 98fe5c4..eef4464 100644
--- a/src/components/queryBuilder/NestedWhere.vue
+++ b/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";
diff --git a/src/components/queryBuilder/Order.vue b/src/components/queryBuilder/Order.vue
index 99ec7cc..50fc646 100644
--- a/src/components/queryBuilder/Order.vue
+++ b/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>
diff --git a/src/components/queryBuilder/OrderStructure.vue b/src/components/queryBuilder/OrderStructure.vue
index 964b600..a233767 100644
--- a/src/components/queryBuilder/OrderStructure.vue
+++ b/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>
 
diff --git a/src/components/queryBuilder/Table.vue b/src/components/queryBuilder/Table.vue
index b4d98bb..72ac140 100644
--- a/src/components/queryBuilder/Table.vue
+++ b/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";
diff --git a/src/components/queryBuilder/TableSelect.vue b/src/components/queryBuilder/TableSelect.vue
index 4eb4ed1..026e363 100644
--- a/src/components/queryBuilder/TableSelect.vue
+++ b/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">
diff --git a/src/components/queryBuilder/Where.vue b/src/components/queryBuilder/Where.vue
index 9cc5803..78a9704 100644
--- a/src/components/queryBuilder/Where.vue
+++ b/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";
diff --git a/src/stores/admin/communicationType.ts b/src/stores/admin/communicationType.ts
index f8538e8..5cb81f9 100644
--- a/src/stores/admin/communicationType.ts
+++ b/src/stores/admin/communicationType.ts
@@ -6,7 +6,7 @@ import type {
 } from "@/viewmodels/admin/communicationType.models";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import type { CommunicationFieldType } from "../../types/fieldTypes";
+import type { CommunicationFieldType } from "@/types/fieldTypes";
 
 export const useCommunicationTypeStore = defineStore("communicationType", {
   state: () => {
diff --git a/src/stores/admin/newsletter.ts b/src/stores/admin/newsletter.ts
new file mode 100644
index 0000000..5f92914
--- /dev/null
+++ b/src/stores/admin/newsletter.ts
@@ -0,0 +1,105 @@
+import { defineStore } from "pinia";
+import type { CreateNewsletterViewModel, SyncNewsletterViewModel } from "@/viewmodels/admin/newsletter.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+import type { NewsletterViewModel } from "@/viewmodels/admin/newsletter.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+import difference from "lodash.difference";
+
+export const useNewsletterStore = defineStore("newsletter", {
+  state: () => {
+    return {
+      newsletters: [] as Array<NewsletterViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeNewsletter: null as number | null,
+      activeNewsletterObj: null as NewsletterViewModel | null,
+      origin: null as NewsletterViewModel | null,
+      loadingActive: "loading" as "loading" | "fetched" | "failed",
+      syncingNewsletter: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
+    };
+  },
+  getters: {
+    detectedChangeNewsletter: (state) =>
+      !isEqual(state.origin, state.activeNewsletterObj) && state.syncingNewsletter != "syncing",
+  },
+  actions: {
+    setNewsletterSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      this.syncingNewsletter = state;
+    },
+    fetchNewsletters(offset = 0, count = 25, clear = false) {
+      if (clear) this.newsletters = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/newsletter?offset=${offset}&count=${count}`)
+        .then((result) => {
+          this.totalCount = result.data.total;
+          result.data.newsletters
+            .filter((elem: NewsletterViewModel) => this.newsletters.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: NewsletterViewModel, index: number): NewsletterViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: NewsletterViewModel & { tab_pos: number }) => {
+              this.newsletters.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchNewsletterByActiveId() {
+      this.loadingActive = "loading";
+      http
+        .get(`/admin/newsletter/${this.activeNewsletter}`)
+        .then((res) => {
+          this.origin = res.data;
+          this.activeNewsletterObj = cloneDeep(this.origin);
+          this.loadingActive = "fetched";
+        })
+        .catch((err) => {
+          this.loadingActive = "failed";
+        });
+    },
+    fetchNewsletterById(id: number) {
+      return http.get(`/admin/newsletter/${id}`);
+    },
+    async createNewsletter(newsletter: CreateNewsletterViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/newsletter`, {
+        title: newsletter.title,
+      });
+      this.fetchNewsletters();
+      return result;
+    },
+    async synchronizeActiveNewsletter(): Promise<void> {
+      if (this.origin == null || this.activeNewsletterObj == null) return;
+
+      this.syncingNewsletter = "syncing";
+      await http
+        .patch(`/admin/newsletter/${this.origin.id}/synchronize`, {
+          title: this.activeNewsletterObj.title,
+          description: this.activeNewsletterObj.description,
+          newsletterTitle: this.activeNewsletterObj.newsletterTitle,
+          newsletterText: this.activeNewsletterObj.newsletterText,
+          newsletterSignatur: this.activeNewsletterObj.newsletterSignatur,
+          recipientsByQueryId: this.activeNewsletterObj.recipientsByQueryId,
+        })
+        .then((res) => {
+          this.syncingNewsletter = "synced";
+        })
+        .catch((err) => {
+          this.syncingNewsletter = "failed";
+        });
+      this.fetchNewsletterById(this.origin.id)
+        .then((res) => {
+          this.origin = res.data;
+          if (this.detectedChangeNewsletter) this.syncingNewsletter = "detectedChanges";
+        })
+        .catch((err) => {});
+    },
+  },
+});
diff --git a/src/stores/admin/newsletterDates.ts b/src/stores/admin/newsletterDates.ts
new file mode 100644
index 0000000..9040554
--- /dev/null
+++ b/src/stores/admin/newsletterDates.ts
@@ -0,0 +1,64 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type { NewsletterDatesViewModel, SyncNewsletterDatesViewModel } from "@/viewmodels/admin/newsletterDates.models";
+import { useProtocolStore } from "./protocol";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+import differenceWith from "lodash.differencewith";
+
+export const useNewsletterDatesStore = defineStore("newsletterDates", {
+  state: () => {
+    return {
+      dates: [] as Array<NewsletterDatesViewModel>,
+      origin: [] as Array<NewsletterDatesViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      syncingNewsletterDates: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
+    };
+  },
+  getters: {
+    detectedChangeNewsletterDates: (state) =>
+      !isEqual(state.origin, state.dates) && state.syncingNewsletterDates != "syncing",
+  },
+  actions: {
+    setNewsletterDatesSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      this.syncingNewsletterDates = state;
+    },
+    fetchNewsletterDates() {
+      this.loading = "loading";
+      this.fetchNewsletterDatesPromise()
+        .then((result) => {
+          this.origin = result.data;
+          this.dates = cloneDeep(this.origin);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchNewsletterDatesPromise() {
+      const protocolId = useProtocolStore().activeProtocol;
+      return http.get(`/admin/protocol/${protocolId}/agenda`);
+    },
+    async synchronizeActiveNewsletterDates() {
+      this.syncingNewsletterDates = "syncing";
+      const protocolId = useProtocolStore().activeProtocol;
+
+      await http
+        .patch(`/admin/protocol/${protocolId}/synchronize/agenda`, {
+          agenda: differenceWith(this.dates, this.origin, isEqual),
+        })
+        .then((res) => {
+          this.syncingNewsletterDates = "synced";
+        })
+        .catch((err) => {
+          this.syncingNewsletterDates = "failed";
+        });
+      this.fetchNewsletterDatesPromise()
+        .then((res) => {
+          this.origin = res.data;
+          if (this.detectedChangeNewsletterDates) this.syncingNewsletterDates = "detectedChanges";
+        })
+        .catch((err) => {});
+    },
+  },
+});
diff --git a/src/stores/admin/newsletterRecipients.ts b/src/stores/admin/newsletterRecipients.ts
new file mode 100644
index 0000000..3d44265
--- /dev/null
+++ b/src/stores/admin/newsletterRecipients.ts
@@ -0,0 +1,65 @@
+import { defineStore } from "pinia";
+import { http } from "@/serverCom";
+import type {
+  NewsletterRecipientsViewModel,
+  SyncNewsletterRecipientsViewModel,
+} from "@/viewmodels/admin/newsletterRecipients.models";
+import { useProtocolStore } from "./protocol";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+
+export const useNewsletterRecipientsStore = defineStore("newsletterRecipients", {
+  state: () => {
+    return {
+      recipients: [] as Array<number>,
+      origin: [] as Array<number>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      syncingNewsletterRecipients: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
+    };
+  },
+  getters: {
+    detectedChangeNewsletterRecipients: (state) =>
+      !isEqual(state.origin, state.recipients) && state.syncingNewsletterRecipients != "syncing",
+  },
+  actions: {
+    setNewsletterRecipientsSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      this.syncingNewsletterRecipients = state;
+    },
+    fetchNewsletterRecipients() {
+      this.loading = "loading";
+      this.fetchNewsletterRecipientsPromise()
+        .then((result) => {
+          this.origin = result.data.map((d: NewsletterRecipientsViewModel) => d.memberId);
+          this.recipients = cloneDeep(this.origin);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchNewsletterRecipientsPromise() {
+      const protocolId = useProtocolStore().activeProtocol;
+      return http.get(`/admin/protocol/${protocolId}/presence`);
+    },
+    async synchronizeActiveNewsletterRecipients() {
+      this.syncingNewsletterRecipients = "syncing";
+      const protocolId = useProtocolStore().activeProtocol;
+      await http
+        .put(`/admin/protocol/${protocolId}/synchronize/presence`, {
+          presence: this.recipients,
+        })
+        .then((res) => {
+          this.syncingNewsletterRecipients = "synced";
+        })
+        .catch((err) => {
+          this.syncingNewsletterRecipients = "failed";
+        });
+      this.fetchNewsletterRecipientsPromise()
+        .then((result) => {
+          this.origin = result.data.map((d: NewsletterRecipientsViewModel) => d.memberId);
+          if (this.detectedChangeNewsletterRecipients) this.syncingNewsletterRecipients = "detectedChanges";
+        })
+        .catch((err) => {});
+    },
+  },
+});
diff --git a/src/stores/admin/protocolAgenda.ts b/src/stores/admin/protocolAgenda.ts
index 7791d50..1705b9f 100644
--- a/src/stores/admin/protocolAgenda.ts
+++ b/src/stores/admin/protocolAgenda.ts
@@ -1,9 +1,6 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
-import type {
-  ProtocolAgendaViewModel,
-  SyncProtocolAgendaViewModel,
-} from "../../viewmodels/admin/protocolAgenda.models";
+import type { ProtocolAgendaViewModel, SyncProtocolAgendaViewModel } from "@/viewmodels/admin/protocolAgenda.models";
 import { useProtocolStore } from "./protocol";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
diff --git a/src/stores/admin/protocolDecision.ts b/src/stores/admin/protocolDecision.ts
index 7eb4446..65a0358 100644
--- a/src/stores/admin/protocolDecision.ts
+++ b/src/stores/admin/protocolDecision.ts
@@ -4,7 +4,7 @@ import type { AxiosResponse } from "axios";
 import type {
   ProtocolDecisionViewModel,
   SyncProtocolDecisionViewModel,
-} from "../../viewmodels/admin/protocolDecision.models";
+} from "@/viewmodels/admin/protocolDecision.models";
 import { useProtocolStore } from "./protocol";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
diff --git a/src/stores/admin/protocolPresence.ts b/src/stores/admin/protocolPresence.ts
index 7014c62..a10b610 100644
--- a/src/stores/admin/protocolPresence.ts
+++ b/src/stores/admin/protocolPresence.ts
@@ -4,7 +4,7 @@ import type { AxiosResponse } from "axios";
 import type {
   ProtocolPresenceViewModel,
   SyncProtocolPresenceViewModel,
-} from "../../viewmodels/admin/protocolPresence.models";
+} from "@/viewmodels/admin/protocolPresence.models";
 import { useProtocolStore } from "./protocol";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
diff --git a/src/stores/admin/protocolPrintout.ts b/src/stores/admin/protocolPrintout.ts
index 53cf4ed..72462a9 100644
--- a/src/stores/admin/protocolPrintout.ts
+++ b/src/stores/admin/protocolPrintout.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
-import type { ProtocolPrintoutViewModel } from "../../viewmodels/admin/protocolPrintout.models";
+import type { ProtocolPrintoutViewModel } from "@/viewmodels/admin/protocolPrintout.models";
 import { useProtocolStore } from "./protocol";
 import type { AxiosResponse } from "axios";
 
diff --git a/src/stores/admin/protocolVoting.ts b/src/stores/admin/protocolVoting.ts
index bbd1e9c..cdfee66 100644
--- a/src/stores/admin/protocolVoting.ts
+++ b/src/stores/admin/protocolVoting.ts
@@ -1,10 +1,7 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import type {
-  ProtocolVotingViewModel,
-  SyncProtocolVotingViewModel,
-} from "../../viewmodels/admin/protocolVoting.models";
+import type { ProtocolVotingViewModel, SyncProtocolVotingViewModel } from "@/viewmodels/admin/protocolVoting.models";
 import { useProtocolStore } from "./protocol";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
diff --git a/src/stores/admin/queryBuilder.ts b/src/stores/admin/queryBuilder.ts
index 68ed672..9612025 100644
--- a/src/stores/admin/queryBuilder.ts
+++ b/src/stores/admin/queryBuilder.ts
@@ -1,8 +1,8 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
-import type { TableMeta } from "../../viewmodels/admin/query.models";
-import type { DynamicQueryStructure, FieldType } from "../../types/dynamicQueries";
-import { flattenQueryResult } from "../../helpers/queryFormatter";
+import type { TableMeta } from "@/viewmodels/admin/query.models";
+import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
+import { flattenQueryResult } from "@/helpers/queryFormatter";
 
 export const useQueryBuilderStore = defineStore("queryBuilder", {
   state: () => {
diff --git a/src/stores/admin/template.ts b/src/stores/admin/template.ts
index e9ef5bb..5f0484f 100644
--- a/src/stores/admin/template.ts
+++ b/src/stores/admin/template.ts
@@ -5,7 +5,7 @@ import type {
   CreateTemplateViewModel,
   TemplateViewModel,
   UpdateTemplateViewModel,
-} from "../../viewmodels/admin/template.models";
+} from "@/viewmodels/admin/template.models";
 
 export const useTemplateStore = defineStore("template", {
   state: () => {
diff --git a/src/stores/admin/templateUsage.ts b/src/stores/admin/templateUsage.ts
index bb832e1..6e3aca9 100644
--- a/src/stores/admin/templateUsage.ts
+++ b/src/stores/admin/templateUsage.ts
@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
-import type { CreateTemplateViewModel, UpdateTemplateViewModel } from "../../viewmodels/admin/template.models";
-import type { TemplateUsageViewModel, UpdateTemplateUsageViewModel } from "../../viewmodels/admin/templateUsage.models";
-import type { PermissionModule } from "../../types/permissionTypes";
+import type { CreateTemplateViewModel, UpdateTemplateViewModel } from "@/viewmodels/admin/template.models";
+import type { TemplateUsageViewModel, UpdateTemplateUsageViewModel } from "@/viewmodels/admin/templateUsage.models";
+import type { PermissionModule } from "@/types/permissionTypes";
 
 export const useTemplateUsageStore = defineStore("templateUsage", {
   state: () => {
diff --git a/src/viewmodels/admin/communicationType.models.ts b/src/viewmodels/admin/communicationType.models.ts
index 48e7a17..9d985b5 100644
--- a/src/viewmodels/admin/communicationType.models.ts
+++ b/src/viewmodels/admin/communicationType.models.ts
@@ -1,4 +1,4 @@
-import type { CommunicationFieldType } from "../../types/fieldTypes";
+import type { CommunicationFieldType } from "@/types/fieldTypes";
 
 export interface CommunicationTypeViewModel {
   id: number;
diff --git a/src/viewmodels/admin/newsletter.models.ts b/src/viewmodels/admin/newsletter.models.ts
new file mode 100644
index 0000000..4a98729
--- /dev/null
+++ b/src/viewmodels/admin/newsletter.models.ts
@@ -0,0 +1,31 @@
+import type { QueryViewModel } from "./query.models";
+
+export interface NewsletterViewModel {
+  id: number;
+  title: string;
+  description: string;
+  newsletterTitle: string;
+  newsletterText: string;
+  newsletterSignatur: string;
+  isSent: boolean;
+  recipientsByQueryId?: number;
+  recipientsByQuery?: QueryViewModel;
+}
+
+export interface CreateNewsletterViewModel {
+  title: string;
+}
+
+export interface SyncNewsletterViewModel {
+  id: number;
+  title: string;
+  description: string;
+  newsletterTitle: string;
+  newsletterText: string;
+  newsletterSignatur: string;
+  recipientsByQueryId?: number;
+}
+
+export interface SendNewsletterViewModel {
+  id: number;
+}
diff --git a/src/viewmodels/admin/newsletterConfig.models.ts b/src/viewmodels/admin/newsletterConfig.models.ts
index 9a0bd7d..6d8be6f 100644
--- a/src/viewmodels/admin/newsletterConfig.models.ts
+++ b/src/viewmodels/admin/newsletterConfig.models.ts
@@ -1,4 +1,4 @@
-import type { NewsletterConfigType } from "../../enums/newsletterConfigType";
+import type { NewsletterConfigType } from "@/enums/newsletterConfigType";
 import type { CommunicationTypeViewModel } from "./communicationType.models";
 
 export interface NewsletterConfigViewModel {
diff --git a/src/viewmodels/admin/newsletterDates.models.ts b/src/viewmodels/admin/newsletterDates.models.ts
new file mode 100644
index 0000000..b913b8a
--- /dev/null
+++ b/src/viewmodels/admin/newsletterDates.models.ts
@@ -0,0 +1,15 @@
+import type { CalendarViewModel } from "./calendar.models";
+
+export interface NewsletterDatesViewModel {
+  newsletterId: number;
+  calendarId: number;
+  diffTitle: string | null;
+  diffDescription: string | null;
+  calendar: CalendarViewModel;
+}
+
+export interface SyncNewsletterDatesViewModel {
+  calendarId: number;
+  diffTitle?: string;
+  diffDescription?: string;
+}
diff --git a/src/viewmodels/admin/newsletterRecipients.models.ts b/src/viewmodels/admin/newsletterRecipients.models.ts
new file mode 100644
index 0000000..134fc90
--- /dev/null
+++ b/src/viewmodels/admin/newsletterRecipients.models.ts
@@ -0,0 +1,11 @@
+import type { MemberViewModel } from "./member.models";
+
+export interface NewsletterRecipientsViewModel {
+  newsletterId: number;
+  memberId: number;
+  member: MemberViewModel;
+}
+
+export interface SyncNewsletterRecipientsViewModel {
+  memberId: number;
+}
diff --git a/src/viewmodels/admin/query.models.ts b/src/viewmodels/admin/query.models.ts
index bb6197e..c6d1c84 100644
--- a/src/viewmodels/admin/query.models.ts
+++ b/src/viewmodels/admin/query.models.ts
@@ -1,4 +1,4 @@
-import type { DynamicQueryStructure } from "../../types/dynamicQueries";
+import type { DynamicQueryStructure } from "@/types/dynamicQueries";
 
 export interface TableMeta {
   tableName: string;
diff --git a/src/viewmodels/admin/templateUsage.models.ts b/src/viewmodels/admin/templateUsage.models.ts
index 1dabb87..79459cd 100644
--- a/src/viewmodels/admin/templateUsage.models.ts
+++ b/src/viewmodels/admin/templateUsage.models.ts
@@ -1,4 +1,4 @@
-import type { PermissionModule } from "../../types/permissionTypes";
+import type { PermissionModule } from "@/types/permissionTypes";
 
 export interface TemplateUsageViewModel {
   scope: PermissionModule;
diff --git a/src/views/admin/club/query/Builder.vue b/src/views/admin/club/query/Builder.vue
index 9069dfb..762abc6 100644
--- a/src/views/admin/club/query/Builder.vue
+++ b/src/views/admin/club/query/Builder.vue
@@ -62,7 +62,7 @@ import { mapActions, mapState, mapWritableState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Pagination from "@/components/Pagination.vue";
 import { useQueryBuilderStore } from "@/stores/admin/queryBuilder";
-import BuilderHost from "../../../../components/queryBuilder/BuilderHost.vue";
+import BuilderHost from "@/components/queryBuilder/BuilderHost.vue";
 import type { DynamicQueryStructure, FieldType } from "@/types/dynamicQueries";
 import { useQueryStoreStore } from "@/stores/admin/queryStore";
 </script>
diff --git a/src/views/admin/settings/newsletterConfig/NewsletterConfig.vue b/src/views/admin/settings/newsletterConfig/NewsletterConfig.vue
index 6af7b95..e4865db 100644
--- a/src/views/admin/settings/newsletterConfig/NewsletterConfig.vue
+++ b/src/views/admin/settings/newsletterConfig/NewsletterConfig.vue
@@ -23,8 +23,8 @@ 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";
+import { useNewsletterConfigStore } from "@/stores/admin/newsletterConfig";
+import NewsletterConfigListItem from "@/components/admin/settings/newsletterConfig/NewsletterConfigListItem.vue";
 </script>
 
 <script lang="ts">
diff --git a/src/views/admin/settings/template/TemplateEdit.vue b/src/views/admin/settings/template/TemplateEdit.vue
index 573fa12..2a2c07c 100644
--- a/src/views/admin/settings/template/TemplateEdit.vue
+++ b/src/views/admin/settings/template/TemplateEdit.vue
@@ -54,8 +54,8 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
 import { configureEditor } from "@/helpers/grapesEditor";
-import type { TemplateViewModel, UpdateTemplateViewModel } from "../../../../viewmodels/admin/template.models";
-import { useTemplateStore } from "../../../../stores/admin/template";
+import type { TemplateViewModel, UpdateTemplateViewModel } from "@/viewmodels/admin/template.models";
+import { useTemplateStore } from "@/stores/admin/template";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
 import grapesjs, { Editor } from "grapesjs";
diff --git a/src/views/admin/settings/templateUsage/TemplateUsage.vue b/src/views/admin/settings/templateUsage/TemplateUsage.vue
index 3b6921e..9ad6332 100644
--- a/src/views/admin/settings/templateUsage/TemplateUsage.vue
+++ b/src/views/admin/settings/templateUsage/TemplateUsage.vue
@@ -16,8 +16,8 @@ import { defineComponent } from "vue";
 import { mapState, mapActions } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { useTemplateUsageStore } from "@/stores/admin/templateUsage";
-import TemplateUsageListItem from "../../../../components/admin/settings/templateUsage/TemplateUsageListItem.vue";
-import { useTemplateStore } from "../../../../stores/admin/template";
+import TemplateUsageListItem from "@/components/admin/settings/templateUsage/TemplateUsageListItem.vue";
+import { useTemplateStore } from "@/stores/admin/template";
 </script>
 
 <script lang="ts">
diff --git a/src/views/public/View.vue b/src/views/public/View.vue
index 3560478..a9b4fd8 100644
--- a/src/views/public/View.vue
+++ b/src/views/public/View.vue
@@ -8,5 +8,5 @@
 
 <script setup lang="ts">
 import { RouterView } from "vue-router";
-import FullContent from "../../layouts/FullContent.vue";
+import FullContent from "@/layouts/FullContent.vue";
 </script>