syncing

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"))),