From 7d7e5c48a7e2a1719168e18608a79c9c94013452 Mon Sep 17 00:00:00 2001
From: dahoud <dahoud@dgbf.ci>
Date: Sun, 30 Nov 2025 12:02:45 +0000
Subject: [PATCH] =?UTF-8?q?refactor:=20R=C3=A9utilisation=20filter-bar.xht?=
 =?UTF-8?q?ml=20dans=20membre/liste.xhtml=20(DRY/WOU)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/pages/secure/membre/liste.xhtml | 177 +++++++++++-------
 1 file changed, 110 insertions(+), 67 deletions(-)

diff --git a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml
index 14680f7..59d4c98 100644
--- a/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml
+++ b/unionflow-client-quarkus-primefaces-freya/src/main/resources/META-INF/resources/pages/secure/membre/liste.xhtml
@@ -40,74 +40,117 @@
             <h:form id="formMembres">
                 <h5>Tous les Membres</h5>
                 
-                <!-- Filtres -->
-                <p:toolbar>
-                    <p:toolbarGroup>
-                        <div class="flex align-items-center gap-2">
-                            <span class="p-input-icon-left">
-                                <i class="pi pi-search"></i>
-                                <p:inputText placeholder="Rechercher..." 
-                                           value="#{membreListeBean.searchFilter}">
-                                    <p:ajax event="keyup" update="dtMembres" />
-                                </p:inputText>
-                            </span>
-                            
-                            <p:selectOneMenu value="#{membreListeBean.statutFilter}">
-                                <f:selectItem itemLabel="Tous les statuts" itemValue="" />
-                                <f:selectItem itemLabel="Actif" itemValue="ACTIF" />
-                                <f:selectItem itemLabel="Inactif" itemValue="INACTIF" />
-                                <f:selectItem itemLabel="Suspendu" itemValue="SUSPENDU" />
-                                <f:selectItem itemLabel="Radié" itemValue="RADIE" />
-                                <p:ajax update="dtMembres" />
-                            </p:selectOneMenu>
-                            
-                            <p:selectOneMenu value="#{membreListeBean.typeFilter}">
-                                <f:selectItem itemLabel="Tous les types" 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:ajax update="dtMembres" />
-                            </p:selectOneMenu>
-                            
-                            <p:selectOneMenu value="#{membreListeBean.cotisationFilter}">
-                                <f:selectItem itemLabel="Toutes cotisations" itemValue="" />
-                                <f:selectItem itemLabel="À jour" itemValue="A_JOUR" />
-                                <f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
-                                <f:selectItem itemLabel="Jamais payé" itemValue="JAMAIS_PAYE" />
-                                <p:ajax update="dtMembres" />
-                            </p:selectOneMenu>
-                            
-                            <p:selectOneMenu value="#{membreListeBean.entiteFilter}">
-                                <f:selectItem itemLabel="Toutes entités" itemValue="" />
-                                <f:selectItems value="#{membreListeBean.entitesDisponibles}" 
-                                             var="entite" 
-                                             itemLabel="#{entite.nom}" 
-                                             itemValue="#{entite.id}" />
-                                <p:ajax update="dtMembres" />
-                            </p:selectOneMenu>
+                <!-- Filtres et recherche (DRY/WOU: filter-bar) -->
+                <ui:decorate template="/templates/components/cards/filter-bar.xhtml">
+                    <ui:param name="title" value="Filtres" />
+                    <ui:param name="styleClass" value="mb-3" />
+                    <ui:define name="filters">
+                        <div class="col-12 md:col-3">
+                            <div class="field">
+                                <p:outputLabel for="searchFilter" value="Rechercher" />
+                                <span class="p-input-icon-left w-full">
+                                    <i class="pi pi-search"></i>
+                                    <p:inputText id="searchFilter" 
+                                               placeholder="Nom, prénom, email..." 
+                                               value="#{membreListeBean.searchFilter}"
+                                               styleClass="w-full">
+                                        <p:ajax event="keyup" update="dtMembres" delay="500"/>
+                                    </p:inputText>
+                                </span>
+                            </div>
                         </div>
-                    </p:toolbarGroup>
-                    
-                    <p:toolbarGroup align="right">
-                        <ui:include src="/templates/components/buttons/button-secondary.xhtml">
-                            <ui:param name="value" value="Filtres avancés" />
-                            <ui:param name="icon" value="pi pi-filter" />
-                            <ui:param name="onclick" value="PF('dlgFiltresAvances').show();" />
-                            <ui:param name="outlined" value="true" />
-                            <ui:param name="styleClass" value="mr-2" />
-                        </ui:include>
-                        <ui:include src="/templates/components/buttons/button-icon.xhtml">
-                            <ui:param name="icon" value="pi pi-refresh" />
-                            <ui:param name="action" value="#{membreListeBean.actualiser}" />
-                            <ui:param name="update" value="@form" />
-                            <ui:param name="title" value="Actualiser" />
-                            <ui:param name="rounded" value="false" />
-                            <ui:param name="text" value="false" />
-                            <ui:param name="styleClass" value="ui-button-outlined ui-button-secondary" />
-                        </ui:include>
-                    </p:toolbarGroup>
-                </p:toolbar>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="statutFilter" value="Statut" />
+                                <p:selectOneMenu id="statutFilter" 
+                                                value="#{membreListeBean.statutFilter}"
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Tous les statuts" itemValue="" />
+                                    <f:selectItem itemLabel="Actif" itemValue="ACTIF" />
+                                    <f:selectItem itemLabel="Inactif" itemValue="INACTIF" />
+                                    <f:selectItem itemLabel="Suspendu" itemValue="SUSPENDU" />
+                                    <f:selectItem itemLabel="Radié" itemValue="RADIE" />
+                                    <p:ajax event="change" update="dtMembres" />
+                                </p:selectOneMenu>
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="typeFilter" value="Type" />
+                                <p:selectOneMenu id="typeFilter" 
+                                                value="#{membreListeBean.typeFilter}"
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Tous les types" 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:ajax event="change" update="dtMembres" />
+                                </p:selectOneMenu>
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="cotisationFilter" value="Cotisation" />
+                                <p:selectOneMenu id="cotisationFilter" 
+                                                value="#{membreListeBean.cotisationFilter}"
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Toutes cotisations" itemValue="" />
+                                    <f:selectItem itemLabel="À jour" itemValue="A_JOUR" />
+                                    <f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
+                                    <f:selectItem itemLabel="Jamais payé" itemValue="JAMAIS_PAYE" />
+                                    <p:ajax event="change" update="dtMembres" />
+                                </p:selectOneMenu>
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-2">
+                            <div class="field">
+                                <p:outputLabel for="entiteFilter" value="Entité" />
+                                <p:selectOneMenu id="entiteFilter" 
+                                                value="#{membreListeBean.entiteFilter}"
+                                                styleClass="w-full">
+                                    <f:selectItem itemLabel="Toutes entités" itemValue="" />
+                                    <f:selectItems value="#{membreListeBean.entitesDisponibles}" 
+                                                 var="entite" 
+                                                 itemLabel="#{entite.nom}" 
+                                                 itemValue="#{entite.id}" />
+                                    <p:ajax event="change" update="dtMembres" />
+                                </p:selectOneMenu>
+                            </div>
+                        </div>
+                    </ui:define>
+                    <ui:define name="actions">
+                        <div class="col-12 md:col-1">
+                            <div class="field">
+                                <label class="invisible">Actions</label>
+                                <p:commandButton value="Filtres avancés"
+                                               icon="pi pi-filter"
+                                               onclick="PF('dlgFiltresAvances').show();"
+                                               styleClass="ui-button-secondary w-full" />
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-1">
+                            <div class="field">
+                                <label class="invisible">Actualiser</label>
+                                <p:commandButton icon="pi pi-refresh"
+                                               action="#{membreListeBean.actualiser}"
+                                               update="@form"
+                                               title="Actualiser"
+                                               styleClass="ui-button-outlined ui-button-secondary w-full" />
+                            </div>
+                        </div>
+                        <div class="col-12 md:col-1">
+                            <div class="field">
+                                <label class="invisible">Réinitialiser</label>
+                                <p:commandButton value="Réinitialiser"
+                                               icon="pi pi-filter-slash"
+                                               action="#{membreListeBean.reinitialiserFiltres}"
+                                               update="dtMembres searchFilter statutFilter typeFilter cotisationFilter entiteFilter"
+                                               styleClass="ui-button-secondary w-full" />
+                            </div>
+                        </div>
+                    </ui:define>
+                </ui:decorate>
 
                 <!-- DataTable -->
                 <p:dataTable id="dtMembres"