mirrors/spliit
1
0
Fork 0
mirror of https://github.com/spliit-app/spliit.git synced 2026-03-01 10:56:13 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use combobox for category selector

Browse Source
This commit is contained in:
Sebastien Castiel
2024-01-17 12:07:03 -05:00
parent c4de3f605c
commit 92156b29cb
5 changed files with 507 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/expense-form.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
import { AsyncButton } from '@/components/async-button'
import { CategorySelector } from '@/components/category-selector'
import { SubmitButton } from '@/components/submit-button'
import { Button } from '@/components/ui/button'
import {
@@ -29,9 +29,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
@@ -227,35 +225,11 @@ export function ExpenseForm({
render={({ field }) => (
<FormItem className="order-3 sm:order-2">
<FormLabel>Category</FormLabel>
<Select
<CategorySelector
categories={categories}
defaultValue={field.value}
onValueChange={field.onChange}
defaultValue={field.value.toString()}
>
<SelectTrigger>
<SelectValue placeholder="Select a category" />
</SelectTrigger>
<SelectContent>
{Object.keys(categoriesByGroup).map((group) => (
<SelectGroup key={group}>
<SelectLabel className="-ml-6">{group}</SelectLabel>
{categoriesByGroup[group].map((category) => (
<SelectItem
key={category.id.toString()}
value={category.id.toString()}
>
<div className="flex items-center gap-3">
<CategoryIcon
category={category}
className="w-4 h-4"
/>
{category.name}
</div>
</SelectItem>
))}
</SelectGroup>
))}
</SelectContent>
</Select>
/>
<FormDescription>
Select the expense category.
</FormDescription>