williamandClaude Sonnet 5
e1216e99d5
Chaque champ prenait une grosse carte (~250px de haut : libellés Bulma pleine taille, "Retirer ce champ" en texte) — inutilisable pour un objet à 10+ champs, ce qui est pourtant l'usage visé par ce panneau. Remplacé par une vraie ligne de tableau dense, sur le même principe que "Champs existants" dans object_edit.html (déjà compact et sobre dans le reste de l'outil) : une ligne = un champ, colonnes Nom/Type/Objet lié/Mini/Maxi/Obligatoire, action "Retirer" réduite à une icône. Les colonnes conditionnelles (Objet lié pour une relation, Mini/Maxi pour un nombre) restent TOUJOURS présentes — sans quoi les colonnes de lignes différentes ne s'aligneraient plus — seul leur contenu bascule entre le vrai champ de saisie et un espace réservé "—", au lieu de masquer toute la cellule comme avant. object_form.js adapté en conséquence : bounds désormais 2 cibles séparées (mini/maxi, chacune dans sa propre cellule) au lieu d'une seule enveloppe commune, et chaque bascule s'accompagne de celle de son espace réservé. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
62 lines
2.7 KiB
JavaScript
62 lines
2.7 KiB
JavaScript
// object_form.js — ajoute/retire des lignes de champ dans le formulaire de
|
|
// définition d'objet, bascule l'affichage du sélecteur "objet lié"
|
|
// uniquement quand le type choisi est "relation", et l'affichage des
|
|
// bornes mini/maxi (2.2 — bornage automatique) uniquement pour un champ
|
|
// numérique.
|
|
//
|
|
// Tout est enfermé dans une IIFE : cette page est chargée via pjax (voir
|
|
// pjax.js), qui rejoue ce script telle-quelle à chaque visite sans
|
|
// rechargement complet — une déclaration `const`/`let` au premier niveau
|
|
// ferait planter la deuxième exécution ("already declared") et bloquerait
|
|
// silencieusement "Ajouter un champ"/"Créer l'objet" dès la deuxième visite
|
|
// de cette page dans une même session.
|
|
(function () {
|
|
var fieldsList = document.getElementById('fieldsList');
|
|
var template = document.getElementById('fieldRowTemplate');
|
|
var btnAddField = document.getElementById('btnAddField');
|
|
var NUMERIC_FIELD_TYPES = ['nombre_entier', 'nombre_decimal'];
|
|
|
|
function wireRow(row) {
|
|
// Ligne de TABLEAU dense (une ligne = un champ, comme "Champs
|
|
// existants" dans object_edit.html) : "Objet lié" et "Mini"/"Maxi"
|
|
// gardent toujours leur colonne (jamais masquée, sinon les colonnes
|
|
// des différentes lignes ne s'alignent plus) — seul leur CONTENU
|
|
// bascule entre le vrai champ de saisie et un espace réservé "—"
|
|
// quand il ne s'applique pas au type choisi.
|
|
var typeSelect = row.querySelector('.fieldTypeSelect');
|
|
var relationTarget = row.querySelector('.relationTarget');
|
|
var relationPlaceholder = row.querySelector('.relationPlaceholder');
|
|
var boundsTargets = row.querySelectorAll('.boundsTarget');
|
|
var boundsPlaceholders = row.querySelectorAll('.boundsPlaceholder');
|
|
|
|
function toggle(target, placeholder, visible) {
|
|
target.style.display = visible ? '' : 'none';
|
|
placeholder.style.display = visible ? 'none' : '';
|
|
}
|
|
|
|
function syncFieldTypeVisibility() {
|
|
var isRelation = typeSelect.value === 'relation';
|
|
var isNumeric = NUMERIC_FIELD_TYPES.includes(typeSelect.value);
|
|
toggle(relationTarget, relationPlaceholder, isRelation);
|
|
boundsTargets.forEach(function (el, i) { toggle(el, boundsPlaceholders[i], isNumeric); });
|
|
}
|
|
typeSelect.addEventListener('change', syncFieldTypeVisibility);
|
|
syncFieldTypeVisibility();
|
|
|
|
row.querySelector('.btnRemoveField').addEventListener('click', function () {
|
|
row.remove();
|
|
});
|
|
}
|
|
|
|
function addFieldRow() {
|
|
var clone = template.content.cloneNode(true);
|
|
fieldsList.appendChild(clone);
|
|
wireRow(fieldsList.lastElementChild);
|
|
}
|
|
|
|
btnAddField.addEventListener('click', addFieldRow);
|
|
|
|
// Toujours démarrer avec un premier champ prêt à remplir.
|
|
addFieldRow();
|
|
})();
|