Aller au contenu

Pattern — Cellule entités liées + popover (linked-entities-cell-popover)

Statut : implémenté en production
production_source : true
Composant : frontend/src/components/trainer/LinkedInvoicesCell.vue
Vue : frontend/src/views/trainer/InvoicesView.vue (onglet CRA, colonne « Facture liée »)

Comportement

Cas Affichage
0 entité Tiret gris
1 entité Lien direct (clic → drawer facture via handleViewInvoiceByNumber)
N ≥ 2 Premier lien + badge +N ouvrant un popover position: fixed (Teleport body)

Positionnement popover

  • Hauteur estimée : min(60 + 8 + n × 40, 280) px
  • Clamp horizontal : max(8, min(rect.left, innerWidth - 264 - 8))
  • Flip vertical : si spaceBelow < height + 8 et spaceAbove > spaceBelow → au-dessus du badge, sinon en dessous

Contrat parent

<LinkedInvoicesCell
  :invoices="report.linkedInvoices ?? []"
  @view-invoice="handleViewInvoiceByNumber"
/>

Événement view-invoice : (publicNumber, uuid) — bascule onglet Factures + ouverture InvoiceDetailDrawer (UX-073).

Tests

frontend/src/components/trainer/LinkedInvoicesCell.spec.js (Vitest).