From 8664836a202945bb420b79896e5a223cb54a9334 Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 11 Oct 2024 14:43:56 +0200
Subject: [PATCH] Pagination central

---
 src/components/Pagination.vue                 | 246 ++++++++++++++++++
 src/router/index.ts                           |  12 +-
 src/viewmodels/admin/protocolAgenda.models.ts |   6 +
 .../admin/protocolDecision.models.ts          |   6 +
 .../admin/protocolPresence.models.ts          |   7 +
 src/viewmodels/admin/protocolVoting.models.ts |   9 +
 src/views/admin/club/protocol/Protocol.vue    | 113 +-------
 ...rotocolProtocol.vue => ProtocolAgenda.vue} |  10 +-
 ...tocolPrecense.vue => ProtocolPresence.vue} |   0
 .../admin/club/protocol/ProtocolRouting.vue   |   4 +-
 src/views/admin/members/Member.vue            |  51 +---
 11 files changed, 313 insertions(+), 151 deletions(-)
 create mode 100644 src/components/Pagination.vue
 create mode 100644 src/viewmodels/admin/protocolAgenda.models.ts
 create mode 100644 src/viewmodels/admin/protocolDecision.models.ts
 create mode 100644 src/viewmodels/admin/protocolPresence.models.ts
 create mode 100644 src/viewmodels/admin/protocolVoting.models.ts
 rename src/views/admin/club/protocol/{ProtocolProtocol.vue => ProtocolAgenda.vue} (90%)
 rename src/views/admin/club/protocol/{ProtocolPrecense.vue => ProtocolPresence.vue} (100%)

diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
new file mode 100644
index 0000000..a0f198c
--- /dev/null
+++ b/src/components/Pagination.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="grow flex flex-col gap-2 overflow-hidden">
+    <div v-if="useSearch" class="relative self-end">
+      <input
+        type="text"
+        class="w-64 rounded-md shadow-sm relative block px-3 py-2 pr-5 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+        placeholder="Suche"
+        v-model="searchString"
+      />
+      <XMarkIcon
+        class="absolute h-4 stroke-2 right-2 top-1/2 -translate-y-1/2 cursor-pointer z-10"
+        @click="searchString = ''"
+      />
+    </div>
+    <div class="flex flex-col w-full grow gap-2 pr-2 overflow-y-scroll">
+      <div v-if="indicateLoading" class="flex flex-row justify-center items-center w-full p-1">
+        <Spinner />
+      </div>
+      <p v-if="visibleRows.length == 0" class="flex flex-row w-full gap-2 p-1">Kein Inhalt</p>
+      <slot
+        v-else
+        name="pageRow"
+        v-for="(item, index) in items"
+        :key="index"
+        :row="item"
+        @click="$emit('clickRow', item.id)"
+      >
+        <p>{{ item }}</p>
+      </slot>
+    </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>
+
+<script setup lang="ts" generic="T">
+import { computed, ref, watch } from "vue";
+import { ChevronRightIcon, ChevronLeftIcon, XMarkIcon } from "@heroicons/vue/20/solid";
+import Spinner from "./Spinner.vue";
+
+const props = defineProps({
+  items: { type: Array<T>, default: [] },
+  maxEntriesPerPage: { type: Number, default: 25 },
+  totalCount: { type: Number, default: null },
+  config: { type: Array<{ key: string }>, default: [] },
+  useSearch: { type: Boolean, default: false },
+  enablePreSearch: { type: Boolean, default: false },
+  indicateLoading: { type: Boolean, default: false },
+});
+
+const slots = defineSlots<{
+  pageRow(props: { row: T }): void;
+}>();
+
+const timer = ref(undefined) as undefined | any;
+const currentPage = ref(0);
+const searchString = ref("");
+
+watch(searchString, async () => {
+  clearTimeout(timer.value);
+  timer.value = setTimeout(() => {
+    currentPage.value = 0;
+    emit("search", searchString.value);
+  }, 600);
+});
+
+const emit = defineEmits({
+  submit(id: number) {
+    return typeof id == "number";
+  },
+  loadData(offset: number, count: number, searchString: string) {
+    return typeof offset == "number" && typeof offset == "number" && typeof searchString == "number";
+  },
+  search(search: string) {
+    return typeof search == "number";
+  },
+});
+
+const entryCount = computed(() => props.totalCount ?? props.items.length);
+const showingStart = computed(() => currentPage.value * props.maxEntriesPerPage);
+const showingEnd = computed(() => {
+  let max = currentPage.value * props.maxEntriesPerPage + props.maxEntriesPerPage;
+  if (max > entryCount.value) max = entryCount.value;
+  return max;
+});
+const showingText = computed(() => `${entryCount.value != 0 ? showingStart.value + 1 : 0} - ${showingEnd.value}`);
+const countOfPages = computed(() => Math.ceil(entryCount.value / props.maxEntriesPerPage));
+const displayedPagesNumbers = computed(() => {
+  let stateOfPush = false;
+
+  return [...new Array(countOfPages.value)].reduce((acc, curr, index) => {
+    if (
+      index <= 1 ||
+      index >= countOfPages.value - 2 ||
+      (currentPage.value - 1 <= index && index <= currentPage.value + 1)
+    ) {
+      acc.push(index);
+      stateOfPush = false;
+      return acc;
+    }
+    if (stateOfPush == true) return acc;
+    acc.push(".");
+    stateOfPush = true;
+
+    return acc;
+  }, []);
+});
+const visibleRows = computed(() => filterData(props.items, searchString.value, showingStart.value, showingEnd.value));
+
+const loadPage = (newPage: number | ".") => {
+  if (newPage == ".") return;
+  if (newPage < 0 || newPage >= countOfPages.value) return;
+
+  let pageStart = newPage * props.maxEntriesPerPage;
+  let pageEnd = newPage * props.maxEntriesPerPage + props.maxEntriesPerPage;
+  if (pageEnd > entryCount.value) pageEnd = entryCount.value;
+
+  let loadedElementCount = filterData(props.items, searchString.value, pageStart, pageEnd).length;
+  if (loadedElementCount < props.maxEntriesPerPage)
+    emit("loadData", pageStart, props.maxEntriesPerPage, searchString.value);
+
+  currentPage.value = newPage;
+};
+
+const filterData = (array: Array<any>, searchString: string, start: number, end: number): Array<any> => {
+  return array
+    .filter(
+      (elem) =>
+        !props.enablePreSearch ||
+        searchString.trim() == "" ||
+        props.config.some((col) => typeof elem?.[col.key] == "string" && elem[col.key].includes(searchString.trim()))
+    )
+    .filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
+};
+</script>
+
+<!-- 
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    entryCount() {
+      return this.totalCount ?? this.items.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.items, this.searchString, this.showingStart, this.showingEnd);
+    },
+  },
+  methods: {
+    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.items, this.searchString, pageStart, pageEnd).length;
+      if (loadedElementCount < this.maxEntriesPerPage)
+        this.$emit("loadData", { offset: pageStart, count: this.maxEntriesPerPage, search: this.searchString });
+
+      this.currentPage = newPage;
+    },
+    filterData(array: Array<any>, searchString: string, start: number, end: number): Array<any> {
+      return array
+        .filter(
+          (elem) =>
+            !this.enablePreSearch ||
+            searchString.trim() == "" ||
+            this.config.some((col) => typeof elem?.[col.key] == "string" && elem[col.key].includes(searchString.trim()))
+        )
+        .filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
+    },
+  },
+});
+</script> -->
diff --git a/src/router/index.ts b/src/router/index.ts
index d956e4f..704a63a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -174,9 +174,9 @@ const router = createRouter({
                       props: true,
                     },
                     {
-                      path: "precense",
-                      name: "admin-club-protocol-precense",
-                      component: () => import("@/views/admin/club/protocol/ProtocolPrecense.vue"),
+                      path: "presence",
+                      name: "admin-club-protocol-presence",
+                      component: () => import("@/views/admin/club/protocol/ProtocolPresence.vue"),
                       props: true,
                     },
                     {
@@ -192,9 +192,9 @@ const router = createRouter({
                       props: true,
                     },
                     {
-                      path: "protocol",
-                      name: "admin-club-protocol-protocol",
-                      component: () => import("@/views/admin/club/protocol/ProtocolProtocol.vue"),
+                      path: "agenda",
+                      name: "admin-club-protocol-agenda",
+                      component: () => import("@/views/admin/club/protocol/ProtocolAgenda.vue"),
                       props: true,
                     },
                   ],
diff --git a/src/viewmodels/admin/protocolAgenda.models.ts b/src/viewmodels/admin/protocolAgenda.models.ts
new file mode 100644
index 0000000..3a59327
--- /dev/null
+++ b/src/viewmodels/admin/protocolAgenda.models.ts
@@ -0,0 +1,6 @@
+export interface ProtocolAgendaViewModel {
+  id: number;
+  topic: string;
+  context: string;
+  protocolId: number;
+}
diff --git a/src/viewmodels/admin/protocolDecision.models.ts b/src/viewmodels/admin/protocolDecision.models.ts
new file mode 100644
index 0000000..4a7212c
--- /dev/null
+++ b/src/viewmodels/admin/protocolDecision.models.ts
@@ -0,0 +1,6 @@
+export interface ProtocolDecisionViewModel {
+  id: number;
+  topic: string;
+  context: string;
+  protocolId: number;
+}
diff --git a/src/viewmodels/admin/protocolPresence.models.ts b/src/viewmodels/admin/protocolPresence.models.ts
new file mode 100644
index 0000000..9c10f59
--- /dev/null
+++ b/src/viewmodels/admin/protocolPresence.models.ts
@@ -0,0 +1,7 @@
+import { MemberViewModel } from "./member.models";
+
+export interface ProtocolPresenceViewModel {
+  memberId: number;
+  member: MemberViewModel;
+  protocolId: number;
+}
diff --git a/src/viewmodels/admin/protocolVoting.models.ts b/src/viewmodels/admin/protocolVoting.models.ts
new file mode 100644
index 0000000..686f423
--- /dev/null
+++ b/src/viewmodels/admin/protocolVoting.models.ts
@@ -0,0 +1,9 @@
+export interface ProtocolVotingViewModel {
+  id: number;
+  topic: string;
+  context: string;
+  favour: number;
+  abstain: number;
+  against: number;
+  protocolId: number;
+}
diff --git a/src/views/admin/club/protocol/Protocol.vue b/src/views/admin/club/protocol/Protocol.vue
index c21d9a2..dc9a17f 100644
--- a/src/views/admin/club/protocol/Protocol.vue
+++ b/src/views/admin/club/protocol/Protocol.vue
@@ -7,42 +7,17 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
-        <div class="flex flex-col w-full grow gap-2 pr-2 overflow-y-scroll">
-          <ProtocolListItem v-for="protocol in protocols" :key="protocol.id" :protocol="protocol" />
-        </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>
+        <Pagination
+          :items="protocols"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          @load-data="(offset, count, search) => fetchProtocols(offset, count)"
+          @search="(search) => fetchProtocols(0, 25, true)"
+        >
+          <template #pageRow="{ row }: { row: ProtocolViewModel }">
+            <ProtocolListItem :protocol="row" />
+          </template>
+        </Pagination>
 
         <div class="flex flex-row gap-4">
           <button primary class="!w-fit" @click="openCreateModal">Protokoll erstellen</button>
@@ -60,6 +35,8 @@ import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/vue/20/solid";
 import { useProtocolStore } from "@/stores/admin/protocol";
 import ProtocolListItem from "@/components/admin/club/protocol/ProtocolListItem.vue";
 import { useModalStore } from "@/stores/modal";
+import Pagination from "../../../../components/Pagination.vue";
+import type { ProtocolViewModel } from "../../../../viewmodels/admin/protocol.models";
 </script>
 
 <script lang="ts">
@@ -71,53 +48,7 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useProtocolStore, ["protocols", "totalCount"]),
-    entryCount() {
-      return this.totalCount ?? this.protocols.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.protocols, this.showingStart, this.showingEnd);
-    },
+    ...mapState(useProtocolStore, ["protocols", "totalCount", "loading"]),
   },
   mounted() {
     this.fetchProtocols(0, this.maxEntriesPerPage, true);
@@ -125,22 +56,6 @@ export default defineComponent({
   methods: {
     ...mapActions(useProtocolStore, ["fetchProtocols"]),
     ...mapActions(useModalStore, ["openModal"]),
-    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.protocols, pageStart, pageEnd).length;
-      if (loadedElementCount < this.maxEntriesPerPage) this.fetchProtocols(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);
-    },
     openCreateModal() {
       // this.openModal(
       //   markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/CreateProtocolModal.vue")))
diff --git a/src/views/admin/club/protocol/ProtocolProtocol.vue b/src/views/admin/club/protocol/ProtocolAgenda.vue
similarity index 90%
rename from src/views/admin/club/protocol/ProtocolProtocol.vue
rename to src/views/admin/club/protocol/ProtocolAgenda.vue
index 354862d..8822838 100644
--- a/src/views/admin/club/protocol/ProtocolProtocol.vue
+++ b/src/views/admin/club/protocol/ProtocolAgenda.vue
@@ -5,15 +5,11 @@
 
     <details class="flex flex-col gap-2 rounded-lg w-full justify-between border border-primary overflow-hidden">
       <summary class="flex flex-row gap-2 bg-primary p-2 w-full justify-between items-center cursor-pointer">
-        <input type="text" name="title" id="title" placeholder="TOP" autocomplete="off" />
-
-        <svg
-          class="fill-white stroke-white opacity-75 w-4 h-4 -mr-1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-        >
+        <svg class="fill-white stroke-white opacity-75 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
           <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
         </svg>
+
+        <input type="text" name="title" id="title" placeholder="TOP" autocomplete="off" />
       </summary>
       <QuillEditor
         id="top"
diff --git a/src/views/admin/club/protocol/ProtocolPrecense.vue b/src/views/admin/club/protocol/ProtocolPresence.vue
similarity index 100%
rename from src/views/admin/club/protocol/ProtocolPrecense.vue
rename to src/views/admin/club/protocol/ProtocolPresence.vue
diff --git a/src/views/admin/club/protocol/ProtocolRouting.vue b/src/views/admin/club/protocol/ProtocolRouting.vue
index fe56087..f24d348 100644
--- a/src/views/admin/club/protocol/ProtocolRouting.vue
+++ b/src/views/admin/club/protocol/ProtocolRouting.vue
@@ -68,10 +68,10 @@ export default defineComponent({
     return {
       tabs: [
         { route: "admin-club-protocol-overview", title: "Übersicht" },
-        { route: "admin-club-protocol-precense", title: "Anwesenheit" },
+        { route: "admin-club-protocol-presence", title: "Anwesenheit" },
         { route: "admin-club-protocol-voting", title: "Abstimmungen" },
         { route: "admin-club-protocol-decisions", title: "Beschlüsse" },
-        { route: "admin-club-protocol-protocol", title: "Protokoll" },
+        { route: "admin-club-protocol-agenda", title: "Protokoll" },
       ],
     };
   },
diff --git a/src/views/admin/members/Member.vue b/src/views/admin/members/Member.vue
index b225bdc..6270b3e 100644
--- a/src/views/admin/members/Member.vue
+++ b/src/views/admin/members/Member.vue
@@ -7,42 +7,17 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-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>
+        <Pagination
+          :items="members"
+          :totalCount="totalCount"
+          :indicateLoading="loading == 'loading'"
+          @load-data="(offset, count, search) => fetchMembers(offset, count)"
+          @search="(search) => fetchMembers(0, 25, true)"
+        >
+          <template #pageRow="{ row }: { row: MemberViewModel }">
+            <MemberListItem :member="row" />
+          </template>
+        </Pagination>
 
         <div class="flex flex-row gap-4">
           <button primary class="!w-fit" @click="openCreateModal">Mitglied erstellen</button>
@@ -60,6 +35,8 @@ import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/vue/20/solid";
 import { useMemberStore } from "@/stores/admin/member";
 import MemberListItem from "@/components/admin/club/member/MemberListItem.vue";
 import { useModalStore } from "@/stores/modal";
+import Pagination from "../../../components/Pagination.vue";
+import type { MemberViewModel } from "../../../viewmodels/admin/member.models";
 </script>
 
 <script lang="ts">
@@ -71,7 +48,7 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useMemberStore, ["members", "totalCount"]),
+    ...mapState(useMemberStore, ["members", "totalCount", "loading"]),
     entryCount() {
       return this.totalCount ?? this.members.length;
     },