Composant Cartes (Cards View)

Composant d'interface développé en alternance chez EFICAD pour le SWOOD Report Viewer : un mode de visualisation "cartes" alternatif aux tableaux classiques. Chaque enregistrement (panneau, débit…) devient une carte composée de cellules configurables — l'utilisateur réorganise la grille par drag & drop, redimensionne les cellules, choisit le mode d'affichage de chaque champ (valeur, QR Code, code-barres) et insère des images. Conçu comme brique générique Angular / PrimeNG réutilisable dans les applications internes.

janvier 2026AngularPrimeNGTypeScriptComposant UIDrag & drop

janvier 2026 Stage → Alternance

Projet alternance chez EFICAD

Points clés

Drag & drop : réorganisation libre des cartes dans la grille avec retour visuel.
Redimensionnement des cellules pour adapter la mise en page au contenu.
Insertion d'images dans une cellule (upload, prévisualisation, ratio préservé).

Stack

AngularPrimeNGTypeScriptSCSS

Architecture du composant

Composant Angular standalone, configurable via inputs/outputs typés.
Surcouche autour de PrimeNG pour homogénéiser le rendu avec la design language EFICAD.

Interactions utilisateur

Drag & drop natif HTML5 encapsulé pour gérer les zones de drop, l'ordre et la persistance.
Poignées de resize sur chaque cellule avec contraintes min/max.
Gestion d'image dans une cellule : sélection, prévisualisation, fit cover/contain.

Réutilisabilité

Composant générique : la cellule accepte un slot personnalisé pour héberger n'importe quel contenu.
Documentation interne et exemples pour faciliter l'adoption par d'autres équipes.

Veille technologique préalable

Comparatif des bibliothèques drag & drop côté Angular : Angular CDK DragDrop, ngx-drag-drop, PrimeNG Draggable.
Évaluation sur 4 critères : intégration PrimeNG existante, contrôle fin du resize, gestion du contenu personnalisé, maintenance long terme.
Choix justifié documenté dans le README technique pour faciliter la décision côté revue de code.

Performance & profilage

Tests sur grilles denses (≥ 100 cartes) pour mesurer la fluidité du drag et du resize.
Profilage via Chrome DevTools Performance pour identifier les re-renders inutiles.
Optimisations ciblées : trackBy sur la liste, OnPush change detection, debounce sur le resize en cours.

Démarche & intégration équipe

Composant intégré au backlog équipe et présenté en démo de sprint pour valider l'API publique.
Itérations sur les retours des autres équipes utilisatrices avant figement de l'interface.