effective_datatables 3.7.10 → 4.0.0

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

@@ -1,73 +1,91 @@
-// Use asset-data-url to prevent 3 additional GET requests for icons
-table.dataTable thead .sorting {
-  background-image: asset-data-url('dataTables/sort_both.png');
-  background-position: right 0px bottom 14px;
+// Override dataTables.bootstrap4.css defaults
+table.dataTable { border-collapse: collapse !important; }
+
+// Override default padding
+table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting,
+table.dataTable thead > tr > td.sorting_asc,
+table.dataTable thead > tr > td.sorting_desc,
+table.dataTable thead > tr > td.sorting { padding: 0.5em 0.5em 0.5em 0.5em; }
+
+// Override default sort icons
+table.dataTable thead .sorting:before,
+table.dataTable thead .sorting_asc:before,
+table.dataTable thead .sorting_desc:before,
+table.dataTable thead .sorting_asc_disabled:before,
+table.dataTable thead .sorting_desc_disabled:before,
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after { content: ''; }
+
+table.dataTable > thead th {
+  vertical-align: top;
+  background-repeat: no-repeat;
+
+  > span { padding-right: 1rem; }
 }
 
-table.dataTable thead .sorting_asc {
-  background-image: asset-data-url('dataTables/sort_asc.png');
-  background-position: right 0px bottom 14px;
+table.dataTable > thead .sorting {
+  background-image: asset-data-url('dataTables/sort.svg');
+  background-position: right 0.25rem top 0.25rem;
 }
 
-table.dataTable thead .sorting_desc {
-  background-image: asset-data-url('dataTables/sort_desc.png');
-  background-position: right 0px bottom 14px;
+table.dataTable > thead .sorting_asc {
+  background-image: asset-data-url('dataTables/sort-up.svg');
+  background-position: right 0.25rem top 0.25rem;
 }
 
-// Override bootstrap default glyphicons
-table.dataTable thead .sorting:after { content: ''; }
-table.dataTable thead .sorting_asc:after { content: ''; }
-table.dataTable thead .sorting_desc:after { content: ''; }
+table.dataTable > thead .sorting_desc {
+  background-image: asset-data-url('dataTables/sort-down.svg');
+  background-position: right 0.25rem top 0.25rem;
+}
 
-// Table header
-table.dataTable thead > tr > th.sorting_asc,
-table.dataTable thead > tr > th.sorting_desc,
-table.dataTable thead > tr > th.sorting {
-  background-repeat: no-repeat;
-  padding-right: 18px;
+// Collapsed Responsive View
+table.dataTable > tbody > tr.child {
+  td, th { border: none; }
+
+  ul.dtr-details > li {
+    border-bottom: none;
+    padding-left: 0.5em;
+
+    &:hover { background-color: rgba(0, 0, 0, 0.075); }
+
+    span.dtr-title { min-width: 175px; margin-bottom: 0.25em; }
+    span.dtr-data { white-space: nowrap; }
+    .col-resource_item { margin-bottom: 0.25em; }
+  }
+}
+
+// Buttons
+.dataTables_buttons {
+  text-align: right;
+  .btn { font-size: 0.75rem; }
 }
 
 // Search bar
-table.dataTable thead {
+table.dataTable > thead {
   tr th {
-    text-align: left;
-    vertical-align: top;
     border-bottom: none;
     white-space: nowrap;
-    padding: 6px;
 
-    span { display: block; }
-  }
+    .form-group {
+      font-weight: normal;
+      margin-bottom: 0em;
 
-  .form-control, .form-group {
-    width: 100%;
-    font-weight: normal;
-    margin: 0px;
+      input { max-height: 38px; }
+    }
   }
-
-  .datatable_search__bulk_actions { margin-left: 5px; }
 }
 
 // Simple styles
-table.dataTable.simple {
-  thead {
-    .sorting { background-image: none; cursor: default; }
-    .sorting_asc { background-image: none; cursor: default; }
-    .sorting_desc { background-image: none; cursor: default; }
-
-    .form-group { display: none; }
-    .col-bulk_actions { display: none; }
-  }
-}
+table.dataTable.simple > thead {
+  .sorting { background-image: none; cursor: default; }
+  .sorting_asc { background-image: none; cursor: default; }
+  .sorting_desc { background-image: none; cursor: default; }
 
-// Processing popup
-div.dataTables_wrapper div.dataTables_processing {
-  top: -10px;
-  border: none;
-  box-shadow: none;
-  margin-left: -35%;
-  margin-bottom: 0;
-  width: 70%;
+  .form-group { display: none; }
+  .col-bulk_actions { display: none; }
 }
 
 // Datatables entries
@@ -82,7 +100,7 @@ div.dataTables_wrapper div.dataTables_processing {
   // Showing 1 to 2 of 2 entries (filtered from 10 total entries)
   div.dataTables_info {
     display: inline-block;
-    padding: 5px 0px 6px 6px;
+    padding: 0.25em 0em 0.25em 0.25em;
   }
 
   // with 25 per page
@@ -95,7 +113,7 @@ div.dataTables_wrapper div.dataTables_processing {
       max-width: 45px;
 
       .select2-selection { border: none; }
-      .select2-selection__rendered { padding: 0px; color: #909090; }
+      .select2-selection__rendered { padding: 0em; color: #909090; }
     }
 
     span.select2-container.select2-container--open { max-width: 60px; }
@@ -104,80 +122,8 @@ div.dataTables_wrapper div.dataTables_processing {
   }
 }
 
-// Buttons
-div.dt-buttons {
-  float: right;
-  display: inherit;
-  width: auto;
-}
-
-.dt-buttons {
-  a, button {
-    border: none;
-    color: #337ab7;
-    border-color: transparent;
-    background: #fff;
-    font-size: 12px;
-    padding: 6px;
-    margin-right: 6px;
-    float: none;
-
-    &:hover,
-    &:focus {
-      border: none;
-      border-color: transparent;
-      background: #eee !important;
-    }
-
-    &:last-child { margin-right: 0px; }
-
-    &.active {
-      color: #fff;
-      background: #03428d !important;
-    }
-
-    .caret {
-      margin-bottom: 4px;
-    }
-  }
-}
-
-// Show / hide columns button
-ul.dt-button-collection {
-  width: 400px;
-
-  li {
-    width: 198px;
-    overflow: hidden;
-  }
-
-  li:nth-child(odd) {
-    float: left;
-  }
-
-  li:nth-child(even) {
-    float: right;
-  }
-
-  .buttons-colvisGroup {
-    clear: left;
-    border-top: 1px solid grey;
-  }
-
-  .buttons-colvisRestore {
-    border-top: 1px solid grey;
-  }
-}
-
-// Collapsed Responsive View
-table.dataTable > tbody > tr.child {
-  span.dtr-title { min-width: 175px; margin-bottom: 4px; }
-  span.dtr-data { white-space: nowrap; }
-  .col-resource_item { margin-bottom: 4px; }
-}
-
 // Column specific adjustments
-table.dataTable {
+table.dataTable > tbody {
   td.col-price { text-align: right; }
   td.col-decimal { text-align: right; }
   td.col-right { text-align: right; }
@@ -193,32 +139,6 @@ table.dataTable {
   td.col-resource_item { word-break: keep-all; }
 
   td {
-    p { margin-bottom: 0px; }
+    p { margin-bottom: 0em; }
   }
 }
-
-// Simple styles
-table.dataTable.hide-sort > thead {
-  .sorting { background-image: none; cursor: default; }
-  .sorting_asc { background-image: none; cursor: default; }
-  .sorting_desc { background-image: none; cursor: default; }
-}
-
-table.dataTable.hide-search > thead {
-  .form-group { display: none; }
-}
-
-table.dataTable.hide-buttons {
-  .col-bulk_actions { display: none; }
-}
-
-// Datatables entries
-@media screen and (max-width: 767px) {
-  div.dataTables_wrapper div.dataTables_entries { text-align: center; }
-}
-
-.dataTables_buttons {
-  .buttons-bulk-actions {
-    button { font-size: 12px; }
-  }
-}

data/app/assets/stylesheets/effective_datatables.scss

@@ -1,7 +1,6 @@
-@import 'dataTables/dataTables.bootstrap';
+@import 'dataTables/dataTables.bootstrap4';
 
-@import 'dataTables/buttons/buttons.bootstrap';
-@import 'dataTables/responsive/responsive.bootstrap';
+@import 'dataTables/buttons/buttons.bootstrap4';
+@import 'dataTables/responsive/responsive.bootstrap4';
 
-@import 'effective_datatables/filters';
 @import 'effective_datatables/overrides';

data/app/controllers/effective/datatables_controller.rb

@@ -5,7 +5,7 @@ module Effective
     # This will respond to both a GET and a POST
     def show
       begin
-        @datatable = EffectiveDatatables.find(params[:id], params[:attributes])
+        @datatable = find_datatable(params[:id]).try(:new) || raise('unable to find datatable')
         @datatable.view = view_context
 
         EffectiveDatatables.authorize!(self, :index, @datatable.collection_class)
@@ -13,51 +13,18 @@ module Effective
         render json: @datatable.to_json
       rescue => e
         EffectiveDatatables.authorized?(self, :index, @datatable.try(:collection_class))
-        render json: error_json(e)
 
-        ExceptionNotifier.notify_exception(e) if defined?(ExceptionNotifier)
-        raise e if Rails.env.development?
+        render json: error_json(e)
       end
     end
 
-    def reorder
-      begin
-        @datatable = EffectiveDatatables.find(params[:id], params[:attributes])
-        @datatable.view = view_context
-
-        EffectiveDatatables.authorize!(self, :index, @datatable.collection_class)
-
-        @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
-      rescue Effective::AccessDenied => e
-        render(status: :unauthorized, body: 'Access Denied')
-      rescue => e
-        render(status: :error, body: 'Unexpected Error')
-      end
+    private
 
+    def find_datatable(id)
+      id = id.to_s.gsub(/-\d{12}\z/, '').gsub('-', '/')
+      id.classify.safe_constantize || id.classify.pluralize.safe_constantize
     end
 
-    private
-
     def error_json(e)
       {
         data: [],

data/app/helpers/effective_datatables_helper.rb

@@ -1,15 +1,8 @@
 # These are expected to be called by a developer.  They are part of the datatables DSL.
 module EffectiveDatatablesHelper
-  def render_datatable(datatable, input_js: {}, buttons: true, charts: true, entries: true, filters: true, inline: false, pagination: true, search: true, simple: false, sort: true)
-    raise 'expected datatable to be present' unless datatable
-    raise 'expected input_js to be a Hash' unless input_js.kind_of?(Hash)
-
-    if simple
-      buttons = charts = entries = filters = pagination = search = sort = false
-    end
 
-    datatable.attributes[:inline] = true if inline
-    datatable.attributes[:sortable] = false unless sort
+  def render_datatable(datatable, input_js: {}, buttons: true, charts: true, filters: true, simple: false)
+    raise 'expected datatable to be present' unless datatable
 
     datatable.view ||= self
 
@@ -20,48 +13,29 @@ module EffectiveDatatablesHelper
     charts = charts && datatable._charts.present?
     filters = filters && (datatable._scopes.present? || datatable._filters.present?)
 
-    html_class = ['effective-datatable', datatable.html_class, ('hide-sort' unless sort), ('hide-search' unless search), ('hide-buttons' unless buttons)].compact.join(' ')
-
-    if datatable.reorder? && !buttons
-      buttons = true; input_js[:buttons] = false
-    end
-
-    # Build the datatables DOM option
-    input_js[:dom] ||= [
-      ("<'row'<'col-sm-12 dataTables_buttons'B>>" if buttons),
-      "<'row'<'col-sm-12'tr>>",
-      ("<'row'" if entries || pagination),
-      ("<'col-sm-6 dataTables_entries'il>" if entries),
-      ("<'col-sm-6'p>" if pagination),
-      (">" if entries || pagination)
-    ].compact.join
+    datatable.attributes[:simple] = true if simple
+    input_js[:buttons] = false if simple || !buttons
 
     effective_datatable_params = {
       id: datatable.to_param,
-      class: html_class,
+      class: ('effective-datatable ' + Array(datatable.table_html_class).join(' ')),
       data: {
-        'attributes' => EffectiveDatatables.encrypt(datatable.attributes),
-        'authenticity-token' => form_authenticity_token,
         'bulk-actions' => datatable_bulk_actions(datatable),
         'columns' => datatable_columns(datatable),
+        'cookie' => datatable.cookie_key,
         'display-length' => datatable.display_length,
-        'display-order' => datatable_display_order(datatable),
+        'display-order' => [datatable.order_index, datatable.order_direction].to_json().html_safe,
         'display-records' => datatable.to_json[:recordsFiltered],
         'display-start' => datatable.display_start,
-        'inline' => inline.to_s,
-        'language' => EffectiveDatatables.language(I18n.locale),
-        'options' => input_js.to_json,
-        'reset' => (datatable_reset(datatable) if search),
-        'reorder' => datatable_reorder(datatable),
-        'reorder-index' => (datatable.columns[:_reorder][:index] if datatable.reorder?).to_s,
-        'simple' => simple.to_s,
-        'spinner' => '', # effective_bootstrap
+        'options' => (input_js || {}).to_json.html_safe,
+        'reset' => datatable_reset(datatable),
+        'simple' => datatable.simple?.to_s,
         'source' => effective_datatables.datatable_path(datatable, {format: 'json'}),
         'total-records' => datatable.to_json[:recordsTotal]
       }
     }
 
-    if (charts || filters)
+    if (charts || filters) && !simple
       output = ''.html_safe
 
       if charts
@@ -84,28 +58,59 @@ module EffectiveDatatablesHelper
     end
   end
 
-  def render_inline_datatable(datatable)
-    render_datatable(datatable, inline: true)
+  def render_simple_datatable(datatable)
+    raise 'expected datatable to be present' unless datatable
+
+    datatable.view ||= self
+
+    unless EffectiveDatatables.authorized?(controller, :index, datatable.collection_class)
+      return content_tag(:p, "You are not authorized to view this datatable. (cannot :index, #{datatable.collection_class})")
+    end
+
+    effective_datatable_params = {
+      id: datatable.to_param,
+      class: ('effective-datatable simple ' + Array(datatable.table_html_class).join(' ')),
+      data: {}
+    }
+
+    render(partial: 'effective/datatables/datatable',
+      locals: { datatable: datatable, effective_datatable_params: effective_datatable_params }
+    )
   end
 
-  def render_simple_datatable(datatable)
-    render_datatable(datatable, simple: true)
+  def render_datatable_filters(datatable)
+    raise 'expected datatable to be present' unless datatable
+
+    datatable.view ||= self
+    return unless datatable._scopes.present? || datatable._filters.present?
+
+    if datatable._filters_form_required?
+      render partial: 'effective/datatables/filters', locals: { datatable: datatable }
+    else
+      render(partial: 'effective/datatables/filters', locals: { datatable: datatable }).gsub('<form', '<div').gsub('/form>', '/div>').html_safe
+    end
+
   end
 
-  def inline_datatable?
-    params[:_datatable_id].present? && params[:_datatable_attributes].present?
+  def render_datatable_charts(datatable)
+    raise 'expected datatable to be present' unless datatable
+
+    datatable.view ||= self
+    return unless datatable._charts.present?
+
+    datatable._charts.map { |name, _| render_datatable_chart(datatable, name) }.join.html_safe
   end
 
-  def inline_datatable
-    return nil unless inline_datatable?
-    return @_inline_datatable if @_inline_datatable
+  def render_datatable_chart(datatable, name)
+    raise 'expected datatable to be present' unless datatable
 
-    datatable = EffectiveDatatables.find(params[:_datatable_id], params[:_datatable_attributes])
-    datatable.view = self
+    datatable.view ||= self
+    return unless datatable._charts[name].present?
 
-    EffectiveDatatables.authorize!(self, :index, datatable.collection_class)
+    chart = datatable._charts[name]
+    chart_data = datatable.to_json[:charts][name][:data]
 
-    @_inline_datatable ||= datatable
+    render partial: chart[:partial], locals: { datatable: datatable, chart: chart, chart_data: chart_data }
   end
 
 end