121 lines
6.0 KiB
HTML
121 lines
6.0 KiB
HTML
<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 Statistiques Audit (WOU/DRY Pattern)
|
|
|
|
Auteur: Lions User Manager
|
|
Version: 1.0.0
|
|
Description: Affiche des statistiques d'audit dans une carte
|
|
|
|
Paramètres:
|
|
- title: String (requis) - Titre de la carte
|
|
- value: 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)
|
|
- trendLabel: String (optionnel) - Libellé de la tendance
|
|
- colSize: String (défaut: "col-12 md:col-6 lg:col-3") - Taille de colonne
|
|
- clickable: Boolean (défaut: false) - Rendre la carte cliquable
|
|
- clickAction: String (optionnel) - Action au clic
|
|
|
|
Exemples d'utilisation:
|
|
|
|
1. Carte simple:
|
|
<ui:include src="/templates/components/audit/audit-stats-card.xhtml">
|
|
<ui:param name="title" value="Total Actions" />
|
|
<ui:param name="value" value="#{auditBean.totalActions}" />
|
|
<ui:param name="icon" value="pi-history" />
|
|
<ui:param name="iconColor" value="blue-600" />
|
|
</ui:include>
|
|
|
|
2. Carte avec tendance:
|
|
<ui:include src="/templates/components/audit/audit-stats-card.xhtml">
|
|
<ui:param name="title" value="Actions Réussies" />
|
|
<ui:param name="value" value="#{auditBean.successCount}" />
|
|
<ui:param name="icon" value="pi-check-circle" />
|
|
<ui:param name="iconColor" value="green-600" />
|
|
<ui:param name="trend" value="#{auditBean.successTrend}" />
|
|
<ui:param name="trendLabel" value="vs mois dernier" />
|
|
</ui:include>
|
|
-->
|
|
|
|
<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}" />
|
|
|
|
<div class="field #{colSize}">
|
|
<c:choose>
|
|
<c:when test="#{clickable and not empty clickAction}">
|
|
<p:commandLink
|
|
styleClass="card-link"
|
|
action="#{clickAction}">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200 p-4">
|
|
<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>
|
|
|
|
<div class="text-900 font-bold text-2xl mb-2">#{value}</div>
|
|
|
|
<c:if test="#{not empty subtitle}">
|
|
<div class="text-500 text-xs mb-2">#{subtitle}</div>
|
|
</c:if>
|
|
|
|
<c:if test="#{not empty trend}">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
|
|
<span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
|
|
#{trend >= 0 ? '+' : ''}#{trend}%
|
|
</span>
|
|
<c:if test="#{not empty trendLabel}">
|
|
<span class="text-500 text-xs">#{trendLabel}</span>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</p:commandLink>
|
|
</c:when>
|
|
|
|
<c:otherwise>
|
|
<div class="card surface-0 border-round-lg p-4">
|
|
<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>
|
|
|
|
<div class="text-900 font-bold text-2xl mb-2">#{value}</div>
|
|
|
|
<c:if test="#{not empty subtitle}">
|
|
<div class="text-500 text-xs mb-2">#{subtitle}</div>
|
|
</c:if>
|
|
|
|
<c:if test="#{not empty trend}">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-arrow-#{trend >= 0 ? 'up' : 'down'} text-#{trend >= 0 ? 'green' : 'red'}-500 text-sm mr-2"></i>
|
|
<span class="text-#{trend >= 0 ? 'green' : 'red'}-600 font-semibold text-sm mr-2">
|
|
#{trend >= 0 ? '+' : ''}#{trend}%
|
|
</span>
|
|
<c:if test="#{not empty trendLabel}">
|
|
<span class="text-500 text-xs">#{trendLabel}</span>
|
|
</c:if>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</div>
|
|
|
|
</ui:composition>
|
|
|