From 859df5ff5c93b8fefb460c8da02bf7f06a1afb89 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Mon, 3 Feb 2025 16:35:05 +0100
Subject: [PATCH] fix: newsletter sync

---
 .../club/newsletter/newsletterRecipients.ts   |  5 +-
 .../club/newsletter/NewsletterRecipients.vue  | 76 ++++++++++---------
 2 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/stores/admin/club/newsletter/newsletterRecipients.ts b/src/stores/admin/club/newsletter/newsletterRecipients.ts
index 2a7efb3..cc62005 100644
--- a/src/stores/admin/club/newsletter/newsletterRecipients.ts
+++ b/src/stores/admin/club/newsletter/newsletterRecipients.ts
@@ -20,7 +20,10 @@ export const useNewsletterRecipientsStore = defineStore("newsletterRecipients",
   },
   getters: {
     detectedChangeNewsletterRecipients: (state) =>
-      !isEqual(state.origin, state.recipients) && state.syncingNewsletterRecipients != "syncing",
+      !isEqual(
+        state.origin.sort((a: string, b: string) => a.localeCompare(b)),
+        state.recipients.sort((a: string, b: string) => a.localeCompare(b))
+      ) && state.syncingNewsletterRecipients != "syncing",
   },
   actions: {
     setNewsletterRecipientsSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
diff --git a/src/views/admin/club/newsletter/NewsletterRecipients.vue b/src/views/admin/club/newsletter/NewsletterRecipients.vue
index e1b2d96..d49ea15 100644
--- a/src/views/admin/club/newsletter/NewsletterRecipients.vue
+++ b/src/views/admin/club/newsletter/NewsletterRecipients.vue
@@ -1,51 +1,53 @@
 <template>
-  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+  <div class="flex flex-col h-full w-full overflow-hidden">
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'" @click="fetchNewsletterRecipients" class="cursor-pointer">
       &#8634; laden fehlgeschlagen
     </p>
-
-    <select v-model="recipientsByQueryId">
-      <option value="def">Optional</option>
-      <option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option>
-    </select>
-    <p>Empfänger durch gespeicherte Abfrage</p>
-    <div class="flex flex-col gap-2 grow overflow-y-auto">
-      <div
-        v-for="member in queried"
-        :key="member.id"
-        class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
-      >
-        <div>
-          <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
-          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
+    <div class="flex flex-col gap-2 h-1/2">
+      <select v-model="recipientsByQueryId">
+        <option value="def">Optional</option>
+        <option v-for="query in queries" :key="query.id" :value="query.id">{{ query.title }}</option>
+      </select>
+      <p>Empfänger durch gespeicherte Abfrage</p>
+      <div class="flex flex-col gap-2 grow overflow-y-auto">
+        <div
+          v-for="member in queried"
+          :key="member.id"
+          class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
+        >
+          <div>
+            <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
+            <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
+          </div>
         </div>
       </div>
     </div>
+    <div class="flex flex-col gap-2 h-1/2">
+      <MemberSearchSelect
+        title="weitere Empfänger suchen"
+        v-model="recipients"
+        :disabled="!can('create', 'club', 'newsletter')"
+      />
 
-    <MemberSearchSelect
-      title="weitere Empfänger suchen"
-      v-model="recipients"
-      :disabled="!can('create', 'club', 'newsletter')"
-    />
+      <p>Ausgewählte Empfänger</p>
+      <div class="flex flex-col gap-2 grow overflow-y-auto">
+        <div
+          v-for="member in selected"
+          :key="member.id"
+          class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
+        >
+          <div>
+            <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
+            <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
+          </div>
 
-    <p>Ausgewählte Empfänger</p>
-    <div class="flex flex-col gap-2 grow overflow-y-auto">
-      <div
-        v-for="member in selected"
-        :key="member.id"
-        class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
-      >
-        <div>
-          <p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
-          <p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type }}</p>
+          <TrashIcon
+            v-if="can('create', 'club', 'newsletter')"
+            class="w-5 h-5 p-1 box-content cursor-pointer"
+            @click="removeSelected(member.id)"
+          />
         </div>
-
-        <TrashIcon
-          v-if="can('create', 'club', 'newsletter')"
-          class="w-5 h-5 p-1 box-content cursor-pointer"
-          @click="removeSelected(member.id)"
-        />
       </div>
     </div>
   </div>