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

<template>
  <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="id">Interne Id</label>
        <input type="text" id="id" :value="activeMemberObj.internalId" readonly />
      </div>
      <div>
        <label for="salutation">Anrede</label>
        <input type="text" id="salutation" :value="activeMemberObj.salutation.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="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.exactDuration }}</span>
            </p>
          </div>
        </div>
      </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?.length != 0">
        <p>bevorzugte Kommunikationswege</p>
        <div class="flex flex-col gap-2">
          <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>
      <div v-if="activeMemberObj.smsAlarming?.length != 0">
        <p>sende SMS-Alarmierung an:</p>
        <div class="flex flex-col gap-2">
          <div
            v-for="com in activeMemberObj.smsAlarming"
            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>
      <div v-if="activeMemberObj.sendNewsletter">
        <p>sende Newsletter an:</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'" @click="fetchMemberByActiveId" class="cursor-pointer">
      &#8634; laden fehlgeschlagen
    </p>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useMemberStore } from "@/stores/admin/club/member/member";
import { useMembershipStore } from "@/stores/admin/club/member/membership";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    memberId: String,
  },
  computed: {
    ...mapState(useMemberStore, ["activeMemberObj", "activeMemberStatistics", "loadingActive"]),
    ...mapState(useMembershipStore, ["membershipStatistics"]),
  },
  mounted() {
    this.fetchMemberByActiveId();
    this.fetchMemberStatisticsByActiveId();
    this.fetchMembershipStatisticsForMember();
  },
  methods: {
    ...mapActions(useMemberStore, ["fetchMemberByActiveId", "fetchMemberStatisticsByActiveId"]),
    ...mapActions(useMembershipStore, ["fetchMembershipStatisticsForMember"]),
  },
});
</script>