usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: filtros por fecha/paciente y paginación en tab Envíos de formularios

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-04-02 10:47:18 -05:00
parent d726319b0a
commit 69ad9733c1
1 changed files with 118 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lab_formularios.php
+118 -9
View File
@@ -118,6 +118,28 @@ $puedeEscribir = $esAdmin && hasModuleWrite('lab_formularios');
<!-- ── ENVÍOS ─────────────────────────────────────────────── -->
<div id="panel-envios" style="display:none">
<!-- Filtros -->
<div class="row g-2 mb-3 align-items-end">
<div class="col-sm-3">
<label class="form-label small mb-1">Desde</label>
<input type="date" id="env-f-desde" class="form-control form-control-sm" oninput="envios.filtrar()">
</div>
<div class="col-sm-3">
<label class="form-label small mb-1">Hasta</label>
<input type="date" id="env-f-hasta" class="form-control form-control-sm" oninput="envios.filtrar()">
</div>
<div class="col-sm-4">
<label class="form-label small mb-1">Paciente</label>
<input type="text" id="env-f-paciente" class="form-control form-control-sm"
placeholder="Buscar paciente…" oninput="envios.filtrar()">
</div>
<div class="col-sm-2">
<button class="btn btn-outline-secondary btn-sm w-100" onclick="envios.limpiarFiltros()">
<i class="fas fa-times me-1"></i>Limpiar
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle small" id="tabla-envios">
<thead class="table-light">
@@ -135,6 +157,14 @@ $puedeEscribir = $esAdmin && hasModuleWrite('lab_formularios');
</tbody>
</table>
</div>
<!-- Paginación -->
<div class="d-flex align-items-center justify-content-between mt-3 flex-wrap gap-2">
<small class="text-muted" id="env-pag-info"></small>
<nav>
<ul class="pagination pagination-sm mb-0" id="env-paginacion"></ul>
</nav>
</div>
</div>
</main>
@@ -443,26 +473,71 @@ const ESTADO_ENV = {
firmado: { cls:'badge-firmado', icon:'✍️' },
expirado: { cls:'badge-expirado', icon:'⏰' },
};
const POR_PAGINA = 15;
const envios = {
_data: [],
_data: [],
_filtrado: [],
_pagina: 1,
async cargar() {
const r = await fetch('api/lab/get_formularios.php?envios=1');
const d = await r.json();
this._data = d.data || [];
this._render();
this._pagina = 1;
this._aplicarFiltros();
},
_render() {
const tb = $('tbody-envios');
filtrar() {
this._pagina = 1;
this._aplicarFiltros();
},
limpiarFiltros() {
$('env-f-desde').value = '';
$('env-f-hasta').value = '';
$('env-f-paciente').value = '';
this.filtrar();
},
_aplicarFiltros() {
const desde = $('env-f-desde').value;
const hasta = $('env-f-hasta').value;
const paciente = $('env-f-paciente').value.trim().toLowerCase();
this._filtrado = this._data.filter(e => {
const fecha = (e.created_at || '').slice(0, 10);
if (desde && fecha < desde) return false;
if (hasta && fecha > hasta) return false;
if (paciente && !(e.paciente_nombre || '').toLowerCase().includes(paciente)) return false;
return true;
});
// badge de pendientes sobre el total sin filtrar
const badgePend = $('badge-envios');
const pend = this._data.filter(e => e.estado==='pendiente').length;
const pend = this._data.filter(e => e.estado === 'pendiente').length;
if (pend) { badgePend.textContent = pend; badgePend.style.display = ''; }
else badgePend.style.display = 'none';
if (!this._data.length) {
tb.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">Sin envíos aún</td></tr>';
this._render();
},
_render() {
const tb = $('tbody-envios');
const total = this._filtrado.length;
if (!total) {
tb.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">Sin envíos para los filtros seleccionados</td></tr>';
$('env-pag-info').textContent = '';
$('env-paginacion').innerHTML = '';
return;
}
tb.innerHTML = this._data.map(e => {
const totalPag = Math.ceil(total / POR_PAGINA);
if (this._pagina > totalPag) this._pagina = totalPag;
const inicio = (this._pagina - 1) * POR_PAGINA;
const pagina = this._filtrado.slice(inicio, inicio + POR_PAGINA);
tb.innerHTML = pagina.map(e => {
const info = ESTADO_ENV[e.estado] || {};
return `<tr>
<td><span class="fw-semibold">${esc(e.form_nombre)}</span>
@@ -473,7 +548,7 @@ const envios = {
<td><small class="text-muted">${esc((e.expira_en||'').slice(0,10))}</small></td>
<td>
<button class="btn btn-xs btn-outline-secondary" title="Copiar link"
onclick="envios.copiarTokenLink('${esc(e.token)}')">
onclick="envios.copiarTokenLink('${esc(e.token)}')">
<i class="fas fa-copy"></i>
</button>
${['completado','firmado'].includes(e.estado)
@@ -487,7 +562,41 @@ const envios = {
</td>
</tr>`;
}).join('');
// Info
$('env-pag-info').textContent =
`Mostrando ${inicio + 1}–${Math.min(inicio + POR_PAGINA, total)} de ${total} envíos`;
// Paginación
const ul = $('env-paginacion');
ul.innerHTML = '';
const agregar = (label, pag, disabled, active) => {
const li = document.createElement('li');
li.className = `page-item${disabled?' disabled':''}${active?' active':''}`;
li.innerHTML = `<a class="page-link" href="#" onclick="event.preventDefault();${!disabled?`envios.irAPagina(${pag})`:''}">${label}</a>`;
ul.appendChild(li);
};
agregar('«', 1, this._pagina === 1, false);
agregar('‹', this._pagina-1, this._pagina === 1, false);
// páginas con ventana deslizante ±2
const rango = 2;
const pMin = Math.max(1, this._pagina - rango);
const pMax = Math.min(totalPag, this._pagina + rango);
if (pMin > 1) { agregar('1', 1, false, false); if (pMin > 2) agregar('…', null, true, false); }
for (let p = pMin; p <= pMax; p++) agregar(p, p, false, p === this._pagina);
if (pMax < totalPag) { if (pMax < totalPag-1) agregar('…', null, true, false); agregar(totalPag, totalPag, false, false); }
agregar('›', this._pagina+1, this._pagina === totalPag, false);
agregar('»', totalPag, this._pagina === totalPag, false);
},
irAPagina(p) {
this._pagina = p;
this._render();
$('panel-envios').scrollIntoView({ behavior:'smooth', block:'start' });
},
copiarTokenLink(token) {
const url = window.location.origin + window.location.pathname.replace(/\/[^/]+$/, '')
+ `/form_cliente.php?t=${token}`;