Ehrenamt/ff-operation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Presence Listing

Browse source
This commit is contained in:
Julian Krauser 2025-02-26 17:50:35 +01:00
parent d1cb00a4d0
commit 24920606ea
3 changed files with 121 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/admin/ForceSelect.vue
View file

@ -25,7 +25,7 @@
@after-leave="query = ''"
>
<ComboboxOptions
class="absolute z-20 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"
class="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white py-1 text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
>
<div
v-if="availableForces.length === 0"
@ -124,10 +124,20 @@ export default defineComponent({
return this.query == ""
? this.availableForces
: this.availableForces.filter((f) => {
return this.query
.toLocaleLowerCase()
.split(" ")
.some((q) => f.firstname.toLocaleLowerCase().includes(q) || f.lastname.toLocaleLowerCase().includes(q));
const arr = this.query.toLocaleLowerCase().split(" ");
if (arr.length == 1) {
return arr.some(
(q) => f.firstname.toLocaleLowerCase().includes(q) || f.lastname.toLocaleLowerCase().includes(q)
);
} else {
return arr
.flatMap((v, i) => arr.slice(i + 1).map((w) => [v, w]))
.some(
(q) =>
(f.firstname.toLocaleLowerCase().includes(q[0]) && f.lastname.toLocaleLowerCase().includes(q[1])) ||
(f.firstname.toLocaleLowerCase().includes(q[1]) && f.lastname.toLocaleLowerCase().includes(q[0]))
);
}
});
},
},

2
src/views/admin/operation/mission/MissionOverview.vue
View file

@ -28,6 +28,7 @@
</div>
<MissionDetail v-show="routeHash == '#edit'" />
<MissionPresence v-show="routeHash == '#presence'" />
</div>
</div>
</template>
@ -40,6 +41,7 @@ import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useConnectionStore } from "@/stores/admin/operation/connection";
import MissionDetail from "./MissionDetail.vue";
import MissionPresence from "./MissionPresence.vue";
import { useForceStore } from "@/stores/admin/configuration/force";
import type { ForceViewModel } from "@/viewmodels/admin/configuration/force.models";
import { useMissionDetailStore } from "../../../../stores/admin/operation/missionDetail";

104
src/views/admin/operation/mission/MissionPresence.vue Normal file
View file

@ -0,0 +1,104 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-hidden">
<Combobox v-model="selected" by="id" multiple>
<div
class="rounded-md shadow-sm relative block w-full border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
>
<ComboboxInput
class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
@input="query = $event.target.value"
placeholder="suchen..."
/>
<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>
</div>
<ComboboxOptions
class="w-full h-full overflow-y-auto flex flex-col gap-1 rounded-md border border-gray-300 bg-white text-base shadow-md ring-1 ring-black/5 focus:outline-none sm:text-sm"
:static="true"
:open="true"
>
<div v-if="availableForces.length === 0" class="relative cursor-default select-none px-4 py-2 text-gray-700">
Keine Auswahl verfügbar
</div>
<div
v-if="filtered.length === 0 && query !== ''"
class="relative cursor-default select-none px-4 py-2 text-gray-700"
>
Keine Treffer
</div>
<ComboboxOption
v-for="person in filtered"
as="template"
:key="person.id"
:value="person"
v-slot="{ selected, active }"
>
<li
class="relative cursor-pointer select-none py-2 pl-10 pr-4"
:class="{
'!bg-primary text-white': active,
'text-gray-900': !active,
'bg-red-200': selected,
}"
>
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ person.firstname }} {{ person.lastname }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active && !selected, 'text-primary': !active }"
>
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</Combobox>
</div>
</template>
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { useForceStore } from "@/stores/admin/configuration/force";
import { mapState } from "pinia";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
query: "" as string,
selected: [],
};
},
computed: {
...mapState(useForceStore, ["availableForces"]),
filtered() {
return this.query == ""
? this.availableForces
: this.availableForces.filter((f) => {
const arr = this.query.toLocaleLowerCase().split(" ");
if (arr.length == 1) {
return arr.some(
(q) => f.firstname.toLocaleLowerCase().includes(q) || f.lastname.toLocaleLowerCase().includes(q)
);
} else {
return arr
.flatMap((v, i) => arr.slice(i + 1).map((w) => [v, w]))
.some(
(q) =>
(f.firstname.toLocaleLowerCase().includes(q[0]) && f.lastname.toLocaleLowerCase().includes(q[1])) ||
(f.firstname.toLocaleLowerCase().includes(q[1]) && f.lastname.toLocaleLowerCase().includes(q[0]))
);
}
});
},
},
});
</script>