rar-autopass/app/web/templates/_preview_rand.html

{#
  _preview_rand.html — un singur rand de preview import.
  Doua moduri:
    - display (editing falsy): <tr> normal cu 9 coloane in format .tabel-trimiteri.
    - edit   (editing truthy): <tr class="preview-edit"> (display:block) cu un singur
      <td> ce contine un FORM PROPRIU (NU #confirm-form). Escapa grila table-layout:fixed.
  Swap pe RAND (hx-target pe #preview-row-N, outerHTML), NU pe #import-section.
  La save, optional OOB pe rezumat + contor "gata de trimis" (include_oob).

  Campuri pre-computate de _web_compute_preview (NOT din template raw):
    row.prez           — prezentare_din_payload(resolved): vehicul_nr, vin_scurt,
                          operatie, cod_rar, data_prestatie, odometru
    row.stare_eticheta — text uman (ex. "Gata de trimis"), din STARI_PREVIEW
    row.stare_css      — clasa CSS (ex. "s-ok"), din STARI_PREVIEW
    row.nota_umana     — mesaj uman formatat pentru coloana Note (fara repr Python)
#}
{%- set res = row.resolved -%}
{%- set status = row.resolved_status -%}
{% if editing %}
{%- set err_map = {} -%}
{%- set fix_map = {} -%}
{%- for e in row.errors -%}{%- if e is mapping and e.get('field') -%}{%- set _ = err_map.update({e.field: (e.get('message') or e.get('msg'))}) -%}{%- if e.get('fix') -%}{%- set _ = fix_map.update({e.field: e.get('fix')}) -%}{%- endif -%}{%- endif -%}{%- endfor -%}
<tr id="preview-row-{{ row.row_index }}" data-status="{{ status }}" data-editing="1"
    class="preview-edit">
  <td data-eticheta="" style="padding:0; border:none;">
    <form class="rand-editare"
          hx-post="/_import/{{ import_id }}/rand/{{ row.row_index }}/editeaza"
          hx-target="#preview-row-{{ row.row_index }}"
          hx-swap="outerHTML"
          hx-indicator="#rand-spinner-{{ row.row_index }}"
          hx-disabled-elt="find button"
          hx-on::response-error="this.querySelector('.rand-eroare-banner').style.display='block';"
          style="padding:12px; background:rgba(91,141,239,.06); border-radius:4px;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">

      <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
        <strong style="font-size:13px;">Editare rand {{ row.row_index + 1 }}</strong>
        <span class="pill {{ row.stare_css }}" style="font-size:11px;">{{ row.stare_eticheta }}</span>
      </div>

      {% if message %}
      <div class="flash" style="border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); margin-bottom:10px;"
           role="alert">{{ message }}</div>
      {% endif %}
      <div class="rand-eroare-banner" role="alert"
           style="display:none; margin-bottom:10px; padding:8px 12px; border:1px solid var(--err);
                  background:color-mix(in srgb, var(--err) 12%, var(--card)); border-radius:6px; font-size:13px;">
        Salvarea nu a reusit (retea / sesiune). Valorile introduse sunt pastrate — reincearca.
      </div>

      {% macro camp(nume, eticheta, valoare, tip='text') %}
      <div>
        <label for="e-{{ row.row_index }}-{{ nume }}" class="muted" style="font-size:12px; display:block;">{{ eticheta }}</label>
        <input id="e-{{ row.row_index }}-{{ nume }}" type="{{ tip }}" name="{{ nume }}" value="{{ valoare or '' }}"
               style="width:100%; {% if err_map.get(nume) %}border-color:var(--err);{% endif %}"
               aria-label="{{ eticheta }} — randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin') or '' }})"
               {% if err_map.get(nume) %}aria-invalid="true"{% endif %}>
        {% if err_map.get(nume) %}
        <div class="s-error" style="font-size:12px; margin-top:2px;">{{ err_map.get(nume) }}</div>
        {% endif %}
        {% if fix_map.get(nume) %}
        <span class="camp-fix">{{ fix_map.get(nume) }}</span>
        {% endif %}
      </div>
      {% endmacro %}

      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 16px;">
        {{ camp('nr_inmatriculare', 'Numar inmatriculare', res.get('nr_inmatriculare')) }}
        {{ camp('vin', 'VIN (serie sasiu)', res.get('vin')) }}
        {{ camp('data_prestatie', 'Data prestatie (YYYY-MM-DD)', res.get('data_prestatie')) }}
        {{ camp('odometru_final', 'Odometru final', res.get('odometru_final')) }}
        {{ camp('odometru_initial', 'Odometru initial (daca e cerut)', res.get('odometru_initial')) }}
      </div>

      <div style="margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <button type="submit" style="min-height:44px; padding:8px 18px;">Salveaza</button>
        <button type="button" style="min-height:44px; padding:8px 18px;
                background:var(--card); color:var(--muted); border-color:var(--line);"
                hx-get="/_import/{{ import_id }}/rand/{{ row.row_index }}"
                hx-target="#preview-row-{{ row.row_index }}" hx-swap="outerHTML">Anuleaza</button>
        <span id="rand-spinner-{{ row.row_index }}" class="htmx-indicator muted" style="font-size:13px;">
          se salveaza…
        </span>
      </div>
    </form>
  </td>
</tr>
<script>
(function() {
  /* Mutual-exclusion: cat un rand e in editare, dezactiveaza confirm + alte Editeaza. */
  var btn = document.getElementById('confirm-btn');
  if (btn) { btn.disabled = true; btn.title = 'Termina editarea randului inainte de a trimite.'; }
  document.querySelectorAll('.btn-editeaza').forEach(function(b) { b.disabled = true; });
})();
</script>
{% else %}
{%- set disp_fix_map = {} -%}
{%- for e in row.errors -%}{%- if e is mapping and e.get('field') and e.get('fix') -%}{%- set _ = disp_fix_map.update({e.field: e.get('fix')}) -%}{%- endif -%}{%- endfor -%}
<tr id="preview-row-{{ row.row_index }}" 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="col-id muted" data-eticheta="#">{{ row.row_index + 1 }}</td>
  <td class="col-stare" data-eticheta="Stare">
    <span class="pill {{ row.stare_css }}">{{ row.stare_eticheta }}</span>
  </td>
  <td class="col-vehicul" data-eticheta="Vehicul">
    {{ row.prez.vehicul_nr }}
    {% if row.prez.vin_scurt and row.prez.vin_scurt != '—' %}
    <div class="muted" style="font-size:12px;">{{ row.prez.vin_scurt }}</div>
    {% endif %}
    {# Fix-uri de validare pe vehicul #}
    {% if disp_fix_map.get('vin') %}<span class="camp-fix">{{ disp_fix_map.get('vin') }}</span>{% endif %}
    {% if disp_fix_map.get('nr_inmatriculare') %}<span class="camp-fix">{{ disp_fix_map.get('nr_inmatriculare') }}</span>{% endif %}
  </td>
  <td class="col-operatie" data-eticheta="Operatie">
    <div>{{ row.prez.operatie }}</div>
    {% if row.prez.cod_rar and row.prez.cod_rar != '—' %}
    <div class="cod-rar-sub"><span class="cod-rar-cod">{{ row.prez.cod_rar }}</span></div>
    {% else %}
    <div class="muted cod-rar-sub">nemapat</div>
    {% endif %}
  </td>
  <td class="col-data" data-eticheta="Data prestatie">
    {{ row.prez.data_prestatie }}
    {% if disp_fix_map.get('data_prestatie') %}<span class="camp-fix">{{ disp_fix_map.get('data_prestatie') }}</span>{% endif %}
  </td>
  <td class="col-km" data-eticheta="KM final">
    {{ row.prez.odometru }}
    {% if disp_fix_map.get('odometru_final') %}<span class="camp-fix">{{ disp_fix_map.get('odometru_final') }}</span>{% endif %}
  </td>
  <td class="col-note" data-eticheta="Note"
      style="font-size:12px; white-space:normal;">
    {% 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 %}
    {% else %}
      {{ row.nota_umana or '' }}
    {% endif %}
  </td>
  <td class="col-verificat" data-eticheta="Verificat?" 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" form="confirm-form" name="reviewed_rows" value="{{ row.row_index }}"
             onchange="window.updateN && window.updateN()"
             aria-label="Verificat — randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin', '') }})">
      verif.
    </label>
    {% endif %}
  </td>
  <td class="col-actiuni" data-eticheta="Actiuni" style="text-align:center;">
    {% if status not in ('already_sent', 'duplicate_in_file') %}
    <button type="button" class="btn-editeaza"
            style="min-height:44px; padding:6px 14px; font-size:13px;
                   background:transparent; border-color:var(--line); color:var(--ink);"
            hx-get="/_import/{{ import_id }}/rand/{{ row.row_index }}/editare"
            hx-target="#preview-row-{{ row.row_index }}" hx-swap="outerHTML"
            aria-label="Editeaza randul {{ row.row_index + 1 }} (VIN: {{ res.get('vin', '') }})">
      Editeaza
    </button>
    {% endif %}
  </td>
</tr>
{% if include_oob %}
{# OOB: actualizeaza rezumatul si contorul "gata de trimis" dupa save, fara a re-randa sectiunea. #}
{% 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" hx-swap-oob="true"
     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>
<span id="preview-ok-count" hx-swap-oob="true" data-ok="{{ summary.get('ok', 0) }}" hidden></span>
<script>
(function() {
  /* Editare incheiata: re-activeaza confirm + butoanele Editeaza, recalculeaza N.
     Defer pe tick-ul urmator: la momentul rularii scriptului, swap-ul randului poate
     sa nu se fi asezat inca, deci tr[data-editing] ar fi inca prezent si updateN ar
     lasa confirm dezactivat (editing=true). Dupa setTimeout(0) randul e in mod display. */
  setTimeout(function() {
    document.querySelectorAll('.btn-editeaza').forEach(function(b) { b.disabled = false; });
    var btn = document.getElementById('confirm-btn');
    if (btn) btn.title = '';
    if (window.updateN) window.updateN();
  }, 0);
})();
</script>
{% endif %}
{% endif %}