192 lines
9.5 KiB
HTML
192 lines
9.5 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"
|
|
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<UserDTO> (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 < 3}">
|
|
<p:tag value="#{role}" severity="info" styleClass="text-xs" />
|
|
</c:if>
|
|
</c:forEach>
|
|
<c:if test="#{user.realmRoles.size() > 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>
|
|
|