zuora_connect_ui 0.2.0 → 0.2.2

data/app/assets/stylesheets/zuora_connect_ui/datepicker.scss

@@ -59,6 +59,7 @@
 
 .zuo-datepicker.date {
   display: block;
+  position: relative;
 
   .input-group-addon {
     font-size: 1.1rem;

data/app/assets/stylesheets/zuora_connect_ui/input.scss

@@ -4,9 +4,9 @@
   margin-top: 3px;
 
   + label::before {
-    top: .125rem;
-    transition: all .2s ease;
-    border-radius: .1rem;
+    top: 0.125rem;
+    transition: all 0.2s ease;
+    border-radius: 0.1rem;
     border-color: #d3d7d8; // default is #ccc
   }
 
@@ -17,6 +17,7 @@
     overflow: hidden;
     line-height: 1.25rem;
     color: $neutral-4;
+    text-align: left;
 
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
@@ -42,16 +43,16 @@
   + label {
     cursor: normal;
     &:before {
-      transition: all .4s ease;
+      transition: all 0.4s ease;
       height: 1rem;
       width: 1rem;
     }
     &:after {
       transform: none;
-      height: .4rem;
-      width: .4rem;
-      top: .3rem;
-      left: .3rem;
+      height: 0.4rem;
+      width: 0.4rem;
+      top: 0.3rem;
+      left: 0.3rem;
       background-color: $neutral-4;
     }
   }
@@ -75,7 +76,7 @@ textarea.zuo-textbox {
 }
 
 input[type="file"] {
-  margin-left: .875rem;
+  margin-left: 0.875rem;
   line-height: 2.5;
 
   + label {
@@ -96,7 +97,7 @@ input[type="file"] {
   color: $neutral-1;
   background: transparent;
   transition: border-color 0.2s;
-  padding: 0rem 0rem .375rem 0rem;
+  padding: 0rem 0rem 0.375rem 0rem;
 
   &:not([readonly]):focus {
     border-color: $support-1;
@@ -108,13 +109,17 @@ input[type="file"] {
   }
 }
 
+.has-error .zuo-textbox {
+  border-bottom: 1px solid $support-4;
+}
+
 label.zuo-floating-label {
   position: relative;
   top: -1.4375rem;
   display: block;
   transition: 0.2s;
-  font-size: .875rem;
-  line-height: .875rem;
+  font-size: 0.875rem;
+  line-height: 0.875rem;
   font-weight: normal;
   color: #6e7c89;
   margin-bottom: 0;
@@ -124,7 +129,7 @@ label.zuo-floating-label {
 .zuo-floating-label.floating,
 .zuo-textbox:focus + .zuo-floating-label,
 select + .select2-container--open + .zuo-floating-label {
-  font-size: .75rem;
+  font-size: 0.75rem;
   top: -2.6875rem;
 }
 
@@ -133,20 +138,19 @@ select + .select2-container--open + .zuo-floating-label {
   color: $support-1;
 }
 
-
 .select2-container {
   .select2-selection {
-      border: none;
+    border: none;
   }
 
   .select2-dropdown {
     border: 1px solid $neutral-shadow;
     box-shadow: 0 1px 8px -1px $neutral-shadow;
-    border-radius: .25rem;
-    padding: .5rem 0;
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
 
     .select2-results__option[role="treeitem"] {
-      padding: .25rem .75rem;
+      padding: 0.25rem 0.75rem;
     }
 
     .select2-results__option[aria-selected="true"] {
@@ -171,15 +175,20 @@ select + .select2-container--open + .zuo-floating-label {
   }
 
   .select2-dropdown--below {
-    top: .5rem;
+    top: 0.5rem;
   }
 }
 
 .select2-container--bootstrap {
+  .select2-selection--multiple .select2-selection__clear {
+    margin-top: 0;
+  }
+
   .select2-selection {
+    position: relative;
     box-shadow: none;
     height: auto;
-    padding: 0 2rem .375rem 0;
+    padding: 0 2rem 0.375rem 0;
     margin-top: 1rem;
     border-radius: 0;
 
@@ -198,10 +207,10 @@ select + .select2-container--open + .zuo-floating-label {
       .select2-selection__choice__remove {
         width: 1rem;
         height: 1rem;
-        font-size: .75rem;
+        font-size: 0.75rem;
         line-height: 1;
         position: absolute;
-        right: .25rem;
+        right: 0.25rem;
         top: 3.5px;
         text-align: center;
         margin-right: 0;
@@ -230,9 +239,9 @@ select + .select2-container--open + .zuo-floating-label {
       &:before {
         content: "\E90D";
         font-family: webicons;
-        font-size: .75rem;
+        font-size: 0.75rem;
         color: #a5a3b6;
-        transition: color .2s ease;
+        transition: color 0.2s ease;
       }
 
       b {
@@ -256,23 +265,28 @@ select + .select2-container--open + .zuo-floating-label {
   }
 
   &.select2-container--disabled .select2-selection--single,
-  &.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
+  &.select2-container--disabled
+    .select2-selection--multiple
+    .select2-selection__choice {
     background-color: transparent;
 
     .select2-selection__rendered {
       color: #6e7c89;
     }
   }
-
 }
 
-.select2-container.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection {
+.select2-container.select2-container--focus .select2-selection,
+.select2-container--bootstrap.select2-container--open .select2-selection {
   box-shadow: none;
 }
 
 .select2-container .select2-selection--single .select2-selection__arrow b {
   border-color: $neutral-1 transparent transparent transparent;
 }
-.select2-container.select2-container--open .select2-selection .select2-selection__arrow b {
+.select2-container.select2-container--open
+  .select2-selection
+  .select2-selection__arrow
+  b {
   border-color: transparent transparent $neutral-1 transparent;
 }

data/app/assets/stylesheets/zuora_connect_ui/modal.scss

@@ -33,8 +33,47 @@
 
 #z_hub_modal {
   div.popover {
-    &.left, &.top {
-      max-width:500px;
+    &.left,
+    &.top {
+      max-width: 500px;
     }
   }
 }
+
+form {
+  &.loading {
+    .modal-body {
+      opacity: .15;
+    }
+    .overlay  {
+      display: block;
+      #loading_form_icon {
+        visibility: visible;
+        color: #3c4d55;
+      }
+    }
+  }
+  .overlay {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 61px;
+    left: 0;
+
+    #loading_form_icon {
+      display: inline-block;
+      position: absolute;
+      font-size: 60px;
+      right: 45%;
+      top: 55%;
+      visibility: hidden;
+      z-index: 1000;
+    }
+  }
+}
+
+#loading_form_icon {
+  display:none;
+}
+

data/app/assets/stylesheets/zuora_connect_ui/tabs.scss

@@ -9,7 +9,7 @@
   }
 }
 
-ul.tab-header{
+ul.tab-header {
   padding: 0 1rem;
   border-bottom: 2px solid $neutral-2;
 
@@ -20,11 +20,12 @@ ul.tab-header{
       // non-hover tab styling
       background-color: transparent; // Override bootstrap default
       font-weight: 600;
-      padding: .5rem;
+      padding: 0.5rem;
       margin-right: 2rem;
       margin-bottom: -3px; // pulls bottom border under the navbar bottom border
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: transparent;
       }
     }

data/app/helpers/datatable_helper.rb

@@ -33,19 +33,4 @@ module DatatableHelper
       }.merge(request.query_parameters), formats: [:html]
     )
   end
-
-  def return_cookie_filters(cookie_key, filter_key, values: nil, defaults: nil, type: nil)
-    raise "Error" if values.nil? && type != "boolean"
-    values = ["false"] if type == "boolean"
-    values = values.map {|v| v[1].to_s} if type == "select" || values[0].class == Array
-    defaults ||= [] if type == "select"
-    if cookies[cookie_key].present?
-      json = JSON.parse(cookies[cookie_key])
-      if json[filter_key].present?
-        checked_envs ||= json[filter_key] if type == "boolean" || type == "select"
-        checked_envs ||= values.map {|v| json[filter_key].include?(v) ? v : nil }.compact
-      end
-    end
-    checked_envs ||= defaults.nil? ? (type == "checkbox" ? values : nil) : defaults
-  end
 end

data/app/views/partials/_filters.html.erb

@@ -1,39 +1,38 @@
-<% placeholder = defined?(table_filter["placeholder"]) ? table_filter["placeholder"] : "" %>
-<% prompt = defined?(table_filter["prompt"]) ? table_filter["prompt"] : "" %>
-<% index = defined?(index) ? index : nil %>
-<% filter_count = defined?(filter_count) ? filter_count : nil %>
-<% width = defined?(table_filter["width"]) ? table_filter["width"] : "100%" %>
-<% allow_clear = table_filter.key?("allow-clear") ? table_filter["allow-clear"] : true %>
-<% searchable = table_filter.key?("searchable") && table_filter["searchable"] ? 0 : -1 %>
+<% filter_name = table_filter["name"].parameterize('_') %>
+<% prompt = table_filter.fetch("prompt", "") %>
 
-<% if table_filter["type"] == "checkbox" %>
-  <div class="btn-group">
-    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
-      <%= prompt %> <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu" >
-      <li>
+<div class="table-filter">
+  <% if table_filter["type"] == "checkbox" %>
+    <div class="dropdown checkbox-filter">
+      <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <%= prompt %> <span class="z-icon-desc"></span>
+      </div>
+      <ul class="dropdown-menu" >
         <% table_filter["values"].each do |type| %>
-          <div class="checkbox checkbox-success" style='margin-left: 15px;'>
-            <input type="checkbox" name='<%= table_filter["name"].parameterize('_') %>[]' <%= table_filter["selection"].include?(type) ? 'checked' : ''%> value="<%= type %>"><label for="<%= table_filter["name"].parameterize('_') %>"><%= type %></label>
-          </div>
+          <li class="checkbox-row">
+            <div class="checkbox">
+              <input type="checkbox" name='<%= filter_name %>[]' value="<%= type %>">
+              <label for="<%= filter_name %>"><%= type %></label>
+            </div>
+          </li>
         <% end %>
-      </li>
-    </ul>
-  </div>
-<% elsif ["select", "group-select"].include?(table_filter["type"]) %>
-  <div class="btn-group <%= index > 0 ? 'select2-bootstrap-prepend' : '' %> <%= (index + 1 != filter_count && filter_count > 1) ? 'select2-bootstrap-append' : '' %>">
-    <% if table_filter["type"] == "select" %>
-      <%= select_tag(table_filter["name"].parameterize('_'), options_for_select(table_filter["values"], table_filter["selection"]), options = {:prompt => prompt, :data =>{:placeholder => placeholder, "allow-clear" => allow_clear }}) %>
-    <% elsif table_filter["type"] == "group-select" %>
-      <%= select_tag(table_filter["name"].parameterize('_'), grouped_options_for_select(table_filter["values"], table_filter["selection"]), options = {:prompt => prompt, :data =>{:placeholder => placeholder, "allow-clear" => allow_clear }}) %>
+      </ul>
+    </div>
+  <% elsif ["select", "group-select"].include?(table_filter["type"]) %>
+    <% option_tags = table_filter["type"] == "select" ? options_for_select(table_filter["values"]) : grouped_options_for_select(table_filter["values"]) %>
+    <%= select_tag(filter_name, option_tags, options = {:prompt => prompt}) %>
+    <% content_for :scripts do %>
+      $('#<%= table_name %>_content select[name="<%= filter_name %>"]').select2({
+        theme: "bootstrap",
+        minimumResultsForSearch: <%= table_filter.key?("searchable") && table_filter["searchable"] ? 0 : -1 %>,
+        width: '<%= table_filter.fetch('width', '100%') %>',
+        dropdownAutoWidth: true,
+        placeholder: '<%= table_filter.fetch('placeholder', '') %>',
+        allowClear: <%= table_filter.fetch('allow-clear', true) %>
+      });
     <% end %>
-  </div>
-  <% content_for :scripts do %>
-    $('#<%= "#{table_name}_content" %>').find('select[name="<%= table_filter["name"].parameterize('_') %>"]').select2({theme: "bootstrap", minimumResultsForSearch: <%= searchable %>, width: '<%= width %>', allowClear: <%= allow_clear %>})
+  <% elsif table_filter["type"] == "boolean" %>
+    <input type="checkbox" value="true" name="<%= filter_name %>">
+    <label for="<%= filter_name %>"><%= table_filter["name"] %></label>
   <% end %>
-<% elsif table_filter["type"] == "boolean" %>
-  <div class="btn-group" style="margin-left:10px">
-    <input type="checkbox" value="true" name='<%= table_filter["name"].parameterize('_') %>' <%= table_filter["selection"] == "true" ? 'checked' : ''%>><label for="<%= table_filter["name"].parameterize('_') %>"><%= table_filter["name"] %></label>
-  </div>
-<% end %>
+</div>

data/app/views/partials/_table.html.erb

@@ -1,395 +1,237 @@
-<% columns = columns.map{ |column| column.symbolize_keys! } %>
-<% if !cookies["#{table_name}_table"].blank? %>
-  <% json = JSON.parse(cookies["#{table_name}_table"]) %>
-  <% if !json['columns'].blank? %>
-    <% columns.each_with_index  do |column, key| %>
-      <% column[:visible] = json['columns'].include?(column[:data].to_s) ? true : false %>
-    <% end %>
-  <% end %>
-  <% if !json['view'].blank? %>
-    <% default_view = json['view'] %>
-  <% end %>
-  <% sort = json['sort'].blank? ? sort : json['sort'] %>
-  <% initial_size = json['table_size'].blank? ? initial_size : json['table_size'] %>
-  <% ordering = json['ordering'].blank? ? [] : json['ordering'] %>
-<% end %>
-
-<% if !ordering.blank? %>
-  <% columns = columns.sort_by{ |v| ordering.index(v[:data]).blank? ? 9999 : ordering.index(v[:data])} %>
-<% end %>
-<% mapping = columns.each_with_index.map {|v,i| [v[:data],i]}.to_h %>
-<% sort = sort.map{|col,dir| [mapping[col].blank? ? 1 : mapping[col] ,dir]}  %>
-<% debug = !defined?(debug) ? false : debug %>
+<% debug = defined?(debug) ? debug : false %>
+<% defer_loading = defined?(defer_loading) ? defer_loading : false %>
 
-<div id='<%= "#{table_name}_content" %>'>
-  <div class='table-header'>
-    <div class="table-header-left" >
-      <div class="btn-group">
+<div id="<%= table_name %>_content">
+  <div class="table-header">
+    <div class="table-header-left">
       <% if defined?(table_filters)  %>
-        <% table_filters.each_with_index do |table_filter, index| %>
-          <% table_filter["selection"] = return_cookie_filters(cookie_key: "#{table_name}_table", filter_key: "#{table_filter["name"].parameterize('_')}_filter", values: table_filter["values"], type: table_filter["type"], defaults: table_filter["defaults"]) %>
-          <%= render(:partial=>"partials/filters", locals: {:table_filter => table_filter, :index => index, :filter_count => table_filters.size, :table_name => table_name}, :formats => [:html])  %>
+        <% table_filters.each do |table_filter| %>
+          <%= render(:partial=>"partials/filters", locals: {:table_filter => table_filter, :filter_count => table_filters.size, :table_name => table_name}, :formats => [:html])  %>
         <% end %>
       <% end %>
-      </div>
     </div>
 
-    <div class="table-header-right" >
-      <div class="btn-group" data-toggle="buttons">
-        <%  if defined?(table_actions) && !table_actions.blank? %>
-          <%=  table_actions  %>
+    <div class="table-header-right">
+      <% if defined?(table_actions) && table_actions.present? %>
+        <% if table_actions.class == Hash %>
+          <div class="btn-group">
+            <span id="<%= table_name %>_actions" class="table-btn" data-items="<%= raw(table_actions.to_json) %>">
+              <i class='fa fa-object-ungroup'></i>
+            </span>
+          </div>
+        <% else %>
+          <%= table_actions %>
         <% end %>
-        <div class="dropdown">
-          <button type="button" class="hidden table-btn dropdown-toggle group_actions" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
-            <span class='fa fa-gears'></span>
-          </button>
-          <ul class="dropdown-menu" >
-            <li style="white-space: nowrap;"><div class="col-sm-12">Export</div></li>
-          </ul>
-        </div>
-        <div class="dropdown">
-          <button id='<%= "#{table_name}_visiblity" %>' type="button" class="table-btn dropdown-toggle" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
-            <span class='fa fa-eye'></span>
-          </button>
-          <ul class="dropdown-menu table_visibility" >
-            <% columns.each_with_index  do |column, key| %>
-              <li>
-                <div class='checkbox checkbox-primary'>
-                  <input type="checkbox" data-key="<%= column[:data] %>" name="<%= table_name %>[table_column_vis][]" <%= column[:visible] == false ?  '' : 'checked' %> value="<%= key %>">
-                  <label><%= ["#{table_name}__actions"].include?(column[:data]) ? 'Actions' : column[:title] %></label>
-                </div>
-                <span class="icon z-icon-hamburger"></span>
-              </li>
-            <% end %>
-          </ul>
+      <% end %>
+      <% if defined?(table_group_actions) && table_group_actions.present? %>
+        <div class="btn-group">
+          <span id="<%= table_name %>_group_actions" class="hidden table-btn" data-items='<%= raw(table_group_actions.to_json) %>'>
+            <i class='fa fa-object-ungroup'></i>
+          </span>
         </div>
+      <% end %>
+      <div class="dropdown">
+        <button id="<%= table_name %>_visiblity" type="button" class="table-btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <span class='fa fa-eye'></span>
+        </button>
+        <ul id="<%= table_name %>_visibility_menu" class="dropdown-menu table_visibility pull-right"></ul>
+      </div>
 
-        <% default_view ||= table_views.select {|k,v| v == true }.first[0].to_s %>
-        <% table_view = table_views[:table] %>
-        <% grid_view = table_views[:grid] %>
-
-        <label id='<%= "#{table_name}_view_table" %>'class="btn table-btn <%= default_view == 'table' ? 'active' : '' %> <%= !table_view ? 'hidden' : '' %>">
-          <input type="radio" name="<%= table_name %>[view_mode]" <%= default_view == 'table' ? 'checked' : '' %> value='table' />
-          <span class="fa fa-table"></span>
-        </label>
-        <label id='<%= "#{table_name}_view_grid" %>'class="btn table-btn <%= default_view == 'grid' ? 'active' : '' %> <%= !grid_view ? 'hidden' : '' %>" >
-          <input type="radio" name="<%= table_name %>[view_mode]" <%= default_view == 'grid' ? 'checked' : '' %> value='grid' />
-          <span class="fa fa-th-large"></span>
-        </label>
-        <label id='<%= "#{table_name}_refresh" %>' class="table-btn table_refresh">
-          <span class="z-icon-refresh"></span>
-        </label>
+      <div id="<%= table_name %>_view_table" class="table-btn <%= 'hidden' unless table_views[:table] and table_views[:grid] %>">
+        <span class="fa fa-table"></span>
+      </div>
+      <div id="<%= table_name %>_view_grid" class="table-btn <%= 'hidden' unless table_views[:grid] and table_views[:table] %>">
+        <span class="fa fa-th-large"></span>
       </div>
-      <div id="<%= "#{table_name}_search_wrapper" %>" class="search-wrapper">
-        <span id="<%="#{table_name}_search_btn" %>" class="z-icon-search table-btn"></span>
-        <input id='<%= "#{table_name}_search" %>' type="search" name='table[search]' class="form-control" placeholder='Search..'>
+      <label id="<%= table_name %>_refresh" class="table-btn table_refresh">
+        <span class="z-icon-refresh"></span>
+      </label>
+      <div id="<%= table_name %>_search_wrapper" class="search-wrapper">
+        <span id="<%= table_name %>_search_btn" class="z-icon-search table-btn"></span>
+        <input id="<%= table_name %>_search" type="search" name="table[search]" class="form-control" placeholder="Search..">
       </div>
     </div>
   </div>
-    <table id='<%= "#{table_name}" %>' data-source="<%= table_url %>" class="table bootstrap-datatable datatable hidden" style="width: 100% !important;"></table>
+  <table id="<%= table_name %>" data-source="<%= table_url %>" class="table bootstrap-datatable datatable hidden" style="width: 100% !important;"></table>
 </div>
 
 <% content_for :scripts do %>
-  columns = <%= raw(columns.to_json) %>;
-  $.each(columns, function(key, column) {
-    $.each(column, function(key, value) {
-      if(key=='render'){columns[0][key] = new Function('data', 'type', 'row', value);};
+  getTableParams(
+    '<%= table_name %>',
+    {
+      columns: <%= raw columns.to_json %>,
+      filters: <%= raw table_filters.to_json %>,
+      view: '<%= table_views.select { |k, v| v == true }.first[0].to_s %>',
+      size: <%= initial_size %>,
+      sort: <%= raw sort %>
+    },
+    create<%= table_name %>Table
+  );
+
+  function create<%= table_name %>Table(columns, view, size, sort) {
+    $.each(columns, function(key1, column) {
+      $.each(column, function(key2, value) {
+        if(key2 == 'render') {
+          columns[key1][key2] = new Function('data', 'type', 'row', value);
+        };
+        <% if defined?(table_group_actions) &&  table_group_actions.present? %>
+          if(key2 == 'data' && value == 'actions'){
+            columns[key1]['title'] = '<span id="<%= table_name %>_select_all" class="btn btn-xs btn-default "><span class="z-icon-addition"></span></span>';
+          };
+        <% end %>
+      });
+    });
+
+    $('#<%= table_name %>_content').contextMenu({
+      selector: '#<%= table_name %>_group_actions, #<%= table_name %>_actions',
+      trigger: 'left',
+      zIndex: 10,
+      callback: function(id, options) {
+        array = id.split('::');
+        object_ids = []
+        $.each(<%= table_name %>.api().rows({ selected: true }).ids(), function(key, value) {
+        object_ids.push(value);
+        })
+        if(array[1].includes('?')){
+          ExecuteRemoteJS(array[0], array[1].concat('&' + jQuery.param({ids: object_ids})));
+        }else{
+          ExecuteRemoteJS(array[0], array[1].concat('?' + jQuery.param({ids: object_ids})));
+        }
+      },
+      build: function($trigger, e) {
+        var items = ($(e.target).data('items') == null) ? $(e.target).parent().first().data('items') : $(e.target).data('items') ;
+        return {
+          items: items
+        };
+      }
     });
-  });
 
-  var <%= table_name %> = $('#<%= "#{table_name}_content" %>').find('table.datatable').dataTable({
-    "sDom": "t<'row'<'grid_view col-lg-12'>><'table_footer'i<'<%="\##{table_name}_select_container" %>.select_container'>p>",
-    "pagingType": "full_numbers",
-    "language" : {
-      "paginate" : {
-        "previous" : "<span class='z-icon-arrow-left' />",
-        "next" : "<span class='z-icon-arrow-right' />"
+    <!-- Debounce Draw Function -->
+    var <%= table_name %>_draw = debounce(function() {
+      if($('#<%= table_name %>_content').is(":visible") && !$('#<%= table_name %>_content .table_refresh').hasClass('zc-spin') && !document.hidden) {
+        return $("#<%= table_name %>").DataTable().draw(false);
       }
-    },
-    "bProcessing": true,
-    "bServerSide": true,
-    "colReorder": true,
-    "select": false, //{ style: 'multi'},
-    "columns": [].concat(columns),
-    "aaSorting": <%= raw(sort.to_json) %>,
-    "sAjaxSource":  $('#<%= "#{table_name}_content" %>').find('table.datatable').data('source'),
-    "iDisplayLength": <%= initial_size %> ,
-    "fnServerParams": function ( aoData ) {
-      aoData.push(
-        { "name": "table_view_mode", "value": $('#<%= "#{table_name}_content" %>').find('input[type=radio][name="<%= table_name %>[view_mode]"]:checked').val()},
-        { "name": "sSearch",    "value": $('#<%= "#{table_name}_content" %>').find('input[name="table[search]"]').val()}
-      );
-      <% if !aoData.blank? %>
-        <% aoData.each do |data| %>
-          aoData.push(<%= raw(data.to_json) %>);
-        <% end %>
+    }, 4000);
+
+    var <%= table_name %> = $('#<%= table_name %>').dataTable({
+      "sDom": "t<'grid_view'><'table-footer'i<'#<%= table_name %>_select_container.select_container'>p>",
+      "pagingType": "full_numbers",
+      "language" : {
+        "paginate" : {
+          "previous" : "<span class='z-icon-arrow-left' />",
+          "next" : "<span class='z-icon-arrow-right' />"
+        }
+      },
+      "bProcessing": true,
+      "bServerSide": true,
+      "colReorder": true,
+      <% if defined?(table_group_actions) &&  table_group_actions.present? %>
+        "select": { style: 'multi'},
       <% end %>
-      <% if defined?(table_filters)  %>
-        <% table_filters.each do |table_filter| %>
-          <% if table_filter["type"] == "checkbox" %>
-            aoData.push({ "name": "<%= table_filter["name"].parameterize('_') %>", "value": $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_filter["name"].parameterize('_') %>[]"]:checked').map(function(_, el) { return $(el).val()}).get() });
-          <% elsif table_filter["type"] == "boolean" %>
-            aoData.push({ "name": "<%= table_filter["name"].parameterize('_') %>", "value": $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_filter["name"].parameterize('_') %>"]:checked').val() });
-          <% elsif table_filter["type"] == "select" %>
-            aoData.push({ "name": "<%= table_filter["name"].parameterize('_') %>", "value": $('#<%= "#{table_name}_content" %>').find('select[name="<%= table_filter["name"].parameterize('_') %>"]').val() });
+      "columns": [].concat(columns),
+      "aaSorting": sort,
+      "sAjaxSource":  $('#<%= table_name %>_content table.datatable').data('source'),
+      <% if defer_loading %>
+        "deferLoading": 0,
+      <% end %>
+      "iDisplayLength": size,
+      "fnServerParams": function ( aoData ) {
+        aoData.push(
+          { "name": "table_view_mode", "value": getTableViewMode('<%= table_name %>', view) },
+          { "name": "sSearch", "value": $('#<%= table_name %>_search').val() }
+        );
+        <% if !aoData.blank? %>
+          <% aoData.each do |data| %>
+            aoData.push(<%= raw(data.to_json) %>);
           <% end %>
         <% end %>
-      <% end %>
-    },
-    "fnDrawCallback": function( oSettings ) {
-      $('#<%= "#{table_name}_content" %>').find('.table [rel="status_popover"], .table[data-rel="status_popover"]').popover({ placement: "left", html: 'true', container: '.table'});
-      $('#<%= "#{table_name}_content" %>').find('.table [data-toggle="tooltip"]').tooltip();
-      view_mode = $('#<%= "#{table_name}_content" %>').find('input[type=radio][name="<%= table_name %>[view_mode]"]:checked').val();
-
-      $('#<%= "#{table_name}_content" %>').find('.grid_view').addClass('hidden');
-      $('#<%= "#{table_name}_content" %>').find('table.datatable').addClass("hidden");
-
-      if(view_mode == 'grid'){
-        $('#<%= "#{table_name}_content .grid_view" %>').html('');
-
-        $.each(oSettings.aoData, function(index, result) {
-          $('#<%= "#{table_name}_content .grid_view" %>').append(result._aData.grid_view);
-        });
-        if (oSettings.aoData.length == 0) {
-          $(".login_grid").append("<div class='row'><div class='col-md-12 center'><h3>" + oSettings.oLanguage.sEmptyTable + "</h3></div></div>")
+        <% if defined?(table_filters)  %>
+          <% table_filters.each do |table_filter| %>
+            <% if table_filter["type"] == "checkbox" %>
+              aoData.push({ "name": "<%= table_filter["name"].parameterize('_') %>", "value": $('#<%= table_name %>_content input[name="<%= table_filter["name"].parameterize('_') %>[]"]:checked').map(function(_, el) { return $(el).val()}).get() });
+            <% elsif table_filter["type"] == "boolean" %>
+              aoData.push({ "name": "<%= table_filter["name"].parameterize('_') %>", "value": $('#<%= table_name %>_content input[name="<%= table_filter["name"].parameterize('_') %>"]:checked').val() });
+            <% elsif ["select", "group-select"].include?(table_filter["type"]) %>
+              aoData.push({ "name": "<%= table_filter["name"].parameterize('_') %>", "value": $('#<%= table_name %>_content select[name="<%= table_filter["name"].parameterize('_') %>"]').val() });
+            <% end %>
+          <% end %>
+        <% end %>
+      },
+      "fnDrawCallback": function(oSettings) {
+        $('#<%= table_name %>_content').find('.table [rel="status_popover"], .table[data-rel="status_popover"]').popover({ placement: "left", html: 'true', container: '.table'});
+        $('#<%= table_name %>_content').find('.table [data-toggle="tooltip"]').tooltip();
+        $('#<%= table_name %>_content .grid_view').addClass('hidden');
+        $('#<%= table_name %>_content table.datatable').addClass("hidden");
+
+        if (oSettings.oAjaxData.table_view_mode === 'grid') {
+          $('#<%= table_name %>_content .grid_view').html('');
+
+          $.each(oSettings.aoData, function(index, result) {
+            $('#<%= table_name %>_content .grid_view').append(result._aData.grid_view);
+          });
+          if (oSettings.aoData.length == 0) {
+            $(".login_grid").append("<div class='row'><div class='col-md-12 center'><h3>" + oSettings.oLanguage.sEmptyTable + "</h3></div></div>")
+          }
+          $('#<%= table_name %>_content .grid_view').removeClass('hidden');
+        } else if (oSettings.oAjaxData.table_view_mode === 'table') {
+          $('#<%= table_name %>_content table.datatable').removeClass("hidden");
         }
-        $('#<%= "#{table_name}_content" %>').find('.grid_view').removeClass('hidden')
-      }else if(view_mode == 'table'){
-        $('#<%= "#{table_name}_content" %>').find('table.datatable').removeClass("hidden");
-      }
 
-      <%= table_name %>.find('input[type="checkbox"].select_row').on('click', function(e){
-        if($('#<%= "#{table_name}_select_all" %>').is(':checked')){ $('#<%= "#{table_name}_select_all" %>').prop("checked", false);}
-      });
-      if( <%= table_name %>.find('tr[processing="true"]').length > 0 && <%= table_name %>.is(":visible")){
-        setTimeout(function(){
-          <%= table_name %>.api().draw(false);
-        }, 1000);
-      }
-      if(<%= table_name %>.find('tr[processing="true"]').length > 0 && $('#<%= table_name %>_wrapper .grid_view').is(":visible")){
-        setTimeout(function(){
-          <%= table_name %>.api().draw(false);
-        }, 1000);
-      }
-    },
-    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
-      data = aoData;
-      if ( data && $.isArray(data) ) {
-        var tmp = {};var rbracket = /(.*?)\[\]$/;
-        $.each( data, function (key, val) {
-          var match = val.name.match(rbracket);
-          if ( match ) {var name = match[0];if ( ! tmp[ name ] ) {tmp[ name ] = [];}tmp[ name ].push( val.value );}else {tmp[val.name] = val.value;}
+        <%= table_name %>.find('input[type="checkbox"].select_row').on('click', function(e) {
+          if($('#<%= table_name %>_select_all').is(':checked')) {
+            $('#<%= table_name %>_select_all').prop("checked", false);
+          }
         });
-        data = tmp;
-      }
-      <% if debug %>console.log(fnCallback); console.log(oSettings);console.log(data);<% end %>
-      oSettings.jqXHR = $.ajax({"dataType": 'json', "url": sSource, "data": data, "success": fnCallback,"error": function (textStatus, errorThrown) {
-        if(textStatus.status == 400 || textStatus.status == 302 ){
-          window.location.replace("/");
-        }else if(textStatus.status == 500 ){
-          alert('<%= "Table Server Error: #{table_name} Contact Support" %>');
-        }else{
-          window.location.replace("/");
-        };
-      }});
-    }
-  }).on( 'draw.dt', function () {
-    <% if debug %> console.log('Drawing Trigger <%= table_name %>'); <% end %>
-    <%= table_name + '_cookie' %>();
-  }).on( 'processing.dt', function ( e, settings, processing ) {
-    if(processing){
-      $('#<%= "#{table_name}_content" %>').find('.table_refresh i').addClass('fa-spin');
-    }else{
-      $('#<%= "#{table_name}_content" %>').find('.table_refresh i').removeClass('fa-spin');
-    }
-  });
-
-  function <%= table_name + '_cookie' %>(){
-    <% if debug %>  console.log('Save Cookie <%= table_name %>'); <% end %>
-    columns =  $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_name %>[table_column_vis][]"]:checked').map(function(_, el) { return $(el).data('key')}).toArray();
-    view = $('#<%= "#{table_name}_content" %>').find('input[type=radio][name="<%= table_name %>[view_mode]"]:checked').val();
-    sort = <%= table_name %>.fnSettings().aaSorting;
-    table_size = <%= table_name %>.fnSettings()._iDisplayLength;
-    sort = sort.map(function(value,key) {
-      column = <%= table_name %>.api().column(value[0]).dataSrc();
-      return [column,value[1]]
-    })
-
-    var orderedItems = [];
-    $.each(<%= table_name %>.api().colReorder.order(), function(value) {
-      data_key = <%= table_name %>.api().column(value).dataSrc();
-      if (data_key != null && data_key.length > 0 ){orderedItems.push(data_key);}
-    });
 
-    if (Cookies.get('<%= "#{table_name}_table" %>') != null){
-      data = $.parseJSON( Cookies.get('<%= "#{table_name}_table" %>'));
-      data['columns'] = columns;
-      data['view'] = view;
-      data['sort'] = sort;
-      data['table_size'] = table_size;
-      data['ordering'] = orderedItems;
-    }else{
-      data = {'columns' : columns, 'view' : view, 'sort' : sort, 'table_size' : table_size, 'orderedItems' : orderedItems};
-    }
-
-    Cookies.set('<%= "#{table_name}_table" %>', data);
-  }
+        if (<%= table_name %>.find('tr[processing="true"]').length > 0 && <%= table_name %>.is(":visible")) {
+          <%= table_name %>_draw();
+        }
 
-  function <%= table_name + '_column_vis' %>(sorting){
-    $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_name %>[table_column_vis][]"]').on("change", function(e) {
-      index = <%= table_name %>.api().colReorder.transpose(parseInt($(this).val()),'toCurrent');
-      column = <%= table_name %>.api().column(index);
-      column.visible($(this).is(':checked'));
-      <%= table_name + '_cookie' %>();
+        if (<%= table_name %>.find('tr[processing="true"]').length > 0 && $('#<%= table_name %>_wrapper .grid_view').is(":visible")) {
+          <%= table_name %>_draw();
+        }
+        resize_iframe();
+
+        <!-- Hide group actions and deselect-->
+        $('#<%= table_name %>_select_all span').removeClass('z-icon-subtraction').addClass('z-icon-addition');
+        $('#<%= table_name %>_group_actions').addClass('hidden');
+      },
+      "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
+        data = aoData;
+        if ( data && $.isArray(data) ) {
+          var tmp = {};var rbracket = /(.*?)\[\]$/;
+          $.each( data, function (key, val) {
+            var match = val.name.match(rbracket);
+            if ( match ) {var name = match[0];if ( ! tmp[ name ] ) {tmp[ name ] = [];}tmp[ name ].push( val.value );}else {tmp[val.name] = val.value;}
+          });
+          data = tmp;
+        }
+        <% if debug %>console.log(fnCallback); console.log(oSettings);console.log(data);<% end %>
+        oSettings.jqXHR = $.ajax({"dataType": 'json', "url": sSource, "data": data, "success": fnCallback,"error": function (textStatus, errorThrown) {
+          if (textStatus.status == 400 || textStatus.status == 302 ) {
+            window.location.replace("/");
+          } else if (textStatus.status == 500 ) {
+            $('#<%= table_name %>_content .table_refresh').removeClass('zc-spin');
+            alert('Table Server Error: <%= table_name %> Contact Support: ' + errorThrown);
+          } else if (textStatus.status == 502 ) {
+            $('#<%= table_name %>_content .table_refresh').removeClass('zc-spin');
+          } else {
+            window.location.replace("/");
+          };
+        }});
+      }
+    }).on('draw.dt', function() {
+      <% if debug %> console.log('Drawing Trigger <%= table_name %>'); <% end %>
+    }).on('processing.dt', function(e, settings, processing) {
+      $('#<%= table_name %>_content .table_refresh').toggleClass('zc-spin', processing);
     });
-    if(sorting){
-      $('#<%= "#{table_name}_content" %>').find('.table_visibility').sortable({axis: 'y'}).on("sortstop", function( event, ui ) {
-        <% if debug %>  console.log('Sort Stop Trigger <%= table_name %>'); <% end %>
-        items = $('#<%= "#{table_name}_content" %>').find('.table_visibility li input');
-        var orderedItems = [];
-        $.each(items, function(index, value) {
-          index = <%= table_name %>.api().colReorder.transpose(parseInt($(value).val()),'toCurrent');
-          column = <%= table_name %>.api().column(index);
-          if (column != null && column.length > 0 ){orderedItems.push(column.index());}
-        });
-        <%= table_name %>.api().colReorder.order(orderedItems);
-      });
-      $('#<%= "#{table_name}_content" %>').find('.table_visibility').disableSelection();
-    }
-  }
-  <%= table_name + '_column_vis' %>(true);
 
-  //Datable Select
-  function <%= table_name + '_row_select' %>(select, data){
-    var count = <%= table_name %>.api().rows({ selected: true }).count();
-    if(count > 0){
-       $('#<%= "#{table_name}_content" %>').find('.group_actions').removeClass('hidden');
-    }else {
-       $('#<%= "#{table_name}_content" %>').find('.group_actions').addClass('hidden');
-    }
-    if(select){
-      <% if debug %>
-        console.log('Selected');
-        console.log(data);
-      <% end %>
-    }else{
-      <% if debug %>
-        console.log('Deselected');
-        console.log(data);
-      <% end %>
-    }
+    initTable(
+      <%= table_name %>.api(),
+      '<%= table_name %>',
+      { view, size },
+      columns,
+      <%= raw table_filters.to_json %>
+    );
   }
-  <%= table_name %>.api().on('select', function ( e, dt, type, indexes ) {
-    <%= table_name + '_row_select' %>(true, <%= table_name %>.api().rows( indexes ).data());
-  });
-  <%= table_name %>.api().on('deselect', function ( e, dt, type, indexes ) {
-    <%= table_name + '_row_select' %>(false, <%= table_name %>.api().rows( indexes ).data());
-  });
-
-  //Datatable header reorder
-  <%= table_name %>.api().on('column-reorder', function ( e, settings, details ) {
-    <% if debug %> console.log('Ordering Trigger <%= table_name %>'); <% end %>
-    var orderedItems = [];
-    $.each(<%= table_name %>.api().colReorder.order(), function(value) {
-      data_key = <%= table_name %>.api().column(value).dataSrc();
-      item = $('#<%= "#{table_name}_content" %>').find('.table_visibility li input[data-key="' + data_key + '"]').parents('li');
-      if (item != null && item.length > 0 ){orderedItems.push(item);}
-    });
-    <% if debug %> console.log('Ordering Trigger Rebuild DropDown <%= table_name %>'); <% end %>
-    $('#<%= "#{table_name}_content" %>').find('.table_visibility').empty().html(orderedItems);
-    <%= table_name + '_column_vis' %>(false);
-    <%= table_name + '_cookie' %>();
-  });
-
-  $('#<%= "#{table_name}_select_all" %>').on('click', function(e){
-    if($(this).is(':checked')){<%= table_name %>.find('input[type="checkbox"].select_row').prop("checked", true);}else{<%= table_name %>.find('input[type="checkbox"].select_row').prop("checked", false);}
-  });
-
-  $('#<%= "#{table_name}_content" %>').find('.table_refresh').click(function(e){<%= table_name %>.api().draw(false)});
-
-  // Add the row # select to the footer
-  const <%= "#{table_name}_select" %> = $('<select>')
-    .attr('id', 'table_size')
-    .attr('class', '')
-    .attr('name', 'table_size')
-    .appendTo('<%="\##{table_name}_select_container" %>');
-  [10, 25, 50, 100].forEach(e => {
-    <%= "#{table_name}_select" %>.append($('<option>').attr('value', e).text(e));
-  });
-  <%= "#{table_name}_select" %>.val("<%= initial_size.to_s %>");
-  <%= "#{table_name}_select" %>.select2({
-    minimumResultsForSearch: Infinity,
-    dropdownAutoWidth: true,
-    width: '100%',
-  });
-
-  $('#<%= "#{table_name}_search_btn" %>').on('click', () => {
-    $('#<%= "#{table_name}_search_wrapper" %>').toggleClass('active');
-    $('#<%= "#{table_name}_search" %>').focus();
-  });
-
-  $('#<%= "#{table_name}_content" %>').find('select[name="table_size"]').on("change", function(e) {
-    <%= table_name %>.fnSettings()._iDisplayLength = $(this).val();<%= table_name %>.api().draw(false);
-  });
-
-  $('#<%= "#{table_name}_content" %>').find('input[type=radio][name="<%= table_name %>[view_mode]"]').on("change", function(e) {
-    <%= table_name %>.api().draw(false)
-  });
-
-  var timer;
-  var timeout = 300;
-  $('#<%= "#{table_name}_content" %>').find('input[name="table[search]"]').keydown(function(){
-    clearTimeout(timer);
-    var search = $(this);
-    if (search.val()) {timer = setTimeout(function(){<%= table_name %>.api().draw();}, timeout);}
-  });
-
-  <% if defined?(table_filters)  %>
-    <% table_filters.each do |table_filter| %>
-      <% cache = table_filter["cache"].blank? ? false : table_filter["cache"]  %>
-      <% if table_filter["type"] == "checkbox" %>
-        $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_filter["name"].parameterize('_') %>[]"]').click(function(){
-          filters = $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_filter["name"].parameterize('_') %>[]"]:checked').map(function(_, el) { return $(el).val()}).toArray();
-          <% if cache %>
-            if (Cookies.get('<%= "#{table_name}_table" %>') != null){
-              data = $.parseJSON( Cookies.get('<%= "#{table_name}_table" %>'));
-              data['<%= table_filter["name"].parameterize('_') %>_filter'] = filters
-            }else{
-              data = {'<%= table_filter["name"].parameterize('_') %>_filter' : filters }
-            }
-            Cookies.set('<%= "#{table_name}_table" %>', data);
-          <% end %>
-          return $("table#<%= table_name %>").dataTable().api().draw()
-        });
-      <% elsif table_filter["type"] == "select" %>
-        $('#<%= "#{table_name}_content" %>').find('select[name="<%= table_filter["name"].parameterize('_') %>"]').change(function(){
-          filter = $('#<%= "#{table_name}_content" %>').find('select[name="<%= table_filter["name"].parameterize('_') %>"]').val();
-          <% if cache %>
-            if (Cookies.get('<%= "#{table_name}_table" %>') != null){
-              data = $.parseJSON( Cookies.get('<%= "#{table_name}_table" %>'));
-              data['<%= table_filter["name"].parameterize('_') %>_filter'] = filter
-            }else{
-              data = {'<%= table_filter["name"].parameterize('_') %>_filter' : filter }
-            }
-            Cookies.set('<%= "#{table_name}_table" %>', data);
-          <% end %>
-          return $("table#<%= table_name %>").dataTable().api().draw()
-        });
-      <% elsif table_filter["type"] == "boolean" %>
-        $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_filter["name"].parameterize('_') %>"]').change(function(){
-          filter = $('#<%= "#{table_name}_content" %>').find('input[name="<%= table_filter["name"].parameterize('_') %>"]:checked').val();
-          <% if cache %>
-            if (Cookies.get('<%= "#{table_name}_table" %>') != null){
-              data = $.parseJSON( Cookies.get('<%= "#{table_name}_table" %>'));
-              data['<%= table_filter["name"].parameterize('_') %>_filter'] = filter
-            }else{
-              data = {'<%= table_filter["name"].parameterize('_') %>_filter' : filter }
-            }
-            Cookies.set('<%= "#{table_name}_table" %>', data);
-          <% end %>
-          return $("table#<%= table_name %>").dataTable().api().draw()
-        });
-      <% end %>
-    <% end %>
-  <% end %>
 <% end %>