Merge pull request activeadmin#1815 from seanlinsley/1815-batch-action-forms

Batch Action forms

Author: seanlinsley

app/assets/javascripts/active_admin/base.js.coffee

@@ -1,11 +1,13 @@
 #= require jquery
-#= require jquery.ui.widget
 #= require jquery.ui.datepicker
+#= require jquery.ui.dialog
 #= require jquery.ui.sortable
+#= require jquery.ui.widget
 #= require jquery_ujs
 #
 #= require_self
-#= require_tree ./lib/
+#= require_tree ./lib
+#= require_tree ./ext
 #= require ./application
 
 window.ActiveAdmin = {}

app/assets/javascripts/active_admin/ext/jquery-ui.js.coffee

@@ -0,0 +1,6 @@
+# Short-circuits `_focusTabbable` to focus on the modal itself instead of
+# elements inside the modal. Without this, if a datepicker is the first input,
+# it'll immediately pop up when the modal opens.
+# See this ticket for more info: http://bugs.jqueryui.com/ticket/4731
+$.ui.dialog.prototype._focusTabbable = ->
+  @uiDialog.focus()

app/assets/javascripts/active_admin/ext/jquery.js.coffee

@@ -0,0 +1,7 @@
+# `serializeArray` generates => [{ name: 'foo', value: 'bar' }]
+# This function remaps it to => { foo: 'bar' }
+$.fn.serializeObject = ->
+  obj = {}
+  for o in @serializeArray()
+    obj[o.name] = o.value
+  obj

app/assets/javascripts/active_admin/lib/batch_actions.js.coffee

@@ -1,12 +1,24 @@
 $ ->
 
   #
-  # Use Rails.js click handler to allow for Rails' confirm dialogs
+  # Use ActiveAdmin.modal_dialog to prompt user if confirmation is required for current Batch Action
   #
+  $('#batch_actions_selector li a').click (e)->
+    e.stopPropagation() # prevent Rails UJS click event
+    if message = $(@).data 'confirm'
+      ActiveAdmin.modal_dialog message, $(@).data('inputs'), (inputs)=>
+        $(@).trigger 'confirm:complete', inputs
+    else
+      $(@).trigger 'confirm:complete'
+
+  $('#batch_actions_selector li a').on 'confirm:complete', (e, inputs)->
+    if val = JSON.stringify inputs
+      $('#batch_action_inputs').val val
+    else
+      $('#batch_action_inputs').attr 'disabled', 'disabled'
 
-  $(document).delegate "#batch_actions_selector li a", "click.rails", ->
-    $("#batch_action").val $(@).attr("data-action")
-    $("#collection_selection").submit()
+    $('#batch_action').val $(@).data 'action'
+    $('#collection_selection').submit()
 
   #
   # Add checkbox selection to resource tables and lists if batch actions are enabled
@@ -20,7 +32,7 @@ $ ->
       $(".paginated_collection").checkboxToggler()
 
     $(".paginated_collection :checkbox").change ->
-      if $(".paginated_collection :checkbox:checked").length > 0
+      if $(".paginated_collection :checkbox:checked").length
         $("#batch_actions_selector").aaDropdownMenu("enable")
       else
         $("#batch_actions_selector").aaDropdownMenu("disable")

app/assets/javascripts/active_admin/lib/modal_dialog.js.coffee

@@ -0,0 +1,30 @@
+ActiveAdmin.modal_dialog = (message, inputs, callback)->
+  html = """<form id="dialog_confirm" title="#{message}"><ul>"""
+  for name, type of inputs
+    if /^(datepicker|checkbox|text)$/.test type
+      wrapper = 'input'
+    else if type is 'textarea'
+      wrapper = 'textarea'
+    else if $.isArray type
+      [wrapper, elem, opts, type] = ['select', 'option', type, '']
+    else
+      throw new Error "Unsupported input type: {#{name}: #{type}}"
+
+    klass = if type is 'datepicker' then type else ''
+    html += """<li>
+      <label>#{name.charAt(0).toUpperCase() + name.slice(1)}</label>
+      <#{wrapper} name="#{name}" class="#{klass}" type="#{type}">""" +
+        (if opts then ("<#{elem}>#{v}</#{elem}>" for v in opts).join '' else '') +
+      "</#{wrapper}>" +
+    "</li>"
+    [wrapper, elem, opts, type, klass] = [] # unset any temporary variables
+
+  html += "</ul></form>"
+  $(html).appendTo('body').dialog
+    modal: true
+    buttons:
+      OK: ->
+        callback $(@).serializeObject()
+        $(@).dialog('close')
+      Cancel: ->
+        $(@).dialog('close').remove()

app/assets/stylesheets/active_admin/_base.css.scss

@@ -12,6 +12,7 @@
 @import "active_admin/components/popovers";
 @import "active_admin/components/tables";
 @import "active_admin/components/batch_actions";
+@import "active_admin/components/modal_dialog";
 @import "active_admin/components/blank_slates";
 @import "active_admin/components/breadcrumbs";
 @import "active_admin/components/dropdown_menu";

app/assets/stylesheets/active_admin/components/_modal_dialog.scss

@@ -0,0 +1,31 @@
+.ui-widget-overlay {
+  position: fixed;
+  background: rgba(0,0,0,.2);
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 1001;
+}
+
+.ui-dialog {
+  position: fixed;
+  z-index: 1002;
+  @include section-background;
+  @include box-shadow(rgba(0,0,0,0.5) 0 0 10px);
+
+  .ui-dialog-titlebar {
+    @include section-header;
+    span { font-size: 1.1em }
+  }
+  .ui-dialog-titlebar-close { display: none }
+
+  ul { list-style-type: none }
+  li { margin: 10px 0 }
+  label { margin-right: 10px }
+
+  .ui-dialog-buttonpane, form {
+    padding: 7px 15px 13px
+  }
+  .ui-dialog-buttonpane button {
+    &:first-child { @include dark-button } // OK
+    &:last-child { @include light-button } // Cancel
+  }
+}

config/locales/bg.yml

@@ -53,7 +53,8 @@ bg:
       link: "Създаване"
     batch_actions:
       button_label: "Масови действия"
-      delete_confirmation: "Сигурни ли сте, че искате да изтриете тези %{plural_model}? Това действие не може да бъде върнато назад."
+      default_confirmation: "Наистина ли искате да направите това?"
+      delete_confirmation: "Сигурни ли сте, че искате да изтриете тези %{plural_model}?"
       succesfully_destroyed:
         one: "Успешно изтриване на 1 %{model}"
         other: "Успешно изтриване на %{count} %{plural_model}"

config/locales/ca.yml

@@ -52,7 +52,8 @@ ca:
       link: "Crea'n un/a"
     batch_actions:
       button_label: "les accions per lots"
-      delete_confirmation: "¿Està segur que desitja eliminar aquests %{plural_model}? Vostè no serà capaç de desfer això."
+      default_confirmation: "¿Esteu segur que voleu fer-ho?"
+      delete_confirmation: "¿Està segur que desitja eliminar aquests %{plural_model}?"
       succesfully_destroyed:
         one: "Va destruir amb èxit 1 %{model}"
         other: "Va destruir amb èxit %{count} %{plural_model}"

config/locales/cs.yml

@@ -54,6 +54,7 @@ cs:
       link: "Vytvořit"
     batch_actions:
       button_label: "Hromadné akce"
+      default_confirmation: "Jste si jisti, že chcete provést?"
       delete_confirmation: "Jste si jisti, že chcete smazat tyto %{plural_model}?"
       succesfully_destroyed:
         zero: "Nebyl smazán žádný %{model}"