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

feat: harden ticket creation ux and seeding

Browse source 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
rever-tecnologia 2025-10-06 14:40:26 -03:00
parent be27dcfd15
commit a51783ce29
11 changed files with 338 additions and 537 deletions
Download patch file Download diff file Expand all files Collapse all files

63
web/src/components/tickets/new-ticket-dialog.tsx
View file

@ -19,7 +19,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { toast } from "sonner"
import { Spinner } from "@/components/ui/spinner"
import { Dropzone } from "@/components/ui/dropzone"
import { RichTextEditor } from "@/components/ui/rich-text-editor"
import { RichTextEditor, sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
import {
PriorityIcon,
priorityStyles,
@ -27,9 +27,9 @@ import {
import { CategorySelectFields } from "@/components/tickets/category-select"
const schema = z.object({
subject: z.string().optional(),
subject: z.string().default(""),
summary: z.string().optional(),
description: z.string().optional(),
description: z.string().default(""),
priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
channel: z.enum(["EMAIL", "WHATSAPP", "CHAT", "PHONE", "API", "MANUAL"]).default("MANUAL"),
queueName: z.string().nullable().optional(),
@ -124,11 +124,20 @@ export function NewTicketDialog() {
async function submit(values: z.infer<typeof schema>) {
if (!convexUserId) return
const subjectTrimmed = (values.subject ?? "").trim()
if (subjectTrimmed.length < 3) {
form.setError("subject", { type: "min", message: "Informe um assunto" })
form.setError("subject", { type: "min", message: "Informe um assunto com pelo menos 3 caracteres." })
return
}
const sanitizedDescription = sanitizeEditorHtml(values.description ?? "")
const plainDescription = sanitizedDescription.replace(/<[^>]*>/g, "").trim()
if (plainDescription.length === 0) {
form.setError("description", { type: "custom", message: "Descreva o contexto do chamado." })
return
}
setLoading(true)
toast.loading("Criando ticket…", { id: "new-ticket" })
try {
@ -138,7 +147,7 @@ export function NewTicketDialog() {
actorId: convexUserId as Id<"users">,
tenantId: DEFAULT_TENANT_ID,
subject: subjectTrimmed,
summary: values.summary,
summary: values.summary?.trim() || undefined,
priority: values.priority,
channel: values.channel,
queueId: sel?.id as Id<"queues"> | undefined,
@ -147,8 +156,8 @@ export function NewTicketDialog() {
categoryId: values.categoryId as Id<"ticketCategories">,
subcategoryId: values.subcategoryId as Id<"ticketSubcategories">,
})
const hasDescription = (values.description ?? "").replace(/<[^>]*>/g, "").trim().length > 0
const bodyHtml = hasDescription ? (values.description as string) : (values.summary || "")
const summaryFallback = values.summary?.trim() ?? ""
const bodyHtml = plainDescription.length > 0 ? sanitizedDescription : summaryFallback
if (attachments.length > 0 || bodyHtml.trim().length > 0) {
const typedAttachments = attachments.map((a) => ({
storageId: a.storageId as unknown as Id<"_storage">,
@ -160,7 +169,18 @@ export function NewTicketDialog() {
}
toast.success("Ticket criado!", { id: "new-ticket" })
setOpen(false)
form.reset()
form.reset({
subject: "",
summary: "",
description: "",
priority: "MEDIUM",
channel: "MANUAL",
queueName: null,
assigneeId: convexUserId ?? null,
categoryId: "",
subcategoryId: "",
})
form.clearErrors()
setAssigneeInitialized(false)
setAttachments([])
// Navegar para o ticket recém-criado
@ -213,7 +233,9 @@ export function NewTicketDialog() {
<FieldGroup className="lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
<div className="space-y-4">
<Field>
<FieldLabel htmlFor="subject">Assunto</FieldLabel>
<FieldLabel htmlFor="subject" className="flex items-center gap-1">
Assunto <span className="text-destructive">*</span>
</FieldLabel>
<Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
<FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
</Field>
@ -227,12 +249,27 @@ export function NewTicketDialog() {
/>
</Field>
<Field>
<FieldLabel>Descrição</FieldLabel>
<FieldLabel className="flex items-center gap-1">
Descrição <span className="text-destructive">*</span>
</FieldLabel>
<RichTextEditor
value={form.watch("description") || ""}
onChange={(html) => form.setValue("description", html)}
onChange={(html) =>
form.setValue("description", html, {
shouldDirty: true,
shouldTouch: true,
shouldValidate: form.formState.isSubmitted,
})
}
placeholder="Detalhe o problema, passos para reproduzir, links, etc."
/>
<FieldError
errors={
form.formState.errors.description
? [{ message: form.formState.errors.description.message }]
: []
}
/>
</Field>
<Field>
<FieldLabel>Anexos</FieldLabel>
@ -251,8 +288,8 @@ export function NewTicketDialog() {
subcategoryId={subcategoryIdValue || null}
onCategoryChange={handleCategoryChange}
onSubcategoryChange={handleSubcategoryChange}
categoryLabel="Categoria primária"
subcategoryLabel="Categoria secundária"
categoryLabel="Categoria primária *"
subcategoryLabel="Categoria secundária *"
layout="stacked"
/>
{form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (