Pagination central
This commit is contained in:
parent
60d6150105
commit
8664836a20
11 changed files with 313 additions and 151 deletions
246
src/components/Pagination.vue
Normal file
246
src/components/Pagination.vue
Normal file
|
|
@ -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> -->
|
||||
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
|
|
|
|||
6
src/viewmodels/admin/protocolAgenda.models.ts
Normal file
6
src/viewmodels/admin/protocolAgenda.models.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export interface ProtocolAgendaViewModel {
|
||||
id: number;
|
||||
topic: string;
|
||||
context: string;
|
||||
protocolId: number;
|
||||
}
|
||||
6
src/viewmodels/admin/protocolDecision.models.ts
Normal file
6
src/viewmodels/admin/protocolDecision.models.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export interface ProtocolDecisionViewModel {
|
||||
id: number;
|
||||
topic: string;
|
||||
context: string;
|
||||
protocolId: number;
|
||||
}
|
||||
7
src/viewmodels/admin/protocolPresence.models.ts
Normal file
7
src/viewmodels/admin/protocolPresence.models.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { MemberViewModel } from "./member.models";
|
||||
|
||||
export interface ProtocolPresenceViewModel {
|
||||
memberId: number;
|
||||
member: MemberViewModel;
|
||||
protocolId: number;
|
||||
}
|
||||
9
src/viewmodels/admin/protocolVoting.models.ts
Normal file
9
src/viewmodels/admin/protocolVoting.models.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export interface ProtocolVotingViewModel {
|
||||
id: number;
|
||||
topic: string;
|
||||
context: string;
|
||||
favour: number;
|
||||
abstain: number;
|
||||
against: number;
|
||||
protocolId: number;
|
||||
}
|
||||
|
|
@ -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")))
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -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" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue