feat(automations): agrupa subcategorias por categoria no select
Melhora UX do select de subcategorias nas condicoes de automacao, agrupando visualmente as subcategorias dentro de suas respectivas categorias usando SelectGroup e SelectLabel. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
022e1f63ba
commit
92954b45c7
1 changed files with 16 additions and 17 deletions
|
|
@ -15,7 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox"
|
||||||
import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||||
import { Input } from "@/components/ui/input"
|
import { Input } from "@/components/ui/input"
|
||||||
import { Label } from "@/components/ui/label"
|
import { Label } from "@/components/ui/label"
|
||||||
import { Select, SelectContent, SelectEmptyState, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
import { Select, SelectContent, SelectEmptyState, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||||
import { Separator } from "@/components/ui/separator"
|
import { Separator } from "@/components/ui/separator"
|
||||||
import { Switch } from "@/components/ui/switch"
|
import { Switch } from "@/components/ui/switch"
|
||||||
import { Textarea } from "@/components/ui/textarea"
|
import { Textarea } from "@/components/ui/textarea"
|
||||||
|
|
@ -295,14 +295,6 @@ export function AutomationEditorDialog({
|
||||||
setSaving(false)
|
setSaving(false)
|
||||||
}, [initialState])
|
}, [initialState])
|
||||||
|
|
||||||
const subcategoryOptions = useMemo(() => {
|
|
||||||
const list =
|
|
||||||
categories?.flatMap((cat) =>
|
|
||||||
cat.secondary.map((sub) => ({ id: sub.id, name: sub.name, categoryId: sub.categoryId }))
|
|
||||||
) ?? []
|
|
||||||
return list.sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
|
|
||||||
}, [categories])
|
|
||||||
|
|
||||||
const handleAddCondition = () => {
|
const handleAddCondition = () => {
|
||||||
setConditions((prev) => [
|
setConditions((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
|
|
@ -767,19 +759,26 @@ export function AutomationEditorDialog({
|
||||||
<SelectTrigger className="bg-white">
|
<SelectTrigger className="bg-white">
|
||||||
<SelectValue placeholder="Selecione" />
|
<SelectValue placeholder="Selecione" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent className="rounded-xl">
|
<SelectContent className="max-h-72 rounded-xl">
|
||||||
{subcategoryOptions.length === 0 ? (
|
{(categories ?? []).length === 0 ? (
|
||||||
<SelectEmptyState
|
<SelectEmptyState
|
||||||
message="Nenhuma subcategoria disponível"
|
message="Nenhuma subcategoria disponivel"
|
||||||
createLabel="Gerenciar categorias"
|
createLabel="Gerenciar categorias"
|
||||||
createHref="/settings/categories"
|
createHref="/settings/categories"
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
subcategoryOptions.map((sub) => (
|
(categories ?? []).map((cat) =>
|
||||||
<SelectItem key={sub.id} value={sub.id}>
|
cat.secondary.length > 0 ? (
|
||||||
{sub.name}
|
<SelectGroup key={cat.id}>
|
||||||
</SelectItem>
|
<SelectLabel className="font-semibold text-neutral-900">{cat.name}</SelectLabel>
|
||||||
))
|
{cat.secondary.map((sub) => (
|
||||||
|
<SelectItem key={sub.id} value={sub.id} className="pl-4">
|
||||||
|
{sub.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
) : null
|
||||||
|
)
|
||||||
)}
|
)}
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue