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

feat(formularios): add 'calculado' field type with fecha_hoy and edad sub-types

Browse Source 
Builder:
- New palette item 'Campo calculado' (fa-calculator)
- Editor modal lets user pick: Fecha de hoy / Edad del paciente
- Preview shows yellow-tinted input with calculator badge

form_cliente.php:
- fecha_hoy: pre-fills today's date (YYYY-MM-DD), editable by patient
- edad: calculates age from patient's fecha_nacimiento, editable
- Collected on submit like any normal input

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-03 11:23:36 -05:00
co-authored by Claude Sonnet 4.6
parent 0c68dff307
commit 1385c25b30
2 changed files with 62 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lab_formulario_builder.php
+34
View File
@@ -478,6 +478,7 @@ const TIPOS_CAMPO = [
{ tipo:'parrafo', label:'Párrafo de texto', icon:'fa-paragraph' },
{ tipo:'parrafo_inline', label:'Párrafo con campos', icon:'fa-align-left' },
{ tipo:'lista_marcable', label:'Lista marcable', icon:'fa-list-ol' },
{ tipo:'calculado', label:'Campo calculado', icon:'fa-calculator' },
];
const TIPOS_LINKED = [
{ key:'nombre_completo', label:'Nombre completo', icon:'fa-user' },
@@ -765,6 +766,16 @@ function renderCampoPreview(c) {
).join('');
return `<div class="preview-field">${lbl}${items}</div>`;
}
if (c.tipo === 'calculado') {
const subLabel = c.calc_tipo === 'edad' ? 'Edad (años) — calculada del paciente'
: 'Fecha de hoy — prellenada y editable';
const t = c.calc_tipo === 'edad' ? 'number' : 'date';
return `<div class="preview-field">
${lbl}
<input type="${t}" disabled placeholder="${subLabel}" style="background:#fff9e6;border-color:#ffc107">
<small style="color:#856404;font-size:9px"><i class="fas fa-calculator"></i> Campo calculado — editable por el paciente</small>
</div>`;
}
const t = c.tipo==='numero'?'number':c.tipo==='fecha'?'date':c.tipo==='hora'?'time':'text';
return `<div class="preview-field">${lbl}
<input type="${t}" disabled placeholder="${esc(c.placeholder||'')}"></div>`;
@@ -878,6 +889,26 @@ function abrirEditorCampo(idx) {
<input class="form-check-input" type="checkbox" id="ce-required" ${c.required?'checked':''}>
<label class="form-check-label small" for="ce-required">Requiere al menos una selección</label>
</div>`;
} else if (c.tipo === 'calculado') {
const isFecha = (c.calc_tipo || 'fecha_hoy') === 'fecha_hoy';
html += `<div class="mb-3">
<label class="form-label small fw-semibold">Tipo de cálculo</label>
<div class="d-flex gap-4">
<div class="form-check">
<input class="form-check-input" type="radio" name="ce-calc-tipo" id="ce-calc-fecha" value="fecha_hoy" ${isFecha?'checked':''}>
<label class="form-check-label small" for="ce-calc-fecha"><i class="fas fa-calendar-day text-warning me-1"></i>Fecha de hoy</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ce-calc-tipo" id="ce-calc-edad" value="edad" ${!isFecha?'checked':''}>
<label class="form-check-label small" for="ce-calc-edad"><i class="fas fa-user-clock text-warning me-1"></i>Edad del paciente</label>
</div>
</div>
<div class="form-text mt-1">El campo se pre-llena automáticamente pero el paciente puede editarlo.</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="ce-required" ${c.required?'checked':''}>
<label class="form-check-label small" for="ce-required">Campo obligatorio</label>
</div>`;
} else if (c.tipo === 'firma' || c.tipo === 'firma_profesional') {
if (c.tipo === 'firma_profesional') {
const cm = c.modos || ['canvas'];
@@ -964,6 +995,9 @@ function aplicarCampo() {
const items = document.getElementById('ce-items');
if (items) c.items = items.value.split('\n').map(s=>s.trim()).filter(Boolean);
const calcTipo = document.querySelector('input[name="ce-calc-tipo"]:checked');
if (calcTipo) c.calc_tipo = calcTipo.value;
const modoCanvas = document.getElementById('ce-modo-canvas');
const modoFoto = document.getElementById('ce-modo-foto');
if (modoCanvas !== null || modoFoto !== null) {