src/components/Pagination.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="grow flex flex-col gap-2 overflow-hidden">
-    <div v-if="useSearch" class="relative self-end">
+    <div v-if="useSearch" class="relative self-end flex flex-row items-center gap-2">
+      <Spinner v-if="deferingSearch"  />
       <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"
+        class="!max-w-64 !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"
       />
@@ -87,11 +88,14 @@ const slots = defineSlots<{
 const timer = ref(undefined) as undefined | any;
 const currentPage = ref(0);
 const searchString = ref("");
+const deferingSearch = ref(false)
 
 watch(searchString, async () => {
+  deferingSearch.value = true
   clearTimeout(timer.value);
   timer.value = setTimeout(() => {
     currentPage.value = 0;
+    deferingSearch.value = false
     emit("search", searchString.value);
   }, 600);
 });
@@ -108,7 +112,7 @@ const emit = defineEmits({
     return typeof offset == "number" && typeof offset == "number" && typeof searchString == "number";
   },
   search(search: string) {
-    return typeof search == "number";
+    return typeof search == "string";
   },
   clickRow(elem: T) {
     return true;

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

@@ -16,11 +16,11 @@ export const useMemberStore = defineStore("member", {
     };
   },
   actions: {
-    fetchMembers(offset = 0, count = 25, clear = false) {
+    fetchMembers(offset = 0, count = 25, search = "", clear = false) {
       if (clear) this.members = [];
       this.loading = "loading";
       http
-        .get(`/admin/member?offset=${offset}&count=${count}`)
+        .get(`/admin/member?offset=${offset}&count=${count}${search != "" ? "&search=" + search : ""}`)
         .then((result) => {
           this.totalCount = result.data.total;
           result.data.members

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

@@ -11,8 +11,9 @@
           :items="members"
           :totalCount="totalCount"
           :indicateLoading="loading == 'loading'"
-          @load-data="(offset, count, search) => fetchMembers(offset, count)"
+          :useSearch="true"
-          @search="(search) => fetchMembers(0, 25, true)"
+          @load-data="(offset, count, search) => fetchMembers(offset, count, search)"
+          @search="(search) => fetchMembers(0, maxEntriesPerPage, search, true)"
         >
           <template #pageRow="{ row }: { row: MemberViewModel }">
             <MemberListItem :member="row" />
@@ -33,7 +34,6 @@
 import { defineAsyncComponent, defineComponent, markRaw } 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/club/member/member";
 import MemberListItem from "@/components/admin/club/member/MemberListItem.vue";
 import { useModalStore } from "@/stores/modal";
@@ -55,7 +55,7 @@ export default defineComponent({
     ...mapState(useAbilityStore, ["can"]),
   },
   mounted() {
-    this.fetchMembers(0, this.maxEntriesPerPage, true);
+    this.fetchMembers(0, this.maxEntriesPerPage, "", true);
   },
   methods: {
     ...mapActions(useMemberStore, ["fetchMembers"]),