Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 10 Pull requests Projects Releases 7 Packages Wiki Activity Actions

syncing agenda

Browse source
This commit is contained in:
Julian Krauser 2024-10-15 16:24:29 +02:00
parent 52deb253c1
commit c0bfc00862
12 changed files with 221 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
package-lock.json generated
View file

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

2
package.json
View file

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

54
src/components/admin/club/protocol/ProtocolSyncing.vue
View file

@ -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();
},
},
});

6
src/stores/admin/protocol.ts
View file

@ -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) => {});
},

66
src/stores/admin/protocolAgenda.ts
View file

@ -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) => {});
},
},
});

3
src/stores/admin/protocolDecision.ts
View file

@ -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: () => {

49
src/stores/admin/protocolPresence.ts
View file

@ -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) => {});
},
},
});

3
src/stores/admin/protocolVoting.ts
View file

@ -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: () => {

59
src/views/admin/club/protocol/ProtocolAgenda.vue
View file

@ -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>

4
src/views/admin/club/protocol/ProtocolOverview.vue
View file

@ -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();

17
src/views/admin/club/protocol/ProtocolPresence.vue
View file

@ -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);
}
},
},

2
src/views/admin/club/protocol/ProtocolRouting.vue
View file

@ -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">