openstack/deb-horizon
Code Issues Proposed changes

Merge "Tablecontroller should use ctrl instead of scope"

Browse Source
This commit is contained in:
Jenkins 2016-02-20 03:19:26 +00:00 committed by Gerrit Code Review
commit 7eefbf6e08
10 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
horizon/static/framework/widgets/action-list/actions-delete-selected.template.html
View File

@ -1,6 +1,6 @@
<action action-classes="'btn btn-danger'"
disabled="numSelected === 0"
item="selected">
disabled="tCtrl.numSelected === 0"
item="tCtrl.selections">
<span class="fa fa-remove"></span>
$text$
</action>

6
horizon/static/framework/widgets/table/hz-select-all.directive.js
View File

@ -34,7 +34,7 @@
*
* Define a `ng-model` attribute on the individual row checkboxes
* so that they will be updated when the select all checkbox is
* clicked. The `hzTable` controller provides a `selected` object
* clicked. The `hzTable` controller `tCtrl` provides a `selections` object
* which stores the checked state of the row.
*
* @restrict A
@ -51,7 +51,7 @@
* <tr ng-repeat="row in displayedCollection">
* <td>
* <input type='checkbox' hz-select='row'
* ng-model='selected[row.id].checked'/>
* ng-model='tCtrl.selections[row.id].checked'/>
* </td>
* </tr>
* </tbody>
@ -113,7 +113,7 @@
angular.forEach(scope.rows, function(row) {
var selected = hzTableCtrl.isSelected(row);
if (selected !== checkedState) {
hzTableCtrl.select(row, checkedState);
hzTableCtrl.toggleSelect(row, checkedState);
}
});
});

2
horizon/static/framework/widgets/table/hz-select.directive.js
View File

@ -62,7 +62,7 @@
scope.$apply(function() {
scope.$evalAsync(function() {
var checkedState = element.prop('checked');
hzTableCtrl.select(scope.row, checkedState, true);
hzTableCtrl.toggleSelect(scope.row, checkedState, true);
});
});
}

2
horizon/static/framework/widgets/table/hz-table.directive.js
View File

@ -53,7 +53,7 @@
* <tr ng-repeat="row in displayedCollection">
* <td>
* <input type='checkbox' hz-select='row'
* ng-model='selected[row.id].checked'/>
* ng-model='tCtrl.selections[row.id].checked'/>
* </td>
* <td>Foo</td>
* </tr>

25
horizon/static/framework/widgets/table/table.controller.js
View File

@ -25,6 +25,11 @@
* @ngdoc controller
* @name horizon.framework.widgets.table.controller:TableController
* @description Controller used by `hzTable`
* This controller extends the Smart-Table module to provide support for
* saving the checkbox selection state of each row in the table.
* The states are stored in `selections` property and is accessible through
* the controller.
*
* Note that clearSelected is private and event driven.
* To clear all of the selected checkboxes after an action, such as
* delete, emit the event `hzTable:clearSelected` from your table
@ -34,7 +39,7 @@
var ctrl = this;
ctrl.isSelected = isSelected;
ctrl.select = select;
ctrl.toggleSelect = toggleSelect;
clearSelected();
@ -51,30 +56,28 @@
* return true if the row is selected
*/
function isSelected(row) {
var rowState = $scope.selected[row.id];
var rowState = ctrl.selections[row.id];
return angular.isDefined(rowState) && rowState.checked;
}
function clearSelected() {
/*eslint-disable angular/controller-as */
$scope.selected = {};
$scope.numSelected = 0;
/*eslint-enable angular/controller-as */
ctrl.selections = {};
ctrl.numSelected = 0;
}
/*
* set the row selection state
* Toggle the row selection state
*/
function select(row, checkedState, broadcast) {
$scope.selected[row.id] = {
function toggleSelect(row, checkedState, broadcast) {
ctrl.selections[row.id] = {
checked: checkedState,
item: row
};
if (checkedState) {
$scope.numSelected++;
ctrl.numSelected++;
} else {
$scope.numSelected--;
ctrl.numSelected--;
}
if (broadcast) {

2
horizon/static/framework/widgets/table/table.mock.html
View File

@ -8,7 +8,7 @@
</thead>
<tbody>
<tr ng-repeat-start="row in fakeData">
<td><input type="checkbox" hz-select="row" ng-model="selected[row.id].checked"></td>
<td><input type="checkbox" hz-select="row" ng-model="tCtrl.selections[row.id].checked"></td>
<td><span class="fa fa-chevron-right" hz-expand-detail></span></td>
<td>{{ row.animal }}</td>
</tr>

35
horizon/static/framework/widgets/table/table.spec.js
View File

@ -81,20 +81,20 @@
/*eslint-disable angular/ng_controller_name */
var hzTableCtrl = $element.controller('hzTable');
var firstRow = $scope.safeFakeData[0];
hzTableCtrl.select(firstRow, true);
hzTableCtrl.toggleSelect(firstRow, true);
/*eslint-enable angular/ng_controller_name */
var hzTableScope = $element.scope();
expect(hzTableScope.selected[firstRow.id]).toBeDefined();
expect(hzTableScope.numSelected).toBe(1);
expect(hzTableCtrl.selections[firstRow.id]).toBeDefined();
expect(hzTableCtrl.numSelected).toBe(1);
});
});
describe('hzSelect directive', function() {
var checkboxes;
var checkboxes, hzTableCtrl;
beforeEach(function() {
checkboxes = $element.find('input[hz-select]');
hzTableCtrl = $element.controller('hzTable');
});
it('should have numSelected === 1 when first checkbox is clicked', function() {
@ -102,7 +102,7 @@
checkbox[0].checked = true;
checkbox.triggerHandler('click');
expect($element.scope().numSelected).toBe(1);
expect(hzTableCtrl.numSelected).toBe(1);
});
it('should have numSelected === 0 when first checkbox is clicked, then unclicked',
@ -111,12 +111,12 @@
checkbox[0].checked = true;
checkbox.triggerHandler('click');
expect($element.scope().numSelected).toBe(1);
expect(hzTableCtrl.numSelected).toBe(1);
checkbox[0].checked = false;
checkbox.triggerHandler('click');
expect($element.scope().numSelected).toBe(0);
expect(hzTableCtrl.numSelected).toBe(0);
}
);
@ -126,7 +126,7 @@
angular.element(checkbox).triggerHandler('click');
});
expect($element.scope().numSelected).toBe(3);
expect(hzTableCtrl.numSelected).toBe(3);
expect($element.find('input[hz-select-all]')[0].checked).toBe(true);
});
@ -138,7 +138,7 @@
});
// all checkboxes selected so check-all should be checked
expect($element.scope().numSelected).toBe(3);
expect(hzTableCtrl.numSelected).toBe(3);
expect($element.find('input[hz-select-all]')[0].checked).toBe(true);
// deselect one checkbox
@ -147,7 +147,7 @@
firstCheckbox.triggerHandler('click');
// check-all should be unchecked
expect($element.scope().numSelected).toBe(2);
expect(hzTableCtrl.numSelected).toBe(2);
expect($element.find('input[hz-select-all]')[0].checked).toBe(false);
}
);
@ -155,6 +155,11 @@
describe('hzSelectAll directive', function() {
var hzTableCtrl;
beforeEach(function() {
hzTableCtrl = $element.controller('hzTable');
});
it('should not be selected if there are no rows in the table', function() {
var selectAll = $element.find('input[hz-select-all]').first();
@ -170,7 +175,7 @@
selectAll[0].checked = true;
selectAll.triggerHandler('click');
expect($element.scope().numSelected).toBe(3);
expect(hzTableCtrl.numSelected).toBe(3);
var checkboxes = $element.find('tbody input[hz-select]');
angular.forEach(checkboxes, function(checkbox) {
expect(checkbox.checked).toBe(true);
@ -184,7 +189,7 @@
var checkboxes = $element.find('tbody input[hz-select]');
expect($element.scope().numSelected).toBe(3);
expect(hzTableCtrl.numSelected).toBe(3);
angular.forEach(checkboxes, function(checkbox) {
expect(checkbox.checked).toBe(true);
});
@ -192,7 +197,7 @@
selectAll[0].checked = false;
selectAll.triggerHandler('click');
expect($element.scope().numSelected).toBe(0);
expect(hzTableCtrl.numSelected).toBe(0);
angular.forEach(checkboxes, function(checkbox) {
expect(checkbox.checked).toBe(false);
});
@ -209,7 +214,7 @@
selectAll[0].checked = true;
selectAll.triggerHandler('click');
expect($element.scope().numSelected).toBe(3);
expect(hzTableCtrl.numSelected).toBe(3);
var checkboxes = $element.find('tbody input[hz-select]');
angular.forEach(checkboxes, function(checkbox) {
expect(checkbox.checked).toBe(true);

2
openstack_dashboard/dashboards/admin/static/dashboard/admin/flavors/table/flavors-table.html
View File

@ -37,7 +37,7 @@
<tr ng-repeat="flavor in table.iflavors track by flavor.id">
<td class="select-col">
<input type="checkbox"
ng-model="selected[flavor.id].checked"
ng-model="tCtrl.selections[flavor.id].checked"
hz-select="flavor">
</td>
<td class="rsp-p1">{$ flavor.name $}</td>

2
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table.html
View File

@ -49,7 +49,7 @@
ng-class="{'st-selected': checked[user.id]}">
<td class="select-col">
<input type="checkbox" ng-model="selected[user.id].checked" hz-select="user">
<input type="checkbox" ng-model="tCtrl.selections[user.id].checked" hz-select="user">
</td>
<td class="expander">
<span class="fa fa-chevron-right" hz-expand-detail duration="200"></span>

2
openstack_dashboard/static/app/core/images/table/images-table.html
View File

@ -58,7 +58,7 @@
<td class="select-col">
<input type="checkbox"
ng-model="selected[image.id].checked"
ng-model="tCtrl.selections[image.id].checked"
hz-select="image">
</td>
<td class="expander">