소스 검색

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
3개의 변경된 파일47개의 추가작업 그리고 9개의 파일을 삭제
  1. 33 8
      apps/hbase/src/hbase/static/hbase/js/base.js
  2. 13 0
      apps/hbase/src/hbase/static/hbase/js/controls.js
  3. 1 1
      apps/hbase/src/hbase/templates/app.mako

+ 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 -->