Historial: abrir el detalle al hacer clic en cualquier parte de la fila

Antes había que apuntarle a una flecha de pocos píxeles al final de la fila.
Ahora sirve toda la fila, como ya funciona el listado de pacientes.

Con dos resguardos, porque la fila lleva controles y datos que se copian:
no abre si el clic cayó sobre un botón o un enlace —el de cambiar estado
tiene lo suyo que hacer— ni si el usuario venía seleccionando texto, que en
esta pantalla es frecuente para copiar un nombre o un código.

La flecha se conserva: sigue siendo la señal visual de que la fila se abre.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-08-19 17:35:47 -05:00
co-authored by Claude Opus 5
parent 83b3f900e8
commit 8218daaff7
+20 -3
View File
@@ -491,7 +491,8 @@ function renderTabla(turnos) {
</span>`
: '<span class="text-muted small">—</span>';
return `<tr data-id="${t.id}">
return `<tr data-id="${t.id}" style="cursor:pointer"
onclick="filaDetalle(event, '${rowId}', ${t.id})">
<td class="text-nowrap text-muted small">${esc(fecha)}</td>
<td><strong style="color:${priCls}">${esc(t.codigo)}</strong></td>
<td>
@@ -518,12 +519,12 @@ function renderTabla(turnos) {
<td class="text-nowrap">${totMin}</td>
<td class="text-nowrap">
<button class="btn btn-sm btn-outline-secondary py-0 px-2 me-1"
onclick="toggleDetalle('${rowId}', this, ${t.id})"
onclick="event.stopPropagation();toggleDetalle('${rowId}', this, ${t.id})"
title="Ver detalles">
<i class="fas fa-chevron-down" style="font-size:.65rem"></i>
</button>
<button class="btn btn-sm btn-outline-warning py-0 px-2"
onclick="abrirModalEstado(${t.id}, '${t.estado}', '${nombre}')"
onclick="event.stopPropagation();abrirModalEstado(${t.id}, '${t.estado}', '${nombre}')"
title="Cambiar estado">
<i class="fas fa-exchange-alt" style="font-size:.65rem"></i>
</button>
@@ -619,6 +620,22 @@ function renderDetalle(t) {
</div>`;
}
/**
* Clic en cualquier parte de la fila: abre o cierra su detalle.
*
* Se ignora si el usuario estaba seleccionando texto —copiar un documento o un
* nombre es frecuente aquí y sería molesto que la fila se abriera al soltar— y
* si el clic cayó sobre un enlace o un botón, que tienen lo suyo que hacer.
*/
function filaDetalle(ev, rowId, turnoId) {
if (ev.target.closest('button, a, input, select')) return;
const sel = window.getSelection();
if (sel && sel.toString().length > 0) return;
const fila = document.querySelector(`tr[data-id="${turnoId}"]`);
const btn = fila ? fila.querySelector('button[title="Ver detalles"]') : null;
if (btn) toggleDetalle(rowId, btn, turnoId);
}
function toggleDetalle(rowId, btn, turnoId) {
const row = document.getElementById(rowId);
const icon = btn.querySelector('i');