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:
co-authored by
Claude Opus 5
parent
83b3f900e8
commit
8218daaff7
@@ -491,7 +491,8 @@ function renderTabla(turnos) {
|
|||||||
</span>`
|
</span>`
|
||||||
: '<span class="text-muted small">—</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 class="text-nowrap text-muted small">${esc(fecha)}</td>
|
||||||
<td><strong style="color:${priCls}">${esc(t.codigo)}</strong></td>
|
<td><strong style="color:${priCls}">${esc(t.codigo)}</strong></td>
|
||||||
<td>
|
<td>
|
||||||
@@ -518,12 +519,12 @@ function renderTabla(turnos) {
|
|||||||
<td class="text-nowrap">${totMin}</td>
|
<td class="text-nowrap">${totMin}</td>
|
||||||
<td class="text-nowrap">
|
<td class="text-nowrap">
|
||||||
<button class="btn btn-sm btn-outline-secondary py-0 px-2 me-1"
|
<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">
|
title="Ver detalles">
|
||||||
<i class="fas fa-chevron-down" style="font-size:.65rem"></i>
|
<i class="fas fa-chevron-down" style="font-size:.65rem"></i>
|
||||||
</button>
|
</button>
|
||||||
<button class="btn btn-sm btn-outline-warning py-0 px-2"
|
<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">
|
title="Cambiar estado">
|
||||||
<i class="fas fa-exchange-alt" style="font-size:.65rem"></i>
|
<i class="fas fa-exchange-alt" style="font-size:.65rem"></i>
|
||||||
</button>
|
</button>
|
||||||
@@ -619,6 +620,22 @@ function renderDetalle(t) {
|
|||||||
</div>`;
|
</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) {
|
function toggleDetalle(rowId, btn, turnoId) {
|
||||||
const row = document.getElementById(rowId);
|
const row = document.getElementById(rowId);
|
||||||
const icon = btn.querySelector('i');
|
const icon = btn.querySelector('i');
|
||||||
|
|||||||
Reference in New Issue
Block a user