feat(client): Création du composant button-form-submit.xhtml pour les actions backend (DRY/WOU)

- Nouveau composant button-form-submit.xhtml pour les boutons de soumission de formulaire
- Utilise ui:decorate avec ui:define pour passer l'expression de méthode action
- Supporte tous les attributs PrimeFaces : update, process, oncomplete, validateClient
- Paramètre severity pour les différents styles (success, secondary, warning, danger)
- Application dans nouvelle.xhtml et liste.xhtml (dialogue de modification)
- Respecte les conventions PrimeFaces et évite les erreurs EL

Cette approche permet de réutiliser le composant tout en passant correctement
les expressions de méthode via ui:define au lieu de ui:param.
This commit is contained in:
dahoud
2025-11-29 19:19:10 +00:00
parent e6c4d5e9ef
commit 2585b38af3
3 changed files with 69 additions and 12 deletions

View File

@@ -224,17 +224,23 @@
</ui:fragment> </ui:fragment>
</ui:define> </ui:define>
<ui:define name="footer"> <ui:define name="footer">
<!-- Bouton Annuler : type="button" pour éviter la soumission -->
<p:commandButton value="Annuler" <p:commandButton value="Annuler"
icon="pi pi-times" icon="pi pi-times"
type="button" type="button"
onclick="PF('dlgModifier').hide();" onclick="PF('dlgModifier').hide();"
styleClass="ui-button-secondary" /> styleClass="ui-button-secondary" />
<p:commandButton value="Enregistrer" <!-- DRY/WOU: button-form-submit pour action backend -->
icon="pi pi-check" <ui:decorate template="/templates/components/buttons/button-form-submit.xhtml">
action="#{organisationsBean.modifierOrganisation}" <ui:param name="value" value="Enregistrer" />
update=":formOrganisations:dtOrganisations :formOrganisations:messages" <ui:param name="icon" value="pi pi-check" />
oncomplete="if(!args.validationFailed) PF('dlgModifier').hide();" <ui:param name="update" value=":formOrganisations:dtOrganisations :formOrganisations:messages" />
styleClass="ui-button-success" /> <ui:param name="oncomplete" value="if(!args.validationFailed) PF('dlgModifier').hide();" />
<ui:param name="severity" value="success" />
<ui:define name="action">
#{organisationsBean.modifierOrganisation}
</ui:define>
</ui:decorate>
</ui:define> </ui:define>
</ui:decorate> </ui:decorate>
</ui:define> </ui:define>

View File

@@ -48,12 +48,16 @@
<ui:param name="icon" value="pi pi-times"/> <ui:param name="icon" value="pi pi-times"/>
<ui:param name="outcome" value="/pages/secure/organisation/liste"/> <ui:param name="outcome" value="/pages/secure/organisation/liste"/>
</ui:include> </ui:include>
<!-- Note: p:commandButton direct car action avec méthode backend ne peut pas être passé via ui:param --> <!-- DRY/WOU: button-form-submit pour action backend -->
<p:commandButton value="Créer" <ui:decorate template="/templates/components/buttons/button-form-submit.xhtml">
icon="pi pi-check" <ui:param name="value" value="Créer" />
action="#{organisationsBean.creerOrganisation}" <ui:param name="icon" value="pi pi-check" />
update=":formNouvelleOrganisation:messages" <ui:param name="update" value=":formNouvelleOrganisation:messages" />
styleClass="ui-button-success" /> <ui:param name="severity" value="success" />
<ui:define name="action">
#{organisationsBean.creerOrganisation}
</ui:define>
</ui:decorate>
</div> </div>
</h:form> </h:form>
</ui:define> </ui:define>

View File

@@ -0,0 +1,47 @@
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<!--
Composant bouton de soumission de formulaire réutilisable (WOU/DRY)
Usage :
<ui:decorate template="/templates/components/buttons/button-form-submit.xhtml">
<ui:param name="value" value="Enregistrer" />
<ui:param name="icon" value="pi pi-check" />
<ui:param name="update" value=":form:messages" />
<ui:param name="process" value="@form" />
<ui:param name="severity" value="success" />
<ui:param name="oncomplete" value="if(!args.validationFailed) PF('dialog').hide();" />
<ui:define name="action">
#{bean.saveMethod}
</ui:define>
</ui:decorate>
Paramètres :
- value : Texte du bouton (requis)
- icon : Icône (optionnel, défaut: pi pi-check)
- update : Composants à mettre à jour (optionnel)
- process : Composants à traiter (optionnel, défaut: @form)
- severity : success, secondary, warning, danger, info, primary (défaut: success)
- disabled : true/false (défaut: false)
- oncomplete : JavaScript à exécuter après l'action (optionnel)
- validateClient : true/false pour validation côté client (défaut: false)
- styleClass : Classes CSS additionnelles (optionnel)
Slot action : Expression de méthode du bean (requis)
-->
<p:commandButton value="#{value}"
icon="#{empty icon ? 'pi pi-check' : icon}"
action="#{action}"
update="#{update}"
process="#{empty process ? '@form' : process}"
oncomplete="#{oncomplete}"
validateClient="#{not empty validateClient and validateClient}"
disabled="#{not empty disabled and disabled}"
styleClass="ui-button-#{empty severity ? 'success' : severity} #{not empty styleClass ? styleClass : ''}"
title="#{title}" />
</ui:composition>