salutation management views

public/ChartDB(administration-db).json

@@ -1,8 +1,8 @@
 {
   "id": "0",
   "name": "administration-db",
-  "createdAt": "2025-01-12T13:30:56.612Z",
+  "createdAt": "2025-01-25T11:15:11.340Z",
-  "updatedAt": "2025-01-12T13:30:56.612Z",
+  "updatedAt": "2025-01-25T11:15:11.340Z",
   "databaseType": "mariadb",
   "tables": [
     {
@@ -453,8 +453,8 @@
       "id": "35",
       "name": "membership",
       "schema": "administration",
-      "x": 431.0493261325482,
+      "x": 423.2353392314366,
-      "y": -194.01007034924007,
+      "y": -235.03350158007595,
       "fields": [
         {
           "id": "36",
@@ -698,8 +698,8 @@
       "id": "56",
       "name": "membership_status",
       "schema": "administration",
-      "x": 712.2717493973673,
+      "x": 704.4577624962558,
-      "y": -155.53936203938048,
+      "y": -196.5627932702164,
       "fields": [
         {
           "id": "57",
@@ -766,21 +766,6 @@
         },
         {
           "id": "62",
-          "name": "salutation",
-          "type": {
-            "id": "varchar",
-            "name": "varchar"
-          },
-          "primaryKey": false,
-          "unique": false,
-          "nullable": false,
-          "character_maximum_length": "255",
-          "default": "'none'",
-          "collation": "utf8mb4_general_ci",
-          "createdAt": 1734524896259
-        },
-        {
-          "id": "63",
           "name": "firstname",
           "type": {
             "id": "varchar",
@@ -794,7 +779,7 @@
           "createdAt": 1734524896259
         },
         {
-          "id": "64",
+          "id": "63",
           "name": "lastname",
           "type": {
             "id": "varchar",
@@ -808,7 +793,7 @@
           "createdAt": 1734524896259
         },
         {
-          "id": "65",
+          "id": "64",
           "name": "nameaffix",
           "type": {
             "id": "varchar",
@@ -822,7 +807,7 @@
           "createdAt": 1734524896259
         },
         {
-          "id": "66",
+          "id": "65",
           "name": "birthdate",
           "type": {
             "id": "date",
@@ -834,7 +819,7 @@
           "createdAt": 1734524896259
         },
         {
-          "id": "67",
+          "id": "66",
           "name": "internalId",
           "type": {
             "name": "varchar",
@@ -845,6 +830,21 @@
           "primaryKey": false,
           "createdAt": 1736351121650
         },
+        {
+          "id": "67",
+          "name": "salutationId",
+          "type": {
+            "name": "int",
+            "id": "int"
+          },
+          "primaryKey": false,
+          "unique": false,
+          "nullable": false,
+          "character_maximum_length": "255",
+          "default": "'none'",
+          "collation": "utf8mb4_general_ci",
+          "createdAt": 1734524896259
+        },
         {
           "id": "68",
           "name": "sendNewsletterId",
@@ -889,8 +889,8 @@
       "id": "71",
       "name": "communication_type",
       "schema": "administration",
-      "x": 712.818422135433,
+      "x": 735.756546723297,
-      "y": 325.42673695158805,
+      "y": 175.00748910518985,
       "fields": [
         {
           "id": "72",
@@ -1231,8 +1231,8 @@
       "id": "96",
       "name": "communication",
       "schema": "administration",
-      "x": 428.2501516386368,
+      "x": 451.18827622650076,
-      "y": 181.28410937476986,
+      "y": 30.864861528371677,
       "fields": [
         {
           "id": "97",
@@ -1682,11 +1682,48 @@
       "isMaterializedView": false,
       "createdAt": 1734524896260,
       "diagramId": "7gb18czobyir"
+    },
+    {
+      "id": "132",
+      "name": "salutation",
+      "x": 428.6069830535669,
+      "y": 516.5938067201159,
+      "fields": [
+        {
+          "id": "133",
+          "name": "id",
+          "type": {
+            "name": "int",
+            "id": "int"
+          },
+          "unique": true,
+          "nullable": false,
+          "primaryKey": true,
+          "createdAt": 1737803524494
+        },
+        {
+          "id": "134",
+          "name": "salutation",
+          "type": {
+            "name": "varchar",
+            "id": "varchar"
+          },
+          "unique": false,
+          "nullable": false,
+          "primaryKey": false,
+          "createdAt": 1737803546875
+        }
+      ],
+      "indexes": [],
+      "color": "#4dee8a",
+      "createdAt": 1737803524494,
+      "isView": false,
+      "order": 15
     }
   ],
   "relationships": [
     {
-      "id": "132",
+      "id": "135",
       "name": "FK_1fd52c8f109123e5a2c67dc2c83",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1700,7 +1737,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "133",
+      "id": "136",
       "name": "FK_21994db635b47e07f45b2686a51",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1714,7 +1751,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "134",
+      "id": "137",
       "name": "FK_2912b056a5d0b7977360a986164",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1728,7 +1765,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "135",
+      "id": "138",
       "name": "FK_3b4b41597707b13086e71727422",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1742,7 +1779,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "136",
+      "id": "139",
       "name": "FK_98b70e687c35709d2f01b3d7d74",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1756,7 +1793,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "137",
+      "id": "140",
       "name": "FK_a47e04bfd3671d8a375d1896d25",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1770,7 +1807,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "138",
+      "id": "141",
       "name": "FK_ba47b44c2ddf34c1bcc75df6675",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1784,7 +1821,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "139",
+      "id": "142",
       "name": "FK_dbebe53df1caa0b6715a220b0ea",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1798,7 +1835,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "140",
+      "id": "143",
       "name": "FK_e9fd4d37c4ac0fb08bd6eeeda3c",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1812,7 +1849,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "141",
+      "id": "144",
       "name": "FK_fc5f59e5c9aafdedd25ed8ed36e",
       "sourceSchema": "administration",
       "targetSchema": "administration",
@@ -1824,11 +1861,24 @@
       "targetCardinality": "one",
       "createdAt": 1734524896262,
       "diagramId": "7gb18czobyir"
+    },
+    {
+      "id": "145",
+      "name": "member_salutationId_fk",
+      "sourceSchema": "administration",
+      "sourceTableId": "60",
+      "targetSchema": "administration",
+      "targetTableId": "132",
+      "sourceFieldId": "67",
+      "targetFieldId": "133",
+      "sourceCardinality": "many",
+      "targetCardinality": "one",
+      "createdAt": 1737803651894
     }
   ],
   "dependencies": [
     {
-      "id": "142",
+      "id": "146",
       "schema": "administration",
       "tableId": "60",
       "dependentSchema": "administration",
@@ -1837,7 +1887,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "143",
+      "id": "147",
       "schema": "administration",
       "tableId": "127",
       "dependentSchema": "administration",
@@ -1846,7 +1896,7 @@
       "diagramId": "7gb18czobyir"
     },
     {
-      "id": "144",
+      "id": "148",
       "schema": "administration",
       "tableId": "112",
       "dependentSchema": "administration",
@@ -1854,55 +1904,19 @@
       "createdAt": 1734524897267,
       "diagramId": "7gb18czobyir"
     },
-    {
-      "id": "145",
-      "schema": "administration",
-      "tableId": "60",
-      "dependentSchema": "administration",
-      "dependentTableId": "11",
-      "createdAt": 1734524897283,
-      "diagramId": "7gb18czobyir"
-    },
-    {
-      "id": "146",
-      "schema": "administration",
-      "tableId": "1",
-      "dependentSchema": "administration",
-      "dependentTableId": "11",
-      "createdAt": 1734524897283,
-      "diagramId": "7gb18czobyir"
-    },
-    {
-      "id": "147",
-      "schema": "administration",
-      "tableId": "60",
-      "dependentSchema": "administration",
-      "dependentTableId": "21",
-      "createdAt": 1734524897244,
-      "diagramId": "7gb18czobyir"
-    },
-    {
-      "id": "148",
-      "schema": "administration",
-      "tableId": "56",
-      "dependentSchema": "administration",
-      "dependentTableId": "76",
-      "createdAt": 1734524897297,
-      "diagramId": "7gb18czobyir"
-    },
     {
       "id": "149",
       "schema": "administration",
-      "tableId": "35",
+      "tableId": "60",
       "dependentSchema": "administration",
-      "dependentTableId": "76",
+      "dependentTableId": "11",
-      "createdAt": 1734524897297,
+      "createdAt": 1734524897283,
       "diagramId": "7gb18czobyir"
     },
     {
       "id": "150",
       "schema": "administration",
-      "tableId": "123",
+      "tableId": "1",
       "dependentSchema": "administration",
       "dependentTableId": "11",
       "createdAt": 1734524897283,
@@ -1913,6 +1927,42 @@
       "schema": "administration",
       "tableId": "60",
       "dependentSchema": "administration",
+      "dependentTableId": "21",
+      "createdAt": 1734524897244,
+      "diagramId": "7gb18czobyir"
+    },
+    {
+      "id": "152",
+      "schema": "administration",
+      "tableId": "56",
+      "dependentSchema": "administration",
+      "dependentTableId": "76",
+      "createdAt": 1734524897297,
+      "diagramId": "7gb18czobyir"
+    },
+    {
+      "id": "153",
+      "schema": "administration",
+      "tableId": "35",
+      "dependentSchema": "administration",
+      "dependentTableId": "76",
+      "createdAt": 1734524897297,
+      "diagramId": "7gb18czobyir"
+    },
+    {
+      "id": "154",
+      "schema": "administration",
+      "tableId": "123",
+      "dependentSchema": "administration",
+      "dependentTableId": "11",
+      "createdAt": 1734524897283,
+      "diagramId": "7gb18czobyir"
+    },
+    {
+      "id": "155",
+      "schema": "administration",
+      "tableId": "60",
+      "dependentSchema": "administration",
       "dependentTableId": "86",
       "createdAt": 1734524897266,
       "diagramId": "7gb18czobyir"

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

@@ -12,7 +12,7 @@
             <ListboxButton
               class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
-              <span class="block truncate w-full text-start"> {{ selectedSalutation }}</span>
+              <span class="block truncate w-full text-start"> {{ selectedSalutation?.salutation }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
               </span>
@@ -102,6 +102,7 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 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";
+import type { SalutationViewModel } from "../../../../viewmodels/admin/settings/salutation.models";
 </script>
 
 <script lang="ts">
@@ -110,12 +111,15 @@ export default defineComponent({
     return {
       status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
-      selectedSalutation: null as null | number,
+      selectedSalutation: null as null | SalutationViewModel,
     };
   },
   computed: {
     ...mapState(useSalutationStore, ["salutations"]),
   },
+  mounted() {
+    this.fetchSalutations();
+  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -129,7 +133,7 @@ export default defineComponent({
       if (!this.selectedSalutation) return;
       let formData = e.target.elements;
       let createMember: CreateMemberViewModel = {
-        salutationId: this.selectedSalutation,
+        salutationId: this.selectedSalutation.id,
         firstname: formData.firstname.value,
         lastname: formData.lastname.value,
         nameaffix: formData.nameaffix.value,

src/components/admin/settings/salutation/CreateSalutationModal.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Anrede erstellen</p>
+    </div>
+    <br />
+    <form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
+      <div>
+        <label for="salutation">Anrede</label>
+        <input type="text" id="salutation" required />
+      </div>
+      <div class="flex flex-row gap-2">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
+        <Spinner v-if="status == 'loading'" class="my-auto" />
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
+      </div>
+    </form>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useSalutationStore } from "@/stores/admin/settings/salutation";
+import type { CreateSalutationViewModel } from "@/viewmodels/admin/settings/salutation.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useSalutationStore, ["createSalutation"]),
+    triggerCreate(e: any) {
+      let formData = e.target.elements;
+      let createSalutation: CreateSalutationViewModel = {
+        salutation: formData.salutation.value,
+      };
+      this.status = "loading";
+      this.createSalutation(createSalutation)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/salutation/DeleteSalutationModal.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="w-full md:max-w-md">
+    <div class="flex flex-col items-center">
+      <p class="text-xl font-medium">Anrede {{ salutation?.salutation }} löschen?</p>
+    </div>
+    <br />
+
+    <div class="flex flex-row gap-2">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
+        unwiederuflich löschen
+      </button>
+      <Spinner v-if="status == 'loading'" class="my-auto" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
+    </div>
+
+    <div class="flex flex-row justify-end">
+      <div class="flex flex-row gap-4 py-2">
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { useRoleStore } from "@/stores/admin/user/role";
+import { useSalutationStore } from "@/stores/admin/settings/salutation";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      timeout: undefined as any,
+    };
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+    ...mapState(useSalutationStore, ["salutations"]),
+    salutation() {
+      return this.salutations.find((r) => r.id == this.data);
+    },
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useSalutationStore, ["deleteSalutation"]),
+    triggerDelete() {
+      this.status = "loading";
+      this.deleteSalutation(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
+    },
+  },
+});
+</script>

src/components/admin/settings/salutation/SalutationListItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <div 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">
+      <p>{{ salutation.salutation }}</p>
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'settings', 'salutation')"
+          :to="{ name: 'admin-settings-salutation-edit', params: { id: salutation.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'settings', 'salutation')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import type { SalutationViewModel } from "@/viewmodels/admin/settings/salutation.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    salutation: { type: Object as PropType<SalutationViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/salutation/DeleteSalutationModal.vue"))),
+        this.salutation.id
+      );
+    },
+  },
+});
+</script>

src/router/index.ts

@@ -422,6 +422,28 @@ const router = createRouter({
                 },
               ],
             },
+            {
+              path: "salutation",
+              name: "admin-settings-salutation-route",
+              component: () => import("@/views/RouterView.vue"),
+              meta: { type: "read", section: "settings", module: "salutation" },
+              beforeEnter: [abilityAndNavUpdate],
+              children: [
+                {
+                  path: "",
+                  name: "admin-settings-salutation",
+                  component: () => import("@/views/admin/settings/salutation/Salutation.vue"),
+                },
+                {
+                  path: ":id/edit",
+                  name: "admin-settings-salutation-edit",
+                  component: () => import("@/views/admin/settings/salutation/SalutationEdit.vue"),
+                  meta: { type: "update", section: "settings", module: "salutation" },
+                  beforeEnter: [abilityAndNavUpdate],
+                  props: true,
+                },
+              ],
+            },
             {
               path: "calendar-type",
               name: "admin-settings-calendar_type-route",

src/stores/admin/club/member/member.ts

@@ -88,7 +88,7 @@ export const useMemberStore = defineStore("member", {
     },
     async createMember(member: CreateMemberViewModel): Promise<AxiosResponse<any, any>> {
       const result = await http.post(`/admin/member`, {
-        salutation: member.salutation,
+        salutationId: member.salutationId,
         firstname: member.firstname,
         lastname: member.lastname,
         nameaffix: member.nameaffix,
@@ -100,7 +100,7 @@ export const useMemberStore = defineStore("member", {
     },
     async updateActiveMember(member: UpdateMemberViewModel): Promise<AxiosResponse<any, any>> {
       const result = await http.patch(`/admin/member/${member.id}`, {
-        salutation: member.salutation,
+        salutationId: member.salutationId,
         firstname: member.firstname,
         lastname: member.lastname,
         nameaffix: member.nameaffix,

src/stores/admin/navigation.ts

@@ -63,7 +63,7 @@ export const useNavigationStore = defineStore("navigation", {
               {
                 key: "settings",
                 title: "Einstellungen",
-                levelDefault: "award",
+                levelDefault: "salutation",
               } as topLevelNavigationModel,
             ]
           : []),
@@ -99,6 +99,7 @@ export const useNavigationStore = defineStore("navigation", {
           mainTitle: "Einstellungen",
           main: [
             { key: "divider1", title: "Mitgliederdaten" },
+            ...(abilityStore.can("read", "settings", "salutation") ? [{ key: "salutation", title: "Anrede" }] : []),
             ...(abilityStore.can("read", "settings", "award") ? [{ key: "award", title: "Auszeichnungen" }] : []),
             ...(abilityStore.can("read", "settings", "communication_type")
               ? [{ key: "communication_type", title: "Kommunikationsarten" }]

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

@@ -15,7 +15,7 @@
             <ListboxButton
               class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
             >
-              <span class="block truncate w-full text-start"> {{ member.salutation }}</span>
+              <span class="block truncate w-full text-start"> {{ member.salutation.salutation }}</span>
               <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
               </span>
@@ -136,6 +136,7 @@ export default defineComponent({
   },
   mounted() {
     this.fetchItem();
+    this.fetchSalutations();
   },
   beforeUnmount() {
     try {
@@ -144,6 +145,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useMemberStore, ["fetchMemberByActiveId", "updateActiveMember"]),
+    ...mapActions(useSalutationStore, ["fetchSalutations"]),
     resetForm() {
       this.member = cloneDeep(this.activeMemberObj);
     },

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

@@ -7,7 +7,7 @@
       </div>
       <div>
         <label for="salutation">Anrede</label>
-        <input type="text" id="salutation" :value="activeMemberObj.salutation" readonly />
+        <input type="text" id="salutation" :value="activeMemberObj.salutation.salutation" readonly />
       </div>
       <div>
         <label for="firstname">Vorname</label>

src/views/admin/settings/salutation/Salutation.vue

@@ -0,0 +1,52 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Anrede</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col gap-4 h-full pl-7">
+        <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+          <SalutationListItem v-for="salutation in salutations" :key="salutation.id" :salutation="salutation" />
+        </div>
+        <div class="flex flex-row gap-4">
+          <button v-if="can('create', 'settings', 'salutation')" primary class="!w-fit" @click="openCreateModal">
+            Anrede erstellen
+          </button>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useSalutationStore } from "@/stores/admin/settings/salutation";
+import SalutationListItem from "@/components/admin/settings/salutation/SalutationListItem.vue";
+import { useModalStore } from "@/stores/modal";
+import { useAbilityStore } from "@/stores/ability";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useSalutationStore, ["salutations"]),
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  mounted() {
+    this.fetchSalutations();
+  },
+  methods: {
+    ...mapActions(useSalutationStore, ["fetchSalutations"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    openCreateModal() {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/settings/salutation/CreateSalutationModal.vue")))
+      );
+    },
+  },
+});
+</script>

src/views/admin/settings/salutation/SalutationEdit.vue

@@ -0,0 +1,120 @@
+<template>
+  <MainTemplate>
+    <template #headerInsert>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Anrede {{ origin?.salutation }} - Daten bearbeiten</h1>
+      </div>
+    </template>
+    <template #main>
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
+      <form
+        v-else-if="salutation != null"
+        class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+        @submit.prevent="triggerUpdate"
+      >
+        <div>
+          <label for="salutation">Anrede</label>
+          <input type="text" id="salutation" required v-model="salutation.salutation" />
+        </div>
+        <div class="flex flex-row justify-end gap-2">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
+            verwerfen
+          </button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
+            speichern
+          </button>
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
+        </div>
+      </form>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { useSalutationStore } from "@/stores/admin/settings/salutation";
+import Spinner from "@/components/Spinner.vue";
+import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
+import FailureXMark from "@/components/FailureXMark.vue";
+import { RouterLink } from "vue-router";
+import type { SalutationViewModel, UpdateSalutationViewModel } from "@/viewmodels/admin/settings/salutation.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isequal";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    id: String,
+  },
+  data() {
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | SalutationViewModel,
+      salutation: null as null | SalutationViewModel,
+      timeout: null as any,
+    };
+  },
+  computed: {
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.salutation);
+    },
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
+  },
+  methods: {
+    ...mapActions(useSalutationStore, ["fetchSalutationById", "updateActiveSalutation"]),
+    resetForm() {
+      this.salutation = cloneDeep(this.origin);
+    },
+    fetchItem() {
+      this.fetchSalutationById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.salutation = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: any) {
+      if (this.salutation == null) return;
+      let formData = e.target.elements;
+      let updateSalutation: UpdateSalutationViewModel = {
+        id: this.salutation.id,
+        salutation: formData.salutation.value,
+      };
+      this.status = "loading";
+      this.updateActiveSalutation(updateSalutation)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
+    },
+  },
+});
+</script>