Ruby helpers for js.erb responses

app/assets/stylesheets/application.scss

@@ -178,7 +178,8 @@ div.pagination {
 }
 
 .alert.alert-success.move-up,
-.alert.alert-danger.siret {
+.alert.alert-danger.siret,
+.alert.sticky {
   position: fixed;
   top: 0px;
   left: 0;

app/helpers/application_helper.rb

@@ -7,13 +7,43 @@ module ApplicationHelper
     end
   end
 
-  def flash_class(level)
+  def flash_class(level, sticky = false)
     case level
-    when "notice" then "alert-success"
+    when "notice" then "alert-success#{sticky ? ' sticky' : ''}"
-    when "alert" then "alert-danger"
+    when "alert" then "alert-danger#{sticky ? ' sticky' : ''}"
     end
   end
 
+  def render_to_element(selector, partial:, outer: false, locals: {})
+    method = outer ? 'outerHTML' : 'innerHTML'
+    html = escape_javascript(render partial: partial, locals: locals)
+    # rubocop:disable Rails/OutputSafety
+    raw("document.querySelector('#{selector}').#{method} = \"#{html}\";")
+    # rubocop:enable Rails/OutputSafety
+  end
+
+  def render_flash(timeout: false, sticky: false)
+    if flash.any?
+      html = render_to_element('#flash_messages', partial: 'layouts/flash_messages', locals: { sticky: sticky }, outer: true)
+      flash.clear
+      if timeout
+        html += remove_element('#flash_messages', timeout: timeout, inner: true)
+      end
+      html
+    end
+  end
+
+  def remove_element(selector, timeout: 0, inner: false)
+    script = "(function() {";
+    script << "var el = document.querySelector('#{selector}');"
+    method = (inner ? "el.innerHTML = ''" : "el.parentNode.removeChild(el)")
+    script << "setTimeout(function() { #{method}; }, #{timeout});";
+    script << "})();"
+    # rubocop:disable Rails/OutputSafety
+    raw(script);
+    # rubocop:enable Rails/OutputSafety
+  end
+
   def current_email
     current_user&.email ||
       current_gestionnaire&.email ||

app/views/admin/pieces_justificatives/show.js.erb

@@ -1,4 +1,2 @@
-<% flash.each do |type, message| %>
+<%= render_flash(timeout: 3000, sticky: true) %>
-$("#flash_message").html("<div class=\"alert alert-success move-up\" style=\"display: block:\"> <%= sanitize(message) %></div>").children().fadeOut(5000)
+<%= render_to_element('#piece_justificative_form', partial: 'admin/pieces_justificatives/form', locals: { procedure: @procedure }) %>
-<%  end %>
-$('#piece_justificative_form').html("<%= escape_javascript(render partial: 'form', locals: { procedure: @procedure } ) %>");

app/views/admin/procedures/transfer.js.erb

@@ -1,9 +1,7 @@
 <%- if response.status == 404 %>
   transfer_errors_message(true);
 <%- else %>
-  $("#main-container").prepend("<div class='row'><div id='flash_message'></div></div>");
+  <%= render_flash %>
-  $("#flash_message").prepend("<div class=\"alert alert-success\"> <%= sanitize(flash.notice) %></div>");
-  <% flash.clear %>
 
   transfer_errors_message(false);
   $("#email_admin").val('');

app/views/admin/types_de_champ/show.js.erb

@@ -1,5 +1,3 @@
-<% flash.each do |type, message| %>
+<%= render_flash(timeout: 3000, sticky: true) %>
-$("#flash_message").html("<div class=\"alert alert-success move-up\" style=\"display: block:\"> <%= sanitize(message) %></div>").children().fadeOut(5000)
+<%= render_to_element('#liste-champ', partial: 'admin/types_de_champ/form', locals: { procedure: @procedure, types_de_champ: @types_de_champ }) %>
-<%  end %>
+on_change_type_de_champ_select();
-$('#liste-champ').html("<%= escape_javascript(render partial: 'admin/types_de_champ/form', locals: { procedure: @procedure, types_de_champ: @types_de_champ } ) %>");
-on_change_type_de_champ_select ();

app/views/champs/siret/index.js.erb

@@ -1,8 +1,5 @@
-(function() {
+<% if @blank || @error %>
-  <% if @blank || @error %>
+  <%= render_to_element("#etablissement-for-#{@champ.id}", partial: 'shared/champs/siret/delete_etablissement', locals: { message: @error, position: @champ.order_place, etablissement: @etablissement }) %>
-    var html = "<%= escape_javascript(render partial: 'shared/champs/siret/delete_etablissement', locals: { message: @error, position: @champ.order_place, etablissement: @etablissement }) %>";
+<% else %>
-  <% else %>
+  <%= render_to_element("#etablissement-for-#{@champ.id}", partial: 'shared/champs/siret/etablissement', locals: { position: @champ.order_place, etablissement: @etablissement }) %>
-    var html = "<%= escape_javascript(render partial: 'shared/champs/siret/etablissement', locals: { position: @champ.order_place, etablissement: @etablissement }) %>";
+<% end %>
-  <% end %>
-  document.querySelector("#etablissement-for-<%= @champ.id %>").innerHTML = html;
-})();

app/views/invites/create.js.erb

@@ -1,6 +1,2 @@
-var formView = "<%= escape_javascript(render partial: 'invites/form', locals: { dossier: @dossier }) %>";
+<%= render_to_element('#invites-form', partial: 'invites/form', locals: { dossier: @dossier }, outer: true) %>
-document.querySelector("#invites-form").outerHTML = formView;
+<%= render_flash %>
-
-var flashMessagesView = "<%= escape_javascript(render partial: 'layouts/flash_messages') %>";
-document.querySelector("#flash_messages").outerHTML = flashMessagesView;
-<% flash.clear %>

app/views/layouts/_flash_messages.html.haml

@@ -2,11 +2,12 @@
   - if flash.any?
     #flash_message.center
       - flash.each do |key, value|
+        - sticky = defined?(sticky) ? sticky : false
         - if value.class == Array
-          .alert{ class: flash_class(key) }
+          .alert{ class: flash_class(key, sticky) }
             - value.each do |message|
               = sanitize(message)
               %br
         - else
-          .alert{ class: flash_class(key) }
+          .alert{ class: flash_class(key, sticky) }
             = sanitize(value)

app/views/new_user/feedbacks/create.js.erb

@@ -1,4 +1,2 @@
-document.querySelector('#user-satisfaction').innerHTML = '';
+<%= remove_element('#user-satisfaction') %>
-var flashMessagesView = "<%= escape_javascript(render partial: 'layouts/flash_messages') %>";
+<%= render_flash %>
-document.querySelector("#flash_messages").outerHTML = flashMessagesView;
-<% flash.clear %>