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

Pagination central

Browse source
This commit is contained in:
Julian Krauser 2024-10-11 14:43:56 +02:00
parent 60d6150105
commit 8664836a20
11 changed files with 313 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

113
src/views/admin/club/protocol/Protocol.vue
View file

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

10
src/views/admin/club/protocol/ProtocolProtocol.vue → src/views/admin/club/protocol/ProtocolAgenda.vue
View file

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

0
src/views/admin/club/protocol/ProtocolPrecense.vue → src/views/admin/club/protocol/ProtocolPresence.vue
View file

4
src/views/admin/club/protocol/ProtocolRouting.vue
View file

@ -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" },
],
};
},

51
src/views/admin/members/Member.vue
View file

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