Merge pull request #2365 from tchak/flash-helper

Ruby helpers for js.erb responses

app/assets/javascripts/old_design/admin.js

@@ -1,52 +1,47 @@
-$(document).on('turbolinks:load', init_admin);
+$(document).on('click', '.delete', function() {
+  $(this).hide();
+  $(this)
+    .closest('td')
+    .find('.confirm')
+    .show();
+});
 
-function init_admin(){
-  destroy_action();
-  on_change_type_de_champ_select();
-}
+$(document).on('click', '.cancel', function() {
+  $(this)
+    .closest('td')
+    .find('.delete')
+    .show();
+  $(this)
+    .closest('td')
+    .find('.confirm')
+    .hide();
+});
 
-function destroy_action(){
-  $(".delete").on('click', function(){
-    $(this).hide();
-    $(this).closest('td').find(".confirm").show();
-  });
+$(document).on('change', 'select.form-control.type-champ', function() {
+  var parent = $(this)
+    .parent()
+    .parent();
 
-  $(".cancel").on('click', function(){
-    $(this).closest('td').find(".delete").show();
-    $(this).closest('td').find(".confirm").hide();
-  });
+  parent.removeClass('header-section');
+  parent.children('.drop-down-list').removeClass('show-inline');
+  parent.children('.pj-template').removeClass('show-inline');
 
-  $("#liste-gestionnaire #libelle").on('click', function(){
-    setTimeout(destroy_action, 500);
-  });
-}
+  $('.mandatory', parent).show();
 
-function on_change_type_de_champ_select (){
-  $("select.form-control.type-champ").on('change', function(e){
-
-    parent = $(this).parent().parent();
-
-    parent.removeClass('header-section');
-    parent.children(".drop-down-list").removeClass('show-inline');
-    parent.children(".pj-template").removeClass('show-inline');
-
-    $('.mandatory', parent).show();
-
-    switch(this.value){
-      case 'header_section':
-        parent.addClass('header-section');
-        break;
-      case 'drop_down_list':
-      case 'multiple_drop_down_list':
-      case 'linked_drop_down_list':
-        parent.children(".drop-down-list").addClass('show-inline');
-        break;
-      case 'piece_justificative':
-        parent.children(".pj-template").addClass('show-inline');
-        break;
-      case 'explication':
-        $('.mandatory', parent).hide();
-        break;
-    }
-  });
-}
+  switch (this.value) {
+    case 'header_section':
+      parent.addClass('header-section');
+      break;
+    case 'drop_down_list':
+    case 'multiple_drop_down_list':
+    case 'linked_drop_down_list':
+      parent.children('.drop-down-list').addClass('show-inline');
+      break;
+    case 'piece_justificative':
+      parent.children('.pj-template').addClass('show-inline');
+      break;
+    case 'explication':
+      $('.mandatory', parent).hide();
+      break;
+  }
+});

app/assets/javascripts/old_design/dossiers_list_link.js

@@ -1,10 +1,6 @@
-$(document).on('turbolinks:load', link_init);
-
-function link_init() {
-  $('#dossiers-list tr').on('click', function(event) {
-    var href = $(this).data('href');
-    if (href && event.target.tagName !== 'A') {
-      location.href = href;
-    }
-  });
-}
+$(document).on('click', '#dossiers-list tr', function(event) {
+  var href = $(this).data('href');
+  if (href && event.target.tagName !== 'A') {
+    location.href = href;
+  }
+});

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 "alert" then "alert-danger"
+    when "notice" then "alert-success#{sticky ? ' sticky' : ''}"
+    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| %>
-$("#flash_message").html("<div class=\"alert alert-success move-up\" style=\"display: block:\"> <%= sanitize(message) %></div>").children().fadeOut(5000)
-<%  end %>
-$('#piece_justificative_form').html("<%= escape_javascript(render partial: 'form', locals: { procedure: @procedure } ) %>");
+<%= render_flash(timeout: 3000, sticky: true) %>
+<%= render_to_element('#piece_justificative_form', partial: 'admin/pieces_justificatives/form', locals: { procedure: @procedure }) %>

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

@@ -1,2 +1 @@
 <%= smart_listing_update :procedures %>
-link_init();

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>");
-  $("#flash_message").prepend("<div class=\"alert alert-success\"> <%= sanitize(flash.notice) %></div>");
-  <% flash.clear %>
+  <%= render_flash %>
 
   transfer_errors_message(false);
   $("#email_admin").val('');

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

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

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

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

app/views/invites/create.js.erb

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

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 = '';
-var flashMessagesView = "<%= escape_javascript(render partial: 'layouts/flash_messages') %>";
-document.querySelector("#flash_messages").outerHTML = flashMessagesView;
-<% flash.clear %>
+<%= remove_element('#user-satisfaction') %>
+<%= render_flash %>