[dsfr-ui] fix componentId arg to dsfr-button-submit

Author: ppinette

vertigo-ui/src/main/resources/io/vertigo/ui/components/dsfr/buttons/dsfr-button-submit.html

@@ -18,26 +18,25 @@
 
 <th:block th:fragment="dsfr-button-submit-confirm(label, icon, action, componentId, title, loading, titleMessage, confirmMessage, labelOk, labelCancel, modal_attrs, other_attrs)"
           th:assert="(${label} != null or (${icon} != null and ${title} != null)) and ${action} != null and ${componentId} != null"
-          th:with="myComponentId='${componentId}',
-                   myLabelOk=${labelOk?:'Oui'},
+          th:with="myLabelOk=${labelOk?:'Oui'},
                    myLabelCancel=${labelCancel?:'Non'},
                    myLoading=${loading}?:true"
-          th:attr="objectKey=${model.vContext['componentStates'].addComponentState(myComponentId).addPrimitive('confirm',false)}">
+          th:attr="objectKey=${model.vContext['componentStates'].addComponentState(componentId).addPrimitive('confirm',false)}">
 
     <dsfr-button th:icon="${icon?:''}"
                  th::icon-only="${label==null}"
                  th:label="${label?:''}"
                  th:title="${vTitle==null ? (title?:'') : ''}"
                  th::title="${vTitle?:''}"
-                 th:@click="|componentStates.${myComponentId}.confirm = true|"
-                 th:ref="${myComponentId}"
+                 th:@click="|componentStates.__${componentId}__.confirm = true|"
+                 th:ref="__${componentId}__"
                  type="button"
                  th:attr="__${other_attrs}__">
         <span class="sr-only" th:if="${label==null && vTitle==null}" vu:text="${title?:''}"></span>
         <span class="sr-only" th:if="${label==null && vTitle!=null}" th:text="|{{ ${vTitle?:''} }}|"></span>
     </dsfr-button>
-    <dsfr-modal th:v-model:opened="|componentStates.${myComponentId}.confirm|"
-                th:@close="|componentStates.${myComponentId}.confirm = false|"
+    <dsfr-modal th:v-model:opened="|componentStates.__${componentId}__.confirm|"
+                th:@close="|componentStates.__${componentId}__.confirm = false|"
                 th:title="${titleMessage}"
                 th::actions="|[
                     {label: '${myLabelOk}',
@@ -48,9 +47,9 @@
 					{label: '${myLabelCancel}',
 				     type: 'button',
 					 secondary: true,
-					 onClick () { componentStates.${myComponentId}.confirm = false }
+					 onClick () { componentStates.__${componentId}__.confirm = false }
 					}]|"
-			    th::origin="|$refs.${myComponentId}|"
+			    th::origin="|$refs.__${componentId}__|"
                 th:attr="__${modal_attrs}__">
         <template #default>
             <vu:content>

vertigo-ui/src/test/resources/testWebApp/WEB-INF/views/data/componentsDemoDsfr.html

@@ -63,7 +63,8 @@ <h6>Test grid</h6>
             <h6>Global</h6>
             <vu:dsfr-grid cols="3" class="fr-grid-row--gutters">
 
-                <vu:dsfr-text-field :class="{ disabled: true && false || false }" readonly="true" object="movie" field="movId"/>
+                <vu:dsfr-text-field :class="{ disabled: true && false || false }" readonly="true" object="movie"
+                                    field="movId"/>
                 <th:block th:with="readonly=true">
                     <vu:dsfr-text-field object="movie" field="title" emptyValue="Non renseignée"/>
                 </th:block>
@@ -134,12 +135,15 @@ <h6>Global</h6>
                         C’est une super modale
                     </p>
                 </vu:dsfr-dialog>
-                <dsfr-button @click="componentStates.dialog.opened = true" label="Ouvre-moi" secondary type="button"></dsfr-button>
+                <dsfr-button @click="componentStates.dialog.opened = true" label="Ouvre-moi" secondary
+                             type="button"></dsfr-button>
 
                 <h2>Tooltip</h2>
 
                 <vu:dsfr-grid-cell class="q-gutter-md">
-                    <dsfr-button-tooltip @click="componentStates.dialog.opened = true" label="Ouvre-moi" secondary type="button">Ouvre la modale juste normal tqt</dsfr-button-tooltip>
+                    <dsfr-button-tooltip @click="componentStates.dialog.opened = true" label="Ouvre-moi" secondary
+                                         type="button">Ouvre la modale juste normal tqt
+                    </dsfr-button-tooltip>
 
                     <dsfr-button icon="fr-icon-arrow-right-line" icon-only></dsfr-button>
                     <dsfr-button-tooltip icon="fr-icon-arrow-right-line" icon-only>Icône seulement</dsfr-button-tooltip>
@@ -151,10 +155,12 @@ <h2>Tooltip</h2>
                     <dsfr-link th:href="@{/}" size="sm">Petit lien</dsfr-link>
                     <dsfr-link th:href="@{/}" as-button size="sm">Petit lien</dsfr-link>
                     <dsfr-link-tooltip th:href="@{/}" label="Ceci est un lien">Lien</dsfr-link-tooltip>
-                    <dsfr-link-tooltip as-button tertiary th:href="@{/}" label="Ceci est un lien">Bouton (lien)</dsfr-link-tooltip>
+                    <dsfr-link-tooltip as-button tertiary th:href="@{/}" label="Ceci est un lien">Bouton (lien)
+                    </dsfr-link-tooltip>
 
                     <p>
-                        Lorem ipsum doleret <dsfr-link-tooltip inline th:href="@{/}" label="ispum demso">ipsum demso</dsfr-link-tooltip>
+                        Lorem ipsum doleret
+                        <dsfr-link-tooltip inline th:href="@{/}" label="ispum demso">ipsum demso</dsfr-link-tooltip>
                     </p>
 
                     <dsfr-link th:href="@{/dossier/eleve/candidatures/}" as-button secondary disabled>
@@ -238,6 +244,11 @@ <h2>Tooltip</h2>
             </div>
         </div>
 
+        <vu:dsfr-button-submit-confirm componentId="com"
+                                       confirmMessage="Coucou la confirmation"
+                                       action="@{/}"
+                                       label="Bouton de confirmation"/>
+
 
     </vu:form>