HormoneTrack-web/js/ui/labs.js

/**
 * ─────────────────────────────────────────────────────────────────────────────
 * Écran Analyses (portage de `ui/screens/LabsScreen.kt`, v1.2.2).
 *
 *  - prise de sang E2 + T en UNE entrée → affichage GROUPÉ par timestamp :
 *    « E2 306 pg/mL · T 44 ng/dL » côte à côte (E2 avant T, autres ensuite) ;
 *  - tap ligne → sélecteur E2/T si paire, édition unitaire pré-remplie ;
 *  - suppression = la prise ENTIÈRE (les labs sont prélevés ensemble — choix
 *    de design confirmé côté Android) ;
 *  - les labos T peuvent être en ng/mL, ng/dL, ng/L, nmol/L (conversion au
 *    rendu et à la calibration — bug #23).
 * ─────────────────────────────────────────────────────────────────────────────
 */

import { store } from '../data/store.js';
import { t } from '../util/i18n.js';
import { formatLabValue, formatDateTime } from '../util/format.js';
import { el, confirmDialog, fab, showDialog } from './components.js';
import { openLabDialog } from './dialogs.js';

/**
 * Regroupe les labs par timestamp (une « prise de sang » = E2 + T prises au
 * même moment). Ordre d'affichage dans un groupe : E2 avant T, autres
 * marqueurs ensuite. Tri par date décroissante. (Miroir groupLabsForDisplay —
 * exporté pour les tests.)
 *
 * @param {object[]} labs
 * @returns {Array<[number, object[]]>} (timestamp, labs du groupe)
 */
export function groupLabsForDisplay(labs) {
  const byTs = new Map();
  for (const lab of labs) {
    if (!byTs.has(lab.timestamp)) byTs.set(lab.timestamp, []);
    byTs.get(lab.timestamp).push(lab);
  }
  const order = (marker) => {
    const m = String(marker).toUpperCase();
    if (m === 'E2') return 0;
    if (m === 'T') return 1;
    return 2;
  };
  return [...byTs.entries()]
    .map(([ts, group]) => [ts, group.slice().sort((a, b) => order(a.marker) - order(b.marker))])
    .sort((a, b) => b[0] - a[0]);
}

/**
 * Rend l'écran Analyses.
 * @param {HTMLElement} container
 */
export function renderLabs(container) {
  const labs = store.getLabResults();
  const grouped = groupLabsForDisplay(labs);

  const col = el('div', {});
  container.appendChild(col);

  if (grouped.length === 0) {
    col.appendChild(el('p', {}, t('no_data')));
    container.appendChild(fab(() => openLabDialog({ existing: null })));
    return;
  }

  for (const [ts, group] of grouped) {
    // Affichage côte à côte : « E2 306 pg/mL · T 45 ng/dL »
    const headline = group
      .map((lab) => `${String(lab.marker).toUpperCase()} ${formatLabValue(lab.value)} ${lab.unit}`)
      .join('  ·  ');
    const item = el('div', { class: 'list-item' });
    const main = el('div', { class: 'main' });
    main.appendChild(el('div', { class: 'title' }, headline));
    main.appendChild(el('div', { class: 'sub' }, formatDateTime(ts)));
    const firstNotes = group.map((g) => g.notes).find((n) => n && n.trim() !== '');
    if (firstNotes) main.appendChild(el('div', { class: 'sub' }, firstNotes));
    item.appendChild(main);

    // Tap → sélecteur E2/T si paire, édition directe sinon
    item.addEventListener('click', () => {
      if (group.length > 1) openChooser(group);
      else openLabDialog({ existing: group[0] });
    });

    const del = el('button', { class: 'icon-btn', 'aria-label': t('delete') }, '🗑');
    del.addEventListener('click', (e) => {
      e.stopPropagation();
      // Suppression = la prise de sang ENTIÈRE (confirm nommant les valeurs)
      const named = group.map((l) => `${String(l.marker).toUpperCase()} ${formatLabValue(l.value)}`).join(' · ');
      confirmDialog(t('delete'), t('confirm_delete_blood_draw', named), () => {
        for (const lab of group) store.deleteLabResult(lab.id);
      });
    });
    item.appendChild(del);
    col.appendChild(item);
  }

  container.appendChild(fab(() => openLabDialog({ existing: null })));
}

/** Sélecteur « quelle entrée modifier ? » quand la prise contient E2 + T. */
function openChooser(group) {
  const body = el('div', {});
  for (const lab of group) {
    body.appendChild(el('button', {
      class: 'btn text',
      onclick: () => {
        dlg.close();
        openLabDialog({ existing: lab });
      },
    }, `${String(lab.marker).toUpperCase()} · ${formatLabValue(lab.value)} ${lab.unit}`));
  }
  const dlg = showDialog({
    title: t('edit_which_lab'),
    body,
    actions: [{ label: t('cancel'), className: 'btn text', onClick: () => dlg.close() }],
  });
}