374 lines
24 KiB
HTML
374 lines
24 KiB
HTML
<!DOCTYPE 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"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:param name="page" value="#{personnelBean}"/>
|
|
<ui:define name="title">Mes Favoris - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="ui-fluid">
|
|
|
|
<!-- En-tête -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<div class="flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h2 class="text-900 font-bold text-4xl mb-2">
|
|
<i class="pi pi-star-fill text-yellow-500 mr-3"></i>
|
|
Mes Favoris
|
|
</h2>
|
|
<p class="text-600 text-lg mb-0">
|
|
Accédez rapidement à vos pages, documents et fonctionnalités préférés
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="Organiser"
|
|
styleClass="p-button-outlined"
|
|
icon="pi pi-sort" />
|
|
<p:commandButton value="Tout nettoyer"
|
|
styleClass="p-button-secondary"
|
|
icon="pi pi-trash"
|
|
action="#{favorisBean.nettoyerTousFavoris}"
|
|
update="@form"
|
|
process="@this" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistiques favoris -->
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-yellow-500 mb-2">#{favorisBean.totalFavoris}</div>
|
|
<div class="text-900 font-semibold mb-1">Favoris</div>
|
|
<div class="text-600 text-sm">Total</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-blue-500 mb-2">#{favorisBean.totalPages}</div>
|
|
<div class="text-900 font-semibold mb-1">Pages</div>
|
|
<div class="text-600 text-sm">Fonctionnalités</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-green-500 mb-2">#{favorisBean.totalDocuments}</div>
|
|
<div class="text-900 font-semibold mb-1">Documents</div>
|
|
<div class="text-600 text-sm">Fichiers</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
|
<div class="text-2xl font-bold text-purple-500 mb-2">#{favorisBean.totalContacts}</div>
|
|
<div class="text-900 font-semibold mb-1">Contacts</div>
|
|
<div class="text-600 text-sm">Personnes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accès rapide favoris -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-bolt mr-2"></i>
|
|
Accès Rapide
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<ui:repeat value="#{favorisBean.pagesFavorites}" var="page" varStatus="status">
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-#{page.couleur}-50 hover:surface-#{page.couleur}-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-#{page.couleur}-500">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<i class="pi #{page.icon} text-#{page.couleur}-600 text-2xl"></i>
|
|
<p:tag value="#{page.estPlusUtilise ? 'PLUS UTILISÉ' : ''}" severity="info" styleClass="text-xs" rendered="#{page.estPlusUtilise}" />
|
|
<i class="pi pi-star-fill text-yellow-500" rendered="#{!page.estPlusUtilise}"></i>
|
|
</div>
|
|
<h6 class="text-#{page.couleur}-800 font-bold mb-2">#{page.titre}</h6>
|
|
<p class="text-#{page.couleur}-600 text-sm mb-2">#{page.description}</p>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-clock text-#{page.couleur}-500"></i>
|
|
<span class="text-#{page.couleur}-600 text-xs">#{page.derniereVisite}</span>
|
|
</div>
|
|
<div class="flex justify-content-end mt-2">
|
|
<p:commandButton icon="pi pi-times"
|
|
styleClass="p-button-text p-button-sm p-button-rounded"
|
|
title="Retirer des favoris"
|
|
action="#{favorisBean.retirerPageFavorite(page.id)}"
|
|
update="@form"
|
|
process="@this" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<!-- Favori 2 -->
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-green-50 hover:surface-green-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-green-500">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<i class="pi pi-calendar text-green-600 text-2xl"></i>
|
|
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
</div>
|
|
<h6 class="text-green-800 font-bold mb-2">Mon Agenda</h6>
|
|
<p class="text-green-600 text-sm mb-2">Planning et événements personnels</p>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-clock text-green-500"></i>
|
|
<span class="text-green-600 text-xs">Utilisé il y a 2h</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Favori 3 -->
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-purple-50 hover:surface-purple-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-purple-500">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<i class="pi pi-users text-purple-600 text-2xl"></i>
|
|
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
</div>
|
|
<h6 class="text-purple-800 font-bold mb-2">Liste des Membres</h6>
|
|
<p class="text-purple-600 text-sm mb-2">Annuaire et contacts membres</p>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-clock text-purple-500"></i>
|
|
<span class="text-purple-600 text-xs">Utilisé hier</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Favori 4 -->
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-orange-50 hover:surface-orange-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-orange-500">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<i class="pi pi-dollar text-orange-600 text-2xl"></i>
|
|
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
</div>
|
|
<h6 class="text-orange-800 font-bold mb-2">Cotisations</h6>
|
|
<p class="text-orange-600 text-sm mb-2">Paiements et historique</p>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-clock text-orange-500"></i>
|
|
<span class="text-orange-600 text-xs">Utilisé il y a 3 jours</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pages favorites -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-window-maximize mr-2"></i>
|
|
Pages Favorites
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<ui:repeat value="#{favorisBean.pagesFavorites}" var="page" varStatus="status">
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi #{page.icon} text-#{page.couleur}-500 text-xl"></i>
|
|
<h6 class="text-900 font-semibold mb-0">#{page.titre}</h6>
|
|
</div>
|
|
<div class="flex gap-1">
|
|
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
<p:commandButton icon="pi pi-times"
|
|
styleClass="p-button-text p-button-sm p-button-rounded"
|
|
title="Retirer des favoris"
|
|
action="#{favorisBean.retirerPageFavorite(page.id)}"
|
|
update="@form"
|
|
process="@this" />
|
|
</div>
|
|
</div>
|
|
<p class="text-600 text-sm mb-2">#{page.description}</p>
|
|
<div class="flex align-items-center gap-2">
|
|
<p:tag value="#{page.categorie}" severity="success" styleClass="text-xs" />
|
|
<span class="text-500 text-xs">#{page.nbVisites} visite#{page.nbVisites > 1 ? 's' : ''} cette semaine</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<p:commandButton value="Voir toutes les pages favorites"
|
|
styleClass="p-button-outlined"
|
|
icon="pi pi-eye" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documents favoris -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-file mr-2"></i>
|
|
Documents Favoris
|
|
</h4>
|
|
|
|
<ui:repeat value="#{favorisBean.documentsFavoris}" var="doc">
|
|
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-3">
|
|
<div class="w-3rem h-3rem border-circle bg-red-100 flex align-items-center justify-content-center">
|
|
<i class="pi pi-file-#{doc.type == 'PDF' ? 'pdf' : doc.type == 'XLSX' ? 'excel' : 'file'} text-red-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">#{doc.nom}</h6>
|
|
<div class="flex align-items-center gap-3 mb-1">
|
|
<span class="text-600 text-sm">#{doc.tailleFormatee}</span>
|
|
<span class="text-600 text-sm">Ajouté aux favoris le #{doc.dateAjout}</span>
|
|
<p:tag value="#{doc.categorie}" severity="success" styleClass="text-xs" />
|
|
</div>
|
|
<p class="text-700 text-sm mb-0">#{doc.description}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
|
|
<p:commandButton icon="pi pi-download"
|
|
styleClass="p-button-outlined p-button-sm"
|
|
title="Télécharger" />
|
|
<p:commandButton icon="pi pi-times"
|
|
styleClass="p-button-text p-button-sm"
|
|
title="Retirer des favoris"
|
|
action="#{favorisBean.retirerDocumentFavorite(doc.id)}"
|
|
update="@form"
|
|
process="@this" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contacts favoris -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-users mr-2"></i>
|
|
Contacts Favoris
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<ui:repeat value="#{favorisBean.contactsFavoris}" var="contact">
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<div class="flex align-items-center gap-3">
|
|
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
|
<i class="pi pi-user text-blue-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">#{contact.nom}</h6>
|
|
<p class="text-600 text-sm mb-0">#{contact.fonction}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<i class="pi pi-star-fill text-yellow-500"></i>
|
|
<p:commandButton icon="pi pi-times"
|
|
styleClass="p-button-text p-button-sm"
|
|
title="Retirer des favoris"
|
|
action="#{favorisBean.retirerContactFavorite(contact.id)}"
|
|
update="@form"
|
|
process="@this" />
|
|
</div>
|
|
</div>
|
|
<div class="flex align-items-center gap-3">
|
|
<span class="text-600 text-sm">#{contact.email}</span>
|
|
<p:tag value="#{contact.categorie}" severity="warning" styleClass="text-xs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Raccourcis personnalisés -->
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<h4 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-link mr-2"></i>
|
|
Raccourcis Personnalisés
|
|
</h4>
|
|
|
|
<div class="grid">
|
|
<ui:repeat value="#{favorisBean.raccourcis}" var="racc">
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<i class="pi #{racc.icon} text-#{racc.couleur}-500 text-2xl"></i>
|
|
<p:commandButton icon="pi pi-times"
|
|
styleClass="p-button-text p-button-sm p-button-rounded"
|
|
title="Supprimer"
|
|
action="#{favorisBean.supprimerRaccourci(racc.id)}"
|
|
update="@form"
|
|
process="@this" />
|
|
</div>
|
|
<h6 class="text-900 font-semibold mb-2">#{racc.titre}</h6>
|
|
<p class="text-600 text-sm mb-3">#{racc.description}</p>
|
|
<p:commandButton value="Accéder"
|
|
styleClass="p-button-outlined p-button-sm w-full"
|
|
icon="pi pi-external-link"
|
|
onclick="window.location.href='#{racc.url}'; return false;" />
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<!-- Ajouter nouveau raccourci -->
|
|
<div class="col-12 lg:col-3">
|
|
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200 border-dashed border-primary">
|
|
<i class="pi pi-plus-circle text-primary text-3xl mb-3"></i>
|
|
<h6 class="text-primary font-semibold mb-2">Ajouter</h6>
|
|
<p class="text-600 text-sm mb-3">Créer un nouveau raccourci</p>
|
|
<p:commandButton value="Créer"
|
|
styleClass="p-button-primary p-button-sm w-full"
|
|
icon="pi pi-plus" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Conseils d'utilisation -->
|
|
<div class="surface-blue-50 border-left-3 border-blue-500 p-4 mt-4">
|
|
<h6 class="text-blue-800 font-semibold mb-2">
|
|
<i class="pi pi-info-circle mr-2"></i>Conseils d'utilisation
|
|
</h6>
|
|
<ul class="list-none p-0 m-0">
|
|
<li class="flex align-items-start mb-2">
|
|
<i class="pi pi-angle-right text-blue-500 mr-2 mt-1"></i>
|
|
<span class="text-blue-700 text-sm">Cliquez sur l'étoile ⭐ à côté des éléments pour les ajouter aux favoris</span>
|
|
</li>
|
|
<li class="flex align-items-start mb-2">
|
|
<i class="pi pi-angle-right text-blue-500 mr-2 mt-1"></i>
|
|
<span class="text-blue-700 text-sm">Organisez vos favoris par catégorie pour un accès plus rapide</span>
|
|
</li>
|
|
<li class="flex align-items-start">
|
|
<i class="pi pi-angle-right text-blue-500 mr-2 mt-1"></i>
|
|
<span class="text-blue-700 text-sm">Créez des raccourcis personnalisés vers vos actions les plus fréquentes</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ui:define>
|
|
|
|
</ui:composition> |