From c0bfc0086292e8256aecf5fa6d51b7549f604ae6 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Tue, 15 Oct 2024 16:24:29 +0200
Subject: [PATCH] syncing agenda

---
 package-lock.json                             | 18 +++++
 package.json                                  |  2 +
 .../admin/club/protocol/ProtocolSyncing.vue   | 54 +++++++++++++--
 src/stores/admin/protocol.ts                  |  6 +-
 src/stores/admin/protocolAgenda.ts            | 66 +++++++++++++++----
 src/stores/admin/protocolDecision.ts          |  3 +
 src/stores/admin/protocolPresence.ts          | 49 ++++++++++----
 src/stores/admin/protocolVoting.ts            |  3 +
 .../admin/club/protocol/ProtocolAgenda.vue    | 59 +++++++++++------
 .../admin/club/protocol/ProtocolOverview.vue  |  4 +-
 .../admin/club/protocol/ProtocolPresence.vue  | 17 +++--
 .../admin/club/protocol/ProtocolRouting.vue   |  2 +-
 12 files changed, 221 insertions(+), 62 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c86341e..a85d191 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "jwt-decode": "^4.0.0",
         "lodash.clonedeep": "^4.5.0",
         "lodash.difference": "^4.5.0",
+        "lodash.differencewith": "^4.5.0",
         "lodash.isequal": "^4.5.0",
         "nprogress": "^0.2.0",
         "pdf-dist": "^1.0.0",
@@ -33,6 +34,7 @@
         "@types/eslint": "~9.6.0",
         "@types/lodash.clonedeep": "^4.5.9",
         "@types/lodash.difference": "^4.5.9",
+        "@types/lodash.differencewith": "^4.5.9",
         "@types/lodash.isequal": "^4.5.8",
         "@types/node": "^20.14.5",
         "@types/nprogress": "^0.2.0",
@@ -3096,6 +3098,16 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/lodash.differencewith": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.differencewith/-/lodash.differencewith-4.5.9.tgz",
+      "integrity": "sha512-nMaREKoe7J3WvnsO7HDRxvnPT3mWmZD3EAECpy7gBGJ6S5nQ66uVlkRe+ZXs6261ZNb2fH9Ny4oUUiSOCmTnLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/lodash.isequal": {
       "version": "4.5.8",
       "resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.8.tgz",
@@ -6720,6 +6732,12 @@
       "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
       "license": "MIT"
     },
+    "node_modules/lodash.differencewith": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz",
+      "integrity": "sha512-/8JFjydAS+4bQuo3CpLMBv7WxGFyk7/etOAsrQUCu0a9QVDemxv0YQ0rFyeZvqlUD314SERfNlgnlqqHmaQ0Cg==",
+      "license": "MIT"
+    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
diff --git a/package.json b/package.json
index e886a5f..3c822c2 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "jwt-decode": "^4.0.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.difference": "^4.5.0",
+    "lodash.differencewith": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "pdf-dist": "^1.0.0",
@@ -48,6 +49,7 @@
     "@types/eslint": "~9.6.0",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/lodash.difference": "^4.5.9",
+    "@types/lodash.differencewith": "^4.5.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^20.14.5",
     "@types/nprogress": "^0.2.0",
diff --git a/src/components/admin/club/protocol/ProtocolSyncing.vue b/src/components/admin/club/protocol/ProtocolSyncing.vue
index d3fea13..a5abee6 100644
--- a/src/components/admin/club/protocol/ProtocolSyncing.vue
+++ b/src/components/admin/club/protocol/ProtocolSyncing.vue
@@ -1,8 +1,16 @@
 <template>
   <CloudIcon v-if="syncing == 'synced'" class="w-5 h-5" />
-  <CloudArrowUpIcon v-else-if="syncing == 'detectedChanges'" class="w-5 h-5 cursor-pointer" @click="syncAll" />
+  <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" />
+  <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">
@@ -10,6 +18,8 @@ import { defineComponent } from "vue";
 import { mapState, mapActions } from "pinia";
 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";
 </script>
 
 <script lang="ts">
@@ -24,6 +34,7 @@ export default defineComponent({
     },
     detectedChangeProtocol() {
       clearTimeout(this.protocolTimer);
+      this.setProtocolSyncingState("synced");
       if (this.detectedChangeProtocol == false) {
         return;
       }
@@ -32,6 +43,29 @@ export default defineComponent({
         this.synchronizeActiveProtocol();
       }, 10000);
     },
+    detectedChangeProtocolAgenda() {
+      console.log(this.detectedChangeProtocolAgenda);
+      clearTimeout(this.protocolAgendaTimer);
+      if (this.detectedChangeProtocolAgenda == false) {
+        this.setProtocolAgendaSyncingState("synced");
+        return;
+      }
+      this.setProtocolAgendaSyncingState("detectedChanges");
+      this.protocolAgendaTimer = setTimeout(() => {
+        this.synchronizeActiveProtocolAgenda();
+      }, 10000);
+    },
+    detectedChangeProtocolPresence() {
+      clearTimeout(this.protocolPresenceTimer);
+      this.setProtocolPresenceSyncingState("synced");
+      if (this.detectedChangeProtocolPresence == false) {
+        return;
+      }
+      this.setProtocolPresenceSyncingState("detectedChanges");
+      this.protocolPresenceTimer = setTimeout(() => {
+        this.synchronizeActiveProtocolPresence();
+      }, 10000);
+    },
   },
   emits: {
     syncState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
@@ -41,6 +75,8 @@ export default defineComponent({
   data() {
     return {
       protocolTimer: undefined as undefined | any,
+      protocolAgendaTimer: undefined as undefined | any,
+      protocolPresenceTimer: undefined as undefined | any,
     };
   },
   mounted() {
@@ -48,12 +84,16 @@ export default defineComponent({
   },
   beforeUnmount() {
     if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+    if (!this.protocolAgendaTimer) clearTimeout(this.protocolAgendaTimer);
+    if (!this.protocolPresenceTimer) clearTimeout(this.protocolPresenceTimer);
   },
   computed: {
-    ...mapState(useProtocolStore, ["activeProtocolObj", "syncingProtocol", "detectedChangeProtocol"]),
+    ...mapState(useProtocolStore, ["syncingProtocol", "detectedChangeProtocol"]),
+    ...mapState(useProtocolAgendaStore, ["syncingProtocolAgenda", "detectedChangeProtocolAgenda"]),
+    ...mapState(useProtocolPresenceStore, ["syncingProtocolPresence", "detectedChangeProtocolPresence"]),
 
     syncing(): "synced" | "syncing" | "detectedChanges" | "failed" {
-      let states = [this.syncingProtocol];
+      let states = [this.syncingProtocol, this.syncingProtocolAgenda, this.syncingProtocolPresence];
 
       if (states.includes("failed")) return "failed";
       else if (states.includes("syncing")) return "syncing";
@@ -63,9 +103,15 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useProtocolStore, ["synchronizeActiveProtocol", "setProtocolSyncingState"]),
+    ...mapActions(useProtocolAgendaStore, ["synchronizeActiveProtocolAgenda", "setProtocolAgendaSyncingState"]),
+    ...mapActions(useProtocolPresenceStore, ["synchronizeActiveProtocolPresence", "setProtocolPresenceSyncingState"]),
     syncAll() {
       if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+      if (!this.protocolAgendaTimer) clearTimeout(this.protocolAgendaTimer);
+      if (!this.protocolPresenceTimer) clearTimeout(this.protocolPresenceTimer);
       this.synchronizeActiveProtocol();
+      this.synchronizeActiveProtocolAgenda();
+      this.synchronizeActiveProtocolPresence();
     },
   },
 });
diff --git a/src/stores/admin/protocol.ts b/src/stores/admin/protocol.ts
index ca39eea..3c637d8 100644
--- a/src/stores/admin/protocol.ts
+++ b/src/stores/admin/protocol.ts
@@ -21,7 +21,8 @@ export const useProtocolStore = defineStore("protocol", {
     };
   },
   getters: {
-    detectedChangeProtocol: (state) => !isEqual(state.origin, state.activeProtocolObj),
+    detectedChangeProtocol: (state) =>
+      !isEqual(state.origin, state.activeProtocolObj) && state.syncingProtocol != "syncing",
   },
   actions: {
     setProtocolSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
@@ -80,7 +81,7 @@ export const useProtocolStore = defineStore("protocol", {
 
       this.syncingProtocol = "syncing";
       await http
-        .put(`/admin/protocol/${this.origin.id}/synchronize`, {
+        .patch(`/admin/protocol/${this.origin.id}/synchronize`, {
           title: this.activeProtocolObj.title,
           date: this.activeProtocolObj.date,
           starttime: this.activeProtocolObj.starttime,
@@ -96,7 +97,6 @@ export const useProtocolStore = defineStore("protocol", {
       this.fetchProtocolById(this.origin.id)
         .then((res) => {
           this.origin = res.data;
-          this.activeProtocolObj = cloneDeep(this.origin);
         })
         .catch((err) => {});
     },
diff --git a/src/stores/admin/protocolAgenda.ts b/src/stores/admin/protocolAgenda.ts
index 7eccab8..708f9c5 100644
--- a/src/stores/admin/protocolAgenda.ts
+++ b/src/stores/admin/protocolAgenda.ts
@@ -1,42 +1,82 @@
 import { defineStore } from "pinia";
 import { http } from "@/serverCom";
-import type { AxiosResponse } from "axios";
 import type {
   ProtocolAgendaViewModel,
   SyncProtocolAgendaViewModel,
 } from "../../viewmodels/admin/protocolAgenda.models";
 import { useProtocolStore } from "./protocol";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+import differenceWith from "lodash.differencewith";
 
 export const useProtocolAgendaStore = defineStore("protocolAgenda", {
   state: () => {
     return {
       agenda: [] as Array<ProtocolAgendaViewModel>,
+      origin: [] as Array<ProtocolAgendaViewModel>,
       loading: "loading" as "loading" | "fetched" | "failed",
+      syncingProtocolAgenda: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
     };
   },
+  getters: {
+    detectedChangeProtocolAgenda: (state) =>
+      !isEqual(state.origin, state.agenda) && state.syncingProtocolAgenda != "syncing",
+  },
   actions: {
+    setProtocolAgendaSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      this.syncingProtocolAgenda = state;
+    },
     fetchProtocolAgenda() {
-      const protocolId = useProtocolStore().activeProtocol;
       this.loading = "loading";
-      http
-        .get(`/admin/protocol/${protocolId}/agenda`)
+      this.fetchProtocolAgendaPromise()
         .then((result) => {
-          this.agenda = result.data;
+          this.origin = result.data;
+          this.agenda = cloneDeep(this.origin);
           this.loading = "fetched";
         })
         .catch((err) => {
           this.loading = "failed";
         });
     },
-    async synchronizeActiveProtocolAgenda(
-      agenda: Array<SyncProtocolAgendaViewModel>
-    ): Promise<AxiosResponse<any, any>> {
+    fetchProtocolAgendaPromise() {
       const protocolId = useProtocolStore().activeProtocol;
-      const result = await http.patch(`/admin/protocol/${protocolId}/synchronize/agenda`, {
-        agenda: agenda,
-      });
-      this.fetchProtocolAgenda();
-      return result;
+      return http.get(`/admin/protocol/${protocolId}/agenda`);
+    },
+    createProtocolAgenda() {
+      const protocolId = useProtocolStore().activeProtocol;
+      if (protocolId == null) return;
+      return http
+        .post(`/admin/protocol/${protocolId}/agenda`)
+        .then((res) => {
+          this.agenda.push({
+            id: res.data,
+            topic: "",
+            context: "",
+            protocolId,
+          });
+        })
+        .catch((err) => {});
+    },
+    async synchronizeActiveProtocolAgenda() {
+      this.syncingProtocolAgenda = "syncing";
+      const protocolId = useProtocolStore().activeProtocol;
+      console.log(this.agenda, this.origin, differenceWith(this.agenda, this.origin, isEqual));
+
+      await http
+        .patch(`/admin/protocol/${protocolId}/synchronize/agenda`, {
+          agenda: differenceWith(this.agenda, this.origin, isEqual),
+        })
+        .then((res) => {
+          this.syncingProtocolAgenda = "synced";
+        })
+        .catch((err) => {
+          this.syncingProtocolAgenda = "failed";
+        });
+      this.fetchProtocolAgendaPromise()
+        .then((res) => {
+          this.origin = res.data;
+        })
+        .catch((err) => {});
     },
   },
 });
diff --git a/src/stores/admin/protocolDecision.ts b/src/stores/admin/protocolDecision.ts
index 87cd3e4..4a3d738 100644
--- a/src/stores/admin/protocolDecision.ts
+++ b/src/stores/admin/protocolDecision.ts
@@ -6,6 +6,9 @@ import type {
   SyncProtocolDecisionViewModel,
 } from "../../viewmodels/admin/protocolDecision.models";
 import { useProtocolStore } from "./protocol";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+import difference from "lodash.difference";
 
 export const useProtocolDecisionStore = defineStore("protocolDecision", {
   state: () => {
diff --git a/src/stores/admin/protocolPresence.ts b/src/stores/admin/protocolPresence.ts
index 1aac81f..5035bd9 100644
--- a/src/stores/admin/protocolPresence.ts
+++ b/src/stores/admin/protocolPresence.ts
@@ -6,37 +6,60 @@ import type {
   SyncProtocolPresenceViewModel,
 } from "../../viewmodels/admin/protocolPresence.models";
 import { useProtocolStore } from "./protocol";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 
 export const useProtocolPresenceStore = defineStore("protocolPresence", {
   state: () => {
     return {
-      presence: [] as Array<ProtocolPresenceViewModel>,
+      presence: [] as Array<number>,
+      origin: [] as Array<number>,
       loading: "loading" as "loading" | "fetched" | "failed",
+      syncingProtocolPresence: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
     };
   },
+  getters: {
+    detectedChangeProtocolPresence: (state) =>
+      !isEqual(state.origin, state.presence) && state.syncingProtocolPresence != "syncing",
+  },
   actions: {
+    setProtocolPresenceSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      this.syncingProtocolPresence = state;
+    },
     fetchProtocolPresence() {
-      const protocolId = useProtocolStore().activeProtocol;
       this.loading = "loading";
-      http
-        .get(`/admin/protocol/${protocolId}/presence`)
+      this.fetchProtocolPresencePromise()
         .then((result) => {
-          this.presence = result.data;
+          this.origin = result.data.map((d: ProtocolPresenceViewModel) => d.memberId);
+          this.presence = cloneDeep(this.origin);
           this.loading = "fetched";
         })
         .catch((err) => {
           this.loading = "failed";
         });
     },
-    async synchronizeActiveProtocolPresence(
-      presence: Array<SyncProtocolPresenceViewModel>
-    ): Promise<AxiosResponse<any, any>> {
+    fetchProtocolPresencePromise() {
       const protocolId = useProtocolStore().activeProtocol;
-      const result = await http.patch(`/admin/protocol/${protocolId}/synchronize/presence`, {
-        presence: presence,
-      });
-      this.fetchProtocolPresence();
-      return result;
+      return http.get(`/admin/protocol/${protocolId}/presence`);
+    },
+    async synchronizeActiveProtocolPresence() {
+      this.syncingProtocolPresence = "syncing";
+      const protocolId = useProtocolStore().activeProtocol;
+      await http
+        .put(`/admin/protocol/${protocolId}/synchronize/presence`, {
+          presence: this.presence,
+        })
+        .then((res) => {
+          this.syncingProtocolPresence = "synced";
+        })
+        .catch((err) => {
+          this.syncingProtocolPresence = "failed";
+        });
+      this.fetchProtocolPresencePromise()
+        .then((result) => {
+          this.origin = result.data.map((d: ProtocolPresenceViewModel) => d.memberId);
+        })
+        .catch((err) => {});
     },
   },
 });
diff --git a/src/stores/admin/protocolVoting.ts b/src/stores/admin/protocolVoting.ts
index 5dd8790..009c8a7 100644
--- a/src/stores/admin/protocolVoting.ts
+++ b/src/stores/admin/protocolVoting.ts
@@ -6,6 +6,9 @@ import type {
   SyncProtocolVotingViewModel,
 } from "../../viewmodels/admin/protocolVoting.models";
 import { useProtocolStore } from "./protocol";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+import difference from "lodash.difference";
 
 export const useProtocolVotingStore = defineStore("protocolVoting", {
   state: () => {
diff --git a/src/views/admin/club/protocol/ProtocolAgenda.vue b/src/views/admin/club/protocol/ProtocolAgenda.vue
index fce4262..797cb8a 100644
--- a/src/views/admin/club/protocol/ProtocolAgenda.vue
+++ b/src/views/admin/club/protocol/ProtocolAgenda.vue
@@ -5,34 +5,55 @@
       &#8634; laden fehlgeschlagen
     </p>
 
-    <details class="flex flex-col gap-2 rounded-lg w-full justify-between border border-primary overflow-hidden">
-      <summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
-        <svg class="fill-white stroke-white opacity-75 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-          <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
-        </svg>
+    <div class="flex flex-col gap-2 h-full overflow-y-auto">
+      <details
+        v-for="item in agenda"
+        class="flex flex-col gap-2 rounded-lg w-full justify-between border border-primary overflow-hidden min-h-fit"
+      >
+        <summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
+          <svg
+            class="fill-white stroke-white opacity-75 w-4 h-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
+          </svg>
 
-        <input type="text" name="title" id="title" placeholder="TOP" autocomplete="off" />
-      </summary>
-      <QuillEditor
-        id="top"
-        theme="snow"
-        placeholder="TOP Inhalt..."
-        style="height: 250px; max-height: 250px; min-height: 250px"
-        contentType="html"
-        :toolbar="toolbarOptions"
-      />
-    </details>
+          <input
+            type="text"
+            name="title"
+            id="title"
+            placeholder="TOP"
+            autocomplete="off"
+            v-model="item.topic"
+            @keyup.prevent
+          />
+        </summary>
+        <QuillEditor
+          id="top"
+          theme="snow"
+          placeholder="TOP Inhalt..."
+          style="height: 250px; max-height: 250px; min-height: 250px"
+          contentType="html"
+          :toolbar="toolbarOptions"
+          v-model:content="item.context"
+        />
+      </details>
+    </div>
+
+    <button primary class="!w-fit" @click="createProtocolAgenda">Eintrag hinzufügen</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { toolbarOptions } from "@/helpers/quillConfig";
 import { useProtocolAgendaStore } from "@/stores/admin/protocolAgenda";
+import type { ProtocolAgendaViewModel } from "@/viewmodels/admin/protocolAgenda.models";
 </script>
 
 <script lang="ts">
@@ -41,13 +62,13 @@ export default defineComponent({
     protocolId: String,
   },
   computed: {
-    ...mapState(useProtocolAgendaStore, ["agenda", "loading"]),
+    ...mapWritableState(useProtocolAgendaStore, ["agenda", "loading"]),
   },
   mounted() {
     this.fetchProtocolAgenda();
   },
   methods: {
-    ...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda"]),
+    ...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda", "createProtocolAgenda"]),
   },
 });
 </script>
diff --git a/src/views/admin/club/protocol/ProtocolOverview.vue b/src/views/admin/club/protocol/ProtocolOverview.vue
index 24f8d01..91eaf8d 100644
--- a/src/views/admin/club/protocol/ProtocolOverview.vue
+++ b/src/views/admin/club/protocol/ProtocolOverview.vue
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useProtocolStore } from "@/stores/admin/protocol";
 import { QuillEditor } from "@vueup/vue-quill";
@@ -56,7 +56,7 @@ export default defineComponent({
     protocolId: String,
   },
   computed: {
-    ...mapState(useProtocolStore, ["activeProtocol", "loadingActive", "activeProtocolObj"]),
+    ...mapWritableState(useProtocolStore, ["loadingActive", "activeProtocolObj"]),
   },
   mounted() {
     this.fetchProtocolByActiveId();
diff --git a/src/views/admin/club/protocol/ProtocolPresence.vue b/src/views/admin/club/protocol/ProtocolPresence.vue
index efe4ab6..33ec600 100644
--- a/src/views/admin/club/protocol/ProtocolPresence.vue
+++ b/src/views/admin/club/protocol/ProtocolPresence.vue
@@ -4,8 +4,9 @@
     <p v-else-if="loading == 'failed'" @click="fetchProtocolPresence" class="cursor-pointer">
       &#8634; laden fehlgeschlagen
     </p>
+
     <div class="w-full">
-      <Combobox v-model="selected" multiple>
+      <Combobox v-model="presence" multiple>
         <ComboboxLabel>Anwesende suchen</ComboboxLabel>
         <div class="relative mt-1">
           <ComboboxInput
@@ -34,7 +35,7 @@
                 v-for="member in filtered"
                 as="template"
                 :key="member.id"
-                :value="member"
+                :value="member.id"
                 v-slot="{ selected, active }"
               >
                 <li
@@ -78,7 +79,7 @@
 
 <script setup lang="ts">
 import { defineComponent } from "vue";
-import { mapActions, mapState } from "pinia";
+import { mapActions, mapState, mapWritableState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import {
   Combobox,
@@ -105,11 +106,10 @@ export default defineComponent({
   data() {
     return {
       query: "" as String,
-      selected: [] as Array<MemberViewModel>,
     };
   },
   computed: {
-    ...mapState(useProtocolPresenceStore, ["presence", "loading"]),
+    ...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
     ...mapState(useMemberStore, ["members"]),
     filtered(): Array<MemberViewModel> {
       return this.query === ""
@@ -130,6 +130,9 @@ export default defineComponent({
         return 0;
       });
     },
+    selected(): Array<MemberViewModel> {
+      return this.members.filter((m) => this.presence.includes(m.id));
+    },
   },
   mounted() {
     this.fetchMembers();
@@ -139,9 +142,9 @@ export default defineComponent({
     ...mapActions(useMemberStore, ["fetchMembers"]),
     ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
     removeSelected(id: number) {
-      let index = this.selected.findIndex((s) => s.id == id);
+      let index = this.presence.findIndex((s) => s == id);
       if (index != -1) {
-        this.selected.splice(index, 1);
+        this.presence.splice(index, 1);
       }
     },
   },
diff --git a/src/views/admin/club/protocol/ProtocolRouting.vue b/src/views/admin/club/protocol/ProtocolRouting.vue
index f77c91b..b11567f 100644
--- a/src/views/admin/club/protocol/ProtocolRouting.vue
+++ b/src/views/admin/club/protocol/ProtocolRouting.vue
@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">