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> <template>
<div class="grow flex flex-col gap-2 overflow-hidden"> <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 <input
type="text" 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" placeholder="Suche"
v-model="searchString" v-model="searchString"
/> />
@ -87,11 +88,14 @@ const slots = defineSlots<{
const timer = ref(undefined) as undefined | any; const timer = ref(undefined) as undefined | any;
const currentPage = ref(0); const currentPage = ref(0);
const searchString = ref(""); const searchString = ref("");
const deferingSearch = ref(false)
watch(searchString, async () => { watch(searchString, async () => {
deferingSearch.value = true
clearTimeout(timer.value); clearTimeout(timer.value);
timer.value = setTimeout(() => { timer.value = setTimeout(() => {
currentPage.value = 0; currentPage.value = 0;
deferingSearch.value = false
emit("search", searchString.value); emit("search", searchString.value);
}, 600); }, 600);
}); });
@ -108,7 +112,7 @@ const emit = defineEmits({
return typeof offset == "number" && typeof offset == "number" && typeof searchString == "number"; return typeof offset == "number" && typeof offset == "number" && typeof searchString == "number";
}, },
search(search: string) { search(search: string) {
return typeof search == "number"; return typeof search == "string";
}, },
clickRow(elem: T) { clickRow(elem: T) {
return true; return true;

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

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

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

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