fix(pfFilter): fix plugin filters do not work if tables are set up serverSide

package.json

@@ -5,6 +5,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "bootstrap": "~3.3.7",
+    "datatables": "^1.10.18",
     "font-awesome": "^4.7.0",
     "jquery": "~3.2.1"
   },

src/js/patternfly.dataTables.pfFilter.js

@@ -104,10 +104,10 @@
  */
 (function (factory) {
   "use strict";
-  if (typeof define === "function" && define.amd ) {
+  if (typeof define === "function" && define.amd) {
     // AMD
-    define (["jquery", "datatables.net"], function ($) {
-      return factory ($, window, document);
+    define(["jquery", "datatables.net"], function ($) {
+      return factory($, window, document);
     });
   } else if (typeof exports === "object") {
     // CommonJS
@@ -208,10 +208,46 @@
       }
       return showThisRow;
     });
+
+    $.event.trigger({
+      type: "init.pf",
+      message: "pfFilter has been initialized",
+      time: new Date()
+    });
   };
 
   // Local functions
 
+  /**
+   * update filters if server-side processing is enabled
+   * see more https://www.datatables.net/release-datatables/examples/data_sources/server_side.html
+   *
+   * @param {DataTable.Api} dt DataTable
+   * @private
+   */
+  function updateRemoteFilters (dt) {
+    var ctx = dt.settings()[0];
+    var filters = [];
+
+    $.each(ctx._pfFilter.filters, function (index, filter) {
+      if (filters[filter.column] === undefined) {
+        filters[filter.column] = [];
+      }
+
+      filters[filter.column].push(filter.value);
+    });
+
+    dt.search('').columns().search(''); // clear before update
+
+    $.each(filters, function (column, values) {
+      if (values === undefined) {
+        return;
+      }
+
+      dt.column(column).search(values.join('|'), true, false, ctx._pfFilter.filterCaseInsensitive);
+    });
+  }
+
   /**
    * Add active filter control
    *
@@ -227,7 +263,7 @@
     var i;
 
     // Append active filter control
-    ctx._pfFilter.activeFilterControls.append('<li><span class="label label-info">' + filter.name + ': ' +
+    ctx._pfFilter.activeFilterControls.append('<li><span class="label label-primary">' + filter.name + ': ' +
       filter.value + '<a href="#"><span class="pficon pficon-close"/></a></span></li>');
 
     // Handle click to clear active filter
@@ -243,6 +279,9 @@
       if (ctx._pfFilter.filters.length === 0) {
         ctx._pfFilter.activeFilters.addClass("hidden"); // Hide
       }
+      if (ctx.oInit.serverSide) {
+        updateRemoteFilters(dt);
+      }
       dt.draw();
       updateFilterResults(dt);
     });
@@ -274,6 +313,9 @@
     // Add new filter
     if (!found) {
       ctx._pfFilter.filters.push(filter);
+      if (ctx.oInit.serverSide) {
+        updateRemoteFilters(dt);
+      }
       dt.draw();
       addActiveFilterControl(dt, filter);
       updateFilterResults(dt);
@@ -292,6 +334,9 @@
     ctx._pfFilter.filters.length = 0; // Reset filters
     ctx._pfFilter.activeFilterControls.html(""); // Remove active filter controls
     ctx._pfFilter.activeFilters.addClass("hidden"); // Hide active filters area
+    if (ctx.oInit.serverSide) {
+      updateRemoteFilters(dt);
+    }
     dt.draw();
   }
 
@@ -377,7 +422,16 @@
    */
   function updateFilterResults (dt) {
     var ctx = dt.settings()[0];
-    var filteredRows = dt.rows({"page": "current", "search": "applied"}).flatten().length;
+    var filteredRows;
+
+    if (ctx.oInit.serverSide) {
+      dt.on('draw', function () {
+        filteredRows = dt.ajax.json().recordsFiltered;
+        ctx._pfFilter.filterResults.html(filteredRows + " Results");
+      });
+    } else {
+      filteredRows = dt.rows({ "page": "current", "search": "applied" }).flatten().length;
+    }
     if (ctx._pfFilter.filterResults === undefined || ctx._pfFilter.filterResults.length === 0) {
       return;
     }

src/less/table-view.less

@@ -149,7 +149,6 @@ table.dataTable {
       margin-bottom: 0;
     }
   }
-
 }
 
 // Inline action button and kebab
@@ -165,6 +164,10 @@ table.dataTable {
     height: 100%;
     width: 100%;
   }
+  .table-view-pf-save,
+  .table-view-pf-cancel {
+    width: 50%;
+  }
   .dropdown,
   .table-view-pf-btn {
     height: 100%;
@@ -177,6 +180,15 @@ table.dataTable {
   }
 }
 
+// Inline edit td
+.table-view-pf-editable > .table-view-pf-editor {
+  width: 100%;
+  color: @color-pf-black;
+  .filter-option {
+    color: @color-pf-black;
+  }
+}
+
 // Selection column
 .table-view-pf-select {
   width: 33px;

src/sass/converted/patternfly/_table-view.scss

@@ -149,7 +149,6 @@ table.dataTable {
       margin-bottom: 0;
     }
   }
-
 }
 
 // Inline action button and kebab
@@ -165,6 +164,10 @@ table.dataTable {
     height: 100%;
     width: 100%;
   }
+  .table-view-pf-save,
+  .table-view-pf-cancel {
+    width: 50%;
+  }
   .dropdown,
   .table-view-pf-btn {
     height: 100%;
@@ -177,6 +180,15 @@ table.dataTable {
   }
 }
 
+// Inline edit td
+.table-view-pf-editable > .table-view-pf-editor {
+  width: 100%;
+  color: $color-pf-black;
+  .filter-option {
+    color: $color-pf-black;
+  }
+}
+
 // Selection column
 .table-view-pf-select {
   width: 33px;

src/sass/converted/rcue/_date-and-time.scss

@@ -0,0 +1,35 @@
+//
+// Date and Time
+// --------------------------------------------------
+.date-time-picker-pf .input-group-addon {
+  .fa,
+  .pficon {
+    width: 12px;
+  }
+}
+
+.date-time-range-picker-pf {
+  .form-control,
+  .form-control:not(:first-child):not(:last-child) {
+    border-radius: $border-radius-base;
+  }
+  .form-control:first-child {
+    border-bottom-right-radius: $border-radius-base;
+    border-top-right-radius: $border-radius-base;
+  }
+  .form-control:last-child {
+    border-bottom-left-radius: $border-radius-base;
+    border-top-left-radius: $border-radius-base;
+  }
+  .input-group-addon {
+    background-color: transparent;
+    border: none;
+    line-height: $line-height-base;
+    padding: $padding-base-vertical $padding-base-horizontal;
+  }
+  .dropdown-kebab-pf {
+    float: right;
+    margin-left: 0;
+    margin-right: -15px;
+  }
+}

src/sass/converted/rcue/_list-view.scss

@@ -302,3 +302,89 @@
   position: relative;
   width: 100%;
 }
+.list-view-pf-editable {
+  &.active,
+  &.list-view-pf-create {
+    .list-view-pf-editor,
+    .list-view-pf-editor.bootstrap-select,
+    .bootstrap-switch,
+    .list-view-pf-actions .list-view-pf-save,
+    .list-view-pf-actions .list-view-pf-cancel {
+      display: initial;
+    }
+    .list-view-pf-edit,
+    .list-view-pf-value:not(.list-view-pf-readonly),
+    .dropdown-kebab-pf {
+      display: none;
+    }
+  }
+  .list-view-pf-editor,
+  .list-view-pf-editor.bootstrap-select,
+  .bootstrap-switch,
+  .list-view-pf-actions .list-view-pf-save,
+  .list-view-pf-actions .list-view-pf-cancel {
+    display: none;
+  }
+  &.active {
+    .list-view-pf-additional-info {
+      @media (min-width: $screen-sm-min) {
+        margin-top: ($grid-gutter-width/2);
+      }
+      @media (min-width: $screen-md-min) {
+        margin-top: 0;
+      }
+      .list-view-pf-additional-info-item {
+        margin-top: ($grid-gutter-width/2);
+        @media (min-width: $screen-sm-min) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+  .list-view-pf-textbox {
+    margin-right: ($grid-gutter-width/2);
+    width: 100%;
+  }
+  .list-view-pf-readonly {
+    color: $color-pf-black-500;
+  }
+  .list-view-pf-actions {
+    margin: ($grid-gutter-width/4) 0;
+    width: 100px;
+    text-align: right;
+    .list-view-pf-save,
+    .list-view-pf-cancel {
+      font-size: $font-size-h1;
+      @media (max-width: $screen-sm-min) {
+        margin-left: 0;
+      }
+    }
+  }
+  .list-view-pf-description {
+    flex: 100%;
+    @media (min-width: $screen-sm-min) {
+      flex: 100%;
+    }
+    @media (min-width: $screen-md-min) {
+      flex: 25%;
+    }
+  }
+  .list-view-pf-additional-info {
+    flex: 100%;
+    .list-view-pf-additional-info-item {
+      flex: 100%;
+    }
+    @media (min-width: $screen-sm-min) {
+      flex: 100%;
+      .list-view-pf-additional-info-item {
+        flex: 1;
+      }
+    }
+    @media (min-width: $screen-md-min) {
+      flex: 75%;
+      .list-view-pf-additional-info-item {
+        flex: 1;
+      }
+    }
+  }
+}

src/sass/converted/rcue/_patternfly-additions.scss

@@ -44,6 +44,7 @@
 @import 'close';
 @import 'context-selector';
 @import 'datatables';
+@import 'date-and-time';
 @import 'experimental-features';
 @import 'filter';
 @import 'footer';

src/sass/converted/rcue/_table-view.scss

@@ -149,7 +149,6 @@ table.dataTable {
       margin-bottom: 0;
     }
   }
-
 }
 
 // Inline action button and kebab
@@ -165,6 +164,10 @@ table.dataTable {
     height: 100%;
     width: 100%;
   }
+  .table-view-pf-save,
+  .table-view-pf-cancel {
+    width: 50%;
+  }
   .dropdown,
   .table-view-pf-btn {
     height: 100%;
@@ -177,6 +180,15 @@ table.dataTable {
   }
 }
 
+// Inline edit td
+.table-view-pf-editable > .table-view-pf-editor {
+  width: 100%;
+  color: $color-pf-black;
+  .filter-option {
+    color: $color-pf-black;
+  }
+}
+
 // Selection column
 .table-view-pf-select {
   width: 33px;

src/sass/converted/rcue/_time-picker.scss

@@ -2,6 +2,21 @@
 // Time Picker
 // --------------------------------------------------
 .bootstrap-datetimepicker-widget {
+  .today-button-pf:before {
+    content: "Today";
+  }
+  &.timepicker-sbs {
+    .datepicker, .accordion-toggle {
+      border-right: 1px solid $color-pf-black-300;
+    }
+    .timepicker {
+      padding-left: 0;
+      margin-top: 50px;
+    }
+    .picker-switch {
+      width: 50%;
+    }
+  }
   a[data-action] {
     border: 0;
     box-shadow: none;