Show existing fields as a scrollable table on the object-edit page

Replaces the stacked per-field cards with a compact table (one row per field) for a clearer overview when an object has many fields. The page itself no longer scrolls — only the table body and the left column do, mirroring the screen editor's fixed-viewport layout. Each row stays independently editable/deletable via hidden forms targeted with the HTML form= attribute.
This commit is contained in:
william
2026-08-24 10:28:03 +02:00
parent 2bb0c253f9
commit d8a80b8a8a
2 changed files with 99 additions and 51 deletions
+64 -48
View File
@@ -1,6 +1,7 @@
{% extends "base.html" %}
{% block title %}Modifier {{ definition.name }} — {{ game.name }}{% endblock %}
{% block content_class %}content-wide{% endblock %}
{% block content_class %}content-wide content-objectEdit{% endblock %}
{% block body_class %}objectEditBody{% endblock %}
{% block breadcrumb %}
<a class="crumb" href="{{ url_for('game_dashboard', slug=game.slug) }}">{{ game.name }}</a>
<span class="crumb-sep">/</span>
@@ -82,54 +83,69 @@
<h2>Champs existants</h2>
{% if definition.fields %}
{% for f in definition.fields %}
<div class="card fieldEditCard">
<form method="post" action="{{ url_for('object_field_edit', slug=game.slug, definition_id=definition.id, field_id=f.id) }}">
<div class="fieldRow">
<div>
<label>Nom du champ</label>
<input type="text" name="field_name" value="{{ f.name }}" required>
</div>
<div>
<label>Type</label>
<input type="text" value="{{ field_types.get(f.type, {}).get('label', f.type) }}" disabled>
</div>
</div>
{% if f.type == 'relation' %}
<label>Objet lié</label>
<select name="field_relation">
{% for d in existing_definitions %}
<option value="{{ d.id }}" {{ 'selected' if d.id == f.relation_definition_id else '' }}>{{ d.name }}</option>
{% endfor %}
</select>
{% endif %}
{% if f.type in ('nombre_entier', 'nombre_decimal') %}
<div class="fieldRow">
<div>
<label>Valeur mini (bornage automatique)</label>
<input type="number" step="any" name="field_min" value="{{ f.min_value if f.min_value is not none else '' }}" placeholder="ex. 0">
</div>
<div>
<label>Valeur maxi (bornage automatique)</label>
<input type="number" step="any" name="field_max" value="{{ f.max_value if f.max_value is not none else '' }}" placeholder="ex. 100">
</div>
</div>
<p class="hint">Laisser vide = pas de limite. S'applique à "Donner cette valeur", "Augmenter de..." et "Diminuer de..." dans le graphe de logique.</p>
{% endif %}
<label>Obligatoire ?</label>
<select name="field_required">
<option value="0" {{ 'selected' if not f.required else '' }}>Non</option>
<option value="1" {{ 'selected' if f.required else '' }}>Oui</option>
</select>
<div class="actionsRow fieldEditActions">
<button type="submit">Enregistrer</button>
</div>
</form>
<form method="post" action="{{ url_for('object_field_delete', slug=game.slug, definition_id=definition.id, field_id=f.id) }}"
onsubmit="return confirm('Retirer le champ « {{ f.name }} » ? Les données déjà enregistrées dans ce champ seront perdues.');">
<button type="submit" class="smallBtn danger">🗑️ Retirer ce champ</button>
</form>
</div>
<form method="post" action="{{ url_for('object_field_edit', slug=game.slug, definition_id=definition.id, field_id=f.id) }}" id="fieldEditForm{{ f.id }}"></form>
<form method="post" action="{{ url_for('object_field_delete', slug=game.slug, definition_id=definition.id, field_id=f.id) }}" id="fieldDeleteForm{{ f.id }}"
onsubmit="return confirm('Retirer le champ « {{ f.name }} » ? Les données déjà enregistrées dans ce champ seront perdues.');"></form>
{% endfor %}
<div class="fieldsTableWrap">
<table class="fieldsTable">
<thead>
<tr>
<th>Nom du champ</th>
<th>Type</th>
<th>Objet lié</th>
<th>Mini</th>
<th>Maxi</th>
<th>Obligatoire ?</th>
<th></th>
</tr>
</thead>
<tbody>
{% for f in definition.fields %}
<tr>
<td><input type="text" form="fieldEditForm{{ f.id }}" name="field_name" value="{{ f.name }}" aria-label="Nom du champ « {{ f.name }} »" required></td>
<td>{{ field_types.get(f.type, {}).get('label', f.type) }}</td>
<td>
{% if f.type == 'relation' %}
<select form="fieldEditForm{{ f.id }}" name="field_relation" aria-label="Objet lié pour « {{ f.name }} »">
{% for d in existing_definitions %}
<option value="{{ d.id }}" {{ 'selected' if d.id == f.relation_definition_id else '' }}>{{ d.name }}</option>
{% endfor %}
</select>
{% else %}
<span class="hint">—</span>
{% endif %}
</td>
<td>
{% if f.type in ('nombre_entier', 'nombre_decimal') %}
<input type="number" step="any" form="fieldEditForm{{ f.id }}" name="field_min" value="{{ f.min_value if f.min_value is not none else '' }}" placeholder="ex. 0" aria-label="Valeur mini pour « {{ f.name }} »">
{% else %}
<span class="hint">—</span>
{% endif %}
</td>
<td>
{% if f.type in ('nombre_entier', 'nombre_decimal') %}
<input type="number" step="any" form="fieldEditForm{{ f.id }}" name="field_max" value="{{ f.max_value if f.max_value is not none else '' }}" placeholder="ex. 100" aria-label="Valeur maxi pour « {{ f.name }} »">
{% else %}
<span class="hint">—</span>
{% endif %}
</td>
<td>
<select form="fieldEditForm{{ f.id }}" name="field_required" aria-label="« {{ f.name }} » obligatoire ?">
<option value="0" {{ 'selected' if not f.required else '' }}>Non</option>
<option value="1" {{ 'selected' if f.required else '' }}>Oui</option>
</select>
</td>
<td class="fieldsTableActions">
<button type="submit" form="fieldEditForm{{ f.id }}" class="smallBtn">Enregistrer</button>
<button type="submit" form="fieldDeleteForm{{ f.id }}" class="smallBtn danger">🗑️</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<p class="hint">Mini/Maxi (bornage automatique) : laisser vide = pas de limite. S'applique à "Donner cette valeur", "Augmenter de..." et "Diminuer de..." dans le graphe de logique.</p>
{% else %}
<p class="hint">Aucun champ pour l'instant.</p>
{% endif %}