fix: apply conditional field visibility in editable form (ver_formulario_enviado)
Add data-campo-id attributes to all editable field wrappers and separators, then run iniciarCondiciones-equivalent JS on page load so conditional sections (e.g. Tipo de dolor when Dolores is checked) appear/disappear without needing to close and reopen the modal. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
b29061c010
commit
ac492b4e2c
@@ -650,7 +650,7 @@ function esc2(mixed $v): string {
|
|||||||
$_saltarSeccion = false;
|
$_saltarSeccion = false;
|
||||||
}
|
}
|
||||||
if ($_saltarSeccion) continue; ?>
|
if ($_saltarSeccion) continue; ?>
|
||||||
<div class="esquema-sep<?= $compact ? ' campo-full' : '' ?>"><?= esc2($campo['label'] ?? '') ?></div>
|
<div class="esquema-sep<?= $compact ? ' campo-full' : '' ?>" data-campo-id="<?= esc2($campo['id'] ?? '') ?>"><?= esc2($campo['label'] ?? '') ?></div>
|
||||||
<?php continue; endif;
|
<?php continue; endif;
|
||||||
if ($_saltarSeccion) continue;
|
if ($_saltarSeccion) continue;
|
||||||
|
|
||||||
@@ -826,14 +826,14 @@ function esc2(mixed $v): string {
|
|||||||
}
|
}
|
||||||
if ($lval !== ''):
|
if ($lval !== ''):
|
||||||
?>
|
?>
|
||||||
<div class="campo-linked">
|
<div class="campo-linked" data-campo-id="<?= esc2($cid) ?>">
|
||||||
<div class="campo-linked-label"><?= $label ?></div>
|
<div class="campo-linked-label"><?= $label ?></div>
|
||||||
<div class="campo-linked-valor"><?= esc2($lval) ?></div>
|
<div class="campo-linked-valor"><?= esc2($lval) ?></div>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; continue; endif; // linked
|
<?php endif; continue; endif; // linked
|
||||||
if ($tipo === 'textarea'):
|
if ($tipo === 'textarea'):
|
||||||
?>
|
?>
|
||||||
<div class="campo-edit<?= $compact ? ' campo-full' : '' ?>">
|
<div class="campo-edit<?= $compact ? ' campo-full' : '' ?>" data-campo-id="<?= esc2($cid) ?>">
|
||||||
<label><?= $label ?></label>
|
<label><?= $label ?></label>
|
||||||
<textarea class="form-control form-control-sm" name="<?= esc2($cid) ?>"
|
<textarea class="form-control form-control-sm" name="<?= esc2($cid) ?>"
|
||||||
rows="3"<?= $req ?>><?= esc2($prefill) ?></textarea>
|
rows="3"<?= $req ?>><?= esc2($prefill) ?></textarea>
|
||||||
@@ -842,7 +842,7 @@ function esc2(mixed $v): string {
|
|||||||
if ($tipo === 'radio'):
|
if ($tipo === 'radio'):
|
||||||
$opts = $campo['opciones'] ?? $campo['options'] ?? [];
|
$opts = $campo['opciones'] ?? $campo['options'] ?? [];
|
||||||
?>
|
?>
|
||||||
<div class="campo-edit<?= ($compact && count($opts) > 3) ? ' campo-full' : '' ?>">
|
<div class="campo-edit<?= ($compact && count($opts) > 3) ? ' campo-full' : '' ?>" data-campo-id="<?= esc2($cid) ?>">
|
||||||
<label><?= $label ?></label>
|
<label><?= $label ?></label>
|
||||||
<?php foreach ($opts as $opt): ?>
|
<?php foreach ($opts as $opt): ?>
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
@@ -859,7 +859,7 @@ function esc2(mixed $v): string {
|
|||||||
$checkedArr = is_array($prefill) ? $prefill
|
$checkedArr = is_array($prefill) ? $prefill
|
||||||
: (is_string($prefill) && $prefill !== '' ? (json_decode($prefill, true) ?: [$prefill]) : []);
|
: (is_string($prefill) && $prefill !== '' ? (json_decode($prefill, true) ?: [$prefill]) : []);
|
||||||
?>
|
?>
|
||||||
<div class="campo-edit<?= $compact ? ' campo-full' : '' ?>">
|
<div class="campo-edit<?= $compact ? ' campo-full' : '' ?>" data-campo-id="<?= esc2($cid) ?>">
|
||||||
<label><?= $label ?></label>
|
<label><?= $label ?></label>
|
||||||
<div class="d-flex flex-wrap gap-2">
|
<div class="d-flex flex-wrap gap-2">
|
||||||
<?php foreach ($opts as $opt): ?>
|
<?php foreach ($opts as $opt): ?>
|
||||||
@@ -876,7 +876,7 @@ function esc2(mixed $v): string {
|
|||||||
if ($tipo === 'select'):
|
if ($tipo === 'select'):
|
||||||
$opts = $campo['opciones'] ?? $campo['options'] ?? [];
|
$opts = $campo['opciones'] ?? $campo['options'] ?? [];
|
||||||
?>
|
?>
|
||||||
<div class="campo-edit">
|
<div class="campo-edit" data-campo-id="<?= esc2($cid) ?>">
|
||||||
<label><?= $label ?></label>
|
<label><?= $label ?></label>
|
||||||
<select class="form-select form-select-sm" name="<?= esc2($cid) ?>"<?= $req ?>>
|
<select class="form-select form-select-sm" name="<?= esc2($cid) ?>"<?= $req ?>>
|
||||||
<option value="">— Seleccione —</option>
|
<option value="">— Seleccione —</option>
|
||||||
@@ -906,7 +906,7 @@ function esc2(mixed $v): string {
|
|||||||
default => 'text'
|
default => 'text'
|
||||||
};
|
};
|
||||||
?>
|
?>
|
||||||
<div class="campo-edit">
|
<div class="campo-edit" data-campo-id="<?= esc2($cid) ?>">
|
||||||
<label><?= $label ?></label>
|
<label><?= $label ?></label>
|
||||||
<input type="<?= $inputType ?>" class="form-control form-control-sm"
|
<input type="<?= $inputType ?>" class="form-control form-control-sm"
|
||||||
name="<?= esc2($cid) ?>" value="<?= esc2($prefill) ?>"<?= $req ?>
|
name="<?= esc2($cid) ?>" value="<?= esc2($prefill) ?>"<?= $req ?>
|
||||||
@@ -1627,6 +1627,57 @@ const topaz = (() => {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
<?php if ($modoTurnero && $modoEditar): ?>
|
<?php if ($modoTurnero && $modoEditar): ?>
|
||||||
|
// ── Condiciones de visibilidad (secciones condicionales) ──────
|
||||||
|
(function() {
|
||||||
|
var esquema = <?= json_encode($esquema, JSON_UNESCAPED_UNICODE) ?>;
|
||||||
|
var secciones = [], secActual = null;
|
||||||
|
esquema.forEach(function(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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var condicionales = secciones.filter(function(s) { return s.condicion; });
|
||||||
|
if (!condicionales.length) return;
|
||||||
|
|
||||||
|
function evaluar() {
|
||||||
|
condicionales.forEach(function(sec) {
|
||||||
|
var cond = sec.condicion;
|
||||||
|
var valoresCond = cond.valores ? cond.valores : (cond.valor ? [cond.valor] : []);
|
||||||
|
var ctrl = document.querySelector('[data-campo-id="' + cond.campo_id + '"]');
|
||||||
|
if (!ctrl) return;
|
||||||
|
var activo = false;
|
||||||
|
var checks = ctrl.querySelectorAll('input[type="checkbox"]');
|
||||||
|
if (checks.length) {
|
||||||
|
checks.forEach(function(cb) { if (valoresCond.includes(cb.value) && cb.checked) activo = true; });
|
||||||
|
} else {
|
||||||
|
var radio = ctrl.querySelector('input[type="radio"]:checked');
|
||||||
|
var sel = ctrl.querySelector('select');
|
||||||
|
var v = radio ? radio.value : (sel ? sel.value : '');
|
||||||
|
activo = valoresCond.includes(v);
|
||||||
|
}
|
||||||
|
var ids = [sec.sepId].concat(sec.elemIds);
|
||||||
|
ids.forEach(function(id) {
|
||||||
|
var el = document.querySelector('[data-campo-id="' + id + '"]');
|
||||||
|
if (!el) return;
|
||||||
|
el.style.transition = 'opacity .2s, max-height .3s';
|
||||||
|
el.style.maxHeight = activo ? '2000px' : '0';
|
||||||
|
el.style.opacity = activo ? '1' : '0';
|
||||||
|
el.style.overflow = activo ? '' : 'hidden';
|
||||||
|
el.style.pointerEvents = activo ? '' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var ctrlIds = [...new Set(condicionales.map(function(s) { return s.condicion.campo_id; }))];
|
||||||
|
ctrlIds.forEach(function(cid) {
|
||||||
|
var el = document.querySelector('[data-campo-id="' + cid + '"]');
|
||||||
|
if (el) el.addEventListener('change', evaluar);
|
||||||
|
});
|
||||||
|
evaluar();
|
||||||
|
})();
|
||||||
// ── Auto-save borrador (campo a campo, sin firma) ─────────────
|
// ── Auto-save borrador (campo a campo, sin firma) ─────────────
|
||||||
(function() {
|
(function() {
|
||||||
var _t;
|
var _t;
|
||||||
|
|||||||
Reference in New Issue
Block a user