ff-admin/src/views/admin/club/protocol/ProtocolPresence.vue

159 lines
5.8 KiB
Vue
Raw Normal View History

2024-10-04 12:47:04 +02:00
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
2024-10-13 15:47:52 +02:00
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'" @click="fetchProtocolPresence" class="cursor-pointer">
&#8634; laden fehlgeschlagen
</p>
2024-10-15 16:24:29 +02:00
2024-10-06 11:38:07 +02:00
<div class="w-full">
2024-11-24 15:31:08 +01:00
<Combobox v-model="presence" :disabled="!can('create', 'club', 'protocol')" multiple>
2024-10-08 10:50:46 +02:00
<ComboboxLabel>Anwesende suchen</ComboboxLabel>
2024-10-06 11:38:07 +02:00
<div class="relative mt-1">
2024-10-08 10:50:46 +02:00
<ComboboxInput
class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
@input="query = $event.target.value"
/>
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
2024-10-06 11:38:07 +02:00
<TransitionRoot
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@after-leave="query = ''"
>
<ComboboxOptions
2024-10-08 10:50:46 +02:00
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
2024-10-06 11:38:07 +02:00
>
<ComboboxOption v-if="filtered.length === 0" as="template" disabled>
<li class="text-text relative cursor-default select-none py-2 pl-3 pr-4">
<span class="font-normal block truncate"> Keine Auswahl</span>
</li>
</ComboboxOption>
<ComboboxOption
v-for="member in filtered"
as="template"
:key="member.id"
2024-10-15 16:24:29 +02:00
:value="member.id"
2024-10-06 11:38:07 +02:00
v-slot="{ selected, active }"
>
<li
class="relative cursor-default select-none py-2 pl-10 pr-4"
:class="{
'bg-primary text-white': active,
'text-gray-900': !active,
}"
>
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ member.firstname }} {{ member.lastname }} {{ member.nameaffix }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-primary': !active }"
>
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</TransitionRoot>
</div>
</Combobox>
</div>
<br />
<p>Ausgewählte Anwesende</p>
<div class="flex flex-col gap-2 grow overflow-y-auto">
<div
v-for="member in selected"
:key="member.id"
class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
>
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
2024-11-24 15:31:08 +01:00
<TrashIcon
v-if="can('create', 'club', 'protocol')"
class="w-5 h-5 p-1 box-content cursor-pointer"
@click="removeSelected(member.id)"
/>
2024-10-06 11:38:07 +02:00
</div>
</div>
2024-10-04 12:47:04 +02:00
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
2024-10-15 16:24:29 +02:00
import { mapActions, mapState, mapWritableState } from "pinia";
2024-10-04 12:47:04 +02:00
import Spinner from "@/components/Spinner.vue";
2024-10-06 11:38:07 +02:00
import {
Combobox,
ComboboxLabel,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { TrashIcon } from "@heroicons/vue/24/outline";
2024-10-04 12:47:04 +02:00
import { useProtocolStore } from "@/stores/admin/protocol";
2024-10-06 11:38:07 +02:00
import { useMemberStore } from "@/stores/admin/member";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
2024-11-21 15:58:58 +01:00
import { useProtocolPresenceStore } from "@/stores/admin/protocolPresence";
2024-11-24 15:31:08 +01:00
import { useAbilityStore } from "@/stores/ability";
2024-10-04 12:47:04 +02:00
</script>
<script lang="ts">
export default defineComponent({
props: {
protocolId: String,
},
2024-10-06 11:38:07 +02:00
data() {
return {
query: "" as String,
};
},
2024-10-04 12:47:04 +02:00
computed: {
2024-10-15 16:24:29 +02:00
...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
2024-10-06 11:38:07 +02:00
...mapState(useMemberStore, ["members"]),
2024-11-24 15:31:08 +01:00
...mapState(useAbilityStore, ["can"]),
2024-10-06 11:38:07 +02:00
filtered(): Array<MemberViewModel> {
return this.query === ""
? this.members
: this.members.filter((member) =>
(member.firstname + " " + member.lastname)
.toLowerCase()
.replace(/\s+/g, "")
.includes(this.query.toLowerCase().replace(/\s+/g, ""))
);
},
sorted(): Array<MemberViewModel> {
return this.selected.sort((a, b) => {
if (a.lastname < b.lastname) return -1;
if (a.lastname > b.lastname) return 1;
if (a.firstname < b.firstname) return -1;
if (a.firstname > b.firstname) return 1;
return 0;
});
},
2024-10-15 16:24:29 +02:00
selected(): Array<MemberViewModel> {
return this.members.filter((m) => this.presence.includes(m.id));
},
2024-10-06 11:38:07 +02:00
},
mounted() {
2024-12-27 13:25:37 +01:00
this.fetchMembers(0, 1000, true);
2024-10-13 15:47:52 +02:00
this.fetchProtocolPresence();
2024-10-06 11:38:07 +02:00
},
methods: {
...mapActions(useMemberStore, ["fetchMembers"]),
2024-10-13 15:47:52 +02:00
...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
2024-10-06 11:38:07 +02:00
removeSelected(id: number) {
2024-10-15 16:24:29 +02:00
let index = this.presence.findIndex((s) => s == id);
2024-10-06 11:38:07 +02:00
if (index != -1) {
2024-10-15 16:24:29 +02:00
this.presence.splice(index, 1);
2024-10-06 11:38:07 +02:00
}
},
2024-10-04 12:47:04 +02:00
},
});
</script>