update usage of salutation

src/views/admin/club/members/MemberEdit.vue

@@ -9,7 +9,7 @@
     >
       <p class="mx-auto">Mitglied bearbeiten</p>
       <div>
-        <Listbox v-model="member.salutation" name="salutation">
+        <Listbox v-model="member.salutation" name="salutation" by="id">
           <ListboxLabel>Anrede</ListboxLabel>
           <div class="relative mt-1">
             <ListboxButton
@@ -32,7 +32,7 @@
                 <ListboxOption
                   v-slot="{ active, selected }"
                   v-for="salutation in salutations"
-                  :key="salutation"
+                  :key="salutation.id"
                   :value="salutation"
                   as="template"
                 >
@@ -42,7 +42,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>
@@ -101,7 +103,7 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } f
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
-import { Salutation } from "@/enums/salutation";
+import { useSalutationStore } from "../../../../stores/admin/settings/salutation";
 </script>
 
 <script lang="ts">
@@ -123,7 +125,6 @@ export default defineComponent({
       status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       member: null as null | MemberViewModel,
       timeout: null as any,
-      salutations: [] as Array<string>,
     };
   },
   computed: {
@@ -131,10 +132,10 @@ export default defineComponent({
       return isEqual(this.activeMemberObj, this.member);
     },
     ...mapState(useMemberStore, ["activeMemberObj", "loadingActive"]),
+    ...mapState(useSalutationStore, ["salutations"]),
   },
   mounted() {
     this.fetchItem();
-    this.salutations = Object.values(Salutation);
   },
   beforeUnmount() {
     try {
@@ -154,11 +155,11 @@ export default defineComponent({
       let formData = e.target.elements;
       let updateMember: UpdateMemberViewModel = {
         id: this.member.id,
-        salutation: formData.salutation.value,
+        salutationId: formData.salutation.value,
         firstname: formData.firstname.value,
         lastname: formData.lastname.value,
         nameaffix: formData.nameaffix.value,
-        birthdate: formData.birthdate.value,        
+        birthdate: formData.birthdate.value,
         internalId: formData.internalId.value,
       };
       this.status = "loading";