Pages, composants et structure UI

Vue d’ensemble
Le frontend sépare globalement les écrans complets, les composants réutilisables et les popups. Cette page sert de guide pour savoir où ajouter ou modifier une interface.
Structure UI
flowchart TD
    APP[AppModule] --> ROUTES[RouterModule.forRoot]
    ROUTES --> PAGES[Pages]
    PAGES --> COMP[Components]
    PAGES --> POP[Popup]
    PAGES --> SERVICES[Services Angular]
    COMP --> SERVICES
Pages
src/app/Pages/ contient les écrans routables ou les grosses vues fonctionnelles. Les dossiers actuellement présents incluent notamment :
PageLogin, 
PageForgotPassword, 
PageUnauthorized
PageIndex
PageWebgl
PageSupport et 
PageSupportAdmin
PageAdminPresence
PageTableList et 
PageUserInformation
PageSettings, 
PageDemoSearch, 
PageActiveSimulation, 
PageSimulationComments
Components
src/app/Components/ contient les composants destinés à être utilisés par d’autres vues. On y trouve notamment 
CommunicationOverlay et 
WebPanel.
Un élément devrait devenir un composant partagé lorsqu’il possède une responsabilité UI autonome ou qu’il est utilisé par plusieurs pages.
Popup
src/app/Popup/ regroupe les interfaces modales. Lorsqu’une interaction est temporaire et ne mérite pas une route complète, vérifier d’abord si elle appartient à cette couche.
Routing
Le routing est centralisé directement dans 
src/app/app.module.ts avec 
RouterModule.forRoot(...). Il n’existe pas de 
app-routing.module.ts séparé.
Les routes sont regroupées par niveau d’accès : publiques, utilisateur, utilisateur Uniksim, admin et true admin. Voir Structure et routing Angular pour la liste détaillée.
Créer une nouvelle vue
flowchart LR
    NEED[Nouvelle interface] --> ROUTE{Doit avoir une URL ?}
    ROUTE -- Oui --> PAGE[Nouvelle Page]
    PAGE --> APP[Ajouter déclaration + route dans app.module.ts]
    ROUTE -- Non --> REUSE{Réutilisable ?}
    REUSE -- Oui --> COMPONENT[Component]
    REUSE -- Non --> POPUP{Interaction modale ?}
    POPUP -- Oui --> P[Popup]
    POPUP -- Non --> LOCAL[Composant local à la page]
Conventions pratiques
Une Page orchestre l’écran; elle ne devrait pas absorber toute la logique métier.
Les appels backend réutilisables passent par les services Angular.
Un composant partagé ne devrait pas dépendre inutilement d’une route précise.
Lorsqu’une page devient très volumineuse, extraire les parties UI cohérentes plutôt que créer une deuxième page sans raison.
Avant de créer un nouveau composant, vérifier si un équivalent existe déjà dans 
Components/ ou 
Popup/.