[{"data":1,"prerenderedAt":128},["ShallowReactive",2],{"navigation":3,"project-cards-view":26},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"date":29,"description":30,"extension":31,"gallery":32,"highlights":45,"image":49,"imageCaption":50,"links":51,"meta":58,"sections":111,"slug":60,"stack":124,"stem":125,"tags":126,"url":57,"__hash__":127},"projects/projects/cards-view.yml","Composant Cartes (Cards View)","2026-01-15T00:00:00.000Z","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.","yml",[33,37,41],{"src":34,"alt":35,"caption":36},"/images/projects/cards-view/edition-card-drag-n-drop.png","Éditeur de vue Card avec les cellules organisées dans la grille (drag & drop)","Édition d'une vue Card : organisation des cellules dans la grille par drag & drop et resize, barre d'outils en haut à droite pour les paramètres globaux, prévisualisation en temps réel.",{"src":38,"alt":39,"caption":40},"/images/projects/cards-view/personnalisation-cellule-card.png","Panneau de personnalisation d'une cellule avec libellé, taille et mode d'affichage","Personnalisation d'une cellule : libellé personnalisé, taille (Petit / Moyen / Grand), affichage du libellé (Afficher / Masquer / En ligne) et mode d'affichage de la valeur (Valeur / QR Code / Code-barres).",{"src":42,"alt":43,"caption":44},"/images/projects/cards-view/table-vue-default.png","Vue tableau par défaut de SWOOD à contraster avec la vue Card","Vue tableau par défaut de SWOOD Report Viewer (référence) : même donnée, format tabulaire dense. La vue Card cible les usages où le format visuel et le détail par enregistrement priment.",[46,47,48],"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é).","/images/projects/cards-view/vue-card.png","Rendu final dans SWOOD Report Viewer : la \"Nouvelle vue Card\" affiche chaque panneau (Cabinet_Back, Cabinet_Front…) sous forme de carte avec ses propriétés agencées dans la grille configurée par l'utilisateur.",[52],{"label":53,"icon":54,"color":55,"variant":56,"to":57},"Projet alternance chez EFICAD","i-lucide-briefcase","neutral","subtle","/projects/cards-view",{"path":57,"body":59},{"slug":60,"title":28,"description":30,"image":49,"imageCaption":50,"gallery":61,"url":57,"tags":65,"date":71,"stack":72,"links":74,"highlights":76,"sections":77},"cards-view",[62,63,64],{"src":34,"alt":35,"caption":36},{"src":38,"alt":39,"caption":40},{"src":42,"alt":43,"caption":44},[66,67,68,69,70],"Angular","PrimeNG","TypeScript","Composant UI","Drag & drop","2026-01-15",[66,67,68,73],"SCSS",[75],{"label":53,"icon":54,"color":55,"variant":56,"to":57},[46,47,48],[78,83,89,94,100,106],{"title":79,"items":80},"Architecture du composant",[81,82],"Composant Angular standalone, configurable via inputs/outputs typés.","Surcouche autour de PrimeNG pour homogénéiser le rendu avec la design language EFICAD.",{"title":84,"items":85},"Interactions utilisateur",[86,87,88],"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.",{"title":90,"items":91},"Réutilisabilité",[92,93],"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.",{"title":95,"items":96},"Veille technologique préalable",[97,98,99],"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.",{"title":101,"items":102},"Performance & profilage",[103,104,105],"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.",{"title":107,"items":108},"Démarche & intégration équipe",[109,110],"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.",[112,114,116,118,120,122],{"title":79,"items":113},[81,82],{"title":84,"items":115},[86,87,88],{"title":90,"items":117},[92,93],{"title":95,"items":119},[97,98,99],{"title":101,"items":121},[103,104,105],{"title":107,"items":123},[109,110],[66,67,68,73],"projects/cards-view",[66,67,68,69,70],"Fuo3nRrxWqNkbIKVwmgTgevxTotPu3q2emFhNuw8HI8",1777818882830]