member data listing

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

@@ -0,0 +1,29 @@
+<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>{{ award.award }}</p>
+    </div>
+    <div class="p-2">
+      <p>erhalten am: {{ award.date }}</p>
+      <p v-if="!award.given">annahme abgelehnt/verwehrt</p>
+      <p v-if="award.note">Notiz: {{ award.note }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { MemberAwardViewModel } from "@/viewmodels/admin/memberAward.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    award: {
+      type: Object as PropType<MemberAwardViewModel>,
+      default: {},
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,29 @@
+<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>{{ communication.type.type }} {{ communication.preferred ? "(bevorzugt)" : "" }}</p>
+      <EnvelopeIcon class="h-5 w-5 p-1 box-content" v-if="communication.isNewsletterMain" />
+    </div>
+    <div class="p-2">
+      <p v-for="field in communication.type.fields" :key="field">{{ field }}: {{ communication[field] || "--" }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { CommunicationViewModel } from "@/viewmodels/admin/communication.models";
+import { EnvelopeIcon } from "@heroicons/vue/24/outline";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    communication: {
+      type: Object as PropType<CommunicationViewModel>,
+      default: {},
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,27 @@
+<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>{{ position.executivePosition }} von {{ position.start }} bis {{ position.end ?? "heute" }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="position.note">Notiz: {{ position.note }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { MemberExecutivePositionViewModel } from "@/viewmodels/admin/memberExecutivePosition.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    position: {
+      type: Object as PropType<MemberExecutivePositionViewModel>,
+      default: {},
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,28 @@
+<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>{{ qualification.qualification }} von {{ qualification.start }} bis {{ qualification.end ?? "heute" }}</p>
+    </div>
+    <div class="p-2">
+      <p v-if="qualification.note">Notiz: {{ qualification.note }}</p>
+      <p v-if="qualification.terminationReason">beendet, weil: {{ qualification.terminationReason }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { MemberQualificationViewModel } from "@/viewmodels/admin/memberQualification.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    qualification: {
+      type: Object as PropType<MemberQualificationViewModel>,
+      default: {},
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,30 @@
+<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>
+        {{ membership.start }} bis {{ membership.end ?? "heute" }}:
+        {{ membership.status }}
+      </p>
+    </div>
+    <div v-if="membership.terminationReason" class="p-2">
+      <p>Grund: {{ membership.terminationReason }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import type { MembershipViewModel } from "@/viewmodels/admin/membership.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    membership: {
+      type: Object as PropType<MembershipViewModel>,
+      default: {},
+    },
+  },
+});
+</script>