feature/#29-Membership-statistics #49

Merged
jkeffects merged 2 commits from feature/#29-Membership-statistics into develop 2025-01-22 08:06:21 +00:00
Showing only changes of commit ab3e2b9dc4 - Show all commits

View file

@ -25,6 +25,20 @@
<label for="birthdate">Geburtsdatum</label> <label for="birthdate">Geburtsdatum</label>
<input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly /> <input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
</div> </div>
<div v-if="membershipStatistics.length != 0">
<p>Statistiken zur Mitgliedschaft</p>
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
<div
v-for="stat in membershipStatistics"
class="bg-primary p-2 text-white flex flex-row justify-between items-center"
>
<p>
{{ stat.status }} für gesamt {{ stat.durationInDays }} Tage
<span class="whitespace-nowrap"> ~> {{ stat.durationInYears.replace("_", "") }} Jahre</span>
</p>
</div>
</div>
</div>
<div v-if="activeMemberObj.firstMembershipEntry"> <div v-if="activeMemberObj.firstMembershipEntry">
<p>Erster Eintrag Mitgliedschaft</p> <p>Erster Eintrag 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 border border-primary rounded-md">
@ -125,6 +139,7 @@ import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia"; import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue"; import Spinner from "@/components/Spinner.vue";
import { useMemberStore } from "@/stores/admin/club/member/member"; import { useMemberStore } from "@/stores/admin/club/member/member";
import { useMembershipStore } from "@/stores/admin/club/member/membership";
</script> </script>
<script lang="ts"> <script lang="ts">
@ -133,13 +148,17 @@ export default defineComponent({
memberId: String, memberId: String,
}, },
computed: { computed: {
...mapState(useMemberStore, ["activeMemberObj", "loadingActive"]), ...mapState(useMemberStore, ["activeMemberObj", "activeMemberStatistics", "loadingActive"]),
...mapState(useMembershipStore, ["membershipStatistics"]),
}, },
mounted() { mounted() {
this.fetchMemberByActiveId(); this.fetchMemberByActiveId();
this.fetchMemberStatisticsByActiveId();
this.fetchMembershipStatisticsForMember();
}, },
methods: { methods: {
...mapActions(useMemberStore, ["fetchMemberByActiveId"]), ...mapActions(useMemberStore, ["fetchMemberByActiveId", "fetchMemberStatisticsByActiveId"]),
...mapActions(useMembershipStore, ["fetchMembershipStatisticsForMember"]),
}, },
}); });
</script> </script>