feat: chip Otro se posiciona por minuto en modal de tomas prolongadas

- Cada chip envuelto en .mp-chip-grp con CSS order = minuto
- Otro arranca en order:9999 (último); al digitar el valor se mueve
  en tiempo real al lugar cronológico correcto
- Si ya tiene valor guardado (_mpOtroHora), abre posicionado
- Click handler usa .mp-chip-grp para encontrar input/unit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-21 08:13:59 -05:00
co-authored by Claude Sonnet 4.6
parent ecc9b74247
commit 3ae57a78e4
+21 -5
View File
@@ -635,6 +635,7 @@ function _addExamWizardHtml(string $cid): string {
.mp-cfg-body { padding:1.25rem; }
.mp-cfg-foot { padding:0 1.25rem 1.25rem; }
.mp-chips { display:flex;flex-wrap:wrap;gap:.4rem;padding:.25rem 0; }
.mp-chip-grp { display:inline-flex;align-items:center; }
.mp-chip { padding:.3rem .75rem;border:1.5px solid #cbd5e1;border-radius:2rem;
background:#f8fafc;color:#475569;font-size:.82rem;cursor:pointer;transition:all .15s;line-height:1.4; }
.mp-chip.active { background:#1e3a5f;border-color:#1e3a5f;color:#fff;font-weight:600; }
@@ -1389,6 +1390,11 @@ function _mpShowCfgPanel(examName, groups, isModify) {
var isActive = isSigned || inSaved || (!isModify && isMin0);
var isOtro = /otro/i.test(s.label || '');
var chipLbl = _mpChipLabel(s.label || ('Toma ' + (i+1)));
// orden flex: numérico para Minuto X, valor guardado para Otro, 9999 si sin valor
var chipOrder = isOtro
? ((_mpOtroHora && isActive) ? parseInt(_mpOtroHora) : 9999)
: (parseInt(chipLbl) === chipLbl >> 0 ? parseInt(chipLbl) : i * 10);
html += '<span class="mp-chip-grp"' + (isOtro ? ' data-otro-grp="1"' : '') + ' style="order:' + chipOrder + '">';
// checkbox oculto — sigue siendo la fuente de verdad para el guardado
html += '<input type="checkbox" class="mp-cfg-chk d-none" id="cfg-' + s.firma + '"'
+ ' value="' + s.firma + '" data-group="' + gk + '"'
@@ -1405,6 +1411,7 @@ function _mpShowCfgPanel(examName, groups, isModify) {
+ (isActive ? ' style="display:inline-block"' : '') + '>'
+ '<span class="mp-chip-otro-unit' + (isActive ? '' : ' d-none') + '">min</span>';
}
html += '</span>';
}
html += '</div></div>';
}
@@ -1424,17 +1431,26 @@ document.addEventListener('click', function(e) {
chk.checked = !chk.checked;
chip.classList.toggle('active', chk.checked);
if (chip.dataset.otro) {
var inp = chip.nextElementSibling;
var unit = inp && inp.nextElementSibling;
if (inp && inp.classList.contains('mp-chip-otro-inp')) {
var grp = chip.closest('.mp-chip-grp');
var inp = grp && grp.querySelector('.mp-chip-otro-inp');
var unit = grp && grp.querySelector('.mp-chip-otro-unit');
if (inp) {
inp.style.display = chk.checked ? 'inline-block' : 'none';
if (unit && unit.classList.contains('mp-chip-otro-unit'))
unit.classList.toggle('d-none', !chk.checked);
if (unit) unit.classList.toggle('d-none', !chk.checked);
if (chk.checked) setTimeout(function() { inp.focus(); }, 50);
}
}
});
// Reposicionar chip "Otro" en tiempo real según el minuto digitado
document.addEventListener('input', function(e) {
if (!e.target.classList.contains('mp-chip-otro-inp')) return;
var grp = e.target.closest('.mp-chip-grp');
if (!grp) return;
var v = parseInt(e.target.value);
grp.style.order = (v >= 1) ? v : 9999;
});
function _mpGetGroupsForExam(examName) {
var result = {};
for (var gk in _mpAllGroups) {