Update - Lions User Manager - Client (Quarkus PrimeFaces Freya)
This commit is contained in:
dahoud
@@ -0,0 +1,110 @@
|
||||
<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: Ligne de Log d'Audit (WOU/DRY Pattern)
|
||||
|
||||
Auteur: Lions User Manager
|
||||
Version: 1.0.0
|
||||
Description: Affiche une ligne de log d'audit avec informations détaillées
|
||||
|
||||
Paramètres:
|
||||
- auditLog: AuditLogDTO (requis) - Le log d'audit à afficher
|
||||
- showDetails: Boolean (défaut: false) - Afficher les détails complets
|
||||
- showActions: Boolean (défaut: false) - Afficher les actions possibles
|
||||
- compact: Boolean (défaut: false) - Mode compact
|
||||
- styleClass: String (optionnel) - Classes CSS supplémentaires
|
||||
|
||||
Exemples d'utilisation:
|
||||
|
||||
1. Ligne simple:
|
||||
<ui:include src="/templates/components/audit/audit-log-row.xhtml">
|
||||
<ui:param name="auditLog" value="#{log}" />
|
||||
</ui:include>
|
||||
|
||||
2. Ligne avec détails:
|
||||
<ui:include src="/templates/components/audit/audit-log-row.xhtml">
|
||||
<ui:param name="auditLog" value="#{log}" />
|
||||
<ui:param name="showDetails" value="true" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<c:set var="showDetails" value="#{empty showDetails ? false : showDetails}" />
|
||||
<c:set var="showActions" value="#{empty showActions ? false : showActions}" />
|
||||
<c:set var="compact" value="#{empty compact ? false : compact}" />
|
||||
|
||||
<!-- Déterminer la severity selon le succès -->
|
||||
<c:set var="severity" value="#{auditLog.succes ? 'success' : 'danger'}" />
|
||||
<c:set var="icon" value="#{auditLog.succes ? 'pi-check-circle' : 'pi-times-circle'}" />
|
||||
|
||||
<div class="audit-log-row flex align-items-center gap-3 p-3 border-round surface-border border-1 #{styleClass}"
|
||||
style="#{compact ? 'padding: 0.5rem;' : ''}">
|
||||
|
||||
<!-- Icône de statut -->
|
||||
<div class="flex align-items-center justify-content-center"
|
||||
style="width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--#{severity}-100);">
|
||||
<i class="pi #{icon} text-#{severity}-600"></i>
|
||||
</div>
|
||||
|
||||
<!-- Informations principales -->
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-1">
|
||||
<strong class="text-900">#{auditLog.typeAction}</strong>
|
||||
<p:tag
|
||||
value="#{auditLog.succes ? 'Succès' : 'Échec'}"
|
||||
severity="#{severity}"
|
||||
styleClass="text-xs" />
|
||||
</div>
|
||||
|
||||
<div class="text-color-secondary text-sm">
|
||||
<c:if test="#{not empty auditLog.acteurUsername}">
|
||||
<span><i class="pi pi-user mr-1"></i>#{auditLog.acteurUsername}</span>
|
||||
</c:if>
|
||||
<c:if test="#{not empty auditLog.ressourceType}">
|
||||
<span class="ml-3"><i class="pi pi-database mr-1"></i>#{auditLog.ressourceType}</span>
|
||||
</c:if>
|
||||
<c:if test="#{not empty auditLog.dateAction}">
|
||||
<span class="ml-3"><i class="pi pi-calendar mr-1"></i>#{auditLog.dateAction}</span>
|
||||
</c:if>
|
||||
</div>
|
||||
|
||||
<!-- Détails (si affichés) -->
|
||||
<c:if test="#{showDetails}">
|
||||
<div class="mt-2 text-color-secondary text-xs">
|
||||
<c:if test="#{not empty auditLog.ressourceId}">
|
||||
<div><strong>Ressource ID:</strong> #{auditLog.ressourceId}</div>
|
||||
</c:if>
|
||||
<c:if test="#{not empty auditLog.details}">
|
||||
<div><strong>Détails:</strong> #{auditLog.details}</div>
|
||||
</c:if>
|
||||
<c:if test="#{not empty auditLog.adresseIp}">
|
||||
<div><strong>IP:</strong> #{auditLog.adresseIp}</div>
|
||||
</c:if>
|
||||
<c:if test="#{not empty auditLog.userAgent}">
|
||||
<div><strong>User Agent:</strong> #{auditLog.userAgent}</div>
|
||||
</c:if>
|
||||
<c:if test="#{not empty auditLog.messageErreur}">
|
||||
<div class="text-red-600"><strong>Erreur:</strong> #{auditLog.messageErreur}</div>
|
||||
</c:if>
|
||||
</div>
|
||||
</c:if>
|
||||
</div>
|
||||
|
||||
<!-- Actions (si affichées) -->
|
||||
<c:if test="#{showActions}">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton
|
||||
icon="pi pi-eye"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Voir les détails"
|
||||
onclick="PF('auditLogDetailsDialog').show()" />
|
||||
</div>
|
||||
</c:if>
|
||||
</div>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user