Skip to content

Commit bf0ff7b

Browse files
abkielingabkieling
committed
Fix #494 - pfTableView: Need to be able to not show checkboxes
1 parent 7e787d4 commit bf0ff7b

File tree

5 files changed

+99
-46
lines changed

5 files changed

+99
-46
lines changed

‎src/table/tableview/examples/table-view-basic.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
* <li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
1313
* <li>.onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
1414
* <li>.itemsAvailable - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component.
15+
* <li>.showCheckboxes - (boolean) Show checkboxes for row selection, default is true
1516
* </ul>
1617
* @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
1718
* @param {array} items Array of items to display in the table view.
@@ -37,7 +38,7 @@
3738
<example module="patternfly.tableview.demo">
3839
<file name="index.html">
3940
<div ng-controller="TableCtrl" class="row example-container">
40-
<div class="col-md-12">
41+
<div class="col-md-12" ng-if="showComponent">
4142
<pf-table-view id="exampleTableView"
4243
config="config"
4344
empty-state-config="emptyStateConfig"
@@ -54,6 +55,11 @@
5455
<input type="checkbox" ng-model="config.itemsAvailable">Items Available</input>
5556
</label>
5657
</div>
58+
<div class="form-group">
59+
<label class="checkbox-inline">
60+
<input type="checkbox" ng-model="config.showCheckboxes" ng-change="addNewComponentToDOM()">Show Checkboxes</input>
61+
</label>
62+
</div>
5763
</div>
5864
<hr class="col-md-12">
5965
<div class="col-md-12">
@@ -71,8 +77,8 @@
7177
</file>
7278
7379
<file name="controller.js">
74-
angular.module('patternfly.tableview.demo').controller('TableCtrl', ['$scope', 'itemsService',
75-
function ($scope, itemsService) {
80+
angular.module('patternfly.tableview.demo').controller('TableCtrl', ['$scope', '$timeout', 'itemsService',
81+
function ($scope, $timeout, itemsService) {
7682
$scope.dtOptions = {
7783
order: [[2, "asc"]],
7884
};
@@ -91,7 +97,8 @@
9197
$scope.config = {
9298
onCheckBoxChange: handleCheckBoxChange,
9399
selectionMatchProp: "name",
94-
itemsAvailable: true
100+
itemsAvailable: true,
101+
showCheckboxes: true
95102
};
96103
97104
$scope.emptyStateConfig = {
@@ -158,6 +165,13 @@
158165
}
159166
];
160167
168+
$scope.showComponent = true;
169+
170+
$scope.addNewComponentToDOM = function () {
171+
$scope.showComponent = false;
172+
$timeout(() => $scope.showComponent = true);
173+
};
174+
161175
(function init() {
162176
itemsService.getItems()
163177
.then(items => $scope.items = items);

‎src/table/tableview/examples/table-view-with-toolbar.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
* <li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
1212
* <li>.onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
1313
* <li>.itemsAvailable - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component.
14-
* </ul>
14+
* <li>.showCheckboxes - (boolean) Show checkboxes for row selection, default is true
15+
* </ul>
1516
* @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
1617
* @param {array} items Array of items to display in the table view.
1718
* @param {array} columns Array of table column information to display in the table's header row
@@ -39,7 +40,7 @@
3940
<div class="col-md-12">
4041
<pf-toolbar id="exampleToolbar" config="toolbarConfig"></pf-toolbar>
4142
</div>
42-
<div class="col-md-12">
43+
<div class="col-md-12" ng-if="showComponent">
4344
<pf-table-view config="tableConfig"
4445
empty-state-config="emptyStateConfig"
4546
dt-options="dtOptions"
@@ -62,6 +63,11 @@
6263
<input ng-model="dtOptions.displayLength" ng-disabled="!usePagination" style="width: 24px; padding-left: 6px;"> # Rows Per Page</input>
6364
</label> --!>
6465
</div>
66+
<div class="form-group">
67+
<label class="checkbox-inline">
68+
<input type="checkbox" ng-model="tableConfig.showCheckboxes" ng-change="addNewComponentToDOM()">Show Checkboxes</input>
69+
</label>
70+
</div>
6571
</div>
6672
<hr class="col-md-12">
6773
<div class="col-md-12">
@@ -78,8 +84,8 @@
7884
</file>
7985
8086
<file name="script.js">
81-
angular.module('patternfly.tableview.demo').controller('ViewCtrl', ['$scope', 'pfViewUtils', '$filter',
82-
function ($scope, pfViewUtils, $filter) {
87+
angular.module('patternfly.tableview.demo').controller('ViewCtrl', ['$scope', '$timeout', 'pfViewUtils', '$filter',
88+
function ($scope, $timeout, pfViewUtils, $filter) {
8389
$scope.actionsText = "";
8490
8591
$scope.columns = [
@@ -388,7 +394,8 @@
388394
$scope.tableConfig = {
389395
onCheckBoxChange: handleCheckBoxChange,
390396
selectionMatchProp: "name",
391-
itemsAvailable: true
397+
itemsAvailable: true,
398+
showCheckboxes: true
392399
};
393400
394401
$scope.emptyStateConfig = {
@@ -458,6 +465,13 @@
458465
handleCheckBoxChange();
459466
}
460467
};
468+
469+
$scope.showComponent = true;
470+
471+
$scope.addNewComponentToDOM = function () {
472+
$scope.showComponent = false;
473+
$timeout(() => $scope.showComponent = true);
474+
};
461475
}
462476
]);
463477
</file>

‎src/table/tableview/table-view.component.js‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ angular.module('patternfly.table').component('pfTableView', {
3333

3434
ctrl.defaultConfig = {
3535
selectionMatchProp: 'uuid',
36-
onCheckBoxChange: null
36+
onCheckBoxChange: null,
37+
showCheckboxes: true
3738
};
3839

3940
ctrl.$onInit = function () {
@@ -160,18 +161,22 @@ angular.module('patternfly.table').component('pfTableView', {
160161

161162
function setColumnDefs () {
162163
var i = 0, actnBtns = 1;
163-
var item, prop;
164+
var item, prop, offset;
165+
ctrl.dtColumnDefs = [];
164166

165167
// add checkbox col, not sortable
166-
ctrl.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(i++).notSortable() ];
168+
if (ctrl.config.showCheckboxes) {
169+
ctrl.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i++).notSortable());
170+
}
167171

168172
// add column definitions
169173
_.forEach(ctrl.columns, function (column) {
170174
ctrl.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i++));
171175
});
172176

173-
// Determine selectionMatchProp column number (add 1 due to the checkbox column)
174-
ctrl.selectionMatchPropColNum = _.findIndex(ctrl.columns, ['itemField', ctrl.config.selectionMatchProp]) + 1;
177+
// Determine selectionMatchProp column number (add offset due to the checkbox column)
178+
offset = ctrl.config.showCheckboxes ? 1 : 0;
179+
ctrl.selectionMatchPropColNum = _.findIndex(ctrl.columns, ['itemField', ctrl.config.selectionMatchProp]) + offset;
175180

176181
// add actions col.
177182
if (ctrl.actionButtons && ctrl.actionButtons.length > 0) {
@@ -234,43 +239,45 @@ angular.module('patternfly.table').component('pfTableView', {
234239
}
235240

236241
function selectRowsByChecked () {
237-
$timeout(function () {
238-
var oTable, rows, checked;
242+
if (ctrl.config.showCheckboxes) {
243+
$timeout(function () {
244+
var oTable, rows, checked;
239245

240-
oTable = ctrl.dtInstance.DataTable;
246+
oTable = ctrl.dtInstance.DataTable;
241247

242-
if (ctrl.debug) {
243-
$log.debug(" selectRowsByChecked");
244-
}
248+
if (ctrl.debug) {
249+
$log.debug(" selectRowsByChecked");
250+
}
245251

246-
if (angular.isUndefined(oTable)) {
247-
return;
248-
}
252+
if (angular.isUndefined(oTable)) {
253+
return;
254+
}
249255

250-
if (ctrl.debug) {
251-
$log.debug(" ...oTable defined");
252-
}
256+
if (ctrl.debug) {
257+
$log.debug(" ...oTable defined");
258+
}
253259

254-
// deselect all
255-
rows = oTable.rows();
256-
rows.deselect();
260+
// deselect all
261+
rows = oTable.rows();
262+
rows.deselect();
257263

258-
// select those with checked checkboxes
259-
rows = oTable.rows( function ( idx, data, node ) {
260-
// row td input type=checkbox
261-
checked = node.children[0].children[0].checked;
262-
return checked;
263-
});
264+
// select those with checked checkboxes
265+
rows = oTable.rows( function ( idx, data, node ) {
266+
// row td input type=checkbox
267+
checked = node.children[0].children[0].checked;
268+
return checked;
269+
});
264270

265-
if (ctrl.debug) {
266-
$log.debug(" ... #checkedRows = " + rows[0].length);
267-
}
271+
if (ctrl.debug) {
272+
$log.debug(" ... #checkedRows = " + rows[0].length);
273+
}
268274

269-
if (rows[0].length > 0) {
270-
rows.select();
271-
}
272-
setSelectAllCheckbox();
273-
});
275+
if (rows[0].length > 0) {
276+
rows.select();
277+
}
278+
setSelectAllCheckbox();
279+
});
280+
}
274281
}
275282

276283
function setSelectAllCheckbox () {

‎src/table/tableview/table-view.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@
44
class="table-view-container table table-striped table-bordered table-hover dataTable">
55
<thead>
66
<tr role="row">
7-
<th class="table-view-pf-select"><input type="checkbox" value="$ctrl.selectAll" ng-model="$ctrl.selectAll" ng-change="$ctrl.toggleAll()"/></th>
7+
<th class="table-view-pf-select" ng-if="$ctrl.config.showCheckboxes">
8+
<input type="checkbox" value="$ctrl.selectAll" ng-model="$ctrl.selectAll" ng-change="$ctrl.toggleAll()"/>
9+
</th>
810
<th ng-repeat="col in $ctrl.columns">{{col.header}}</th>
911
<th ng-if="$ctrl.areActions()" colspan="{{$ctrl.calcActionsColspan()}}">Actions</th>
1012
</tr>
1113
</thead>
1214
<tbody>
1315
<tr role="row" ng-repeat="item in $ctrl.items track by $index">
14-
<td class="table-view-pf-select">
16+
<td class="table-view-pf-select" ng-if="$ctrl.config.showCheckboxes">
1517
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-change="$ctrl.toggleOne(item)"/>
1618
</td>
1719
<td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">{{ value }}</td>

‎test/table/tableview/table-view.spec.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,23 @@ describe('Component: pfTableView', function () {
6868

6969
it('should show the correct number of items', function () {
7070
var rows = element.find('.table > tbody > tr');
71-
expect(rows.length).toBe(5);
71+
expect(rows.length).toBe($scope.items.length);
72+
});
73+
74+
it('should show checkboxes for row selection', function () {
75+
var headerCheckbox = element.find('.table > thead > tr > th > input[type="checkbox"]');
76+
var bodyCheckboxes = element.find('.table > tbody > tr > td > input[type="checkbox"]');
77+
expect(headerCheckbox.length).toBe(1);
78+
expect(bodyCheckboxes.length).toBe($scope.items.length);
79+
});
80+
81+
it('should not show checkboxes for row selection when "showCheckboxes" is false', function () {
82+
$scope.config.showCheckboxes = false;
83+
$scope.$digest();
84+
var headerCheckbox = element.find('.table > thead > tr > th > input[type="checkbox"]');
85+
var bodyCheckboxes = element.find('.table > tbody > tr > td > input[type="checkbox"]');
86+
expect(headerCheckbox.length).toBe(0);
87+
expect(bodyCheckboxes.length).toBe(0);
7288
});
7389

7490
});

0 commit comments

Comments
 (0)