update usage of salutation

This commit is contained in:
Julian Krauser 2025-01-25 11:57:58 +01:00
parent e330e3a7d6
commit 3866d406b2
9 changed files with 96 additions and 34 deletions

View file

@ -6,7 +6,7 @@
<br />
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
<div>
<Listbox v-model="selectedSalutation" name="salutation">
<Listbox v-model="selectedSalutation" name="salutation" by="id">
<ListboxLabel>Anrede</ListboxLabel>
<div class="relative mt-1">
<ListboxButton
@ -29,7 +29,7 @@
<ListboxOption
v-slot="{ active, selected }"
v-for="salutation in salutations"
:key="salutation"
:key="salutation.id"
:value="salutation"
as="template"
>
@ -39,7 +39,9 @@
'relative cursor-default select-none py-2 pl-10 pr-4',
]"
>
<span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ salutation }}</span>
<span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{
salutation.salutation
}}</span>
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
@ -97,9 +99,9 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { Salutation } from "@/enums/salutation";
import { useMemberStore } from "@/stores/admin/club/member/member";
import type { CreateMemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import { useSalutationStore } from "../../../../stores/admin/settings/salutation";
</script>
<script lang="ts">
@ -108,12 +110,11 @@ export default defineComponent({
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
salutations: [] as Array<string>,
selectedSalutation: Salutation.none as Salutation,
selectedSalutation: null as null | number,
};
},
mounted() {
this.salutations = Object.values(Salutation);
computed: {
...mapState(useSalutationStore, ["salutations"]),
},
beforeUnmount() {
try {
@ -123,10 +124,12 @@ export default defineComponent({
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useMemberStore, ["createMember"]),
...mapActions(useSalutationStore, ["fetchSalutations"]),
triggerCreate(e: any) {
if (!this.selectedSalutation) return;
let formData = e.target.elements;
let createMember: CreateMemberViewModel = {
salutation: this.selectedSalutation,
salutationId: this.selectedSalutation,
firstname: formData.firstname.value,
lastname: formData.lastname.value,
nameaffix: formData.nameaffix.value,

View file

@ -41,9 +41,6 @@ import { useModalStore } from "@/stores/modal";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { Salutation } from "@/enums/salutation";
import { useMemberStore } from "@/stores/admin/club/member/member";
import type { CreateMemberViewModel } from "@/viewmodels/admin/club/member/member.models";
</script>