Modified hzSelectAll to watch changes in row length

hzSelectAll run once initially and does not know about new rows that are
added. For tables that require adding or removing of rows, this poses a
significant problem.

To solve this issue, we need to watch the changes made to row. However,
watching the entire collection is also very costly. Instead, we will watch
over the change in row length.

Partially Implemenents: blueprint angularize-identity-tables
Change-Id: I2a6718737b6855181f483fc63d42637a0cec548d

horizon/static/angular/table/table.js

@@ -84,12 +84,11 @@
 
         $scope.updateSelectCount = function(row) {
           if ($scope.selected.hasOwnProperty(row.id)) {
-            var checkedState = $scope.selected[row.id].checked;
-
-            if (checkedState) {
-              $scope.numSelected += 1;
-            } else {
-              $scope.numSelected -= 1;
+            if ($scope.selected[row.id].checked){
+              $scope.numSelected++;
+            }
+            else {
+              $scope.numSelected--;
             }
           }
         };
@@ -105,9 +104,9 @@
           };
 
           if (checkedState && !oldCheckedState) {
-            $scope.numSelected += 1;
+            $scope.numSelected++;
           } else if (!checkedState && oldCheckedState) {
-            $scope.numSelected -= 1;
+            $scope.numSelected--;
           }
         };
       },
@@ -138,7 +137,7 @@
    * ```
    *
    */
-  app.directive('hzSelectAll', function() {
+  app.directive('hzSelectAll', function($timeout) {
     return {
       restrict: 'A',
       require: '^hzTable',
@@ -146,14 +145,21 @@
         rows: '=hzSelectAll'
       },
       link: function(scope, element, attrs, hzTableCtrl) {
-        element.on('click', function() {
-          scope.$apply(function() {
+
+        // select or unselect all
+        function clickHandler() {
+          $timeout(function() {
             var checkedState = element.prop('checked');
             angular.forEach(scope.rows, function(row) {
               hzTableCtrl.select(row, checkedState);
             });
           });
-        });
+        }
+
+        // we need to watch rows so that
+        // new rows are added to the hzTable selected
+        element.click(clickHandler);
+        scope.$watch('rows.length', clickHandler);
       }
     };
   });

horizon/static/angular/table/table.spec.js

@@ -9,7 +9,7 @@ describe('hz.widget.table module', function() {
 
 describe('table directives', function () {
 
-  var $scope, $element;
+  var $scope, $timeout, $element;
 
   beforeEach(module('smart-table'));
   beforeEach(module('hz'));
@@ -18,6 +18,7 @@ describe('table directives', function () {
 
   beforeEach(inject(function($injector) {
     var $compile = $injector.get('$compile');
+    $timeout = $injector.get('$timeout');
     $scope = $injector.get('$rootScope').$new();
 
     $scope.fakeData = [
@@ -27,25 +28,27 @@ describe('table directives', function () {
     ];
 
     var markup =
-      '<table st-table="fakeData" hz-table>' +
-      '<thead><tr>' +
-      '<th><input type="checkbox" hz-select-all="fakeData"' +
-      '           ng-checked="numSelected === fakeData.length"/></th>' +
-      '<th></th>' +
-      '<th>Animal</th>' +
-      '</tr></thead>' +
-      '<tbody>' +
+    '<table st-table="fakeData" hz-table>' +
+    '<thead>' +
+      '<tr>' +
+        '<th><input type="checkbox" hz-select-all="fakeData" ' +
+              'ng-checked="numSelected === fakeData.length"/></th>' +
+        '<th></th>' +
+        '<th>Animal</th>' +
+      '</tr>'+
+    '</thead>' +
+    '<tbody>' +
       '<tr ng-repeat-start="row in fakeData">' +
-      '<td><input type="checkbox" ng-model="selected[row.id].checked"' +
-      '           ng-change="updateSelectCount(row)"/></td>' +
-      '<td><i class="fa fa-chevron-right" hz-expand-detail></i></td>' +
-      '<td>{{ row.animal }}</td>' +
+        '<td><input type="checkbox" ng-model="selected[row.id].checked" ' +
+              'ng-change="updateSelectCount(row)"/></td>' +
+        '<td><i class="fa fa-chevron-right" hz-expand-detail></i></td>' +
+        '<td>{{ row.animal }}</td>' +
       '</tr>' +
       '<tr class="detail-row" ng-repeat-end>' +
-      '<td class="detail" colspan="3"></td>' +
+        '<td class="detail" colspan="3"></td>' +
       '</tr>' +
-      '</tbody>' +
-      '</table>';
+    '</tbody>' +
+    '</table>';
 
     $element = angular.element(markup);
     $compile($element)($scope);
@@ -99,11 +102,10 @@ describe('table directives', function () {
   describe('hzSelectAll directive', function() {
 
     it('should select all checkboxes if select-all checkbox checked', function() {
-      var selectAllCb = $element.find('input[hz-select-all]').first();
-      selectAllCb[0].checked = true;
-      selectAllCb.triggerHandler('click');
-
-      $scope.$digest();
+      var selectAll = $element.find('input[hz-select-all]').first();
+      selectAll[0].checked = true;
+      selectAll.triggerHandler('click');
+      $timeout.flush();
 
       expect($element.scope().numSelected).toBe(3);
       var checkboxes = $element.find('tbody input[type="checkbox"]');