Merge branch 'main' into #3-calendar
# Conflicts: # package-lock.json # src/main.css # src/router/authGuards.ts # src/types/permissionTypes.ts
This commit is contained in:
commit
8074dbf5c4
38 changed files with 2228 additions and 66 deletions
81
src/components/admin/club/protocol/CreateProtocolModal.vue
Normal file
81
src/components/admin/club/protocol/CreateProtocolModal.vue
Normal file
|
|
@ -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>
|
||||
26
src/components/admin/club/protocol/CurrentlySyncingModal.vue
Normal file
26
src/components/admin/club/protocol/CurrentlySyncingModal.vue
Normal file
|
|
@ -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>
|
||||
27
src/components/admin/club/protocol/ProtocolListItem.vue
Normal file
27
src/components/admin/club/protocol/ProtocolListItem.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
161
src/components/admin/club/protocol/ProtocolSyncing.vue
Normal file
161
src/components/admin/club/protocol/ProtocolSyncing.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue