Dev #2
+19
-2
@@ -78,8 +78,9 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
|
||||
.dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
|
||||
/* ---------- Détail d'une entrée (bouton 👁️) ---------- */
|
||||
/* Contenu de la modale Bulma (.modal/.modal-card, voir data_list.html) —
|
||||
affiche chaque champ en entier, sans troncature. */
|
||||
/* Contenu du panneau de détail (voir openRowDetailPanel() dans
|
||||
game_dashboard.html) — affiche chaque champ en entier, sans troncature,
|
||||
contrairement au tableau dense qui les tronque. */
|
||||
.rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); }
|
||||
.rowDetailField:last-child{ border-bottom:none; }
|
||||
.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
|
||||
@@ -535,3 +536,19 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
|
||||
.dashCreateBar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
|
||||
.dashCreateBar input, .dashCreateBar select{ width:auto; flex:1 1 160px; }
|
||||
.dashDangerZone{ margin-top:28px; }
|
||||
|
||||
/* ---------- Filtre de colonnes (onglet Données, game_dashboard.html) ---------- */
|
||||
/* Menu déroulant compact sous le bouton "🔧 Colonnes" — un objet avec
|
||||
beaucoup de champs rend le tableau illisible, ce menu permet d'en
|
||||
masquer certains (voir toggleDataColumn() : agit directement sur
|
||||
[data-col] plutôt que de reconstruire le tableau). */
|
||||
.columnFilterWrap{ position:relative; display:inline-block; }
|
||||
.columnFilterMenu{
|
||||
position:absolute; top:100%; left:0; margin-top:4px; z-index:70;
|
||||
background:var(--panel); border:1px solid var(--border); border-radius:8px;
|
||||
padding:8px; box-shadow:0 12px 40px rgba(0,0,0,.55);
|
||||
display:flex; flex-direction:column; gap:2px; min-width:180px; max-height:280px; overflow-y:auto;
|
||||
}
|
||||
.columnFilterMenu.hidden{ display:none; }
|
||||
.columnFilterOption{ display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:4px; font-size:12.5px; white-space:nowrap; }
|
||||
.columnFilterOption:hover{ background:var(--panel2); }
|
||||
|
||||
@@ -376,9 +376,19 @@
|
||||
{% endif %}
|
||||
<div class="dashPanelHeader">
|
||||
<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 style="display:flex; gap:6px;">
|
||||
{% if definition.fields %}
|
||||
<div class="columnFilterWrap">
|
||||
<button type="button" class="button is-small" onclick="toggleColumnFilterMenu({{ d.id }})">🔧 Colonnes</button>
|
||||
<div class="columnFilterMenu hidden" id="columnFilterMenu-{{ d.id }}">
|
||||
{% for f in definition.fields %}
|
||||
<label class="checkbox columnFilterOption"><input type="checkbox" checked data-col="field-{{ f.id }}" onchange="toggleDataColumn({{ d.id }}, 'field-{{ f.id }}', this.checked)"> {{ f.name }}</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="button is-small primary" onclick="openAddEntryPanel({{ d.id }})">+ Ajouter</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if definition.fields %}
|
||||
{% set rows = rows_by_definition[d.id] %}
|
||||
@@ -389,17 +399,17 @@
|
||||
onsubmit="return confirm('Supprimer définitivement l\'entrée #{{ r.id }} ?');"></form>
|
||||
{% endfor %}
|
||||
<div class="fieldsTableWrap">
|
||||
<table class="table is-fullwidth is-hoverable dataTable fieldsTable">
|
||||
<table class="table is-fullwidth is-hoverable dataTable fieldsTable" id="dataTable-{{ d.id }}">
|
||||
<thead>
|
||||
<tr><th>#</th>{% for f in definition.fields %}<th>{{ f.name }}</th>{% endfor %}<th></th></tr>
|
||||
<tr><th>#</th>{% for f in definition.fields %}<th data-col="field-{{ f.id }}">{{ f.name }}</th>{% endfor %}<th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in rows %}
|
||||
<tr>
|
||||
<tr data-row-id="{{ r.id }}">
|
||||
<td>{{ r.id }}</td>
|
||||
{% for f in definition.fields %}
|
||||
{% set col = f.name|colname %}
|
||||
<td>
|
||||
<td data-col="field-{{ f.id }}" data-field-label="{{ f.name }}">
|
||||
{% if f.type == 'texte' %}
|
||||
<input class="input is-small" type="text" form="dataEditForm{{ r.id }}" name="{{ col }}" value="{{ r[col] or '' }}">
|
||||
{% elif f.type == 'texte_long' %}
|
||||
@@ -423,6 +433,7 @@
|
||||
</td>
|
||||
{% endfor %}
|
||||
<td class="fieldsTableActions">
|
||||
<button type="button" class="button is-small" title="Voir cette entrée en détail" onclick="openRowDetailPanel({{ d.id }}, {{ r.id }})">👁️</button>
|
||||
<button type="submit" form="dataEditForm{{ r.id }}" class="button is-small">Enregistrer</button>
|
||||
<button type="submit" form="dataDeleteForm{{ r.id }}" class="button is-small is-danger">🗑️</button>
|
||||
</td>
|
||||
@@ -551,6 +562,25 @@
|
||||
</div>
|
||||
<div class="floatPanelResizeHandle"></div>
|
||||
</div>
|
||||
|
||||
<!-- Panneau de détail d'UNE entrée (voir openRowDetailPanel()) — un seul
|
||||
panneau PAR OBJET (pas un par ligne, pour ne jamais alourdir la page
|
||||
même avec beaucoup d'entrées) : son contenu est reconstruit à
|
||||
l'ouverture en lisant directement la ligne correspondante du tableau
|
||||
"Données enregistrées" (valeurs à jour, y compris une modification
|
||||
pas encore enregistrée). Champ par ligne, étiquette bien visible —
|
||||
pensé pour un objet avec beaucoup de colonnes, illisible en tableau
|
||||
serré (voir la barre "🔧 Colonnes" pour l'inverse : cacher des
|
||||
colonnes plutôt que tout regarder en détail). -->
|
||||
<div class="floatPanel floatPanel--center hidden rowDetailPanel" data-definition-id="{{ d.id }}" id="rowDetailPanel-{{ d.id }}">
|
||||
<div class="floatPanelHeader">
|
||||
<span class="floatPanelTitle rowDetailPanelTitle">⋮⋮ Entrée — {{ definition.name }}</span>
|
||||
<button type="button" class="button is-small floatPanelFullscreenBtn" title="Plein écran">⛶</button>
|
||||
<button type="button" class="button is-small" onclick="closeRowDetailPanel({{ d.id }})">✕</button>
|
||||
</div>
|
||||
<div class="floatPanelBody rowDetailPanelBody"></div>
|
||||
<div class="floatPanelResizeHandle"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -814,6 +844,85 @@ function makeFloatPanelFullscreenable(panel, toggleBtn) {
|
||||
};
|
||||
})();
|
||||
|
||||
// ---------- Filtre de colonnes (onglet Données) ----------
|
||||
function toggleColumnFilterMenu(definitionId) {
|
||||
var menu = document.getElementById('columnFilterMenu-' + definitionId);
|
||||
if (!menu) return;
|
||||
var opening = menu.classList.contains('hidden');
|
||||
// Un seul menu de filtre ouvert à la fois, tous objets confondus — évite
|
||||
// d'en laisser traîner un ouvert par-dessus le panneau d'un autre objet.
|
||||
document.querySelectorAll('.columnFilterMenu').forEach(function (m) { m.classList.add('hidden'); });
|
||||
if (opening) menu.classList.remove('hidden');
|
||||
}
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target.closest('.columnFilterWrap')) return;
|
||||
document.querySelectorAll('.columnFilterMenu').forEach(function (m) { m.classList.add('hidden'); });
|
||||
});
|
||||
function toggleDataColumn(definitionId, colKey, visible) {
|
||||
var table = document.getElementById('dataTable-' + definitionId);
|
||||
if (!table) return;
|
||||
table.querySelectorAll('[data-col="' + colKey + '"]').forEach(function (cell) {
|
||||
cell.style.display = visible ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Panneau de détail d'une entrée (un par objet) ----------
|
||||
(function () {
|
||||
document.querySelectorAll('.rowDetailPanel').forEach(function (panel) {
|
||||
makeFloatPanelDraggable(panel, panel.querySelector('.floatPanelHeader'));
|
||||
makeFloatPanelResizable(panel, panel.querySelector('.floatPanelResizeHandle'));
|
||||
makeFloatPanelFullscreenable(panel, panel.querySelector('.floatPanelFullscreenBtn'));
|
||||
});
|
||||
|
||||
// Reconstruit le contenu du panneau à chaque ouverture, en lisant
|
||||
// directement la ligne correspondante du tableau "Données enregistrées"
|
||||
// déjà affiché — pas d'aller-retour serveur, et ça reflète une
|
||||
// modification tout juste saisie mais pas encore "Enregistrer"ée.
|
||||
window.openRowDetailPanel = function (definitionId, rowId) {
|
||||
var panel = document.querySelector('.rowDetailPanel[data-definition-id="' + definitionId + '"]');
|
||||
var table = document.getElementById('dataTable-' + definitionId);
|
||||
if (!panel || !table) return;
|
||||
var row = table.querySelector('tr[data-row-id="' + rowId + '"]');
|
||||
if (!row) return;
|
||||
|
||||
var body = panel.querySelector('.rowDetailPanelBody');
|
||||
body.innerHTML = '';
|
||||
var idField = document.createElement('div');
|
||||
idField.className = 'rowDetailField';
|
||||
idField.innerHTML = '<div class="rowDetailLabel">#</div><div class="rowDetailValue">' + rowId + '</div>';
|
||||
body.appendChild(idField);
|
||||
|
||||
row.querySelectorAll('td[data-field-label]').forEach(function (cell) {
|
||||
var label = cell.dataset.fieldLabel;
|
||||
var control = cell.querySelector('input, textarea, select');
|
||||
var value = '—';
|
||||
if (control) {
|
||||
if (control.type === 'checkbox') value = control.checked ? 'Oui' : 'Non';
|
||||
else if (control.tagName === 'SELECT') value = control.options[control.selectedIndex] ? control.options[control.selectedIndex].text : '—';
|
||||
else value = control.value || '—';
|
||||
}
|
||||
var field = document.createElement('div');
|
||||
field.className = 'rowDetailField';
|
||||
var labelEl = document.createElement('div');
|
||||
labelEl.className = 'rowDetailLabel';
|
||||
labelEl.textContent = label;
|
||||
var valueEl = document.createElement('div');
|
||||
valueEl.className = 'rowDetailValue';
|
||||
valueEl.textContent = value;
|
||||
field.appendChild(labelEl);
|
||||
field.appendChild(valueEl);
|
||||
body.appendChild(field);
|
||||
});
|
||||
|
||||
panel.classList.remove('hidden');
|
||||
panel._fsToggle.enter();
|
||||
};
|
||||
window.closeRowDetailPanel = function (definitionId) {
|
||||
var panel = document.querySelector('.rowDetailPanel[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
|
||||
|
||||
Reference in New Issue
Block a user