feat(checklist): adiciona tipo pergunta e descricao nos itens
- Adiciona campo `type` (checkbox/question) nos itens do checklist - Adiciona campo `description` para descricao do item - Adiciona campo `options` para opcoes de resposta em perguntas - Adiciona campo `answer` para resposta selecionada - Atualiza UI para mostrar descricao e opcoes de pergunta - Cria componente radio-group para selecao de respostas - Adiciona mutation setChecklistItemAnswer para salvar respostas 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rever-tecnologia
parent
98b23af4b2
commit
0f3ba07a5e
10 changed files with 446 additions and 76 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useMutation, useQuery } from "convex/react"
|
||||
import { Plus, Trash2 } from "lucide-react"
|
||||
import { HelpCircle, Plus, Trash2, X } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { api } from "@/convex/_generated/api"
|
||||
|
|
@ -20,25 +20,46 @@ import { SearchableCombobox, type SearchableComboboxOption } from "@/components/
|
|||
import { Switch } from "@/components/ui/switch"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
type ChecklistItemType = "checkbox" | "question"
|
||||
|
||||
type ChecklistTemplateRow = {
|
||||
id: Id<"ticketChecklistTemplates">
|
||||
name: string
|
||||
description: string
|
||||
company: { id: Id<"companies">; name: string } | null
|
||||
items: Array<{ id: string; text: string; required: boolean }>
|
||||
items: Array<{
|
||||
id: string
|
||||
text: string
|
||||
description?: string
|
||||
type?: ChecklistItemType
|
||||
options?: string[]
|
||||
required: boolean
|
||||
}>
|
||||
isArchived: boolean
|
||||
updatedAt: number
|
||||
}
|
||||
|
||||
type CompanyRow = { id: Id<"companies">; name: string }
|
||||
|
||||
type DraftItem = { id: string; text: string; required: boolean }
|
||||
type DraftItem = {
|
||||
id: string
|
||||
text: string
|
||||
description: string
|
||||
type: ChecklistItemType
|
||||
options: string[]
|
||||
required: boolean
|
||||
}
|
||||
|
||||
const NO_COMPANY_VALUE = "__global__"
|
||||
|
||||
function normalizeTemplateItems(items: DraftItem[]) {
|
||||
const normalized = items
|
||||
.map((item) => ({ ...item, text: item.text.trim() }))
|
||||
.map((item) => ({
|
||||
...item,
|
||||
text: item.text.trim(),
|
||||
description: item.description.trim(),
|
||||
options: item.type === "question" ? item.options.map((o) => o.trim()).filter((o) => o.length > 0) : [],
|
||||
}))
|
||||
.filter((item) => item.text.length > 0)
|
||||
|
||||
if (normalized.length === 0) {
|
||||
|
|
@ -46,11 +67,26 @@ function normalizeTemplateItems(items: DraftItem[]) {
|
|||
}
|
||||
const invalid = normalized.find((item) => item.text.length > 240)
|
||||
if (invalid) {
|
||||
throw new Error("Item do checklist muito longo (máx. 240 caracteres).")
|
||||
throw new Error("Item do checklist muito longo (max. 240 caracteres).")
|
||||
}
|
||||
const invalidQuestion = normalized.find((item) => item.type === "question" && item.options.length < 2)
|
||||
if (invalidQuestion) {
|
||||
throw new Error(`A pergunta "${invalidQuestion.text}" precisa ter pelo menos 2 opcoes.`)
|
||||
}
|
||||
return normalized
|
||||
}
|
||||
|
||||
function createEmptyItem(): DraftItem {
|
||||
return {
|
||||
id: crypto.randomUUID(),
|
||||
text: "",
|
||||
description: "",
|
||||
type: "checkbox",
|
||||
options: [],
|
||||
required: true,
|
||||
}
|
||||
}
|
||||
|
||||
function TemplateEditorDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
|
|
@ -73,7 +109,7 @@ function TemplateEditorDialog({
|
|||
const [name, setName] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [companyValue, setCompanyValue] = useState<string>(NO_COMPANY_VALUE)
|
||||
const [items, setItems] = useState<DraftItem[]>([{ id: crypto.randomUUID(), text: "", required: true }])
|
||||
const [items, setItems] = useState<DraftItem[]>([createEmptyItem()])
|
||||
const [archived, setArchived] = useState<boolean>(false)
|
||||
|
||||
const companyComboboxOptions = useMemo<SearchableComboboxOption[]>(() => {
|
||||
|
|
@ -92,8 +128,15 @@ function TemplateEditorDialog({
|
|||
setCompanyValue(template?.company?.id ? String(template.company.id) : NO_COMPANY_VALUE)
|
||||
setItems(
|
||||
template?.items?.length
|
||||
? template.items.map((item) => ({ id: item.id, text: item.text, required: item.required }))
|
||||
: [{ id: crypto.randomUUID(), text: "", required: true }]
|
||||
? template.items.map((item) => ({
|
||||
id: item.id,
|
||||
text: item.text,
|
||||
description: item.description ?? "",
|
||||
type: (item.type ?? "checkbox") as ChecklistItemType,
|
||||
options: item.options ?? [],
|
||||
required: item.required,
|
||||
}))
|
||||
: [createEmptyItem()]
|
||||
)
|
||||
setArchived(template?.isArchived ?? false)
|
||||
}, [open, template])
|
||||
|
|
@ -119,7 +162,14 @@ function TemplateEditorDialog({
|
|||
name: trimmedName,
|
||||
description: description.trim().length > 0 ? description.trim() : undefined,
|
||||
companyId: companyValue !== NO_COMPANY_VALUE ? (companyValue as Id<"companies">) : undefined,
|
||||
items: normalizedItems.map((item) => ({ id: item.id, text: item.text, required: item.required })),
|
||||
items: normalizedItems.map((item) => ({
|
||||
id: item.id,
|
||||
text: item.text,
|
||||
description: item.description.length > 0 ? item.description : undefined,
|
||||
type: item.type,
|
||||
options: item.type === "question" && item.options.length > 0 ? item.options : undefined,
|
||||
required: item.required,
|
||||
})),
|
||||
isArchived: archived,
|
||||
}
|
||||
|
||||
|
|
@ -178,49 +228,137 @@ function TemplateEditorDialog({
|
|||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="space-y-0.5">
|
||||
<p className="text-sm font-semibold text-neutral-900">Itens</p>
|
||||
<p className="text-xs text-muted-foreground">Defina o que precisa ser feito. Itens obrigatórios bloqueiam o encerramento.</p>
|
||||
<p className="text-xs text-muted-foreground">Defina o que precisa ser feito. Itens obrigatorios bloqueiam o encerramento.</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={() => setItems((prev) => [...prev, { id: crypto.randomUUID(), text: "", required: true }])}
|
||||
onClick={() => setItems((prev) => [...prev, createEmptyItem()])}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
Novo item
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-3">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="flex flex-col gap-2 rounded-xl border border-slate-200 bg-white p-3 sm:flex-row sm:items-center">
|
||||
<Input
|
||||
value={item.text}
|
||||
onChange={(e) =>
|
||||
setItems((prev) => prev.map((row) => (row.id === item.id ? { ...row, text: e.target.value } : row)))
|
||||
}
|
||||
placeholder="Ex.: Validar backup"
|
||||
className="h-9 flex-1"
|
||||
/>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<Checkbox
|
||||
checked={item.required}
|
||||
onCheckedChange={(checked) =>
|
||||
setItems((prev) => prev.map((row) => (row.id === item.id ? { ...row, required: Boolean(checked) } : row)))
|
||||
<div key={item.id} className="space-y-2 rounded-xl border border-slate-200 bg-white p-3">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
||||
<Input
|
||||
value={item.text}
|
||||
onChange={(e) =>
|
||||
setItems((prev) => prev.map((row) => (row.id === item.id ? { ...row, text: e.target.value } : row)))
|
||||
}
|
||||
placeholder={item.type === "question" ? "Ex.: Emprestou algum equipamento?" : "Ex.: Validar backup"}
|
||||
className="h-9 flex-1"
|
||||
/>
|
||||
Obrigatório
|
||||
</label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-slate-500 hover:bg-red-50 hover:text-red-700"
|
||||
onClick={() => setItems((prev) => prev.filter((row) => row.id !== item.id))}
|
||||
title="Remover"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<Checkbox
|
||||
checked={item.required}
|
||||
onCheckedChange={(checked) =>
|
||||
setItems((prev) => prev.map((row) => (row.id === item.id ? { ...row, required: Boolean(checked) } : row)))
|
||||
}
|
||||
/>
|
||||
Obrigatorio
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-neutral-700">
|
||||
<Checkbox
|
||||
checked={item.type === "question"}
|
||||
onCheckedChange={(checked) =>
|
||||
setItems((prev) =>
|
||||
prev.map((row) =>
|
||||
row.id === item.id
|
||||
? {
|
||||
...row,
|
||||
type: checked ? "question" : "checkbox",
|
||||
options: checked ? (row.options.length > 0 ? row.options : ["Sim", "Nao"]) : [],
|
||||
}
|
||||
: row
|
||||
)
|
||||
)
|
||||
}
|
||||
/>
|
||||
<HelpCircle className="size-4" />
|
||||
Pergunta
|
||||
</label>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-9 w-9 text-slate-500 hover:bg-red-50 hover:text-red-700"
|
||||
onClick={() => setItems((prev) => prev.filter((row) => row.id !== item.id))}
|
||||
title="Remover"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
value={item.description}
|
||||
onChange={(e) =>
|
||||
setItems((prev) => prev.map((row) => (row.id === item.id ? { ...row, description: e.target.value } : row)))
|
||||
}
|
||||
placeholder="Descricao (opcional)"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
|
||||
{item.type === "question" && (
|
||||
<div className="space-y-2 rounded-lg border border-dashed border-cyan-200 bg-cyan-50/50 p-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-xs font-medium text-cyan-700">Opcoes de resposta</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 gap-1 text-xs text-cyan-700 hover:bg-cyan-100 hover:text-cyan-800"
|
||||
onClick={() =>
|
||||
setItems((prev) =>
|
||||
prev.map((row) => (row.id === item.id ? { ...row, options: [...row.options, ""] } : row))
|
||||
)
|
||||
}
|
||||
>
|
||||
<Plus className="size-3" />
|
||||
Adicionar
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.options.map((option, optIdx) => (
|
||||
<div key={optIdx} className="flex items-center gap-1">
|
||||
<Input
|
||||
value={option}
|
||||
onChange={(e) =>
|
||||
setItems((prev) =>
|
||||
prev.map((row) =>
|
||||
row.id === item.id
|
||||
? { ...row, options: row.options.map((o, i) => (i === optIdx ? e.target.value : o)) }
|
||||
: row
|
||||
)
|
||||
)
|
||||
}
|
||||
placeholder={`Opcao ${optIdx + 1}`}
|
||||
className="h-7 w-24 text-xs"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-slate-400 hover:bg-red-50 hover:text-red-600"
|
||||
onClick={() =>
|
||||
setItems((prev) =>
|
||||
prev.map((row) =>
|
||||
row.id === item.id ? { ...row, options: row.options.filter((_, i) => i !== optIdx) } : row
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<X className="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -297,7 +435,14 @@ export function ChecklistTemplatesManager() {
|
|||
name: tpl.name,
|
||||
description: tpl.description || undefined,
|
||||
companyId: tpl.company?.id ?? undefined,
|
||||
items: tpl.items.map((item) => ({ id: item.id, text: item.text, required: item.required })),
|
||||
items: tpl.items.map((item) => ({
|
||||
id: item.id,
|
||||
text: item.text,
|
||||
description: item.description,
|
||||
type: item.type ?? "checkbox",
|
||||
options: item.options,
|
||||
required: item.required,
|
||||
})),
|
||||
isArchived: !tpl.isArchived,
|
||||
})
|
||||
toast.success(tpl.isArchived ? "Template restaurado." : "Template arquivado.")
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue