refactor: Réutilisation filter-bar.xhtml dans evenement et cotisation (DRY/WOU)

This commit is contained in:
dahoud
2025-11-30 12:07:07 +00:00
parent 7d7e5c48a7
commit 69c9cfcda7
2 changed files with 158 additions and 103 deletions

View File

@@ -78,30 +78,47 @@
<h:form id="formCotisations"> <h:form id="formCotisations">
<h5>Liste des Cotisations</h5> <h5>Liste des Cotisations</h5>
<!-- Filtres --> <!-- Filtres et recherche (DRY/WOU: filter-bar) -->
<p:toolbar> <ui:decorate template="/templates/components/cards/filter-bar.xhtml">
<p:toolbarGroup> <ui:param name="title" value="Filtres" />
<div class="flex align-items-center gap-2"> <ui:param name="styleClass" value="mb-3" />
<span class="p-input-icon-left"> <ui:define name="filters">
<div class="col-12 md:col-4">
<div class="field">
<p:outputLabel for="searchMembre" value="Rechercher" />
<span class="p-input-icon-left w-full">
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<p:inputText placeholder="Rechercher par membre..." <p:inputText id="searchMembre"
placeholder="Rechercher par membre..."
value="#{cotisationsBean.filtres.nomMembre}" value="#{cotisationsBean.filtres.nomMembre}"
styleClass="w-full"> styleClass="w-full">
<p:ajax event="keyup" update="dtCotisations" /> <p:ajax event="keyup" update="dtCotisations" delay="500"/>
</p:inputText> </p:inputText>
</span> </span>
</div>
<p:selectOneMenu value="#{cotisationsBean.filtres.statut}" styleClass="w-full"> </div>
<div class="col-12 md:col-2">
<div class="field">
<p:outputLabel for="filtreStatut" value="Statut" />
<p:selectOneMenu id="filtreStatut"
value="#{cotisationsBean.filtres.statut}"
styleClass="w-full">
<f:selectItem itemLabel="Tous les statuts" itemValue="" /> <f:selectItem itemLabel="Tous les statuts" itemValue="" />
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" /> <f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
<f:selectItem itemLabel="Payée" itemValue="PAYEE" /> <f:selectItem itemLabel="Payée" itemValue="PAYEE" />
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" /> <f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" /> <f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE" /> <f:selectItem itemLabel="Annulée" itemValue="ANNULEE" />
<p:ajax update="dtCotisations" /> <p:ajax event="change" update="dtCotisations" />
</p:selectOneMenu> </p:selectOneMenu>
</div>
<p:selectOneMenu value="#{cotisationsBean.filtres.typeCotisation}" styleClass="w-full"> </div>
<div class="col-12 md:col-2">
<div class="field">
<p:outputLabel for="filtreType" value="Type" />
<p:selectOneMenu id="filtreType"
value="#{cotisationsBean.filtres.typeCotisation}"
styleClass="w-full">
<f:selectItem itemLabel="Tous les types" itemValue="" /> <f:selectItem itemLabel="Tous les types" itemValue="" />
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" /> <f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
<f:selectItem itemLabel="Trimestrielle" itemValue="TRIMESTRIELLE" /> <f:selectItem itemLabel="Trimestrielle" itemValue="TRIMESTRIELLE" />
@@ -109,28 +126,33 @@
<f:selectItem itemLabel="Annuelle" itemValue="ANNUELLE" /> <f:selectItem itemLabel="Annuelle" itemValue="ANNUELLE" />
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" /> <f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
<f:selectItem itemLabel="Exceptionnelle" itemValue="EXCEPTIONNELLE" /> <f:selectItem itemLabel="Exceptionnelle" itemValue="EXCEPTIONNELLE" />
<p:ajax update="dtCotisations" /> <p:ajax event="change" update="dtCotisations" />
</p:selectOneMenu> </p:selectOneMenu>
</div> </div>
</p:toolbarGroup> </div>
</ui:define>
<p:toolbarGroup align="right"> <ui:define name="actions">
<ui:include src="/templates/components/buttons/button-secondary.xhtml"> <div class="col-12 md:col-2">
<ui:param name="value" value="Filtres avancés" /> <div class="field">
<ui:param name="icon" value="pi pi-filter" /> <label class="invisible">Actions</label>
<ui:param name="onclick" value="PF('dlgFiltresAvances').show();" /> <p:commandButton value="Filtres avancés"
<ui:param name="outlined" value="true" /> icon="pi pi-filter"
<ui:param name="styleClass" value="mr-2" /> onclick="PF('dlgFiltresAvances').show();"
</ui:include> styleClass="ui-button-secondary w-full" />
<ui:include src="/templates/components/buttons/button-secondary.xhtml"> </div>
<ui:param name="value" value="Réinitialiser" /> </div>
<ui:param name="icon" value="pi pi-times" /> <div class="col-12 md:col-2">
<ui:param name="action" value="#{cotisationsBean.reinitialiserFiltres}" /> <div class="field">
<ui:param name="update" value="@form" /> <label class="invisible">Réinitialiser</label>
<ui:param name="outlined" value="true" /> <p:commandButton value="Réinitialiser"
</ui:include> icon="pi pi-filter-slash"
</p:toolbarGroup> action="#{cotisationsBean.reinitialiserFiltres}"
</p:toolbar> update="dtCotisations searchMembre filtreStatut filtreType"
styleClass="ui-button-secondary w-full" />
</div>
</div>
</ui:define>
</ui:decorate>
<!-- Tableau des cotisations --> <!-- Tableau des cotisations -->
<p:dataTable id="dtCotisations" <p:dataTable id="dtCotisations"

View File

@@ -77,18 +77,31 @@
<h:form id="formEvenements"> <h:form id="formEvenements">
<h5>Liste des Événements</h5> <h5>Liste des Événements</h5>
<!-- Filtres --> <!-- Filtres et recherche (DRY/WOU: filter-bar) -->
<p:toolbar> <ui:decorate template="/templates/components/cards/filter-bar.xhtml">
<p:toolbarGroup> <ui:param name="title" value="Filtres" />
<div class="flex align-items-center gap-2 flex-wrap"> <ui:param name="styleClass" value="mb-3" />
<ui:include src="/templates/components/forms/form-field-search-text.xhtml"> <ui:define name="filters">
<ui:param name="id" value="searchTitre" /> <div class="col-12 md:col-4">
<ui:param name="value" value="#{evenementsBean.filtres.titre}" /> <div class="field">
<ui:param name="placeholder" value="Rechercher par titre..." /> <p:outputLabel for="searchTitre" value="Rechercher" />
<ui:param name="update" value="dtEvenements" /> <span class="p-input-icon-left w-full">
</ui:include> <i class="pi pi-search"></i>
<p:inputText id="searchTitre"
<p:selectOneMenu value="#{evenementsBean.filtres.type}" styleClass="w-full" style="min-width: 200px;"> placeholder="Rechercher par titre..."
value="#{evenementsBean.filtres.titre}"
styleClass="w-full">
<p:ajax event="keyup" update="dtEvenements" delay="500"/>
</p:inputText>
</span>
</div>
</div>
<div class="col-12 md:col-2">
<div class="field">
<p:outputLabel for="filtreType" value="Type" />
<p:selectOneMenu id="filtreType"
value="#{evenementsBean.filtres.type}"
styleClass="w-full">
<f:selectItem itemLabel="Tous les types" itemValue="" /> <f:selectItem itemLabel="Tous les types" itemValue="" />
<f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" /> <f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
<f:selectItem itemLabel="Formation" itemValue="FORMATION" /> <f:selectItem itemLabel="Formation" itemValue="FORMATION" />
@@ -101,8 +114,14 @@
<f:selectItem itemLabel="Autre" itemValue="AUTRE" /> <f:selectItem itemLabel="Autre" itemValue="AUTRE" />
<p:ajax event="change" update="dtEvenements" /> <p:ajax event="change" update="dtEvenements" />
</p:selectOneMenu> </p:selectOneMenu>
</div>
<p:selectOneMenu value="#{evenementsBean.filtres.statut}" styleClass="w-full" style="min-width: 200px;"> </div>
<div class="col-12 md:col-2">
<div class="field">
<p:outputLabel for="filtreStatut" value="Statut" />
<p:selectOneMenu id="filtreStatut"
value="#{evenementsBean.filtres.statut}"
styleClass="w-full">
<f:selectItem itemLabel="Tous les statuts" itemValue="" /> <f:selectItem itemLabel="Tous les statuts" itemValue="" />
<f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" /> <f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
<f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" /> <f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
@@ -112,8 +131,14 @@
<f:selectItem itemLabel="Reporté" itemValue="REPORTE" /> <f:selectItem itemLabel="Reporté" itemValue="REPORTE" />
<p:ajax event="change" update="dtEvenements" /> <p:ajax event="change" update="dtEvenements" />
</p:selectOneMenu> </p:selectOneMenu>
</div>
<p:selectOneMenu value="#{evenementsBean.filtres.priorite}" styleClass="w-full" style="min-width: 150px;"> </div>
<div class="col-12 md:col-2">
<div class="field">
<p:outputLabel for="filtrePriorite" value="Priorité" />
<p:selectOneMenu id="filtrePriorite"
value="#{evenementsBean.filtres.priorite}"
styleClass="w-full">
<f:selectItem itemLabel="Toutes les priorités" itemValue="" /> <f:selectItem itemLabel="Toutes les priorités" itemValue="" />
<f:selectItem itemLabel="Critique" itemValue="CRITIQUE" /> <f:selectItem itemLabel="Critique" itemValue="CRITIQUE" />
<f:selectItem itemLabel="Haute" itemValue="HAUTE" /> <f:selectItem itemLabel="Haute" itemValue="HAUTE" />
@@ -121,14 +146,22 @@
<f:selectItem itemLabel="Basse" itemValue="BASSE" /> <f:selectItem itemLabel="Basse" itemValue="BASSE" />
<p:ajax event="change" update="dtEvenements" /> <p:ajax event="change" update="dtEvenements" />
</p:selectOneMenu> </p:selectOneMenu>
<p:commandButton value="Réinitialiser" icon="pi pi-filter-slash"
action="#{evenementsBean.reinitialiserFiltres}"
update="dtEvenements, formEvenements"
styleClass="p-button-outlined" />
</div> </div>
</p:toolbarGroup> </div>
</p:toolbar> </ui:define>
<ui:define name="actions">
<div class="col-12 md:col-2">
<div class="field">
<label class="invisible">Actions</label>
<p:commandButton value="Réinitialiser"
icon="pi pi-filter-slash"
action="#{evenementsBean.reinitialiserFiltres}"
update="dtEvenements searchTitre filtreType filtreStatut filtrePriorite"
styleClass="ui-button-secondary w-full" />
</div>
</div>
</ui:define>
</ui:decorate>
<!-- Tableau des événements --> <!-- Tableau des événements -->
<p:dataTable id="dtEvenements" <p:dataTable id="dtEvenements"