From 03db681022890805607b90a90de2a02026653036 Mon Sep 17 00:00:00 2001
From: william <you@example.com>
Date: Thu, 27 Aug 2026 12:58:16 +0200
Subject: [PATCH] =?UTF-8?q?Panneaux=20d=C3=A9di=C3=A9s=20pour=20"Ajouter?=
 =?UTF-8?q?=20un=20champ"/"Ajouter=20une=20entr=C3=A9e"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La barre en ligne (tous les champs alignés horizontalement) devenait
illisible au-delà d'une poignée de champs — un objet à 10 champs
donnait une ligne de saisie qui débordait largement de l'écran.

Remplacée par un simple bouton "+ Ajouter" qui ouvre un panneau dédié
(déplaçable et redimensionnable, comme les autres) avec un formulaire
VERTICAL — un champ par ligne, étiquette au-dessus, comme un formulaire
normal — plutôt qu'entassé sur une seule ligne. Un panneau "Ajouter un
champ" et un panneau "Ajouter une entrée" par objet, tous deux cachés
par défaut.

Réutilise makeFloatPanelDraggable()/makeFloatPanelResizable() (déjà
génériques, voir commit précédent) — aucun nouveau mécanisme de
glisser-déposer à écrire.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 templates/game_dashboard.html | 220 +++++++++++++++++++++++-----------
 1 file changed, 151 insertions(+), 69 deletions(-)

diff --git a/templates/game_dashboard.html b/templates/game_dashboard.html
index c391cf33..d780eaf8 100644
--- a/templates/game_dashboard.html
+++ b/templates/game_dashboard.html
@@ -296,30 +296,9 @@
 
     <div class="objectPanelTabPanel active" data-optab-panel="fields">
       <div class="dashPanelHeader">
-        <h2>Ajouter un champ</h2>
+        <h2>Champs existants</h2>
+        <button type="button" class="button is-small primary" onclick="openAddFieldPanel({{ d.id }})">+ Ajouter</button>
       </div>
-      <form method="post" action="{{ url_for('object_field_add', slug=game.slug, definition_id=d.id) }}" class="dashCreateBar objectAddFieldBar">
-        <input type="text" name="field_name" placeholder="Nom du champ" required autocomplete="off">
-        <select name="field_type" class="fieldTypeSelect">
-          {% for key, val in field_types.items() %}
-          <option value="{{ key }}">{{ val.label }}</option>
-          {% endfor %}
-        </select>
-        <select name="field_relation" class="relationTarget" style="display:none;">
-          {% for od in existing_definitions %}
-          <option value="{{ od.id }}">{{ od.name }}</option>
-          {% endfor %}
-        </select>
-        <input type="number" step="any" name="field_min" placeholder="Mini" class="boundsTarget" style="display:none;">
-        <input type="number" step="any" name="field_max" placeholder="Maxi" class="boundsTarget" style="display:none;">
-        <select name="field_required">
-          <option value="0">Non obligatoire</option>
-          <option value="1">Obligatoire</option>
-        </select>
-        <button type="submit" class="primary">+ Ajouter</button>
-      </form>
-
-      <h2>Champs existants</h2>
       {% if definition.fields %}
       {% for f in definition.fields %}
       <form method="post" action="{{ url_for('object_field_edit', slug=game.slug, definition_id=d.id, field_id=f.id) }}" id="fieldEditForm{{ f.id }}"></form>
@@ -394,37 +373,12 @@
       </div>
       {% endif %}
       <div class="dashPanelHeader">
-        <h2>Ajouter une entrée</h2>
+        <h2>Données enregistrées</h2>
+        {% if definition.fields %}
+        <button type="button" class="button is-small primary" onclick="openAddEntryPanel({{ d.id }})">+ Ajouter</button>
+        {% endif %}
       </div>
       {% if definition.fields %}
-      <form method="post" action="{{ url_for('data_new', slug=game.slug, definition_id=d.id) }}" class="dashCreateBar">
-        {% for f in definition.fields %}
-        {% set col = f.name|colname %}
-        {% if f.type == 'texte' %}
-        <input type="text" name="{{ col }}" placeholder="{{ f.name }}{{ ' *' if f.required else '' }}" {{ 'required' if f.required else '' }}>
-        {% elif f.type == 'texte_long' %}
-        <textarea name="{{ col }}" placeholder="{{ f.name }}{{ ' *' if f.required else '' }}" rows="1" {{ 'required' if f.required else '' }}></textarea>
-        {% elif f.type == 'nombre_entier' %}
-        <input type="number" step="1" name="{{ col }}" placeholder="{{ f.name }}{{ ' *' if f.required else '' }}" {{ 'required' if f.required else '' }}>
-        {% elif f.type == 'nombre_decimal' %}
-        <input type="number" step="any" name="{{ col }}" placeholder="{{ f.name }}{{ ' *' if f.required else '' }}" {{ 'required' if f.required else '' }}>
-        {% elif f.type == 'booleen' %}
-        <label class="checkbox" style="white-space:nowrap; align-self:center;"><input type="checkbox" name="{{ col }}"> {{ f.name }}</label>
-        {% elif f.type == 'date' %}
-        <input type="date" name="{{ col }}" title="{{ f.name }}" {{ 'required' if f.required else '' }}>
-        {% elif f.type == 'relation' %}
-        <select name="{{ col }}_id" title="{{ f.name }}" {{ 'required' if f.required else '' }}>
-          <option value="">{{ f.name }} : —</option>
-          {% for opt in relation_options_by_definition[d.id].get(f.id, []) %}
-          <option value="{{ opt.id }}">{{ opt.label }}</option>
-          {% endfor %}
-        </select>
-        {% endif %}
-        {% endfor %}
-        <button type="submit" class="primary">+ Ajouter</button>
-      </form>
-
-      <h2>Données enregistrées</h2>
       {% set rows = rows_by_definition[d.id] %}
       {% if rows %}
       {% for r in rows %}
@@ -493,6 +447,107 @@
   </div>
   <div class="floatPanelResizeHandle"></div>
 </div>
+
+<!-- Panneaux "Ajouter" (champ / entrée) de CET objet — déplaçables et
+     redimensionnables comme les autres, ouverts par le bouton "+ Ajouter"
+     du panneau ci-dessus. Formulaire vertical (un champ par ligne,
+     étiquette au-dessus) plutôt que la barre en ligne d'origine : au-delà
+     d'une poignée de champs, une seule ligne devenait illisible (voir
+     capture d'écran fournie par l'utilisateur — 10 champs alignés sur une
+     largeur d'écran normale). -->
+<div class="floatPanel floatPanel--center hidden addFieldPanel" data-definition-id="{{ d.id }}" id="addFieldPanel-{{ d.id }}">
+  <div class="floatPanelHeader">
+    <span class="floatPanelTitle">⋮⋮ Ajouter un champ — {{ definition.name }}</span>
+    <button type="button" class="button is-small" onclick="closeAddFieldPanel({{ d.id }})">✕</button>
+  </div>
+  <div class="floatPanelBody">
+    <form method="post" action="{{ url_for('object_field_add', slug=game.slug, definition_id=d.id) }}">
+      <div class="formField">
+        <label for="new_field_name-{{ d.id }}">Nom du champ</label>
+        <input type="text" id="new_field_name-{{ d.id }}" name="field_name" placeholder="ex. nom, pv, description..." required autocomplete="off">
+      </div>
+      <div class="formField">
+        <label for="new_field_type-{{ d.id }}">Type</label>
+        <select id="new_field_type-{{ d.id }}" name="field_type" class="fieldTypeSelect">
+          {% for key, val in field_types.items() %}
+          <option value="{{ key }}">{{ val.label }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="formField relationTarget" style="display:none;">
+        <label for="new_field_relation-{{ d.id }}">Objet lié</label>
+        <select id="new_field_relation-{{ d.id }}" name="field_relation">
+          {% for od in existing_definitions %}
+          <option value="{{ od.id }}">{{ od.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="fieldRow boundsTarget" style="display:none;">
+        <div class="formField">
+          <label for="new_field_min-{{ d.id }}">Valeur mini</label>
+          <input type="number" step="any" id="new_field_min-{{ d.id }}" name="field_min" placeholder="ex. 0">
+        </div>
+        <div class="formField">
+          <label for="new_field_max-{{ d.id }}">Valeur maxi</label>
+          <input type="number" step="any" id="new_field_max-{{ d.id }}" name="field_max" placeholder="ex. 100">
+        </div>
+      </div>
+      <div class="formField">
+        <label for="new_field_required-{{ d.id }}">Obligatoire ?</label>
+        <select id="new_field_required-{{ d.id }}" name="field_required">
+          <option value="0">Non</option>
+          <option value="1">Oui</option>
+        </select>
+      </div>
+      <div class="actionsRow"><button type="submit" class="primary">+ Ajouter le champ</button></div>
+    </form>
+  </div>
+  <div class="floatPanelResizeHandle"></div>
+</div>
+
+{% if definition.fields %}
+<div class="floatPanel floatPanel--center hidden addEntryPanel" data-definition-id="{{ d.id }}" id="addEntryPanel-{{ d.id }}">
+  <div class="floatPanelHeader">
+    <span class="floatPanelTitle">⋮⋮ Ajouter une entrée — {{ definition.name }}</span>
+    <button type="button" class="button is-small" onclick="closeAddEntryPanel({{ d.id }})">✕</button>
+  </div>
+  <div class="floatPanelBody">
+    <form method="post" action="{{ url_for('data_new', slug=game.slug, definition_id=d.id) }}">
+      {% for f in definition.fields %}
+      {% set col = f.name|colname %}
+      <div class="formField">
+        <label for="new_entry_{{ col }}-{{ d.id }}">{{ f.name }}{% if f.required %} *{% endif %}</label>
+        {% if f.type == 'texte' %}
+        <input type="text" id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}" {{ 'required' if f.required else '' }}>
+        {% elif f.type == 'texte_long' %}
+        <textarea id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}" rows="4" {{ 'required' if f.required else '' }}></textarea>
+        {% elif f.type == 'nombre_entier' %}
+        <input type="number" step="1" id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}" {{ 'required' if f.required else '' }}>
+        {% elif f.type == 'nombre_decimal' %}
+        <input type="number" step="any" id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}" {{ 'required' if f.required else '' }}>
+        {% elif f.type == 'booleen' %}
+        <label class="checkbox"><input type="checkbox" id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}"> Oui</label>
+        {% elif f.type == 'date' %}
+        <input type="date" id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}" {{ 'required' if f.required else '' }}>
+        {% elif f.type == 'relation' %}
+        <select id="new_entry_{{ col }}-{{ d.id }}" name="{{ col }}_id" {{ 'required' if f.required else '' }}>
+          <option value="">—</option>
+          {% for opt in relation_options_by_definition[d.id].get(f.id, []) %}
+          <option value="{{ opt.id }}">{{ opt.label }}</option>
+          {% endfor %}
+        </select>
+        {% if not relation_options_by_definition[d.id].get(f.id) %}
+        <p class="help">Aucune entrée n'existe encore pour l'objet lié.</p>
+        {% endif %}
+        {% endif %}
+      </div>
+      {% endfor %}
+      <div class="actionsRow"><button type="submit" class="primary">+ Ajouter l'entrée</button></div>
+    </form>
+  </div>
+  <div class="floatPanelResizeHandle"></div>
+</div>
+{% endif %}
 {% endfor %}
 
 <template id="fieldRowTemplate">
@@ -630,26 +685,9 @@ function makeFloatPanelResizable(panel, handle) {
 
 // ---------- Panneaux déplaçables "Modifier un objet" (un par objet) ----------
 (function () {
-  var NUMERIC_FIELD_TYPES = ['nombre_entier', 'nombre_decimal'];
   document.querySelectorAll('.objectEditPanel').forEach(function (panel) {
     makeFloatPanelDraggable(panel, panel.querySelector('.floatPanelHeader'));
     makeFloatPanelResizable(panel, panel.querySelector('.floatPanelResizeHandle'));
-
-    // Formulaire "Ajouter un champ" : une ligne fixe (pas de liste
-    // extensible comme dans le panneau "Nouvel objet"), donc pas besoin
-    // d'espace réservé "—" pour garder des colonnes alignées — un simple
-    // masquage suffit ici.
-    var addBar = panel.querySelector('.objectAddFieldBar');
-    var typeSelect = addBar.querySelector('.fieldTypeSelect');
-    var relationTarget = addBar.querySelector('.relationTarget');
-    var boundsTargets = addBar.querySelectorAll('.boundsTarget');
-    function syncAddFieldVisibility() {
-      relationTarget.style.display = typeSelect.value === 'relation' ? '' : 'none';
-      var isNumeric = NUMERIC_FIELD_TYPES.indexOf(typeSelect.value) !== -1;
-      boundsTargets.forEach(function (el) { el.style.display = isNumeric ? '' : 'none'; });
-    }
-    typeSelect.addEventListener('change', syncAddFieldVisibility);
-    syncAddFieldVisibility();
   });
   window.openObjectEditPanel = function (definitionId, subtab) {
     document.querySelectorAll('.objectEditPanel').forEach(function (panel) {
@@ -677,6 +715,50 @@ function makeFloatPanelResizable(panel, handle) {
   if (requestedEdit) openObjectEditPanel(requestedEdit, requestedSubtab);
 })();
 
+// ---------- Panneaux déplaçables "Ajouter un champ"/"Ajouter une entrée" ----------
+// Un panneau par objet et par action (voir game_dashboard.html, ouverts
+// par le bouton "+ Ajouter" du panneau "Modifier un objet") — formulaire
+// vertical, un champ par ligne : au-delà d'une poignée de champs, une
+// seule ligne (l'ancienne barre en ligne) devenait illisible.
+(function () {
+  var NUMERIC_FIELD_TYPES = ['nombre_entier', 'nombre_decimal'];
+  document.querySelectorAll('.addFieldPanel').forEach(function (panel) {
+    makeFloatPanelDraggable(panel, panel.querySelector('.floatPanelHeader'));
+    makeFloatPanelResizable(panel, panel.querySelector('.floatPanelResizeHandle'));
+
+    var typeSelect = panel.querySelector('.fieldTypeSelect');
+    var relationTarget = panel.querySelector('.relationTarget');
+    var boundsTarget = panel.querySelector('.boundsTarget');
+    function syncAddFieldVisibility() {
+      relationTarget.style.display = typeSelect.value === 'relation' ? '' : 'none';
+      boundsTarget.style.display = NUMERIC_FIELD_TYPES.indexOf(typeSelect.value) !== -1 ? '' : 'none';
+    }
+    typeSelect.addEventListener('change', syncAddFieldVisibility);
+    syncAddFieldVisibility();
+  });
+  document.querySelectorAll('.addEntryPanel').forEach(function (panel) {
+    makeFloatPanelDraggable(panel, panel.querySelector('.floatPanelHeader'));
+    makeFloatPanelResizable(panel, panel.querySelector('.floatPanelResizeHandle'));
+  });
+
+  window.openAddFieldPanel = function (definitionId) {
+    var panel = document.querySelector('.addFieldPanel[data-definition-id="' + definitionId + '"]');
+    if (panel) panel.classList.remove('hidden');
+  };
+  window.closeAddFieldPanel = function (definitionId) {
+    var panel = document.querySelector('.addFieldPanel[data-definition-id="' + definitionId + '"]');
+    if (panel) panel.classList.add('hidden');
+  };
+  window.openAddEntryPanel = function (definitionId) {
+    var panel = document.querySelector('.addEntryPanel[data-definition-id="' + definitionId + '"]');
+    if (panel) panel.classList.remove('hidden');
+  };
+  window.closeAddEntryPanel = function (definitionId) {
+    var panel = document.querySelector('.addEntryPanel[data-definition-id="' + definitionId + '"]');
+    if (panel) panel.classList.add('hidden');
+  };
+})();
+
 // Sous-onglets Champs/Données d'UN panneau précis (voir plus haut) — scopé
 // au panneau ancêtre du bouton cliqué, jamais global (plusieurs objets
 // peuvent chacun avoir leurs sous-onglets sur leur propre panneau, en même