Merge pull request #12799 from mfo/US/preserve-progress-bar

correctif: l'upload multiple ne devrait pas supprimer une progress bar quand un upload est terminé

Author: tchak

app/components/attachment/file_field_component.rb

@@ -79,6 +79,10 @@ def empty_component_id
     champ.present? ? "attachment-empty-#{champ.public_id}" : "attachment-empty-generic"
   end
 
+  def progress_container_id
+    champ.present? ? "attachment-progress-#{champ.public_id}" : "attachment-progress-generic"
+  end
+
   def describedby_hint_id
     return nil if champ.nil?
     "#{champ.focusable_input_id}-hint"

app/components/attachment/file_field_component/file_field_component.html.erb

@@ -50,6 +50,13 @@
   <%# Error wrapper %>
   <%= render Attachment::ErrorWrapperComponent.new(with_top_margin: !show_uploader?) %>
 
+  <%# Progress bars container — preserved during turbo morph %>
+  <div
+    id="<%= progress_container_id %>"
+    data-turbo-force="browser"
+    data-progress-container
+  ></div>
+
   <%# Existing files %>
   <% if @attachments.any? %>
     <% if show_as_list? %>

app/javascript/shared/activestorage/progress-bar.ts

@@ -20,7 +20,14 @@ export default class ProgressBar {
   static init(input: HTMLInputElement, id: string, file: File) {
     clearErrors(input);
     const html = this.render(id, file.name);
-    input.before(html);
+    const progressContainer = input
+      .closest('.attachment-field')
+      ?.querySelector<HTMLElement>('[data-progress-container]');
+    if (progressContainer) {
+      progressContainer.append(html);
+    } else {
+      input.before(html);
+    }
   }
 
   static start(id: string) {
@@ -128,8 +135,11 @@ export default class ProgressBar {
 }
 
 function clearErrors(input: HTMLInputElement) {
-  const errorElements =
-    input.parentElement?.querySelectorAll(`.${ERROR_CLASS}`) ?? [];
+  const container =
+    input
+      .closest('.attachment-field')
+      ?.querySelector('[data-progress-container]') ?? input.parentElement;
+  const errorElements = container?.querySelectorAll(`.${ERROR_CLASS}`) ?? [];
   for (const element of errorElements) {
     element.remove();
   }

app/javascript/shared/activestorage/uploader.ts

@@ -55,7 +55,8 @@ export default class Uploader {
 
       if (this.autoAttachUrl) {
         await this.attach(blobSignedId, this.autoAttachUrl);
-        // On response, the attachment HTML fragment will replace the progress bar.
+        this.progressBar.end();
+        this.progressBar.destroy();
       } else {
         this.progressBar.end();
         this.progressBar.destroy();

app/views/champs/repetition/add.turbo_stream.erb

@@ -1,6 +1,7 @@
 <% if @row_id.present? %>
   <%= fields_for @champ.input_name, @champ do |form| %>
     <%= turbo_stream.append dom_id(@champ, :rows), render(EditableChamp::RepetitionRowComponent.new(form: form, dossier: @champ.dossier, champ: @champ, row_id: @row_id, row_number: @row_number, expanded: true)) %>
+
     <% if @first_champ_id %>
       <%= turbo_stream.focus(@first_champ_id, delay: 50) %>
     <% end %>

app/views/champs/repetition/remove.turbo_stream.erb

@@ -7,7 +7,8 @@
 <% end %>
 
 <% if @deleted_row_number %>
-  <%= turbo_stream.append dom_id(@champ, :deletion_announcement), delay: 1000 do %> <%# the delay is to ensure there is not conflict with the focus %>
+  <%= turbo_stream.append dom_id(@champ, :deletion_announcement), delay: 1000 do %>
+    <%# the delay is to ensure there is not conflict with the focus %>
     <%= t('editable_champ.repetition_component.deleted', row_number: @deleted_row_number, libelle: @champ.row_libelle) %>
   <% end %>
 <% end %>