update usage of salutation
This commit is contained in:
parent
e330e3a7d6
commit
3866d406b2
9 changed files with 96 additions and 34 deletions
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue