Make generic

app/javascript/new_design/messagerie.js

@@ -14,4 +14,45 @@ function scrollMessagerie() {
   }
 }
 
+function saveMessageContent() {
+  const commentaireForms = Array.from(
+    document.querySelectorAll('form[data-persisted-content-id]')
+  );
+
+  if (commentaireForms.length) {
+    const commentaireInputs = Array.from(
+      document.querySelectorAll('.persisted-input')
+    );
+
+    const persistedContentIds = commentaireForms.map(
+      (form) => form.dataset.persistedContentId
+    );
+
+    const keys = persistedContentIds.map((key) => `persisted-value-${key}`);
+
+    const object = commentaireInputs.map((input, index) => {
+      return {
+        input: input,
+        form: commentaireForms[index],
+        key: keys[index]
+      };
+    });
+
+    for (const el of object) {
+      if (localStorage.getItem(el.key)) {
+        el.input.value = localStorage.getItem(el.key);
+      }
+
+      el.input.addEventListener('change', (event) => {
+        localStorage.setItem(el.key, event.target.value);
+      });
+
+      el.form.addEventListener('submit', () => {
+        localStorage.removeItem(el.key);
+      });
+    }
+  }
+}
+
 addEventListener('ds:page:update', scrollMessagerie);
+addEventListener('ds:page:update', saveMessageContent);

app/views/experts/avis/instruction.html.haml

@@ -15,8 +15,8 @@
       = render partial: 'shared/attachment/show', locals: { attachment: @avis.introduction_file.attachment }
     %br/
 
-    = form_for @avis, url: expert_avis_path(@avis.procedure, @avis), html: { class: 'form' } do |f|
+    = form_for @avis, url: expert_avis_path(@avis.procedure, @avis), html: { class: 'form', data: { persisted_content_id: @avis.id } } do |f|
-      = f.text_area :answer, rows: 3, placeholder: 'Votre avis', required: true
+      = f.text_area :answer, rows: 3, placeholder: 'Votre avis', required: true, class: 'persisted-input'
       = text_upload_and_render f, @avis.piece_justificative_file
 
       .flex.justify-between.align-baseline

app/views/experts/shared/avis/_form.html.haml

@@ -3,7 +3,7 @@
     %h1.tab-title Inviter des personnes à donner leur avis
     %p.avis-notice Les invités pourront consulter le dossier, donner un avis et contribuer au fil de messagerie. Ils ne pourront pas modifier le dossier.
 
-    = form_for avis, url: url, html: { class: 'form' } do |f|
+    = form_for avis, url: url, html: { class: 'form', data: { persisted_content_id: "expert-ask-avis-for-dossier-#{@avis.dossier.id}" } } do |f|
       - hidden_field_id = SecureRandom.uuid
       = hidden_field_tag  'avis[emails]', nil, data: { uuid: hidden_field_id }
       = react_component("ComboMultipleDropdownList",
@@ -12,7 +12,7 @@
           hiddenFieldId: hidden_field_id,
           label: 'avis_emails',
           acceptNewValues: true)
-      = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
+      = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true, class: 'persisted-input'
       %p.tab-title Ajouter une pièce jointe
       .form-group
         = text_upload_and_render f, avis.introduction_file

app/views/instructeurs/shared/avis/_form.html.haml

@@ -6,7 +6,7 @@
   - else
     %p.avis-notice Entrez les adresses email des experts à qui vous souhaitez demander un avis
 
-  = form_for avis, url: url, html: { class: 'form' } do |f|
+  = form_for avis, url: url, html: { class: 'form', data: { persisted_content_id: "instructeur-ask-avis-for-dossier-#{@dossier.id}" } } do |f|
     - hidden_field_id = SecureRandom.uuid
     = hidden_field_tag  'avis[emails]', nil, data: { uuid: hidden_field_id }
     = react_component("ComboMultipleDropdownList",
@@ -17,7 +17,7 @@
         label: 'avis_emails',
         id: 'avis_emails',
         acceptNewValues: !@dossier.procedure.experts_require_administrateur_invitation)
-    = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true
+    = f.text_area :introduction, rows: 3, value: avis.introduction || 'Bonjour, merci de me donner votre avis sur ce dossier.', required: true, class: "persisted-input"
     %p.tab-title Ajouter une pièce jointe
     .form-group
       = text_upload_and_render f, avis.introduction_file

app/views/shared/dossiers/messages/_form.html.haml

@@ -1,9 +1,9 @@
-= form_for(commentaire, url: form_url, html: { class: 'form', id: "commentaire-form-#{@dossier.id}" }) do |f|
+= form_for(commentaire, url: form_url, html: { class: 'form', data: { persisted_content_id: @dossier.id } }) do |f|
   - dossier = commentaire.dossier
   - placeholder = t('views.shared.dossiers.messages.form.write_message_to_administration_placeholder')
   - if instructeur_signed_in? || administrateur_signed_in?
     - placeholder = t('views.shared.dossiers.messages.form.write_message_placeholder')
-  = f.text_area :body, rows: 5, placeholder: placeholder, required: true, class: 'message-textarea', id: "messagerie-#{@dossier.id}"
+  = f.text_area :body, rows: 5, placeholder: placeholder, required: true, class: 'message-textarea persisted-input'
   .flex.justify-between.wrap
     %div
       = f.label :piece_jointe, for: :piece_jointe do
@@ -13,17 +13,3 @@
 
     %div
       = f.submit t('views.shared.dossiers.messages.form.send_message'), class: 'button primary send', data: { disable: true }
-
-:javascript
-  const commentaireInput = document.getElementById('messagerie-#{@dossier.id}')
-  const commentaireForm = document.getElementById('commentaire-form-#{@dossier.id}')
-  commentaireInput.value = localStorage.getItem(`message-#{@dossier.id}`)
-
-  commentaireInput.addEventListener('change', (event) => {
-    localStorage.setItem(`message-#{@dossier.id}`, event.target.value);
-  });
-
-  commentaireForm.addEventListener('submit', () => {
-    localStorage.removeItem(`message-#{@dossier.id}`);
-  })
-

spec/features/users/dossier_shared_examples.rb

@@ -30,7 +30,7 @@ RSpec.shared_examples 'the user can send messages to the instructeur' do
     expect(page).to have_current_path(messagerie_dossier_path(dossier))
     expect(page).to have_content(commentaire.body)
 
-    fill_in "messagerie-#{dossier.id}", with: message_body
+    fill_in 'commentaire_body', with: message_body
     click_on 'Envoyer le message'
 
     expect(page).to have_current_path(messagerie_dossier_path(dossier))