MaleusMaleus

Composer des interfaces métier complexes

Projetez-vous avec les cartes, grilles, documents, plannings et autres composants réutilisables du kit frontend.

Dans l'appApplication · FrontendMis à jour 19 septembre 2026
Sur cette page

Le kit frontend fournit des composants métier déjà câblés, au-dessus des primitives du design system. Ils sont Angular, zoneless, OnPush et pilotés par signals. Chaque application reçoit une copie du kit dans son repository : elle peut l'utiliser telle quelle, la composer par slots ou déclarer un fork visible lorsque le besoin diverge vraiment.

Une application complète compose le shell, la recherche, les filtres, les cartes et les actions à partir des mêmes conventions.

Carte interactive

map s'appuie sur MapLibre GL. Il affiche des points, marqueurs personnalisés, liens entre points, popups, sélection et légende masquable. Le viewport peut s'ajuster aux données.

L'événement mapReady donne accès à MapLibre pour ajouter des sources GeoJSON, zones, heatmaps, terrain ou couches spécialisées. Le kit fournit donc le cadre d'interaction et laisse à l'application les données, le géocodage et les règles métier.

À utiliser pour une flotte, des interventions, des sites, des actifs ou un réseau. Un fournisseur de tuiles adapté à la production reste nécessaire pour un trafic important.

La carte combine navigation, marqueurs et informations métier dans une même vue. Les données affichées sont fictives.

Grille de saisie proche d'Excel

data-sheet vise les tâches où aller vite au clavier compte : saisie ligne par ligne, collage depuis Excel, typage des cellules, validation en place et colonnes calculées ou en lecture seule.

Le composant émet les modifications mais ne mute pas directement les objets métier. La page garde donc la main sur le brouillon, la validation globale et l'envoi à l'API.

Cette frontière rend le composant utile pour un budget, une allocation, un catalogue tarifaire ou un import corrigé, sans prétendre remplacer Excel.

La grille accélère la saisie structurée, le collage et la correction des données. Les données affichées sont fictives.

Table de données riche

data-table combine colonnes typées, tri, sélection, actions groupées, détail dépliable, pagination, densité et états de chargement, d'erreur ou de liste vide. Elle fonctionne avec des données locales ou une source paginée côté serveur.

Les slots permettent d'afficher un badge, une action, une miniature ou un détail métier. Les pivots, agrégations analytiques et groupements avancés relèvent d'une extension ou d'un composant spécialisé.

La table réunit consultation, sélection et actions métier sur des données structurées. Les données affichées sont fictives.

Documents, images et transferts

document-viewer route le contenu selon son type : texte, JSON et CSV en inline, image avec lightbox, PDF avec pagination et zoom, DOCX avec rendu navigateur. Les parseurs PDF et DOCX sont chargés seulement lorsque le lecteur en a besoin.

L'espace documentaire combine arborescence, métadonnées essentielles et consultation, puis l'application ajoute ses permissions et règles de conservation.

upload ajoute la drop zone, la file de transfert, la progression, l'annulation et le retry. Il ne remplace pas les contrôles backend, l'antivirus ou les quotas.

Temps, planning et affectation

Trois composants couvrent des projections différentes :

  • event-calendar pour des événements positionnés dans un calendrier ;
  • planning-grid pour des groupes, lignes et réordonnancements ;
  • timeline pour des périodes placées sur une échelle temporelle.

Ils conviennent aux ressources, équipes, interventions, jalons et roadmaps. Ils ne calculent pas automatiquement un chemin critique ou un planning optimal.

Les composants de planning projettent événements, affectations et périodes selon le besoin métier. Les données affichées sont fictives.

Interfaces composées

Le kit contient aussi :

  • list-detail, pour coordonner une liste et la fiche sélectionnée ;
  • chat, pour les conversations, pièces jointes et vues côte à côte ;
  • filter-bar, pour recherche, statuts et plages de dates ;
  • stat-card, pour composer un dashboard ;
  • select, compatible avec les formulaires Angular ;
  • markdown, avec coloration du code et filtrage des URLs ;
  • lightbox, pour consulter des médias ;
  • segmented, pour choisir rapidement un mode ou une vue.

Personnaliser sans perdre le socle

Les composants complexes exposent des slots TemplateRef ou de la projection de contenu pour les cellules, lignes, marqueurs, options et états vides. Une adaptation standard reste ainsi déclarative.

Quand une application doit réellement diverger, elle copie l'entrée concernée dans kit-forks. Le fork devient explicite, attribuable et testable au lieu de modifier silencieusement la copie commune.