sigesr-self-service-lib

v13.2.3

Published

14 hours ago

Librairie pour les self services (user profiles) des applications SIGESR

Downloads

513

0High
0Medium
0Low

baay_faal

angular library self services sigesr profiles

NGX Self Service Library 👤

Une librairie Angular standalone pour gérer les profils utilisateurs, le changement de mot de passe et la navigation entre applications avec un système de configuration centralisé.

✨ Fonctionnalités

Composant Self Service

🎨 Design Moderne - Interface élégante et professionnelle avec animations fluides
🎭 Avatar Personnalisé - Initiales avec couleurs automatiques ou image personnalisée
📱 Responsive - Fonctionne parfaitement sur tous les appareils
🌗 Mode Sombre - Support automatique du mode sombre
⚡ Animations Fluides - Transitions CSS3 modernes avec effets de survol
🎯 Standalone Component - Compatible Angular 19
🔧 Hautement Configurable - Options de personnalisation complètes
♿ Accessible - Conforme aux normes d'accessibilité
📦 Léger - Aucune dépendance externe
🚀 Configuration Centralisée - Système de registre d'applications automatique

Système de Builder d'Applications

🔄 Configuration Dynamique - Construction automatique de la liste d'applications
🌍 Multi-environnements - Support dev/prod/test avec URLs adaptées
🎯 Filtrage Intelligent - Exclusion automatique de l'application courante
✅ Validation Robuste - Vérification et nettoyage automatique des données
📝 Registre Central - Toutes les applications SIGESR dans un seul fichier

Composant Change Password

🔒 Validation Robuste - Vérification de la complexité du mot de passe
📊 Indicateur de Force - Affichage visuel de la force du mot de passe
👁️ Toggle Visibilité - Afficher/masquer les mots de passe
✅ Validation en Temps Réel - Feedback instantané sur les exigences

📦 Installation

npm install sigesr-self-service-lib

🚀 Utilisation

1. Nouvelle Méthode : Configuration Automatique (Recommandée)

Cette méthode utilise le système de builder intégré pour construire automatiquement la liste des applications.

import { Component, OnInit } from '@angular/core';
import { SelfServiceComponent } from 'sigesr-self-service-lib';
import { UserProfile, ProfileConfig, SelfService } from 'sigesr-self-service-lib';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [SelfServiceComponent],
  template: `
    <header>
      <h1>Mon Application</h1>
      <self-service
        [user]="userProfile"
        [config]="config"
        (onLogout)="handleLogout()"
        (onAppSelected)="handleAppSelected($event)"
      ></self-service>
    </header>
  `
})
export class HeaderComponent implements OnInit {
  userProfile: UserProfile = {
    username: 'faal',
    email: '[email protected]',
    firstname: 'Ibra',
    lastname: 'Faal'
  };

  config: ProfileConfig = {
    showProfil: true,
    showChangePassword: true,
    showLogout: true,
    showAppSelector: true,
    
    // Nouvelle configuration avec le builder
    appBuilder: {
      currentApp: 'ine',              // L'app courante (sera exclue de la liste)
      environment: 'prod',            // 'dev' | 'prod' | 'test'
      apps: [                         // Liste des apps à afficher (optionnel)
        'dashboard',
        'campusen',
        'formations',
        'deliberation',
        'inscriptions'
      ]
    },
    currentAppId: 'ine'              // Marquer l'app active (optionnel)
  };

  constructor(private selfService: SelfService) {}

  ngOnInit() {
    this.selfService.setUserProfile(this.userProfile);
  }

  handleLogout() {
    console.log('Déconnexion...');
  }

  handleAppSelected(app: any) {
    console.log('Application sélectionnée:', app);
  }
}

2. Ancienne Méthode : Configuration Manuelle (Rétrocompatible)

L'ancienne méthode continue de fonctionner pour la rétrocompatibilité.

config: ProfileConfig = {
  showProfil: true,
  showAppSelector: true,
  applications: [
    {
      id: 'app1',
      name: 'Dashboard',
      description: 'Tableau de bord principal',
      icon: '📊',
      url: '/dashboard',
      color: '#4ECDC4'
    }
  ]
};

🔧 Configuration du Builder d'Applications

Interface AppBuilderConfig

interface AppBuilderConfig {
  /** L'application courante (sera exclue de la liste) - REQUIS */
  currentApp: string;
  
  /** L'environnement - REQUIS */
  environment: 'dev' | 'prod' | 'test';
  
  /** Liste des IDs d'applications à afficher - OPTIONNEL */
  apps?: string[];
}

Paramètres Détaillés

`currentApp` (string) - REQUIS

L'identifiant de l'application courante. Cette application sera automatiquement exclue de la liste affichée.

Exemples: 'ine', 'dashboard', 'campusen'

`environment` (string) - REQUIS

L'environnement d'exécution qui détermine les URLs utilisées pour chaque application.

'dev' : URLs de développement
'prod' : URLs de production
'test' : URLs de test/staging

`apps` (string[]) - OPTIONNEL

Liste des IDs d'applications à inclure. Si non fourni, toutes les applications du registre seront affichées (sauf currentApp).

Exemple:

apps: ['dashboard', 'campusen', 'formations', 'ine']

Applications Disponibles

Le registre central inclut les applications suivantes :

| ID | Nom | Description | Icône | |-----------------|---------------|-------------------------------|--------| | dashboard | Dashboard | Outil d'aide à la décision | 📊 | | campusen | Campusen | Gestion des orientations | 🎓 | | ine | INE | Identifiant National Étudiant | 🆔 | | formations | Formations | Les formations au Sénégal | 📚 | | deliberation | Délibération | Délibération | ✅ | | inscriptions | Inscriptions | Inscriptions des étudiants | 👨‍🎓 | | votes | Votes | Gestionnaire de votes | 🗳️ | | bibliotheque | Bibliothèque | Gestion bibliothèque | 📖 | | scolarite | Scolarité | Gestion de la scolarité | 📝 | | bourses | Bourses | Gestion des bourses | 💰 |

💡 Exemples Complets

Exemple 1: Application INE en Production

import { Component } from '@angular/core';
import { SelfServiceComponent, SelfService } from 'sigesr-self-service-lib';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SelfServiceComponent],
  template: `
    <nav class="navbar">
      <div class="logo">INE - SIGESR</div>
      <self-service
        [user]="user"
        [config]="config"
        (onLogout)="logout()"
        (onAppSelected)="switchApp($event)"
      ></self-service>
    </nav>
  `
})
export class AppComponent {
  user = {
    username: 'faal',
    email: '[email protected]',
    fullname: 'Ibra Faal'
  };

  config = {
    showProfil: true,
    showAppSelector: true,
    appBuilder: {
      currentApp: 'ine',        // App courante (sera exclue)
      environment: 'prod',      // URLs de production
      // apps non défini = toutes les apps sauf 'ine'
    },
    currentAppId: 'ine'
  };

  constructor(private selfService: SelfService) {
    this.selfService.setUserProfile(this.user);
  }

  logout() {
    console.log('Déconnexion');
  }

  switchApp(app: any) {
    console.log('Navigation vers:', app.name, app.url);
  }
}

Exemple 2: Dashboard en Dev avec Apps Spécifiques

config = {
  showProfil: true,
  showAppSelector: true,
  appBuilder: {
    currentApp: 'dashboard',
    environment: 'dev',         // URLs localhost
    apps: [                     // Seulement ces apps
      'campusen',
      'ine',
      'formations',
      'inscriptions'
    ]
  }
};

Exemple 3: Environnement de Test

config = {
  showProfil: true,
  showAppSelector: true,
  appBuilder: {
    currentApp: 'formations',
    environment: 'test',        // URLs de test
    apps: [                     // Apps de test
      'dashboard',
      'campusen',
      'ine'
    ]
  }
};

Exemple 4: Configuration Dynamique selon l'Environnement

import { environment } from './environments/environment';

export class AppComponent {
  config = {
    showProfil: true,
    showAppSelector: true,
    appBuilder: {
      currentApp: 'ine',
      environment: environment.production ? 'prod' : 'dev',
      apps: environment.production 
        ? undefined  // Toutes les apps en prod
        : ['dashboard', 'campusen', 'ine']  // Apps limitées en dev
    }
  };
}

🔍 Service AppBuilderService

Le service AppBuilderService peut être utilisé directement pour des cas d'usage avancés.

import { Injectable } from '@angular/core';
import { AppBuilderService } from 'sigesr-self-service-lib';

@Injectable()
export class MyService {
  constructor(private appBuilder: AppBuilderService) {}

  getAvailableApps() {
    // Construire une liste d'applications
    const apps = this.appBuilder.buildApplications(
      'ine',     // App courante
      'prod',    // Environnement
      ['dashboard', 'campusen']  // Apps spécifiques
    );
    
    return apps;
  }

  checkAppValidity(appId: string) {
    // Vérifier si une app existe
    return this.appBuilder.isValidApp(appId);
  }

  getAppDetails(appId: string) {
    // Récupérer les infos d'une app
    return this.appBuilder.getApplication(appId, 'prod');
  }

  getAllApps() {
    // Liste de tous les IDs disponibles
    return this.appBuilder.getAllAppIds();
  }
}

Méthodes du AppBuilderService

| Méthode | Description | Paramètres | Retour | |-----------------------|------------------------------- |--------------------------|-------------| | buildApplications() | Construit la liste d'apps | currentApp, env, apps? | Application[] | | isValidApp() | Vérifie l'existence d'une app | appId | boolean | | getApplication() | Récupère une app spécifique | appId, env? | Application \| null | | getAllAppIds() | Liste tous les IDs disponibles | - | string[] | | validateAppList() | Valide une liste d'IDs | apps | string[] |

🎨 Améliorations UI/UX

Nouvelle Grille d'Applications

✨ Design card moderne avec ombres et bordures élégantes
🎭 Animations fluides au survol avec transformations 3D
🎯 Indicateurs visuels pour l'application active
💫 Effets de pulse pour les badges de notifications
🌈 Dégradés subtils et effets de lumière
📏 Espacement optimisé et layout responsive

Effets Visuels

Rotation légère des icônes au survol
Élévation progressive des cards
Indicateur actif avec animation de pulse
Scrollbar personnalisée élégante
Transitions douces sur tous les états

📋 Migration depuis l'Ancienne Version

Avant (Méthode Manuelle)

const defaultApplications: Application[] = [
  {
    id: "dashboard",
    name: "Dashboard",
    description: "Outil d'aide à la décision",
    icon: "📊",
    color: "#F59E0B",
    url: "https://indicateurs.sigesr.sn"
  },
  // ... autres apps
];

this.selfService.setApplications(defaultApplications);

Après (Méthode Automatique)

config = {
  appBuilder: {
    currentApp: 'ine',
    environment: 'prod',
    apps: ['dashboard', 'campusen', 'formations']
  }
};

// Pas besoin de setApplications(), c'est automatique !

Avantages de la Migration

✅ Plus de maintenance : Les URLs sont centralisées ✅ Pas d'erreurs : Validation automatique des données ✅ Multi-environnements : Changement d'env en 1 ligne ✅ Moins de code : Configuration simplifiée ✅ Type-safe : TypeScript vérifie les paramètres

🔒 Validation et Sécurité

Le système inclut plusieurs niveaux de validation :

Validation des paramètres requis : Erreur si currentApp ou environment manquant
Validation des IDs d'applications : Apps invalides ignorées avec warning
Normalisation des données : Trim et lowercase automatiques
Dédoublonnage : Les IDs dupliqués sont supprimés
Environnement par défaut : Fallback sur 'prod' si environnement invalide

// Exemple de logs console
[AppBuilder] 5 application(s) construite(s) pour l'environnement "prod"
[AppBuilder] Application inconnue: "invalid_app". Ignorée.
[SelfService] appBuilder.currentApp est requis

🌍 Configuration des Environnements

Dans environment.ts

// environment.ts (dev)
export const environment = {
  production: false,
  appEnvironment: 'dev' as const
};

// environment.prod.ts (production)
export const environment = {
  production: true,
  appEnvironment: 'prod' as const
};

Utilisation

import { environment } from './environments/environment';

config = {
  appBuilder: {
    currentApp: 'ine',
    environment: environment.appEnvironment
  }
};

📱 Responsive Design

La librairie s'adapte automatiquement à tous les écrans :

Desktop : Grille 3 colonnes, textes complets
Tablette : Grille 2 colonnes, optimisations
Mobile : Grille 2 colonnes, textes masqués

🎯 Cas d'Usage Avancés

1. Applications Différentes par Rôle

getUserApps(userRole: string): string[] {
  if (userRole === 'admin') {
    return ['dashboard', 'inscriptions', 'deliberation', 'bourses'];
  } else if (userRole === 'student') {
    return ['ine', 'formations', 'inscriptions'];
  }
  return ['dashboard'];
}

config = {
  appBuilder: {
    currentApp: 'dashboard',
    environment: 'prod',
    apps: this.getUserApps(user.role)
  }
};

2. Applications avec Badges Dynamiques

ngOnInit() {
  this.selfService.applications$.subscribe(apps => {
    // Ajouter des badges aux apps
    apps.forEach(app => {
      if (app.id === 'inscriptions') {
        this.selfService.updateApplication('inscriptions', {
          badge: this.getNewInscriptionsCount()
        });
      }
    });
  });
}

3. Ajout d'Applications Personnalisées

// Utiliser le builder pour les apps standard
config = {
  appBuilder: {
    currentApp: 'dashboard',
    environment: 'prod'
  }
};

// Ajouter une app custom après initialisation
ngOnInit() {
  this.selfService.addApplication({
    id: 'custom-tool',
    name: 'Mon Outil',
    icon: '🔧',
    url: '/custom',
    color: '#FF0000'
  });
}

🐛 Dépannage

Les applications ne s'affichent pas

Vérifiez que :

showAppSelector n'est pas à false
currentApp et environment sont bien fournis
La liste apps contient des IDs valides
Vous avez bien importé SelfServiceComponent

Les URLs sont incorrectes