#23-cleanup-&-enhancements #24
10 changed files with 30 additions and 56 deletions
|
@ -66,6 +66,10 @@
|
||||||
<label for="birthdate">Geburtsdatum</label>
|
<label for="birthdate">Geburtsdatum</label>
|
||||||
<input type="date" id="birthdate" required />
|
<input type="date" id="birthdate" required />
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="internalId">Interne ID (optional)</label>
|
||||||
|
<input type="text" id="internalId" />
|
||||||
|
</div>
|
||||||
<div class="flex flex-row gap-2">
|
<div class="flex flex-row gap-2">
|
||||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
|
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
|
||||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||||
|
@ -127,6 +131,7 @@ export default defineComponent({
|
||||||
lastname: formData.lastname.value,
|
lastname: formData.lastname.value,
|
||||||
nameaffix: formData.nameaffix.value,
|
nameaffix: formData.nameaffix.value,
|
||||||
birthdate: formData.birthdate.value,
|
birthdate: formData.birthdate.value,
|
||||||
|
internalId: formData.internalId.value,
|
||||||
};
|
};
|
||||||
this.createMember(createMember)
|
this.createMember(createMember)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
|
|
|
@ -1,41 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
|
<RouterLink
|
||||||
<RouterLink
|
:to="{ name: 'admin-club-member-overview', params: { memberId: member.id } }"
|
||||||
:to="{ name: 'admin-club-member-overview', params: { memberId: member.id } }"
|
class="flex flex-col h-fit w-full border border-primary rounded-md"
|
||||||
|
>
|
||||||
|
<div
|
||||||
class="bg-primary p-2 text-white flex flex-row justify-between items-center"
|
class="bg-primary p-2 text-white flex flex-row justify-between items-center"
|
||||||
>
|
>
|
||||||
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
|
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
|
||||||
<div v-if="false" class="flex flex-row">
|
|
||||||
<RouterLink
|
|
||||||
v-if="can('read', 'club', 'member')"
|
|
||||||
:to="{ name: 'admin-club-member-overview', params: { memberId: member.id } }"
|
|
||||||
>
|
|
||||||
<CircleStackIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
|
||||||
</RouterLink>
|
|
||||||
<RouterLink
|
|
||||||
v-if="can('update', 'club', 'member')"
|
|
||||||
:to="{ name: 'admin-club-member-edit', params: { id: member.id } }"
|
|
||||||
>
|
|
||||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
|
||||||
</RouterLink>
|
|
||||||
<div v-if="can('delete', 'club', 'member')" @click="openDeleteModal">
|
|
||||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</RouterLink>
|
|
||||||
<div class="p-2">
|
|
||||||
<p>beigetreten: {{ member.firstMembershipEntry?.start }}</p>
|
|
||||||
<p v-if="member.lastMembershipEntry?.end">ausgetreten: {{ member.lastMembershipEntry?.end }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="p-2">
|
||||||
|
<p v-if="member.internalId">Interne ID: {{ member.internalId }}</p>
|
||||||
|
<p>beigetreten: {{ member.firstMembershipEntry?.start }}</p>
|
||||||
|
<p v-if="member.lastMembershipEntry?.end">ausgetreten: {{ member.lastMembershipEntry?.end }}, da {{member.lastMembershipEntry?.terminationReason ?? '- kein Grund angegeben'}}</p>
|
||||||
|
</div>
|
||||||
|
</RouterLink>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
|
import { defineComponent, type PropType } from "vue";
|
||||||
import { mapState, mapActions } from "pinia";
|
import { mapState, mapActions } from "pinia";
|
||||||
import { PencilIcon, TrashIcon, CircleStackIcon } from "@heroicons/vue/24/outline";
|
|
||||||
import { useAbilityStore } from "@/stores/ability";
|
import { useAbilityStore } from "@/stores/ability";
|
||||||
import { useModalStore } from "@/stores/modal";
|
|
||||||
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
|
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -47,14 +31,5 @@ export default defineComponent({
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(useAbilityStore, ["can"]),
|
...mapState(useAbilityStore, ["can"]),
|
||||||
},
|
},
|
||||||
methods: {
|
|
||||||
...mapActions(useModalStore, ["openModal"]),
|
|
||||||
openDeleteModal() {
|
|
||||||
// this.openModal(
|
|
||||||
// markRaw(defineAsyncComponent(() => import("@/components/admin/.vue"))),
|
|
||||||
// this.member.id
|
|
||||||
// );
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -63,10 +63,6 @@
|
||||||
</div>
|
</div>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label for="internalId">Interne ID (optional)</label>
|
|
||||||
<input type="text" id="internalId" />
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<label for="start">Startdatum</label>
|
<label for="start">Startdatum</label>
|
||||||
<input type="date" id="start" required />
|
<input type="date" id="start" required />
|
||||||
|
@ -132,7 +128,6 @@ export default defineComponent({
|
||||||
if (this.selectedStatus == undefined) return;
|
if (this.selectedStatus == undefined) return;
|
||||||
let formData = e.target.elements;
|
let formData = e.target.elements;
|
||||||
let createMember: CreateMembershipViewModel = {
|
let createMember: CreateMembershipViewModel = {
|
||||||
internalId: formData.internalId.value,
|
|
||||||
start: formData.start.value,
|
start: formData.start.value,
|
||||||
statusId: this.selectedStatus.id,
|
statusId: this.selectedStatus.id,
|
||||||
};
|
};
|
||||||
|
|
|
@ -63,10 +63,6 @@
|
||||||
</div>
|
</div>
|
||||||
</Listbox>
|
</Listbox>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<label for="internalId">Interne ID (optional)</label>
|
|
||||||
<input type="text" id="internalId" v-model="membership.internalId" />
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<label for="start">Startdatum</label>
|
<label for="start">Startdatum</label>
|
||||||
<input type="date" id="start" required v-model="membership.start" />
|
<input type="date" id="start" required v-model="membership.start" />
|
||||||
|
@ -169,7 +165,6 @@ export default defineComponent({
|
||||||
let formData = e.target.elements;
|
let formData = e.target.elements;
|
||||||
let updateMembership: UpdateMembershipViewModel = {
|
let updateMembership: UpdateMembershipViewModel = {
|
||||||
id: this.membership.id,
|
id: this.membership.id,
|
||||||
internalId: formData.internalId.value,
|
|
||||||
start: formData.start.value,
|
start: formData.start.value,
|
||||||
end: formData.end.value,
|
end: formData.end.value,
|
||||||
terminationReason: formData.terminationReason.value,
|
terminationReason: formData.terminationReason.value,
|
||||||
|
|
|
@ -8,9 +8,8 @@
|
||||||
<PencilIcon v-if="can('update', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openEditModal" />
|
<PencilIcon v-if="can('update', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openEditModal" />
|
||||||
<TrashIcon v-if="can('delete', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
|
<TrashIcon v-if="can('delete', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="membership.terminationReason || membership.internalId" class="p-2">
|
<div v-if="membership.terminationReason" class="p-2">
|
||||||
<p v-if="membership.internalId">Interne ID: {{ membership.internalId }}</p>
|
<p v-if="membership.terminationReason">Grund: {{ membership.terminationReason }}</p>
|
||||||
<p v-if="membership.terminationReason">beendet, weil: {{ membership.terminationReason }}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -62,6 +62,7 @@ export const useMemberStore = defineStore("member", {
|
||||||
lastname: member.lastname,
|
lastname: member.lastname,
|
||||||
nameaffix: member.nameaffix,
|
nameaffix: member.nameaffix,
|
||||||
birthdate: member.birthdate,
|
birthdate: member.birthdate,
|
||||||
|
internalId: member.internalId,
|
||||||
});
|
});
|
||||||
this.fetchMembers();
|
this.fetchMembers();
|
||||||
return result;
|
return result;
|
||||||
|
@ -73,6 +74,7 @@ export const useMemberStore = defineStore("member", {
|
||||||
lastname: member.lastname,
|
lastname: member.lastname,
|
||||||
nameaffix: member.nameaffix,
|
nameaffix: member.nameaffix,
|
||||||
birthdate: member.birthdate,
|
birthdate: member.birthdate,
|
||||||
|
internalId: member.internalId,
|
||||||
});
|
});
|
||||||
this.fetchMembers();
|
this.fetchMembers();
|
||||||
return result;
|
return result;
|
||||||
|
|
|
@ -38,7 +38,6 @@ export const useMembershipStore = defineStore("membership", {
|
||||||
async createMembership(membership: CreateMembershipViewModel): Promise<AxiosResponse<any, any>> {
|
async createMembership(membership: CreateMembershipViewModel): Promise<AxiosResponse<any, any>> {
|
||||||
const memberId = useMemberStore().activeMember;
|
const memberId = useMemberStore().activeMember;
|
||||||
const result = await http.post(`/admin/member/${memberId}/membership`, {
|
const result = await http.post(`/admin/member/${memberId}/membership`, {
|
||||||
internalId: membership.internalId,
|
|
||||||
start: membership.start,
|
start: membership.start,
|
||||||
statusId: membership.statusId,
|
statusId: membership.statusId,
|
||||||
});
|
});
|
||||||
|
@ -48,7 +47,6 @@ export const useMembershipStore = defineStore("membership", {
|
||||||
async updateMembership(membership: UpdateMembershipViewModel): Promise<AxiosResponse<any, any>> {
|
async updateMembership(membership: UpdateMembershipViewModel): Promise<AxiosResponse<any, any>> {
|
||||||
const memberId = useMemberStore().activeMember;
|
const memberId = useMemberStore().activeMember;
|
||||||
const result = await http.patch(`/admin/member/${memberId}/membership/${membership.id}`, {
|
const result = await http.patch(`/admin/member/${memberId}/membership/${membership.id}`, {
|
||||||
internalId: membership.internalId,
|
|
||||||
start: membership.start,
|
start: membership.start,
|
||||||
end: membership.end,
|
end: membership.end,
|
||||||
terminationReason: membership.terminationReason,
|
terminationReason: membership.terminationReason,
|
||||||
|
|
|
@ -9,6 +9,7 @@ export interface MemberViewModel {
|
||||||
lastname: string;
|
lastname: string;
|
||||||
nameaffix: string;
|
nameaffix: string;
|
||||||
birthdate: Date;
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
firstMembershipEntry?: MembershipViewModel;
|
firstMembershipEntry?: MembershipViewModel;
|
||||||
lastMembershipEntry?: MembershipViewModel;
|
lastMembershipEntry?: MembershipViewModel;
|
||||||
sendNewsletter?: CommunicationViewModel;
|
sendNewsletter?: CommunicationViewModel;
|
||||||
|
@ -22,6 +23,7 @@ export interface CreateMemberViewModel {
|
||||||
lastname: string;
|
lastname: string;
|
||||||
nameaffix: string;
|
nameaffix: string;
|
||||||
birthdate: Date;
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UpdateMemberViewModel {
|
export interface UpdateMemberViewModel {
|
||||||
|
@ -31,4 +33,5 @@ export interface UpdateMemberViewModel {
|
||||||
lastname: string;
|
lastname: string;
|
||||||
nameaffix: string;
|
nameaffix: string;
|
||||||
birthdate: Date;
|
birthdate: Date;
|
||||||
|
internalId?: string;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
export interface MembershipViewModel {
|
export interface MembershipViewModel {
|
||||||
id: number;
|
id: number;
|
||||||
internalId?: string;
|
|
||||||
start: Date;
|
start: Date;
|
||||||
end?: Date;
|
end?: Date;
|
||||||
terminationReason?: string;
|
terminationReason?: string;
|
||||||
|
@ -9,14 +8,12 @@ export interface MembershipViewModel {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CreateMembershipViewModel {
|
export interface CreateMembershipViewModel {
|
||||||
internalId?: string;
|
|
||||||
start: Date;
|
start: Date;
|
||||||
statusId: number;
|
statusId: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UpdateMembershipViewModel {
|
export interface UpdateMembershipViewModel {
|
||||||
id: number;
|
id: number;
|
||||||
internalId?: string;
|
|
||||||
start: Date;
|
start: Date;
|
||||||
end?: Date;
|
end?: Date;
|
||||||
terminationReason?: string;
|
terminationReason?: string;
|
||||||
|
|
|
@ -69,6 +69,10 @@
|
||||||
<label for="birthdate">Geburtsdatum</label>
|
<label for="birthdate">Geburtsdatum</label>
|
||||||
<input type="date" id="birthdate" required v-model="member.birthdate" />
|
<input type="date" id="birthdate" required v-model="member.birthdate" />
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="internalId">Interne ID (optional)</label>
|
||||||
|
<input type="text" id="internalId" v-model="member.internalId" />
|
||||||
|
</div>
|
||||||
<div class="flex flex-row justify-end gap-2">
|
<div class="flex flex-row justify-end gap-2">
|
||||||
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
|
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
|
||||||
verwerfen
|
verwerfen
|
||||||
|
@ -154,7 +158,8 @@ export default defineComponent({
|
||||||
firstname: formData.firstname.value,
|
firstname: formData.firstname.value,
|
||||||
lastname: formData.lastname.value,
|
lastname: formData.lastname.value,
|
||||||
nameaffix: formData.nameaffix.value,
|
nameaffix: formData.nameaffix.value,
|
||||||
birthdate: formData.birthdate.value,
|
birthdate: formData.birthdate.value,
|
||||||
|
internalId: formData.internalId.value,
|
||||||
};
|
};
|
||||||
this.status = "loading";
|
this.status = "loading";
|
||||||
this.updateActiveMember(updateMember)
|
this.updateActiveMember(updateMember)
|
||||||
|
|
Loading…
Reference in a new issue