-
-
Notifications
You must be signed in to change notification settings - Fork 308
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(example): add sidebars on tasks examples
- Loading branch information
1 parent
2a4dc44
commit e5375d6
Showing
7 changed files
with
506 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script lang="ts"> | ||
| import Input from "@/registry/new-york/ui/input/input.svelte"; | ||
| import type { TableViewModel } from "svelte-headless-table/lib/createViewModel"; | ||
| import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin"; | ||
| import type { Writable } from "svelte/store"; | ||
| import { DataTableFacetedFilter } from "."; | ||
| import { priorities, statuses } from "../(data)/data"; | ||
| import type { Task } from "../(data)/schemas"; | ||
| export let tableModel: TableViewModel<Task, AnyPlugins>; | ||
| const { pluginStates } = tableModel; | ||
| const { | ||
| filterValue | ||
| }: { | ||
| filterValue: Writable<string>; | ||
| } = pluginStates.filter; | ||
| const { | ||
| filterValues | ||
| }: { | ||
| filterValues: Writable<{ | ||
| status: string[]; | ||
| priority: string[]; | ||
| }>; | ||
| } = pluginStates.colFilter; | ||
| </script> | ||
|
|
||
| <aside class="relative col-span-2 border-r border-b p-2"> | ||
| <div class="sticky top-12"> | ||
| <div class="flex flex-col space-y-2"> | ||
| <span class="text-sm font-medium">Filters</span> | ||
| <Input | ||
| placeholder="Filter tasks..." | ||
| class="h-8 w-full" | ||
| type="text" | ||
| bind:value={$filterValue} | ||
| /> | ||
|
|
||
| <DataTableFacetedFilter | ||
| bind:filterValues={$filterValues.status} | ||
| title="Status" | ||
| view="list" | ||
| options={statuses} | ||
| /> | ||
|
|
||
| <DataTableFacetedFilter | ||
| bind:filterValues={$filterValues.priority} | ||
| title="Priority" | ||
| view="list" | ||
| options={priorities} | ||
| /> | ||
|
|
||
| <!-- {#if showReset} | ||
| <Button | ||
| on:click={() => { | ||
| $filterValues.status = []; | ||
| $filterValues.priority = []; | ||
| }} | ||
| variant="ghost" | ||
| class="h-8 px-2 lg:px-3" | ||
| > | ||
| Reset | ||
| <Cross2 class="ml-2 h-4 w-4" /> | ||
| </Button> | ||
| {/if} --> | ||
| </div> | ||
| </div> | ||
| </aside> |
100 changes: 100 additions & 0 deletions
100
apps/www/src/routes/examples/tasks/(components)/data-table-filter-right-sidebar.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <script lang="ts"> | ||
| import * as Card from "@/registry/default/ui/card"; | ||
| import { Label } from "@/registry/default/ui/label"; | ||
| import * as Select from "@/registry/default/ui/select"; | ||
| import { Textarea } from "@/registry/default/ui/textarea"; | ||
| import Button from "@/registry/new-york/ui/button/button.svelte"; | ||
| import Input from "@/registry/new-york/ui/input/input.svelte"; | ||
| import type { TableViewModel } from "svelte-headless-table/lib/createViewModel"; | ||
| import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin"; | ||
| import { priorities, statuses } from "../(data)/data"; | ||
| import type { Task } from "../(data)/schemas"; | ||
| export let tableModel: TableViewModel<Task, AnyPlugins>; | ||
| const { pluginStates } = tableModel; | ||
| const { | ||
| custom: { taskOnEdition, taskIdOnEdition } | ||
| } = pluginStates; | ||
| $: task = $taskOnEdition || {}; | ||
| $: selectedStatus = statuses.find(({ value }) => task.status === value); | ||
| $: selectedPriority = priorities.find( | ||
| ({ value }) => task.priority === value | ||
| ); | ||
| </script> | ||
|
|
||
| <aside class="relative col-span-3 border-l border-b p-2"> | ||
| <div class="sticky top-12 flex flex-col h-full"> | ||
| <Card.Header> | ||
| <Card.Title># {task.id}</Card.Title> | ||
| <Card.Description> | ||
| Here you can edit your task information | ||
| </Card.Description> | ||
| </Card.Header> | ||
| <Card.Content class="grow grid gap-2"> | ||
| <div class="grid gap-2"> | ||
| <Label for="title">Title</Label> | ||
| <Input | ||
| id="title" | ||
| placeholder="Task title ..." | ||
| bind:value={task.title} | ||
| /> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <Label for="status">Status</Label> | ||
| <Select.Root bind:selected={selectedStatus}> | ||
| <Select.Trigger id="status"> | ||
| <Select.Value placeholder="Select" /> | ||
| </Select.Trigger> | ||
| <Select.Content> | ||
| {#each statuses as status} | ||
| <Select.Item | ||
| value={status.value} | ||
| label={status.label} | ||
| > | ||
| {status.label} | ||
| </Select.Item> | ||
| {/each} | ||
| </Select.Content> | ||
| </Select.Root> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <Label for="priority">Priority</Label> | ||
| <Select.Root bind:selected={selectedPriority}> | ||
| <Select.Trigger id="priority"> | ||
| <Select.Value placeholder="Select" /> | ||
| </Select.Trigger> | ||
| <Select.Content> | ||
| {#each priorities as priority} | ||
| <Select.Item | ||
| value={priority.value} | ||
| label={priority.label} | ||
| > | ||
| {priority.label} | ||
| </Select.Item> | ||
| {/each} | ||
| </Select.Content> | ||
| </Select.Root> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <Label for="description">Description</Label> | ||
| <Textarea | ||
| id="description" | ||
| placeholder="Please include all information relevant to your issue." | ||
| bind:value={task.description} | ||
| /> | ||
| </div> | ||
| </Card.Content> | ||
| <Card.Footer class="flex flex-1 items-end justify-end space-x-2"> | ||
| <Button | ||
| on:click={() => taskIdOnEdition.set(null)} | ||
| variant="secondary" | ||
| > | ||
| Cancel | ||
| </Button> | ||
| <Button on:click={() => taskIdOnEdition.set(null)}>Submit</Button> | ||
| </Card.Footer> | ||
| </div> | ||
| </aside> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.