feat(respuesta): botón único de envío con opción visible
This commit is contained in:
Nurfog committed
1 parent
b1710da477
commit
7a3d146892
1 file changed
+64
-68
@@ -226,11 +226,24 @@ export default function TicketDetailPage() {
|
||||
const [mergeError, setMergeError] = useState("");
|
||||
const [merging, setMerging] = 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) => {
|
||||
e.preventDefault();
|
||||
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(() => {
|
||||
@@ -832,6 +845,56 @@ export default function TicketDetailPage() {
|
||||
Nota interna (solo agentes)
|
||||
</label>
|
||||
</div>
|
||||
{isTeam ? (
|
||||
<div className="position-relative">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={!comment.trim() || submitting}
|
||||
aria-label="Opciones de envío"
|
||||
aria-expanded={sendMenuOpen}
|
||||
onClick={() => setSendMenuOpen((o) => !o)}
|
||||
>
|
||||
{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>
|
||||
{sendMenuOpen && (
|
||||
<>
|
||||
<div
|
||||
className="position-fixed top-0 start-0 w-100 h-100"
|
||||
style={{ zIndex: 1000 }}
|
||||
onClick={() => setSendMenuOpen(false)}
|
||||
/>
|
||||
<ul className="dropdown-menu show position-absolute end-0 bottom-100 mb-1" style={{ zIndex: 1001, minWidth: "230px" }}>
|
||||
{(Object.keys(SEND_ACTIONS) as Array<keyof typeof SEND_ACTIONS>).map((key) => (
|
||||
<li key={key}>
|
||||
<button
|
||||
type="button"
|
||||
className={`dropdown-item ${sendAction === key ? "active" : ""}`}
|
||||
disabled={submitting}
|
||||
onClick={() => chooseSendAction(key)}
|
||||
>
|
||||
<i className={`bi ${SEND_ACTIONS[key].icon} me-2`}></i>
|
||||
{SEND_ACTIONS[key].label}
|
||||
{sendAction === key && <i className="bi bi-check-lg ms-2"></i>}
|
||||
<small className="d-block text-muted">
|
||||
{SEND_ACTIONS[key].hint}{key === "send" && !ticket?.assigneeId ? " (te lo asigna si está sin asignar)" : ""}
|
||||
</small>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
@@ -845,73 +908,6 @@ export default function TicketDetailPage() {
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{isTeam && (
|
||||
<div className="position-relative">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||||
style={{ marginLeft: "-1px" }}
|
||||
disabled={!comment.trim() || submitting}
|
||||
aria-label="Más opciones de envío"
|
||||
aria-expanded={sendMenuOpen}
|
||||
onClick={() => setSendMenuOpen((o) => !o)}
|
||||
>
|
||||
<span className="visually-hidden">Opciones</span>
|
||||
</button>
|
||||
{sendMenuOpen && (
|
||||
<>
|
||||
<div
|
||||
className="position-fixed top-0 start-0 w-100 h-100"
|
||||
style={{ zIndex: 1000 }}
|
||||
onClick={() => setSendMenuOpen(false)}
|
||||
/>
|
||||
<ul className="dropdown-menu show position-absolute end-0 bottom-100 mb-1" style={{ zIndex: 1001, minWidth: "220px" }}>
|
||||
<li>
|
||||
<button
|
||||
type="button"
|
||||
className="dropdown-item"
|
||||
disabled={submitting}
|
||||
onClick={() => {
|
||||
setSendMenuOpen(false);
|
||||
void submitComment();
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-send me-2"></i>Enviar
|
||||
<small className="d-block text-muted">Solo publica el mensaje{!ticket?.assigneeId && " (te lo asigna si está sin asignar)"}</small>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in new issue
Block a user