effective_datatables 4.3.4 → 4.3.5

data/app/assets/javascripts/dataTables/rowReorder/rowReorder.bootstrap4.js

@@ -0,0 +1,38 @@
+/*! Bootstrap 4 styling wrapper for RowReorder
+ * ©2018 SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+  if ( typeof define === 'function' && define.amd ) {
+    // AMD
+    define( ['jquery', 'datatables.net-bs4', 'datatables.net-rowreorder'], function ( $ ) {
+      return factory( $, window, document );
+    } );
+  }
+  else if ( typeof exports === 'object' ) {
+    // CommonJS
+    module.exports = function (root, $) {
+      if ( ! root ) {
+        root = window;
+      }
+
+      if ( ! $ || ! $.fn.dataTable ) {
+        $ = require('datatables.net-bs4')(root, $).$;
+      }
+
+      if ( ! $.fn.dataTable.RowReorder ) {
+        require('datatables.net-rowreorder')(root, $);
+      }
+
+      return factory( $, root, root.document );
+    };
+  }
+  else {
+    // Browser
+    factory( jQuery, window, document );
+  }
+}(function( $, window, document, undefined ) {
+
+return $.fn.dataTable;
+
+}));

data/app/assets/javascripts/effective_datatables.js

@@ -11,14 +11,7 @@
 //= require dataTables/buttons/buttons.print
 //= require dataTables/responsive/dataTables.responsive
 //= require dataTables/responsive/responsive.bootstrap4
+//= require dataTables/rowReorder/dataTables.rowReorder
+//= require dataTables/rowReorder/rowReorder.bootstrap4
 
-//= require effective_datatables/bulk_actions
-//= require effective_datatables/events
-//= require effective_datatables/filters
-//= require effective_datatables/inline_crud
-//= require effective_datatables/reset
-//= require effective_datatables/responsive
-//= require effective_datatables/overrides
-
-//= require effective_datatables/charts
-//= require effective_datatables/initialize
+//= require_tree ./effective_datatables

data/app/assets/javascripts/effective_datatables/flash.js.coffee

@@ -0,0 +1,20 @@
+flash = (message) ->
+  @context[0].oFeatures.bProcessing = false
+
+  message ||= 'Processing...'
+
+  $processing = $(@table().node()).siblings('.dataTables_processing')
+  $processing.html(message).show()
+
+  timeout = $processing.data('timeout')
+  clearTimeout(timeout) if timeout
+
+  $processing.html(message).data('timeout', setTimeout( =>
+      $processing.html('Processing...').hide()
+      @context[0].oFeatures.bProcessing = true
+    , 1500)
+  )
+
+  return @
+
+$.fn.DataTable.Api.register('flash()', flash);

data/app/assets/javascripts/effective_datatables/initialize.js.coffee

@@ -4,6 +4,7 @@ initializeDataTables = ->
     options = datatable.data('options') || {}
     buttons_export_columns = options['buttons_export_columns'] || ':not(.col-actions)'
     simple = ('' + datatable.data('simple') == 'true')
+    reorder = datatable.data('reorder')
 
     if options['buttons'] == false
       options['buttons'] = []
@@ -16,7 +17,8 @@ initializeDataTables = ->
           extend: 'colvis',
           text: 'Show / Hide',
           postfixButtons: [
-            { extend: 'colvisGroup', text: 'Show all', show: ':hidden'},
+            { extend: 'colvisGroup', text: 'Show all', show: ':hidden', className: 'buttons-colvisGroup-first'},
+            { extend: 'colvisGroup', text: 'Show none', hide: ':visible'}
             { extend: 'colvisRestore', text: 'Show default'}
           ]
         },
@@ -102,6 +104,9 @@ initializeDataTables = ->
       if $table.data('reset')
         $buttons.prepend($table.data('reset'))
 
+      if $table.data('reorder')
+        $buttons.prepend($table.data('reorder'))
+
       if $table.data('bulk-actions')
         $buttons.prepend($table.data('bulk-actions'))
 
@@ -160,6 +165,9 @@ initializeDataTables = ->
       init_options['dom'] = "<'row'<'col-sm-12'tr>>" # Just show the table
       datatable.addClass('simple')
 
+    if reorder
+      init_options['rowReorder'] = { selector: 'td.col-_reorder', snapX: true, dataSrc: datatable.data('reorder-index') }
+
     # Let's actually initialize the table now
     table = datatable.dataTable(jQuery.extend(init_options, options))
 
@@ -169,6 +177,9 @@ initializeDataTables = ->
     # Apply EffectiveFormInputs to the Show x per page dropdown
     try table.closest('.dataTables_wrapper').find('.dataTables_length select').removeAttr('name').select2(minimumResultsForSearch: 100)
 
+    if reorder
+      table.DataTable().on('row-reorder', (event, diff, edit) -> $(event.target).DataTable().reorder(event, diff, edit))
+
     table.addClass('initialized')
 
 destroyDataTables = ->

data/app/assets/javascripts/effective_datatables/overrides.js.coffee

@@ -5,27 +5,3 @@ $.extend(true, $.fn.dataTable.Buttons.defaults, {
     }
   }
 });
-
-# DataTable is the API
-# dataTable is the object fnStuff
-
-flash = (message) ->
-  @context[0].oFeatures.bProcessing = false
-
-  message ||= 'Processing...'
-
-  $processing = $(@table().node()).siblings('.dataTables_processing')
-  $processing.html(message).show()
-
-  timeout = $processing.data('timeout')
-  clearTimeout(timeout) if timeout
-
-  $processing.html(message).data('timeout', setTimeout( =>
-      $processing.html('Processing...').hide()
-      @context[0].oFeatures.bProcessing = true
-    , 1500)
-  )
-
-  return @
-
-$.fn.DataTable.Api.register('flash()', flash);

data/app/assets/javascripts/effective_datatables/reorder.js.coffee

@@ -0,0 +1,37 @@
+reorder = (event, diff, edit) ->
+  change = diff.find (obj) -> obj.node == edit.triggerRow.node()
+  return unless change?
+
+  oldNode = $("<div>#{change.oldData}</div>").find('input[data-reorder-resource]')
+  newNode = $("<div>#{change.newData}</div>").find('input[data-reorder-resource]')
+  return unless oldNode? && newNode?
+
+  url = @context[0].ajax.url.replace('.json', '/reorder.json')
+  data = {'reorder[id]': oldNode.data('reorder-resource'), 'reorder[old]': oldNode.val(), 'reorder[new]': newNode.val()}
+
+  @context[0].rowreorder.c.enable = false
+
+  $.ajax(
+    method: 'post',
+    url: url,
+    data: data,
+    async: false
+  ).fail((response, text, status) =>
+    $(event.target).closest('table').DataTable().flash(status)
+  ).always((response) =>
+    @context[0].rowreorder.c.enable = true
+  )
+
+$.fn.DataTable.Api.register('reorder()', reorder);
+
+$(document).on 'click', '.dataTables_wrapper a.buttons-reorder', (event) ->
+  event.preventDefault() # prevent the click
+
+  $link = $(event.currentTarget)
+  $table = $link.closest('.dataTables_wrapper').find('table.dataTable').first()
+
+  column = $table.DataTable().column('.col-_reorder')
+  return unless column.length > 0
+
+  column.visible(!column.visible())
+

data/app/assets/stylesheets/dataTables/buttons/buttons.bootstrap4.css

@@ -52,6 +52,12 @@ div.dt-button-info > div {
   padding: 1em;
 }
 
+div.dt-button-collection-title {
+  text-align: center;
+  padding: 0.3em 0 0.5em;
+  font-size: 0.9em;
+}
+
 ul.dt-button-collection.dropdown-menu {
   display: block;
   z-index: 2002;

data/app/assets/stylesheets/dataTables/rowReorder/rowReorder.bootstrap4.css

@@ -0,0 +1,22 @@
+table.dt-rowReorder-float {
+  position: absolute !important;
+  opacity: 0.8;
+  table-layout: fixed;
+  outline: 2px solid #0275d8;
+  outline-offset: -2px;
+  z-index: 2001;
+}
+
+tr.dt-rowReorder-moving {
+  outline: 2px solid #888;
+  outline-offset: -2px;
+}
+
+body.dt-rowReorder-noOverflow {
+  overflow-x: hidden;
+}
+
+table.dataTable td.reorder {
+  text-align: center;
+  cursor: move;
+}

data/app/assets/stylesheets/effective_datatables.scss

@@ -2,5 +2,6 @@
 
 @import 'dataTables/buttons/buttons.bootstrap4';
 @import 'dataTables/responsive/responsive.bootstrap4';
+@import 'dataTables/rowReorder/rowReorder.bootstrap4';
 
 @import 'effective_datatables/overrides';

data/app/assets/stylesheets/effective_datatables/_overrides.scss

@@ -52,7 +52,6 @@ table.dataTable > thead {
 }
 
 table.dataTable > thead th {
-  vertical-align: top;
   background-repeat: no-repeat;
 
   > span { padding-right: 1rem; }
@@ -95,6 +94,13 @@ table.dataTable > tbody > tr.child {
   .btn { font-size: 0.75rem; }
 }
 
+div.dt-button-collection-title { padding: 0px; }
+
+.dt-button.buttons-colvisGroup-first {
+  padding-top: 0.5rem;
+  border-top: 1px solid #dee2e6;
+}
+
 // Search bar
 table.dataTable > thead {
   tr th {
@@ -113,10 +119,13 @@ table.dataTable > thead {
         cursor: pointer;
       }
     }
-
   }
 }
 
+table.dataTable.collapsed  {
+  th.col-bulk_actions:first-child { div { margin-left: 18px; } }
+}
+
 // Processing div
 div.dataTables_wrapper div.dataTables_processing {
   position: absolute;
@@ -198,6 +207,10 @@ table.dataTable {
     text-align: right;
   }
 
+  td.col-reorder {
+    cursor: move;
+  }
+
   td.col-resource_item { word-break: keep-all; }
 
   td {

data/app/controllers/effective/datatables_controller.rb

@@ -18,7 +18,32 @@ module Effective
         ExceptionNotifier.notify_exception(e) if defined?(ExceptionNotifier)
         raise e if Rails.env.development?
       end
+    end
+
+    def reorder
+      @datatable = EffectiveDatatables.find(params[:id])
+      @datatable.view = view_context
+
+      @resource = @datatable.collection.find(params[:reorder][:id])
+      EffectiveDatatables.authorize!(self, :update, @resource)
+
+      attribute = @datatable.columns[:_reorder][:reorder]
+      old_index = params[:reorder][:old].to_i
+      new_index = params[:reorder][:new].to_i
+
+      @resource.class.transaction do
+        if new_index > old_index
+          @datatable.collection.where("#{attribute} > ? AND #{attribute} <= ?", old_index, new_index).update_all("#{attribute} = #{attribute} - 1")
+          @resource.update_column(attribute, new_index)
+        end
+
+        if old_index > new_index
+          @datatable.collection.where("#{attribute} >= ? AND #{attribute} < ?", new_index, old_index).update_all("#{attribute} = #{attribute} + 1")
+          @resource.update_column(attribute, new_index)
+        end
+      end
 
+      render status: :ok, body: :ok
     end
 
     private

data/app/helpers/effective_datatables_helper.rb

@@ -26,12 +26,14 @@ module EffectiveDatatablesHelper
         'columns' => datatable_columns(datatable),
         'cookie' => datatable.cookie_key,
         'display-length' => datatable.display_length,
-        'display-order' => [datatable.order_index, datatable.order_direction].to_json().html_safe,
+        'display-order' => datatable_display_order(datatable),
         'display-records' => datatable.to_json[:recordsFiltered],
         'display-start' => datatable.display_start,
         'inline' => datatable.inline?.to_s,
         'options' => (input_js || {}).to_json.html_safe,
         'reset' => datatable_reset(datatable),
+        'reorder' => datatable_reorder(datatable),
+        'reorder-index' => (datatable.columns[:_reorder][:index] if datatable.reorder?).to_s,
         'simple' => datatable.simple?.to_s,
         'spinner' => icon('spinner'), # effective_bootstrap
         'source' => effective_datatables.datatable_path(datatable, {format: 'json'}),

data/app/helpers/effective_datatables_private_helper.rb

@@ -3,16 +3,18 @@ module EffectiveDatatablesPrivateHelper
 
   # https://datatables.net/reference/option/columns
   def datatable_columns(datatable)
+    sortable = datatable.sortable?
+
     datatable.columns.map do |name, opts|
       {
-        name: name,
-        title: content_tag(:span, opts[:label].presence),
         className: opts[:col_class],
+        name: name,
         responsivePriority: opts[:responsive],
         search: datatable.state[:search][name],
         searchHtml: datatable_search_tag(datatable, name, opts),
-        sortable: (opts[:sort] && !datatable.simple?),
-        visible: datatable.state[:visible][name],
+        sortable: (opts[:sort] && sortable),
+        title: datatable_label_tag(datatable, name, opts),
+        visible: datatable.state[:visible][name]
       }
     end.to_json.html_safe
   end
@@ -23,10 +25,19 @@ module EffectiveDatatablesPrivateHelper
     end
   end
 
+  def datatable_display_order(datatable)
+    (datatable.sortable? ? [datatable.order_index, datatable.order_direction] : false).to_json.html_safe
+  end
+
   def datatable_reset(datatable)
     link_to(content_tag(:span, 'Reset'), '#', class: 'btn btn-link btn-sm buttons-reset-search')
   end
 
+  def datatable_reorder(datatable)
+    return false unless datatable.reorder?
+    link_to(content_tag(:span, 'Reorder'), '#', class: 'btn btn-link btn-sm buttons-reorder')
+  end
+
   def datatable_new_resource_button(datatable, name, column)
     if column[:inline] && column[:actions][:new] != false
       actions = {'New' => { action: :new, class: 'btn btn-outline-primary', 'data-remote': true } }
@@ -34,6 +45,19 @@ module EffectiveDatatablesPrivateHelper
     end
   end
 
+  def datatable_label_tag(datatable, name, opts)
+    case opts[:as]
+    when :actions
+      content_tag(:span, 'Actions', style: 'display: none;')
+    when :bulk_actions
+      content_tag(:span, 'Bulk Actions', style: 'display: none;')
+    when :reorder
+      content_tag(:span, 'Reorder', style: 'display: none;')
+    else
+      content_tag(:span, opts[:label].presence)
+    end
+  end
+
   def datatable_search_tag(datatable, name, opts)
     return datatable_new_resource_button(datatable, name, opts) if name == :_actions
 

data/app/models/effective/datatable.rb

@@ -63,12 +63,14 @@ module Effective
       load_filters!
       load_state!
 
+      # Bulk actions called first so it can add the bulk_actions_col first
+      initialize_bulk_actions if respond_to?(:initialize_bulk_actions)
+
       # Now we initialize all the columns. columns knows about attributes and filters and scope
       initialize_datatable if respond_to?(:initialize_datatable)
       load_columns!
 
       # Execute any additional DSL methods
-      initialize_bulk_actions if respond_to?(:initialize_bulk_actions)
       initialize_charts if respond_to?(:initialize_charts)
 
       # Load the collection. This is the first time def collection is called on the Datatable itself
@@ -77,10 +79,13 @@ module Effective
 
       # Figure out the class, and if it's activerecord, do all the resource discovery on it
       load_resource!
-
-      # If attributes match a belongs_to column, scope the collection and remove the column
+      load_resource_search!
       apply_belongs_to_attributes!
 
+      # Check everything is okay
+      validate_datatable!
+
+      # Save for next time
       save_cookie!
     end
 
@@ -129,6 +134,14 @@ module Effective
       attributes[:inline] == true
     end
 
+    def reorder?
+      columns.key?(:_reorder)
+    end
+
+    def sortable?
+      !simple? && !reorder?
+    end
+
     # Whether the filters must be rendered as a <form> or we can keep the normal <div> behaviour
     def _filters_form_required?
       _form[:verb].present?
@@ -164,5 +177,12 @@ module Effective
       @value_tool ||= DatatableValueTool.new(self)
     end
 
+    def validate_datatable!
+      if reorder?
+        raise 'cannot use reorder with an Array collection' if array_collection?
+        raise 'cannot use reorder with a non-Integer column' if resource.sql_type(columns[:_reorder][:reorder]) != :integer
+      end
+    end
+
   end
 end