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>

src/main.css

@@ -81,3 +81,13 @@ input:not([type="checkbox"]),
 textarea {
   @apply 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;
 }
+
+input[readonly],
+textarea[readonly] {
+  @apply pointer-events-none;
+}
+
+input[disabled],
+textarea[disabled] {
+  @apply opacity-75 pointer-events-none;
+}

src/types/fieldTypes.ts

@@ -0,0 +1 @@
+export type CommunicationFieldType = "mobile" | "email" | "city" | "street" | "streetNumber" | "streetNumberAddition";

src/viewmodels/admin/communicationType.models.ts

@@ -1,16 +1,18 @@
+import type { CommunicationFieldType } from "../../types/fieldTypes";
+
 export interface CommunicationTypeViewModel {
   id: number;
   type: string;
-  fields: Array<string>;
+  fields: Array<CommunicationFieldType>;
 }
 
 export interface CreateCommunicationTypeViewModel {
   type: string;
-  fields: Array<string>;
+  fields: Array<CommunicationFieldType>;
 }
 
 export interface UpdateCommunicationTypeViewModel {
   id: number;
   type: string;
-  fields: Array<string>;
+  fields: Array<CommunicationFieldType>;
 }

src/views/admin/members/MemberAwards.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="flex flex-col h-full w-full overflow-y-auto">
-    <p>{{ memberAwards }}</p>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="memberAwards != null" class="flex flex-col gap-2 w-full">
+      <MemberAwardListItem v-for="award in memberAwards" :key="award.id" :award="award" />
+    </div>
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
   </div>
@@ -11,6 +13,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useMemberAwardStore } from "@/stores/admin/memberAward";
+import MemberAwardListItem from "@/components/admin/club/member/MemberAwardListItem.vue";
 </script>
 
 <script lang="ts">

src/views/admin/members/MemberCommunication.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="flex flex-col h-full w-full overflow-y-auto">
-    <p>{{ communications }}</p>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="communications != null" class="flex flex-col gap-2 w-full">
+      <MemberCommunicationListItem
+        v-for="communication in communications"
+        :key="communication.id"
+        :communication="communication"
+      />
+    </div>
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
   </div>
@@ -14,6 +20,7 @@ import type { MemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/
 import Spinner from "@/components/Spinner.vue";
 import type { CommunicationViewModel } from "@/viewmodels/admin/communication.models";
 import { useCommunicationStore } from "@/stores/admin/communication";
+import MemberCommunicationListItem from "@/components/admin/club/member/MemberCommunicationListItem.vue";
 </script>
 
 <script lang="ts">

src/views/admin/members/MemberExecutivePositions.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="flex flex-col h-full w-full overflow-y-auto">
-    <p>{{ memberExecutivePositions }}</p>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="memberExecutivePositions != null" class="flex flex-col gap-2 w-full">
+      <MemberExecutivePositionListItem
+        v-for="position in memberExecutivePositions"
+        :key="position.id"
+        :position="position"
+      />
+    </div>
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
   </div>
@@ -11,6 +17,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useMemberExecutivePositionStore } from "@/stores/admin/memberExecutivePosition";
+import MemberExecutivePositionListItem from "@/components/admin/club/member/MemberExecutivePositionListItem.vue";
 </script>
 
 <script lang="ts">

src/views/admin/members/MemberOverview.vue

@@ -1,6 +1,94 @@
 <template>
-  <div class="flex flex-col h-full w-full overflow-y-auto">
-    <p>{{ activeMemberObj }}</p>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="activeMemberObj != null" class="flex flex-col gap-2 w-full">
+      <div>
+        <label for="salutation">Anrede</label>
+        <input type="text" id="salutation" :value="activeMemberObj.salutation" readonly />
+      </div>
+      <div>
+        <label for="firstname">Vorname</label>
+        <input type="text" id="firstname" :value="activeMemberObj.firstname" readonly />
+      </div>
+      <div>
+        <label for="lastname">Nachname</label>
+        <input type="text" id="lastname" :value="activeMemberObj.lastname" readonly />
+      </div>
+      <div>
+        <label for="nameaffix">Nameaffix</label>
+        <input type="text" id="nameaffix" :value="activeMemberObj.nameaffix" readonly />
+      </div>
+      <div>
+        <label for="birthdate">Geburtsdatum</label>
+        <input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
+      </div>
+      <div v-if="activeMemberObj.firstMembershipEntry">
+        <p>Erster Eintrag Mitgliedschaft</p>
+        <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>
+              {{ activeMemberObj.firstMembershipEntry.start }} bis
+              {{ activeMemberObj.firstMembershipEntry.end ?? "heute" }}:
+              {{ activeMemberObj.firstMembershipEntry.status }}
+            </p>
+          </div>
+          <div v-if="activeMemberObj.firstMembershipEntry.terminationReason" class="p-2">
+            <p>Grund: {{ activeMemberObj.firstMembershipEntry.terminationReason }}</p>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="
+          activeMemberObj.lastMembershipEntry &&
+          activeMemberObj.firstMembershipEntry?.id != activeMemberObj.lastMembershipEntry?.id
+        "
+      >
+        <p>Neuster Eintrag Mitgliedschaft</p>
+        <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>
+              {{ activeMemberObj.lastMembershipEntry.start }} bis
+              {{ activeMemberObj.lastMembershipEntry.end ?? "heute" }}:
+              {{ activeMemberObj.lastMembershipEntry.status }}
+            </p>
+          </div>
+          <div v-if="activeMemberObj.lastMembershipEntry.terminationReason" class="p-2">
+            <p>Grund: {{ activeMemberObj.lastMembershipEntry.terminationReason }}</p>
+          </div>
+        </div>
+      </div>
+      <div v-if="activeMemberObj.preferredCommunication">
+        <p>bevorzugte Kommunikationswege</p>
+        <div
+          v-for="com in activeMemberObj.preferredCommunication"
+          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>
+              {{ com.type.type }}
+            </p>
+          </div>
+          <div class="p-2">
+            <p v-for="field in com.type.fields" :key="field">{{ field }}: {{ com[field] || "--" }}</p>
+          </div>
+        </div>
+      </div>
+      <div v-if="activeMemberObj.sendNewsletter">
+        <p>Newsletter Kommunikationswege</p>
+        <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>
+              {{ activeMemberObj.sendNewsletter.type.type }}
+            </p>
+          </div>
+          <div class="p-2">
+            <p v-for="field in activeMemberObj.sendNewsletter.type.fields" :key="field">
+              {{ field }}: {{ activeMemberObj.sendNewsletter[field] || "--" }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
     <p v-else-if="loadingActive == 'failed'">laden fehlgeschlagen</p>
   </div>

src/views/admin/members/MemberQualifications.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="flex flex-col h-full w-full overflow-y-auto">
-    <p>{{ memberQualifications }}</p>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="memberQualifications != null" class="flex flex-col gap-2 w-full">
+      <MemberQualificationListItem
+        v-for="qualification in memberQualifications"
+        :key="qualification.id"
+        :qualification="qualification"
+      />
+    </div>
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
   </div>
@@ -11,6 +17,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useMemberQualificationStore } from "@/stores/admin/memberQualification";
+import MemberQualificationListItem from "@/components/admin/club/member/MemberQualificationListItem.vue";
 </script>
 
 <script lang="ts">

src/views/admin/members/Membership.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="flex flex-col h-full w-full overflow-y-auto">
-    <p>{{ memberships }}</p>
+  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
+    <div v-if="memberships != null" class="flex flex-col gap-2 w-full">
+      <MembershipListItem v-for="membership in memberships" :key="membership.id" :membership="membership" />
+    </div>
     <Spinner v-if="loading == 'loading'" class="mx-auto" />
     <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
   </div>
@@ -11,6 +13,7 @@ import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import { useMembershipStore } from "@/stores/admin/membership";
+import MembershipListItem from "@/components/admin/club/member/MembershipListItem.vue";
 </script>
 
 <script lang="ts">