-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added searchable select component, added new items page, removed old
items page
- Loading branch information
towelie
committed
Dec 17, 2024
1 parent
e39151a
commit ec1745c
Showing
13 changed files
with
550 additions
and
48 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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
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
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 |
|---|---|---|
| @@ -1,41 +1,34 @@ | ||
| import { getItems } from "@/actions/items"; | ||
| import AddItemForm from "@/components/forms/AddItemForm"; | ||
| import { Card, CardContent } from "@/components/ui/card"; | ||
| import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"; | ||
| import { Item } from "@/lib/supabase/complex_types"; | ||
| import { notFound } from "next/navigation"; | ||
| import { getItems } from "@/actions/items" | ||
| import DebugState from "@/components/DebugState" | ||
| import AddItemForm from "@/components/forms/AddItemForm" | ||
| import ItemList from "@/components/ItemList" | ||
| import { SkeletonItemsList } from "@/components/skeltons/SkeletonItemsList" | ||
| import { Suspense } from "react" | ||
|
|
||
| export default async function ItemsPage() { | ||
| const { data: items, error } = await getItems() | ||
| return ( | ||
| <div className="container mx-auto py-10 space-y-5"> | ||
| <AddItemForm /> | ||
| <div> | ||
| <h1 className="pt-10 pb-5 pl-2 text-xl font-sans font-semibold">All Items</h1> | ||
| <Suspense fallback={<SkeletonItemsList />}> | ||
| <ItemsWrapper /> | ||
| </Suspense> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| if (error) { | ||
| throw error | ||
| } | ||
| async function ItemsWrapper() { | ||
| const items = await getItems() | ||
|
|
||
| if (!items) { | ||
| notFound() | ||
| } | ||
| console.log("items", items) | ||
|
|
||
| return ( | ||
| <div className="space-y-3"> | ||
| <h1>items</h1> | ||
| <AddItemForm /> | ||
|
|
||
| <Card> | ||
| <CardContent> | ||
| <Table> | ||
| <TableBody> | ||
| {items.map((item: Item) => ( | ||
| <TableRow key={item.id}> | ||
| <TableCell>{item.name}</TableCell> | ||
| <TableCell>{item.type}</TableCell> | ||
| <TableCell>{item.order}</TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| </Table> | ||
| </CardContent> | ||
| </Card> | ||
| <div className="space-y-5"> | ||
| <DebugState state={items} title="Items Page" /> | ||
| <ItemList items={items.data || []} /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
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,27 @@ | ||
| "use client" | ||
|
|
||
| import { Item } from "@/lib/supabase/complex_types" | ||
| import { Card, CardHeader } from "./ui/card" | ||
| import { EllipsisVertical } from "lucide-react" | ||
|
|
||
| export default function ItemList({ items }: { items: Item[] }) { | ||
| return ( | ||
| <div className="grid grid-cols-6 gap-5"> | ||
| { | ||
| items.map((item: Item) => ( | ||
| <Card key={item.id}> | ||
| <CardHeader> | ||
| <div className="flex flex-row gap-3 items-center"> | ||
| <h1 className="flex-1"> | ||
| {item.name} | ||
| </h1> | ||
| <EllipsisVertical /> | ||
| </div> | ||
| </CardHeader> | ||
| </Card> | ||
| )) | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
|
|
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,89 @@ | ||
| import * as React from "react" | ||
| import { Check, ChevronsUpDown } from 'lucide-react' | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| import { Button } from "@/components/ui/button" | ||
| import { | ||
| Command, | ||
| CommandEmpty, | ||
| CommandGroup, | ||
| CommandInput, | ||
| CommandItem, | ||
| } from "@/components/ui/command" | ||
| import { | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| } from "@/components/ui/popover" | ||
| import { useSearchableSelect } from "@/hooks/use-searchable-select" | ||
|
|
||
| interface SearchableSelectProps { | ||
| options: Record<string, string> | ||
| onChange: (value: string) => void | ||
| placeholder?: string | ||
| } | ||
|
|
||
| export function SearchableSelect({ | ||
| options, | ||
| onChange, | ||
| placeholder = "Select an item...", | ||
| }: SearchableSelectProps) { | ||
| const { | ||
| open, | ||
| setOpen, | ||
| value, | ||
| setValue, | ||
| search, | ||
| setSearch, | ||
| filteredOptions, | ||
| } = useSearchableSelect(options) | ||
|
|
||
| return ( | ||
| <Popover open={open} onOpenChange={setOpen}> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| variant="outline" | ||
| role="combobox" | ||
| aria-expanded={open} | ||
| className="w-full justify-between" | ||
| > | ||
| {value ? options[value] : placeholder} | ||
| <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-[--radix-popover-trigger-width] p-0"> | ||
| <Command> | ||
| <CommandInput | ||
| placeholder="Search..." | ||
| value={search} | ||
| onValueChange={setSearch} | ||
| /> | ||
| <CommandEmpty>No item found.</CommandEmpty> | ||
| <CommandGroup> | ||
| {filteredOptions.map(([key, label]) => ( | ||
| <CommandItem | ||
| key={key} | ||
| value={key} | ||
| onSelect={(currentValue) => { | ||
| setValue(currentValue === value ? "" : currentValue) | ||
| onChange(currentValue) | ||
| setOpen(false) | ||
| }} | ||
| > | ||
| <Check | ||
| className={cn( | ||
| "mr-2 h-4 w-4", | ||
| value === key ? "opacity-100" : "opacity-0" | ||
| )} | ||
| /> | ||
| {label} | ||
| </CommandItem> | ||
| ))} | ||
| </CommandGroup> | ||
| </Command> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) | ||
| } | ||
|
|
||
|
|
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.