Roland/Assetmanager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

table optimization (filtering, resizing and settings saved in user settings

Browse Source
This commit is contained in:
Roland
2026-08-12 23:14:21 +02:00
parent e0175ab48a
commit 0fb18ae4f7
24 changed files with 991 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/assets.html
+25 -4
View File
@@ -136,12 +136,12 @@
{% set has_name = fields|selectattr('field_name', 'equalto', 'name')|list|length > 0 %}
{% if not has_name %}<th draggable="true" data-field="name" data-column-width="220" data-label="{{ t('field.name', 'Bezeichnung')|e }}" style="width:220px;min-width:220px;max-width:220px">{{ t('field.name', 'Bezeichnung') }}</th>{% endif %}
{% if not selected %}<th draggable="true" data-field="category" data-column-width="180" data-label="{{ t('common.category', 'Kategorie')|e }}" style="width:180px;min-width:180px;max-width:180px">{{ t('common.category', 'Kategorie') }}</th>{% endif %}
{% for f in fields %}{% set list_width = f.definition.list_width if f.definition and f.definition.list_width else (220 if f.field_name == 'name' else 180) %}<th draggable="true" data-field="{{ f.field_name }}" data-column-width="{{ list_width }}" data-label="{{ f.label|e }}" style="width:{{ list_width }}px;min-width:{{ list_width }}px;max-width:{{ list_width }}px">{{ f.label }}</th>{% endfor %}
{% for f in fields %}{% set list_width = f.definition.list_width if f.definition and f.definition.list_width else (220 if f.field_name == 'name' else 180) %}<th draggable="true" data-field="{{ f.field_name }}" data-column-width="{{ list_width }}" data-label="{{ f.label|e }}" data-filter-type="{{ f.definition.data_type if f.definition else '' }}" style="width:{{ list_width }}px;min-width:{{ list_width }}px;max-width:{{ list_width }}px">{{ f.label }}</th>{% endfor %}
{% if job_filter %}
<th data-field="job_filter_status" data-label="{{ t('assets.job_filter.status', 'Jobstatus')|e }}" style="width:180px;min-width:180px;max-width:180px">{{ t('assets.job_filter.status', 'Jobstatus') }}</th>
<th data-field="job_filter_last_execution" data-label="{{ t('assets.job_filter.last_execution', 'Letzte Ausführung')|e }}" style="width:175px;min-width:175px;max-width:175px">{{ t('assets.job_filter.last_execution', 'Letzte Ausführung') }}</th>
<th data-field="job_filter_last_success" data-label="{{ t('assets.job_filter.last_success', 'Letzter Erfolg')|e }}" style="width:175px;min-width:175px;max-width:175px">{{ t('assets.job_filter.last_success', 'Letzter Erfolg') }}</th>
<th data-field="job_filter_revision" data-label="{{ t('assets.job_filter.revision', 'Revision')|e }}" style="width:100px;min-width:100px;max-width:100px">{{ t('assets.job_filter.revision', 'Revision') }}</th>
<th data-field="job_filter_last_execution" data-filter-type="datetime" data-label="{{ t('assets.job_filter.last_execution', 'Letzte Ausführung')|e }}" style="width:175px;min-width:175px;max-width:175px">{{ t('assets.job_filter.last_execution', 'Letzte Ausführung') }}</th>
<th data-field="job_filter_last_success" data-filter-type="datetime" data-label="{{ t('assets.job_filter.last_success', 'Letzter Erfolg')|e }}" style="width:175px;min-width:175px;max-width:175px">{{ t('assets.job_filter.last_success', 'Letzter Erfolg') }}</th>
<th data-field="job_filter_revision" data-filter-type="integer" data-label="{{ t('assets.job_filter.revision', 'Revision')|e }}" style="width:100px;min-width:100px;max-width:100px">{{ t('assets.job_filter.revision', 'Revision') }}</th>
{% endif %}
<th data-field="mesh_presence" data-label="{{ t('presence.title')|e }}" style="width:125px;min-width:125px;max-width:125px">{{ t('presence.title') }}</th>
<th data-no-sort="1" data-no-filter="1" class="actions-column">{{ t('common.actions', 'Aktionen') }}</th>
@@ -371,6 +371,23 @@
});
headerRow.insertBefore(headerFragment, headerActions);
// Keep the generated filter row in exactly the same field order. It is
// created by table-tools.js after the initial page setup, so this matters
// especially when the user reorders a column interactively afterwards.
const filterRow = table.tHead.querySelector('tr[data-table-filter-row="1"]');
if (filterRow) {
const filterActions = filterRow.lastElementChild;
const filterFragment = document.createDocumentFragment();
valid.forEach(field => {
const cell = filterRow.querySelector(`th[data-field="${CSS.escape(field)}"]`);
if (cell) filterFragment.appendChild(cell);
});
if (filterActions) filterRow.insertBefore(filterFragment, filterActions);
[...filterRow.cells].forEach((cell, index) => {
cell.dataset.columnIndex = String(index);
});
}
[...table.tBodies[0].rows].forEach(row => {
const actions = row.lastElementChild;
const fragment = document.createDocumentFragment();
@@ -397,6 +414,10 @@
order.splice(order.indexOf(dragged), 1);
order.splice(order.indexOf(target), 0, dragged);
applyOrder(order);
// Reapply widths by field after the DOM order changed. Resizer handlers
// use the header's current cellIndex, so the visible separator and the
// resized data cells stay aligned after drag & drop.
table.assetApplyStoredColumnWidths?.();
window.AssetBrowserState?.set(key, JSON.stringify(order));
window.dispatchEvent(new Event('asset-table-columns-changed'));
});