Files
lions-user-manager-client-q…/target/classes/META-INF/resources/templates/components/role-management/role-card.xhtml

156 lines
7.3 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:fn="http://xmlns.jcp.org/jsp/jstl/functions">
<!--
Composant réutilisable: Carte Rôle (WOU/DRY Pattern)
Auteur: Lions User Manager
Version: 1.0.0
Description: Affiche une carte rôle avec informations principales et actions
Paramètres:
- role: RoleDTO (requis) - Le rôle à afficher
- showActions: Boolean (défaut: true) - Afficher les boutons d'action
- showDescription: Boolean (défaut: true) - Afficher la description
- showCompositeInfo: Boolean (défaut: true) - Afficher les infos de rôle composite
- 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/role-management/role-card.xhtml">
<ui:param name="role" value="#{roleBean.selectedRole}" />
</ui:include>
2. Carte avec actions:
<ui:include src="/templates/components/role-management/role-card.xhtml">
<ui:param name="role" value="#{roleBean.selectedRole}" />
<ui:param name="showActions" value="true" />
<ui:param name="outcome" value="/pages/user-manager/roles/details" />
</ui:include>
-->
<c:set var="showActions" value="#{empty showActions ? true : showActions}" />
<c:set var="showDescription" value="#{empty showDescription ? true : showDescription}" />
<c:set var="showCompositeInfo" value="#{empty showCompositeInfo ? true : showCompositeInfo}" />
<c:set var="clickable" value="#{empty clickable ? true : clickable}" />
<p:card styleClass="role-card #{styleClass}" rendered="#{not empty role}">
<f:facet name="header">
<div class="flex align-items-center justify-content-between">
<div class="flex align-items-center gap-2">
<i class="pi pi-shield text-2xl text-primary"></i>
<div class="flex flex-column">
<h3 class="m-0">#{role.name}</h3>
<span class="text-color-secondary text-sm">
<c:choose>
<c:when test="#{role.typeRole == 'REALM_ROLE'}">Rôle Realm</c:when>
<c:when test="#{role.typeRole == 'CLIENT_ROLE'}">Rôle Client</c:when>
<c:when test="#{role.typeRole == 'COMPOSITE_ROLE'}">Rôle Composite</c:when>
<c:otherwise>Rôle</c:otherwise>
</c:choose>
</span>
</div>
</div>
<p:tag
value="#{role.typeRole != null ? role.typeRole : 'ROLE'}"
severity="#{role.typeRole == 'REALM_ROLE' ? 'success' : role.typeRole == 'CLIENT_ROLE' ? 'info' : 'warning'}" />
</div>
</f:facet>
<div class="role-card-content">
<!-- Description -->
<c:if test="#{showDescription and not empty role.description}">
<p class="text-color-secondary mb-3">#{role.description}</p>
</c:if>
<!-- Informations -->
<div class="flex flex-column gap-2 mb-3">
<c:if test="#{not empty role.realmName}">
<div class="flex align-items-center gap-2">
<i class="pi pi-globe text-color-secondary"></i>
<span>Realm: <strong>#{role.realmName}</strong></span>
</div>
</c:if>
<c:if test="#{not empty role.clientId}">
<div class="flex align-items-center gap-2">
<i class="pi pi-desktop text-color-secondary"></i>
<span>Client: <strong>#{role.clientId}</strong></span>
</div>
</c:if>
<!-- Rôle composite -->
<c:if test="#{showCompositeInfo and role.composite}">
<div class="flex align-items-center gap-2">
<i class="pi pi-sitemap text-color-secondary"></i>
<span class="text-warning">Rôle composite</span>
</div>
</c:if>
</div>
</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 les détails"
styleClass="p-button-text p-button-sm"
outcome="#{not empty outcome ? outcome : '/pages/user-manager/roles/details'}"
rendered="#{clickable}">
<f:param name="roleId" value="#{role.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/roles/edit">
<f:param name="roleId" value="#{role.id}" />
</p:commandButton>
<p:commandButton
icon="pi pi-trash"
title="Supprimer"
styleClass="p-button-text p-button-sm p-button-danger"
onclick="PF('confirmDeleteRoleDialog_#{fn:replace(fn:replace(role.id != null ? role.id : role.name, '-', '_'), ':', '_')}').show()" />
</div>
</c:if>
</f:facet>
</p:card>
<!-- Dialog de confirmation de suppression avec ID unique basé sur l'ID ou le nom du rôle -->
<c:if test="#{not empty role.name}">
<c:set var="dialogId" value="confirmDeleteRoleDialog_#{fn:replace(fn:replace(role.id != null ? role.id : role.name, '-', '_'), ':', '_')}" />
<p:confirmDialog
id="#{dialogId}"
widgetVar="#{dialogId}"
message="Êtes-vous sûr de vouloir supprimer le rôle #{role.name} ?"
header="Confirmation de suppression"
severity="warn">
<p:commandButton
value="Oui"
icon="pi pi-check"
styleClass="p-button-danger"
action="#{roleGestionBean.deleteRealmRole(role.name)}"
update="@form"
oncomplete="PF('#{dialogId}').hide()" />
<p:commandButton
value="Non"
icon="pi pi-times"
styleClass="p-button-secondary"
onclick="PF('#{dialogId}').hide()" />
</p:confirmDialog>
</c:if>
</ui:composition>