Nurfog/helpdesk
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(respuesta): botón único de envío con opción visible

Browse Source
This commit is contained in:
Nurfog committed 2026-11-02 16:27:57 -03:00
1 parent b1710da477
commit 7a3d146892
1 file changed
+58 -62
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/(app)/tickets/[id]/page.tsx
+58 -62
View File
@@ -226,11 +226,24 @@ export default function TicketDetailPage() {
const [mergeError, setMergeError] = useState(""); const [mergeError, setMergeError] = useState("");
const [merging, setMerging] = useState(false); const [merging, setMerging] = useState(false);
const [sendMenuOpen, setSendMenuOpen] = useState(false); const [sendMenuOpen, setSendMenuOpen] = useState(false);
const [sendAction, setSendAction] = useState<"send" | "resolved" | "closed">("send");
const SEND_ACTIONS = {
send: { label: "Enviar", icon: "bi-send", hint: "Solo publica el mensaje" },
resolved: { label: "Enviar y resuelto", icon: "bi-check-circle", hint: "Publica y marca resuelto" },
closed: { label: "Enviar y cerrado", icon: "bi-archive", hint: "Publica y archiva el ticket" },
} as const;
const handleAddComment = (e: React.FormEvent) => { const handleAddComment = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setSendMenuOpen(false); setSendMenuOpen(false);
void submitComment(); void submitComment(sendAction === "send" ? undefined : sendAction);
};
const chooseSendAction = (action: "send" | "resolved" | "closed") => {
setSendAction(action);
setSendMenuOpen(false);
void submitComment(action === "send" ? undefined : action);
}; };
useEffect(() => { useEffect(() => {
@@ -832,31 +845,25 @@ export default function TicketDetailPage() {
Nota interna (solo agentes) Nota interna (solo agentes)
</label> </label>
</div> </div>
<button {isTeam ? (
type="submit"
className="btn btn-primary"
disabled={!comment.trim() || submitting}
>
{submitting ? (
<span className="spinner-border spinner-border-sm" role="status"></span>
) : (
<>
<i className="bi bi-send me-2"></i>Enviar
</>
)}
</button>
{isTeam && (
<div className="position-relative"> <div className="position-relative">
<button <button
type="button" type="button"
className="btn btn-primary dropdown-toggle dropdown-toggle-split" className="btn btn-primary"
style={{ marginLeft: "-1px" }}
disabled={!comment.trim() || submitting} disabled={!comment.trim() || submitting}
aria-label="Más opciones de envío" aria-label="Opciones de envío"
aria-expanded={sendMenuOpen} aria-expanded={sendMenuOpen}
onClick={() => setSendMenuOpen((o) => !o)} onClick={() => setSendMenuOpen((o) => !o)}
> >
<span className="visually-hidden">Opciones</span> {submitting ? (
<span className="spinner-border spinner-border-sm" role="status"></span>
) : (
<>
<i className={`bi ${SEND_ACTIONS[sendAction].icon} me-2`}></i>
{SEND_ACTIONS[sendAction].label}
</>
)}
<i className="bi bi-chevron-down ms-2"></i>
</button> </button>
{sendMenuOpen && ( {sendMenuOpen && (
<> <>
@@ -865,53 +872,42 @@ export default function TicketDetailPage() {
style={{ zIndex: 1000 }} style={{ zIndex: 1000 }}
onClick={() => setSendMenuOpen(false)} onClick={() => setSendMenuOpen(false)}
/> />
<ul className="dropdown-menu show position-absolute end-0 bottom-100 mb-1" style={{ zIndex: 1001, minWidth: "220px" }}> <ul className="dropdown-menu show position-absolute end-0 bottom-100 mb-1" style={{ zIndex: 1001, minWidth: "230px" }}>
<li> {(Object.keys(SEND_ACTIONS) as Array<keyof typeof SEND_ACTIONS>).map((key) => (
<button <li key={key}>
type="button" <button
className="dropdown-item" type="button"
disabled={submitting} className={`dropdown-item ${sendAction === key ? "active" : ""}`}
onClick={() => { disabled={submitting}
setSendMenuOpen(false); onClick={() => chooseSendAction(key)}
void submitComment(); >
}} <i className={`bi ${SEND_ACTIONS[key].icon} me-2`}></i>
> {SEND_ACTIONS[key].label}
<i className="bi bi-send me-2"></i>Enviar {sendAction === key && <i className="bi bi-check-lg ms-2"></i>}
<small className="d-block text-muted">Solo publica el mensaje{!ticket?.assigneeId && " (te lo asigna si está sin asignar)"}</small> <small className="d-block text-muted">
</button> {SEND_ACTIONS[key].hint}{key === "send" && !ticket?.assigneeId ? " (te lo asigna si está sin asignar)" : ""}
</li> </small>
<li> </button>
<button </li>
type="button" ))}
className="dropdown-item"
disabled={submitting}
onClick={() => {
setSendMenuOpen(false);
void submitComment("resolved");
}}
>
<i className="bi bi-check-circle me-2"></i>Enviar y resuelto
<small className="d-block text-muted">Publica y marca resuelto</small>
</button>
</li>
<li>
<button
type="button"
className="dropdown-item"
disabled={submitting}
onClick={() => {
setSendMenuOpen(false);
void submitComment("closed");
}}
>
<i className="bi bi-archive me-2"></i>Enviar y cerrado
<small className="d-block text-muted">Publica y archiva el ticket</small>
</button>
</li>
</ul> </ul>
</> </>
)} )}
</div> </div>
) : (
<button
type="submit"
className="btn btn-primary"
disabled={!comment.trim() || submitting}
>
{submitting ? (
<span className="spinner-border spinner-border-sm" role="status"></span>
) : (
<>
<i className="bi bi-send me-2"></i>Enviar
</>
)}
</button>
)} )}
</div> </div>
</form> </form>