Empêche la soumission d'une modification sans changement (#400)

Empêche la soumission d'une modification de block sans changement de valeur avec dirtyFormTracking de stimulus-library Co-authored-by: Loïc Delmaire <[email protected]>
etalab · Sep 16, 2024 · 92cf12f · 92cf12f
1 parent 0abcc07
commit 92cf12f
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 5 deletions.
diff --git a/app/helpers/authorization_requests_helpers.rb b/app/helpers/authorization_requests_helpers.rb
@@ -58,6 +58,10 @@ def authorization_request_form_tag(authorization_request, url: nil, &)
  url: url || authorization_request_model_path(authorization_request),
  method: authorization_request_model_http_method(authorization_request),
  id: dom_id(authorization_request),
+ data: {
+ action: 'modified-form#submit form-dirtied->modified-form#update form-cleaned->modified-form#update',
+ controller: 'modified-form',
+ },
  builder: authorization_request_can_be_updated?(authorization_request) ? AuthorizationRequestFormBuilder : DisabledAuthorizationRequestFormBuilder, &
  )
  end

diff --git a/app/javascript/controllers/fill_contact_data_with_applicant_data_controller.js b/app/javascript/controllers/fill_contact_data_with_applicant_data_controller.js
@@ -11,6 +11,7 @@ export default class extends Controller {
 
  if (element) {
  element.value = this.applicantDataValue[field]
+ element.dispatchEvent(new Event('input', { bubbles: true }))
  }
  })
 

diff --git a/app/javascript/controllers/modified_form_controller.js b/app/javascript/controllers/modified_form_controller.js
@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus'
+import { useDirtyFormTracking, isDirty } from 'stimulus-library'
+
+export default class extends Controller {
+ static targets = ['submit']
+
+ connect () {
+ if (this.hasSubmitTarget) {
+ this.submitTarget.disabled = true
+ }
+ useDirtyFormTracking(this, this.element)
+
+ this.update()
+ }
+
+ submit (event) {
+ if (isDirty(this.element)) { return }
+
+ event.preventDefault()
+ }
+
+ update () {
+ if (!this.hasSubmitTarget) { return }
+
+ if (isDirty(this.element)) {
+ this.submitTarget.disabled = false
+ } else {
+ this.submitTarget.disabled = true
+ }
+ }
+}
diff --git a/app/views/authorization_request_forms/shared/_contact.html.erb b/app/views/authorization_request_forms/shared/_contact.html.erb
@@ -6,7 +6,7 @@
  <%= t("authorization_request_forms.default.#{contact_type}.title") %>
  </h6>
 
- <button type="button" class="fr-btn fr-btn--secondary fr-btn--sm" data-action="click->fill-contact-data-with-applicant-data#perform">
+ <button type="button" class="fr-btn fr-btn--secondary fr-btn--sm" data-action="fill-contact-data-with-applicant-data#perform">
  <%= t('.its_me') %>
  </button>
  </div>

diff --git a/app/views/authorization_request_forms/shared/_personal_data.html.erb b/app/views/authorization_request_forms/shared/_personal_data.html.erb
@@ -19,4 +19,3 @@
  <%= f.dsfr_text_area :duree_conservation_donnees_caractere_personnel_justification %>
  </div>
 </fieldset>
-
diff --git a/app/views/authorization_requests/blocks/edit.html.erb b/app/views/authorization_requests/blocks/edit.html.erb
@@ -9,7 +9,7 @@
  <%= link_to t('authorization_request_forms.form.back'), :back, class: %w(fr-btn fr-btn--secondary fr-icon-arrow-left-s-line-double fr-btn--icon-left fr-mb-0) %>
  </li>
  <li>
- <%= f.button t('authorization_request_forms.form.save'), type: :submit, name: :save, id: :save_authorization_request, class: %w(fr-btn fr-btn--primary fr-icon-save-line fr-btn--icon-left fr-mb-0) %>
+ <%= f.button t('authorization_request_forms.form.save'), type: :submit, name: :save, id: :save_authorization_request, class: %w(fr-btn fr-btn--primary fr-icon-save-line fr-btn--icon-left fr-mb-0), data: { modified_form_target: "submit" } %>
  </li>
  </ul>
  </div>

diff --git a/config/importmap.rb b/config/importmap.rb
@@ -2,6 +2,16 @@
 
 pin "application", preload: true
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
-pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.2/dist/stimulus.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "stimulus-library", to: "https://ga.jspm.io/npm:[email protected]/dist/index.js"
+pin "@stimulus-library/controllers", to: "https://ga.jspm.io/npm:@stimulus-library/[email protected]/dist/index.js"
+pin "@stimulus-library/mixins", to: "https://ga.jspm.io/npm:@stimulus-library/[email protected]/dist/index.js"
+pin "@stimulus-library/utilities", to: "https://ga.jspm.io/npm:@stimulus-library/[email protected]/dist/index.js"
+pin "date-fns/formatDistanceToNow", to: "https://ga.jspm.io/npm:[email protected]/formatDistanceToNow.mjs"
+pin "date-fns/formatDuration", to: "https://ga.jspm.io/npm:[email protected]/formatDuration.mjs"
+pin "date-fns/intervalToDuration", to: "https://ga.jspm.io/npm:[email protected]/intervalToDuration.mjs"
+pin "date-fns/isPast", to: "https://ga.jspm.io/npm:[email protected]/isPast.mjs"
+pin "date-fns/toDate", to: "https://ga.jspm.io/npm:[email protected]/toDate.mjs"
+pin "mitt", to: "https://ga.jspm.io/npm:[email protected]/dist/mitt.mjs"
diff --git a/features/modification_depuis_resume_habilitation.feature b/features/modification_depuis_resume_habilitation.feature
@@ -24,6 +24,7 @@ Fonctionnalité: Modifications d'un formulaire depuis sa page de résumé
  Et que je clique sur "Retour à la synthèse"
  Alors la page contient "Soumettre la demande d'habilitation"
 
+ @javascript
  Scénario: Modification avec des données valides
  Quand je clique sur "Modifier" dans le bloc de résumé "Les personnes impliquées"
  Et que je remplis les informations du contact "Responsable de traitement" avec :
@@ -40,3 +41,12 @@ Fonctionnalité: Modifications d'un formulaire depuis sa page de résumé
  | | Louis | nouveau.louis@gouv.fr | 0836656560 | Directeur d'exploitation |
  Et que je clique sur "Enregistrer les modifications"
  Alors il y a un message d'erreur contenant "lors de la sauvegarde"
+
+ @javascript
+ Scénario: Tentative de sauvegarde sans modification
+ Quand je clique sur "Modifier" dans le bloc de résumé "Les personnes impliquées"
+ Alors je peux voir le bouton "Enregistrer les modifications" grisé et désactivé
+ Et que je remplis "Fonction du responsable de traitement" avec "Directeur d'exploitation"
+ Et que je clique sur "Enregistrer les modifications"
+ Alors il y a un message de succès contenant "été sauvegardé"
+ Et la page contient "Récapitulatif de votre demande"
diff --git a/features/step_definitions/web_steps.rb b/features/step_definitions/web_steps.rb
@@ -65,7 +65,15 @@
 end
 
 Quand('je remplis {string} avec {string}') do |label, value|
- fill_in label, with: value
+ if javascript?
+ node = find_field(label)
+
+ value.chars.each do |char|
+ node.send_keys(char)
+ end
+ else
+ fill_in label, with: value
+ end
 end
 
 Quand('je clique sur {string} dans la rangée {string}') do |link, row|