package-lock.json

@@ -32,6 +32,7 @@
         "@tsconfig/node20": "^20.1.4",
         "@types/eslint": "~9.6.0",
         "@types/lodash.clonedeep": "^4.5.9",
+        "@types/lodash.difference": "^4.5.9",
         "@types/lodash.isequal": "^4.5.8",
         "@types/node": "^20.14.5",
         "@types/nprogress": "^0.2.0",
@@ -3085,6 +3086,16 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/lodash.difference": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.difference/-/lodash.difference-4.5.9.tgz",
+      "integrity": "sha512-MNlajcjtwzLpXk+cw38UkBvEXJNEPhULgS8A4EHwtUwT7f7yFH/SFKD0iw5Rfilwh60yJIgFo0vsMr7xsa5+aw==",
+      "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",

package.json

@@ -47,6 +47,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/eslint": "~9.6.0",
     "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.difference": "^4.5.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^20.14.5",
     "@types/nprogress": "^0.2.0",

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Protokoll erstellen</p>
+    </div>
+    <br />
+    <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>
+        <label for="date">Datum</label>
+        <input type="date" id="date" required />
+      </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";
+</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(useProtocolStore, ["createProtocol"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createProtocol: CreateProtocolViewModel = {
+        title: formData.title.value,
+        date: formData.date.value,
+      };
+      this.createProtocol(createProtocol)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/club/protocol/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">Protokoll 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/protocol/ProtocolListItem.vue

@@ -4,10 +4,10 @@
       :to="{ name: 'admin-club-protocol-overview', params: { protocolId: protocol.id } }"
       class="bg-primary p-2 text-white flex flex-row justify-between items-center"
     >
-      <p>{{ protocol.title }}</p>
+      <p>{{ protocol.title }} - {{ protocol.date }}</p>
     </RouterLink>
-    <div class="p-2">
-      <p>Infos</p>
+    <div class="p-2 max-h-48 overflow-y-auto">
+      <p v-html="protocol.summary"></p>
     </div>
   </div>
 </template>

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

@@ -0,0 +1,72 @@
+<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" />
+  <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" />
+</template>
+
+<script setup lang="ts">
+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";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: ["executeSyncAll"],
+  watch: {
+    executeSyncAll() {
+      this.syncAll();
+    },
+    syncing() {
+      this.$emit("syncState", this.syncing);
+    },
+    detectedChangeProtocol() {
+      clearTimeout(this.protocolTimer);
+      if (this.detectedChangeProtocol == false) {
+        return;
+      }
+      this.setProtocolSyncingState("detectedChanges");
+      this.protocolTimer = setTimeout(() => {
+        this.synchronizeActiveProtocol();
+      }, 10000);
+    },
+  },
+  emits: {
+    syncState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      return typeof state == "string";
+    },
+  },
+  data() {
+    return {
+      protocolTimer: undefined as undefined | any,
+    };
+  },
+  mounted() {
+    this.$emit("syncState", this.syncing);
+  },
+  beforeUnmount() {
+    if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+  },
+  computed: {
+    ...mapState(useProtocolStore, ["activeProtocolObj", "syncingProtocol", "detectedChangeProtocol"]),
+
+    syncing(): "synced" | "syncing" | "detectedChanges" | "failed" {
+      let states = [this.syncingProtocol];
+
+      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(useProtocolStore, ["synchronizeActiveProtocol", "setProtocolSyncingState"]),
+    syncAll() {
+      if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+      this.synchronizeActiveProtocol();
+    },
+  },
+});
+</script>

src/stores/admin/protocol.ts

@@ -3,6 +3,9 @@ import type { CreateProtocolViewModel, SyncProtocolViewModel } from "@/viewmodel
 import { http } from "@/serverCom";
 import type { AxiosResponse } from "axios";
 import type { ProtocolViewModel } from "@/viewmodels/admin/protocol.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+import difference from "lodash.difference";
 
 export const useProtocolStore = defineStore("protocol", {
   state: () => {
@@ -12,11 +15,18 @@ export const useProtocolStore = defineStore("protocol", {
       loading: "loading" as "loading" | "fetched" | "failed",
       activeProtocol: null as number | null,
       activeProtocolObj: null as ProtocolViewModel | null,
+      origin: null as ProtocolViewModel | null,
       loadingActive: "loading" as "loading" | "fetched" | "failed",
-      syncing: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
+      syncingProtocol: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
     };
   },
+  getters: {
+    detectedChangeProtocol: (state) => !isEqual(state.origin, state.activeProtocolObj),
+  },
   actions: {
+    setProtocolSyncingState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      this.syncingProtocol = state;
+    },
     fetchProtocols(offset = 0, count = 25, clear = false) {
       if (clear) this.protocols = [];
       this.loading = "loading";
@@ -46,7 +56,8 @@ export const useProtocolStore = defineStore("protocol", {
       http
         .get(`/admin/protocol/${this.activeProtocol}`)
         .then((res) => {
-          this.activeProtocolObj = res.data;
+          this.origin = res.data;
+          this.activeProtocolObj = cloneDeep(this.origin);
           this.loadingActive = "fetched";
         })
         .catch((err) => {
@@ -64,16 +75,30 @@ export const useProtocolStore = defineStore("protocol", {
       this.fetchProtocols();
       return result;
     },
-    async synchronizeActiveProtocol(protocol: SyncProtocolViewModel): Promise<AxiosResponse<any, any>> {
-      const result = await http.patch(`/admin/protocol/${protocol.id}`, {
-        title: protocol.title,
-        date: protocol.date,
-        starttime: protocol.starttime,
-        endtime: protocol.endtime,
-        summary: protocol.summary,
-      });
-      this.fetchProtocols();
-      return result;
+    async synchronizeActiveProtocol(): Promise<void> {
+      if (this.origin == null || this.activeProtocolObj == null) return;
+
+      this.syncingProtocol = "syncing";
+      await http
+        .put(`/admin/protocol/${this.origin.id}/synchronize`, {
+          title: this.activeProtocolObj.title,
+          date: this.activeProtocolObj.date,
+          starttime: this.activeProtocolObj.starttime,
+          endtime: this.activeProtocolObj.endtime,
+          summary: this.activeProtocolObj.summary,
+        })
+        .then((res) => {
+          this.syncingProtocol = "synced";
+        })
+        .catch((err) => {
+          this.syncingProtocol = "failed";
+        });
+      this.fetchProtocolById(this.origin.id)
+        .then((res) => {
+          this.origin = res.data;
+          this.activeProtocolObj = cloneDeep(this.origin);
+        })
+        .catch((err) => {});
     },
   },
 });

src/views/admin/club/protocol/Protocol.vue

@@ -57,9 +57,9 @@ export default defineComponent({
     ...mapActions(useProtocolStore, ["fetchProtocols"]),
     ...mapActions(useModalStore, ["openModal"]),
     openCreateModal() {
-      // this.openModal(
-      //   markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/CreateProtocolModal.vue")))
-      // );
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/CreateProtocolModal.vue")))
+      );
     },
   },
 });

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -5,14 +5,16 @@
     </template>
     <template #topBar>
       <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">
-          {{ activeProtocolObj?.title }}, {{ activeProtocolObj?.date }}
-        </h1>
-        <CloudIcon v-if="syncing == 'synced'" class="w-5 h-5" />
-        <CloudArrowUpIcon v-else-if="syncing == 'detectedChanges'" class="w-5 h-5" />
-        <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" />
-        <TrashIcon class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
+        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
+        <ProtocolSyncing
+          :executeSyncAll="executeSyncAll"
+          @syncState="
+            (state) => {
+              syncState = state;
+            }
+          "
+        />
+        <!-- <TrashIcon class="w-5 h-5 cursor-pointer" @click="openDeleteModal" /> -->
       </div>
     </template>
     <template #diffMain>
@@ -49,14 +51,8 @@ import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import { RouterLink, RouterView } from "vue-router";
 import { useProtocolStore } from "@/stores/admin/protocol";
-import {
-  ArrowPathIcon,
-  CloudArrowUpIcon,
-  CloudIcon,
-  ExclamationTriangleIcon,
-  TrashIcon,
-} from "@heroicons/vue/24/outline";
 import { useModalStore } from "@/stores/modal";
+import ProtocolSyncing from "@/components/admin/club/protocol/ProtocolSyncing.vue";
 </script>
 
 <script lang="ts">
@@ -64,6 +60,14 @@ export default defineComponent({
   props: {
     protocolId: String,
   },
+  watch: {
+    syncState() {
+      if (this.wantToClose && this.syncState == "synced") {
+        this.wantToClose = false;
+        this.closeModal();
+      }
+    },
+  },
   data() {
     return {
       tabs: [
@@ -73,17 +77,36 @@ export default defineComponent({
         { route: "admin-club-protocol-decisions", title: "Beschlüsse" },
         { route: "admin-club-protocol-agenda", title: "Protokoll" },
       ],
+      wantToClose: false as boolean,
+      executeSyncAll: undefined as any,
+      syncState: "synced" as "synced" | "syncing" | "detectedChanges" | "failed",
     };
   },
   computed: {
-    ...mapState(useProtocolStore, ["activeProtocolObj", "syncing"]),
+    ...mapState(useProtocolStore, ["origin"]),
   },
   mounted() {
     this.fetchProtocolByActiveId();
   },
+  // this.syncState is undefined, so it will never work
+  // beforeRouteLeave(to, from, next) {
+  //   if (this.syncState != "synced") {
+  //     this.executeSyncAll = Date.now();
+  //     this.wantToClose = true;
+  //     this.openInfoModal();
+  //     next(false);
+  //   } else {
+  //     next();
+  //   }
+  // },
   methods: {
     ...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
     ...mapActions(useModalStore, ["openModal"]),
+    openInfoModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/CurrentlySyncingModal.vue")))
+      );
+    },
     openDeleteModal() {
       // this.openModal(
       //   markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/DeleteProtocolModal.vue"))),