Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table #107

Merged
merged 3 commits into from
Nov 12, 2024
Merged

Table #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb3e97f
Replace column class function with more efficient solution
zxyctn Nov 1, 2024
7627751
Add titles for components for better accessibility
zxyctn Nov 12, 2024
159956a
Sort options in ShowMore alphabetically
zxyctn Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 35 additions & 55 deletions src/lib/components/Facets/ShowMore.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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>
4 changes: 3 additions & 1 deletion src/lib/components/Table/ColumnsMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
type="button"
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
>

Expand All @@ -26,9 +27,10 @@
{#each columns as column}
<div class="flex gap-3 items-center">
<input
aria-label="Toggle column visibility for column {column.label}"
aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
type="checkbox"
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>
Expand Down
14 changes: 14 additions & 0 deletions src/lib/components/Table/TableContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,12 +404,14 @@
type="text"
bind:value={searchValue}
placeholder="Search rows..."
title="Search rows"
id="{tableId}-search"
/><button
type="reset"
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');
Expand All @@ -426,6 +428,7 @@
type="submit"
id="{tableId}-searchSubmit"
class="btn variant-filled-primary"
title="Search"
on:click|preventDefault={() => {
if (serverSide && !sendModel) {
throw new Error('Server-side configuration is missing');
Expand Down Expand Up @@ -453,6 +456,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}
Expand All @@ -463,6 +470,7 @@
<button
type="button"
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
Expand All @@ -472,6 +480,7 @@
<button
type="button"
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
>
Expand Down Expand Up @@ -517,6 +526,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>
Expand Down
11 changes: 10 additions & 1 deletion src/lib/components/Table/TableFilter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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();
Expand All @@ -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
Expand All @@ -286,6 +290,7 @@
<div
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)}
>
Expand All @@ -301,6 +306,7 @@
on:input={(e) => valueChangeHandler(e, index)}
bind:value={dropdown.value}
aria-label="Filter value"
title="Filter value"
/>
{:else}
<input
Expand All @@ -309,6 +315,7 @@
on:input={(e) => valueChangeHandler(e, index)}
bind:value={dropdown.formValue}
aria-label="Filter value"
title="Filter value"
/>
{/if}
</div>
Expand All @@ -328,6 +335,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>
Expand All @@ -336,6 +344,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];
Expand Down
8 changes: 7 additions & 1 deletion src/lib/components/Table/TablePagination.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand All @@ -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"
>
Expand All @@ -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
>
Expand All @@ -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
Expand Down
Loading