Files

244 lines
15 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="#{membreImportBean}"/>
<ui:define name="title">Import en Masse des Membres - UnionFlow</ui:define>
<ui:define name="content">
<!-- En-tête -->
<ui:include src="/templates/components/layout/page-header.xhtml">
<ui:param name="icon" value="pi pi-upload text-green-500" />
<ui:param name="title" value="Import en Masse des Membres" />
<ui:param name="description" value="Importez plusieurs membres à la fois depuis un fichier Excel" />
<ui:define name="actions">
<h:form id="formActionsEntete">
<div class="flex gap-2">
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
<ui:param name="value" value="Retour" />
<ui:param name="icon" value="pi pi-arrow-left" />
<ui:param name="outcome" value="/pages/secure/membre/liste" />
<ui:param name="outlined" value="true" />
</ui:include>
</div>
</h:form>
</ui:define>
</ui:include>
<!-- Instructions -->
<div class="card mb-3">
<div class="flex align-items-start">
<i class="pi pi-info-circle text-blue-500 text-2xl mr-3"></i>
<div class="flex-1">
<h5 class="mt-0 mb-2">Instructions d'import</h5>
<p class="text-600 mb-3">
Téléchargez le modèle Excel, remplissez-le avec les données des membres, puis importez-le ici.
</p>
<div class="grid">
<div class="col-12 md:col-6">
<h6 class="mb-2">Format du fichier :</h6>
<ul class="text-600 text-sm m-0 pl-3">
<li>Format Excel (.xlsx) ou CSV (.csv)</li>
<li>Maximum 1000 lignes par import</li>
<li>Taille maximale : 10 MB</li>
</ul>
</div>
<div class="col-12 md:col-6">
<h6 class="mb-2">Colonnes requises :</h6>
<ul class="text-600 text-sm m-0 pl-3">
<li>Nom, Prénom (obligatoires)</li>
<li>Email, Téléphone (obligatoires)</li>
<li>Date de naissance, Adresse</li>
<li>Profession, Type membre</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Formulaire d'import -->
<div class="card">
<h:form id="formImport" enctype="multipart/form-data">
<h5 class="mb-4">Fichier à importer</h5>
<div class="grid">
<div class="col-12 md:col-8">
<div class="field">
<p:outputLabel for="fichierImport" value="Fichier Excel/CSV *" />
<p:fileUpload id="fichierImport"
mode="advanced"
dragDropSupport="true"
skinSimple="false"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,text/csv"
fileLimit="1"
sizeLimit="10485760"
uploadLabel="Importer"
cancelLabel="Annuler"
chooseLabel="Sélectionner le fichier"
invalidFileMessage="Type de fichier non supporté"
fileLimitMessage="Un seul fichier autorisé"
invalidSizeMessage="Taille de fichier trop importante (max 10MB)"
fileUploadListener="#{membreImportBean.handleFileUpload}"
update=":formImport"
styleClass="w-full" />
<small class="text-600">Formats acceptés : .xlsx, .xls, .csv - Maximum 10 MB</small>
</div>
</div>
<div class="col-12 md:col-4">
<div class="field">
<p:outputLabel />
<div class="flex flex-column gap-2">
<ui:include src="/templates/components/buttons/button-info.xhtml">
<ui:param name="value" value="Télécharger modèle" />
<ui:param name="icon" value="pi pi-download" />
<ui:param name="action" value="#{membreImportBean.telechargerModele}" />
<ui:param name="update" value="none" />
<ui:param name="outlined" value="true" />
<ui:param name="styleClass" value="w-full" />
</ui:include>
</div>
</div>
</div>
</div>
<ui:decorate template="/templates/components/forms/form-section.xhtml">
<ui:param name="title" value="Options d'import" />
<ui:define name="content">
<div class="grid">
<div class="col-12 md:col-6">
<div class="field">
<p:selectBooleanCheckbox id="mettreAJourExistants" value="#{membreImportBean.mettreAJourExistants}" />
<p:outputLabel for="mettreAJourExistants" value="Mettre à jour les membres existants" />
<small class="text-600 block mt-1">Si coché, les membres existants (même email) seront mis à jour</small>
</div>
</div>
<div class="col-12 md:col-6">
<div class="field">
<p:selectBooleanCheckbox id="ignorerErreurs" value="#{membreImportBean.ignorerErreurs}" />
<p:outputLabel for="ignorerErreurs" value="Ignorer les lignes en erreur" />
<small class="text-600 block mt-1">Continuer l'import même si certaines lignes contiennent des erreurs</small>
</div>
</div>
<div class="col-12 md:col-6">
<div class="field">
<p:outputLabel for="organisationImport" value="Organisation par défaut" />
<p:selectOneMenu id="organisationImport" value="#{membreImportBean.organisationId}" styleClass="w-full">
<f:selectItem itemLabel="Sélectionner une organisation..." itemValue="" />
<f:selectItems value="#{membreImportBean.organisationsDisponibles}"
var="org"
itemLabel="#{org.nom} (#{org.ville})"
itemValue="#{org.id}" />
</p:selectOneMenu>
</div>
</div>
<div class="col-12 md:col-6">
<div class="field">
<p:outputLabel for="typeMembreImport" value="Type de membre par défaut" />
<p:selectOneMenu id="typeMembreImport" value="#{membreImportBean.typeMembreDefaut}" styleClass="w-full">
<f:selectItem itemLabel="Sélectionner..." itemValue="" />
<f:selectItem itemLabel="Actif" itemValue="ACTIF" />
<f:selectItem itemLabel="Associé" itemValue="ASSOCIE" />
<f:selectItem itemLabel="Bienfaiteur" itemValue="BIENFAITEUR" />
<f:selectItem itemLabel="Honoraire" itemValue="HONORAIRE" />
</p:selectOneMenu>
</div>
</div>
</div>
</ui:define>
</ui:decorate>
<!-- Résultats de l'import -->
<div class="mt-4" rendered="#{membreImportBean.resultatImport != null}">
<ui:decorate template="/templates/components/forms/form-section.xhtml">
<ui:param name="title" value="Résultat de l'import" />
<ui:define name="content">
<div class="grid">
<div class="col-12 md:col-3">
<ui:include src="/templates/components/cards/kpi-card.xhtml">
<ui:param name="title" value="Total traité" />
<ui:param name="value" value="#{membreImportBean.resultatImport.totalTraite}" />
<ui:param name="icon" value="pi-file" />
<ui:param name="iconColor" value="blue-600" />
<ui:param name="colSize" value="col-12" />
</ui:include>
</div>
<div class="col-12 md:col-3">
<ui:include src="/templates/components/cards/kpi-card.xhtml">
<ui:param name="title" value="Réussis" />
<ui:param name="value" value="#{membreImportBean.resultatImport.reussis}" />
<ui:param name="icon" value="pi-check" />
<ui:param name="iconColor" value="green-600" />
<ui:param name="colSize" value="col-12" />
</ui:include>
</div>
<div class="col-12 md:col-3">
<ui:include src="/templates/components/cards/kpi-card.xhtml">
<ui:param name="title" value="Échecs" />
<ui:param name="value" value="#{membreImportBean.resultatImport.echecs}" />
<ui:param name="icon" value="pi-times" />
<ui:param name="iconColor" value="red-600" />
<ui:param name="colSize" value="col-12" />
</ui:include>
</div>
<div class="col-12 md:col-3">
<ui:include src="/templates/components/cards/kpi-card.xhtml">
<ui:param name="title" value="Ignorés" />
<ui:param name="value" value="#{membreImportBean.resultatImport.ignores}" />
<ui:param name="icon" value="pi-eye-slash" />
<ui:param name="iconColor" value="orange-600" />
<ui:param name="colSize" value="col-12" />
</ui:include>
</div>
</div>
<div class="mt-3" rendered="#{not empty membreImportBean.resultatImport.erreurs}">
<h6 class="mb-2">Détails des erreurs :</h6>
<div class="surface-50 p-3 border-round">
<ui:repeat value="#{membreImportBean.resultatImport.erreurs}" var="erreur">
<div class="mb-2">
<span class="font-medium">Ligne #{erreur.ligne}:</span>
<span class="text-red-500 ml-2">#{erreur.message}</span>
</div>
</ui:repeat>
</div>
</div>
</ui:define>
</ui:decorate>
</div>
<!-- Actions -->
<div class="flex gap-2 mt-4">
<ui:include src="/templates/components/buttons/button-success.xhtml">
<ui:param name="value" value="Lancer l'import" />
<ui:param name="icon" value="pi pi-upload" />
<ui:param name="action" value="#{membreImportBean.importerMembres}" />
<ui:param name="update" value=":formImport" />
<ui:param name="disabled" value="#{membreImportBean.fichierImport == null}" />
</ui:include>
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
<ui:param name="value" value="Réinitialiser" />
<ui:param name="icon" value="pi pi-refresh" />
<ui:param name="action" value="#{membreImportBean.reinitialiser}" />
<ui:param name="update" value=":formImport" />
<ui:param name="outlined" value="true" />
</ui:include>
</div>
</h:form>
</div>
</ui:define>
</ui:composition>