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

feat: visibilidad condicional de secciones en formularios

Browse Source 
Builder:
- Separadores tienen nuevo panel "Visible solo si [campo] = [valor]"
- Selector de campo (checkbox/radio/select del mismo form)
- Selector de valor se actualiza dinámicamente al elegir el campo
- Badge visual en el canvas muestra la condición configurada
- Condición se guarda en campo.condicion { campo_id, valor }

form_cliente.php:
- iniciarCondiciones() evalúa condiciones al cargar y al cambiar campos
- Secciones sin la opción marcada se ocultan (max-height:0, pointer-events:none)
- Se muestran con transición suave al marcar la opción correspondiente
- Cada campo tiene data-campo-id para que la lógica pueda localizarlo

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-23 23:24:08 -05:00
co-authored by Claude Sonnet 4.6
parent cd3d3bb9c0
commit 301b39ad0c
2 changed files with 153 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
form_cliente.php
+98 -19
View File
@@ -447,23 +447,25 @@ function renderCampos(esquema, prefilled) {
esquema.forEach(c => {
if (c.tipo === 'separador') {
html += `<div class="mt-4 mb-2">
html += `<div class="mt-4 mb-2" data-campo-id="${esc(c.id)}">
<p class="fw-bold text-secondary small text-uppercase mb-0">${esc(c.label)}</p>
<hr class="mt-1 mb-3">
</div>`;
return;
}
// Wrapper con data-campo-id para lógica de condiciones
const wrapOpen = `<div data-campo-id="${esc(c.id)}">`;
const wrapClose = `</div>`;
if (c.tipo === 'firma' || c.tipo === 'firma_profesional') {
// firma del paciente usa firma_modos global (topbar); profesional usa sus propios modos
const modos = (c.tipo === 'firma' && _firmaModosGlobal)
? _firmaModosGlobal
: (c.modos || ['canvas']);
html += renderFirmaInline(c.id, modos, c.label, c.required, c.tipo === 'firma_profesional');
? _firmaModosGlobal : (c.modos || ['canvas']);
html += wrapOpen + renderFirmaInline(c.id, modos, c.label, c.required, c.tipo === 'firma_profesional') + wrapClose;
return;
}
if (c.tipo === 'parrafo') {
const ws = c.flujoLibre ? 'normal' : 'pre-wrap';
html += `<div class="mb-3" style="font-size:.88rem;line-height:1.75;color:#222;text-align:justify;white-space:${ws}">${esc(c.contenido||'')}</div>`;
html += wrapOpen + `<div class="mb-3" style="font-size:.88rem;line-height:1.75;color:#222;text-align:justify;white-space:${ws}">${esc(c.contenido||'')}</div>` + wrapClose;
return;
}
if (c.tipo === 'parrafo_inline') {
@@ -482,7 +484,7 @@ function renderCampos(esquema, prefilled) {
return esc(p);
}).join('');
const inlineHtml = (c.contenido||'').split('\n').map(renderLine).join('<br>');
html += `<div class="mb-3" style="font-size:.88rem;line-height:2.4;color:#222;text-align:justify">${inlineHtml}</div>`;
html += wrapOpen + `<div class="mb-3" style="font-size:.88rem;line-height:2.4;color:#222;text-align:justify">${inlineHtml}</div>` + wrapClose;
return;
}
if (c.tipo === 'lista_marcable') {
@@ -493,14 +495,13 @@ function renderCampos(esquema, prefilled) {
<input class="form-check-input" type="checkbox" name="${c.id}" value="${esc(it)}">
<label class="form-check-label">${i+1}. ${esc(it)}</label>
</div>`).join('');
html += `<div class="mb-3">${lbl}${opts}</div>`;
html += wrapOpen + `<div class="mb-3">${lbl}${opts}</div>` + wrapClose;
return;
}
const req = c.required ? 'required' : '';
const star = c.required ? '<span class="text-danger ms-1">*</span>' : '';
// Valor pre-llenado (linked usa __paciente.xxx o key directo)
let val = '';
if (c.tipo === 'linked') {
val = pad['__paciente']?.[c.linked_key] || pad[c.linked_key] || '';
@@ -509,7 +510,6 @@ function renderCampos(esquema, prefilled) {
}
const isLinked = c.tipo === 'linked';
// Linked con valor → solo lectura. Linked sin valor → editable (el paciente puede completarlo)
const isReadOnly = isLinked && !!val;
const linkedNote = isLinked && val
? '<small class="text-info d-block mt-1"><i class="fas fa-link me-1"></i>Campo autocompletado</small>'
@@ -518,21 +518,21 @@ function renderCampos(esquema, prefilled) {
const lbl = `<label class="form-label small fw-semibold mb-1">${esc(c.label)}${star}</label>`;
if (c.tipo === 'textarea') {
html += `<div class="mb-3">${lbl}
html += wrapOpen + `<div class="mb-3">${lbl}
<textarea class="form-control ${isReadOnly?'field-linked':''}"
name="${c.id}" rows="3" ${req} ${isReadOnly?'readonly':''}
placeholder="${esc(c.placeholder||'')}">${esc(val)}</textarea>${linkedNote}
</div>`;
</div>` + wrapClose;
} else if (c.tipo === 'select') {
const opts = (c.options||[]).map(o =>
`<option value="${esc(o)}" ${o===val?'selected':''}>${esc(o)}</option>`
).join('');
html += `<div class="mb-3">${lbl}
html += wrapOpen + `<div class="mb-3">${lbl}
<select class="form-select ${isReadOnly?'field-linked':''}"
name="${c.id}" ${req} ${isReadOnly?'disabled':''}>
<option value="">— seleccionar —</option>${opts}
</select>${linkedNote}
</div>`;
</div>` + wrapClose;
} else if (c.tipo === 'radio') {
const opts = (c.options||[]).map(o => `
<div class="form-check">
@@ -540,7 +540,7 @@ function renderCampos(esquema, prefilled) {
${o===val?'checked':''} ${isReadOnly?'disabled':''}>
<label class="form-check-label">${esc(o)}</label>
</div>`).join('');
html += `<div class="mb-3">${lbl}${opts}${linkedNote}</div>`;
html += wrapOpen + `<div class="mb-3">${lbl}${opts}${linkedNote}</div>` + wrapClose;
} else if (c.tipo === 'checkbox') {
const vals = Array.isArray(val) ? val : [];
const opts = (c.options||[]).map(o => `
@@ -549,18 +549,17 @@ function renderCampos(esquema, prefilled) {
${vals.includes(o)?'checked':''} ${isReadOnly?'disabled':''}>
<label class="form-check-label">${esc(o)}</label>
</div>`).join('');
html += `<div class="mb-3">${lbl}${opts}${linkedNote}</div>`;
html += wrapOpen + `<div class="mb-3">${lbl}${opts}${linkedNote}</div>` + wrapClose;
} else {
// texto, numero, fecha, hora, linked
const t = c.tipo === 'numero' ? 'number'
: (c.tipo === 'fecha' || c.linked_key === 'fecha_nacimiento') ? 'date'
: c.tipo === 'hora' ? 'time' : 'text';
html += `<div class="mb-3">${lbl}
html += wrapOpen + `<div class="mb-3">${lbl}
<input type="${t}" class="form-control ${isReadOnly?'field-linked':''}"
name="${c.id}" value="${esc(val)}" ${req} ${isReadOnly?'readonly':''}
placeholder="${esc(c.placeholder||'')}">
${linkedNote}
</div>`;
</div>` + wrapClose;
}
});
@@ -924,6 +923,7 @@ const formCliente = {
const hasInlineFirma = form.esquema_decoded.some(c => c.tipo === 'firma' || c.tipo === 'firma_profesional');
_hasInlineFirma = hasInlineFirma;
renderCampos(form.esquema_decoded, prefilled);
iniciarCondiciones(form.esquema_decoded);
// Firma global (solo si NO hay firmas inline y permite_firma está activo)
if (form.permite_firma && !hasInlineFirma) {
@@ -1093,6 +1093,85 @@ const formCliente = {
},
};
// ══════════════════════════════════════════════════════════════════════
// LÓGICA DE CONDICIONES — secciones visibles según valor de otro campo
// ══════════════════════════════════════════════════════════════════════
function iniciarCondiciones(esquema) {
// Agrupar campos en secciones delimitadas por separadores
// Una sección = { separadorId, condicion, elementIds[] }
const secciones = [];
let secActual = null;
esquema.forEach(c => {
if (c.tipo === 'separador') {
secActual = { sepId: c.id, condicion: c.condicion || null, elemIds: [] };
secciones.push(secActual);
} else if (secActual) {
secActual.elemIds.push(c.id);
}
});
const condicionales = secciones.filter(s => s.condicion);
if (!condicionales.length) return;
// Marcar cada elemento de sección condicional con data-seccion
condicionales.forEach(sec => {
const sepEl = document.querySelector(`[data-campo-id="${sec.sepId}"]`);
if (sepEl) sepEl.dataset.seccionCond = sec.sepId;
sec.elemIds.forEach(id => {
const el = document.querySelector(`[data-campo-id="${id}"]`);
if (el) el.dataset.seccionCond = sec.sepId;
});
});
function evaluar() {
condicionales.forEach(sec => {
const { campo_id, valor } = sec.condicion;
// Leer valor del campo controlador
const ctrl = document.querySelector(`[data-campo-id="${campo_id}"]`);
if (!ctrl) return;
let activo = false;
const checks = ctrl.querySelectorAll('input[type="checkbox"]');
if (checks.length) {
// checkbox múltiple: activo si alguno con ese valor está checked
checks.forEach(cb => { if (cb.value === valor && cb.checked) activo = true; });
} else {
const radio = ctrl.querySelector(`input[type="radio"]:checked`);
const sel = ctrl.querySelector('select');
if (radio) activo = radio.value === valor;
else if (sel) activo = sel.value === valor;
}
// Mostrar u ocultar toda la sección
document.querySelectorAll(`[data-seccion-cond="${sec.sepId}"]`).forEach(el => {
el.style.transition = 'opacity .2s, max-height .3s';
if (activo) {
el.style.maxHeight = '2000px';
el.style.opacity = '1';
el.style.overflow = '';
el.style.pointerEvents = '';
} else {
el.style.maxHeight = '0';
el.style.opacity = '0';
el.style.overflow = 'hidden';
el.style.pointerEvents = 'none';
}
});
});
}
// Escuchar cambios en los campos controladores
const camposCtrl = [...new Set(condicionales.map(s => s.condicion.campo_id))];
camposCtrl.forEach(cid => {
const el = document.querySelector(`[data-campo-id="${cid}"]`);
if (el) el.addEventListener('change', evaluar);
});
// Evaluar estado inicial
evaluar();
}
// ══════════════════════════════════════════════════════════════════════
// INIT
// ══════════════════════════════════════════════════════════════════════