sortable has-many

Author: igorbernstein

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

@@ -1,6 +1,7 @@
 #= require jquery
 #= require jquery.ui.widget
 #= require jquery.ui.datepicker
+#= require jquery.ui.sortable
 #= require jquery_ujs
 #
 #= require_self

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

@@ -9,6 +9,7 @@ $ ->
     e.preventDefault()
     parent    = $(@).closest '.has_many_container'
     to_remove = $(@).closest 'fieldset'
+    recompute_positions parent
 
     parent.trigger 'has_many_remove:before', [ to_remove ]
     to_remove.remove()
@@ -38,4 +39,37 @@ $ ->
       regex = new RegExp elem.data('placeholder'), 'g'
       html  = elem.data('html').replace regex, index
 
-      parent.trigger 'has_many_add:after', [ $(html).insertBefore(@) ]
+      fieldset = $(html).insertBefore(@)
+      recompute_positions parent
+      parent.trigger 'has_many_add:after', [ fieldset ]
+
+  $(document).on 'change','.has_many_container[data-sortable] :input[name$="[_destroy]"]', ->
+    recompute_positions $(@).closest '.has_many'
+
+  init_sortable()
+  $(document).on 'has_many_add:after', '.has_many_container', init_sortable
+
+
+# Helpers
+init_sortable = ->
+  elems = $('.has_many_container[data-sortable]:not(.ui-sortable)')
+  elems.sortable \
+    items: '> fieldset',
+    handle: '> ol > .handle',
+    stop:    recompute_positions
+  elems.each recompute_positions
+
+recompute_positions = (parent)->
+  parent     = if parent instanceof jQuery then parent else $(@)
+  input_name = parent.data 'sortable'
+  position   = 0
+
+  parent.children('fieldset').each ->
+    fieldset = $(@)
+    # when looking for inputs, we ignore inputs from the possibly nested inputs
+    # so, when defining your has_many, make sure to keep the sortable input at the root of the has_many block
+    destroy_input  = fieldset.find "> ol > .input > :input[name$='[_destroy]']"
+    sortable_input = fieldset.find "> ol > .input > :input[name$='[#{input_name}]']"
+
+    if sortable_input.length
+      sortable_input.val if destroy_input.is ':checked' then '' else position++

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

@@ -8,6 +8,7 @@ form {
     border: 0;
     padding: 10px 0;
     margin-bottom: 20px;
+    position: relative; // required for the absolutely positioned sortable .handle 
 
     &.inputs { @include section-background; }
 
@@ -51,12 +52,31 @@ form {
     }
   }
 
+  .has_many_container .handle {
+    position: absolute;
+    @include icon-size(3em);
+    top: calc(50% - 3em / 2);
+    right: 2px;
+    padding: 0;
+    cursor: move;
+  }
+
+  .ui-sortable {
+    // give the handle space!
+    input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
+      width: calc(80% - #{$text-input-total-padding} - 2em - 1px);
+    }
+    // If a sortable is nested in a sortable, give the parent handle space!
+    .ui-sortable .has_many_fields {
+      margin-right: 2em;
+    }
+  }
+
   /* Nested Fieldsets and Legends */
   li.has_many_container {
     fieldset.has_many_fields {
       margin: 10px 0;
     }
-
   }
 
   fieldset > ol > li {
@@ -87,16 +107,16 @@ form {
 
   /* Text Fields */
   input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
-    width: 76%;
-    border: 1px solid #c9d0d6;
+    width: calc(80% - #{$text-input-total-padding});
+    border: $border-width solid #c9d0d6;
     @include rounded;
     font-size: 0.95em;
     @include sans-family;
     outline: none;
     padding: 8px $text-input-horizontal-padding 7px;
 
     &:focus {
-      border: 1px solid #99a2aa;
+      border: $border-width solid #99a2aa;
       @include shadow(0,0,4px,#99a2aa);
     }
   }
@@ -168,7 +188,7 @@ form {
 
     &.error {
       input[type=text], input[type=password], input[type=email], input[type=number], input[type=url], input[type=tel], textarea {
-        border: 1px solid $error-color;
+        border: $border-width solid $error-color;
       }
     }
   }

app/assets/stylesheets/active_admin/mixins/_variables.css.scss

@@ -22,11 +22,13 @@ $form-label-color: $section-header-text-color;
 $page-header-text-color: #cdcdcd;
 
 // Sizes
+$border-width: 1px !default;
 $horizontal-page-margin: 30px !default;
 $sidebar-width: 270px !default;
 $cell-padding: 5px 10px 3px 10px !default;
 $cell-horizontal-padding: 12px !default;
 $section-padding: 15px !default;
 $text-input-horizontal-padding: 10px !default;
+$text-input-total-padding: $text-input-horizontal-padding * 2 + $border-width * 2;
 
 $blank-slate-border: 1px dashed #DADADA

docs/5-forms.md

@@ -63,6 +63,11 @@ ActiveAdmin.register Post do
         a.input :title
       end
     end
+    f.inputs do
+      f.has_many :taggings, sortable: :position do |t|
+        t.input :tag
+      end
+    end
     f.inputs do
       f.has_many :comment, new_record: 'Leave Comment' do |b|
         b.input :body
@@ -83,6 +88,9 @@ The `:heading` option adds a custom heading. You can hide it entirely by passing
 The `:new_record` option controls the visibility of the new record button (shown by default).
 If you pass a string, it will be used as the text for the new record button.
 
+The `:sortable` option adds a hidden field and will enable drag & drop sorting of the children. It 
+expects the name of the column that will store the index of each child.
+
 ## DatePicker
 
 ActiveAdmin offers the `datepicker` input, which uses the [jQueryUI Datepicker](http://jqueryui.com/datepicker/).

lib/active_admin/form_builder.rb

@@ -50,7 +50,7 @@ def commit_action_with_cancel_link
 
     def has_many(assoc, options = {}, &block)
       # remove options that should not render as attributes
-      custom_settings = :new_record, :allow_destroy, :heading
+      custom_settings = :new_record, :allow_destroy, :heading, :sortable
       builder_options = {new_record: true}.merge! options.slice  *custom_settings
       options         = {for: assoc      }.merge! options.except *custom_settings
       options[:class] = [options[:class], "inputs has_many_fields"].compact.join(' ')
@@ -68,9 +68,25 @@ def has_many(assoc, options = {}, &block)
           has_many_form.input :_destroy, as: :boolean, wrapper_html: {class: 'has_many_delete'},
                                                        label: I18n.t('active_admin.has_many_delete')
         end
+
+        if builder_options[:sortable]
+          has_many_form.input builder_options[:sortable], as: :hidden
+
+          contents << template.content_tag(:li, class: 'handle') do
+            Iconic.icon :move_vertical
+          end
+        end
+
         contents
       end
 
+      # make sure that the sortable children sorted in stable ascending order
+      if column = builder_options[:sortable]
+        children = object.send(assoc)
+        children = children.reorder("#{column}, id")
+        options[:for] = [assoc,  children]
+      end
+
       html = without_wrapper do
         unless builder_options.key?(:heading) && !builder_options[:heading]
           form_buffers.last << template.content_tag(:h3) do
@@ -84,9 +100,9 @@ def has_many(assoc, options = {}, &block)
       end
 
       form_buffers.last << if @already_in_an_inputs_block
-        template.content_tag :li,  html, class: "has_many_container #{assoc}"
+        template.content_tag :li,  html, class: "has_many_container #{assoc}", 'data-sortable' => builder_options[:sortable]
       else
-        template.content_tag :div, html, class: "has_many_container #{assoc}"
+        template.content_tag :div, html, class: "has_many_container #{assoc}", 'data-sortable' => builder_options[:sortable]
       end
     end