Skip to content

Commit 07ec6d3

Browse files
dtaylor113cdcabrera
dtaylor113
authored and
cdcabrera
committed
feat(Pagination): Added pagination controls to List and Card views. (#574)
1 parent cf207ff commit 07ec6d3

File tree

12 files changed

+788
-69
lines changed

12 files changed

+788
-69
lines changed

‎src/filters/simple-filter/filter-fields-component.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ angular.module('patternfly.filters').component('pfFilterFields', {
8888
if (keyEvent.which === 13) {
8989
ctrl.addFilterFn(ctrl.currentField, ctrl.currentValue);
9090
ctrl.currentValue = undefined;
91+
keyEvent.stopPropagation();
92+
keyEvent.preventDefault();
9193
}
9294
}
9395

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

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ angular.module('patternfly.table').component('pfTableView', {
1414
templateUrl: 'table/tableview/table-view.html',
1515
controller: function (DTOptionsBuilder, DTColumnDefBuilder, $element, pfUtils, $log, $filter, $timeout, $sce) {
1616
'use strict';
17-
var ctrl = this, prevDtOptions, prevItems;
17+
var ctrl = this, prevDtOptions, prevItems, prevPageConfig;
1818

1919
// Once datatables is out of active development I'll remove log statements
2020
ctrl.debug = false;
@@ -40,16 +40,7 @@ angular.module('patternfly.table').component('pfTableView', {
4040
showCheckboxes: true
4141
};
4242

43-
ctrl.$onInit = function () {
44-
45-
if (ctrl.debug) {
46-
$log.debug("$onInit");
47-
}
48-
49-
if (angular.isDefined(ctrl.colummns) && angular.isUndefined(ctrl.columns)) {
50-
ctrl.columns = ctrl.colummns;
51-
}
52-
43+
function setPagination () {
5344
if (angular.isUndefined(ctrl.dtOptions)) {
5445
ctrl.dtOptions = {};
5546
} else {
@@ -59,16 +50,16 @@ angular.module('patternfly.table').component('pfTableView', {
5950
if (angular.isUndefined(ctrl.pageConfig)) {
6051
ctrl.pageConfig = {};
6152
}
62-
if (angular.isUndefined(ctrl.pageConfig.pageNumber)) {
53+
if (!angular.isNumber(ctrl.pageConfig.pageNumber)) {
6354
ctrl.pageConfig.pageNumber = 1;
6455
}
6556
}
66-
if (angular.isDefined(ctrl.dtOptions.displayLength)) {
57+
if (angular.isNumber(ctrl.dtOptions.displayLength)) {
6758
ctrl.dtOptions.paging = true;
6859
if (angular.isUndefined(ctrl.pageConfig)) {
6960
ctrl.pageConfig = {};
7061
}
71-
if (angular.isUndefined(ctrl.pageConfig.pageSize)) {
62+
if (!angular.isNumber(ctrl.pageConfig.pageSize)) {
7263
ctrl.pageConfig.pageSize = ctrl.dtOptions.displayLength;
7364
}
7465
}
@@ -92,6 +83,17 @@ angular.module('patternfly.table').component('pfTableView', {
9283
ctrl.pageConfig.pageNumber = 1;
9384
}
9485
}
86+
}
87+
88+
ctrl.$onInit = function () {
89+
90+
if (ctrl.debug) {
91+
$log.debug("$onInit");
92+
}
93+
94+
if (angular.isDefined(ctrl.colummns) && angular.isUndefined(ctrl.columns)) {
95+
ctrl.columns = ctrl.colummns;
96+
}
9597

9698
if (angular.isUndefined(ctrl.config)) {
9799
ctrl.config = {};
@@ -103,19 +105,22 @@ angular.module('patternfly.table').component('pfTableView', {
103105
};
104106

105107
ctrl.updateConfigOptions = function () {
106-
var col, props = "";
108+
var props = "";
107109

108110
if (ctrl.debug) {
109111
$log.debug(" updateConfigOptions");
110112
}
111113

114+
setPagination();
115+
112116
if (angular.isDefined(ctrl.dtOptions) && angular.isDefined(ctrl.dtOptions.displayLength)) {
113117
ctrl.dtOptions.displayLength = Number(ctrl.dtOptions.displayLength);
114118
}
115119

116120
// Need to deep watch changes in dtOptions and items
117121
prevDtOptions = angular.copy(ctrl.dtOptions);
118122
prevItems = angular.copy(ctrl.items);
123+
prevPageConfig = angular.copy(ctrl.pageConfig);
119124

120125
// Setting bound variables to new variables loses it's one way binding
121126
// ctrl.dtOptions = pfUtils.merge(ctrl.defaultDtOptions, ctrl.dtOptions);
@@ -143,7 +148,6 @@ angular.module('patternfly.table').component('pfTableView', {
143148
};
144149

145150
ctrl.dtInstanceCallback = function (_dtInstance) {
146-
var oTable, rows;
147151
if (ctrl.debug) {
148152
$log.debug("--> dtInstanceCallback");
149153
}
@@ -188,7 +192,8 @@ angular.module('patternfly.table').component('pfTableView', {
188192
$log.debug("$doCheck");
189193
}
190194
// do a deep compare on dtOptions and items
191-
if (!angular.equals(ctrl.dtOptions, prevDtOptions)) {
195+
if (!angular.equals(ctrl.dtOptions, prevDtOptions) ||
196+
!angular.equals(ctrl.pageConfig, prevPageConfig)) {
192197
if (ctrl.debug) {
193198
$log.debug(" dtOptions !== prevDtOptions");
194199
}
@@ -223,7 +228,7 @@ angular.module('patternfly.table').component('pfTableView', {
223228

224229
function setColumnDefs () {
225230
var i = 0, actnBtns = 1;
226-
var item, prop, offset;
231+
var offset;
227232
ctrl.dtColumnDefs = [];
228233

229234
// add checkbox col, not sortable
@@ -368,7 +373,6 @@ angular.module('patternfly.table').component('pfTableView', {
368373
// returns ['Mary Jane', 'Fred Flinstone', 'Frank Livingston']
369374
//
370375
var i, rowData, visibleRows = new Array();
371-
var oTable = ctrl.dtInstance.dataTable;
372376

373377
var anNodes = document.querySelectorAll("#" + ctrl.tableId + " tbody tr");
374378

@@ -455,7 +459,8 @@ angular.module('patternfly.table').component('pfTableView', {
455459
});
456460
};
457461

458-
ctrl.checkDisabled = function (item) {
462+
ctrl.checkDisabled = function () {
463+
//TODO: implement checkDisabled
459464
return false;
460465
};
461466

‎src/toolbars/examples/toolbar.js‎

Lines changed: 54 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,9 @@
8080
</actions>
8181
</pf-toolbar>
8282
</div>
83-
<div class="col-md-12" ng-if="viewType == 'listView'">
83+
<div class="col-md-12" ng-if="viewType == 'listView' && showComponent">
8484
<pf-list-view config="listConfig"
85+
page-config="pageConfig"
8586
items="items"
8687
empty-state-config="emptyStateConfig">
8788
<div class="list-view-pf-description">
@@ -102,8 +103,9 @@
102103
</div>
103104
</pf-list-view>
104105
</div>
105-
<div class="col-md-12" ng-if="viewType == 'cardView'">
106+
<div class="col-md-12" ng-if="viewType == 'cardView' && showComponent">
106107
<pf-card-view config="listConfig"
108+
page-config="pageConfig"
107109
items="items"
108110
empty-state-config="emptyStateConfig">
109111
<div class="col-md-12">
@@ -117,8 +119,9 @@
117119
</div>
118120
</pf-card-view>
119121
</div>
120-
<div class="col-md-12" ng-if="viewType == 'tableView'">
122+
<div class="col-md-12" ng-if="viewType == 'tableView' && showComponent">
121123
<pf-table-view config="tableConfig"
124+
page-config="pageConfig"
122125
columns="columns"
123126
items="items"
124127
empty-state-config="emptyStateConfig">
@@ -130,6 +133,9 @@
130133
<label class="checkbox-inline">
131134
<input type="checkbox" ng-model="listConfig.itemsAvailable" ng-change="updateItemsAvailable()">Items Available</input>
132135
</label>
136+
<label class="checkbox-inline">
137+
<input type="checkbox" ng-model="showPagination" ng-change="togglePagination()">Show Pagination</input>
138+
</label>
133139
</div>
134140
</div>
135141
<div class="col-md-12">
@@ -152,9 +158,10 @@
152158
</file>
153159
154160
<file name="script.js">
155-
angular.module('patternfly.toolbars.demo').controller('ViewCtrl', ['$scope', 'pfViewUtils', '$filter',
156-
function ($scope, pfViewUtils, $filter) {
161+
angular.module('patternfly.toolbars.demo').controller('ViewCtrl', ['$scope', '$timeout', 'pfViewUtils', '$filter',
162+
function ($scope, $timeout, pfViewUtils, $filter) {
157163
$scope.filtersText = '';
164+
$scope.showPagination = false;
158165
159166
$scope.columns = [
160167
{ header: "Name", itemField: "name" },
@@ -163,23 +170,6 @@
163170
{ header: "BirthMonth", itemField: "birthMonth"}
164171
];
165172
166-
// attempt to dyamically turn on/off pagination controls
167-
// See: issues turning on/off pagination. see: https://datatables.net/manual/tech-notes/3
168-
169-
$scope.usePagination = true;
170-
$scope.togglePagination = function () {
171-
$scope.usePagination = !$scope.usePagination;
172-
console.log("---> togglePagination: " + $scope.usePagination);
173-
if($scope.usePagination) {
174-
$scope.dtOptions.displayLength = 3;
175-
$scope.dtOptions.dom = "tp";
176-
console.log("---> use pagination: " + $scope.dtOptions.displayLength + ":" + $scope.dtOptions.dom);
177-
} else {
178-
$scope.dtOptions.displayLength = undefined;
179-
$scope.dtOptions.dom = "t";
180-
}
181-
};
182-
183173
$scope.allItems = [
184174
{
185175
name: "Fred Flintstone",
@@ -228,6 +218,30 @@
228218
age: 34,
229219
address: "21 Jump Street, Hollywood, California",
230220
birthMonth: 'March'
221+
},
222+
{
223+
name: "Chris Thomas",
224+
age: 21,
225+
address: "50 Second Street, New York, New York",
226+
birthMonth: 'April'
227+
},
228+
{
229+
name: "Jeff McGovern",
230+
age: 30,
231+
address: "22 Oak Stree, Denver, Colorado",
232+
birthMonth: 'November'
233+
},
234+
{
235+
name: "Jessica Brown",
236+
age: 50,
237+
address: "72 Bourbon Way. Nashville. Tennessee",
238+
birthMonth: 'January'
239+
},
240+
{
241+
name: "Dave Nichols",
242+
age: 32,
243+
address: "21 Jump Street, Hollywood, California",
244+
birthMonth: 'June'
231245
}
232246
];
233247
$scope.items = $scope.allItems;
@@ -507,6 +521,24 @@
507521
$scope.toolbarConfig.filterConfig.selectedCount = selectedItems.length;
508522
}
509523
}
524+
525+
$scope.togglePagination = function () {
526+
if ($scope.showPagination) {
527+
$scope.pageConfig = {
528+
pageSize: 5
529+
}
530+
} else {
531+
delete $scope.pageConfig;
532+
}
533+
$scope.addNewComponentToDOM();
534+
};
535+
536+
$scope.showComponent = true;
537+
538+
$scope.addNewComponentToDOM = function () {
539+
$scope.showComponent = false;
540+
$timeout(() => $scope.showComponent = true);
541+
};
510542
}
511543
]);
512544
</file>

0 commit comments

Comments
 (0)