Align ticket status colors across views
This commit is contained in:
parent
296e02cf0c
commit
6702811f4a
6 changed files with 110 additions and 89 deletions
|
|
@ -25,6 +25,7 @@ import { Button } from "@/components/ui/button"
|
|||
import { Separator } from "@/components/ui/separator"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { getTicketStatusDotClass, getTicketStatusLabel } from "@/lib/ticket-status-style"
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
|
|
@ -115,20 +116,6 @@ type TicketMentionAttributes = Record<string, unknown>
|
|||
const TICKET_MENTION_FALLBACK_STATUS = "PENDING"
|
||||
const TICKET_MENTION_FALLBACK_PRIORITY = "MEDIUM"
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
PENDING: "Pendente",
|
||||
AWAITING_ATTENDANCE: "Em andamento",
|
||||
PAUSED: "Pausado",
|
||||
RESOLVED: "Resolvido",
|
||||
}
|
||||
|
||||
const statusTone: Record<string, string> = {
|
||||
PENDING: "bg-amber-400",
|
||||
AWAITING_ATTENDANCE: "bg-sky-500",
|
||||
PAUSED: "bg-violet-500",
|
||||
RESOLVED: "bg-emerald-500",
|
||||
}
|
||||
|
||||
function toPlainString(value: unknown): string {
|
||||
if (value === null || value === undefined) return ""
|
||||
return String(value)
|
||||
|
|
@ -162,11 +149,11 @@ function updateTicketMentionNodeElements(elements: TicketMentionNodeElements, at
|
|||
const displayedReference = referenceLabel ? `#${referenceLabel}` : "#"
|
||||
const formattedSubject = normalized.subject ? formatMentionSubject(normalized.subject) : ""
|
||||
const additionalClass = toPlainString(attrs.class ?? attrs.className)
|
||||
const statusToneClass = statusTone[normalized.status] ?? "bg-slate-400"
|
||||
const dotClass = getTicketStatusDotClass(normalized.status)
|
||||
|
||||
root.className = cn(TICKET_MENTION_BASE_CLASSES, additionalClass)
|
||||
root.dataset.ticketMention = "true"
|
||||
dotEl.className = cn(TICKET_MENTION_DOT_BASE_CLASSES, statusToneClass)
|
||||
dotEl.className = cn(TICKET_MENTION_DOT_BASE_CLASSES, dotClass)
|
||||
referenceEl.className = TICKET_MENTION_REF_CLASSES
|
||||
subjectEl.className = TICKET_MENTION_SUBJECT_CLASSES
|
||||
separatorEl.className = TICKET_MENTION_SEP_CLASSES
|
||||
|
|
@ -244,8 +231,7 @@ function buildTicketMentionAnchorHtml(attrs: {
|
|||
const url = attrs.url ?? ""
|
||||
const displayedReference = reference || id
|
||||
const formattedSubject = subject ? formatMentionSubject(subject) : ""
|
||||
const dotToneClass = statusTone[status] ?? "bg-slate-400"
|
||||
const dotClass = `${TICKET_MENTION_DOT_BASE_CLASSES} ${dotToneClass}`
|
||||
const dotClass = `${TICKET_MENTION_DOT_BASE_CLASSES} ${getTicketStatusDotClass(status)}`
|
||||
const title = formattedSubject ? `#${displayedReference} • ${formattedSubject}` : `#${displayedReference}`
|
||||
|
||||
return `<a data-ticket-mention="true" data-ticket-id="${escapeHtml(id)}" data-ticket-reference="${escapeHtml(reference)}" data-ticket-status="${escapeHtml(status)}" data-ticket-priority="${escapeHtml(priority)}" data-ticket-subject="${escapeHtml(subject)}" status="${escapeHtml(status)}" href="${escapeHtml(url)}" class="${escapeHtml(TICKET_MENTION_BASE_CLASSES)}" rel="noopener noreferrer" target="_self" title="${escapeHtml(title)}"><span class="${escapeHtml(dotClass)}"></span><span class="${escapeHtml(TICKET_MENTION_REF_CLASSES)}">#${escapeHtml(displayedReference)}</span><span class="${escapeHtml(TICKET_MENTION_SEP_CLASSES)}">•</span><span class="${escapeHtml(TICKET_MENTION_SUBJECT_CLASSES)}">${escapeHtml(formattedSubject)}</span></a>`
|
||||
|
|
@ -424,8 +410,8 @@ function TicketMentionList({ items, command, onRegister }: TicketMentionSuggesti
|
|||
<div className="max-h-72 min-w-[320px] space-y-1 overflow-y-auto p-2">
|
||||
{items.map((item, index) => {
|
||||
const isActive = index === selectedIndex
|
||||
const status = statusLabels[item.status] ?? item.status
|
||||
const statusDot = statusTone[item.status] ?? "bg-slate-400"
|
||||
const status = getTicketStatusLabel(item.status)
|
||||
const statusDot = getTicketStatusDotClass(item.status)
|
||||
const priority = priorityLabels[item.priority] ?? item.priority
|
||||
return (
|
||||
<button
|
||||
|
|
@ -579,8 +565,7 @@ const TicketMentionExtension = Mention.extend({
|
|||
const priority = String(HTMLAttributes.priority ?? HTMLAttributes["data-ticket-priority"] ?? "MEDIUM").toUpperCase()
|
||||
const href = String(HTMLAttributes.url ?? HTMLAttributes.href ?? "#")
|
||||
const anchorClass = cn(TICKET_MENTION_BASE_CLASSES, toPlainString(HTMLAttributes.class ?? HTMLAttributes.className))
|
||||
const statusToneClass = statusTone[status] ?? "bg-slate-400"
|
||||
const dotClass = cn(TICKET_MENTION_DOT_BASE_CLASSES, statusToneClass)
|
||||
const dotClass = cn(TICKET_MENTION_DOT_BASE_CLASSES, getTicketStatusDotClass(status))
|
||||
return [
|
||||
"a",
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue