Merge branch 'main' into #3-calendar

# Conflicts:
#	package-lock.json
#	src/main.css
#	src/router/authGuards.ts
#	src/types/permissionTypes.ts

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex flex-row h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
+  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
     <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
       <img src="/FFW-Logo.svg" alt="LOGO" class="h-full w-auto" />
       <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">Mitgliederverwaltung</h1>

src/components/Pagination.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="grow flex flex-col gap-2 overflow-hidden">
+    <div v-if="useSearch" class="relative self-end">
+      <input
+        type="text"
+        class="w-64 rounded-md shadow-sm relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+        placeholder="Suche"
+        v-model="searchString"
+      />
+      <XMarkIcon
+        class="absolute h-4 stroke-2 right-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+        @click="searchString = ''"
+      />
+    </div>
+    <div class="flex flex-col w-full grow gap-2 pr-2 overflow-y-scroll">
+      <div v-if="indicateLoading" class="flex flex-row justify-center items-center w-full p-1">
+        <Spinner />
+      </div>
+      <p v-if="visibleRows.length == 0" class="flex flex-row w-full gap-2 p-1">Kein Inhalt</p>
+      <slot
+        v-else
+        name="pageRow"
+        v-for="(item, index) in items"
+        :key="index"
+        :row="item"
+        @click="$emit('clickRow', item.id)"
+      >
+        <p>{{ item }}</p>
+      </slot>
+    </div>
+    <div class="flex flex-row w-full justify-between select-none">
+      <p class="text-sm font-normal text-gray-500">
+        Elemente <span class="font-semibold text-gray-900">{{ showingText }}</span> von
+        <span class="font-semibold text-gray-900">{{ entryCount }}</span>
+      </p>
+      <ul class="flex flex-row text-sm h-8">
+        <li
+          class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
+          :class="[currentPage > 0 ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50']"
+          @click="loadPage(currentPage - 1)"
+        >
+          <ChevronLeftIcon class="h-4" />
+        </li>
+        <li
+          v-for="page in displayedPagesNumbers"
+          :key="page"
+          class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 first:rounded-s-lg last:rounded-e-lg"
+          :class="[currentPage == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
+          @click="loadPage(page)"
+        >
+          {{ typeof page == "number" ? page + 1 : "..." }}
+        </li>
+        <li
+          class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
+          :class="[
+            currentPage + 1 < countOfPages ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50',
+          ]"
+          @click="loadPage(currentPage + 1)"
+        >
+          <ChevronRightIcon class="h-4" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { computed, ref, watch } from "vue";
+import { ChevronRightIcon, ChevronLeftIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+import Spinner from "./Spinner.vue";
+
+const props = defineProps({
+  items: { type: Array<T>, default: [] },
+  maxEntriesPerPage: { type: Number, default: 25 },
+  totalCount: { type: Number, default: null },
+  config: { type: Array<{ key: string }>, default: [] },
+  useSearch: { type: Boolean, default: false },
+  enablePreSearch: { type: Boolean, default: false },
+  indicateLoading: { type: Boolean, default: false },
+});
+
+const slots = defineSlots<{
+  pageRow(props: { row: T }): void;
+}>();
+
+const timer = ref(undefined) as undefined | any;
+const currentPage = ref(0);
+const searchString = ref("");
+
+watch(searchString, async () => {
+  clearTimeout(timer.value);
+  timer.value = setTimeout(() => {
+    currentPage.value = 0;
+    emit("search", searchString.value);
+  }, 600);
+});
+
+const emit = defineEmits({
+  submit(id: number) {
+    return typeof id == "number";
+  },
+  loadData(offset: number, count: number, searchString: string) {
+    return typeof offset == "number" && typeof offset == "number" && typeof searchString == "number";
+  },
+  search(search: string) {
+    return typeof search == "number";
+  },
+});
+
+const entryCount = computed(() => props.totalCount ?? props.items.length);
+const showingStart = computed(() => currentPage.value * props.maxEntriesPerPage);
+const showingEnd = computed(() => {
+  let max = currentPage.value * props.maxEntriesPerPage + props.maxEntriesPerPage;
+  if (max > entryCount.value) max = entryCount.value;
+  return max;
+});
+const showingText = computed(() => `${entryCount.value != 0 ? showingStart.value + 1 : 0} - ${showingEnd.value}`);
+const countOfPages = computed(() => Math.ceil(entryCount.value / props.maxEntriesPerPage));
+const displayedPagesNumbers = computed(() => {
+  let stateOfPush = false;
+
+  return [...new Array(countOfPages.value)].reduce((acc, curr, index) => {
+    if (
+      index <= 1 ||
+      index >= countOfPages.value - 2 ||
+      (currentPage.value - 1 <= index && index <= currentPage.value + 1)
+    ) {
+      acc.push(index);
+      stateOfPush = false;
+      return acc;
+    }
+    if (stateOfPush == true) return acc;
+    acc.push(".");
+    stateOfPush = true;
+
+    return acc;
+  }, []);
+});
+const visibleRows = computed(() => filterData(props.items, searchString.value, showingStart.value, showingEnd.value));
+
+const loadPage = (newPage: number | ".") => {
+  if (newPage == ".") return;
+  if (newPage < 0 || newPage >= countOfPages.value) return;
+
+  let pageStart = newPage * props.maxEntriesPerPage;
+  let pageEnd = newPage * props.maxEntriesPerPage + props.maxEntriesPerPage;
+  if (pageEnd > entryCount.value) pageEnd = entryCount.value;
+
+  let loadedElementCount = filterData(props.items, searchString.value, pageStart, pageEnd).length;
+  if (loadedElementCount < props.maxEntriesPerPage)
+    emit("loadData", pageStart, props.maxEntriesPerPage, searchString.value);
+
+  currentPage.value = newPage;
+};
+
+const filterData = (array: Array<any>, searchString: string, start: number, end: number): Array<any> => {
+  return array
+    .filter(
+      (elem) =>
+        !props.enablePreSearch ||
+        searchString.trim() == "" ||
+        props.config.some((col) => typeof elem?.[col.key] == "string" && elem[col.key].includes(searchString.trim()))
+    )
+    .filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
+};
+</script>
+
+<!-- 
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    entryCount() {
+      return this.totalCount ?? this.items.length;
+    },
+    showingStart() {
+      return this.currentPage * this.maxEntriesPerPage;
+    },
+    showingEnd() {
+      let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
+      if (max > this.entryCount) max = this.entryCount;
+      return max;
+    },
+    showingText() {
+      return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
+    },
+    countOfPages() {
+      return Math.ceil(this.entryCount / this.maxEntriesPerPage);
+    },
+    displayedPagesNumbers(): Array<number | "."> {
+      //indicate if "." or page number gets pushed
+      let stateOfPush = false;
+
+      return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
+        if (
+          // always display first 2 pages
+          index <= 1 ||
+          // always display last 2 pages
+          index >= this.countOfPages - 2 ||
+          // always display 1 pages around current page
+          (this.currentPage - 1 <= index && index <= this.currentPage + 1)
+        ) {
+          acc.push(index);
+          stateOfPush = false;
+          return acc;
+        }
+        // abort if placeholder already added to array
+        if (stateOfPush == true) return acc;
+        // show placeholder if pagenumber is not actively rendered
+        acc.push(".");
+        stateOfPush = true;
+
+        return acc;
+      }, []);
+    },
+    visibleRows() {
+      return this.filterData(this.items, this.searchString, this.showingStart, this.showingEnd);
+    },
+  },
+  methods: {
+    loadPage(newPage: number | ".") {
+      if (newPage == ".") return;
+      if (newPage < 0 || newPage >= this.countOfPages) return;
+
+      let pageStart = newPage * this.maxEntriesPerPage;
+      let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
+      if (pageEnd > this.entryCount) pageEnd = this.entryCount;
+
+      let loadedElementCount = this.filterData(this.items, this.searchString, pageStart, pageEnd).length;
+      if (loadedElementCount < this.maxEntriesPerPage)
+        this.$emit("loadData", { offset: pageStart, count: this.maxEntriesPerPage, search: this.searchString });
+
+      this.currentPage = newPage;
+    },
+    filterData(array: Array<any>, searchString: string, start: number, end: number): Array<any> {
+      return array
+        .filter(
+          (elem) =>
+            !this.enablePreSearch ||
+            searchString.trim() == "" ||
+            this.config.some((col) => typeof elem?.[col.key] == "string" && elem[col.key].includes(searchString.trim()))
+        )
+        .filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
+    },
+  },
+});
+</script> -->

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

@@ -0,0 +1,81 @@
+<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 ref="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.$refs.form as HTMLFormElement).reset();
+            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

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+    <RouterLink
+      :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 }} - {{ protocol.date }}</p>
+    </RouterLink>
+    <div class="p-2 max-h-48 overflow-y-auto">
+      <p v-html="protocol.summary"></p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { ProtocolViewModel } from "../../../../viewmodels/admin/protocol.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    protocol: { type: Object as PropType<ProtocolViewModel>, default: {} },
+  },
+});
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full h-full flex flex-col gap-2">
+    <div class="grow">
+      <iframe ref="viewer" class="w-full h-full" />
+    </div>
+
+    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+  </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 { useProtocolPrintoutStore } from "@/stores/admin/protocolPrintout";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useProtocolPrintoutStore, ["fetchProtocolPrintoutById"]),
+    fetchItem() {
+      this.fetchProtocolPrintoutById(this.data)
+        .then((response) => {
+          const blob = new Blob([response.data], { type: "application/pdf" });
+          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,161 @@
+<template>
+  <CloudIcon v-if="syncing == 'synced'" class="w-5 h-5" />
+  <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 cursor-pointer"
+    @click="syncAll"
+  />
+</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";
+import { useProtocolAgendaStore } from "@/stores/admin/protocolAgenda";
+import { useProtocolPresenceStore } from "@/stores/admin/protocolPresence";
+import { useProtocolDecisionStore } from "../../../../stores/admin/protocolDecision";
+import { useProtocolVotingStore } from "../../../../stores/admin/protocolVoting";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: ["executeSyncAll"],
+  watch: {
+    executeSyncAll() {
+      this.syncAll();
+    },
+    syncing() {
+      this.$emit("syncState", this.syncing);
+    },
+    detectedChangeProtocol() {
+      clearTimeout(this.protocolTimer);
+      this.setProtocolSyncingState("synced");
+      if (this.detectedChangeProtocol == false) {
+        return;
+      }
+      this.setProtocolSyncingState("detectedChanges");
+      this.protocolTimer = setTimeout(() => {
+        this.synchronizeActiveProtocol();
+      }, 10000);
+    },
+    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);
+    },
+    detectedChangeProtocolDecision() {
+      clearTimeout(this.protocolDecisionTimer);
+      this.setProtocolDecisionSyncingState("synced");
+      if (this.detectedChangeProtocolDecision == false) {
+        return;
+      }
+      this.setProtocolDecisionSyncingState("detectedChanges");
+      this.protocolDecisionTimer = setTimeout(() => {
+        this.synchronizeActiveProtocolDecision();
+      }, 10000);
+    },
+    detectedChangeProtocolVoting() {
+      clearTimeout(this.protocolVotingTimer);
+      this.setProtocolVotingSyncingState("synced");
+      if (this.detectedChangeProtocolVoting == false) {
+        return;
+      }
+      this.setProtocolVotingSyncingState("detectedChanges");
+      this.protocolVotingTimer = setTimeout(() => {
+        this.synchronizeActiveProtocolVoting();
+      }, 10000);
+    },
+  },
+  emits: {
+    syncState(state: "synced" | "syncing" | "detectedChanges" | "failed") {
+      return typeof state == "string";
+    },
+  },
+  data() {
+    return {
+      protocolTimer: undefined as undefined | any,
+      protocolAgendaTimer: undefined as undefined | any,
+      protocolPresenceTimer: undefined as undefined | any,
+      protocolDecisionTimer: undefined as undefined | any,
+      protocolVotingTimer: undefined as undefined | any,
+    };
+  },
+  mounted() {
+    this.$emit("syncState", this.syncing);
+  },
+  beforeUnmount() {
+    if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+    if (!this.protocolAgendaTimer) clearTimeout(this.protocolAgendaTimer);
+    if (!this.protocolPresenceTimer) clearTimeout(this.protocolPresenceTimer);
+    if (!this.protocolDecisionTimer) clearTimeout(this.protocolDecisionTimer);
+    if (!this.protocolVotingTimer) clearTimeout(this.protocolVotingTimer);
+  },
+  computed: {
+    ...mapState(useProtocolStore, ["syncingProtocol", "detectedChangeProtocol"]),
+    ...mapState(useProtocolAgendaStore, ["syncingProtocolAgenda", "detectedChangeProtocolAgenda"]),
+    ...mapState(useProtocolPresenceStore, ["syncingProtocolPresence", "detectedChangeProtocolPresence"]),
+    ...mapState(useProtocolDecisionStore, ["syncingProtocolDecision", "detectedChangeProtocolDecision"]),
+    ...mapState(useProtocolVotingStore, ["syncingProtocolVoting", "detectedChangeProtocolVoting"]),
+
+    syncing(): "synced" | "syncing" | "detectedChanges" | "failed" {
+      let states = [
+        this.syncingProtocol,
+        this.syncingProtocolAgenda,
+        this.syncingProtocolPresence,
+        this.syncingProtocolDecision,
+        this.syncingProtocolVoting,
+      ];
+
+      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"]),
+    ...mapActions(useProtocolAgendaStore, ["synchronizeActiveProtocolAgenda", "setProtocolAgendaSyncingState"]),
+    ...mapActions(useProtocolPresenceStore, ["synchronizeActiveProtocolPresence", "setProtocolPresenceSyncingState"]),
+    ...mapActions(useProtocolDecisionStore, ["synchronizeActiveProtocolDecision", "setProtocolDecisionSyncingState"]),
+    ...mapActions(useProtocolVotingStore, ["synchronizeActiveProtocolVoting", "setProtocolVotingSyncingState"]),
+
+    syncAll() {
+      if (!this.protocolTimer) clearTimeout(this.protocolTimer);
+      if (!this.protocolAgendaTimer) clearTimeout(this.protocolAgendaTimer);
+      if (!this.protocolPresenceTimer) clearTimeout(this.protocolPresenceTimer);
+      if (!this.protocolDecisionTimer) clearTimeout(this.protocolDecisionTimer);
+      if (!this.protocolVotingTimer) clearTimeout(this.protocolVotingTimer);
+
+      this.synchronizeActiveProtocol();
+      this.synchronizeActiveProtocolAgenda();
+      this.synchronizeActiveProtocolPresence();
+      this.synchronizeActiveProtocolDecision();
+      this.synchronizeActiveProtocolVoting();
+    },
+  },
+});
+</script>