From 6847ae083e403d80e61bfdc5f19598925c518b77 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Wed, 18 Sep 2024 09:28:59 +0200
Subject: [PATCH] member data listing

---
 .../admin/club/member/MemberAwardListItem.vue | 29 ++++++
 .../member/MemberCommunicationListItem.vue    | 29 ++++++
 .../MemberExecutivePositionListItem.vue       | 27 ++++++
 .../member/MemberQualificationListItem.vue    | 28 ++++++
 .../admin/club/member/MembershipListItem.vue  | 30 ++++++
 src/main.css                                  | 10 ++
 src/types/fieldTypes.ts                       |  1 +
 .../admin/communicationType.models.ts         |  8 +-
 src/views/admin/members/MemberAwards.vue      |  7 +-
 .../admin/members/MemberCommunication.vue     | 11 ++-
 .../members/MemberExecutivePositions.vue      | 11 ++-
 src/views/admin/members/MemberOverview.vue    | 92 ++++++++++++++++++-
 .../admin/members/MemberQualifications.vue    | 11 ++-
 src/views/admin/members/Membership.vue        |  7 +-
 14 files changed, 286 insertions(+), 15 deletions(-)
 create mode 100644 src/components/admin/club/member/MemberAwardListItem.vue
 create mode 100644 src/components/admin/club/member/MemberCommunicationListItem.vue
 create mode 100644 src/components/admin/club/member/MemberExecutivePositionListItem.vue
 create mode 100644 src/components/admin/club/member/MemberQualificationListItem.vue
 create mode 100644 src/components/admin/club/member/MembershipListItem.vue
 create mode 100644 src/types/fieldTypes.ts

diff --git a/src/components/admin/club/member/MemberAwardListItem.vue b/src/components/admin/club/member/MemberAwardListItem.vue
new file mode 100644
index 0000000..5d93741
--- /dev/null
+++ b/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>
diff --git a/src/components/admin/club/member/MemberCommunicationListItem.vue b/src/components/admin/club/member/MemberCommunicationListItem.vue
new file mode 100644
index 0000000..692da6d
--- /dev/null
+++ b/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>
diff --git a/src/components/admin/club/member/MemberExecutivePositionListItem.vue b/src/components/admin/club/member/MemberExecutivePositionListItem.vue
new file mode 100644
index 0000000..4679f5e
--- /dev/null
+++ b/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>
diff --git a/src/components/admin/club/member/MemberQualificationListItem.vue b/src/components/admin/club/member/MemberQualificationListItem.vue
new file mode 100644
index 0000000..f7a8db6
--- /dev/null
+++ b/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>
diff --git a/src/components/admin/club/member/MembershipListItem.vue b/src/components/admin/club/member/MembershipListItem.vue
new file mode 100644
index 0000000..4bf3139
--- /dev/null
+++ b/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>
diff --git a/src/main.css b/src/main.css
index 0596a2e..3d54f9b 100644
--- a/src/main.css
+++ b/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;
+}
diff --git a/src/types/fieldTypes.ts b/src/types/fieldTypes.ts
new file mode 100644
index 0000000..95e7ec2
--- /dev/null
+++ b/src/types/fieldTypes.ts
@@ -0,0 +1 @@
+export type CommunicationFieldType = "mobile" | "email" | "city" | "street" | "streetNumber" | "streetNumberAddition";
diff --git a/src/viewmodels/admin/communicationType.models.ts b/src/viewmodels/admin/communicationType.models.ts
index ef9cfa7..48e7a17 100644
--- a/src/viewmodels/admin/communicationType.models.ts
+++ b/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>;
 }
diff --git a/src/views/admin/members/MemberAwards.vue b/src/views/admin/members/MemberAwards.vue
index bf64750..9b5ae8e 100644
--- a/src/views/admin/members/MemberAwards.vue
+++ b/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">
diff --git a/src/views/admin/members/MemberCommunication.vue b/src/views/admin/members/MemberCommunication.vue
index fd9b3f2..cd5ab9a 100644
--- a/src/views/admin/members/MemberCommunication.vue
+++ b/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">
diff --git a/src/views/admin/members/MemberExecutivePositions.vue b/src/views/admin/members/MemberExecutivePositions.vue
index 2286c32..c2f8e48 100644
--- a/src/views/admin/members/MemberExecutivePositions.vue
+++ b/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">
diff --git a/src/views/admin/members/MemberOverview.vue b/src/views/admin/members/MemberOverview.vue
index 6a62d3d..7cfe957 100644
--- a/src/views/admin/members/MemberOverview.vue
+++ b/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>
diff --git a/src/views/admin/members/MemberQualifications.vue b/src/views/admin/members/MemberQualifications.vue
index 6e5e790..e304a47 100644
--- a/src/views/admin/members/MemberQualifications.vue
+++ b/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">
diff --git a/src/views/admin/members/Membership.vue b/src/views/admin/members/Membership.vue
index 21e8c87..8ad5425 100644
--- a/src/views/admin/members/Membership.vue
+++ b/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">