basic member pagination

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

@@ -0,0 +1,51 @@
+<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>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'club', 'member')"
+          :to="{ name: 'admin-club-member', params: { id: member.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'club', 'member')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div class="p-2">
+      <p>beigetreten: {{ member.firstMembershipEntry?.start }}</p>
+      <p v-if="member.lastMembershipEntry?.end">ausgetreten: {{ member.lastMembershipEntry?.end }}</p>
+    </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 { MemberViewModel } from "../../../../viewmodels/admin/member.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    member: { type: Object as PropType<MemberViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      // this.openModal(
+      //   markRaw(defineAsyncComponent(() => import("@/components/admin/.vue"))),
+      //   this.member.id
+      // );
+    },
+  },
+});
+</script>