salutation management views

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>