enhance: add membership total view in member

src/stores/admin/club/member/membership.ts

@@ -7,6 +7,7 @@ import { useMemberStore } from "./member";
 import type {
   CreateMembershipViewModel,
   MembershipStatisticsViewModel,
+  MembershipTotalStatisticsViewModel,
   MembershipViewModel,
   UpdateMembershipViewModel,
 } from "@/viewmodels/admin/club/member/membership.models";
@@ -16,6 +17,7 @@ export const useMembershipStore = defineStore("membership", {
     return {
       memberships: [] as Array<MembershipViewModel>,
       membershipStatistics: [] as Array<MembershipStatisticsViewModel>,
+      totalMembershipStatistics: undefined as undefined | MembershipTotalStatisticsViewModel,
       loading: "loading" as "loading" | "fetched" | "failed",
     };
   },
@@ -42,6 +44,15 @@ export const useMembershipStore = defineStore("membership", {
         })
         .catch((err) => {});
     },
+    fetchMembershipTotalStatisticsForMember() {
+      const memberId = useMemberStore().activeMember;
+      http
+        .get(`/admin/member/${memberId}/memberships/totalstatistics`)
+        .then((result) => {
+          this.totalMembershipStatistics = result.data;
+        })
+        .catch((err) => {});
+    },
     fetchMembershipById(id: number) {
       const memberId = useMemberStore().activeMember;
       return http.get(`/admin/member/${memberId}/membership/${id}`);

src/viewmodels/admin/club/member/membership.models.ts

@@ -21,6 +21,18 @@ export interface MembershipStatisticsViewModel {
   memberBirthdate: Date;
 }
 
+export interface MembershipTotalStatisticsViewModel {
+  durationInDays: number;
+  durationInYears: number;
+  exactDuration: string;
+  memberId: string;
+  memberSalutation: string;
+  memberFirstname: string;
+  memberLastname: string;
+  memberNameaffix: string;
+  memberBirthdate: Date;
+}
+
 export interface CreateMembershipViewModel {
   start: Date;
   statusId: number;

src/views/admin/club/members/MemberOverview.vue

@@ -25,9 +25,15 @@
         <label for="birthdate">Geburtsdatum</label>
         <input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
       </div>
-      <div v-if="membershipStatistics.length != 0">
+      <div v-if="membershipStatistics.length != 0 || totalMembershipStatistics != undefined">
         <p>Statistiken zur Mitgliedschaft</p>
-        <div class="flex flex-col h-fit w-full border border-primary rounded-md">
+        <div class="flex flex-col h-fit w-full rounded-md overflow-hidden">
+          <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
+            <p>
+              gesamt {{ totalMembershipStatistics.durationInDays }} Tage
+              <span class="whitespace-nowrap"> ~> {{ totalMembershipStatistics.exactDuration }}</span>
+            </p>
+          </div>
           <div
             v-for="stat in membershipStatistics"
             class="bg-primary p-2 text-white flex flex-row justify-between items-center"
@@ -149,16 +155,20 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useMemberStore, ["activeMemberObj", "activeMemberStatistics", "loadingActive"]),
-    ...mapState(useMembershipStore, ["membershipStatistics"]),
+    ...mapState(useMembershipStore, ["membershipStatistics", "totalMembershipStatistics"]),
   },
   mounted() {
     this.fetchMemberByActiveId();
     this.fetchMemberStatisticsByActiveId();
     this.fetchMembershipStatisticsForMember();
+    this.fetchMembershipTotalStatisticsForMember();
   },
   methods: {
     ...mapActions(useMemberStore, ["fetchMemberByActiveId", "fetchMemberStatisticsByActiveId"]),
-    ...mapActions(useMembershipStore, ["fetchMembershipStatisticsForMember"]),
+    ...mapActions(useMembershipStore, [
+      "fetchMembershipStatisticsForMember",
+      "fetchMembershipTotalStatisticsForMember",
+    ]),
   },
 });
 </script>