Update - Lions User Manager - Client (Quarkus PrimeFaces Freya)
This commit is contained in:
dahoud
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user