activeadmin_select_many 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b9189e230febfc9cfdbc1088a2638db3417c06d5
-  data.tar.gz: a48dfe85a5f14c48c42e71bc7666cc4624aef51a
+  metadata.gz: 71d37813e5fbcb67285b3c1e8413e4880e79e69d
+  data.tar.gz: 8cb5b71339e21a10c4e84cc059f0d5ede4e2a220
 SHA512:
-  metadata.gz: bdcb42047d735858663d7deac41e3af1520a3ae2a08dffbb4395a2fe72590a4a21df8b6fea36b3436a2aac3058c7810105397bbf404bfae580f5be0491e9baca
-  data.tar.gz: 591ea68f17f0ef69cd3dfbb151f296f75724d77e934995e5059953eb6b13007aa91b5b3d9817981cb8aa5a18aae90f2b978443ee300b35e6a0185e5839fef23b
+  metadata.gz: b8eabd05b1cf8e08453b0e5ae2bf169c11840f61bbc7066787c15725dcc943df14cdaea09e63de3577a8f4efe550f09f31790bdfc94066db862808b035421714
+  data.tar.gz: a4c4220404ecc844dade9e6b2656c15792315bb1cc2e639a6d4515ad722d27223f45621c4dc69e7baf72876dd7d8103fdfe4f0f2a4ef4593214709c934f4f9f8

data/README.md

@@ -8,6 +8,7 @@ Features:
 - select on the right with selected items
 - local/remote collections
 - double click to add/remove items
+- sortable
 
 ![screenshot](screenshot.png)
 
@@ -30,8 +31,33 @@ Add to ActiveAdmin model config, in *form* block.
 `f.input :sections, as: :select_many`
 - Remote collection (using AJAX):
 `f.input :tags, as: :select_many, remote_collection: admin_tags_path( format: :json )`
-- Changing search param and text key:
+- Changing search param and text key (default: *name*):
 `f.input :tags, as: :select_many, remote_collection: admin_tags_path( format: :json ), search_param: 'category_contains', text_key: 'category', placeholder: 'Type something...'`
+- Sortable (items position must be saved manually):
+`f.input :tags, as: :select_many, remote_collection: admin_tags_path( format: :json ), sortable: true`
+```rb
+  # Manually update position field
+  after_save :on_after_save
+  controller do
+    def on_after_save( object )
+      if params[:article][:section_ids]
+        order = {}
+        params[:article][:section_ids].each_with_index { |id, i| order[id.to_i] = i }
+        object.sections.each { |item| item.update_column( :position, order[item.id].to_i ) }
+      end
+    end
+  end
+```
+
+Example to enable JSON response on an ActiveAdmin model:
+
+```rb
+ActiveAdmin.register Tag do
+  config.per_page = 30
+  config.sort_order = 'name_asc'
+  index download_links: [:json]
+end
+```
 
 ## Options
 
@@ -39,6 +65,8 @@ Add to ActiveAdmin model config, in *form* block.
 - **placeholder**: placeholder string for search box
 - **remote_collection**: JSON path
 - **search_param**: parameter to use as search key (ransack style)
+- **sortable**: set to true to enable sortable buttons (default: not set)
+- **size**: number of rows of both the selects (default: 4)
 - **text_key**: key to use as text for select options
 
 ## Do you like it? Star it!

data/app/assets/javascripts/activeadmin/select_many.js

@@ -1,4 +1,4 @@
-function debounce( func, wait, immediate ) {
+function smDebounce( func, wait, immediate ) {
   var timeout;
   return function() {
     var context = this, args = arguments;
@@ -13,6 +13,14 @@ function debounce( func, wait, immediate ) {
   };
 };
 
+function smUpdateValues( parent ) {
+  var values = parent.find( '.values' );
+  values.empty();
+  parent.find( '[data-select="dst"] option' ).each( function() {
+    values.append( $('<input>', { type: 'hidden', name: values.data( 'name' ), value: $(this).val() }) );
+  });
+}
+
 $(document).ready( function() {
   $('.select_many.input select').on( 'dblclick', function( event ) {
     if( event.target.tagName.toLowerCase() == 'option' ) {
@@ -21,22 +29,17 @@ $(document).ready( function() {
       var dst = parent.find( $(this).data( 'select' ) == 'src' ? '[data-select="dst"]' : '[data-select="src"]' );
       dst.append( $('<option>', { value: opt.val(), text: opt.text() }) );
       opt.remove();
-      // Update values list
-      var values = parent.find( '.values' );
-      values.empty();
-      parent.find( '[data-select="dst"] option' ).each( function() {
-        values.append( $('<input>', { type: 'hidden', name: values.data( 'name' ), value: $(this).val() }) );
-      });
+      smUpdateValues( parent );
     }
   });
 
-  var onLocalSelect = debounce( function() {
+  var onLocalSelect = smDebounce( function() {
     var search = $(this).val().toLowerCase();
     $(this).closest( '.select_many' ).find( '[data-select="src"] option' ).each( function() {
       $(this).toggle( $(this).text().toLowerCase().indexOf( search ) >= 0 );
     });
   }, 250 );
-  var onRemoteSelect = debounce( function() {
+  var onRemoteSelect = smDebounce( function() {
     var search = $(this).val().trim();
     if( search != '' && $(this).data( 'searching' ) != '1' ) {
       $(this).data( 'searching', '1' );
@@ -64,9 +67,52 @@ $(document).ready( function() {
     }
   }, 400 );
 
-  // $('.select_many.input .search-select').on( 'keyup', onKeyup );
-
   $('.select_many.input .search-select').each( function() {
     $(this).on( 'keyup', $(this).data( 'remote' ) ? onRemoteSelect : onLocalSelect );
   });
+  $('.select_many [sortable] .move_up').on( 'click', function() {
+    var select = $(this).parent().next();
+    var current = select.find( 'option:selected' )[0];
+    if( current ) {
+      $(current).prev().before( current );
+      smUpdateValues( $(this).closest( '.select_many' ) );
+    }
+  });
+  $('.select_many [sortable] .move_down').on( 'click', function() {
+    var select = $(this).parent().next();
+    var current = select.find( 'option:selected' )[0];
+    if( current ) {
+      $(current).next().after( current );
+      smUpdateValues( $(this).closest( '.select_many' ) );
+    }
+  });
+
+  // // WORK IN PROGRESS
+  // var onRemoteSelectOne = smDebounce( function( event ) {
+  //   if( $(this).data( 'searching' ) != '1' ) {
+  //     $(this).data( 'searching', '1' );
+  //     var _this = $(this);
+  //     var data = {}
+  //     var search_key = $(this).data('search') ? $(this).data('search') : 'name_contains';
+  //     var value_key = $(this).data('value') ? $(this).data('value') : 'id';
+  //     var text_key = $(this).data('text') ? $(this).data('text') : 'name';
+  //     data['q['+search_key+']'] = event.key;
+  //     $.ajax({
+  //       context: _this,
+  //       data: data,
+  //       url: $(this).data( 'remote' ),
+  //       complete: function( req, status ) {
+  //         $(this).data( 'searching', '' );
+  //       },
+  //       success: function( data, status, req ) {
+  //         var select = $(this);
+  //         select.empty();
+  //         data.forEach( function( item ) {
+  //           select.append( $('<option>', { value: item[value_key], text: item[text_key] }) );
+  //         });
+  //       },
+  //     });
+  //   }
+  // }, 400 );
+  // $('.select_one.input select').on( 'keyup', onRemoteSelectOne );
 });

data/app/assets/stylesheets/activeadmin/_select_many.sass

@@ -1,13 +1,30 @@
 body.active_admin
   .select_many
+    .buttons
+      margin-top: 0
+      text-align: center
+      width: 22px
+      a
+        background: #ddd
+        border: 1px solid #eee
+        display: block
+        font-weight: bold
+        line-height: 16px
+        text-decoration: none
+        &.move_up, &.move_down
+          display: none
     .search-select
       margin-bottom: 1px
     .selects
       display: flex
       flex-wrap: wrap
       > input[type="text"], > select, > span
-        margin-right: 1%
         min-width: auto
-        width: 49%
+        width: calc(50% - 12px);
       > span
         padding: 3px 6px 1px 6px
+      .selected
+        padding-left: 30px
+    [sortable] >.buttons
+      a.move_up, a.move_down
+        display: block

data/lib/activeadmin/select_many/version.rb

@@ -1,5 +1,5 @@
 module ActiveAdmin
   module SelectMany
-    VERSION = '0.1.0'
+    VERSION = '0.1.2'
   end
 end

data/lib/activeadmin_select_many.rb

@@ -1,3 +1,4 @@
 require 'activeadmin/select_many'
 
 require 'formtastic/inputs/select_many_input'
+# require 'formtastic/inputs/select_one_input'  # WORK IN PROGRESS

data/lib/formtastic/inputs/select_many_input.rb

@@ -6,15 +6,18 @@ module Formtastic
       # end
 
       def to_html
+        opts = { class: 'selects' }
+        opts[:sortable] = options[:sortable] if options[:sortable]
         input_wrapping do
           label_html <<
           hidden_input <<
-          template.content_tag( :div, class: 'selects' ) do
-            search_box +
+          template.content_tag( :div, opts ) do
+            search_box_html +
             template.content_tag( :span, '' ) +
-            template.content_tag( :span, template.t( 'inputs.select_many.available' ) + ':' ) +
-            template.content_tag( :span, template.t( 'inputs.select_many.selected'  ) + ':' ) +
+            template.content_tag( :span, template.t( 'inputs.select_many.available' ), class: 'available' ) +
+            template.content_tag( :span, template.t( 'inputs.select_many.selected'  ), class: 'selected' ) +
             select_src_html +
+            buttons_html +
             select_dst_html
           end
         end
@@ -22,13 +25,24 @@ module Formtastic
 
       def hidden_input
         template.content_tag( :div, class: 'values', 'data-name': input_html_options[:name] ) do
-          object.send( input_name ).each do |value|
+          values = object.send( input_name )
+          values = [values] if values.is_a? Fixnum
+          values.each do |value|
             template.concat template.hidden_field_tag( input_html_options[:name], value, {id: nil} )
-          end
+          end if values
+        end
+      end
+
+      def buttons_html
+        template.content_tag( :div, class: 'buttons' ) do
+          # template.link_to( '&rarr;'.html_safe, 'Javascript:void(0)', class: 'add' ) +
+          # template.link_to( '&larr;'.html_safe, 'Javascript:void(0)', class: 'remove' ) +
+          template.link_to( '&uarr;'.html_safe, 'Javascript:void(0)', class: 'move_up' ) +
+          template.link_to( '&darr;'.html_safe, 'Javascript:void(0)', class: 'move_down' )
         end
       end
 
-      def search_box
+      def search_box_html
         @opts ||= {id: nil, class: 'search-select', placeholder: options[:placeholder], 'data-remote': options[:remote_collection], 'data-search': options[:search_param] ? options[:search_param] : 'name_contains', 'data-text': options[:text_key] ? options[:text_key] : 'name', 'data-value': options[:value_key] ? options[:value_key] : 'id'}
         template.text_field_tag( nil, '', @opts )
       end
@@ -39,28 +53,20 @@ module Formtastic
         else
           # TODO: add option unique ?
           selected = object.send( input_name )
-          collection.select { |option| !selected.include?( option[1] ) }
+          selected = [selected] if selected.is_a? Fixnum
+          selected ? collection.select { |option| !selected.include?( option[1] ) } : collection
         end
-        opts = input_options.dup.merge( name: nil, id: nil, multiple: true, 'data-select': 'src' )
+        opts = input_options.merge( name: nil, id: nil, multiple: true, 'data-select': 'src', size: options[:size] ? options[:size] : 4 )
         template.select_tag nil, template.options_for_select( coll ), opts
       end
 
       def select_dst_html
         selected = object.send( input_name )
-        coll = collection.select { |option| selected.include?( option[1] ) }
-        opts = input_options.dup.merge( name: nil, id: nil, multiple: true, 'data-select': 'dst' )
+        selected = [selected] if selected.is_a? Fixnum
+        coll = selected ? collection.select { |option| selected.include?( option[1] ) } : collection
+        opts = input_options.merge( name: nil, id: nil, multiple: true, 'data-select': 'dst', size: options[:size] ? options[:size] : 4 )
         template.select_tag nil, template.options_for_select( coll ), opts
       end
-
-      # def select_html
-      #   selected = object.send( input_name )
-      #   coll = collection.select { |option| selected.include?( option[1] ) }
-
-      #   opts = input_options.dup.merge( name: nil, id: nil, multiple: true )
-      #   template.select_tag nil, template.options_for_select( coll ), opts
-
-      #   # builder.select(input_name, coll, input_options, input_html_options)
-      # end
     end
   end
 end

data/lib/formtastic/inputs/select_one_input.rb

@@ -0,0 +1,81 @@
+module Formtastic
+  module Inputs
+    class SelectOneInput < SelectInput
+      def input_options
+        super.merge include_blank: false
+      end
+
+      # def input_html_options
+      #   super.merge( class: 'select-one' )
+      # end
+
+
+      def to_html
+        input_wrapping do
+          label_html <<
+          search_box <<
+          select_html
+        end
+      end
+
+      # def hidden_input
+      #   template.content_tag( :div, class: 'values', 'data-name': input_html_options[:name] ) do
+      #     values = object.send( input_name )
+      #     values = [values] if values.is_a? Fixnum
+      #     values.each do |value|
+      #       template.concat template.hidden_field_tag( input_html_options[:name], value, {id: nil} )
+      #     end if values
+      #   end
+      # end
+
+      def search_box
+        @opts ||= {id: nil, class: 'search-select', placeholder: options[:placeholder], 'data-remote': options[:remote_collection], 'data-search': options[:search_param] ? options[:search_param] : 'name_contains', 'data-text': options[:text_key] ? options[:text_key] : 'name', 'data-value': options[:value_key] ? options[:value_key] : 'id'}
+        template.text_field_tag( nil, '', @opts )
+      end
+
+      # def select_src_html
+      #   coll = if options[:remote_collection]
+      #     []
+      #   else
+      #     # TODO: add option unique ?
+      #     selected = object.send( input_name )
+      #     selected = [selected] if selected.is_a? Fixnum
+      #     selected ? collection.select { |option| !selected.include?( option[1] ) } : collection
+      #   end
+      #   opts = input_options.dup.merge( name: nil, id: nil, multiple: true, 'data-select': 'src' )
+      #   template.select_tag nil, template.options_for_select( coll ), opts
+      # end
+
+
+      # def select_dst_html
+      #   selected = object.send( input_name )
+      #   selected = [selected] if selected.is_a? Fixnum
+      #   coll = selected ? collection.select { |option| selected.include?( option[1] ) } : collection
+      #   opts = input_options.dup.merge( name: nil, id: nil, multiple: true, 'data-select': 'dst' )
+      #   template.select_tag nil, template.options_for_select( coll ), opts
+      # end
+
+      # # def select_html
+      # #   selected = object.send( input_name )
+      # #   coll = collection.select { |option| selected.include?( option[1] ) }
+
+      # #   opts = input_options.dup.merge( name: nil, id: nil, multiple: true )
+      # #   template.select_tag nil, template.options_for_select( coll ), opts
+
+      # #   # builder.select(input_name, coll, input_options, input_html_options)
+      # # end
+
+      def select_html
+        selected = object.send( input_name )
+        sel = ''
+        collection.each do |item|
+          if item[1] == selected
+            sel = template.options_for_select( [item], selected ) if item[1] == selected
+            break
+          end
+        end
+        builder.select(input_name, sel, input_options, input_html_options.merge( 'data-select': 'src' ) )
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_select_many
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-18 00:00:00.000000000 Z
+date: 2017-09-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -45,6 +45,7 @@ files:
 - lib/activeadmin/select_many/version.rb
 - lib/activeadmin_select_many.rb
 - lib/formtastic/inputs/select_many_input.rb
+- lib/formtastic/inputs/select_one_input.rb
 - screenshot.png
 homepage: https://github.com/blocknotes/activeadmin_select_many
 licenses: