Преглед изворни кода

HUE-2812 [hbase] The select all checkbox should only select visible entries

This fixes an issue where the select all checkbox also selected the filtered out entries. With this fix it will only select the visible items on the page.

It now also retains any search queries after performed actions.
Johan Ahlen пре 10 година
родитељ
комит
e7f2c62

+ 33 - 8
apps/hbase/src/hbase/static/hbase/js/base.js

@@ -31,19 +31,41 @@ var ListViewModel = function (options) {
   self.canWrite = ko.observable(options.canWrite);
   self.items = ko.observableArray(options.items);
   self.sortDropDown = new SortDropDownView({sortFields: options.sortFields, target: self.items});
-  self.selectAll = function () {
-    for (t = 0; t < self.items().length; t++)
-      self.items()[t].isSelected(true);
+
+  self.selectAllVisible = function () {
+    $.each(self.items(), function(index, item) {
+      item.isSelected(item.isVisible());
+    });
     return self;
   };
+
   self.deselectAll = function () {
-    for (q = 0; q < self.items().length; q++)
-      self.items()[q].isSelected(false);
+    $.each(self.items(), function(index, item) {
+      item.isSelected(false);
+    });
     return self;
   };
+
+  self.searchQuery = ko.observable("");
+
+  self.allVisibleSelected = ko.computed(function() {
+    if (self.items().length === 0) {
+      return false;
+    }
+    var hasVisibleItems = false;
+    for (var i = 0; i < self.items().length; i++) {
+      if (!self.items()[i].isSelected() && self.items()[i].isVisible()) {
+        return false
+      }
+      hasVisibleItems = hasVisibleItems || self.items()[i].isVisible();
+    }
+    return hasVisibleItems;
+  }, self);
+
   self.toggleSelectAll = function () {
-    if (self.selected().length != self.items().length)
-      return self.selectAll();
+    if (!self.allVisibleSelected()) {
+      return self.selectAllVisible();
+    }
     return self.deselectAll();
   };
   self.selected = function () {
@@ -119,9 +141,11 @@ var ListViewModel = function (options) {
         callback();
       self.sortDropDown.sort();
       self.isLoading(false);
+      if (self.searchQuery()) {
+        self._table.fnFilter(self.searchQuery());
+      }
     }]);
   };
-  self.searchQuery = ko.observable("");
   self.isLoading = ko.observable(false);
   self.isReLoading = ko.observable(false);
   self.droppedTables = [];
@@ -132,6 +156,7 @@ var DataRow = function (options) {
   ko.utils.extend(self, options); //applies options on itself
   BaseModel.apply(self, [options]);
 
+  self.isVisible = ko.observable(true);
   self.isSelected = ko.observable(false);
   self.select = function () {
     self.isSelected(!self.isSelected());

+ 13 - 0
apps/hbase/src/hbase/static/hbase/js/controls.js

@@ -65,6 +65,19 @@ var DataTableViewModel = function (options) {
   self.name = ko.observable(options.name);
   self.searchQuery.subscribe(function (value) {
     self._table.fnFilter(value);
+    for(var i = 0; i < self.items().length; i++) {
+      self.items()[i].isVisible(false);
+    }
+    var visibleRows = self._table.find("tbody > tr");
+    for (var i = 0; i < visibleRows.length; i++) {
+      var boundData = ko.dataFor(visibleRows[i]);
+      // Elements that were once filtered out by datatable search does not update when shown again, re-binding fixes this.
+      ko.cleanNode(visibleRows[i]);
+      ko.applyBindings(boundData, visibleRows[i]);
+      if (ko.isObservable(boundData.isVisible)) {
+        ko.dataFor(visibleRows[i]).isVisible(true);
+      }
+    }
   });
   self.columns = ko.observableArray(options.columns);
   self._el = $('table[data-datasource="' + options.el + '"]');

+ 1 - 1
apps/hbase/src/hbase/templates/app.mako

@@ -45,7 +45,7 @@ ${ commonheader(None, "hbase", user) | n,unicode }
   <table data-datasource="${datasource}" class="table table-striped table-condensed datatables tablescroller-disable" style="padding-left: 0;padding-right: 0">
       <thead>
         <tr>
-          <th width="1%"><div data-bind="click: ${datasource}.toggleSelectAll, css: {hueCheckbox: true, 'fa': true, 'fa-check':${datasource}.selected().length == ${datasource}.items().length && ${datasource}.items().length>0}"></div></th>
+          <th width="1%"><div data-bind="click: ${datasource}.toggleSelectAll, css: {hueCheckbox: true, 'fa': true, 'fa-check': ${datasource}.allVisibleSelected() }"></div></th>
           <!-- ko foreach: ${datasource}.columns() -->
             <th data-bind="text:$data"></th> <!-- need to i18n first -->
           <!-- /ko -->