Skip to content

Commit 22e3e53

Browse files
geofranzigeofranzi
committed
Fix server side Pagination #BEXIS2/Core#1893 
1 parent 9a52cdb commit 22e3e53

File tree

2 files changed

+61
-122
lines changed

2 files changed

+61
-122
lines changed

‎src/lib/components/Table/TableContent.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -680,11 +680,10 @@
680680
{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
681681
{#if serverSide}
682682
<TablePaginationServer
683-
{pageIndex}
684-
{pageSize}
685-
{serverItemCount}
686-
updateTable={updateTableWithParams}
683+
pageConfig={pluginStates.page}
687684
{pageSizes}
685+
itemCount={$serverItemCount}
686+
updateTable={updateTableWithParams}
688687
id={tableId}
689688
/>
690689
{:else}

‎src/lib/components/Table/TablePaginationServer.svelte‎

Lines changed: 58 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,86 @@
11
<script lang="ts">
22
import Fa from 'svelte-fa';
3-
import {
4-
faAnglesRight,
5-
faAngleRight,
6-
faAnglesLeft,
7-
faAngleLeft
8-
} from '@fortawesome/free-solid-svg-icons';
3+
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
4+
import { ListBox, ListBoxItem, Paginator, popup } from '@skeletonlabs/skeleton';
5+
import type { PopupSettings } from '@skeletonlabs/skeleton';
96
10-
export let id; // Unique table ID
11-
export let pageIndex;
12-
export let pageSize;
13-
export let pageSizes; // Available page sizes
14-
export let serverItemCount; // Total number of items expected from the server. `serverSide` must be true on table config.
7+
export let itemCount;
8+
export let pageConfig;
9+
export let pageSizes;
10+
export let id;
1511
export let updateTable; // Function to update table
1612
17-
// Flags for disabling buttons
18-
let goToFirstPageDisabled = true;
19-
let goToLastPageDisabled = true;
20-
let goToNextPageDisabled = true;
21-
let goToPreviousPageDisabled = true;
22-
23-
// Index information string
2413
let indexInformation = '';
2514
26-
// Handles the input change event
27-
const handleChange = (e) => {
28-
const value = e.target.value;
29-
30-
if (value > pageCount) {
31-
$pageIndex = pageCount - 1;
32-
} else if (value < 1) {
33-
$pageIndex = 0;
34-
} else {
35-
$pageIndex = value - 1;
36-
}
37-
38-
updateTable();
39-
};
15+
const { pageIndex, pageCount, pageSize } = pageConfig;
4016
41-
// Main navigation function
42-
const goTo = (dst: string) => {
43-
switch (dst) {
44-
case 'first':
45-
$pageIndex = 0;
46-
break;
47-
case 'last':
48-
$pageIndex = pageCount - 1;
49-
break;
50-
case 'next':
51-
$pageIndex += 1;
52-
break;
53-
case 'previous':
54-
$pageIndex -= 1;
55-
break;
56-
default:
57-
break;
58-
}
17+
let pageSizeDropdownValue: string = $pageSize;
5918
60-
// Fetch data for new parameters
61-
updateTable();
19+
const pageSizePopup: PopupSettings = {
20+
event: 'click',
21+
target: `#${id}-pageSizeDropdown`,
22+
placement: 'bottom',
23+
closeQuery: '.listbox-item'
6224
};
6325
6426
const getIndexInfomationString = () => {
65-
return serverItemCount === 0
27+
return itemCount === 0
6628
? 'No items'
6729
: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
6830
($pageIndex + 1) * $pageSize,
69-
serverItemCount
70-
)} of ${Math.min(pageCount * $pageSize, serverItemCount)}`;
31+
itemCount
32+
)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
7133
};
7234
73-
$: pageCount = Math.ceil($serverItemCount / $pageSize);
74-
$: goToFirstPageDisabled = !$pageIndex;
75-
$: goToLastPageDisabled = $pageIndex == pageCount - 1;
76-
$: goToNextPageDisabled = $pageIndex == pageCount - 1;
77-
$: goToPreviousPageDisabled = !$pageIndex;
78-
$: $pageSize && updateTable(); // Update query when page size changes
79-
$: pageCount, $pageIndex, $pageSize, (indexInformation = getIndexInfomationString());
35+
$: paginationSettings = {
36+
size: itemCount,
37+
limit: $pageSize,
38+
page: $pageIndex,
39+
amounts: pageSizes
40+
};
41+
$: $pageSize = pageSizeDropdownValue;
42+
$: $pageCount, $pageIndex, $pageSize, itemCount, (indexInformation = getIndexInfomationString());
8043
8144
updateTable();
45+
8246
</script>
8347

84-
<div class="flex justify-between w-full items-stretch gap-10">
48+
<div class="grid grid-cols-3 w-full items-stretch gap-10">
8549
<div class="flex justify-start">
86-
<select
87-
name="pageSize"
88-
id="{id}-pageSize"
89-
aria-label="Open menu to select number of items per page"
90-
class="select variant-filled-primary w-min font-bold"
91-
bind:value={$pageSize}
92-
>
93-
{#each pageSizes as size}
94-
<option value={size} class="!bg-primary-700">{size}</option>
95-
{/each}
96-
</select>
97-
</div>
98-
<div class="flex justify-center gap-1">
9950
<button
100-
class="btn btn-sm variant-filled-primary"
101-
title="Go to first page"
102-
on:click|preventDefault={() => goTo('first')}
103-
disabled={goToFirstPageDisabled}
104-
aria-label="Go to first page"
105-
id="{id}-first"
51+
aria-label="Open menu to select number of items to display per page"
52+
class="btn variant-filled-primary w-20 !px-3 !py-1.5 justify-between"
53+
use:popup={pageSizePopup}
10654
>
107-
<Fa icon={faAnglesLeft} /></button
108-
>
109-
<button
110-
class="btn btn-sm variant-filled-primary"
111-
title="Go to previous page"
112-
id="{id}-previous"
113-
aria-label="Go to previous page"
114-
on:click|preventDefault={() => goTo('previous')}
115-
disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
116-
>
117-
<input
118-
type="number"
119-
class="input border border-primary-500 rounded flex w-24"
120-
aria-label="Current page"
121-
value={$pageIndex + 1}
122-
max={pageCount}
123-
min={1}
124-
on:change={handleChange}
55+
<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
56+
<Fa icon={faChevronDown} size="xs" />
57+
</button>
58+
<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
59+
<ListBox rounded="rounded-none">
60+
{#each pageSizes as size}
61+
<ListBoxItem bind:group={pageSizeDropdownValue} name="medium" value={size}
62+
>{size}</ListBoxItem
63+
>
64+
{/each}
65+
</ListBox>
66+
<div class="arrow bg-surface-100-800-token" />
67+
</div>
68+
</div>
69+
<div class="flex justify-center">
70+
<Paginator
71+
on:page={(page) => (updateTable(), $pageIndex = page.detail)}
72+
on:amount={(amount) => (updateTable(), ($pageSize = amount.detail))}
73+
settings={paginationSettings}
74+
select="hidden"
75+
active="!variant-filled-secondary !text-on-secondary-token"
76+
controlVariant="!text-on-primary-token"
77+
buttonClasses="!rounded-none !px-3 !py-1.5 fill-current bg-primary-500 hover:!bg-primary-600 !text-on-primary-token disabled:grayscale disabled:!opacity-30"
78+
regionControl="btn-group"
79+
maxNumerals={1}
80+
showNumerals
12581
/>
126-
<button
127-
class="btn btn-sm variant-filled-primary"
128-
id="{id}-next"
129-
on:click|preventDefault={() => goTo('next')}
130-
aria-label="Go to next page"
131-
disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
132-
>
133-
<button
134-
class="btn btn-sm variant-filled-primary"
135-
id="{id}-last"
136-
aria-label="Go to last page"
137-
on:click|preventDefault={() => goTo('last')}
138-
disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
139-
>
14082
</div>
141-
<div class="flex justify-end items-center">
142-
<span class="text-sm text-gray-500">
143-
{indexInformation}
144-
</span>
83+
<div class="flex justify-end items-center text-on-primary-token">
84+
<span class="text-xs text-gray-500">{indexInformation}</span>
14585
</div>
14686
</div>

0 commit comments

Comments
 (0)