filipriec/komp_ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better UX/UI

Browse Source
This commit is contained in:
Priec
2026-08-17 21:35:59 +02:00
parent e13447e3d6
commit 9b2b429dc6
12 changed files with 282 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/templates/pages/admin/table_definition/presentation_panel.html
View File

@@ -5,54 +5,76 @@
{% if let Some(detail) = page.detail %}
{# One form per column, each carrying its own column id: an alias is never
posted apart from the column it was typed into. #}
<section class="panel">
<div class="presentation-layout">
<section class="panel presentation-panel">
<h2>{{ nav.tr("td-rename-column") }}</h2>
<p class="hint">{{ nav.tr("td-rename-hint") }}</p>
<div class="alias-list">
<div class="alias-list-head" aria-hidden="true">
<span>{{ nav.tr("td-current-alias") }}</span>
<span></span>
<span>{{ nav.tr("td-new-name") }}</span>
<span></span>
</div>
{% for column in detail.columns %}
{% if column.renameable %}
<form hx-post="/admin/tables/presentation/alias"
<form class="alias-row" hx-post="/admin/tables/presentation/alias"
hx-target="#table-panel" hx-swap="innerHTML">
<input type="hidden" name="profile" value="{{ page.selection.profile }}">
<input type="hidden" name="table" value="{{ page.selection.table }}">
<input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
<input type="hidden" name="column_id" value="{{ column.column_id }}">
<div class="form-grid">
<label>{{ nav.tr("td-column-label") }}
<input name="alias" value="{{ column.name }}">
</label>
<div class="form-actions">
<button type="submit">{{ nav.tr("td-rename-button") }}</button>
</div>
</div>
<code class="alias-current">{{ column.name }}</code>
<span class="alias-arrow" aria-hidden="true">→</span>
<input name="alias" aria-label="{{ nav.tr("td-new-name") }}: {{ column.name }}"
placeholder="{{ nav.tr("td-new-name") }}" required>
<button type="submit">{{ nav.tr("td-rename-button") }}</button>
</form>
{% else %}
<p class="hint"><code>{{ column.name }}</code> — {{ nav.tr("td-alias-locked") }}</p>
<div class="alias-row alias-row-locked">
<code class="alias-current">{{ column.name }}</code>
<span class="locked-label">{{ nav.tr("td-alias-locked") }}</span>
</div>
{% endif %}
{% endfor %}
</div>
</section>
{# The order forms carry no alias at all, so moving a column cannot rename
one. The names below are labels, not inputs. #}
<section class="panel">
{# Ordering is staged in the browser and submitted as one id-only form.
Aliases are still absent, so saving an order cannot rename anything. #}
<section class="panel presentation-panel">
<h2>{{ nav.tr("td-order-heading") }}</h2>
<p class="hint">{{ nav.tr("td-order-hint") }}</p>
<ol class="column-order">
{% for column in detail.columns %}
<li>
<code>{{ column.name }}</code>
<form hx-post="/admin/tables/presentation/order"
hx-target="#table-panel" hx-swap="innerHTML">
<input type="hidden" name="profile" value="{{ page.selection.profile }}">
<input type="hidden" name="table" value="{{ page.selection.table }}">
<input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
<input type="hidden" name="column_id" value="{{ column.column_id }}">
<button type="submit" name="direction" value="up" {% if loop.first %}disabled{% endif %}>↑</button>
<button type="submit" name="direction" value="down" {% if loop.last %}disabled{% endif %}>↓</button>
</form>
</li>
{% endfor %}
</ol>
<form class="order-editor" data-order-editor
data-clean-text="{{ nav.tr("td-order-clean") }}"
data-dirty-text="{{ nav.tr("td-order-unsaved") }}"
hx-post="/admin/tables/presentation/order"
hx-target="#table-panel" hx-swap="innerHTML">
<input type="hidden" name="profile" value="{{ page.selection.profile }}">
<input type="hidden" name="table" value="{{ page.selection.table }}">
<input type="hidden" name="expected_row_version" value="{{ detail.row_version }}">
<ol class="column-order" data-order-list>
{% for column in detail.columns %}
<li data-order-item data-column-id="{{ column.column_id }}">
<input type="hidden" name="column_ids" value="{{ column.column_id }}">
<button class="drag-handle" type="button" data-drag-handle
aria-label="{{ nav.tr("td-drag-column") }}: {{ column.name }}"
title="{{ nav.tr("td-drag-column") }}">
<span aria-hidden="true">⠿</span>
</button>
<span class="order-position" aria-hidden="true">{{ loop.index }}</span>
<code class="order-name">{{ column.name }}</code>
</li>
{% endfor %}
</ol>
<div class="order-actions">
<span class="order-status" data-order-status aria-live="polite">{{ nav.tr("td-order-clean") }}</span>
<button class="secondary" type="button" data-order-reset disabled>{{ nav.tr("td-order-reset") }}</button>
<button type="submit" data-order-save disabled>{{ nav.tr("td-order-save") }}</button>
</div>
</form>
</section>
</div>
{% endif %}
{% endif %}