Compare commits
No commits in common. "4ecb39ceffb743ed1235691f5ca8b4fa801b557d" and "c9c6df20e0c1dfcad2abe95c941cd9a2c328cb95" have entirely different histories.
4ecb39ceff
...
c9c6df20e0
11 changed files with 177 additions and 327 deletions
|
@ -1,168 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="w-full">
|
|
||||||
<Combobox v-model="selected" :disabled="disabled" multiple>
|
|
||||||
<ComboboxLabel>{{ title }}</ComboboxLabel>
|
|
||||||
<div class="relative mt-1">
|
|
||||||
<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>
|
|
||||||
<TransitionRoot
|
|
||||||
leave="transition ease-in duration-100"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
@after-leave="query = ''"
|
|
||||||
>
|
|
||||||
<ComboboxOptions
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
:value="member.id"
|
|
||||||
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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { defineComponent, type PropType } from "vue";
|
|
||||||
import { mapState, mapActions } from "pinia";
|
|
||||||
import {
|
|
||||||
Combobox,
|
|
||||||
ComboboxLabel,
|
|
||||||
ComboboxInput,
|
|
||||||
ComboboxButton,
|
|
||||||
ComboboxOptions,
|
|
||||||
ComboboxOption,
|
|
||||||
TransitionRoot,
|
|
||||||
} from "@headlessui/vue";
|
|
||||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
|
||||||
import { useMemberStore } from "@/stores/admin/club/member/member";
|
|
||||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
|
||||||
import difference from "lodash.difference";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default defineComponent({
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
|
||||||
type: Array as PropType<Array<number>>,
|
|
||||||
default: [],
|
|
||||||
},
|
|
||||||
title: String,
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emits: ["update:model-value", "add:difference", "remove:difference", "add:member", "add:memberByArray"],
|
|
||||||
watch: {
|
|
||||||
modelValue() {
|
|
||||||
if (this.initialLoaded) return;
|
|
||||||
this.initialLoaded = true;
|
|
||||||
this.loadMembersInitial();
|
|
||||||
},
|
|
||||||
query() {
|
|
||||||
this.deferingSearch = true;
|
|
||||||
clearTimeout(this.timer);
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.deferingSearch = false;
|
|
||||||
this.search();
|
|
||||||
}, 600);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
initialLoaded: false as boolean,
|
|
||||||
loading: false as boolean,
|
|
||||||
deferingSearch: false as boolean,
|
|
||||||
timer: undefined as any,
|
|
||||||
query: "" as string,
|
|
||||||
filtered: [] as Array<MemberViewModel>,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
selected: {
|
|
||||||
get() {
|
|
||||||
return this.modelValue;
|
|
||||||
},
|
|
||||||
set(val: Array<number>) {
|
|
||||||
this.$emit("update:model-value", val);
|
|
||||||
if (this.modelValue.length < val.length) {
|
|
||||||
let diff = difference(val, this.modelValue);
|
|
||||||
if (diff.length != 1) return;
|
|
||||||
this.$emit("add:difference", diff[0]);
|
|
||||||
this.$emit("add:member", this.getMemberFromSearch(diff[0]));
|
|
||||||
} else {
|
|
||||||
let diff = difference(this.modelValue, val);
|
|
||||||
if (diff.length != 1) return;
|
|
||||||
this.$emit("remove:difference", diff[0]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.loadMembersInitial();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(useMemberStore, ["searchMembers", "getMembersByIds"]),
|
|
||||||
search() {
|
|
||||||
this.filtered = [];
|
|
||||||
this.loading = true;
|
|
||||||
this.searchMembers(this.query)
|
|
||||||
.then((res) => {
|
|
||||||
this.filtered = res.data;
|
|
||||||
})
|
|
||||||
.catch((err) => {})
|
|
||||||
.finally(() => {
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getMemberFromSearch(id: number) {
|
|
||||||
return this.filtered.find((f) => f.id == id);
|
|
||||||
},
|
|
||||||
loadMembersInitial() {
|
|
||||||
if (this.modelValue.length == 0) return;
|
|
||||||
this.getMembersByIds(this.modelValue)
|
|
||||||
.then((res) => {
|
|
||||||
this.$emit("add:memberByArray", res.data);
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full md:max-w-md">
|
<div class="w-full md:max-w-md">
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<p class="text-xl font-medium">Termin erstellen</p>
|
<p class="text-xl font-medium">Termintyp erstellen</p>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
@click="deleteCalendar"
|
@click="deleteCalendar"
|
||||||
/>
|
/>
|
||||||
<div class="flex flex-col items-center">
|
<div class="flex flex-col items-center">
|
||||||
<p class="text-xl font-medium">Termin erstellen</p>
|
<p class="text-xl font-medium">Termintyp erstellen</p>
|
||||||
</div>
|
</div>
|
||||||
<br />
|
<br />
|
||||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||||
|
|
|
@ -49,6 +49,8 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||||
import FailureXMark from "@/components/FailureXMark.vue";
|
import FailureXMark from "@/components/FailureXMark.vue";
|
||||||
import { useCalendarTypeStore } from "@/stores/admin/settings/calendarType";
|
import { useCalendarTypeStore } from "@/stores/admin/settings/calendarType";
|
||||||
import type { CreateCalendarTypeViewModel } from "@/viewmodels/admin/settings/calendarType.models";
|
import type { CreateCalendarTypeViewModel } from "@/viewmodels/admin/settings/calendarType.models";
|
||||||
|
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
|
||||||
|
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -74,7 +76,7 @@ export default defineComponent({
|
||||||
type: formData.type.value,
|
type: formData.type.value,
|
||||||
color: formData.color.value,
|
color: formData.color.value,
|
||||||
nscdr: formData.nscdr.checked,
|
nscdr: formData.nscdr.checked,
|
||||||
passphrase: formData.passphrase?.value,
|
passphrase: formData.passphrase.value,
|
||||||
};
|
};
|
||||||
this.status = "loading";
|
this.status = "loading";
|
||||||
this.createCalendarType(createCalendarType)
|
this.createCalendarType(createCalendarType)
|
||||||
|
|
|
@ -1,97 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="relative w-full md:max-w-md">
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<p class="text-xl font-medium">Termin</p>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<div class="flex flex-col gap-4 py-2">
|
|
||||||
<div>
|
|
||||||
<label for="title">Terminart</label>
|
|
||||||
<input type="text" id="title" readonly :value="data.type?.type" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="title">Titel</label>
|
|
||||||
<input type="text" id="title" readonly :value="data.title" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="content">Beschreibung</label>
|
|
||||||
<textarea id="content" class="h-18" readonly :value="data.content"></textarea>
|
|
||||||
</div>
|
|
||||||
<div v-if="data.allDay" class="flex flex-row gap-2 items-center">Der Termin findet ganztägig statt.</div>
|
|
||||||
<div v-if="data.allDay == false" class="flex flex-row gap-2">
|
|
||||||
<div class="w-full">
|
|
||||||
<label for="starttime">Startzeit</label>
|
|
||||||
<input type="datetime-local" id="starttime" readonly :value="formatForDateTimeLocalInput(data.starttime)" />
|
|
||||||
</div>
|
|
||||||
<div class="w-full">
|
|
||||||
<label for="endtime">Endzeit</label>
|
|
||||||
<input
|
|
||||||
ref="endtime"
|
|
||||||
type="datetime-local"
|
|
||||||
id="endtime"
|
|
||||||
readonly
|
|
||||||
:value="formatForDateTimeLocalInput(data.endtime)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="flex flex-row gap-2">
|
|
||||||
<div class="w-full">
|
|
||||||
<label for="startdate">Startdatum</label>
|
|
||||||
<input type="date" id="startdate" readonly :value="formatForDateInput(data.starttime)" />
|
|
||||||
</div>
|
|
||||||
<div class="w-full">
|
|
||||||
<label for="enddate">Enddatum</label>
|
|
||||||
<input ref="enddate" type="date" id="enddate" readonly :value="formatForDateInput(data.endtime)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="location">Ort</label>
|
|
||||||
<input type="text" id="location" readonly :value="data.location" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-row justify-end">
|
|
||||||
<div class="flex flex-row gap-4 py-2">
|
|
||||||
<button primary-outline @click="closeModal">schließen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
|
||||||
import { mapState, mapActions } from "pinia";
|
|
||||||
import { useModalStore } from "@/stores/modal";
|
|
||||||
import Spinner from "@/components/Spinner.vue";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default defineComponent({
|
|
||||||
computed: {
|
|
||||||
...mapState(useModalStore, ["data"]),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(useModalStore, ["closeModal"]),
|
|
||||||
formatForDateTimeLocalInput(utcDateString: string) {
|
|
||||||
const localDate = new Date(utcDateString);
|
|
||||||
|
|
||||||
const year = localDate.getFullYear();
|
|
||||||
const month = String(localDate.getMonth() + 1).padStart(2, "0");
|
|
||||||
const day = String(localDate.getDate()).padStart(2, "0");
|
|
||||||
const hours = String(localDate.getHours()).padStart(2, "0");
|
|
||||||
const minutes = String(localDate.getMinutes()).padStart(2, "0");
|
|
||||||
|
|
||||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
|
||||||
},
|
|
||||||
formatForDateInput(utcDateString: string) {
|
|
||||||
const localDate = new Date(utcDateString);
|
|
||||||
|
|
||||||
const year = localDate.getFullYear();
|
|
||||||
const month = String(localDate.getMonth() + 1).padStart(2, "0");
|
|
||||||
const day = String(localDate.getDate()).padStart(2, "0");
|
|
||||||
|
|
||||||
return `${year}-${month}-${day}`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -40,16 +40,6 @@ export const useMemberStore = defineStore("member", {
|
||||||
this.loading = "failed";
|
this.loading = "failed";
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
async getMembersByIds(ids: Array<number>): Promise<AxiosResponse<any, any>> {
|
|
||||||
return await http.get(`/admin/member?ids=${ids.join(",")}&noLimit=true`).then((res) => {
|
|
||||||
return { ...res, data: res.data.members };
|
|
||||||
});
|
|
||||||
},
|
|
||||||
async searchMembers(search: string): Promise<AxiosResponse<any, any>> {
|
|
||||||
return await http.get(`/admin/member?search=${search}&noLimit=true`).then((res) => {
|
|
||||||
return { ...res, data: res.data.members };
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fetchMemberByActiveId() {
|
fetchMemberByActiveId() {
|
||||||
this.loadingActive = "loading";
|
this.loadingActive = "loading";
|
||||||
http
|
http
|
||||||
|
@ -94,10 +84,10 @@ export const useMemberStore = defineStore("member", {
|
||||||
this.fetchMembers();
|
this.fetchMembers();
|
||||||
return result;
|
return result;
|
||||||
},
|
},
|
||||||
async printMemberList() {
|
async printMemberList(){
|
||||||
return http.get(`/admin/member/print/namelist`, {
|
return http.get(`/admin/member/print/namelist`, {
|
||||||
responseType: "blob",
|
responseType: "blob",
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -63,7 +63,7 @@ export const useNavigationStore = defineStore("navigation", {
|
||||||
{
|
{
|
||||||
key: "settings",
|
key: "settings",
|
||||||
title: "Einstellungen",
|
title: "Einstellungen",
|
||||||
levelDefault: "award",
|
levelDefault: "qualification",
|
||||||
} as topLevelNavigationModel,
|
} as topLevelNavigationModel,
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
|
|
|
@ -23,14 +23,63 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<MemberSearchSelect
|
<div class="w-full">
|
||||||
title="weitere Empfänger suchen"
|
<Combobox v-model="recipients" :disabled="!can('create', 'club', 'newsletter')" multiple>
|
||||||
v-model="recipients"
|
<ComboboxLabel>weitere Empfänger suchen</ComboboxLabel>
|
||||||
:disabled="!can('create', 'club', 'newsletter')"
|
<div class="relative mt-1">
|
||||||
@add:member="(s) => members.push(s)"
|
<ComboboxInput
|
||||||
@add:member-by-array="(s) => members.push(...s)"
|
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>
|
||||||
|
<TransitionRoot
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
@after-leave="query = ''"
|
||||||
|
>
|
||||||
|
<ComboboxOptions
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
:value="member.id"
|
||||||
|
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>
|
||||||
<p>Ausgewählte Empfänger</p>
|
<p>Ausgewählte Empfänger</p>
|
||||||
<div class="flex flex-col gap-2 grow overflow-y-auto">
|
<div class="flex flex-col gap-2 grow overflow-y-auto">
|
||||||
<div
|
<div
|
||||||
|
@ -76,7 +125,6 @@ import { useAbilityStore } from "@/stores/ability";
|
||||||
import { useQueryStoreStore } from "@/stores/admin/settings/queryStore";
|
import { useQueryStoreStore } from "@/stores/admin/settings/queryStore";
|
||||||
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
|
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
|
||||||
import cloneDeep from "lodash.clonedeep";
|
import cloneDeep from "lodash.clonedeep";
|
||||||
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -92,19 +140,27 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
query: "" as String,
|
query: "" as String,
|
||||||
members: [] as Array<MemberViewModel>,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
|
...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
|
||||||
...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
|
...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
|
||||||
|
...mapState(useMemberStore, ["members"]),
|
||||||
...mapState(useQueryStoreStore, ["queries"]),
|
...mapState(useQueryStoreStore, ["queries"]),
|
||||||
...mapState(useQueryBuilderStore, ["data"]),
|
...mapState(useQueryBuilderStore, ["data"]),
|
||||||
...mapState(useAbilityStore, ["can"]),
|
...mapState(useAbilityStore, ["can"]),
|
||||||
selected(): Array<MemberViewModel> {
|
filtered(): Array<MemberViewModel> {
|
||||||
return this.members
|
return this.query === ""
|
||||||
.filter((m) => this.recipients.includes(m.id))
|
? this.members
|
||||||
.sort((a, b) => {
|
: 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.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;
|
||||||
|
@ -112,6 +168,9 @@ export default defineComponent({
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
selected(): Array<MemberViewModel> {
|
||||||
|
return this.members.filter((m) => this.recipients.includes(m.id));
|
||||||
|
},
|
||||||
queried(): Array<MemberViewModel> {
|
queried(): Array<MemberViewModel> {
|
||||||
if (this.recipientsByQueryId == "def") return [];
|
if (this.recipientsByQueryId == "def") return [];
|
||||||
let keys = Object.keys(this.data?.[0] ?? {});
|
let keys = Object.keys(this.data?.[0] ?? {});
|
||||||
|
@ -146,6 +205,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.fetchMembers(0, 1000, "", true);
|
||||||
// this.fetchNewsletterRecipients();
|
// this.fetchNewsletterRecipients();
|
||||||
this.fetchQueries();
|
this.fetchQueries();
|
||||||
this.loadQuery();
|
this.loadQuery();
|
||||||
|
|
|
@ -5,19 +5,64 @@
|
||||||
↺ laden fehlgeschlagen
|
↺ laden fehlgeschlagen
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<MemberSearchSelect
|
<div class="w-full">
|
||||||
title="Anwesende suchen"
|
<Combobox v-model="presence" :disabled="!can('create', 'club', 'protocol')" multiple by="memberId">
|
||||||
:model-value="presence.map((p) => p.memberId)"
|
<ComboboxLabel>Anwesende suchen</ComboboxLabel>
|
||||||
:disabled="!can('create', 'club', 'protocol')"
|
<div class="relative mt-1">
|
||||||
@add:difference="
|
<ComboboxInput
|
||||||
(id: number) =>
|
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"
|
||||||
presence.push({ memberId: id, absent: false, excused: true, protocolId: parseInt(protocolId ?? '') })
|
@input="query = $event.target.value"
|
||||||
"
|
|
||||||
@add:member="(s) => members.push(s)"
|
|
||||||
@add:member-by-array="(s) => members.push(...s)"
|
|
||||||
@remove:difference="removeSelected"
|
|
||||||
/>
|
/>
|
||||||
|
<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>
|
||||||
|
<TransitionRoot
|
||||||
|
leave="transition ease-in duration-100"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
@after-leave="query = ''"
|
||||||
|
>
|
||||||
|
<ComboboxOptions
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<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.memberId"
|
||||||
|
:value="member"
|
||||||
|
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 }">
|
||||||
|
{{ getMember(member.memberId)?.firstname }} {{ getMember(member.memberId)?.lastname }}
|
||||||
|
{{ getMember(member.memberId)?.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 />
|
<br />
|
||||||
<p>Anwesenheit</p>
|
<p>Anwesenheit</p>
|
||||||
<div class="flex flex-col gap-2 grow overflow-y-auto">
|
<div class="flex flex-col gap-2 grow overflow-y-auto">
|
||||||
|
@ -56,11 +101,22 @@
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||||
import Spinner from "@/components/Spinner.vue";
|
import Spinner from "@/components/Spinner.vue";
|
||||||
|
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";
|
import { TrashIcon } from "@heroicons/vue/24/outline";
|
||||||
|
import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
|
||||||
|
import { useMemberStore } from "@/stores/admin/club/member/member";
|
||||||
|
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||||
import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
|
import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
|
||||||
import { useAbilityStore } from "@/stores/ability";
|
import { useAbilityStore } from "@/stores/ability";
|
||||||
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
|
|
||||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -71,20 +127,36 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
query: "" as String,
|
query: "" as String,
|
||||||
members: [] as Array<MemberViewModel>,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
|
...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
|
||||||
|
...mapState(useMemberStore, ["members"]),
|
||||||
...mapState(useAbilityStore, ["can"]),
|
...mapState(useAbilityStore, ["can"]),
|
||||||
|
filtered(): Array<{ memberId: number; absent: boolean; excused: boolean; protocolId: number }> {
|
||||||
|
return (
|
||||||
|
this.query === ""
|
||||||
|
? this.members
|
||||||
|
: this.members.filter((member) =>
|
||||||
|
(member.firstname + " " + member.lastname)
|
||||||
|
.toLowerCase()
|
||||||
|
.replace(/\s+/g, "")
|
||||||
|
.includes(this.query.toLowerCase().replace(/\s+/g, ""))
|
||||||
|
)
|
||||||
|
).map((m) => ({ memberId: m.id, absent: false, excused: true, protocolId: parseInt(this.protocolId ?? "") }));
|
||||||
|
},
|
||||||
getMember() {
|
getMember() {
|
||||||
return (memberId: number) => {
|
return (memberId: number) => {
|
||||||
return this.members.find((m) => memberId == m.id);
|
return this.members.find((m) => memberId == m.id);
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {
|
||||||
|
this.fetchMembers(0, 1000, "", true);
|
||||||
|
// this.fetchProtocolPresence();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
...mapActions(useMemberStore, ["fetchMembers"]),
|
||||||
...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
|
...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
|
||||||
removeSelected(id: number) {
|
removeSelected(id: number) {
|
||||||
let index = this.presence.findIndex((s) => s.memberId == id);
|
let index = this.presence.findIndex((s) => s.memberId == id);
|
||||||
|
|
|
@ -58,10 +58,8 @@ import Spinner from "@/components/Spinner.vue";
|
||||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||||
import FailureXMark from "@/components/FailureXMark.vue";
|
import FailureXMark from "@/components/FailureXMark.vue";
|
||||||
import { RouterLink } from "vue-router";
|
import { RouterLink } from "vue-router";
|
||||||
import type {
|
import type { CalendarTypeViewModel, UpdateCalendarTypeViewModel } from "@/viewmodels/admin/settings/calendarType.models";
|
||||||
CalendarTypeViewModel,
|
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||||
UpdateCalendarTypeViewModel,
|
|
||||||
} from "@/viewmodels/admin/settings/calendarType.models";
|
|
||||||
import cloneDeep from "lodash.clonedeep";
|
import cloneDeep from "lodash.clonedeep";
|
||||||
import isEqual from "lodash.isequal";
|
import isEqual from "lodash.isequal";
|
||||||
</script>
|
</script>
|
||||||
|
@ -117,7 +115,7 @@ export default defineComponent({
|
||||||
type: formData.type.value,
|
type: formData.type.value,
|
||||||
color: formData.color.value,
|
color: formData.color.value,
|
||||||
nscdr: formData.nscdr.checked,
|
nscdr: formData.nscdr.checked,
|
||||||
passphrase: formData.passphrase?.value,
|
passphrase: formData.passphrase.value,
|
||||||
};
|
};
|
||||||
this.status = "loading";
|
this.status = "loading";
|
||||||
this.updateActiveCalendarType(updateCalendarType)
|
this.updateActiveCalendarType(updateCalendarType)
|
||||||
|
|
|
@ -73,7 +73,6 @@ export default defineComponent({
|
||||||
weekText: "KW",
|
weekText: "KW",
|
||||||
allDaySlot: false,
|
allDaySlot: false,
|
||||||
events: this.formattedItems,
|
events: this.formattedItems,
|
||||||
eventClick: this.eventClick,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -93,12 +92,6 @@ export default defineComponent({
|
||||||
openLinkModal(e: any) {
|
openLinkModal(e: any) {
|
||||||
this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
|
this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
|
||||||
},
|
},
|
||||||
eventClick(e: any) {
|
|
||||||
this.openModal(
|
|
||||||
markRaw(defineAsyncComponent(() => import("@/components/public/calendar/ShowCalendarEntryModal.vue"))),
|
|
||||||
this.calendars.find((c) => c.id == e.event.id)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue