Merge pull request #6386 from betagouv/feat/4659

ETQ usager et instructeur, je ne veux pas perdre le texte d'un message

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|
-      = f.text_area :answer, rows: 3, placeholder: 'Votre avis', required: true
+    = 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, 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/_messagerie.html.haml

@@ -5,6 +5,6 @@
         = render partial: "shared/dossiers/messages/message", locals: { commentaire: commentaire, connected_user: connected_user, messagerie_seen_at: messagerie_seen_at, show_reply_button: show_reply_button(commentaire, connected_user) }
 
   - if dossier.messagerie_available?
-    = render partial: "shared/dossiers/messages/form", locals: { commentaire: new_commentaire, form_url: form_url }
+    = render partial: "shared/dossiers/messages/form", locals: { commentaire: new_commentaire, form_url: form_url, dossier: dossier }
   - else
     = render partial: "shared/dossiers/messages/messagerie_disabled", locals: { service: dossier.procedure.service, dossier: dossier }

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

@@ -1,8 +1,9 @@
-= form_for(commentaire, url: form_url, html: { class: 'form' }) 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'
+  = 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