activeadmin_select_many 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 45fd55dbb9b440057b38aeef68aca5494f89247b
-  data.tar.gz: afa5035de499e0997a1fb2e8c81c3b21dd343e07
+  metadata.gz: dc928a64768e531eb353bfb5aecc59b92151a4ff
+  data.tar.gz: 8b4ff87b759f176fa8f1d0a0806e5bff7be878be
 SHA512:
-  metadata.gz: b71c96131788ee4b9b883ed73186abad17ff7fc85d05b985f674f5561ff1f89681b7395e64636aca366c2f38a9829f639f24b0ba9aa677ff86d35aab278a3c53
-  data.tar.gz: 5d9f79c90856223aa9cd45810bc1679a6fde32cc39b8b21b93205f081fe5b38c3a22fcc202a2a29e75f0fc4e2f732ab5c8c94dd4a5caf195e0d4502701eaf24d
+  metadata.gz: 7b754c3cf2c094ea2eec2d805b8cf99b760680d74471fadcaa35ea8fe4437d0e05f75bded2ac68e817722b9005e093db3e84f44102d0abd8eacfbf8846c7f1fc
+  data.tar.gz: 6244aa2b14352c08cc696319dc93f49d79c44a49f59d8176d572cfc8c71f5aa12e9786a912bc180e98012367be57ee5b6cfb08bf6dd00ca0203e518bead4991c

data/README.md

@@ -1,17 +1,25 @@
 # ActiveAdmin Select Many [![Gem Version](https://badge.fury.io/rb/activeadmin_select_many.svg)](https://badge.fury.io/rb/activeadmin_select_many)
 
-An Active Admin plugin which improves one-to-many and many-to-many associations selection (jQuery required).
+An Active Admin plugin which improves one-to-many / many-to-many / many-to-one associations selection using 2 new inputs: **select_many** and **select_one** (jQuery required)
 
-Features:
+Features for *select_many*:
 - search box
-- select on the left with available items
-- select on the right with selected items
+- available items on the left, selected items on the right
 - local/remote collections
 - double click to add/remove items
-- sortable
+- sortable (with up/down buttons)
+
+Features for *select_one*:
+- search box
+- selected items on the right
+- remote collections
+- counter of items found
+- can be used as filter
 
 ![screenshot](screenshot.png)
 
+*(inspired by RailsAdmin associations selector)*
+
 ## Install
 
 - Add to your Gemfile:
@@ -23,7 +31,18 @@ Features:
 `//= require activeadmin/select_many`
 - Use the input with `as: :select_many` in Active Admin model conf
 
-## Examples
+## Options
+
+- **collection**: local collection
+- **filter_form**: for *select_one* only, allow to use it as filter
+- **placeholder**: placeholder string for search box
+- **remote_collection**: JSON path
+- **search_param**: parameter to use as search key (ransack format)
+- **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
+
+## Example with select_many
 
 Add to ActiveAdmin model config, in *form* block.
 
@@ -35,8 +54,10 @@ Add to ActiveAdmin model config, in *form* block.
 `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`
+
+Example to update *position* field:
+
 ```rb
-  # Manually update position field
   after_save :on_after_save
   controller do
     def on_after_save( object )
@@ -53,26 +74,28 @@ Example to enable JSON response on an ActiveAdmin model:
 
 ```rb
 ActiveAdmin.register Tag do
-  config.per_page = 30
+  config.per_page = 30  # to limit served items
   config.sort_order = 'name_asc'
   index download_links: [:json]
 end
 ```
 
-## Options
+## Example with select_one
 
-- **collection**: local collection
-- **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
+In a form:
+
+`f.input :article, as: :select_one, placeholder: 'Search...', remote_collection: admin_articles_path( format: :json ), search_param: 'title_contains', text_key: 'title'`
+
+As filter:
+
+`filter :article_id_eq, as: :select_one, filter_form: true, placeholder: 'Search...', search_param: 'title_contains', text_key: 'title', remote_collection: '/admin/articles.json'`
 
 ## Do you like it? Star it!
 
 If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
 
+Take a look at [other ActiveAdmin components](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source) that I made if you are curious.
+
 ## Contributors
 
 - [Mattia Roccoberton](http://blocknot.es) - creator, maintainer

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

@@ -57,7 +57,7 @@ $(document).ready( function() {
       $.ajax({
         context: _this,
         data: data,
-        url: $(this).data( 'remote' ),
+        url: $(this).data( 'remote-collection' ),
         complete: function( req, status ) {
           $(this).data( 'searching', '' );
         },
@@ -74,7 +74,7 @@ $(document).ready( function() {
   }, 400 );
 
   $('.select_many.input .search-select').each( function() {
-    $(this).on( 'keyup', $(this).data( 'remote' ) ? onRemoteSelect : onLocalSelect );
+    $(this).on( 'keyup', $(this).data( 'remote-collection' ) ? onRemoteSelect : onLocalSelect );
   });
   $('.select_many .add').on( 'click', function() {
     var select = $(this).parent().prev();
@@ -103,32 +103,32 @@ $(document).ready( function() {
     }
   });
 
-  // // 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 );
+  var onRemoteSelectOne = smDebounce( function( event ) {
+    var select = $(this).next();
+    if( select.data( 'searching' ) != '1' ) {
+      select.data( 'searching', '1' );
+      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+']'] = $(this).val();
+      $.ajax({
+        context: select,
+        data: data,
+        url: $(this).data( 'remote-collection' ),
+        complete: function( req, status ) {
+          $(this).data( 'searching', '' );
+        },
+        success: function( data, status, req ) {
+          var sel = $(this);
+          sel.empty();
+          data.forEach( function( item ) {
+            sel.append( $('<option>', { value: item[value_key], text: item[text_key] }) );
+          });
+          sel.parent().find( '.status' ).text( '[' + data.length + ']' );
+        },
+      });
+    }
+  }, 500 );
+  $('.select-one-inputs > .search-select').on( 'keyup', onRemoteSelectOne );
 });

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

@@ -16,21 +16,39 @@ body.active_admin
           display: none
         &:hover
           background: #e0e0e0
-    .search-select
-      margin-bottom: 1px
-    .selects
+    .select-many-inputs
       display: flex
       flex-wrap: wrap
       > input[type="text"], > select, > span
         min-width: auto
-        width: calc(50% - 12px);
+        width: calc(50% - 12px)
       > span
         padding: 3px 6px 1px 6px
+      .empty
+        width: 20%
       .available
         font-style: italic
+        padding: 0 6px 0 6px
       .selected
         font-style: italic
-        padding-left: 30px
+        padding: 0 0 0 12px
+    .search-select
+      margin-bottom: 1px
+      width: 50%
     [sortable] >.buttons
       a.move_up, a.move_down
         display: block
+
+  .formtastic > .inputs .select_one
+    .select-one-inputs
+      display: flex
+      > input[type="text"], > select, > span
+        display: inline-block
+        width: calc(50% - 12px)
+      .status
+        line-height: 26px
+        margin-left: 5px
+
+  .filter_form .select-one-inputs
+    .status
+      display: none

data/config/locales/en.yml

@@ -3,3 +3,5 @@ en:
     select_many:
       available: Available
       selected: Selected
+    select_one:
+      status: ''

data/lib/activeadmin/select_many/version.rb

@@ -1,5 +1,5 @@
 module ActiveAdmin
   module SelectMany
-    VERSION = '0.1.4'
+    VERSION = '0.2.0'
   end
 end

data/lib/activeadmin_select_many.rb

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

data/lib/formtastic/inputs/select_many_input.rb

@@ -1,23 +1,20 @@
 module Formtastic
   module Inputs
     class SelectManyInput < SelectInput
-      # def input_html_options
-      #   super.merge( class: 'select-many' )
-      # end
-
       def to_html
-        opts = { class: 'selects' }
-        opts[:sortable] = options[:sortable] if options[:sortable]
+        options[:'data-remote-collection'] = options.delete( :remote_collection )
+        opts = { class: 'select-many-inputs' }
+        opts[:sortable] = options.delete( :sortable ) if options[:sortable]
         input_wrapping do
           label_html <<
-          hidden_input <<
           template.content_tag( :div, opts ) do
-            search_box_html +
-            template.content_tag( :span, '' ) +
-            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 +
+            hidden_input <<
+            search_box_html <<
+            template.content_tag( :span, '', class: 'empty'  ) <<
+            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
@@ -43,12 +40,12 @@ module Formtastic
       end
 
       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'}
+        @opts ||= {id: nil, class: 'search-select', placeholder: options.delete( :placeholder ), 'data-remote-collection': options[:'data-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]
+        coll = if options[:'data-remote-collection']
           []
         else
           # TODO: add option unique ?

data/lib/formtastic/inputs/select_one_input.rb

@@ -5,66 +5,31 @@ module Formtastic
         super.merge include_blank: false
       end
 
-      # def input_html_options
-      #   super.merge( class: 'select-one' )
-      # end
-
+      def input_wrapping(&block)
+        template.content_tag(options[:filter_form] ? :div : :li,
+          [template.capture(&block), error_html, hint_html].join("\n").html_safe,
+          wrapper_html_options
+        )
+      end
 
       def to_html
+        opts = { class: 'select-one-inputs' }
         input_wrapping do
           label_html <<
-          search_box <<
-          select_html
+          template.content_tag( :div, opts ) do
+            search_box <<
+            select_html <<
+            # template.content_tag( :span, '' ) <<
+            template.content_tag( :span, template.t( 'inputs.select_one.status' ), class: 'status' )
+          end
         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'}
+        @opts ||= {id: nil, class: 'search-select', placeholder: options[:placeholder], 'data-remote-collection': 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', 'data-msg': options[:msg_items]}
         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 = ''

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_select_many
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-26 00:00:00.000000000 Z
+date: 2017-09-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin