@bexis2/bexis2-core-ui 0.4.36 → 0.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -0
- package/dist/components/Table/TableContent.svelte +5 -5
- package/dist/components/Table/TablePaginationServer.svelte +58 -109
- package/dist/components/Table/TablePaginationServer.svelte.d.ts +3 -4
- package/dist/components/Table/utils.d.ts +2 -2
- package/dist/components/Table/utils.js +4 -1
- package/package.json +1 -1
- package/src/lib/components/Table/TableContent.svelte +6 -5
- package/src/lib/components/Table/TablePaginationServer.svelte +61 -118
- package/src/lib/components/Table/utils.ts +6 -3
package/README.md
CHANGED
|
@@ -269,7 +269,8 @@ const updateTableWithParams = async () => {
|
|
|
269
269
|
data,
|
|
270
270
|
serverItems,
|
|
271
271
|
columns,
|
|
272
|
-
dispatch
|
|
272
|
+
dispatch,
|
|
273
|
+
sendModel.order
|
|
273
274
|
);
|
|
274
275
|
isFetching = false;
|
|
275
276
|
return result;
|
|
@@ -601,11 +602,10 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
|
|
|
601
602
|
{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
|
|
602
603
|
{#if serverSide}
|
|
603
604
|
<TablePaginationServer
|
|
604
|
-
{
|
|
605
|
-
{pageSize}
|
|
606
|
-
{serverItemCount}
|
|
607
|
-
updateTable={updateTableWithParams}
|
|
605
|
+
pageConfig={pluginStates.page}
|
|
608
606
|
{pageSizes}
|
|
607
|
+
itemCount={$serverItemCount}
|
|
608
|
+
updateTable={updateTableWithParams}
|
|
609
609
|
id={tableId}
|
|
610
610
|
/>
|
|
611
611
|
{:else}
|
|
@@ -1,127 +1,76 @@
|
|
|
1
1
|
<script>import Fa from "svelte-fa";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
faAngleLeft
|
|
7
|
-
} from "@fortawesome/free-solid-svg-icons";
|
|
8
|
-
export let id;
|
|
9
|
-
export let pageIndex;
|
|
10
|
-
export let pageSize;
|
|
2
|
+
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
|
|
3
|
+
import { ListBox, ListBoxItem, Paginator, popup } from "@skeletonlabs/skeleton";
|
|
4
|
+
export let itemCount;
|
|
5
|
+
export let pageConfig;
|
|
11
6
|
export let pageSizes;
|
|
12
|
-
export let
|
|
7
|
+
export let id;
|
|
13
8
|
export let updateTable;
|
|
14
|
-
let goToFirstPageDisabled = true;
|
|
15
|
-
let goToLastPageDisabled = true;
|
|
16
|
-
let goToNextPageDisabled = true;
|
|
17
|
-
let goToPreviousPageDisabled = true;
|
|
18
9
|
let indexInformation = "";
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
$pageIndex = value - 1;
|
|
27
|
-
}
|
|
28
|
-
updateTable();
|
|
29
|
-
};
|
|
30
|
-
const goTo = (dst) => {
|
|
31
|
-
switch (dst) {
|
|
32
|
-
case "first":
|
|
33
|
-
$pageIndex = 0;
|
|
34
|
-
break;
|
|
35
|
-
case "last":
|
|
36
|
-
$pageIndex = pageCount - 1;
|
|
37
|
-
break;
|
|
38
|
-
case "next":
|
|
39
|
-
$pageIndex += 1;
|
|
40
|
-
break;
|
|
41
|
-
case "previous":
|
|
42
|
-
$pageIndex -= 1;
|
|
43
|
-
break;
|
|
44
|
-
default:
|
|
45
|
-
break;
|
|
46
|
-
}
|
|
47
|
-
updateTable();
|
|
10
|
+
const { pageIndex, pageCount, pageSize } = pageConfig;
|
|
11
|
+
let pageSizeDropdownValue = $pageSize;
|
|
12
|
+
const pageSizePopup = {
|
|
13
|
+
event: "click",
|
|
14
|
+
target: `#${id}-pageSizeDropdown`,
|
|
15
|
+
placement: "bottom",
|
|
16
|
+
closeQuery: ".listbox-item"
|
|
48
17
|
};
|
|
49
18
|
const getIndexInfomationString = () => {
|
|
50
|
-
return
|
|
19
|
+
return itemCount === 0 ? "No items" : `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
|
|
51
20
|
($pageIndex + 1) * $pageSize,
|
|
52
|
-
|
|
53
|
-
)} of ${Math.min(pageCount * $pageSize,
|
|
21
|
+
itemCount
|
|
22
|
+
)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
|
|
23
|
+
};
|
|
24
|
+
$: paginationSettings = {
|
|
25
|
+
size: itemCount,
|
|
26
|
+
limit: $pageSize,
|
|
27
|
+
page: $pageIndex,
|
|
28
|
+
amounts: pageSizes
|
|
54
29
|
};
|
|
55
|
-
$:
|
|
56
|
-
$:
|
|
57
|
-
$: goToLastPageDisabled = $pageIndex == pageCount - 1;
|
|
58
|
-
$: goToNextPageDisabled = $pageIndex == pageCount - 1;
|
|
59
|
-
$: goToPreviousPageDisabled = !$pageIndex;
|
|
60
|
-
$: $pageSize && updateTable();
|
|
61
|
-
$: pageCount, $pageIndex, $pageSize, indexInformation = getIndexInfomationString();
|
|
30
|
+
$: $pageSize = pageSizeDropdownValue;
|
|
31
|
+
$: $pageCount, $pageIndex, $pageSize, itemCount, indexInformation = getIndexInfomationString();
|
|
62
32
|
updateTable();
|
|
63
33
|
</script>
|
|
64
34
|
|
|
65
|
-
<div class="
|
|
35
|
+
<div class="grid grid-cols-3 w-full items-stretch gap-10">
|
|
66
36
|
<div class="flex justify-start">
|
|
67
|
-
|
|
68
|
-
name="pageSize"
|
|
69
|
-
id="{id}-pageSize"
|
|
70
|
-
aria-label="Open menu to select number of items per page"
|
|
71
|
-
class="select variant-filled-primary w-min font-bold"
|
|
72
|
-
bind:value={$pageSize}
|
|
73
|
-
>
|
|
74
|
-
{#each pageSizes as size}
|
|
75
|
-
<option value={size} class="!bg-primary-700">{size}</option>
|
|
76
|
-
{/each}
|
|
77
|
-
</select>
|
|
78
|
-
</div>
|
|
79
|
-
<div class="flex justify-center gap-1">
|
|
80
|
-
<button
|
|
81
|
-
class="btn btn-sm variant-filled-primary"
|
|
82
|
-
title="Go to first page"
|
|
83
|
-
on:click|preventDefault={() => goTo('first')}
|
|
84
|
-
disabled={goToFirstPageDisabled}
|
|
85
|
-
aria-label="Go to first page"
|
|
86
|
-
id="{id}-first"
|
|
87
|
-
>
|
|
88
|
-
<Fa icon={faAnglesLeft} /></button
|
|
89
|
-
>
|
|
37
|
+
<!-- replace default select from Paginator below to be able to style properly -->
|
|
90
38
|
<button
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
aria-label="Go to previous page"
|
|
95
|
-
on:click|preventDefault={() => goTo('previous')}
|
|
96
|
-
disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
|
|
39
|
+
aria-label="Open menu to select number of items to display per page"
|
|
40
|
+
class="btn variant-filled-primary w-20 !px-3 !py-1.5 justify-between"
|
|
41
|
+
use:popup={pageSizePopup}
|
|
97
42
|
>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
43
|
+
<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
|
|
44
|
+
<Fa icon={faChevronDown} size="xs" />
|
|
45
|
+
</button>
|
|
46
|
+
<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
|
|
47
|
+
<ListBox rounded="rounded-none">
|
|
48
|
+
{#each pageSizes as size}
|
|
49
|
+
<ListBoxItem
|
|
50
|
+
bind:group={pageSizeDropdownValue}
|
|
51
|
+
name="medium" value={size}
|
|
52
|
+
on:click={() => { $pageSize = size; updateTable(); }}
|
|
53
|
+
>{size}</ListBoxItem
|
|
54
|
+
>
|
|
55
|
+
{/each}
|
|
56
|
+
</ListBox>
|
|
57
|
+
<div class="arrow bg-surface-100-800-token" />
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="flex justify-center">
|
|
61
|
+
<Paginator
|
|
62
|
+
on:page={(page) => {$pageIndex = page.detail; updateTable(); }}
|
|
63
|
+
settings={paginationSettings}
|
|
64
|
+
select="hidden"
|
|
65
|
+
active="!variant-filled-secondary !text-on-secondary-token"
|
|
66
|
+
controlVariant="!text-on-primary-token"
|
|
67
|
+
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"
|
|
68
|
+
regionControl="btn-group"
|
|
69
|
+
maxNumerals={1}
|
|
70
|
+
showNumerals
|
|
106
71
|
/>
|
|
107
|
-
<button
|
|
108
|
-
class="btn btn-sm variant-filled-primary"
|
|
109
|
-
id="{id}-next"
|
|
110
|
-
on:click|preventDefault={() => goTo('next')}
|
|
111
|
-
aria-label="Go to next page"
|
|
112
|
-
disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
|
|
113
|
-
>
|
|
114
|
-
<button
|
|
115
|
-
class="btn btn-sm variant-filled-primary"
|
|
116
|
-
id="{id}-last"
|
|
117
|
-
aria-label="Go to last page"
|
|
118
|
-
on:click|preventDefault={() => goTo('last')}
|
|
119
|
-
disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
|
|
120
|
-
>
|
|
121
72
|
</div>
|
|
122
|
-
<div class="flex justify-end items-center">
|
|
123
|
-
<span class="text-
|
|
124
|
-
{indexInformation}
|
|
125
|
-
</span>
|
|
73
|
+
<div class="flex justify-end items-center text-on-primary-token">
|
|
74
|
+
<span class="text-xs text-gray-500">{indexInformation}</span>
|
|
126
75
|
</div>
|
|
127
76
|
</div>
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
pageSize: any;
|
|
4
|
+
itemCount: any;
|
|
5
|
+
pageConfig: any;
|
|
7
6
|
pageSizes: any;
|
|
8
|
-
|
|
7
|
+
id: any;
|
|
9
8
|
updateTable: any;
|
|
10
9
|
};
|
|
11
10
|
events: {
|
|
@@ -2,7 +2,7 @@ import { SvelteComponent } from 'svelte';
|
|
|
2
2
|
import type { Writable } from 'svelte/store';
|
|
3
3
|
import { Receive } from '../../models/Models';
|
|
4
4
|
import type { FilterOptionsEnum } from '../../models/Enums';
|
|
5
|
-
import type { Columns, Filter, ServerColumn, ServerConfig } from '../../models/Models';
|
|
5
|
+
import type { Columns, Filter, OrderBy, ServerColumn, ServerConfig } from '../../models/Models';
|
|
6
6
|
export declare const minWidth: (id: string, columns: Columns | undefined) => number;
|
|
7
7
|
export declare const fixedWidth: (id: string, columns: Columns | undefined) => number;
|
|
8
8
|
export declare const cellStyle: (id: string, columns: Columns | undefined) => string;
|
|
@@ -23,7 +23,7 @@ export declare const missingValuesFn: (key: number | string, missingValues: {
|
|
|
23
23
|
}) => string | number;
|
|
24
24
|
export declare const updateTable: (pageSize: number, pageIndex: number, server: ServerConfig | undefined, filters: {
|
|
25
25
|
[key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
|
|
26
|
-
}, data: Writable<any[]>, serverItems: Writable<number> | undefined, columns: Columns | undefined, dispatch: any) => Promise<Receive>;
|
|
26
|
+
}, data: Writable<any[]>, serverItems: Writable<number> | undefined, columns: Columns | undefined, dispatch: any, order?: OrderBy[]) => Promise<Receive>;
|
|
27
27
|
export declare const convertServerColumns: (serverColumns: ServerColumn[], columns: Columns | undefined) => Columns;
|
|
28
28
|
export declare const getMaxCellHeightInRow: (tableRef: HTMLTableElement, resizable: "columns" | "rows" | "none" | "both", optionsComponent: typeof SvelteComponent | undefined, rowHeights: Writable<{
|
|
29
29
|
[key: number]: {
|
|
@@ -141,7 +141,7 @@ export const missingValuesFn = (key, missingValues) => {
|
|
|
141
141
|
return foundKey ? missingValues[foundKey] : key;
|
|
142
142
|
};
|
|
143
143
|
// Function to update the server-side table data
|
|
144
|
-
export const updateTable = async (pageSize, pageIndex, server, filters, data, serverItems, columns, dispatch) => {
|
|
144
|
+
export const updateTable = async (pageSize, pageIndex, server, filters, data, serverItems, columns, dispatch, order = []) => {
|
|
145
145
|
const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
|
|
146
146
|
if (!sendModel)
|
|
147
147
|
throw new Error('Server-side configuration is missing');
|
|
@@ -150,6 +150,7 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
|
|
|
150
150
|
sendModel.version = versionId || -1;
|
|
151
151
|
sendModel.id = entityId || -1;
|
|
152
152
|
sendModel.filter = normalizeFilters(filters);
|
|
153
|
+
sendModel.order = order;
|
|
153
154
|
let fetchData;
|
|
154
155
|
try {
|
|
155
156
|
fetchData = await fetch(baseUrl || '', {
|
|
@@ -186,6 +187,8 @@ export const updateTable = async (pageSize, pageIndex, server, filters, data, se
|
|
|
186
187
|
data.set(tmpArr);
|
|
187
188
|
}
|
|
188
189
|
serverItems?.set(response.count);
|
|
190
|
+
console.log('Server data updated');
|
|
191
|
+
console.log(response);
|
|
189
192
|
return response;
|
|
190
193
|
};
|
|
191
194
|
// Function to convert server data to client data
|
package/package.json
CHANGED
|
@@ -303,6 +303,7 @@
|
|
|
303
303
|
const { hiddenColumnIds } = pluginStates.hideColumns;
|
|
304
304
|
|
|
305
305
|
const sortServer = (order: 'asc' | 'desc' | undefined, id: string) => {
|
|
306
|
+
|
|
306
307
|
if (!sendModel) throw new Error('Server-side configuration is missing');
|
|
307
308
|
// Set parameter for sorting
|
|
308
309
|
if (order === undefined) {
|
|
@@ -328,7 +329,8 @@
|
|
|
328
329
|
data,
|
|
329
330
|
serverItems,
|
|
330
331
|
columns,
|
|
331
|
-
dispatch
|
|
332
|
+
dispatch,
|
|
333
|
+
sendModel.order
|
|
332
334
|
);
|
|
333
335
|
isFetching = false;
|
|
334
336
|
|
|
@@ -680,11 +682,10 @@
|
|
|
680
682
|
{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
|
|
681
683
|
{#if serverSide}
|
|
682
684
|
<TablePaginationServer
|
|
683
|
-
{
|
|
684
|
-
{pageSize}
|
|
685
|
-
{serverItemCount}
|
|
686
|
-
updateTable={updateTableWithParams}
|
|
685
|
+
pageConfig={pluginStates.page}
|
|
687
686
|
{pageSizes}
|
|
687
|
+
itemCount={$serverItemCount}
|
|
688
|
+
updateTable={updateTableWithParams}
|
|
688
689
|
id={tableId}
|
|
689
690
|
/>
|
|
690
691
|
{:else}
|
|
@@ -1,146 +1,89 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import Fa from 'svelte-fa';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
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';
|
|
9
6
|
|
|
10
|
-
export let
|
|
11
|
-
export let
|
|
12
|
-
export let
|
|
13
|
-
export let
|
|
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;
|
|
15
11
|
export let updateTable; // Function to update table
|
|
16
12
|
|
|
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
|
|
24
13
|
let indexInformation = '';
|
|
25
14
|
|
|
26
|
-
|
|
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;
|
|
40
16
|
|
|
41
|
-
|
|
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;
|
|
59
18
|
|
|
60
|
-
|
|
61
|
-
|
|
19
|
+
const pageSizePopup: PopupSettings = {
|
|
20
|
+
event: 'click',
|
|
21
|
+
target: `#${id}-pageSizeDropdown`,
|
|
22
|
+
placement: 'bottom',
|
|
23
|
+
closeQuery: '.listbox-item'
|
|
62
24
|
};
|
|
63
25
|
|
|
64
26
|
const getIndexInfomationString = () => {
|
|
65
|
-
return
|
|
27
|
+
return itemCount === 0
|
|
66
28
|
? 'No items'
|
|
67
29
|
: `Displaying items ${$pageIndex * $pageSize + 1} - ${Math.min(
|
|
68
30
|
($pageIndex + 1) * $pageSize,
|
|
69
|
-
|
|
70
|
-
)} of ${Math.min(pageCount * $pageSize,
|
|
31
|
+
itemCount
|
|
32
|
+
)} of ${Math.min($pageCount * $pageSize, itemCount)}`;
|
|
71
33
|
};
|
|
72
34
|
|
|
73
|
-
$:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
$:
|
|
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());
|
|
80
43
|
|
|
81
44
|
updateTable();
|
|
45
|
+
|
|
82
46
|
</script>
|
|
83
47
|
|
|
84
|
-
<div class="
|
|
48
|
+
<div class="grid grid-cols-3 w-full items-stretch gap-10">
|
|
85
49
|
<div class="flex justify-start">
|
|
86
|
-
|
|
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">
|
|
50
|
+
<!-- replace default select from Paginator below to be able to style properly -->
|
|
99
51
|
<button
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
disabled={goToFirstPageDisabled}
|
|
104
|
-
aria-label="Go to first page"
|
|
105
|
-
id="{id}-first"
|
|
52
|
+
aria-label="Open menu to select number of items to display per page"
|
|
53
|
+
class="btn variant-filled-primary w-20 !px-3 !py-1.5 justify-between"
|
|
54
|
+
use:popup={pageSizePopup}
|
|
106
55
|
>
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
56
|
+
<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
|
|
57
|
+
<Fa icon={faChevronDown} size="xs" />
|
|
58
|
+
</button>
|
|
59
|
+
<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
|
|
60
|
+
<ListBox rounded="rounded-none">
|
|
61
|
+
{#each pageSizes as size}
|
|
62
|
+
<ListBoxItem
|
|
63
|
+
bind:group={pageSizeDropdownValue}
|
|
64
|
+
name="medium" value={size}
|
|
65
|
+
on:click={() => { $pageSize = size; updateTable(); }}
|
|
66
|
+
>{size}</ListBoxItem
|
|
67
|
+
>
|
|
68
|
+
{/each}
|
|
69
|
+
</ListBox>
|
|
70
|
+
<div class="arrow bg-surface-100-800-token" />
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="flex justify-center">
|
|
74
|
+
<Paginator
|
|
75
|
+
on:page={(page) => {$pageIndex = page.detail; updateTable(); }}
|
|
76
|
+
settings={paginationSettings}
|
|
77
|
+
select="hidden"
|
|
78
|
+
active="!variant-filled-secondary !text-on-secondary-token"
|
|
79
|
+
controlVariant="!text-on-primary-token"
|
|
80
|
+
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"
|
|
81
|
+
regionControl="btn-group"
|
|
82
|
+
maxNumerals={1}
|
|
83
|
+
showNumerals
|
|
125
84
|
/>
|
|
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
|
-
>
|
|
140
85
|
</div>
|
|
141
|
-
<div class="flex justify-end items-center">
|
|
142
|
-
<span class="text-
|
|
143
|
-
{indexInformation}
|
|
144
|
-
</span>
|
|
86
|
+
<div class="flex justify-end items-center text-on-primary-token">
|
|
87
|
+
<span class="text-xs text-gray-500">{indexInformation}</span>
|
|
145
88
|
</div>
|
|
146
89
|
</div>
|
|
@@ -4,7 +4,7 @@ import type { Writable } from 'svelte/store';
|
|
|
4
4
|
|
|
5
5
|
import { Send, Receive } from '$models/Models';
|
|
6
6
|
import type { FilterOptionsEnum } from '$models/Enums';
|
|
7
|
-
import type { Columns, Filter, ServerColumn, ServerConfig } from '$models/Models';
|
|
7
|
+
import type { Columns, Filter, OrderBy, ServerColumn, ServerConfig } from '$models/Models';
|
|
8
8
|
|
|
9
9
|
// Function to determine minWidth for a column to simplify the logic in the HTML
|
|
10
10
|
export const minWidth = (id: string, columns: Columns | undefined) => {
|
|
@@ -185,7 +185,8 @@ export const updateTable = async (
|
|
|
185
185
|
data: Writable<any[]>,
|
|
186
186
|
serverItems: Writable<number> | undefined,
|
|
187
187
|
columns: Columns | undefined,
|
|
188
|
-
dispatch: any
|
|
188
|
+
dispatch: any,
|
|
189
|
+
order: OrderBy[] = [],
|
|
189
190
|
) => {
|
|
190
191
|
const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
|
|
191
192
|
|
|
@@ -196,6 +197,7 @@ export const updateTable = async (
|
|
|
196
197
|
sendModel.version = versionId || -1;
|
|
197
198
|
sendModel.id = entityId || -1;
|
|
198
199
|
sendModel.filter = normalizeFilters(filters);
|
|
200
|
+
sendModel.order = order;
|
|
199
201
|
|
|
200
202
|
let fetchData;
|
|
201
203
|
|
|
@@ -240,7 +242,8 @@ export const updateTable = async (
|
|
|
240
242
|
}
|
|
241
243
|
|
|
242
244
|
serverItems?.set(response.count);
|
|
243
|
-
|
|
245
|
+
console.log('Server data updated');
|
|
246
|
+
console.log(response);
|
|
244
247
|
return response;
|
|
245
248
|
};
|
|
246
249
|
// Function to convert server data to client data
|