Merge pull request #107 from BEXIS2/table

Table

Author: DavidBlaa

src/lib/components/Facets/ShowMore.svelte

@@ -5,7 +5,10 @@
 	export let handleApply: (group: SelectedFacetGroup) => {};
 	export let handleCancel: (groupName: string) => {};
 
-	let selected = structuredClone(group.children);
+	let selected = Object.keys(group.children)
+		.sort((a, b) => group.children[a].displayName.localeCompare(group.children[b].displayName))
+		.map((key) => ({ [key]: { ...group.children[key] } }))
+		.reduce((acc, val) => ({ ...acc, ...val }), {});
 
 	const selectAll = () => {
 		Object.keys(selected).forEach((key) => (selected[key].selected = true));
@@ -23,67 +26,44 @@
 	};
 
 	const onCancel = () => {
-		console.log(selected, group.children);
 		selected = structuredClone(group.children);
 		handleCancel(group.name);
 	};
-
-	const gridClass = (items: any[]) => {
-		const ceil = Math.ceil(Math.sqrt(items.length));
-		const max = Math.max(ceil, Math.floor(items.length / 3));
-
-		const classes = [
-			'grid-rows-1',
-			'grid-rows-2',
-			'grid-rows-3',
-			'grid-rows-4',
-			'grid-rows-5',
-			'grid-rows-6',
-			'grid-rows-7',
-			'grid-rows-8',
-			'grid-rows-9',
-			'grid-rows-10',
-			'grid-rows-11',
-			'grid-rows-12'
-		];
-
-		if (max > 12) {
-			return 'grid-rows-12';
-		} else return classes[max - 1 || 1];
-	};
 </script>
 
-<div class="p-5 rounded-md max-w-6xl bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
-	<!-- Header -->
-	<h2 class="text-xl font-semibold">{group.displayName}</h2>
+<div class="w-full flex justify-center max-w-[800px]">
+	<div class="grow max-h-[500px]">
+		<div
+			class="p-5 rounded-md w-full bg-surface-50 dark:bg-surface-800 border-primary-500 border-2"
+		>
+			<!-- Header -->
+			<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
-	<!-- Items -->
-	<div
-		class="{gridClass(
-			Object.keys(selected)
-		)} grid grid-flow-col gap-x-10 gap-y-2 py-10 px-2 h-full overflow-x-auto"
-	>
-		{#each Object.keys(selected) as key}
-			<label class="flex gap-3 items-center w-48">
-				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-				<span
-					title={selected[key].displayName}
-					class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
-					>{selected[key].displayName}</span
-				>
-			</label>
-		{/each}
-	</div>
+			<!-- Items -->
+			<div class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h">
+				{#each Object.keys(selected) as key}
+					<label class="flex gap-3 items-center w-48">
+						<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
+						<span
+							title={selected[key].displayName}
+							class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
+							>{selected[key].displayName}</span
+						>
+					</label>
+				{/each}
+			</div>
 
-	<!-- Footer -->
-	<div class="flex w-full justify-between gap-5">
-		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
-			<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
-		</div>
-		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
-			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+			<!-- Footer -->
+			<div class="flex w-full justify-between gap-5">
+				<div class="flex gap-3">
+					<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
+					<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
+				</div>
+				<div class="flex gap-3">
+					<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
+					<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

src/lib/components/Table/ColumnsMenu.svelte

@@ -17,6 +17,7 @@
 	title="Hide or show columns"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
 	aria-label="Open menu to hide/show columns"
+	title="Open menu to hide/show columns"
 	use:popup={popupCombobox}>Columns</button
 >
 
@@ -28,10 +29,11 @@
 		<div class="flex gap-3 items-center">
 			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
-				aria-label="Toggle column visibility for column {column.label}"
+				aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				type="checkbox"
 				id = {column.id}
 				bind:checked={column.visible}
+				title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
 			/>
 			<span>{column.label}</span>

src/lib/components/Table/TableContent.svelte

@@ -405,13 +405,15 @@
 							title="Search within all table rows"
 							bind:value={searchValue}
 							placeholder="Search rows..."
+							title="Search rows"
 							id="{tableId}-search"
 						/><button
 							type="reset"
 							title="Clear search"
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							aria-label="Clear search"
+							title="Clear search"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');
@@ -429,6 +431,7 @@
 						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
+						title="Search"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
 								throw new Error('Server-side configuration is missing');
@@ -457,6 +460,10 @@
 							size="sm"
 							checked={fitToScreen}
 							id="{tableId}-toggle"
+							title={fitToScreen ? 'Fit table data to screen' : `Don't fit table data to screen`}
+							aria-label={fitToScreen
+								? 'Fit table data to screen'
+								: `Don't fit table data to screen`}
 							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
 						>
 					{/if}
@@ -468,6 +475,7 @@
 							type="button"
 							title="Reset column and row sizing"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							title="Reset sizing of columns and rows"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
 							>Reset sizing</button
@@ -478,6 +486,7 @@
 							type="button"
 							title="Export table data as CSV"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							title="Export table data as CSV"
 							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
 							>Export as CSV</button
 						>
@@ -526,6 +535,11 @@
 																class:cursor-pointer={!props.sort.disabled}
 																on:click={props.sort.toggle}
 																on:keydown={props.sort.toggle}
+																title={props.sort.order === 'asc'
+																	? `Sort by ${cell.label} column in descending order`
+																	: props.sort.order === 'desc'
+																	? `Remove sorting by ${cell.label} column`
+																	: `Sort by ${cell.label} column in ascending order`}
 															>
 																{cell.render()}
 															</span>

src/lib/components/Table/TableFilter.svelte

@@ -240,7 +240,8 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
-		aria-label="Open filter menu for column {id}"
+		aria-label="Open filter menu for {id} column"
+		title="Open filter menu for {id} column"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -251,6 +252,7 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				aria-label="Clear Filters"
+				title="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -269,13 +271,15 @@
 							<select
 								class="select border border-primary-500 text-sm p-1"
 								aria-label="Show rows with value that"
+								title="Show rows with value that"
 								on:change={(e) => optionChangeHandler(e, index)}
 								bind:value={dropdown.option}
 							>
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
 										aria-label={option.label}
+										title={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -288,6 +292,7 @@
 									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
 									aria-label="Remove filter"
+									title="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -303,6 +308,7 @@
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
 								aria-label="Filter value"
+								title="Filter value"
 							/>
 						{:else}
 							<input
@@ -311,6 +317,7 @@
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
 								aria-label="Filter value"
+								title="Filter value"
 							/>
 						{/if}
 					</div>
@@ -332,6 +339,7 @@
 						addFilter(remainingFilters[0].value, undefined);
 					}}
 					aria-label="Add filter"
+					title="Add filter"
 				>
 					<div class="flex gap-1 items-center"><Fa icon={faPlus} />Add Filter</div>
 				</div>
@@ -340,6 +348,7 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				aria-label="Apply filters"
+				title="Apply filters"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];

src/lib/components/Table/TablePagination.svelte

@@ -63,7 +63,8 @@
 		</select> -->
 
 		<button
-			aria-label="Open menu to select number of items per page"
+			aria-label="Open menu to select number of items to display per page"
+			title="Open menu to select number of items to display per page"
 			class="btn variant-filled-primary w-20 justify-between"
 			use:popup={pageSizePopup}
 		>
@@ -87,6 +88,7 @@
 			class="btn btn-sm variant-filled-primary"
 			on:click|preventDefault={goToFirstPage}
 			aria-label="Go to first page"
+			title="Go to first page"
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
 		>
@@ -96,6 +98,7 @@
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-previous"
 			aria-label="Go to previous page"
+			title="Go to previous page"
 			on:click|preventDefault={goToPreviousPage}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
@@ -105,19 +108,22 @@
 			value={$pageIndex + 1}
 			max={$pageCount}
 			aria-label="Current page"
+			title="Current page"
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
 			aria-label="Go to next page"
+			title="Go to next page"
 			on:click|preventDefault={goToNextPage}
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			aria-label="Go to last page"
+			title="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={goToLastPage}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button