Table

src/lib/components/Facets/Facets.svelte

@@ -11,18 +11,14 @@
 	export let showAll = false;
 	export let open = false;
 
-	let selected: { [key: string]: SelectedFacetGroup };
-	let selectedItems: {
-		[key: string]: {
-			[key: string]: boolean;
-		};
-	} = {};
-	let selectedGroups: { [key: string]: boolean } = {};
+	export const showMore = (groupName: string) => {
+		const group: SelectedFacetGroup = selected[groupName];
 
-	const dispatch = createEventDispatcher();
+		dispatch('showMoreOpenChange', {
+			group: group.name,
+			open: true
+		});
 
-	const modalStore = getModalStore();
-	const showMore = (group: SelectedFacetGroup) => {
 		modalStore.trigger({
 			type: 'component',
 			title: `${group.displayName}`,
@@ -37,14 +33,50 @@
 		});
 	};
 
+	let selected: { [key: string]: SelectedFacetGroup };
+	let selectedItems: {
+		[key: string]: {
+			[key: string]: boolean;
+		};
+	} = {};
+	let selectedGroups: { [key: string]: boolean } = {};
+
+	const dispatch = createEventDispatcher();
+
+	const modalStore = getModalStore();
+
 	const handleSave = (group: SelectedFacetGroup) => {
-		Object.keys(group.children).forEach((key) => {
-			selectedItems[group.name][key] = group.children[key].selected || false;
+		const { name: groupName, children } = group;
+
+		dispatch('showMoreOpenChange', {
+			group: groupName,
+			open: false
 		});
+
+		for (const key in children) {
+			const selectedValue = children[key].selected || false;
+			selectedItems[groupName][key] = selectedValue;
+
+			if (selected[groupName].children[key].selected !== selectedValue) {
+				selected[groupName].children[key].selected = selectedValue;
+			}
+		}
+
+		dispatch('showMoreSelect', [
+			{
+				parent: groupName,
+				selected: Object.keys(children).map((key) => children[key].selected)
+			}
+		]);
+
 		modalStore.close();
 	};
 
-	const handleCancel = () => {
+	const handleCancel = (groupName: string) => {
+		dispatch('showMoreOpenChange', {
+			group: groupName,
+			open: false
+		});
 		modalStore.close();
 	};
 
@@ -75,9 +107,10 @@
 			});
 		}
 
-		changed.length && dispatch('change', changed);
+		changed.length && dispatch('facetSelect', changed);
 	};
 
+	// Keeping the sorting function, but stays unused for now
 	const sortOptions = () => {
 		// Sort facets in a descending order if count exits, or sort alphabetically
 		Object.keys(selected).forEach((group) => {
@@ -139,7 +172,7 @@
 	});
 
 	$: displayedGroups = structuredClone($groups);
-	$: selectedItems, mapSelected('items'), sortOptions();
+	$: selectedItems, mapSelected('items'); // sortOptions(); // Sorting is not used for now
 	$: selectedGroups, mapSelected('groups');
 </script>
 
@@ -177,7 +210,7 @@
 					<!-- Trigger for the Modal to view all options -->
 					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							<button class="anchor" on:click={() => showMore(group.name)}>more</button
 							></TreeViewItem
 						>
 					{/if}

src/lib/components/Facets/ShowMore.svelte

@@ -3,7 +3,7 @@
 
 	export let group: SelectedFacetGroup;
 	export let handleSave: (group: SelectedFacetGroup) => {};
-	export let handleCancel: () => {};
+	export let handleCancel: (groupName: string) => {};
 
 	let selected = structuredClone(group.children);
 
@@ -25,7 +25,7 @@
 	const onCancel = () => {
 		console.log(selected, group.children);
 		selected = structuredClone(group.children);
-		handleCancel();
+		handleCancel(group.name);
 	};
 
 	const gridClass = (items: any[]) => {

src/lib/components/Table/TableContent.svelte

@@ -390,10 +390,11 @@
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
 						if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = searchValue;
-}
+							throw new Error('Server-side configuration is missing');
+						} else {
+							sendModel.q = searchValue;
+						}
+
 						$filterValue = searchValue;
 					}}
 				>
@@ -410,12 +411,10 @@ sendModel.q = searchValue;
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = '';
-}
-
-							$filterValue = searchValue;
+									throw new Error('Server-side configuration is missing');
+								} else {
+									sendModel.q = '';
+								}
 
 								searchValue = '';
 								$filterValue = '';
@@ -428,10 +427,10 @@ sendModel.q = '';
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
-throw new Error('Server-side configuration is missing');
-} else {
-sendModel.q = searchValue;
-}
+								throw new Error('Server-side configuration is missing');
+							} else {
+								sendModel.q = searchValue;
+							}
 
 							$filterValue = searchValue;
 						}}>Search</button
@@ -574,6 +573,13 @@ sendModel.q = searchValue;
 						{/each}
 					</tbody>
 				</table>
+				{#if $pageRows.length === 0}
+					<div
+						class="p-8 flex items-center justify-center bg-tertiary-500/30 dark:bg-tertiary-900/10"
+					>
+						No rows available
+					</div>
+				{/if}
 			</div>
 		</div>
 	{:else}

src/lib/components/Table/TablePagination.svelte

@@ -117,11 +117,7 @@
 	<div class="flex justify-end items-center">
 		<span class="text-sm text-gray-500">
 			{#if $pageCount > 0}
-				{#if $pageCount == 1}
-					1 page
-				{:else}
-					{$pageCount} pages
-				{/if}
+				Page {$pageIndex + 1} of {$pageCount}
 			{:else}
 				No pages
 			{/if}

src/routes/components/facets/examples/FacetsGroupSelection.svelte

@@ -15,6 +15,13 @@
 		svelte={facetsGroupSelectionSvelte}
 		data={facetsNoGroupSelectionData}
 	>
-		<Facets groups={groupsStore} groupSelection open on:change={(e) => console.log(e)} />
+		<Facets
+			groups={groupsStore}
+			groupSelection
+			open
+			on:facetSelect={(e) => console.log(e)}
+			on:showMoreSelect={(e) => console.log(e)}
+			on:showMoreOpenChange={(e) => console.log(e)}
+		/>
 	</CodeContainer>
 </div>

src/routes/components/facets/examples/FacetsNoGroupSelection.svelte

@@ -15,6 +15,6 @@
 		svelte={facetsNoGroupSelectionSvelte}
 		data={facetsNoGroupSelectionData}
 	>
-		<Facets groups={groupsStore} showAll on:change={(e) => console.log(e)} />
+		<Facets groups={groupsStore} showAll on:facetSelect={(e) => console.log(e)} />
 	</CodeContainer>
 </div>

src/routes/components/table/docs/TableExamplesDocs.svelte

@@ -13,7 +13,7 @@
 	import TableServer from '../examples/TableServer.svelte';
 </script>
 
-<div class="grid gap-1">
+<div class="grid gap-1 w-full overflow-auto">
 	<h2 class="h2">Examples</h2>
 	<TableSimple />
 	<TableGroups />
@@ -30,7 +30,8 @@
 		<TableUrLs />
 		<TableUsersAndAdmins />
 	</div>
-	<div id="Test">
+	<div id="Server-side">
+		<h2 class="h2">Server-side tables</h2>
 		<TableServer />
 	</div>
 </div>

src/routes/components/table/examples/TableServer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 
 	import CodeContainer from '$docs/components/CodeContainer.svelte';
 	import Table from '$lib/components/Table/Table.svelte';
+	import { setApiConfig } from '$lib';
 	import { serverSideTableHTML } from '../data/codeBlocks';
 	import type { TableConfig } from '$lib/models/Models';
 
@@ -11,22 +13,31 @@
 		name: string;
 	};
 
-	const tableStore = writable<ServerTableType[]>([]);
+	let serverTableConfig: TableConfig<ServerTableType>;
 
-	const serverTableConfig: TableConfig<ServerTableType> = {
-		id: 'serverTable', // a unique id for the table
-		entityId: 3, // dataset ID
-		versionId: -1, // vesion ID
-		data: tableStore, // store to hold and retrieve data
-		serverSide: true, // serverSide needs to be set to true
-		// URL for the table to be fetched from
-		URL: 'https://dev.bexis2.uni-jena.de/api/datatable/',
-		token: '<your_token>' // API token to access the datasets
-	};
+	onMount(async () => {
+		setApiConfig('https://dev.bexis2.uni-jena.de/', 'admin', '123456');
+		const tableStore = writable<ServerTableType[]>([]);
+
+		serverTableConfig = {
+			id: 'serverTable', // a unique id for the table
+			data: tableStore, // store to hold and retrieve data
+			// URL for the table to be fetched from
+			pageSizes: [10, 25, 50, 100],
+
+			server: {
+				baseUrl: 'https://dev.bexis2.uni-jena.de/api/datatable/',
+				entityId: 1, // dataset ID
+				versionId: -1, // version ID
+			}
+		};
+	});
 </script>
 
 <div id="serverTableExample">
 	<CodeContainer title="Server-side table" svelte={serverSideTableHTML}>
-		<Table config={serverTableConfig} />
+		{#if serverTableConfig}
+			<Table config={serverTableConfig} />
+		{/if}
 	</CodeContainer>
 </div>