syncing agenda

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

View file

@ -5,34 +5,55 @@
↺ 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>

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

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

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