Update - Lions User Manager - Client (Quarkus PrimeFaces Freya)
This commit is contained in:
dahoud
@@ -0,0 +1,77 @@
|
||||
<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: Section Dashboard - Écosystème LionsDev
|
||||
|
||||
Auteur: Lions User Manager
|
||||
Version: 1.0.0
|
||||
Description: Composant composite pour créer des sections de dashboard réutilisables
|
||||
|
||||
Paramètres:
|
||||
- title: String (requis) - Titre de la section
|
||||
- description: String (optionnel) - Description de la section
|
||||
- icon: String (optionnel) - Icône PrimeIcons
|
||||
- colSize: String (défaut: "col-12") - Taille de colonne
|
||||
- showCard: Boolean (défaut: true) - Envelopper dans une carte
|
||||
- styleClass: String (optionnel) - Classes CSS supplémentaires
|
||||
|
||||
Exemple:
|
||||
ui:include src="/templates/components/shared/dashboard/dashboard-section.xhtml"
|
||||
ui:param name="title" value="Actions Rapides"
|
||||
ui:param name="icon" value="pi-bolt"
|
||||
ui:param name="colSize" value="col-12 lg:col-6"
|
||||
ui:define name="section-content"
|
||||
Contenu de la section
|
||||
ui:define
|
||||
ui:include
|
||||
-->
|
||||
|
||||
<c:set var="colSize" value="#{empty colSize ? 'col-12' : colSize}" />
|
||||
<c:set var="showCard" value="#{empty showCard ? true : showCard}" />
|
||||
|
||||
<div class="#{colSize}">
|
||||
<c:choose>
|
||||
<c:when test="#{showCard}">
|
||||
<div class="card #{styleClass}">
|
||||
<c:if test="#{not empty title}">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<c:if test="#{not empty icon}">
|
||||
<i class="pi #{icon} mr-2 text-primary"></i>
|
||||
</c:if>
|
||||
<h5 class="font-semibold mb-0">#{title}</h5>
|
||||
</div>
|
||||
</c:if>
|
||||
<c:if test="#{not empty description}">
|
||||
<p class="text-600 text-sm mb-3">#{description}</p>
|
||||
</c:if>
|
||||
<ui:insert name="section-content">
|
||||
<!-- Contenu de la section -->
|
||||
</ui:insert>
|
||||
</div>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<c:if test="#{not empty title}">
|
||||
<div class="flex align-items-center mb-3">
|
||||
<c:if test="#{not empty icon}">
|
||||
<i class="pi #{icon} mr-2 text-primary"></i>
|
||||
</c:if>
|
||||
<h5 class="font-semibold mb-0">#{title}</h5>
|
||||
</div>
|
||||
</c:if>
|
||||
<c:if test="#{not empty description}">
|
||||
<p class="text-600 text-sm mb-3">#{description}</p>
|
||||
</c:if>
|
||||
<ui:insert name="section-content">
|
||||
<!-- Contenu de la section -->
|
||||
</ui:insert>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
</div>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<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: Groupe de KPI (Composite) - Écosystème LionsDev
|
||||
|
||||
Auteur: Lions User Manager
|
||||
Version: 1.0.0
|
||||
Description: Composant composite pour afficher un groupe de KPI dans une grille
|
||||
|
||||
Paramètres:
|
||||
- title: String (optionnel) - Titre de la section
|
||||
- columns: Integer (défaut: 4) - Nombre de colonnes (1-12)
|
||||
- colSize: String (optionnel) - Taille de colonne personnalisée (ex: "col-12 md:col-6 lg:col-3")
|
||||
- showTitle: Boolean (défaut: true si title fourni) - Afficher le titre
|
||||
- styleClass: String (optionnel) - Classes CSS supplémentaires
|
||||
|
||||
Utilisation:
|
||||
Ce composant doit être utilisé avec des ui:param pour passer les KPI individuels.
|
||||
Chaque KPI doit être inclus avec kpi-card.xhtml.
|
||||
|
||||
Exemple:
|
||||
<ui:include src="/templates/components/shared/dashboard/kpi-group.xhtml">
|
||||
<ui:param name="title" value="Statistiques Utilisateurs" />
|
||||
<ui:param name="columns" value="4" />
|
||||
<ui:define name="kpi-content">
|
||||
<ui:include src="/templates/components/shared/cards/kpi-card.xhtml">
|
||||
<ui:param name="title" value="Total" />
|
||||
<ui:param name="value" value="#{bean.total}" />
|
||||
<ui:param name="icon" value="pi-users" />
|
||||
<ui:param name="iconColor" value="blue-600" />
|
||||
</ui:include>
|
||||
Autres KPI à ajouter ici
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<c:set var="columns" value="#{empty columns ? 4 : columns}" />
|
||||
<c:set var="showTitle" value="#{empty showTitle ? (not empty title) : showTitle}" />
|
||||
|
||||
<c:choose>
|
||||
<c:when test="#{columns == 1}">
|
||||
<c:set var="colSize" value="col-12" />
|
||||
</c:when>
|
||||
<c:when test="#{columns == 2}">
|
||||
<c:set var="colSize" value="col-12 md:col-6" />
|
||||
</c:when>
|
||||
<c:when test="#{columns == 3}">
|
||||
<c:set var="colSize" value="col-12 md:col-6 lg:col-4" />
|
||||
</c:when>
|
||||
<c:when test="#{columns == 4}">
|
||||
<c:set var="colSize" value="col-12 md:col-6 lg:col-3" />
|
||||
</c:when>
|
||||
<c:when test="#{columns == 6}">
|
||||
<c:set var="colSize" value="col-12 md:col-6 lg:col-2" />
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<c:set var="colSize" value="#{empty colSize ? 'col-12 md:col-6 lg:col-3' : colSize}" />
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
|
||||
<div class="mb-4 #{styleClass}">
|
||||
<c:if test="#{showTitle}">
|
||||
<h5 class="font-semibold mb-3">#{title}</h5>
|
||||
</c:if>
|
||||
<div class="grid">
|
||||
<ui:insert name="kpi-content">
|
||||
<!-- Les KPI seront insérés ici -->
|
||||
</ui:insert>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
Reference in New Issue
Block a user