Skip to content

Commit 7b4e637

Browse files
dtaylor113dtaylor113
committed
pfTableView: Updated pfToolbar example to switch to 'table view'
1 parent 0a9afa1 commit 7b4e637

File tree

3 files changed

+253
-75
lines changed

3 files changed

+253
-75
lines changed

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

Lines changed: 151 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
</pf-table-view>
3030
</div>
3131
<div class="col-md-12">
32-
<br>
33-
<form role="form">
32+
<!-- issues dynamically turning on/off pagination after table instanciated.
33+
form role="form">
3434
<div class="form-group">
3535
<label class="checkbox-inline">
3636
<input type="checkbox" ng-model="usePagination" ng-change="togglePagination()">Use Pagination</input>
@@ -39,7 +39,7 @@
3939
<input ng-model="dtOptions.displayLength" ng-disabled="!usePagination" style="width: 24px; padding-left: 6px;"> # Rows Per Page</input>
4040
</label>
4141
</div>
42-
</form>
42+
</form --!>
4343
</div>
4444
<div class="col-md-12">
4545
<label style="font-weight:normal;vertical-align:center;">Events: </label>
@@ -56,12 +56,17 @@
5656
function ($scope) {
5757
$scope.dtOptions = {
5858
paginationType: 'full',
59+
displayLength: 3,
5960
order: [[2, "asc"]],
60-
dom: "t"
61+
dom: "tp"
6162
};
6263
64+
// attempt to dyamically turn on/off pagination controls
65+
// See: issues turning on/off pagination. see: https://datatables.net/manual/tech-notes/3
66+
6367
$scope.usePagination = false;
6468
$scope.togglePagination = function () {
69+
console.log("---> togglePagination: " + $scope.usePagination);
6570
if($scope.usePagination) {
6671
$scope.dtOptions.displayLength = 3;
6772
$scope.dtOptions.dom = "tp";
@@ -205,13 +210,17 @@ angular.module('patternfly.table').component('pfTableView', {
205210
templateUrl: 'table/tableview/table-view.html',
206211
controller: function (DTOptionsBuilder, DTColumnDefBuilder, $element, pfUtils, $log, $filter, $timeout) {
207212
'use strict';
208-
var ctrl = this, prevDtOptions;
213+
var ctrl = this, prevDtOptions, prevItems;
214+
215+
// Once datatables is out of active development I'll remove log statements
216+
ctrl.debug = true;
209217

210218
ctrl.selectAll = false;
211219
ctrl.dtInstance = {};
212220

213221
ctrl.defaultDtOptions = {
214222
autoWidth: false,
223+
destroy: true,
215224
order: [[1, "asc"]],
216225
dom: "t",
217226
select: {
@@ -226,18 +235,37 @@ angular.module('patternfly.table').component('pfTableView', {
226235
};
227236

228237
ctrl.$onInit = function () {
229-
ctrl.updateAll();
238+
239+
if (ctrl.debug) {
240+
$log.debug("$onInit");
241+
}
242+
243+
if (angular.isUndefined(ctrl.dtOptions)) {
244+
ctrl.dtOptions = {};
245+
}
246+
if (angular.isUndefined(ctrl.config)) {
247+
ctrl.config = {};
248+
}
249+
250+
ctrl.updateConfigOptions();
251+
252+
setColumnDefs();
230253
};
231254

232-
ctrl.updateAll = function () {
255+
ctrl.updateConfigOptions = function () {
233256
var col, props = "";
234257

235-
if (angular.isDefined(ctrl.dtOptions.displayLength)) {
258+
if (ctrl.debug) {
259+
$log.debug(" updateConfigOptions");
260+
}
261+
262+
if (angular.isDefined(ctrl.dtOptions) && angular.isDefined(ctrl.dtOptions.displayLength)) {
236263
ctrl.dtOptions.displayLength = Number(ctrl.dtOptions.displayLength);
237264
}
238265

239-
// Need to deep watch changes in dtOptions
266+
// Need to deep watch changes in dtOptions and items
240267
prevDtOptions = angular.copy(ctrl.dtOptions);
268+
prevItems = angular.copy(ctrl.items);
241269

242270
// Setting bound variables to new variables loses it's one way binding
243271
// ctrl.dtOptions = pfUtils.merge(ctrl.defaultDtOptions, ctrl.dtOptions);
@@ -262,41 +290,65 @@ angular.module('patternfly.table').component('pfTableView', {
262290
"' does not match any property in 'config.colummns'! Please set config.selectionMatchProp " +
263291
"to one of these properties: " + props);
264292
}
293+
};
265294

266-
setColumnDefs();
295+
ctrl.dtInstanceCallback = function (_dtInstance) {
296+
var oTable, rows;
297+
if (ctrl.debug) {
298+
$log.debug("--> dtInstanceCallback");
299+
}
300+
301+
ctrl.dtInstance = _dtInstance;
302+
listenForDraw();
303+
selectRowsByChecked();
267304
};
268305

269306
ctrl.$onChanges = function (changesObj) {
270-
ctrl.updateAll();
307+
if (ctrl.debug) {
308+
$log.debug("$onChanges");
309+
}
310+
if ((changesObj.config && !changesObj.config.isFirstChange()) ) {
311+
if (ctrl.debug) {
312+
$log.debug("...updateConfigOptions");
313+
}
314+
ctrl.updateConfigOptions();
315+
}
271316
};
272317

273318
ctrl.$doCheck = function () {
274-
// do a deep compare on data
319+
if (ctrl.debug) {
320+
$log.debug("$doCheck");
321+
}
322+
// do a deep compare on dtOptions and items
275323
if (!angular.equals(ctrl.dtOptions, prevDtOptions)) {
276-
ctrl.updateAll();
324+
if (ctrl.debug) {
325+
$log.debug(" dtOptions !== prevDtOptions");
326+
}
327+
ctrl.updateConfigOptions();
328+
}
329+
if (!angular.equals(ctrl.items, prevItems)) {
330+
if (ctrl.debug) {
331+
$log.debug(" items !== prevItems");
332+
}
333+
prevItems = angular.copy(ctrl.items);
334+
//$timeout(function () {
335+
selectRowsByChecked();
336+
//});
277337
}
278338
};
279339

280-
ctrl.dtInstanceCallback = function (_dtInstance) {
281-
var oTable, rows;
282-
283-
ctrl.dtInstance = _dtInstance;
284-
listenForDraw();
285-
selectRowsByChecked();
340+
ctrl.$postLink = function () {
341+
if (ctrl.debug) {
342+
$log.debug(" $postLink");
343+
}
286344
};
287345

288-
function validSelectionMatchProp () {
289-
var retVal = false, prop;
290-
var item = ctrl.items[0];
291-
for (prop in item) {
292-
if (item.hasOwnProperty(prop)) { //need this 'if' for eslint
293-
if (ctrl.config.selectionMatchProp === prop) {
294-
retVal = true;
295-
}
296-
}
346+
ctrl.$onDestroy = function () {
347+
if (ctrl.debug) {
348+
$log.debug(" $onDestroy");
297349
}
298-
return retVal;
299-
}
350+
ctrl.dtInstance = {};
351+
};
300352

301353
function setColumnDefs () {
302354
var i = 0, actnBtns = 1;
@@ -333,13 +385,26 @@ angular.module('patternfly.table').component('pfTableView', {
333385
oTable = dtInstance.dataTable;
334386
ctrl.tableId = oTable[0].id;
335387
oTable.on('draw.dt', function () {
336-
$timeout(function () {
337-
selectRowsByChecked();
338-
});
388+
if (ctrl.debug) {
389+
$log.debug("--> redraw");
390+
}
391+
selectRowsByChecked();
339392
});
340393
}
341394
}
342395

396+
function validSelectionMatchProp () {
397+
var retVal = false, prop;
398+
var item = ctrl.items[0];
399+
for (prop in item) {
400+
if (item.hasOwnProperty(prop)) { //need this 'if' for eslint
401+
if (ctrl.config.selectionMatchProp === prop) {
402+
retVal = true;
403+
}
404+
}
405+
}
406+
return retVal;
407+
}
343408
/*
344409
* Checkbox Selections
345410
*/
@@ -356,18 +421,12 @@ angular.module('patternfly.table').component('pfTableView', {
356421
}
357422
}
358423
});
359-
$timeout(function () {
360-
selectRowsByChecked();
361-
});
362424
};
363425

364426
ctrl.toggleOne = function (item) {
365427
if (ctrl.config && ctrl.config.onCheckBoxChange) {
366428
ctrl.config.onCheckBoxChange(item);
367429
}
368-
$timeout(function () {
369-
setSelectAllCheckbox();
370-
});
371430
};
372431

373432
function getItemFromRow (matchPropValue) {
@@ -384,29 +443,55 @@ angular.module('patternfly.table').component('pfTableView', {
384443
}
385444

386445
function selectRowsByChecked () {
387-
var oTable, rows, checked;
388-
oTable = ctrl.dtInstance.DataTable;
389-
390-
// deselect all
391-
rows = oTable.rows();
392-
rows.deselect();
393-
394-
// select those with checked checkboxes
395-
rows = oTable.rows( function ( idx, data, node ) {
396-
// row td input type=checkbox
397-
checked = node.children[0].children[0].checked;
398-
return checked;
399-
});
400-
rows.select();
446+
$timeout(function () {
447+
var oTable, rows, checked;
401448

402-
setSelectAllCheckbox();
449+
oTable = ctrl.dtInstance.DataTable;
450+
451+
if (ctrl.debug) {
452+
$log.debug(" selectRowsByChecked");
453+
}
454+
455+
if (angular.isUndefined(oTable)) {
456+
return;
457+
}
458+
459+
if (ctrl.debug) {
460+
$log.debug(" ...oTable defined");
461+
}
462+
463+
// deselect all
464+
rows = oTable.rows();
465+
rows.deselect();
466+
467+
// select those with checked checkboxes
468+
rows = oTable.rows( function ( idx, data, node ) {
469+
// row td input type=checkbox
470+
checked = node.children[0].children[0].checked;
471+
return checked;
472+
});
473+
474+
if (ctrl.debug) {
475+
$log.debug(" ... #checkedRows = " + rows[0].length);
476+
}
477+
478+
if (rows[0].length > 0) {
479+
rows.select();
480+
}
481+
setSelectAllCheckbox();
482+
});
403483
}
404484

405485
function setSelectAllCheckbox () {
406-
var numVisibleRows = getVisibleRows().length;
407-
var numCheckedRows = document.querySelectorAll("#" + ctrl.tableId + " tbody tr.even.selected").length +
408-
document.querySelectorAll("#" + ctrl.tableId + " tbody tr.odd.selected").length;
409-
// set selectAll checkbox
486+
var numVisibleRows, numCheckedRows;
487+
488+
if (ctrl.debug) {
489+
$log.debug(" setSelectAllCheckbox");
490+
}
491+
492+
numVisibleRows = getVisibleRows().length;
493+
numCheckedRows = document.querySelectorAll("#" + ctrl.tableId + " tbody tr.even.selected").length +
494+
document.querySelectorAll("#" + ctrl.tableId + " tbody tr.odd.selected").length;
410495
ctrl.selectAll = (numVisibleRows === numCheckedRows);
411496
}
412497

@@ -420,9 +505,16 @@ angular.module('patternfly.table').component('pfTableView', {
420505
var oTable = ctrl.dtInstance.dataTable;
421506

422507
var anNodes = document.querySelectorAll("#" + ctrl.tableId + " tbody tr");
508+
423509
for (i = 0; i < anNodes.length; ++i) {
424510
rowData = oTable.fnGetData(anNodes[i]);
425-
visibleRows.push( rowData[ ctrl.selectionMatchPropColNum ] );
511+
if (rowData !== null) {
512+
visibleRows.push(rowData[ctrl.selectionMatchPropColNum]);
513+
}
514+
}
515+
516+
if (ctrl.debug) {
517+
$log.debug(" getVisibleRows (" + visibleRows.length + ")");
426518
}
427519

428520
return visibleRows;

0 commit comments

Comments
 (0)