Turn free-typed field/object names into dropdowns in the Répéteur and Donnée liée filters
Two settings previously required typing an exact field or object name by hand:
- "champ" (Répéteur's filtre_champ/filtre2_champ, Donnée liée's data_filtre_champ/data_filtre2_champ) is now a dropdown of the actual fields on the object already chosen for that widget — pre-populated server-side (controls_with_values.py) and live-updated client-side without a reload when you change the object (bindDefinitionFieldSelects(), generalizing the existing Jauge champ/row_id pattern).
- "valeur" (the comparison value, which could already reference another object's field via a "{{Objet.champ}}" string typed by hand) is now a "Valeur fixe" / "Donnée d'un autre objet" toggle — the dynamic mode shows an object dropdown and a dependent field dropdown, and picking from them reconstructs that internal reference string automatically (initFilterValuePickers()/updateFilterValueFromDynamic()). The underlying stored value and _resolve_filter_value's parsing are unchanged, so existing elements using the old typed syntax still load correctly and populate the pickers on open.
Guards against writing a literal "{{...}}" pair directly in the Jinja template source (caught by a real render error while building this — Jinja parses {{/}} anywhere in the file, including inside comments) by building that syntax from split string literals in JS instead.
Verified end to end: repeater panel renders the pickers, saving with a dynamic reference filters correctly against live data (current_level changing which row shows), and reloading pre-selects the right object/field in the dropdowns. Full suite green (89).
This commit is contained in:
william
@@ -380,6 +380,41 @@
|
||||
</button>
|
||||
<input type="hidden" name="ctrl_{{ c.key }}" id="field-{{ c.key }}" value="{{ c.value or c.default }}">
|
||||
</div>
|
||||
{% elif c.key.endswith('_valeur') %}
|
||||
<!-- Valeur de comparaison d'un filtre — soit une valeur fixe
|
||||
tapée à la main, soit une donnée d'un AUTRE objet qui change
|
||||
en cours de partie (ex: le niveau courant), choisie via deux
|
||||
listes déroulantes plutôt que tapée à la main sous la forme
|
||||
interne attendue — voir initFilterValuePickers() et
|
||||
updateFilterValueFromDynamic() plus bas, qui reconstruisent
|
||||
cette syntaxe en coulisses dans le champ caché ci-dessous,
|
||||
seul réellement envoyé au serveur. -->
|
||||
<div class="control filterValueControl" data-current-value="{{ c.value }}">
|
||||
<div class="select is-small is-fullwidth">
|
||||
<select class="filterValueMode" onchange="onFilterValueModeChange(this)">
|
||||
<option value="fixe">Valeur fixe</option>
|
||||
<option value="dynamique">Donnée d'un autre objet (change en jeu)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filterValueFixe" style="margin-top:6px;">
|
||||
<input class="input is-small" type="text" name="ctrl_{{ c.key }}" id="field-{{ c.key }}" value="{{ c.value }}" placeholder="{{ c.placeholder or '' }}">
|
||||
</div>
|
||||
<div class="filterValueDynamique" style="display:none; margin-top:6px;">
|
||||
<div class="select is-small is-fullwidth">
|
||||
<select class="filterValueObjSel" onchange="onFilterValueObjChange(this)">
|
||||
<option value="">— objet —</option>
|
||||
{% for d in definitions %}
|
||||
<option value="{{ d.name }}" data-definition-id="{{ d.id }}">{{ d.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="select is-small is-fullwidth" style="margin-top:6px;">
|
||||
<select class="filterValueFieldSel" onchange="onFilterValueFieldChange(this)">
|
||||
<option value="">— champ —</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elif c.type in ('text', 'url') %}
|
||||
<div class="control">
|
||||
<input class="input {{ 'uploadTextField' if c.allow_upload else '' }}" type="text" name="ctrl_{{ c.key }}" value="{{ c.value }}" placeholder="{{ c.placeholder or '' }}" id="field-{{ c.key }}">
|
||||
@@ -1429,6 +1464,9 @@ function initBuilderPanel() {
|
||||
|
||||
bindPropsAutosave();
|
||||
bindJaugeDefinitionSelect();
|
||||
bindDefinitionFieldSelects('field-definition_id', ['field-filtre_champ', 'field-filtre2_champ']);
|
||||
bindDefinitionFieldSelects('field-data_definition_id', ['field-data_filtre_champ', 'field-data_filtre2_champ']);
|
||||
initFilterValuePickers();
|
||||
restoreTreeCollapsedState();
|
||||
applySelectionHighlight(CURRENT_SELECTED_ID);
|
||||
restoreFloatPanelState('props', 'propsPanelFloat', 'propsPanelReopenBtn');
|
||||
@@ -1460,6 +1498,103 @@ function bindJaugeDefinitionSelect() {
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Réglages "champ" d'un filtre (Répéteur/Donnée liée) : listes
|
||||
// déroulantes peuplées avec les VRAIS champs de l'objet choisi, jamais
|
||||
// tapées à la main — même principe que bindJaugeDefinitionSelect() ci-dessus,
|
||||
// généralisé pour s'appliquer à un nombre quelconque de listes "champ"
|
||||
// rattachées à un même sélecteur d'objet (ici : filtre_champ + filtre2_champ,
|
||||
// ou data_filtre_champ + data_filtre2_champ). ----------
|
||||
function bindDefinitionFieldSelects(defSelId, fieldSelIds) {
|
||||
var defSel = document.getElementById(defSelId);
|
||||
if (!defSel) return;
|
||||
var fieldSels = fieldSelIds.map(function (id) { return document.getElementById(id); }).filter(Boolean);
|
||||
if (!fieldSels.length) return;
|
||||
defSel.addEventListener('change', function () {
|
||||
var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
|
||||
var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
|
||||
info.fields.map(function (f) { return '<option value="' + f.name + '">' + f.name + '</option>'; }).join('');
|
||||
fieldSels.forEach(function (sel) { sel.innerHTML = opts; });
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Valeur de comparaison d'un filtre : fixe, ou donnée d'un autre
|
||||
// objet ----------
|
||||
//
|
||||
// La valeur envoyée au serveur reste une simple chaîne "texte" (voir
|
||||
// _resolve_filter_value côté Python) — soit une valeur fixe, soit une
|
||||
// référence à un champ d'un autre objet dans un format interne précis. Le
|
||||
// mode "dynamique" ci-dessous se contente de reconstruire cette chaîne à
|
||||
// partir de deux listes déroulantes (objet, champ) plutôt que de la faire
|
||||
// taper à la main. OPEN/CLOSE évitent d'écrire les deux accolades l'une
|
||||
// contre l'autre dans le source (Jinja les interpréterait comme le DÉBUT
|
||||
// d'une expression s'il les rencontrait telles quelles).
|
||||
var _FILTER_REF_OPEN = '{' + '{';
|
||||
var _FILTER_REF_CLOSE = '}' + '}';
|
||||
var _FILTER_REF_RE = new RegExp('^\\{\\{\\s*([^.{}]+)\\.([^.{}]+)\\s*\\}\\}$');
|
||||
|
||||
function _filterValueDefinitionId(objName) {
|
||||
var opt = document.querySelector('.filterValueObjSel option[value="' + CSS.escape(objName) + '"]');
|
||||
return opt ? opt.dataset.definitionId : null;
|
||||
}
|
||||
|
||||
function populateFilterValueFields(fieldSel, defId, selectedName) {
|
||||
var info = (DEFINITIONS_DATA || {})[defId] || { fields: [] };
|
||||
fieldSel.innerHTML = '<option value="">— champ —</option>' + info.fields.map(function (f) {
|
||||
return '<option value="' + f.name + '"' + (f.name === selectedName ? ' selected' : '') + '>' + f.name + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function updateFilterValueFromDynamic(wrap) {
|
||||
var objSel = wrap.querySelector('.filterValueObjSel');
|
||||
var fieldSel = wrap.querySelector('.filterValueFieldSel');
|
||||
var input = wrap.querySelector('.filterValueFixe input');
|
||||
input.value = (objSel.value && fieldSel.value) ? (_FILTER_REF_OPEN + objSel.value + '.' + fieldSel.value + _FILTER_REF_CLOSE) : '';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
|
||||
function onFilterValueModeChange(sel) {
|
||||
var wrap = sel.closest('.filterValueControl');
|
||||
var fixe = wrap.querySelector('.filterValueFixe');
|
||||
var dyn = wrap.querySelector('.filterValueDynamique');
|
||||
if (sel.value === 'dynamique') {
|
||||
fixe.style.display = 'none';
|
||||
dyn.style.display = 'block';
|
||||
updateFilterValueFromDynamic(wrap);
|
||||
} else {
|
||||
fixe.style.display = 'block';
|
||||
dyn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function onFilterValueObjChange(sel) {
|
||||
var wrap = sel.closest('.filterValueControl');
|
||||
populateFilterValueFields(wrap.querySelector('.filterValueFieldSel'), _filterValueDefinitionId(sel.value), '');
|
||||
updateFilterValueFromDynamic(wrap);
|
||||
}
|
||||
|
||||
function onFilterValueFieldChange(sel) {
|
||||
updateFilterValueFromDynamic(sel.closest('.filterValueControl'));
|
||||
}
|
||||
|
||||
function initFilterValuePickers() {
|
||||
document.querySelectorAll('.filterValueControl').forEach(function (wrap) {
|
||||
var modeSel = wrap.querySelector('.filterValueMode');
|
||||
var objSel = wrap.querySelector('.filterValueObjSel');
|
||||
var fieldSel = wrap.querySelector('.filterValueFieldSel');
|
||||
var current = (wrap.dataset.currentValue || '').trim();
|
||||
var m = _FILTER_REF_RE.exec(current);
|
||||
if (m) {
|
||||
modeSel.value = 'dynamique';
|
||||
wrap.querySelector('.filterValueFixe').style.display = 'none';
|
||||
wrap.querySelector('.filterValueDynamique').style.display = 'block';
|
||||
objSel.value = m[1].trim();
|
||||
populateFilterValueFields(fieldSel, _filterValueDefinitionId(objSel.value), m[2].trim());
|
||||
} else {
|
||||
modeSel.value = 'fixe';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Le retour/avance du navigateur (bouton "précédent") est déjà pris en
|
||||
// charge par pjax.js (navigation globale sans rechargement, voir
|
||||
// static/pjax.js) : il refait un rendu complet de <main> et rejoue ce
|
||||
|
||||
Reference in New Issue
Block a user