Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 10 Pull requests Projects Releases 7 Packages Wiki Activity Actions

member pagination search

Browse source
This commit is contained in:
Julian Krauser 2025-01-03 15:20:27 +01:00
parent da0408cc4d
commit acdeef47bf
3 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Pagination.vue
View file

@ -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;

4
src/stores/admin/club/member/member.ts
View file

@ -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

8
src/views/admin/club/members/Member.vue
View file

@ -11,8 +11,9 @@
:items="members"
:totalCount="totalCount"
:indicateLoading="loading == 'loading'"
@load-data="(offset, count, search) => fetchMembers(offset, count)"
@search="(search) => fetchMembers(0, 25, true)"
:useSearch="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"]),