feat(web): UI compact Trimiteri + bara bulk contextuala + fix buton "+" editor (PRD 5.22)
Trimiteri desktop = tabel grid cu header, un rand per trimitere: status = bulina cu tooltip, mediu = litera T/P, multi-cod = primul cod + badge +N, sub-linie de eroare cu textul brut RAR doar pe error/needs_data. Mobil: 2 linii prin grid-areas, fara header. Actiunile bulk apar doar la selectie (bara contextuala cu contor + texte explicite). Mapari: exemplu concret in loc de descriere la Reguli automate. Fix buton "+" chips (nu facea nimic, fara eroare): hx-disabled-elt="find button" mostenit de la form-ul parinte crapa htmx inainte de request -> hx-disabled-elt="this" explicit pe butoanele chips; separat, no-op-urile silentioase din post_form_chips au acum mesaje (cod invalid/duplicat) si confirmare cu chip evidentiat la succes. Suita: 1622 passed. Verify E2E in browser (desktop 1280 + mobil 390). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
@@ -60,45 +60,70 @@
|
||||
hx-disinherit="hx-confirm"
|
||||
style="margin:0;">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
<div style="display:flex; justify-content:flex-end; align-items:center;
|
||||
gap:6px; margin-bottom:8px; flex-wrap:wrap;">
|
||||
{# Bulk-fix: input cod + buton aplica #}
|
||||
|
||||
{# Bara contextuala bulk (5.22): randata inactiva (ascunsa prin CSS), afisata de
|
||||
JS (base.html) cand >= 1 checkbox e bifat. Contoarele .bulk-n / .bulk-n-txt
|
||||
sunt actualizate client-side. Endpoint-urile si CSRF raman neschimbate;
|
||||
"Sterge" pastreaza hx-confirm-ul form-ului, "Aplica" e exclus (hx-disinherit). #}
|
||||
<div id="bulk-bar" class="bulk-bar" role="toolbar" aria-label="Actiuni pe randurile selectate">
|
||||
<span style="font-weight:700;"><span class="bulk-n">0</span> selectate</span>
|
||||
<span style="color:var(--muted);" aria-hidden="true">·</span>
|
||||
<input type="text" name="cod_prestatie" id="bulk-fix-cod"
|
||||
placeholder="Cod RAR (ex: OE-1)"
|
||||
autocomplete="off" autocapitalize="characters"
|
||||
style="width:120px; font-size:12px; padding:3px 7px;
|
||||
border:1px solid var(--line); border-radius:5px;
|
||||
background:var(--card2); color:var(--ink);"
|
||||
background:var(--card2); color:var(--ink); font-family:var(--font-mono);"
|
||||
aria-label="Cod RAR de aplicat la randurile selectate">
|
||||
<button type="button"
|
||||
hx-post="/trimiteri/bulk-fix"
|
||||
hx-target="#submissions-wrap"
|
||||
hx-swap="innerHTML"
|
||||
style="background:var(--card); color:var(--accent); border-color:var(--accent);
|
||||
font-size:13px; padding:4px 10px; border-radius:5px; cursor:pointer;"
|
||||
style="background:var(--card); color:var(--accent); border:1px solid var(--accent);
|
||||
font-size:12.5px; padding:4px 10px; border-radius:5px; cursor:pointer;"
|
||||
aria-label="Aplica codul RAR la randurile blocate selectate">
|
||||
Aplica cod
|
||||
Aplica acest cod la <span class="bulk-n">0</span> <span class="bulk-n-txt">randuri</span>
|
||||
</button>
|
||||
{# Separator vizual #}
|
||||
<span style="color:var(--muted); font-size:11px; padding:0 2px;" aria-hidden="true">|</span>
|
||||
{# Bulk-delete: pastreaza exact comportamentul existent #}
|
||||
<button type="submit" id="bulk-sterge-btn"
|
||||
style="background:var(--card); color:var(--err); border-color:var(--err);
|
||||
font-size:13px; padding:4px 10px; border-radius:5px; cursor:pointer;">
|
||||
Sterge selectate
|
||||
style="background:var(--card); color:var(--err); border:1px solid var(--err);
|
||||
font-size:12.5px; padding:4px 10px; border-radius:5px; cursor:pointer;">
|
||||
Sterge <span class="bulk-n">0</span> <span class="bulk-n-txt">randuri</span>
|
||||
</button>
|
||||
<button type="button" id="bulk-deselect"
|
||||
style="margin-left:auto; background:none; border:none; color:var(--muted);
|
||||
cursor:pointer; text-decoration:underline; font-size:12px;">
|
||||
Deselecteaza
|
||||
</button>
|
||||
</div>
|
||||
<div class="bulk-hint">
|
||||
Aplica codul RAR doar operatiilor fara cod din randurile selectate, apoi le repune in coada.
|
||||
</div>
|
||||
|
||||
{# Lista slim trimiteri.
|
||||
Inlocuieste tabelul cu randuri compacte: VIN mono + operatie·ora + pill.
|
||||
Nr. inmatriculare, data prestatie si nr. prezentare RAR raman accesibile
|
||||
pe linia meta discreta (linia 3) si in modalul de detaliu. #}
|
||||
{# Tabel compact trimiteri (grid CSS, PRD 5.22).
|
||||
Desktop: un rand per trimitere sub un header de coloane; status = bulina cu
|
||||
tooltip, mediu = litera T/P, multi-cod = primul cod + badge +N.
|
||||
Mobil (max-width:767px): header ascuns, randul revine la 2 linii
|
||||
(placuta / cod·operatie·data) cu litera + bulina in dreapta. #}
|
||||
<ul class="lista-trimiteri-slim" role="list"
|
||||
aria-label="Lista trimiteri">
|
||||
|
||||
{# Header de coloane — doar desktop (CSS); numele starii/mediului stau aici,
|
||||
celulele raman semnale compacte (bulina, litera). #}
|
||||
<li class="trimiteri-head" aria-hidden="true">
|
||||
<span></span>
|
||||
<span>Vehicul</span>
|
||||
<span>Cod RAR</span>
|
||||
<span>Operatie</span>
|
||||
<span>Data</span>
|
||||
<span class="th-c">Status</span>
|
||||
<span class="th-c">Mediu</span>
|
||||
<span></span>
|
||||
</li>
|
||||
|
||||
{% for r in rows %}
|
||||
{# Randul slim: stanga = VIN mono scurt (L1) + operatie·ora muted (L2) + meta (L3);
|
||||
dreapta = pill de stare. Click deschide modalul global (#detaliu-modal-body).
|
||||
Clickabil/focusabil (role=button); Enter/Space deschid modalul (JS in base.html). #}
|
||||
{# Rand clickabil (role=button, Enter/Space in JS din base.html) — deschide
|
||||
modalul global de detaliu (#detaliu-modal-body). #}
|
||||
<li id="trimitere-row-{{ r.id }}"
|
||||
class="trimitere-slim"
|
||||
data-detaliu-id="{{ r.id }}"
|
||||
@@ -110,66 +135,61 @@
|
||||
style="cursor:pointer;"
|
||||
title="Click pentru detaliul complet">
|
||||
|
||||
{# Zona checkbox — nu declanseaza modalul (stopPropagation).
|
||||
Vizibila DOAR pe randurile gestionabile (error/needs_data/needs_mapping).
|
||||
Latimea fixa previne reflow la prezenta/absenta checkbox-ului. #}
|
||||
<div style="flex:0 0 22px; display:flex; align-items:center;" onclick="event.stopPropagation();">
|
||||
{# Checkbox — nu declanseaza modalul (stopPropagation). Vizibil DOAR pe
|
||||
randurile gestionabile; latimea fixa previne reflow. #}
|
||||
<div class="c-check" onclick="event.stopPropagation();">
|
||||
{% if r.gestionabil %}
|
||||
<input type="checkbox" name="submission_id" value="{{ r.id }}"
|
||||
aria-label="Selecteaza trimiterea #{{ r.id }} pentru stergere">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Bloc text principal — stanga, ocupa spatiul ramas. Rand de 2 linii (spec 5.16):
|
||||
L1 = placuta (identificator primar); L2 = cod RAR · operatie · data prestatie. #}
|
||||
<div style="flex:1 1 auto; min-width:0;">
|
||||
{# Vehicul: placuta (identificator primar); fallback VIN scurt / 'fara numar'
|
||||
(niciodata em-dash izolat). #}
|
||||
{% if r.prez.vehicul_nr and r.prez.vehicul_nr != '—' %}
|
||||
<div class="slim-vin">{{ r.prez.vehicul_nr }}</div>
|
||||
{% elif r.prez.vin_scurt and r.prez.vin_scurt != '—' %}
|
||||
<div class="slim-vin muted">{{ r.prez.vin_scurt }}</div>
|
||||
{% else %}
|
||||
<div class="slim-vin muted">fara numar</div>
|
||||
{% endif %}
|
||||
|
||||
{# Linia 1: nr. inmatriculare (placuta) — identificatorul primar pe care il
|
||||
scaneaza operatorul. .slim-vin reumplut (acelasi nume de clasa, churn minim).
|
||||
Fallback cand placuta lipseste ('—'): VIN scurt, apoi mesaj neutru
|
||||
(nu randa em-dash izolat ca identificator). #}
|
||||
{% if r.prez.vehicul_nr and r.prez.vehicul_nr != '—' %}
|
||||
<div class="slim-vin">{{ r.prez.vehicul_nr }}</div>
|
||||
{% elif r.prez.vin_scurt and r.prez.vin_scurt != '—' %}
|
||||
<div class="slim-vin muted">{{ r.prez.vin_scurt }}</div>
|
||||
{% else %}
|
||||
<div class="slim-vin muted">fara numar</div>
|
||||
{% endif %}
|
||||
|
||||
{# Linia 2: cod RAR (sau 'nemapat') · operatie (ink, ellipsis) · data prestatie.
|
||||
Separatorul "·" e injectat prin CSS intre celule. Operatia primeste ellipsis
|
||||
ca randul sa NU treaca pe a 3-a linie nici la 390px.
|
||||
VIN integral, #id_prezentare si secundele traiesc in modalul de detaliu. #}
|
||||
<div class="slim-meta slim-rand2">
|
||||
{% if r.prez.cod_rar and r.prez.cod_rar != '—' %}
|
||||
<span class="cod-rar-cod">{{ r.prez.cod_rar }}</span>
|
||||
{# Pe desktop .c-meta e display:contents (copiii devin celule de grid);
|
||||
pe mobil e linia 2 (flex) cu separatoare "·" din CSS. #}
|
||||
<div class="c-meta">
|
||||
{% set _cods = r.prez.coduri_rar or [] %}
|
||||
<span class="c-cod">
|
||||
{% if _cods %}
|
||||
<span class="cod-rar-cod">{{ _cods[0] }}</span>
|
||||
{%- if _cods | length > 1 -%}
|
||||
<span class="cod-plus" title="{{ _cods | join(' · ') }}">+{{ _cods | length - 1 }}</span>
|
||||
{%- endif %}
|
||||
{% else %}
|
||||
<span class="cod-rar-cod cod-rar-sub muted">nemapat</span>
|
||||
{% endif %}
|
||||
<span class="slim-op">{{ r.prez.operatie }}</span>
|
||||
{% if r.prez.data_prestatie and r.prez.data_prestatie != '—' %}
|
||||
<span class="slim-data muted">{{ r.prez.data_prestatie }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Micro-linie umana a problemei — text mic s-error, DOAR pe stari de problema
|
||||
(loud-on-exception D6). Randul normal/finalizat ramane strict 2 linii.
|
||||
Token tipografic --fs-xs (>=12px, scala 5.16). #}
|
||||
{% if r.eticheta_problema and r.eticheta_problema != r.stare_scurt and r.eticheta_problema != r.stare_text %}
|
||||
<div class="eticheta-problema s-error">{{ r.eticheta_problema }}</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="c-op">{{ r.prez.operatie }}</span>
|
||||
<span class="c-data">{% if r.prez.data_prestatie and r.prez.data_prestatie != '—' %}{{ r.prez.data_prestatie }}{% endif %}</span>
|
||||
</div>
|
||||
|
||||
{# Zona dreapta: pill stare + badge mediu RAR + buton Trimite #}
|
||||
<div style="flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; white-space:nowrap;">
|
||||
<span class="pill {{ r.stare_css }}" title="{{ r.stare_text }}">{{ r.stare_scurt }}</span>
|
||||
{# Status: doar bulina colorata; numele complet in title + aria-label. #}
|
||||
<span class="c-status">
|
||||
<span class="dot-stare {{ r.stare_css }}" title="{{ r.stare_text }}"
|
||||
role="img" aria-label="{{ r.stare_text }}"></span>
|
||||
</span>
|
||||
|
||||
{# Mediu: litera compacta — P fill atentie (productie, risc L.142),
|
||||
T contur discret (testare). Numele complet in title. #}
|
||||
<span class="c-env">
|
||||
{% if r.rar_env %}
|
||||
{% set _eb = eticheta_env(r.rar_env) %}
|
||||
<span class="{{ _eb[1] }}">{{ _eb[0] }}</span>
|
||||
<span class="env-l {{ 'env-l-prod' if 'prod' in _eb[1] else 'env-l-test' }}"
|
||||
title="{{ _eb[0] }}" role="img" aria-label="Mediu RAR: {{ _eb[0] }}">{{ _eb[0][0] }}</span>
|
||||
{% endif %}
|
||||
{# Buton "Trimite" DOAR pe randurile tinute (queued AND held=1).
|
||||
Afordanta dedicata cu stopPropagation (randul e role=button) — NU declanseaza modalul
|
||||
de detaliu. Confirmare 1-linie prin hx-confirm (per rand); ireversibilitate in microcopy. #}
|
||||
</span>
|
||||
|
||||
{# Actiuni: buton "Trimite" DOAR pe randurile tinute (queued AND held=1). #}
|
||||
<div class="c-act">
|
||||
{% if r.tinut %}
|
||||
<form hx-post="/trimitere/{{ r.id }}/trimite-acum"
|
||||
hx-target="#submissions-wrap" hx-swap="innerHTML"
|
||||
@@ -180,7 +200,7 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
<button type="submit" class="btn-trimite-rand"
|
||||
onclick="event.stopPropagation();"
|
||||
style="margin-top:2px; padding:2px 10px; font-size:var(--fs-xs);
|
||||
style="padding:2px 10px; font-size:var(--fs-xs);
|
||||
border:1px solid var(--accent); border-radius:99px; cursor:pointer;
|
||||
background:var(--accent); color:#fff; font-weight:600;">
|
||||
Trimite
|
||||
@@ -188,6 +208,12 @@
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Sub-linie de eroare: textul BRUT (mesaj RAR/validare), compact, un rand,
|
||||
doar pe error/needs_data (eroare_bruta e "" in rest). #}
|
||||
{% if r.eroare_bruta %}
|
||||
<div class="c-err" title="{{ r.eroare_bruta }}">{{ r.eroare_bruta }}</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user