activeadmin_dynamic_fields 0.1.5 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 42ac2b763d8f98e2e55cf81e3ec76aecf16cec7e
-  data.tar.gz: 9a7c58695fbb59281f948ce192bfeb0aefe79e2e
+  metadata.gz: d599f816a20b2b7068d3b7d72e7ada1002c848bf
+  data.tar.gz: 296760d26145ceddb5e535296c1fa8a234e9781d
 SHA512:
-  metadata.gz: 613eeec1ba5f472a7309a0b1463bd06ced96044def8845005f6fc3fad7c44cc40efbbece500af140251ab03ad6001b21f1d40b3205b4bb70167ca819156dfbc0
-  data.tar.gz: f60670bc64107e1c7d57f19f9792c5dd2485d5d910f22ec970c5f572d7d2703e18c626457bbefc1ab03ff530d1c4549d42e3d2230ee89df92ef520a09c106671
+  metadata.gz: 28779caf4f980c64bffc0cc88e006f0d3ec9b6b1666e53f306a57e9e035c386f7c4f30d55994ee38e610bd337b6922a2470662f5c341b3ca2f77acfbf322b021
+  data.tar.gz: e078d3ab6b1ddc26c1af8c899c4aa2a903803b59e3f2f56a331e071437fb98265efd8386653fe16f140015e2ce8070f2a7d1b65b6313167ec855d73da3b3b722

data/README.md

@@ -6,6 +6,7 @@ Features:
 
 - set conditional checks on fields
 - trigger some actions on other fields
+- inline field editing
 - create links to load some content in a dialog
 
 The easiest way to show how this plugin works is looking the examples [below](#examples-of-dynamic-fields).
@@ -39,7 +40,9 @@ Options are passed to fields using *input_html* parameter as *data* attributes:
 - **data-function**: check the return value of a custom function
 - **data-arg**: argument passed to the custom set function (as array of strings)
 
-## Examples of dynamic fields
+## Examples
+
+### Dynamic fields examples
 
 - A checkbox that hides other fields if false (ex. model *Article*):
 
@@ -97,7 +100,45 @@ function on_change_category( el ) {
 }
 ```
 
-## Example to open a dialog
+### Inline editing example
+
+- Prepare a custom member action to save data, an *update* helper function is available (third parameter is optional, allow to filter using strong parameters):
+
+```rb
+member_action :save, method: [:post] do
+  render ActiveAdmin::DynamicFields::update( resource, params )
+  # render ActiveAdmin::DynamicFields::update( resource, params, [:published] )
+  # render ActiveAdmin::DynamicFields::update( resource, params, Article::permit_params )
+end
+```
+
+- In *index* config:
+
+```rb
+# Edit a string:
+column :title do |row|
+  div row.title, ActiveAdmin::DynamicFields::edit_string( :title, save_admin_article_path( row.id ) )
+end
+# Edit a boolean:
+column :published do |row|
+  status_tag row.published, ActiveAdmin::DynamicFields::edit_boolean( :published, save_admin_article_path( row.id ), row.published )
+end
+# Edit a select ([''] allow to have a blank value):
+column :author do |row|
+  select ActiveAdmin::DynamicFields::edit_select( :author_id, save_admin_article_path( row.id ) ) do
+    options_for_select( [''] + Author.pluck( :name, :id ), row.author_id )
+  end
+end
+```
+
+- In *show* config (less useful):
+```rb
+row :title do |row|
+  div row.title, ActiveAdmin::DynamicFields::edit_string( :title, save_admin_article_path( row.id ) )
+end
+```
+
+### Dialog example
 
 Example with 2 models: *Author* and *Article*
 

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

@@ -99,6 +99,61 @@ function dfSetValue( el, val ) {
   el.trigger( 'change' );
 }
 
+// Inline update - must be called binded on the editing element
+function dfUpdateField() {
+  if( $(this).data( 'loading' ) != '1' ) {
+    $(this).data( 'loading', '1' );
+    var _this = $(this);
+    var type = $(this).data( 'field-type' );
+    var new_value;
+    if( type == 'boolean' ) new_value = !$(this).data( 'field-value' );
+    else if( type == 'select' ) new_value = $(this).val();
+    else new_value = $(this).text();
+    var data = {};
+    data[$(this).data('field')] = new_value;
+    $.ajax({
+      context: _this,
+      data: { data: data },
+      method: 'POST',
+      url: $(this).data( 'save-url' ),
+      complete: function( req, status ) {
+        $(this).data( 'loading', '0' );
+      },
+      success: function( data, status, req ) {
+        if( data.status == 'error' ) {
+          if( $(this).data( 'show-errors' ) ) {
+            var result = '';
+            var message = data.message;
+            for( var key in message ) {
+              if( typeof( message[key] ) === 'object' ) {
+                if( result ) result += ' - ';
+                result += key + ': ' + message[key].join( '; ' );
+              }
+            }
+            if( result ) alert( result );
+          }
+        }
+        else {
+          $(this).data( 'field-value', new_value );
+          if( $(this).data('content') ) {
+            var old_text = $(this).text();
+            var old_class = $(this).attr( 'class' );
+            var content = $($(this).data('content'));
+            $(this).text( content.text() );
+            $(this).attr( 'class', content.attr( 'class' ) );
+            content.text( old_text );
+            content.attr( 'class', old_class );
+            $(this).data( 'content', content );
+          }
+        }
+      },
+      // error: function( req, status, error ) {
+      //   // if( $(this).data( 'show-errors' ) && req.responseJSON.message ) { }
+      // },
+    });
+  }
+}
+
 // Init
 $(document).ready( function() {
   // Setup dynamic fields
@@ -111,20 +166,43 @@ $(document).ready( function() {
       dfSetupField( $(this) );
     });
   });
+  // Set dialog icon link
+  $('.active_admin [data-df-icon]').each( function() {
+    $(this).append( ' »' );  // ' •'
+  });
   // Open content in dialog
   $('.active_admin [data-df-dialog]').on( 'click', function( event ) {
     event.preventDefault();
-    if( $('#df-dialog').length == 0 ) $('body').append( '<div id="df-dialog"></div>' );
-    var title = $(this).attr( 'title' );
-    $.ajax({
-      url: $(this).attr( 'href' )
-    }).done( function( result ) {
-      if( title ) $('#df-dialog').attr( 'title', title );
-      $('#df-dialog').html( result );
-      $('#df-dialog').dialog({ modal: true });
+    $(this).blur();
+    if( $('#df-dialog').data( 'loading' ) != '1' ) {
+      $('#df-dialog').data( 'loading', '1' );
+      if( $('#df-dialog').length == 0 ) $('body').append( '<div id="df-dialog"></div>' );
+      var title = $(this).attr( 'title' );
+      $.ajax({
+        url: $(this).attr( 'href' ),
+        complete: function( req, status ) {
+          $('#df-dialog').data( 'loading', '0' );
+        },
+        success: function( data, status, req ) {
+          if( title ) $('#df-dialog').attr( 'title', title );
+          $('#df-dialog').html( data );
+          $('#df-dialog').dialog({ modal: true });
+        },
+      });
+    }
+  });
+  // Inline editing
+  $('[data-field][data-field-type="boolean"][data-save-url]').each( function() {
+    $(this).on( 'click', $.proxy( dfUpdateField, $(this) ) );
+  });
+  $('[data-field][data-field-type="string"][data-save-url]' ).each( function() {
+    $(this).data( 'field-value', $(this).text() );
+    var fnUpdate = $.proxy( dfUpdateField, $(this) );
+    $(this).on( 'blur', function() {
+      if( $(this).data( 'field-value' ) != $(this).text() ) fnUpdate();
     });
   });
-  $('.active_admin [data-df-icon]').each( function() {
-    $(this).append( ' &raquo;' );  // ' &bullet;'
+  $('[data-field][data-field-type="select"][data-save-url]').each( function() {
+    $(this).on( 'change', $.proxy( dfUpdateField, $(this) ) );
   });
 });

data/lib/activeadmin/dynamic_fields/engine.rb

@@ -5,5 +5,32 @@ module ActiveAdmin
     class Engine < ::Rails::Engine
       engine_name 'activeadmin_dynamic_fields'
     end
+
+    def self.edit_boolean( field, url, value )
+      { 'data-field': field, 'data-field-type': 'boolean', 'data-field-value': value, 'data-content': "<span class=\"status_tag changed\">#{value ? 'no' : 'yes'}</span>", 'data-save-url': url, 'data-show-errors': '1' }
+    end
+
+    def self.edit_select( field, url )
+      { 'data-field': field, 'data-field-type': 'select', 'data-save-url': url, 'data-show-errors': '1' }
+      # 'data-field': 'author_id', 'data-field-type': 'select', 'data-save-url': save_admin_article_path( row.id ), 'data-show-errors': '1' do
+      #   ( [''] + Author.pluck( :name, :id ) ).map{ |opt| option opt[0], value: opt[1], selected: row.author_id == opt[1] }.join
+      # end
+    end
+
+    def self.edit_string( field, url )
+      { contenteditable: true, 'data-field': field, 'data-field-type': 'string', 'data-save-url': url, 'data-show-errors': '1' }
+    end
+
+    def self.update( resource, params, permit_params = nil )
+      if params[:data]
+        if resource.update( permit_params ? params[:data].permit( permit_params ) : params[:data].permit! )
+          { json: { status: 'ok' } }
+        else
+          { json: { status: 'error', message: resource.errors } }
+        end
+      else
+        { json: { status: 'error', message: 'No data' }, status: 400 }
+      end
+    end
   end
 end

data/lib/activeadmin/dynamic_fields/version.rb

@@ -1,5 +1,5 @@
 module ActiveAdmin
   module DynamicFields
-    VERSION = '0.1.5'
+    VERSION = '0.2.0'
   end
 end

metadata

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