131 lines
5.7 KiB
HTML
131 lines
5.7 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 Utilisateur (WOU/DRY Pattern)
|
|
|
|
Auteur: Lions User Manager
|
|
Version: 1.0.0
|
|
Description: Affiche une carte utilisateur avec informations principales et actions
|
|
|
|
Paramètres:
|
|
- user: UserDTO (requis) - L'utilisateur à afficher
|
|
- showActions: Boolean (défaut: true) - Afficher les boutons d'action
|
|
- showRoles: Boolean (défaut: true) - Afficher les rôles de l'utilisateur
|
|
- clickable: Boolean (défaut: true) - Rendre la carte cliquable
|
|
- outcome: String (optionnel) - Page de destination au clic
|
|
- styleClass: String (optionnel) - Classes CSS supplémentaires
|
|
|
|
Exemples d'utilisation:
|
|
|
|
1. Carte simple:
|
|
<ui:include src="/templates/components/user-management/user-card.xhtml">
|
|
<ui:param name="user" value="#{userBean.selectedUser}" />
|
|
</ui:include>
|
|
|
|
2. Carte avec actions:
|
|
<ui:include src="/templates/components/user-management/user-card.xhtml">
|
|
<ui:param name="user" value="#{userBean.selectedUser}" />
|
|
<ui:param name="showActions" value="true" />
|
|
<ui:param name="outcome" value="/pages/user-manager/users/profile" />
|
|
</ui:include>
|
|
|
|
3. Carte sans rôles:
|
|
<ui:include src="/templates/components/user-management/user-card.xhtml">
|
|
<ui:param name="user" value="#{userBean.selectedUser}" />
|
|
<ui:param name="showRoles" value="false" />
|
|
</ui:include>
|
|
-->
|
|
|
|
<c:set var="showActions" value="#{empty showActions ? true : showActions}" />
|
|
<c:set var="showRoles" value="#{empty showRoles ? true : showRoles}" />
|
|
<c:set var="clickable" value="#{empty clickable ? true : clickable}" />
|
|
|
|
<p:card styleClass="user-card #{styleClass}" rendered="#{not empty user}">
|
|
<f:facet name="header">
|
|
<div class="flex align-items-center gap-2">
|
|
<p:avatar
|
|
label="#{user.prenom != null ? user.prenom.substring(0,1) : 'U'}#{user.nom != null ? user.nom.substring(0,1) : ''}"
|
|
styleClass="user-avatar"
|
|
size="large" />
|
|
<div class="flex flex-column">
|
|
<h3 class="m-0">#{user.prenom} #{user.nom}</h3>
|
|
<span class="text-color-secondary text-sm">@#{user.username}</span>
|
|
</div>
|
|
</div>
|
|
</f:facet>
|
|
|
|
<div class="user-card-content">
|
|
<!-- Informations principales -->
|
|
<div class="flex flex-column gap-2 mb-3">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-envelope text-color-secondary"></i>
|
|
<span>#{user.email}</span>
|
|
</div>
|
|
|
|
<c:if test="#{not empty user.telephone}">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-phone text-color-secondary"></i>
|
|
<span>#{user.telephone}</span>
|
|
</div>
|
|
</c:if>
|
|
|
|
<!-- Statut -->
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-circle-fill text-color-secondary"></i>
|
|
<p:tag
|
|
value="#{user.statut != null ? user.statut : 'INCONNU'}"
|
|
severity="#{user.enabled ? 'success' : 'danger'}" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rôles -->
|
|
<c:if test="#{showRoles and not empty user.roles}">
|
|
<div class="flex flex-column gap-2 mb-3">
|
|
<h5 class="m-0">Rôles</h5>
|
|
<div class="flex flex-wrap gap-1">
|
|
<c:forEach var="role" items="#{user.roles}">
|
|
<p:tag value="#{role.name}" severity="info" />
|
|
</c:forEach>
|
|
</div>
|
|
</div>
|
|
</c:if>
|
|
</div>
|
|
|
|
<f:facet name="footer">
|
|
<c:if test="#{showActions}">
|
|
<div class="flex gap-2 justify-content-end">
|
|
<p:commandButton
|
|
icon="pi pi-eye"
|
|
title="Voir le profil"
|
|
styleClass="p-button-text p-button-sm"
|
|
outcome="#{not empty outcome ? outcome : '/pages/user-manager/users/profile'}"
|
|
rendered="#{clickable}">
|
|
<f:param name="userId" value="#{user.id}" />
|
|
</p:commandButton>
|
|
|
|
<p:commandButton
|
|
icon="pi pi-pencil"
|
|
title="Modifier"
|
|
styleClass="p-button-text p-button-sm p-button-warning"
|
|
outcome="/pages/user-manager/users/edit">
|
|
<f:param name="userId" value="#{user.id}" />
|
|
</p:commandButton>
|
|
|
|
<p:commandButton
|
|
icon="pi pi-trash"
|
|
title="Supprimer"
|
|
styleClass="p-button-text p-button-sm p-button-danger"
|
|
onclick="PF('confirmDeleteDialog').show()" />
|
|
</div>
|
|
</c:if>
|
|
</f:facet>
|
|
</p:card>
|
|
|
|
</ui:composition>
|
|
|