esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(automations): agrupa subcategorias por categoria no select

Browse source 
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:
esdrasrenan 2025-12-15 22:32:39 -03:00
parent 022e1f63ba
commit 92954b45c7
1 changed files with 16 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/automations/automation-editor-dialog.tsx
View file

@ -15,7 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox"
import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
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 { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
@ -295,14 +295,6 @@ export function AutomationEditorDialog({
setSaving(false)
}, [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 = () => {
setConditions((prev) => [
...prev,
@ -767,19 +759,26 @@ export function AutomationEditorDialog({
<SelectTrigger className="bg-white">
<SelectValue placeholder="Selecione" />
</SelectTrigger>
<SelectContent className="rounded-xl">
{subcategoryOptions.length === 0 ? (
<SelectContent className="max-h-72 rounded-xl">
{(categories ?? []).length === 0 ? (
<SelectEmptyState
message="Nenhuma subcategoria disponível"
message="Nenhuma subcategoria disponivel"
createLabel="Gerenciar categorias"
createHref="/settings/categories"
/>
) : (
subcategoryOptions.map((sub) => (
<SelectItem key={sub.id} value={sub.id}>
{sub.name}
</SelectItem>
))
(categories ?? []).map((cat) =>
cat.secondary.length > 0 ? (
<SelectGroup key={cat.id}>
<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>
</Select>