docs: Update tasks example to be 1:1 with original (#925)

huntabyte · Mar 22, 2024 · 145de40 · 145de40
1 parent 733d80c
commit 145de40
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 34 deletions.
diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+	import EyeNone from "svelte-radix/EyeNone.svelte";
 	import ArrowDown from "svelte-radix/ArrowDown.svelte";
 	import ArrowUp from "svelte-radix/ArrowUp.svelte";
 	import CaretSort from "svelte-radix/CaretSort.svelte";
 	import { cn } from "$lib/utils.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
+	import type { TableViewModel } from "svelte-headless-table";
+	import type { Task } from "../(data)/schemas.js";
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
@@ -18,6 +21,10 @@
 		};
 		filter: never;
 	};
+	export let tableModel: TableViewModel<Task>;
+	export let cellId: string;
+
+	const { hiddenColumnIds } = tableModel.pluginStates.hide;
 
 	function handleAscSort(e: Event) {
 		if (props.sort.order === "asc") {
@@ -30,7 +37,20 @@
 		if (props.sort.order === "desc") {
 			return;
 		}
-		props.sort.toggle(e);
+		if (props.sort.order === undefined) {
+			// We can only toggle, so we toggle from undefined to 'asc' first
+			props.sort.toggle(e);
+		}
+		props.sort.toggle(e); // Then we toggle from 'asc' to 'desc'
+	}
+
+	function handleHide() {
+		hiddenColumnIds.update((ids: string[]) => {
+			if (ids.includes(cellId)) {
+				return ids;
+			}
+			return [...ids, cellId];
+		});
 	}
 </script>
 
@@ -42,6 +62,7 @@
 					variant="ghost"
 					builders={[builder]}
 					class="-ml-3 h-8 data-[state=open]:bg-accent"
+					size="sm"
 				>
 					<slot />
 					{#if props.sort.order === "desc"}
@@ -54,8 +75,19 @@
 				</Button>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content align="start">
-				<DropdownMenu.Item on:click={handleAscSort}>Asc</DropdownMenu.Item>
-				<DropdownMenu.Item on:click={handleDescSort}>Desc</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={handleAscSort}>
+					<ArrowUp class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+					Asc
+				</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={handleDescSort}>
+					<ArrowDown class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+					Desc
+				</DropdownMenu.Item>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item on:click={handleHide}>
+					<EyeNone class="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+					Hide
+				</DropdownMenu.Item>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-pagination.svelte
@@ -29,7 +29,7 @@
 				onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
 				selected={{ value: 10, label: "10" }}
 			>
-				<Select.Trigger class="w-[180px]">
+				<Select.Trigger class="h-8 w-[70px]">
 					<Select.Value placeholder="Select page size" />
 				</Select.Trigger>
 				<Select.Content>

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table-view-options.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table-view-options.svelte
@@ -9,13 +9,14 @@
 	const { pluginStates, flatColumns } = tableModel;
 	const { hiddenColumnIds } = pluginStates.hide;
 
-	const ids = flatColumns.map((col: { id: string }) => col.id);
-
-	let hideForId = Object.fromEntries(ids.map((id: string) => [id, true]));
-
-	$: $hiddenColumnIds = Object.entries(hideForId)
-		.filter(([, hide]) => !hide)
-		.map(([id]) => id);
+	function handleHide(id: string) {
+		hiddenColumnIds.update((ids: string[]) => {
+			if (ids.includes(id)) {
+				return ids.filter((i) => i !== id);
+			}
+			return [...ids, id];
+		});
+	}
 
 	const hidableCols = ["title", "status", "priority"];
 </script>
@@ -32,7 +33,10 @@
 		<DropdownMenu.Separator />
 		{#each flatColumns as col}
 			{#if hidableCols.includes(col.id)}
-				<DropdownMenu.CheckboxItem bind:checked={hideForId[col.id]}>
+				<DropdownMenu.CheckboxItem
+					checked={!$hiddenColumnIds.includes(col.id)}
+					on:click={() => handleHide(col.id)}
+				>
 					{col.header}
 				</DropdownMenu.CheckboxItem>
 			{/if}

diff --git a/apps/www/src/routes/examples/tasks/(components)/data-table.svelte b/apps/www/src/routes/examples/tasks/(components)/data-table.svelte
@@ -180,10 +180,12 @@
 								>
 									<Table.Head {...attrs}>
 										{#if cell.id !== "select" && cell.id !== "actions"}
-											<DataTableColumnHeader {props}
-												><Render
-													of={cell.render()}
-												/></DataTableColumnHeader
+											<DataTableColumnHeader
+												{props}
+												{tableModel}
+												cellId={cell.id}
+											>
+												<Render of={cell.render()} /></DataTableColumnHeader
 											>
 										{:else}
 											<Render of={cell.render()} />
@@ -196,25 +198,33 @@
 				{/each}
 			</Table.Header>
 			<Table.Body {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<Table.Row {...rowAttrs}>
-							{#each row.cells as cell (cell.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<Table.Cell {...attrs}>
-										{#if cell.id === "task"}
-											<div class="w-[80px]">
+				{#if $pageRows.length}
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<Table.Row {...rowAttrs}>
+								{#each row.cells as cell (cell.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<Table.Cell {...attrs}>
+											{#if cell.id === "task"}
+												<div class="w-[80px]">
+													<Render of={cell.render()} />
+												</div>
+											{:else}
 												<Render of={cell.render()} />
-											</div>
-										{:else}
-											<Render of={cell.render()} />
-										{/if}
-									</Table.Cell>
-								</Subscribe>
-							{/each}
-						</Table.Row>
-					</Subscribe>
-				{/each}
+											{/if}
+										</Table.Cell>
+									</Subscribe>
+								{/each}
+							</Table.Row>
+						</Subscribe>
+					{/each}
+				{:else}
+					<Table.Row>
+						<Table.Cell colspan={columns.length} class="h-24 text-center">
+							No results.
+						</Table.Cell>
+					</Table.Row>
+				{/if}
 			</Table.Body>
 		</Table.Root>
 	</div>