basic member pagination

src/components/admin/club/member/MemberListItem.vue

@@ -0,0 +1,51 @@
+<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>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
+      <div class="flex flex-row">
+        <RouterLink
+          v-if="can('update', 'club', 'member')"
+          :to="{ name: 'admin-club-member', params: { id: member.id } }"
+        >
+          <PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </RouterLink>
+        <div v-if="can('delete', 'club', 'member')" @click="openDeleteModal">
+          <TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
+        </div>
+      </div>
+    </div>
+    <div class="p-2">
+      <p>beigetreten: {{ member.firstMembershipEntry?.start }}</p>
+      <p v-if="member.lastMembershipEntry?.end">ausgetreten: {{ member.lastMembershipEntry?.end }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
+import { mapState, mapActions } from "pinia";
+import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { useAbilityStore } from "@/stores/ability";
+import { useModalStore } from "@/stores/modal";
+import type { MemberViewModel } from "../../../../viewmodels/admin/member.models";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    member: { type: Object as PropType<MemberViewModel>, default: {} },
+  },
+  computed: {
+    ...mapState(useAbilityStore, ["can"]),
+  },
+  methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    openDeleteModal() {
+      // this.openModal(
+      //   markRaw(defineAsyncComponent(() => import("@/components/admin/.vue"))),
+      //   this.member.id
+      // );
+    },
+  },
+});
+</script>

src/enums/salutation.ts

@@ -0,0 +1,6 @@
+export enum Salutation {
+  Sir = "sir",
+  Madam = "madam",
+  other = "other",
+  none = "none",
+}

src/router/index.ts

@@ -65,9 +65,9 @@ const router = createRouter({
             },
             {
               path: "members",
-              name: "admin-club-members",
-              component: () => import("../views/admin/members/Overview.vue"),
-              meta: { type: "read", section: "club", module: "members" },
+              name: "admin-club-member",
+              component: () => import("../views/admin/members/Member.vue"),
+              meta: { type: "read", section: "club", module: "member" },
               beforeEnter: [abilityAndNavUpdate],
             },
             {

src/stores/admin/member.ts

@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
+import { http } from "../../serverCom";
+import type { AxiosResponse } from "axios";
+import type { MemberViewModel } from "../../viewmodels/admin/member.models";
+
+export const useMemberStore = defineStore("member", {
+  state: () => {
+    return {
+      members: [] as Array<MemberViewModel & { tab_pos: number }>,
+      totalCount: 0 as number,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      activeMember: null as null | MemberViewModel,
+    };
+  },
+  actions: {
+    fetchMembers(offset = 0, count = 25, clear = false) {
+      if (clear) this.members = [];
+      this.loading = "loading";
+      http
+        .get(`/admin/member?offset=${offset}&count=${count}`)
+        .then((result) => {
+          this.members = result.data.members;
+          this.totalCount = result.data.total;
+          result.data.members
+            .filter((elem: MemberViewModel) => this.members.findIndex((m) => m.id == elem.id) == -1)
+            .map((elem: MemberViewModel, index: number): MemberViewModel & { tab_pos: number } => {
+              return {
+                ...elem,
+                tab_pos: index + offset,
+              };
+            })
+            .forEach((elem: MemberViewModel & { tab_pos: number }) => {
+              this.members.push(elem);
+            });
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+  },
+});

src/stores/admin/navigation.ts

@@ -54,7 +54,7 @@ export const useNavigationStore = defineStore("navigation", {
               {
                 key: "club",
                 title: "Verein",
-                levelDefault: "members",
+                levelDefault: "member",
               } as topLevelNavigationModel,
             ]
           : []),
@@ -86,7 +86,7 @@ export const useNavigationStore = defineStore("navigation", {
         club: {
           mainTitle: "Verein",
           main: [
-            ...(abilityStore.can("read", "club", "members") ? [{ key: "members", title: "Mitglieder" }] : []),
+            ...(abilityStore.can("read", "club", "member") ? [{ key: "member", title: "Mitglieder" }] : []),
             ...(abilityStore.can("read", "club", "calendar") ? [{ key: "calendar", title: "Termine" }] : []),
             ...(abilityStore.can("read", "club", "newsletter") ? [{ key: "newsletter", title: "Newsletter" }] : []),
             ...(abilityStore.can("read", "club", "protocoll") ? [{ key: "protocol", title: "Protokolle" }] : []),

src/viewmodels/admin/communication.models.ts

@@ -0,0 +1,14 @@
+import type { CommunicationTypeViewModel } from "./communicationType.models";
+
+export interface CommunicationViewModel {
+  id: number;
+  preferred: boolean;
+  mobile: string;
+  email: string;
+  city: string;
+  street: string;
+  streetNumber: number;
+  streetNumberAddition: string;
+  type: CommunicationTypeViewModel;
+  isNewsletterMain: boolean;
+}

src/viewmodels/admin/member.models.ts

@@ -0,0 +1,13 @@
+import { Salutation } from "../../enums/salutation";
+import type { MembershipViewModel } from "./membership.models";
+
+export interface MemberViewModel {
+  id: number;
+  salutation: Salutation;
+  firstname: string;
+  lastname: string;
+  nameaffix: string;
+  birthdate: Date;
+  firstMembershipEntry?: MembershipViewModel;
+  lastMembershipEntry?: MembershipViewModel;
+}

src/viewmodels/admin/memberAward.models.ts

@@ -0,0 +1,7 @@
+export interface MemberAwardViewModel {
+  id: number;
+  given: boolean;
+  note?: string;
+  date: Date;
+  award: string;
+}

src/viewmodels/admin/memberExecutivePosition.models.ts

@@ -0,0 +1,7 @@
+export interface MemberExecutivePositionViewModel {
+  id: number;
+  note?: string;
+  start: Date;
+  end?: Date;
+  executivePosition: string;
+}

src/viewmodels/admin/memberQualification.models.ts

@@ -0,0 +1,8 @@
+export interface MemberQualificationViewModel {
+  id: number;
+  note?: string;
+  start: Date;
+  end?: Date;
+  terminationReason?: string;
+  qualification: string;
+}

src/viewmodels/admin/membership.models.ts

@@ -0,0 +1,8 @@
+export interface MembershipViewModel {
+  id: number;
+  internalId?: string;
+  start: Date;
+  end?: Date;
+  terminationReason?: string;
+  status: string;
+}

src/views/admin/members/Member.vue

@@ -0,0 +1,140 @@
+<template>
+  <MainTemplate>
+    <template #topBar>
+      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Mitglieder</h1>
+      </div>
+    </template>
+    <template #diffMain>
+      <div class="flex flex-col w-full h-full gap-2 justify-center items-center px-7">
+        <div class="flex flex-col w-full grow gap-2 pr-2 overflow-y-scroll">
+          <MemberListItem v-for="member in members" :key="member.id" :member="member" />
+        </div>
+        <div class="flex flex-row w-full justify-between select-none">
+          <p class="text-sm font-normal text-gray-500">
+            Elemente <span class="font-semibold text-gray-900">{{ showingText }}</span> von
+            <span class="font-semibold text-gray-900">{{ entryCount }}</span>
+          </p>
+          <ul class="flex flex-row text-sm h-8">
+            <li
+              class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
+              :class="[currentPage > 0 ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50']"
+              @click="loadPage(currentPage - 1)"
+            >
+              <ChevronLeftIcon class="h-4" />
+            </li>
+            <li
+              v-for="page in displayedPagesNumbers"
+              :key="page"
+              class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 first:rounded-s-lg last:rounded-e-lg"
+              :class="[currentPage == page ? 'font-bold border-primary' : '', page != '.' ? ' cursor-pointer' : '']"
+              @click="loadPage(page)"
+            >
+              {{ typeof page == "number" ? page + 1 : "..." }}
+            </li>
+            <li
+              class="flex h-8 w-8 items-center justify-center text-gray-500 bg-white border border-gray-300 first:rounded-s-lg last:rounded-e-lg"
+              :class="[
+                currentPage + 1 < countOfPages ? 'cursor-pointer hover:bg-gray-100 hover:text-gray-700' : 'opacity-50',
+              ]"
+              @click="loadPage(currentPage + 1)"
+            >
+              <ChevronRightIcon class="h-4" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/vue/20/solid";
+import { useMemberStore } from "@/stores/admin/member";
+import MemberListItem from "@/components/admin/club/member/MemberListItem.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      currentPage: 0,
+      maxEntriesPerPage: 25,
+    };
+  },
+  computed: {
+    ...mapState(useMemberStore, ["members", "totalCount"]),
+    entryCount() {
+      return this.totalCount ?? this.members.length;
+    },
+    showingStart() {
+      return this.currentPage * this.maxEntriesPerPage;
+    },
+    showingEnd() {
+      let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
+      if (max > this.entryCount) max = this.entryCount;
+      return max;
+    },
+    showingText() {
+      return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
+    },
+    countOfPages() {
+      return Math.ceil(this.entryCount / this.maxEntriesPerPage);
+    },
+    displayedPagesNumbers(): Array<number | "."> {
+      //indicate if "." or page number gets pushed
+      let stateOfPush = false;
+
+      return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
+        if (
+          // always display first 2 pages
+          index <= 1 ||
+          // always display last 2 pages
+          index >= this.countOfPages - 2 ||
+          // always display 1 pages around current page
+          (this.currentPage - 1 <= index && index <= this.currentPage + 1)
+        ) {
+          acc.push(index);
+          stateOfPush = false;
+          return acc;
+        }
+        // abort if placeholder already added to array
+        if (stateOfPush == true) return acc;
+        // show placeholder if pagenumber is not actively rendered
+        acc.push(".");
+        stateOfPush = true;
+
+        return acc;
+      }, []);
+    },
+    visibleRows() {
+      return this.filterData(this.members, this.showingStart, this.showingEnd);
+    },
+  },
+  mounted() {
+    this.fetchMembers(0, this.maxEntriesPerPage);
+  },
+  methods: {
+    ...mapActions(useMemberStore, ["fetchMembers"]),
+    loadPage(newPage: number | ".") {
+      if (newPage == ".") return;
+      if (newPage < 0 || newPage >= this.countOfPages) return;
+
+      let pageStart = newPage * this.maxEntriesPerPage;
+      let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
+      if (pageEnd > this.entryCount) pageEnd = this.entryCount;
+
+      let loadedElementCount = this.filterData(this.members, pageStart, pageEnd).length;
+      if (loadedElementCount < this.maxEntriesPerPage) this.fetchMembers(pageStart, this.maxEntriesPerPage);
+
+      this.currentPage = newPage;
+    },
+    filterData(array: Array<any>, start: number, end: number): Array<any> {
+      return array.filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
+    },
+  },
+});
+</script>