update usage of salutation

src/components/admin/club/member/CreateMemberModal.vue

@@ -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,

src/components/admin/club/member/DeleteMemberModal.vue

@@ -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>

src/enums/salutation.ts

@@ -1,6 +0,0 @@
-export enum Salutation {
-  sir = "sir",
-  madam = "madam",
-  other = "other",
-  none = "none",
-}

src/stores/admin/settings/salutation.ts

@@ -0,0 +1,53 @@
+import { defineStore } from "pinia";
+import type {
+  CreateSalutationViewModel,
+  UpdateSalutationViewModel,
+  SalutationViewModel,
+} from "@/viewmodels/admin/settings/salutation.models";
+import { http } from "@/serverCom";
+import type { AxiosResponse } from "axios";
+
+export const useSalutationStore = defineStore("salutation", {
+  state: () => {
+    return {
+      salutations: [] as Array<SalutationViewModel>,
+      loading: "loading" as "loading" | "fetched" | "failed",
+    };
+  },
+  actions: {
+    fetchSalutations() {
+      this.loading = "loading";
+      http
+        .get("/admin/salutation")
+        .then((result) => {
+          this.salutations = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    fetchSalutationById(id: number): Promise<AxiosResponse<any, any>> {
+      return http.get(`/admin/salutation/${id}`);
+    },
+    async createSalutation(salutation: CreateSalutationViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/salutation`, {
+        salutation: salutation.salutation,
+      });
+      this.fetchSalutations();
+      return result;
+    },
+    async updateActiveSalutation(salutation: UpdateSalutationViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.patch(`/admin/salutation/${salutation.id}`, {
+        salutation: salutation.salutation,
+      });
+      this.fetchSalutations();
+      return result;
+    },
+    async deleteSalutation(salutation: number): Promise<AxiosResponse<any, any>> {
+      const result = await http.delete(`/admin/salutation/${salutation}`);
+      this.fetchSalutations();
+      return result;
+    },
+  },
+});

src/types/permissionTypes.ts

@@ -11,6 +11,7 @@ export type PermissionModule =
   | "executive_position"
   | "communication_type"
   | "membership_status"
+  | "salutation"
   | "calendar_type"
   | "user"
   | "role"
@@ -53,6 +54,7 @@ export const permissionModules: Array<PermissionModule> = [
   "executive_position",
   "communication_type",
   "membership_status",
+  "salutation",
   "calendar_type",
   "user",
   "role",
@@ -71,6 +73,7 @@ export const sectionsAndModules: SectionsAndModulesObject = {
     "executive_position",
     "communication_type",
     "membership_status",
+    "salutation",
     "calendar_type",
     "query_store",
     "template",

src/viewmodels/admin/club/member/member.models.ts

@@ -1,10 +1,10 @@
-import { Salutation } from "@/enums/salutation";
 import type { CommunicationViewModel } from "./communication.models";
 import type { MembershipViewModel } from "./membership.models";
+import type { SalutationViewModel } from "../../settings/salutation.models";
 
 export interface MemberViewModel {
   id: number;
-  salutation: Salutation;
+  salutation: SalutationViewModel;
   firstname: string;
   lastname: string;
   nameaffix: string;
@@ -19,7 +19,7 @@ export interface MemberViewModel {
 
 export interface MemberStatisticsViewModel {
   id: number;
-  salutation: Salutation;
+  salutation: string;
   firstname: string;
   lastname: string;
   nameaffix: string;
@@ -30,7 +30,7 @@ export interface MemberStatisticsViewModel {
 }
 
 export interface CreateMemberViewModel {
-  salutation: Salutation;
+  salutationId: number;
   firstname: string;
   lastname: string;
   nameaffix: string;
@@ -40,7 +40,7 @@ export interface CreateMemberViewModel {
 
 export interface UpdateMemberViewModel {
   id: number;
-  salutation: Salutation;
+  salutationId: number;
   firstname: string;
   lastname: string;
   nameaffix: string;

src/viewmodels/admin/club/member/membership.models.ts

@@ -1,5 +1,3 @@
-import type { Salutation } from "../../../../enums/salutation";
-
 export interface MembershipViewModel {
   id: number;
   start: Date;
@@ -15,7 +13,7 @@ export interface MembershipStatisticsViewModel {
   status: string;
   statusId: number;
   memberId: number;
-  memberSalutation: Salutation;
+  memberSalutation: string;
   memberFirstname: string;
   memberLastname: string;
   memberNameaffix: string;

src/viewmodels/admin/settings/salutation.models.ts

@@ -0,0 +1,13 @@
+export interface SalutationViewModel {
+  id: number;
+  salutation: string;
+}
+
+export interface CreateSalutationViewModel {
+  salutation: string;
+}
+
+export interface UpdateSalutationViewModel {
+  id: number;
+  salutation: string;
+}

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";