8d4ff3400e
Dogfood pe import + Trimiteri (mobil/tableta <1024px), pur CSS + markup, backend
trimitere neatins:
- Card compact real pentru .tabel-trimiteri (preview + Trimiteri): vehicul=titlu,
stare=pill dreapta-sus, operatie+cod, meta data/km muted, nota mica. Inlocuieste
stiva generica eticheta+valoare (carduri de ~450px -> ~135px). Anuleaza regula
desktop tr.trimitere-row > td{padding:11px} in blocul compact.
- FIX editare preview: OOB swap pe <tr> esua tacit in htmx 1.9 (un <tr> brut se
pierde la parsarea unui fragment fara context de tabel) -> randul ramanea cu
starea veche dupa salvare. Inlocuit cu reload complet al preview-ului prin
HX-Trigger:reincarcaPreview + detalii randSalvat. /editeaza si /confirma-review
folosesc helper-ul _raspuns_rand_salvat.
- Feedback post-salvare: toast global "Randul N actualizat · <stare>" + scroll +
flash pe randul actualizat (base.html window.arataToast + listener randSalvat).
- Modal editare: Salveaza + Anuleaza pe acelasi rand (sistem .act): desktop text,
mobil doua iconite Lucide 44px alaturate (save/x). Macro icon('x') + .act-primary.
- Randuri deja-trimise/duplicate colapsate implicit in preview + toggle "Arata N".
- Select "Operatii de mapat" full-width pe mobil (nu mai iese din viewport).
- Bara de filtre Trimiteri adaptata mobil: pills pe banda cu scroll orizontal,
cautare vehicul proeminenta (nu 8 butoane full-width stivuite).
- Nota preview = culoarea camp-fix (accent) ca sa atraga atentia; hint-urile
camp-fix per-camp scoase (campul Note e self-explanatory).
- Confirmare trimitere: scos campul email (Declarant); text mai clar
("Confirma numarul din N gata de trimis"). Backend confirmed_by ramane optional.
Teste: contractul OOB (rupt in browser) inlocuit cu noul contract
(reincarcaPreview + randSalvat) in test_web_preview_edit / test_preview_edit_ui /
test_import_review. Suita: 992 passed (exclus live).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
306 lines
14 KiB
HTML
306 lines
14 KiB
HTML
{% import '_macros.html' as ui %}
|
|
{# reincarcaPreview (emis de /editeaza si /confirma-review prin HX-Trigger): preview-ul
|
|
se reincarca COMPLET (rand + contoare + colaps deja-trimise corecte) in loc de OOB swap
|
|
pe <tr> (fragil in htmx 1.9). Evidentierea + toast-ul randului salvat: base.html. #}
|
|
<div id="import-section"
|
|
hx-get="/_import/{{ import_id }}/preview"
|
|
hx-trigger="reincarcaPreview from:body"
|
|
hx-target="#import-section"
|
|
hx-swap="outerHTML">
|
|
{% set pas = 3 %}{% include '_stepper.html' %}
|
|
<div class="card">
|
|
<div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
|
|
<h2 style="font-size:15px; margin:0;">
|
|
Preview —
|
|
<span class="muted" style="font-weight:400;">{{ filename or ("import #" ~ import_id) }}</span>
|
|
</h2>
|
|
<span class="muted" style="margin-left:auto; font-size:13px;">{{ total }} randuri</span>
|
|
</div>
|
|
|
|
{% if message %}
|
|
<div class="flash" style="{% if error %}border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card));{% endif %} margin-bottom:12px;"
|
|
{% if error %}role="alert"{% endif %}>
|
|
{{ message }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Rezumat stari cu etichete umane cu majuscula (id stabil pentru OOB swap) -->
|
|
{% set status_labels = [
|
|
('ok', 'Gata de trimis'),
|
|
('needs_review', 'Verifica valori'),
|
|
('needs_mapping', 'Cod RAR lipsa'),
|
|
('needs_data', 'Date incomplete'),
|
|
('already_sent', 'Deja trimis'),
|
|
('duplicate_in_file','Duplicat in fisier'),
|
|
] %}
|
|
<div id="preview-rezumat" style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
|
|
{% for status_key, label in status_labels %}
|
|
{%- set cnt = summary.get(status_key, 0) -%}
|
|
{% if cnt > 0 %}
|
|
<span class="pill s-{{ status_key }}">{{ cnt }} {{ label | lower }}</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Butoane filtrare stare — text uman, data-filter pastreaza codul tehnic -->
|
|
<div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;" role="group"
|
|
aria-label="Filtrare dupa stare">
|
|
<button type="button" class="filter-btn" data-filter="all"
|
|
style="min-height:36px; font-size:13px; padding:4px 12px;">
|
|
Toate ({{ total }})
|
|
</button>
|
|
{% for status_key, label in status_labels %}
|
|
{%- set cnt = summary.get(status_key, 0) -%}
|
|
{% if cnt > 0 %}
|
|
<button type="button" class="filter-btn" data-filter="{{ status_key }}"
|
|
style="min-height:36px; font-size:13px; padding:4px 12px;
|
|
background:transparent; border-color:var(--line); color:var(--ink);">
|
|
{{ label }} ({{ cnt }})
|
|
</button>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Panou inline: operatii fara cod RAR, mapabile in flux (fara re-upload).
|
|
US-004: un singur <form> cu un select per operatie + un singur buton Salveaza. -->
|
|
{% if unmapped_ops %}
|
|
<div class="card" style="border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); margin-bottom:14px;">
|
|
<h3 style="font-size:14px; margin:0 0 6px;">Operatii de mapat la cod RAR</h3>
|
|
<p class="muted" style="margin:0 0 12px; font-size:13px;">
|
|
Aceste operatii din fisier nu au inca un cod RAR. Alege codul (sugestia e
|
|
preselectata) si salveaza — randurile blocate trec automat in
|
|
<span class="s-ok">ok</span> si maparea se retine pentru fisierele viitoare.
|
|
</p>
|
|
<form hx-post="/_import/{{ import_id }}/mapare-operatii"
|
|
hx-target="#import-section" hx-swap="outerHTML">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
|
|
{% for e in unmapped_ops %}
|
|
{%- set top = e.suggestions[0] if e.suggestions else None -%}
|
|
{%- set preselect = top.cod_prestatie if (top and top.score >= 60) else '' -%}
|
|
<div class="maprow" style="align-items:flex-end; margin-bottom:10px;">
|
|
<input type="hidden" name="cod_op_service" value="{{ e.cod_op_service }}">
|
|
<div class="mapcol grow">
|
|
<div><strong>{{ e.cod_op_service }}</strong>
|
|
<span class="pill" title="randuri blocate">{{ e.blocked }} randuri</span></div>
|
|
{% if e.denumire and e.denumire != e.cod_op_service %}
|
|
<div class="muted">{{ e.denumire }}</div>
|
|
{% endif %}
|
|
{% if e.suggestions %}
|
|
<div class="muted" style="font-size:12px; margin-top:4px;">
|
|
sugestii:
|
|
{% for s in e.suggestions[:3] %}
|
|
<span class="sugg">{{ s.cod_prestatie }} ({{ s.score|round|int }}%)</span>{% if not loop.last %}, {% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mapcol">
|
|
<select name="cod_prestatie" aria-label="Cod RAR pentru {{ e.cod_op_service }}">
|
|
<option value="">— alege cod RAR —</option>
|
|
{% for n in nomenclator %}
|
|
<option value="{{ n.cod_prestatie }}" {% if n.cod_prestatie == preselect %}selected{% endif %}>
|
|
{{ n.cod_prestatie }} — {{ n.nume_prestatie }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<div style="margin-top:12px;">
|
|
<button type="submit" style="min-height:44px;">Salveaza maparile</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Banner discoverability (T1, US-007): vizibil cand exista randuri needs_review.
|
|
Explica operatorului ca randurile cu 'Verifica valori' nu pleaca la RAR
|
|
pana le deschide in modal si apasa 'Confirma valorile'. Dispare via OOB
|
|
cand summary.needs_review == 0. -->
|
|
<div id="preview-needs-review-banner">
|
|
{% if summary.get('needs_review', 0) %}
|
|
<div class="banner warn" role="note" aria-live="polite"
|
|
style="margin-bottom:12px; padding:8px 14px; border-radius:6px;
|
|
background:color-mix(in srgb, var(--warn, #e6b34a) 12%, var(--card));
|
|
border:1px solid var(--warn, #e6b34a); font-size:13px;">
|
|
Randurile cu <span class="pill s-needs_review" style="font-size:11px;">Verifica valori</span>
|
|
nu pleaca la RAR pana le deschizi in modal si confirmi in modal
|
|
cu butonul <strong>Confirma valorile</strong>.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Toggle randuri deja-trimise / duplicate: colapsate implicit (nu ocupa loc).
|
|
Click -> comuta clasa .preview-arata-trimise pe tabel (CSS in base.html). -->
|
|
{% set _n_trimise = summary.get('already_sent', 0) + summary.get('duplicate_in_file', 0) %}
|
|
{% if _n_trimise %}
|
|
<div style="margin-bottom:8px;">
|
|
<button type="button" class="btn-secondary btn-sm" aria-expanded="false"
|
|
onclick="var t=document.getElementById('preview-tabel'); var on=t.classList.toggle('preview-arata-trimise'); this.setAttribute('aria-expanded', on); this.querySelector('.tgl-tx').textContent = on ? 'Ascunde {{ _n_trimise }} deja trimise / duplicate' : 'Arata {{ _n_trimise }} deja trimise / duplicate';">
|
|
<span class="tgl-tx">Arata {{ _n_trimise }} deja trimise / duplicate</span>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Tabel preview in format identic cu tabelul Trimiteri (.tabel-trimiteri).
|
|
US-007: 8 coloane (coloana de verificare eliminata).
|
|
Randurile au FORM PROPRIU pentru editare (NU sunt in #confirm-form). -->
|
|
<div id="preview-tabel" class="tablewrap tabel-trimiteri">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="col-id">#</th>
|
|
<th class="col-stare">Stare</th>
|
|
<th class="col-vehicul">Vehicul</th>
|
|
<th class="col-operatie">Operatie</th>
|
|
<th class="col-data">Data</th>
|
|
<th class="col-km">KM final</th>
|
|
<th class="col-note">Note</th>
|
|
<th class="col-actiuni">Actiuni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in rows %}
|
|
{% include '_preview_rand.html' %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<!-- Mesaj "filtrat la zero": afisat de JS cand filtrul ascunde toate randurile -->
|
|
<p id="preview-zero-message" class="muted"
|
|
style="display:none; text-align:center; padding:24px 16px; font-size:14px;">
|
|
Niciun rand nu corespunde filtrului selectat.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Bara confirmare (sticky jos) — singurul formular care trimite la RAR -->
|
|
<form id="confirm-form"
|
|
hx-post="/_import/{{ import_id }}/confirma"
|
|
hx-target="#import-section"
|
|
hx-swap="outerHTML">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
|
|
<div class="sticky-bar">
|
|
<div style="flex:1; min-width:280px;">
|
|
<!-- Banner declarant — direct deasupra input-ului N -->
|
|
<div class="banner warn" style="margin-bottom:10px; padding:8px 12px; border-radius:6px;"
|
|
role="note" aria-live="polite">
|
|
Confirmand, TU esti declarantul acestor
|
|
<strong id="n-display">{{ summary.get('ok', 0) }}</strong>
|
|
prezentari la RAR (ireversibil).
|
|
</div>
|
|
|
|
<div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
|
|
<label for="n-confirmat"
|
|
style="font-size:13px; color:var(--muted);">
|
|
Confirma numarul
|
|
</label>
|
|
<input type="number" id="n-confirmat" name="n_confirmat"
|
|
value="{{ summary.get('ok', 0) }}"
|
|
min="0" required
|
|
style="max-width:80px;"
|
|
aria-describedby="n-hint">
|
|
<span id="n-hint" class="muted" style="font-size:12px;">
|
|
din <span id="n-hint-ok">{{ summary.get('ok', 0) }}</span> gata de trimis
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-direction:column; gap:6px; align-self:flex-end;">
|
|
<button type="submit"
|
|
id="confirm-btn"
|
|
style="min-height:44px; padding:10px 28px; font-size:14px;"
|
|
{% if not summary.get('ok', 0) %}disabled title="Niciun rand ok de trimis"{% endif %}>
|
|
Trimite la RAR
|
|
</button>
|
|
{% if summary.get('needs_data', 0) or summary.get('needs_mapping', 0) or summary.get('needs_review', 0) %}
|
|
<a href="/v1/import/{{ import_id }}/export-failed" download
|
|
style="font-size:12px; text-align:center;">
|
|
descarca randuri cu probleme (CSV)
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Contor "gata de trimis" citit din DOM (data-ok), ca OOB swap-ul de la editare
|
|
sa actualizeze N fara a re-randa sectiunea. -->
|
|
<span id="preview-ok-count" data-ok="{{ summary.get('ok', 0) }}" hidden></span>
|
|
|
|
<div style="padding:8px 0 4px;">
|
|
<a href="#" class="muted" style="font-size:13px;"
|
|
hx-get="/_import/reset" hx-target="#import-section" hx-swap="outerHTML">Incarca alt fisier</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
/* Un singur sticky bar pe ecran — cat preview-ul de import e activ,
|
|
ascunde sectiunea Trimiteri de pe Acasa (se reveleaza la reset/commit din _upload.html). */
|
|
var trim = document.getElementById('trimiteri-section');
|
|
if (trim) trim.style.display = 'none';
|
|
|
|
/* nOk se citeste din DOM (#preview-ok-count[data-ok]) ca OOB swap-ul de la editare
|
|
sa-l poata actualiza fara re-randarea sectiunii. */
|
|
function getOk() {
|
|
var el = document.getElementById('preview-ok-count');
|
|
return el ? parseInt(el.dataset.ok || '0', 10) : 0;
|
|
}
|
|
|
|
/* Actualizeaza N dupa editare/confirmare rand (OOB).
|
|
US-007: reviewed_rows (checkboxe) eliminate; N = randurile ok din DB,
|
|
actualizate via OOB (#preview-ok-count[data-ok]) dupa /confirma-review sau /editeaza. */
|
|
function updateN() {
|
|
var total = getOk();
|
|
var inp = document.getElementById('n-confirmat');
|
|
var disp = document.getElementById('n-display');
|
|
var btn = document.getElementById('confirm-btn');
|
|
if (inp) inp.value = total;
|
|
if (disp) disp.textContent = total;
|
|
var hintOk = document.getElementById('n-hint-ok');
|
|
if (hintOk) hintOk.textContent = total;
|
|
if (btn) btn.disabled = (total === 0);
|
|
}
|
|
|
|
/* Filtrare randuri dupa stare.
|
|
Cand niciun rand nu e vizibil, afiseaza mesajul #preview-zero-message. */
|
|
function filterRows(status) {
|
|
var visible = 0;
|
|
document.querySelectorAll('tbody tr[data-status]').forEach(function(tr) {
|
|
var show = status === 'all' || tr.dataset.status === status;
|
|
tr.style.display = show ? '' : 'none';
|
|
if (show) visible++;
|
|
});
|
|
var zeroMsg = document.getElementById('preview-zero-message');
|
|
if (zeroMsg) zeroMsg.style.display = (visible === 0) ? '' : 'none';
|
|
document.querySelectorAll('.filter-btn').forEach(function(b) {
|
|
var active = b.dataset.filter === status;
|
|
b.style.background = active ? 'var(--accent)' : '';
|
|
b.style.borderColor = active ? 'var(--accent)' : '';
|
|
b.style.color = active ? '#fff' : '';
|
|
});
|
|
}
|
|
|
|
/* Expune functiile global pentru onclick/hx-on inline si OOB swap */
|
|
window.updateN = updateN;
|
|
window.filterRows = filterRows;
|
|
|
|
/* Filtru implicit "Toate" activ la incarcare */
|
|
filterRows('all');
|
|
updateN();
|
|
|
|
/* Evidentiere rand dupa reincarcarea preview-ului (window.__randSalvat setat de
|
|
listener-ul 'randSalvat' din base.html): scroll + flash, ca userul sa vada CARE
|
|
rand s-a schimbat si sa nu ramana cu impresia ca "nu s-a intamplat nimic". */
|
|
if (window.__randSalvat) {
|
|
var d = window.__randSalvat; window.__randSalvat = null;
|
|
var r = document.getElementById('preview-row-' + d.rowIndex);
|
|
if (r) {
|
|
r.scrollIntoView({block:'center', behavior:'smooth'});
|
|
void r.offsetWidth;
|
|
r.classList.add('rand-actualizat');
|
|
}
|
|
}
|
|
})();
|
|
</script>
|