adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 19:52:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add pagination to client and project table

Browse Source
This commit is contained in:
Gregor Vostrak
2026-06-28 17:39:54 +02:00
parent 50f57f6997
commit 7d9db18063
8 changed files with 488 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/Components/Common/Client/ClientTable.vue
View File

@@ -2,11 +2,12 @@
import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
import { UserCircleIcon } from '@heroicons/vue/24/solid';
import { PlusIcon } from '@heroicons/vue/16/solid';
import { type Component, computed, ref } from 'vue';
import { type Component, computed, ref, watch } from 'vue';
import { type Client } from '@/packages/api/src';
import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
import Pagination from '@/Components/Common/Pagination.vue';
import { canCreateClients } from '@/utils/permissions';
import { useProjectsQuery } from '@/utils/useProjectsQuery';
import {
@@ -100,6 +101,19 @@ const table = useVueTable({
const sortedClients = computed(() => {
return table.getRowModel().rows.map((row) => row.original);
});
// Client-side pagination: the full list is in memory, only one page is mounted at a time.
const PAGE_SIZE = 15;
const currentPage = ref(1);
watch([() => props.sortColumn, () => props.sortDirection, () => props.clients], () => {
currentPage.value = 1;
});
const paginatedClients = computed(() => {
const start = (currentPage.value - 1) * PAGE_SIZE;
return sortedClients.value.slice(start, start + PAGE_SIZE);
});
</script>
<template>
@@ -126,10 +140,14 @@ const sortedClients = computed(() => {
>Create your First Client
</SecondaryButton>
</div>
<template v-for="client in sortedClients" :key="client.id">
<template v-for="client in paginatedClients" :key="client.id">
<ClientTableRow :client="client"></ClientTableRow>
</template>
</div>
</div>
</div>
<Pagination
v-model:page="currentPage"
:total="sortedClients.length"
:items-per-page="PAGE_SIZE"></Pagination>
</template>