Skip to content

Commit f07c3ca

Browse files
abkielingabkieling
committed
Fix #502 - pfTableView: does not work with items retrieved via AJAX call
1 parent ab08e22 commit f07c3ca

File tree

3 files changed

+285
-213
lines changed

3 files changed

+285
-213
lines changed

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

Lines changed: 194 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -34,180 +34,201 @@
3434
* </ul>
3535
* @param {object} emptyStateConfig Optional configuration settings for the empty state component. See the {@link patternfly.views.component:pfEmptyState Empty State} component
3636
* @example
37-
<example module="patternfly.tableview.demo">
38-
<file name="index.html">
39-
<div ng-controller="TableCtrl" class="row example-container">
40-
<div class="col-md-12">
41-
<pf-table-view id="exampleTableView"
42-
config="config"
43-
empty-state-config="emptyStateConfig"
44-
dt-options="dtOptions"
45-
columns="columns"
46-
items="items"
47-
action-buttons="actionButtons"
48-
menu-actions="menuActions">
49-
</pf-table-view>
50-
</div>
51-
<div class="col-md-12" style="padding-top: 12px;">
52-
<div class="form-group">
53-
<label class="checkbox-inline">
54-
<input type="checkbox" ng-model="config.itemsAvailable">Items Available</input>
55-
</label>
56-
</div>
57-
</div>
58-
<hr class="col-md-12">
59-
<div class="col-md-12">
60-
<div class="col-md-12" style="padding-top: 12px;">
61-
<label style="font-weight:normal;vertical-align:center;">Events: </label>
62-
</div>
63-
<div class="col-md-12">
64-
<textarea rows="10" class="col-md-12">{{eventText}}</textarea>
65-
</div>
66-
</div>
67-
</file>
68-
69-
<file name="modules.js">
70-
angular.module('patternfly.tableview.demo', ['patternfly.views','patternfly.table']);
71-
</file>
72-
73-
<file name="script.js">
74-
angular.module('patternfly.tableview.demo').controller('TableCtrl', ['$scope',
75-
function ($scope) {
76-
$scope.dtOptions = {
77-
order: [[2, "asc"]],
78-
};
79-
80-
$scope.columns = [
81-
{ header: "Name", itemField: "name" },
82-
{ header: "Address", itemField: "address"},
83-
{ header: "City", itemField: "city" },
84-
{ header: "State", itemField: "state"}
85-
];
86-
87-
$scope.items = [
88-
{
89-
name: "Fred Flintstone",
90-
address: "20 Dinosaur Way",
91-
city: "Bedrock",
92-
state: "Washingstone"
93-
},
94-
{
95-
name: "John Smith",
96-
address: "415 East Main Street",
97-
city: "Norfolk",
98-
state: "Virginia",
99-
},
100-
{
101-
name: "Frank Livingston",
102-
address: "234 Elm Street",
103-
city: "Pittsburgh",
104-
state: "Pennsylvania"
105-
},
106-
{
107-
name: "Linda McGovern",
108-
address: "22 Oak Street",
109-
city: "Denver",
110-
state: "Colorado"
111-
},
112-
{
113-
name: "Jim Brown",
114-
address: "72 Bourbon Way",
115-
city: "Nashville",
116-
state: "Tennessee"
117-
},
118-
{
119-
name: "Holly Nichols",
120-
address: "21 Jump Street",
121-
city: "Hollywood",
122-
state: "California"
123-
},
124-
{
125-
name: "Marie Edwards",
126-
address: "17 Cross Street",
127-
city: "Boston",
128-
state: "Massachusetts"
129-
},
130-
{
131-
name: "Pat Thomas",
132-
address: "50 Second Street",
133-
city: "New York",
134-
state: "New York"
135-
},
136-
];
137-
138-
$scope.eventText = "";
139-
140-
$scope.config = {
141-
onCheckBoxChange: handleCheckBoxChange,
142-
selectionMatchProp: "name",
143-
itemsAvailable: true
144-
};
145-
146-
$scope.emptyStateConfig = {
147-
icon: 'pficon-warning-triangle-o',
148-
title: 'No Items Available',
149-
info: "This is the Empty State component. The goal of a empty state pattern is to provide a good first impression that helps users to achieve their goals. It should be used when a view is empty because no objects exists and you want to guide the user to perform specific actions.",
150-
helpLink: {
151-
label: 'For more information please see',
152-
urlLabel: 'pfExample',
153-
url : '#/api/patternfly.views.component:pfEmptyState'
154-
}
155-
};
156-
157-
function handleCheckBoxChange (item) {
158-
$scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText;
159-
};
160-
161-
var performAction = function (action, item) {
162-
$scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
163-
};
164-
165-
$scope.actionButtons = [
166-
{
167-
name: 'Action',
168-
title: 'Perform an action',
169-
actionFn: performAction
170-
}
171-
];
172-
173-
$scope.menuActions = [
174-
{
175-
name: 'Action',
176-
title: 'Perform an action',
177-
actionFn: performAction
178-
},
179-
{
180-
name: 'Another Action',
181-
title: 'Do something else',
182-
actionFn: performAction
183-
},
184-
{
185-
name: 'Disabled Action',
186-
title: 'Unavailable action',
187-
actionFn: performAction,
188-
isDisabled: true
189-
},
190-
{
191-
name: 'Something Else',
192-
title: '',
193-
actionFn: performAction
194-
},
195-
{
196-
isSeparator: true
197-
},
198-
{
199-
name: 'Grouped Action 1',
200-
title: 'Do something',
201-
actionFn: performAction
202-
},
203-
{
204-
name: 'Grouped Action 2',
205-
title: 'Do something similar',
206-
actionFn: performAction
207-
}
208-
];
37+
<example module="patternfly.tableview.demo">
38+
<file name="index.html">
39+
<div ng-controller="TableCtrl" class="row example-container">
40+
<div class="col-md-12">
41+
<pf-table-view id="exampleTableView"
42+
config="config"
43+
empty-state-config="emptyStateConfig"
44+
dt-options="dtOptions"
45+
columns="columns"
46+
items="items"
47+
action-buttons="actionButtons"
48+
menu-actions="menuActions">
49+
</pf-table-view>
50+
</div>
51+
<div class="col-md-12" style="padding-top: 12px;">
52+
<div class="form-group">
53+
<label class="checkbox-inline">
54+
<input type="checkbox" ng-model="config.itemsAvailable">Items Available</input>
55+
</label>
56+
</div>
57+
</div>
58+
<hr class="col-md-12">
59+
<div class="col-md-12">
60+
<div class="col-md-12" style="padding-top: 12px;">
61+
<label style="font-weight:normal;vertical-align:center;">Events: </label>
62+
</div>
63+
<div class="col-md-12">
64+
<textarea rows="10" class="col-md-12">{{eventText}}</textarea>
65+
</div>
66+
</div>
67+
</file>
68+
69+
<file name="module.js">
70+
angular.module('patternfly.tableview.demo', ['patternfly.views','patternfly.table']);
71+
</file>
72+
73+
<file name="controller.js">
74+
angular.module('patternfly.tableview.demo').controller('TableCtrl', ['$scope', 'itemsService',
75+
function ($scope, itemsService) {
76+
$scope.dtOptions = {
77+
order: [[2, "asc"]],
78+
};
79+
80+
$scope.columns = [
81+
{ header: "Name", itemField: "name" },
82+
{ header: "Address", itemField: "address"},
83+
{ header: "City", itemField: "city" },
84+
{ header: "State", itemField: "state"}
85+
];
86+
87+
$scope.items = null;
88+
89+
$scope.eventText = "";
90+
91+
$scope.config = {
92+
onCheckBoxChange: handleCheckBoxChange,
93+
selectionMatchProp: "name",
94+
itemsAvailable: true
95+
};
96+
97+
$scope.emptyStateConfig = {
98+
icon: 'pficon-warning-triangle-o',
99+
title: 'No Items Available',
100+
info: "This is the Empty State component. The goal of a empty state pattern is to provide a good first impression that helps users to achieve their goals. It should be used when a view is empty because no objects exists and you want to guide the user to perform specific actions.",
101+
helpLink: {
102+
label: 'For more information please see',
103+
urlLabel: 'pfExample',
104+
url : '#/api/patternfly.views.component:pfEmptyState'
105+
}
106+
};
107+
108+
function handleCheckBoxChange (item) {
109+
$scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText;
110+
};
111+
112+
var performAction = function (action, item) {
113+
$scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
114+
};
115+
116+
$scope.actionButtons = [
117+
{
118+
name: 'Action',
119+
title: 'Perform an action',
120+
actionFn: performAction
121+
}
122+
];
123+
124+
$scope.menuActions = [
125+
{
126+
name: 'Action',
127+
title: 'Perform an action',
128+
actionFn: performAction
129+
},
130+
{
131+
name: 'Another Action',
132+
title: 'Do something else',
133+
actionFn: performAction
134+
},
135+
{
136+
name: 'Disabled Action',
137+
title: 'Unavailable action',
138+
actionFn: performAction,
139+
isDisabled: true
140+
},
141+
{
142+
name: 'Something Else',
143+
title: '',
144+
actionFn: performAction
145+
},
146+
{
147+
isSeparator: true
148+
},
149+
{
150+
name: 'Grouped Action 1',
151+
title: 'Do something',
152+
actionFn: performAction
153+
},
154+
{
155+
name: 'Grouped Action 2',
156+
title: 'Do something similar',
157+
actionFn: performAction
158+
}
159+
];
160+
161+
(function init() {
162+
itemsService.getItems()
163+
.then(items => $scope.items = items);
164+
})();
165+
}
166+
]);
167+
</file>
168+
169+
<file name="service.js">
170+
angular.module('patternfly.tableview.demo').service('itemsService', ['$q', function($q) {
171+
172+
this.getItems = function() {
173+
return $q((resolve, reject) => {
174+
setTimeout(function() {
175+
let items = [
176+
{
177+
name: "Fred Flintstone",
178+
address: "20 Dinosaur Way",
179+
city: "Bedrock",
180+
state: "Washingstone"
181+
},
182+
{
183+
name: "John Smith",
184+
address: "415 East Main Street",
185+
city: "Norfolk",
186+
state: "Virginia",
187+
},
188+
{
189+
name: "Frank Livingston",
190+
address: "234 Elm Street",
191+
city: "Pittsburgh",
192+
state: "Pennsylvania"
193+
},
194+
{
195+
name: "Linda McGovern",
196+
address: "22 Oak Street",
197+
city: "Denver",
198+
state: "Colorado"
199+
},
200+
{
201+
name: "Jim Brown",
202+
address: "72 Bourbon Way",
203+
city: "Nashville",
204+
state: "Tennessee"
205+
},
206+
{
207+
name: "Holly Nichols",
208+
address: "21 Jump Street",
209+
city: "Hollywood",
210+
state: "California"
211+
},
212+
{
213+
name: "Marie Edwards",
214+
address: "17 Cross Street",
215+
city: "Boston",
216+
state: "Massachusetts"
217+
},
218+
{
219+
name: "Pat Thomas",
220+
address: "50 Second Street",
221+
city: "New York",
222+
state: "New York"
223+
},
224+
];
225+
resolve(items);
226+
}, 10);
227+
});
209228
}
210-
]);
229+
230+
}]);
211231
</file>
232+
212233
</example>
213234
*/

0 commit comments

Comments
 (0)