feat(ui): #15 U5 — web upload import (HTMX) drop→mapare→preview→confirma
Implementare completa U5 din plan-treapta2.md (sectiunea 13): - _upload.html: drop zone + buton accesibil (a11y: drag nu e la tastatura), drag-and-drop JS, mesaj 'NU se trimite nimic pana confirmi', selector foi pt multi-sheet xlsx, stari eroare/mesaj - _mapcoloane.html: formular mapare coloane cu .maprow/.mapcol.grow, sugestii fuzzy pre-selectate, etiichete <label> vizibile, sample values, format data configurabil - _preview_import.html: tabel 6 stari, pills rezumat, filtre pe stare, .chk per-rand pe needs_review (D11), banner declarant .banner.warn direct deasupra input-ului N (D12), bara confirmare sticky, text 'dubla cu randul N' pe duplicate_in_file (D10 daltonism), link export CSV randuri esuate - base.html: .s-needs_review (warn), .s-already_sent/.s-duplicate_in_file (muted), .drop-zone, .banner.warn, .sticky-bar, .htmx-indicator - routes.py: rute /_import/upload/mapare-coloane/preview/reset/confirma; helper _web_compute_preview refoloseste _resolve_row_for_preview, _already_sent_lookup, _signature din import_router (fara a-l edita); commit ON CONFLICT DO NOTHING (TOCTOU); log atestare - tests/test_import_ui.py: 15 teste (dashboard, upload, mapare, preview, confirmare N corect/gresit, reset, erori, multi-sheet, a11y D10/D11/D12) 279 teste total, 0 esecuri. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
236
app/web/templates/_preview_import.html
Normal file
236
app/web/templates/_preview_import.html
Normal file
@@ -0,0 +1,236 @@
|
||||
<div id="import-section">
|
||||
<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:#241a1a;{% endif %} margin-bottom:12px;"
|
||||
{% if error %}role="alert"{% endif %}>
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Rezumat stari -->
|
||||
<div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
|
||||
{% set status_labels = [
|
||||
('ok', 'gata de trimis'),
|
||||
('needs_review', 'verifica valori'),
|
||||
('needs_mapping', 'fara cod RAR'),
|
||||
('needs_data', 'date lipsa'),
|
||||
('already_sent', 'deja trimis'),
|
||||
('duplicate_in_file','dublicat in fisier'),
|
||||
] %}
|
||||
{% 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 }}</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Butoane filtrare stare -->
|
||||
<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);">
|
||||
{{ status_key }} ({{ cnt }})
|
||||
</button>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Tabel preview + bara confirmare (un singur form) -->
|
||||
<form id="confirm-form"
|
||||
hx-post="/_import/{{ import_id }}/confirma"
|
||||
hx-target="#import-section"
|
||||
hx-swap="outerHTML">
|
||||
|
||||
<div class="tablewrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>VIN</th>
|
||||
<th>Nr. Inm.</th>
|
||||
<th>Data</th>
|
||||
<th>KM final</th>
|
||||
<th>Operatie</th>
|
||||
<th>Stare</th>
|
||||
<th>Note</th>
|
||||
<th>Verificat?</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in rows %}
|
||||
{%- set res = row.resolved -%}
|
||||
{%- set status = row.resolved_status -%}
|
||||
{%- set prestatii = res.get('prestatii') or [] -%}
|
||||
{%- set op = (prestatii[0].get('cod_prestatie') or prestatii[0].get('cod_op_service', '')) if prestatii else '' -%}
|
||||
<tr data-status="{{ status }}"
|
||||
style="{% if status == 'needs_review' %}background:rgba(230,179,74,.04);{% elif status in ('already_sent', 'duplicate_in_file') %}opacity:.65;{% endif %}">
|
||||
<td class="muted">{{ row.row_index + 1 }}</td>
|
||||
<td>{{ res.get('vin') or '<span class="muted">—</span>' | safe }}</td>
|
||||
<td>{{ res.get('nr_inmatriculare') or '' }}</td>
|
||||
<td>{{ res.get('data_prestatie') or '' }}</td>
|
||||
<td>{{ res.get('odometru_final') or '' }}</td>
|
||||
<td>{{ op or '<span class="muted">—</span>' | safe }}</td>
|
||||
<td>
|
||||
<span class="pill s-{{ status }}">{{ status }}</span>
|
||||
</td>
|
||||
<td class="muted" style="font-size:12px; white-space:normal; max-width:220px;">
|
||||
{% if status == 'already_sent' and row.get('already_sent_info') %}
|
||||
{% set ai = row.already_sent_info %}
|
||||
deja trimis {{ (ai.get('created_at') or '')[:10] }}
|
||||
{% if ai.get('id_prezentare') %}(#{{ ai.id_prezentare }}){% endif %}
|
||||
{% elif status == 'duplicate_in_file' and row.get('duplicate_with') %}
|
||||
dubla cu randul
|
||||
{% for idx in row.duplicate_with %}{{ idx + 1 }}{% if not loop.last %}, {% endif %}{% endfor %}
|
||||
{% elif row.flags %}
|
||||
{{ row.flags[0] }}
|
||||
{% elif row.errors %}
|
||||
{%- set e = row.errors[0] -%}
|
||||
{%- if e is mapping -%}
|
||||
{{ e.values() | list | first }}
|
||||
{%- else -%}
|
||||
{{ e }}
|
||||
{%- endif -%}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td style="text-align:center;">
|
||||
{% if status == 'needs_review' %}
|
||||
<label class="chk" style="min-height:44px; justify-content:center; cursor:pointer;"
|
||||
title="Bifat inseamna ca ai verificat valorile si le incluzi in trimitere">
|
||||
<input type="checkbox" name="reviewed_rows" value="{{ row.row_index }}"
|
||||
onchange="updateN()"
|
||||
aria-label="Verificat — randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin', '') }})">
|
||||
verif.
|
||||
</label>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Bara confirmare (sticky jos) -->
|
||||
<div class="sticky-bar">
|
||||
<div style="flex:1; min-width:280px;">
|
||||
<!-- Banner declarant (D12) — 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:12px; align-items:center; flex-wrap:wrap;">
|
||||
<div>
|
||||
<label for="n-confirmat"
|
||||
style="font-size:13px; color:var(--muted); display:block; margin-bottom:2px;">
|
||||
Numar prezentari de confirmat
|
||||
</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; margin-left:6px;">
|
||||
({{ summary.get('ok', 0) }} ok
|
||||
{% if summary.get('needs_review', 0) %}
|
||||
+ pana la {{ summary.get('needs_review', 0) }} verificate manual
|
||||
{% endif %})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="confirmed-by"
|
||||
style="font-size:13px; color:var(--muted); display:block; margin-bottom:2px;">
|
||||
Declarant (optional)
|
||||
</label>
|
||||
<input type="text" id="confirmed-by" name="confirmed_by"
|
||||
placeholder="email sau nume"
|
||||
style="max-width:200px;">
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div style="padding:8px 0 4px;">
|
||||
<a href="/" class="muted" style="font-size:13px;">Incarca alt fisier</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var nOk = {{ summary.get('ok', 0) | int }};
|
||||
|
||||
/* Actualizeaza N si bannerul cand se bifeaza needs_review */
|
||||
function updateN() {
|
||||
var checked = document.querySelectorAll('input[name="reviewed_rows"]:checked').length;
|
||||
var total = nOk + checked;
|
||||
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;
|
||||
if (btn) btn.disabled = (total === 0);
|
||||
}
|
||||
|
||||
/* Filtrare randuri dupa stare */
|
||||
function filterRows(status) {
|
||||
document.querySelectorAll('tbody tr[data-status]').forEach(function(tr) {
|
||||
tr.style.display = (status === 'all' || tr.dataset.status === status) ? '' : '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 inline */
|
||||
window.updateN = updateN;
|
||||
window.filterRows = filterRows;
|
||||
|
||||
/* Filtru implicit "Toate" activ la incarcare */
|
||||
filterRows('all');
|
||||
|
||||
/* Focus pe campul N la deschidere (a11y — D12) */
|
||||
var ni = document.getElementById('n-confirmat');
|
||||
if (ni) { ni.focus(); ni.select(); }
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user