member search component
This commit is contained in:
parent
4dc183f52b
commit
c40b53b200
4 changed files with 214 additions and 168 deletions
168
src/components/admin/MemberSearchSelect.vue
Normal file
168
src/components/admin/MemberSearchSelect.vue
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
<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>
|
||||
|
|
@ -40,6 +40,16 @@ export const useMemberStore = defineStore("member", {
|
|||
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() {
|
||||
this.loadingActive = "loading";
|
||||
http
|
||||
|
|
@ -84,10 +94,10 @@ export const useMemberStore = defineStore("member", {
|
|||
this.fetchMembers();
|
||||
return result;
|
||||
},
|
||||
async printMemberList(){
|
||||
async printMemberList() {
|
||||
return http.get(`/admin/member/print/namelist`, {
|
||||
responseType: "blob",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -23,63 +23,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<Combobox v-model="recipients" :disabled="!can('create', 'club', 'newsletter')" multiple>
|
||||
<ComboboxLabel>weitere Empfänger suchen</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>
|
||||
<MemberSearchSelect
|
||||
title="weitere Empfänger suchen"
|
||||
v-model="recipients"
|
||||
:disabled="!can('create', 'club', 'newsletter')"
|
||||
@add:member="(s) => members.push(s)"
|
||||
@add:member-by-array="(s) => members.push(...s)"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<div class="flex flex-col gap-2 grow overflow-y-auto">
|
||||
<div
|
||||
|
|
@ -125,6 +76,7 @@ import { useAbilityStore } from "@/stores/ability";
|
|||
import { useQueryStoreStore } from "@/stores/admin/settings/queryStore";
|
||||
import { useQueryBuilderStore } from "@/stores/admin/club/queryBuilder";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -140,36 +92,25 @@ export default defineComponent({
|
|||
data() {
|
||||
return {
|
||||
query: "" as String,
|
||||
members: [] as Array<MemberViewModel>,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(useNewsletterRecipientsStore, ["recipients", "loading"]),
|
||||
...mapWritableState(useNewsletterStore, ["activeNewsletterObj"]),
|
||||
...mapState(useMemberStore, ["members"]),
|
||||
...mapState(useQueryStoreStore, ["queries"]),
|
||||
...mapState(useQueryBuilderStore, ["data"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
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;
|
||||
});
|
||||
},
|
||||
selected(): Array<MemberViewModel> {
|
||||
return this.members.filter((m) => this.recipients.includes(m.id));
|
||||
return this.members
|
||||
.filter((m) => this.recipients.includes(m.id))
|
||||
.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;
|
||||
});
|
||||
},
|
||||
queried(): Array<MemberViewModel> {
|
||||
if (this.recipientsByQueryId == "def") return [];
|
||||
|
|
@ -205,7 +146,6 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMembers(0, 1000, "", true);
|
||||
// this.fetchNewsletterRecipients();
|
||||
this.fetchQueries();
|
||||
this.loadQuery();
|
||||
|
|
|
|||
|
|
@ -5,64 +5,19 @@
|
|||
↺ laden fehlgeschlagen
|
||||
</p>
|
||||
|
||||
<div class="w-full">
|
||||
<Combobox v-model="presence" :disabled="!can('create', 'club', 'protocol')" multiple by="memberId">
|
||||
<ComboboxLabel>Anwesende suchen</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>
|
||||
<MemberSearchSelect
|
||||
title="Anwesende suchen"
|
||||
:model-value="presence.map((p) => p.memberId)"
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
@add:difference="
|
||||
(id: number) =>
|
||||
presence.push({ memberId: id, absent: false, excused: true, protocolId: parseInt(protocolId ?? '') })
|
||||
"
|
||||
@add:member="(s) => members.push(s)"
|
||||
@add:member-by-array="(s) => members.push(...s)"
|
||||
@remove:difference="removeSelected"
|
||||
/>
|
||||
|
||||
<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 />
|
||||
<p>Anwesenheit</p>
|
||||
<div class="flex flex-col gap-2 grow overflow-y-auto">
|
||||
|
|
@ -101,22 +56,11 @@
|
|||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState, mapWritableState } from "pinia";
|
||||
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 { 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 { useAbilityStore } from "@/stores/ability";
|
||||
import MemberSearchSelect from "@/components/admin/MemberSearchSelect.vue";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -127,36 +71,20 @@ export default defineComponent({
|
|||
data() {
|
||||
return {
|
||||
query: "" as String,
|
||||
members: [] as Array<MemberViewModel>,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
|
||||
...mapState(useMemberStore, ["members"]),
|
||||
...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() {
|
||||
return (memberId: number) => {
|
||||
return this.members.find((m) => memberId == m.id);
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMembers(0, 1000, "", true);
|
||||
// this.fetchProtocolPresence();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
...mapActions(useMemberStore, ["fetchMembers"]),
|
||||
...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
|
||||
removeSelected(id: number) {
|
||||
let index = this.presence.findIndex((s) => s.memberId == id);
|
||||
|
|
|
|||
Loading…
Reference in a new issue