effective_datatables 3.7.7 → 4.0.0

data/app/assets/stylesheets/dataTables/{dataTables.bootstrap.scss → dataTables.bootstrap4.css}

@@ -42,7 +42,7 @@ div.dataTables_wrapper div.dataTables_filter input {
   width: auto;
 }
 div.dataTables_wrapper div.dataTables_info {
-  padding-top: 8px;
+  padding-top: 0.85em;
   white-space: nowrap;
 }
 div.dataTables_wrapper div.dataTables_paginate {
@@ -53,6 +53,7 @@ div.dataTables_wrapper div.dataTables_paginate {
 div.dataTables_wrapper div.dataTables_paginate ul.pagination {
   margin: 2px 0;
   white-space: nowrap;
+  justify-content: flex-end;
 }
 div.dataTables_wrapper div.dataTables_processing {
   position: absolute;
@@ -83,52 +84,61 @@ table.dataTable thead .sorting_desc_disabled {
   cursor: pointer;
   position: relative;
 }
-table.dataTable thead .sorting:after,
+table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:before,
 table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:before,
 table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:before,
 table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:before,
 table.dataTable thead .sorting_desc_disabled:after {
   position: absolute;
-  bottom: 8px;
-  right: 8px;
+  bottom: 0.9em;
   display: block;
-  font-family: 'Glyphicons Halflings';
-  opacity: 0.5;
+  opacity: 0.3;
 }
-table.dataTable thead .sorting:after {
-  opacity: 0.2;
-  content: "\e150";
-  /* sort */
+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 {
+  right: 1em;
+  content: "\2191";
 }
-table.dataTable thead .sorting_asc:after {
-  content: "\e155";
-  /* sort-by-attributes */
+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 {
+  right: 0.5em;
+  content: "\2193";
 }
+table.dataTable thead .sorting_asc:before,
 table.dataTable thead .sorting_desc:after {
-  content: "\e156";
-  /* sort-by-attributes-alt */
+  opacity: 1;
 }
-table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_asc_disabled:before,
 table.dataTable thead .sorting_desc_disabled:after {
-  color: #eee;
+  opacity: 0;
 }
 
 div.dataTables_scrollHead table.dataTable {
   margin-bottom: 0 !important;
 }
 
-div.dataTables_scrollBody > table {
+div.dataTables_scrollBody table {
   border-top: none;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
-div.dataTables_scrollBody > table > thead .sorting:after,
-div.dataTables_scrollBody > table > thead .sorting_asc:after,
-div.dataTables_scrollBody > table > thead .sorting_desc:after {
+div.dataTables_scrollBody table thead .sorting:after,
+div.dataTables_scrollBody table thead .sorting_asc:after,
+div.dataTables_scrollBody table thead .sorting_desc:after {
   display: none;
 }
-div.dataTables_scrollBody > table > tbody > tr:first-child > th,
-div.dataTables_scrollBody > table > tbody > tr:first-child > td {
+div.dataTables_scrollBody table tbody tr:first-child th,
+div.dataTables_scrollBody table tbody tr:first-child td {
   border-top: none;
 }
 
@@ -148,14 +158,19 @@ div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
     text-align: center;
   }
 }
-table.dataTable.table-condensed > thead > tr > th {
+table.dataTable.table-sm > thead > tr > th {
   padding-right: 20px;
 }
-table.dataTable.table-condensed .sorting:after,
-table.dataTable.table-condensed .sorting_asc:after,
-table.dataTable.table-condensed .sorting_desc:after {
-  top: 6px;
-  right: 6px;
+table.dataTable.table-sm .sorting:before,
+table.dataTable.table-sm .sorting_asc:before,
+table.dataTable.table-sm .sorting_desc:before {
+  top: 5px;
+  right: 0.85em;
+}
+table.dataTable.table-sm .sorting:after,
+table.dataTable.table-sm .sorting_asc:after,
+table.dataTable.table-sm .sorting_desc:after {
+  top: 5px;
 }
 
 table.table-bordered.dataTable th,

data/app/assets/stylesheets/dataTables/responsive/{responsive.bootstrap.scss → responsive.bootstrap4.css}

@@ -16,7 +16,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
 }
 table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
-  top: 9px;
+  top: 12px;
   left: 4px;
   height: 14px;
   width: 14px;
@@ -32,7 +32,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:b
   font-family: 'Courier New', Courier, monospace;
   line-height: 14px;
   content: '+';
-  background-color: #337ab7;
+  background-color: #0275d8;
 }
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
@@ -78,7 +78,7 @@ table.dataTable.dtr-column > tbody > tr > th.control:before {
   font-family: 'Courier New', Courier, monospace;
   line-height: 14px;
   content: '+';
-  background-color: #337ab7;
+  background-color: #0275d8;
 }
 table.dataTable.dtr-column > tbody > tr.parent td.control:before,
 table.dataTable.dtr-column > tbody > tr.parent th.control:before {

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/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/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: [],