feat(formularios): add 'calculado' field type with fecha_hoy and edad sub-types
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
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
0c68dff307
commit
1385c25b30
@@ -555,6 +555,34 @@ function renderCampos(esquema, prefilled) {
|
||||
<label class="form-check-label">${esc(o)}</label>
|
||||
</div>`).join('');
|
||||
html += wrapOpen + `<div class="mb-3">${lbl}${opts}${linkedNote}</div>` + wrapClose;
|
||||
} else if (c.tipo === 'calculado') {
|
||||
// Pre-calcular valor según sub-tipo
|
||||
let calcVal = pad[c.id] || '';
|
||||
if (!calcVal) {
|
||||
if ((c.calc_tipo || 'fecha_hoy') === 'fecha_hoy') {
|
||||
const now = new Date();
|
||||
calcVal = now.getFullYear() + '-'
|
||||
+ String(now.getMonth()+1).padStart(2,'0') + '-'
|
||||
+ String(now.getDate()).padStart(2,'0');
|
||||
} else if (c.calc_tipo === 'edad') {
|
||||
const fnac = pad['__paciente']?.fecha_nacimiento || pad.fecha_nacimiento || '';
|
||||
if (fnac) {
|
||||
const hoy = new Date();
|
||||
const bday = new Date(fnac);
|
||||
let edad = hoy.getFullYear() - bday.getFullYear();
|
||||
const m = hoy.getMonth() - bday.getMonth();
|
||||
if (m < 0 || (m === 0 && hoy.getDate() < bday.getDate())) edad--;
|
||||
calcVal = edad >= 0 ? String(edad) : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
const inputType = c.calc_tipo === 'edad' ? 'number' : 'date';
|
||||
html += wrapOpen + `<div class="mb-3">${lbl}
|
||||
<input type="${inputType}" class="form-control" style="background:#fff9e6;border-color:#ffc107"
|
||||
name="${c.id}" value="${esc(calcVal)}" ${req}
|
||||
placeholder="${c.calc_tipo === 'edad' ? 'Edad en años' : 'Fecha'}">
|
||||
<small class="text-warning-emphasis"><i class="fas fa-calculator me-1"></i>Prellenado automáticamente — puedes modificarlo</small>
|
||||
</div>` + wrapClose;
|
||||
} else {
|
||||
const t = c.tipo === 'numero' ? 'number'
|
||||
: (c.tipo === 'fecha' || c.linked_key === 'fecha_nacimiento') ? 'date'
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user