lionsdev/lions-user-manager-client-quarkus-primefaces-freya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update - Lions User Manager - Client (Quarkus PrimeFaces Freya)

Browse Source
This commit is contained in:
dahoud
2025-12-06 22:07:05 +00:00
parent 53ea02ccad
commit 51d087e5be
189 changed files with 38558 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
target/classes/META-INF/resources/templates/components/shared/README_KPI.md Normal file
View File

@@ -0,0 +1,240 @@
# 📊 Composants KPI Réutilisables - Écosystème LionsDev
**Version**: 2.0.0
**Date**: 2025-01-29
**Pattern**: WOU/DRY (Write Once Use / Don't Repeat Yourself)
---
## 🎯 Vue d'Ensemble
Ces composants KPI (Indicateurs de Performance) sont conçus pour être **100% réutilisables** dans tous les projets de l'écosystème **lionsdev**. Ils suivent les meilleures pratiques de PrimeFaces Freya et offrent une expérience utilisateur cohérente.
---
## 📦 Composants Disponibles
### 1. **kpi-card.xhtml** - Carte KPI Individuelle
Composant principal pour afficher un indicateur de performance unique.
**Localisation**: `/templates/components/shared/cards/kpi-card.xhtml`
**Paramètres principaux**:
- `title` (requis) - Titre du KPI
- `value` (requis) - Valeur à afficher
- `icon` (requis) - Icône PrimeIcons
- `iconColor` (requis) - Couleur de l'icône
- `growthValue` (optionnel) - Valeur de croissance
- `growthLabel` (optionnel) - Libellé de croissance
- `progressValue` (optionnel) - Barre de progression 0-100
- `statusIcon`, `statusLabel`, `statusValue` (optionnel) - Mode statut
- `clickable` (défaut: false) - Rendre cliquable
- `clickOutcome` (optionnel) - Redirection au clic
**Exemple simple**:
```xhtml
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="Total Utilisateurs" />
<ui:param name="value" value="#{bean.totalUsers}" />
<ui:param name="icon" value="pi-users" />
<ui:param name="iconColor" value="blue-600" />
</ui:include>
```
**Exemple avec croissance**:
```xhtml
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="Utilisateurs Actifs" />
<ui:param name="value" value="#{bean.activeUsers}" />
<ui:param name="icon" value="pi-user-check" />
<ui:param name="iconColor" value="green-600" />
<ui:param name="growthValue" value="#{bean.growthPercent}" />
<ui:param name="growthLabel" value="ce mois" />
<ui:param name="progressValue" value="#{bean.progressPercent}" />
</ui:include>
```
**Exemple avec statut**:
```xhtml
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="Sessions Actives" />
<ui:param name="value" value="#{bean.activeSessions}" />
<ui:param name="icon" value="pi-sign-in" />
<ui:param name="iconColor" value="purple-600" />
<ui:param name="statusIcon" value="pi-check-circle" />
<ui:param name="statusLabel" value="En ligne" />
<ui:param name="statusValue" value="#{bean.onlineUsers} actifs" />
</ui:include>
```
---
### 2. **kpi-group.xhtml** - Groupe de KPI
Composant composite pour organiser plusieurs KPI dans une grille.
**Localisation**: `/templates/components/shared/dashboard/kpi-group.xhtml`
**Paramètres**:
- `title` (optionnel) - Titre de la section
- `columns` (défaut: 4) - Nombre de colonnes (1-6)
- `colSize` (optionnel) - Taille personnalisée
**Exemple**:
```xhtml
<ui:include src="/templates/components/shared/dashboard/kpi-group.xhtml">
<ui:param name="title" value="Statistiques Utilisateurs" />
<ui:param name="columns" value="4" />
<ui:define name="kpi-content">
<!-- KPI 1 -->
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="Total" />
<ui:param name="value" value="#{bean.total}" />
<ui:param name="icon" value="pi-users" />
<ui:param name="iconColor" value="blue-600" />
</ui:include>
<!-- KPI 2, 3, 4... -->
</ui:define>
</ui:include>
```
---
### 3. **dashboard-section.xhtml** - Section Dashboard
Composant composite pour créer des sections de dashboard réutilisables.
**Localisation**: `/templates/components/shared/dashboard/dashboard-section.xhtml`
**Paramètres**:
- `title` (requis) - Titre de la section
- `description` (optionnel) - Description
- `icon` (optionnel) - Icône
- `colSize` (défaut: "col-12") - Taille de colonne
- `showCard` (défaut: true) - Envelopper dans une carte
**Exemple**:
```xhtml
<ui:include src="/templates/components/shared/dashboard/dashboard-section.xhtml">
<ui:param name="title" value="Actions Rapides" />
<ui:param name="icon" value="pi-bolt" />
<ui:param name="colSize" value="col-12 lg:col-6" />
<ui:define name="section-content">
<!-- Contenu de la section -->
<div class="grid">
<div class="col-12 md:col-6">
<p:commandButton value="Action 1" />
</div>
</div>
</ui:define>
</ui:include>
```
---
### 4. **user-stat-card.xhtml** - Wrapper de Compatibilité
Wrapper de compatibilité ascendante qui délègue à `kpi-card.xhtml`.
**Note**: Pour de nouvelles implémentations, utilisez directement `kpi-card.xhtml`.
---
## 🎨 Couleurs Disponibles
Utilisez les couleurs PrimeFlex pour `iconColor`:
- `blue-600`, `blue-500`, `blue-400`
- `green-600`, `green-500`, `green-400`
- `purple-600`, `purple-500`, `purple-400`
- `orange-600`, `orange-500`, `orange-400`
- `red-600`, `red-500`, `red-400`
- `cyan-600`, `cyan-500`, `cyan-400`
- `pink-600`, `pink-500`, `pink-400`
---
## 📐 Tailles de Colonnes
Utilisez les classes PrimeFlex pour `colSize`:
- `col-12` - Pleine largeur
- `col-12 md:col-6` - 2 colonnes sur tablette+
- `col-12 md:col-6 lg:col-3` - 4 colonnes sur desktop (défaut)
- `col-12 md:col-4` - 3 colonnes
- `col-12 md:col-6 lg:col-2` - 6 colonnes
---
## 🔄 Réutilisabilité dans l'Écosystème LionsDev
Ces composants peuvent être utilisés dans:
- ✅ **lions-user-manager** (module actuel)
- ✅ **unionflow** (via dépendance Maven)
- ✅ **btpxpress** (via dépendance Maven)
- ✅ **Tout autre projet lionsdev** (via dépendance Maven)
**Avantages**:
- Code DRY (Don't Repeat Yourself)
- Interface utilisateur cohérente
- Maintenance centralisée
- Évolutivité garantie
---
## 📝 Bonnes Pratiques
1. **Toujours utiliser `kpi-card.xhtml`** pour de nouveaux KPI
2. **Utiliser `kpi-group.xhtml`** pour organiser plusieurs KPI
3. **Utiliser `dashboard-section.xhtml`** pour structurer les dashboards
4. **Respecter les conventions de couleurs** PrimeFlex
5. **Documenter les paramètres personnalisés** dans votre code
---
## 🚀 Exemple Complet de Dashboard
```xhtml
<div class="grid">
<!-- En-tête -->
<div class="col-12">
<ui:include src="/templates/components/layout/page-header.xhtml">
<ui:param name="title" value="Tableau de Bord" />
</ui:include>
</div>
<!-- KPIs -->
<div class="col-12">
<div class="grid">
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="Total" />
<ui:param name="value" value="#{bean.total}" />
<ui:param name="icon" value="pi-users" />
<ui:param name="iconColor" value="blue-600" />
</ui:include>
<!-- Autres KPI... -->
</div>
</div>
<!-- Sections -->
<ui:include src="/templates/components/shared/dashboard/dashboard-section.xhtml">
<ui:param name="title" value="Actions Rapides" />
<ui:define name="section-content">
<!-- Contenu -->
</ui:define>
</ui:include>
</div>
```
---
## 📚 Documentation Complète
Pour plus de détails, consultez:
- `/templates/components/README.md` - Documentation générale
- Code source des composants avec commentaires JSDoc
---
**Auteur**: Lions User Manager Team
**Licence**: Écosystème LionsDev

132
target/classes/META-INF/resources/templates/components/shared/buttons/button-user-action.xhtml Normal file
View File

@@ -0,0 +1,132 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!--
Composant réutilisable: Bouton Action Utilisateur (WOU/DRY Pattern)
Auteur: Lions User Manager
Version: 1.0.0
Description: Bouton générique pour actions utilisateur
Paramètres:
- value: String (requis) - Texte du bouton
- icon: String (optionnel) - Classe d'icône PrimeIcons
- hasAction: Boolean (défaut: false) - Indique si une action est fournie
- action: MethodExpression (optionnel) - Action à exécuter (requis si hasAction=true)
- hasOutcome: Boolean (défaut: false) - Indique si un outcome est fourni
- outcome: String (optionnel) - Page de redirection (requis si hasOutcome=true)
- onclick: String (optionnel) - Code JavaScript à exécuter au clic
- severity: String (défaut: "primary") - Severity: "primary", "success", "warning", "danger", "info", "secondary"
- size: String (défaut: "normal") - Taille: "small", "normal", "large"
- disabled: Boolean (défaut: false) - Désactiver le bouton
- update: String (optionnel) - Composants à mettre à jour
- process: String (défaut: "@this") - Composants à traiter
- styleClass: String (optionnel) - Classes CSS supplémentaires
Exemples d'utilisation:
1. Bouton simple:
<ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
<ui:param name="value" value="Créer Utilisateur" />
<ui:param name="icon" value="pi-user-plus" />
<ui:param name="action" value="#{userBean.createUser}" />
</ui:include>
2. Bouton avec redirection:
<ui:include src="/templates/components/shared/buttons/button-user-action.xhtml">
<ui:param name="value" value="Voir Profil" />
<ui:param name="icon" value="pi-eye" />
<ui:param name="outcome" value="/pages/user-manager/users/profile" />
</ui:include>
-->
<c:set var="severity" value="#{empty severity ? 'primary' : severity}" />
<c:set var="size" value="#{empty size ? 'normal' : size}" />
<c:set var="disabled" value="#{empty disabled ? false : disabled}" />
<c:set var="process" value="#{empty process ? '@this' : process}" />
<c:set var="hasAction" value="#{empty hasAction ? false : hasAction}" />
<c:set var="hasOutcome" value="#{empty hasOutcome ? false : hasOutcome}" />
<!-- Déterminer la classe selon la severity -->
<c:choose>
<c:when test="#{severity == 'primary'}">
<c:set var="buttonClass" value="p-button-primary" />
</c:when>
<c:when test="#{severity == 'success'}">
<c:set var="buttonClass" value="p-button-success" />
</c:when>
<c:when test="#{severity == 'warning'}">
<c:set var="buttonClass" value="p-button-warning" />
</c:when>
<c:when test="#{severity == 'danger'}">
<c:set var="buttonClass" value="p-button-danger" />
</c:when>
<c:when test="#{severity == 'info'}">
<c:set var="buttonClass" value="p-button-info" />
</c:when>
<c:otherwise>
<c:set var="buttonClass" value="p-button-secondary" />
</c:otherwise>
</c:choose>
<!-- Ajouter la taille -->
<c:if test="#{size == 'small'}">
<c:set var="buttonClass" value="#{buttonClass} p-button-sm" />
</c:if>
<c:if test="#{size == 'large'}">
<c:set var="buttonClass" value="#{buttonClass} p-button-lg" />
</c:if>
<!-- Ajouter les classes personnalisées -->
<c:if test="#{not empty styleClass}">
<c:set var="buttonClass" value="#{buttonClass} #{styleClass}" />
</c:if>
<c:choose>
<c:when test="#{hasAction}">
<p:commandButton
value="#{value}"
icon="#{not empty icon ? icon : ''}"
styleClass="#{buttonClass}"
disabled="#{disabled}"
action="#{action}"
update="#{not empty update ? update : '@form'}"
process="#{process}"
onclick="#{not empty onclick ? onclick : ''}" />
</c:when>
<c:when test="#{hasOutcome}">
<p:commandButton
value="#{value}"
icon="#{not empty icon ? icon : ''}"
styleClass="#{buttonClass}"
disabled="#{disabled}"
outcome="#{outcome}"
update="#{not empty update ? update : '@form'}"
process="#{process}"
onclick="#{not empty onclick ? onclick : ''}" />
</c:when>
<c:when test="#{not empty onclick}">
<p:commandButton
value="#{value}"
icon="#{not empty icon ? icon : ''}"
styleClass="#{buttonClass}"
disabled="#{disabled}"
type="button"
onclick="#{onclick}" />
</c:when>
<c:otherwise>
<p:commandButton
value="#{value}"
icon="#{not empty icon ? icon : ''}"
styleClass="#{buttonClass}"
disabled="true"
title="Aucune action définie" />
</c:otherwise>
</c:choose>
</ui:composition>

115
target/classes/META-INF/resources/templates/components/shared/cards/kpi-card-content.xhtml Normal file
View File

@@ -0,0 +1,115 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions">
<div class="p-4" style="min-height: 9rem;">
<!-- Header: Titre et Icône -->
<div class="flex align-items-center justify-content-between mb-3">
<span class="block text-600 font-medium text-sm">#{title}</span>
<div class="flex align-items-center justify-content-center surface-100 border-round-lg"
style="width: 2.5rem; height: 2.5rem;">
<i class="pi #{icon} text-#{iconColor} text-lg"></i>
</div>
</div>
<!-- Valeur principale -->
<div class="text-900 font-bold text-2xl mb-2">
<c:choose>
<c:when test="#{not empty value}">
<c:set var="valueStr" value="#{String.valueOf(value)}" />
<c:choose>
<c:when test="#{fn:startsWith(valueStr, '-') and fn:length(valueStr) == 1}">0</c:when>
<c:when test="#{fn:startsWith(valueStr, '...')}">0</c:when>
<c:otherwise>#{value}</c:otherwise>
</c:choose>
</c:when>
<c:otherwise>0</c:otherwise>
</c:choose>
</div>
<!-- Sous-titre -->
<c:if test="#{not empty subtitle}">
<div class="text-500 text-xs mb-2">#{subtitle}</div>
</c:if>
<!-- Section Croissance ou Statut -->
<c:choose>
<!-- Mode Statut (statusIcon fourni) -->
<c:when test="#{not empty statusIcon}">
<c:choose>
<c:when test="#{not empty statusValue and statusValue != '0' and statusValue != '0.0'}">
<div class="flex align-items-center mb-2">
<i class="pi #{statusIcon} text-green-500 text-sm mr-2"></i>
<span class="text-green-600 font-semibold text-sm mr-2">#{statusLabel}</span>
<span class="text-500 text-xs">#{statusValue}</span>
</div>
</c:when>
<c:otherwise>
<div class="text-500 text-xs mb-2">Aucun #{statusLabel}</div>
</c:otherwise>
</c:choose>
</c:when>
<!-- Mode Croissance -->
<c:otherwise>
<c:choose>
<!-- Croissance en nombre -->
<c:when test="#{growthType == 'number'}">
<c:choose>
<c:when test="#{showGrowth and not empty growthValue and growthValue != '0' and growthValue != '0.0'}">
<div class="flex align-items-center mb-2">
<i class="pi pi-arrow-up text-green-500 text-sm mr-2"></i>
<span class="text-green-600 font-semibold text-sm mr-2">+#{growthValue}</span>
<c:if test="#{not empty growthLabel}">
<span class="text-500 text-xs">#{growthLabel}</span>
</c:if>
</div>
</c:when>
<c:otherwise>
<div class="text-500 text-xs mb-2">#{noDataLabel}</div>
</c:otherwise>
</c:choose>
</c:when>
<!-- Croissance en pourcentage (défaut) -->
<c:otherwise>
<c:choose>
<c:when test="#{showGrowth and not empty growthValue and growthValue != '0' and growthValue != '0.0'}">
<div class="flex align-items-center mb-2">
<c:choose>
<c:when test="#{growthValue >= 0}">
<i class="pi pi-arrow-up text-green-500 text-sm mr-2"></i>
<span class="text-green-600 font-semibold text-sm mr-2">+#{growthValue}%</span>
</c:when>
<c:otherwise>
<i class="pi pi-arrow-down text-red-500 text-sm mr-2"></i>
<span class="text-red-600 font-semibold text-sm mr-2">#{growthValue}%</span>
</c:otherwise>
</c:choose>
<c:if test="#{not empty growthLabel}">
<span class="text-500 text-xs">#{growthLabel}</span>
</c:if>
</div>
</c:when>
<c:otherwise>
<div class="text-500 text-xs mb-2">#{noDataLabel}</div>
</c:otherwise>
</c:choose>
</c:otherwise>
</c:choose>
</c:otherwise>
</c:choose>
<!-- Barre de progression -->
<c:if test="#{showProgress and not empty progressValue}">
<p:progressBar value="#{progressValue}"
showValue="false"
styleClass="surface-200"
style="height: 0.5rem; width: 100%;" />
</c:if>
</div>
</ui:composition>

95
target/classes/META-INF/resources/templates/components/shared/cards/kpi-card.xhtml Normal file
View File

@@ -0,0 +1,95 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!--
Composant réutilisable: Carte KPI (Indicateur de Performance) - Écosystème LionsDev
Auteur: Lions User Manager
Version: 2.1.0
Description: Carte KPI générique et réutilisable pour tous les projets de l'écosystème lionsdev
-->
<c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
<c:set var="clickable" value="#{empty clickable ? false : clickable}" />
<c:set var="growthType" value="#{empty growthType ? 'percentage' : growthType}" />
<c:set var="showGrowth" value="#{empty showGrowth ? (not empty growthValue) : showGrowth}" />
<c:set var="showProgress" value="#{empty showProgress ? (not empty progressValue) : showProgress}" />
<c:set var="noDataLabel" value="#{empty noDataLabel ? 'Données non disponibles' : noDataLabel}" />
<div class="#{colSize}">
<c:choose>
<c:when test="#{clickable and not empty clickOutcome}">
<p:commandLink styleClass="card-link w-full #{styleClass}" outcome="#{clickOutcome}">
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
<ui:include src="/templates/components/shared/cards/kpi-card-content.xhtml">
<ui:param name="title" value="#{title}" />
<ui:param name="value" value="#{value}" />
<ui:param name="icon" value="#{icon}" />
<ui:param name="iconColor" value="#{iconColor}" />
<ui:param name="subtitle" value="#{subtitle}" />
<ui:param name="growthValue" value="#{growthValue}" />
<ui:param name="growthLabel" value="#{growthLabel}" />
<ui:param name="growthType" value="#{growthType}" />
<ui:param name="showGrowth" value="#{showGrowth}" />
<ui:param name="noDataLabel" value="#{noDataLabel}" />
<ui:param name="progressValue" value="#{progressValue}" />
<ui:param name="showProgress" value="#{showProgress}" />
<ui:param name="statusIcon" value="#{statusIcon}" />
<ui:param name="statusLabel" value="#{statusLabel}" />
<ui:param name="statusValue" value="#{statusValue}" />
</ui:include>
</div>
</p:commandLink>
</c:when>
<c:when test="#{clickable and not empty clickAction}">
<p:commandLink styleClass="card-link w-full #{styleClass}" action="#{clickAction}">
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
<ui:include src="/templates/components/shared/cards/kpi-card-content.xhtml">
<ui:param name="title" value="#{title}" />
<ui:param name="value" value="#{value}" />
<ui:param name="icon" value="#{icon}" />
<ui:param name="iconColor" value="#{iconColor}" />
<ui:param name="subtitle" value="#{subtitle}" />
<ui:param name="growthValue" value="#{growthValue}" />
<ui:param name="growthLabel" value="#{growthLabel}" />
<ui:param name="growthType" value="#{growthType}" />
<ui:param name="showGrowth" value="#{showGrowth}" />
<ui:param name="noDataLabel" value="#{noDataLabel}" />
<ui:param name="progressValue" value="#{progressValue}" />
<ui:param name="showProgress" value="#{showProgress}" />
<ui:param name="statusIcon" value="#{statusIcon}" />
<ui:param name="statusLabel" value="#{statusLabel}" />
<ui:param name="statusValue" value="#{statusValue}" />
</ui:include>
</div>
</p:commandLink>
</c:when>
<c:otherwise>
<div class="card surface-0 border-round-lg #{styleClass}">
<ui:include src="/templates/components/shared/cards/kpi-card-content.xhtml">
<ui:param name="title" value="#{title}" />
<ui:param name="value" value="#{value}" />
<ui:param name="icon" value="#{icon}" />
<ui:param name="iconColor" value="#{iconColor}" />
<ui:param name="subtitle" value="#{subtitle}" />
<ui:param name="growthValue" value="#{growthValue}" />
<ui:param name="growthLabel" value="#{growthLabel}" />
<ui:param name="growthType" value="#{growthType}" />
<ui:param name="showGrowth" value="#{showGrowth}" />
<ui:param name="noDataLabel" value="#{noDataLabel}" />
<ui:param name="progressValue" value="#{progressValue}" />
<ui:param name="showProgress" value="#{showProgress}" />
<ui:param name="statusIcon" value="#{statusIcon}" />
<ui:param name="statusLabel" value="#{statusLabel}" />
<ui:param name="statusValue" value="#{statusValue}" />
</ui:include>
</div>
</c:otherwise>
</c:choose>
</div>
</ui:composition>

67
target/classes/META-INF/resources/templates/components/shared/cards/user-stat-card.xhtml Normal file
View File

@@ -0,0 +1,67 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!--
Composant réutilisable: Carte Statistique Utilisateur (WOU/DRY Pattern)
Version 2.0.0 - Utilise maintenant kpi-card.xhtml en interne
Auteur: Lions User Manager
Description: Wrapper autour de kpi-card.xhtml pour compatibilité ascendante
Paramètres:
- title: String (requis) - Titre de la carte
- value: String/Number (requis) - Valeur à afficher
- icon: String (requis) - Classe d'icône PrimeIcons
- iconColor: String (requis) - Couleur de l'icône
- subtitle: String (optionnel) - Sous-titre
- trend: Number (optionnel) - Tendance (pourcentage) - Mappé vers growthValue
- trendLabel: String (optionnel) - Libellé de la tendance - Mappé vers growthLabel
- colSize: String (défaut: "col-12 md:col-6 lg:col-3") - Taille de colonne
- clickable: Boolean (défaut: false) - Rendre la carte cliquable
- clickOutcome: String (optionnel) - Page de redirection au clic
Note: Ce composant est un wrapper de compatibilité. Pour de nouvelles implémentations,
utilisez directement kpi-card.xhtml qui offre plus de fonctionnalités.
Exemples d'utilisation:
1. Carte simple:
<ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
<ui:param name="title" value="Total Utilisateurs" />
<ui:param name="value" value="#{userBean.totalUsers}" />
<ui:param name="icon" value="pi-users" />
<ui:param name="iconColor" value="blue-600" />
</ui:include>
2. Carte avec tendance:
<ui:include src="/templates/components/shared/cards/user-stat-card.xhtml">
<ui:param name="title" value="Utilisateurs Actifs" />
<ui:param name="value" value="#{userBean.activeUsers}" />
<ui:param name="icon" value="pi-user-check" />
<ui:param name="iconColor" value="green-600" />
<ui:param name="trend" value="#{userBean.activeUsersTrend}" />
<ui:param name="trendLabel" value="ce mois" />
</ui:include>
-->
<!-- Déléguer à kpi-card.xhtml -->
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="#{title}" />
<ui:param name="value" value="#{value}" />
<ui:param name="icon" value="#{icon}" />
<ui:param name="iconColor" value="#{iconColor}" />
<ui:param name="subtitle" value="#{subtitle}" />
<ui:param name="growthValue" value="#{trend}" />
<ui:param name="growthLabel" value="#{trendLabel}" />
<ui:param name="growthType" value="percentage" />
<ui:param name="colSize" value="#{colSize}" />
<ui:param name="clickable" value="#{clickable}" />
<ui:param name="clickOutcome" value="#{clickOutcome}" />
</ui:include>
</ui:composition>

77
target/classes/META-INF/resources/templates/components/shared/dashboard/dashboard-section.xhtml Normal file
View File

@@ -0,0 +1,77 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!--
Composant réutilisable: Section Dashboard - Écosystème LionsDev
Auteur: Lions User Manager
Version: 1.0.0
Description: Composant composite pour créer des sections de dashboard réutilisables
Paramètres:
- title: String (requis) - Titre de la section
- description: String (optionnel) - Description de la section
- icon: String (optionnel) - Icône PrimeIcons
- colSize: String (défaut: "col-12") - Taille de colonne
- showCard: Boolean (défaut: true) - Envelopper dans une carte
- styleClass: String (optionnel) - Classes CSS supplémentaires
Exemple:
ui:include src="/templates/components/shared/dashboard/dashboard-section.xhtml"
ui:param name="title" value="Actions Rapides"
ui:param name="icon" value="pi-bolt"
ui:param name="colSize" value="col-12 lg:col-6"
ui:define name="section-content"
Contenu de la section
ui:define
ui:include
-->
<c:set var="colSize" value="#{empty colSize ? 'col-12' : colSize}" />
<c:set var="showCard" value="#{empty showCard ? true : showCard}" />
<div class="#{colSize}">
<c:choose>
<c:when test="#{showCard}">
<div class="card #{styleClass}">
<c:if test="#{not empty title}">
<div class="flex align-items-center mb-3">
<c:if test="#{not empty icon}">
<i class="pi #{icon} mr-2 text-primary"></i>
</c:if>
<h5 class="font-semibold mb-0">#{title}</h5>
</div>
</c:if>
<c:if test="#{not empty description}">
<p class="text-600 text-sm mb-3">#{description}</p>
</c:if>
<ui:insert name="section-content">
<!-- Contenu de la section -->
</ui:insert>
</div>
</c:when>
<c:otherwise>
<c:if test="#{not empty title}">
<div class="flex align-items-center mb-3">
<c:if test="#{not empty icon}">
<i class="pi #{icon} mr-2 text-primary"></i>
</c:if>
<h5 class="font-semibold mb-0">#{title}</h5>
</div>
</c:if>
<c:if test="#{not empty description}">
<p class="text-600 text-sm mb-3">#{description}</p>
</c:if>
<ui:insert name="section-content">
<!-- Contenu de la section -->
</ui:insert>
</c:otherwise>
</c:choose>
</div>
</ui:composition>

78
target/classes/META-INF/resources/templates/components/shared/dashboard/kpi-group.xhtml Normal file
View File

@@ -0,0 +1,78 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!--
Composant réutilisable: Groupe de KPI (Composite) - Écosystème LionsDev
Auteur: Lions User Manager
Version: 1.0.0
Description: Composant composite pour afficher un groupe de KPI dans une grille
Paramètres:
- title: String (optionnel) - Titre de la section
- columns: Integer (défaut: 4) - Nombre de colonnes (1-12)
- colSize: String (optionnel) - Taille de colonne personnalisée (ex: "col-12 md:col-6 lg:col-3")
- showTitle: Boolean (défaut: true si title fourni) - Afficher le titre
- styleClass: String (optionnel) - Classes CSS supplémentaires
Utilisation:
Ce composant doit être utilisé avec des ui:param pour passer les KPI individuels.
Chaque KPI doit être inclus avec kpi-card.xhtml.
Exemple:
<ui:include src="/templates/components/shared/dashboard/kpi-group.xhtml">
<ui:param name="title" value="Statistiques Utilisateurs" />
<ui:param name="columns" value="4" />
<ui:define name="kpi-content">
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
<ui:param name="title" value="Total" />
<ui:param name="value" value="#{bean.total}" />
<ui:param name="icon" value="pi-users" />
<ui:param name="iconColor" value="blue-600" />
</ui:include>
Autres KPI à ajouter ici
</ui:define>
</ui:include>
-->
<c:set var="columns" value="#{empty columns ? 4 : columns}" />
<c:set var="showTitle" value="#{empty showTitle ? (not empty title) : showTitle}" />
<c:choose>
<c:when test="#{columns == 1}">
<c:set var="colSize" value="col-12" />
</c:when>
<c:when test="#{columns == 2}">
<c:set var="colSize" value="col-12 md:col-6" />
</c:when>
<c:when test="#{columns == 3}">
<c:set var="colSize" value="col-12 md:col-6 lg:col-4" />
</c:when>
<c:when test="#{columns == 4}">
<c:set var="colSize" value="col-12 md:col-6 lg:col-3" />
</c:when>
<c:when test="#{columns == 6}">
<c:set var="colSize" value="col-12 md:col-6 lg:col-2" />
</c:when>
<c:otherwise>
<c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
</c:otherwise>
</c:choose>
<div class="mb-4 #{styleClass}">
<c:if test="#{showTitle}">
<h5 class="font-semibold mb-3">#{title}</h5>
</c:if>
<div class="grid">
<ui:insert name="kpi-content">
<!-- Les KPI seront insérés ici -->
</ui:insert>
</div>
</div>
</ui:composition>

163
target/classes/META-INF/resources/templates/components/shared/forms/user-form-field.xhtml Normal file
View File

@@ -0,0 +1,163 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<!--
Composant réutilisable: Champ Formulaire Utilisateur (WOU/DRY Pattern)
Auteur: Lions User Manager
Version: 1.0.0
Description: Champ de formulaire générique pour utilisateur
Paramètres:
- id: String (requis) - ID du champ
- label: String (requis) - Label du champ
- value: Object (requis) - Valeur du champ
- type: String (défaut: "text") - Type: "text", "email", "password", "number", "textarea", "select", "checkbox", "calendar"
- required: Boolean (défaut: false) - Champ requis
- readonly: Boolean (défaut: false) - Mode lecture seule
- placeholder: String (optionnel) - Placeholder
- helpText: String (optionnel) - Texte d'aide
- styleClass: String (optionnel) - Classes CSS supplémentaires
- selectItems: List (optionnel) - Items pour select
- rows: Number (optionnel, défaut: 3) - Nombre de lignes pour textarea
Exemples d'utilisation:
1. Champ texte:
<ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
<ui:param name="id" value="username" />
<ui:param name="label" value="Nom d'utilisateur" />
<ui:param name="value" value="#{user.username}" />
<ui:param name="required" value="true" />
</ui:include>
2. Champ email:
<ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
<ui:param name="id" value="email" />
<ui:param name="label" value="Email" />
<ui:param name="value" value="#{user.email}" />
<ui:param name="type" value="email" />
<ui:param name="required" value="true" />
</ui:include>
3. Champ select:
<ui:include src="/templates/components/shared/forms/user-form-field.xhtml">
<ui:param name="id" value="statut" />
<ui:param name="label" value="Statut" />
<ui:param name="value" value="#{user.statut}" />
<ui:param name="type" value="select" />
<ui:param name="selectItems" value="#{userBean.statutOptions}" />
</ui:include>
-->
<c:set var="type" value="#{empty type ? 'text' : type}" />
<c:set var="required" value="#{empty required ? false : required}" />
<c:set var="readonly" value="#{empty readonly ? false : readonly}" />
<c:set var="rows" value="#{empty rows ? 3 : rows}" />
<div class="field">
<p:outputLabel for="#{id}" value="#{label}#{required ? ' *' : ''}" />
<c:choose>
<!-- Champ texte -->
<c:when test="#{type == 'text' or type == 'email'}">
<p:inputText
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
placeholder="#{placeholder}"
type="#{type == 'email' ? 'email' : 'text'}"
styleClass="w-full #{styleClass}" />
</c:when>
<!-- Champ mot de passe -->
<c:when test="#{type == 'password'}">
<p:password
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
placeholder="#{placeholder}"
feedback="#{not empty feedback ? feedback : false}"
styleClass="w-full #{styleClass}" />
</c:when>
<!-- Champ nombre -->
<c:when test="#{type == 'number'}">
<p:inputNumber
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
placeholder="#{placeholder}"
styleClass="w-full #{styleClass}" />
</c:when>
<!-- Champ textarea -->
<c:when test="#{type == 'textarea'}">
<p:inputTextarea
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
placeholder="#{placeholder}"
rows="#{rows}"
styleClass="w-full #{styleClass}" />
</c:when>
<!-- Champ select -->
<c:when test="#{type == 'select'}">
<p:selectOneMenu
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
styleClass="w-full #{styleClass}">
<f:selectItem itemLabel="Sélectionner..." itemValue="" />
<f:selectItems value="#{selectItems}" />
</p:selectOneMenu>
</c:when>
<!-- Champ checkbox -->
<c:when test="#{type == 'checkbox'}">
<p:selectBooleanCheckbox
id="#{id}"
value="#{value}"
readonly="#{readonly}" />
</c:when>
<!-- Champ calendar -->
<c:when test="#{type == 'calendar'}">
<p:calendar
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
pattern="dd/MM/yyyy"
styleClass="w-full #{styleClass}" />
</c:when>
<!-- Par défaut: champ texte -->
<c:otherwise>
<p:inputText
id="#{id}"
value="#{value}"
required="#{required}"
readonly="#{readonly}"
placeholder="#{placeholder}"
styleClass="w-full #{styleClass}" />
</c:otherwise>
</c:choose>
<c:if test="#{not empty helpText}">
<small class="text-color-secondary text-xs">#{helpText}</small>
</c:if>
</div>
</ui:composition>

191
target/classes/META-INF/resources/templates/components/shared/tables/user-data-table.xhtml Normal file
View File

@@ -0,0 +1,191 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:lum="http://xmlns.jcp.org/jsf/composite/components">
<!--
Composant réutilisable: Tableau Utilisateurs (WOU/DRY Pattern)
Auteur: Lions User Manager
Version: 1.0.0
Description: Tableau de données pour afficher une liste d'utilisateurs
Paramètres:
- users: List&lt;UserDTO&gt; (requis) - Liste des utilisateurs
- var: String (défaut: "user") - Nom de la variable pour itération
- tableId: String (défaut: "userTable") - ID du tableau
- paginator: Boolean (défaut: true) - Activer la pagination
- rows: Number (défaut: 20) - Nombre de lignes par page
- showActions: Boolean (défaut: true) - Afficher la colonne actions
- showRoles: Boolean (défaut: true) - Afficher la colonne rôles
- showEmail: Boolean (défaut: true) - Afficher la colonne email
- showStatus: Boolean (défaut: true) - Afficher la colonne statut
- showSelection: Boolean (défaut: false) - Activer la sélection
- selection: UserDTO (optionnel) - Utilisateur sélectionné
- selectionMode: String (défaut: "single") - Mode: "single" ou "multiple"
- totalRecords: Long (optionnel) - Nombre total d'enregistrements pour l'affichage
- hasOnPageChange: Boolean (défaut: false) - Indique si un gestionnaire de pagination est fourni
- onPageChange: MethodExpression (optionnel) - Méthode à appeler lors du changement de page (requis si hasOnPageChange=true)
- lazy: Boolean (défaut: false) - Activer le chargement paresseux
- update: String (optionnel) - Composants à mettre à jour
- styleClass: String (optionnel) - Classes CSS supplémentaires
Exemples d'utilisation:
1. Tableau simple:
<ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
<ui:param name="users" value="#{userBean.users}" />
</ui:include>
2. Tableau avec sélection:
<ui:include src="/templates/components/shared/tables/user-data-table.xhtml">
<ui:param name="users" value="#{userBean.users}" />
<ui:param name="showSelection" value="true" />
<ui:param name="selection" value="#{userBean.selectedUser}" />
</ui:include>
-->
<c:set var="varName" value="#{empty var ? 'user' : var}" />
<c:set var="tableId" value="#{empty tableId ? 'userTable' : tableId}" />
<c:set var="paginator" value="#{empty paginator ? true : paginator}" />
<c:set var="rows" value="#{empty rows ? 20 : rows}" />
<c:set var="showActions" value="#{empty showActions ? true : showActions}" />
<c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
<c:set var="showEmail" value="#{empty showEmail ? true : showEmail}" />
<c:set var="showStatus" value="#{empty showStatus ? true : showStatus}" />
<c:set var="showSelection" value="#{empty showSelection ? false : showSelection}" />
<c:set var="selectionMode" value="#{empty selectionMode ? 'single' : selectionMode}" />
<c:set var="hasOnPageChange" value="#{empty hasOnPageChange ? false : hasOnPageChange}" />
<p:dataTable
id="#{tableId}"
value="#{users}"
var="user"
rowKey="#{user.id}"
paginator="#{paginator}"
rows="#{rows}"
rowCount="#{not empty totalRecords ? totalRecords : (users != null ? users.size() : 0)}"
selection="#{selection}"
selectionMode="#{selectionMode}"
styleClass="p-datatable-sm p-datatable-gridlines p-datatable-striped w-full #{styleClass}"
rowStyleClass="p-datatable-row"
widgetVar="#{tableId}Widget"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,20,50,100"
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords}"
emptyMessage="Aucun utilisateur trouvé"
reflow="true"
responsiveLayout="scroll"
lazy="#{not empty lazy and lazy}">
<f:facet name="header">
<div class="flex align-items-center justify-content-between">
<span class="text-900 font-semibold text-xl">Utilisateurs</span>
<c:if test="#{not empty totalRecords}">
<span class="text-600 text-sm">Total: #{totalRecords}</span>
</c:if>
</div>
</f:facet>
<!-- Gestionnaire d'événements pour la pagination -->
<c:if test="#{hasOnPageChange}">
<p:ajax event="page" listener="#{onPageChange}" update="#{not empty update ? update : tableId}" />
</c:if>
<!-- Colonne de sélection -->
<c:if test="#{showSelection}">
<p:column selectionMode="#{selectionMode}" style="width: 50px" />
</c:if>
<!-- Colonne Username -->
<p:column headerText="Nom d'utilisateur" sortBy="#{user.username}" style="width: 200px">
<div class="flex align-items-center py-2">
<div class="border-circle overflow-hidden mr-2 flex-shrink-0" style="width: 36px; height: 36px;">
<div class="bg-primary text-white flex align-items-center justify-content-center w-full h-full">
<span style="font-size: 0.875rem; font-weight: bold;">
#{user.prenom != null ? user.prenom.substring(0,1) : 'U'}#{user.nom != null ? user.nom.substring(0,1) : ''}
</span>
</div>
</div>
<span class="font-semibold text-900">#{user.username}</span>
</div>
</p:column>
<!-- Colonne Nom complet -->
<p:column headerText="Nom complet" sortBy="#{user.nom}" style="width: 220px">
<div class="flex flex-column py-2">
<span class="font-medium text-900">#{user.prenom} #{user.nom}</span>
<c:if test="#{not empty user.fonction}">
<small class="text-600 text-xs mt-1">#{user.fonction}</small>
</c:if>
</div>
</p:column>
<!-- Colonne Email -->
<c:if test="#{showEmail}">
<p:column headerText="Email" sortBy="#{user.email}" style="width: 250px">
<div class="flex align-items-center py-2">
<i class="pi pi-envelope text-500 mr-2"></i>
<span class="text-900">#{user.email}</span>
<c:if test="#{user.emailVerified}">
<i class="pi pi-check-circle text-green-500 ml-2" title="Email vérifié"></i>
</c:if>
</div>
</p:column>
</c:if>
<!-- Colonne Statut -->
<c:if test="#{showStatus}">
<p:column headerText="Statut" sortBy="#{user.statut}" style="width: 130px">
<div class="flex align-items-center py-2">
<p:tag
value="#{user.statut != null ? user.statut : 'INCONNU'}"
severity="#{user.enabled ? 'success' : 'danger'}" />
</div>
</p:column>
</c:if>
<!-- Colonne Rôles -->
<c:if test="#{showRoles}">
<p:column headerText="Rôles" style="width: 200px">
<div class="flex flex-wrap gap-1 py-2 align-items-center">
<c:choose>
<c:when test="#{user.realmRoles != null and !user.realmRoles.isEmpty()}">
<c:forEach var="role" items="#{user.realmRoles}" varStatus="status">
<c:if test="#{status.index &lt; 3}">
<p:tag value="#{role}" severity="info" styleClass="text-xs" />
</c:if>
</c:forEach>
<c:if test="#{user.realmRoles.size() &gt; 3}">
<p:tag value="+#{user.realmRoles.size() - 3}" severity="secondary" styleClass="text-xs" />
</c:if>
</c:when>
<c:otherwise>
<span class="text-500 text-xs">Aucun rôle</span>
</c:otherwise>
</c:choose>
</div>
</p:column>
</c:if>
<!-- Colonne Actions -->
<c:if test="#{showActions}">
<p:column headerText="Actions" style="width: 100px" exportable="false">
<div class="flex justify-content-center align-items-center" style="min-height: 3rem;">
<lum:user-action-dropdown
userId="#{user.id}"
userEnabled="#{user.enabled}"
update="#{not empty update ? update : tableId}"
activateAction="#{activateAction}"
deactivateAction="#{deactivateAction}"
deleteAction="#{deleteAction}" />
</div>
</p:column>
</c:if>
</p:dataTable>
</ui:composition>