Skip to content

Commit 3faf39f

Browse files
jeff-phillips-18cdcabrera
jeff-phillips-18
authored and
cdcabrera
committed
fix(pfNotificationDrawer): Allow setting of the field to use to track notifications (#602)
This will set the ng-repeat’s ‘track by’ value to the given field in the notification.
1 parent 1b20879 commit 3faf39f

File tree

3 files changed

+28
-2
lines changed

3 files changed

+28
-2
lines changed

‎src/notification/examples/notification-drawer.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
* @param {boolean} drawerExpanded Flag if the drawer is expanded (only valid if allowExpand is true). Optional, default: false
3636
* @param {string} drawerTitle Title to display for the drawer (leaving this blank will remove the provided expand capability)
3737
* @param {object} notificationGroups Collection notification groups to add to the drawer. Alternatively, a single group object can be given if categorization is not used.
38+
* @param {string} notificationTrackField Optional field from the notifications to use to track by in the notifications listing ($index used otherwise).
3839
* @param {function} onClose function() Callback for the close button. Close button is shown if this callback is supplied. Callback should set drawerHidden to true to close the drawer.
3940
* @param {boolean} showMarkAllRead Flag if the mark all read button should be shown, optional, default is false
4041
* @param {function} onMarkAllRead function(notificationGroup) Callback method for the mark all read button (Optional)
@@ -76,7 +77,7 @@
7677
show-mark-all-read="true" on-mark-all-read="markAllRead"
7778
show-clear-all="true" on-clear-all="clearAll"
7879
heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
79-
notification-footer-include="notification-footer.html" custom-scope="customScope">
80+
notification-footer-include="notification-footer.html" custom-scope="customScope" notification-track-field="uid">
8081
</pf-notification-drawer>
8182
</div>
8283
</div>
@@ -184,62 +185,71 @@
184185
subHeading: "5 New Events",
185186
notifications: [
186187
{
188+
uid: 1,
187189
unread: true,
188190
message: "A New Event! Huzzah! Bold.",
189191
status: 'info',
190192
actions: menuActions,
191193
timeStamp: currentTime - (1 * 60 * 60 * 1000)
192194
},
193195
{
196+
uid: 2,
194197
unread: true,
195198
message: "Another Event Notification",
196199
status: 'ok',
197200
actions: menuActions,
198201
timeStamp: currentTime - (2 * 60 * 60 * 1000)
199202
},
200203
{
204+
uid: 3,
201205
unread: false,
202206
message: "Another Event Notification",
203207
status: 'warning',
204208
actions: menuActions,
205209
timeStamp: currentTime - (10 * 60 * 60 * 1000)
206210
},
207211
{
212+
uid: 4,
208213
unread: false,
209214
message: "Another Event Notification",
210215
status: 'error',
211216
actions: menuActions,
212217
timeStamp: currentTime - (12 * 60 * 60 * 1000)
213218
},
214219
{
220+
uid: 5,
215221
unread: true,
216222
message: "A New Event! Huzzah! Bold",
217223
status: 'info',
218224
actions: menuActions,
219225
timeStamp: currentTime - (1 * 60 * 60 * 1000)
220226
},
221227
{
228+
uid: 6,
222229
unread: true,
223230
message: "Another Event Notification",
224231
status: 'error',
225232
actions: menuActions,
226233
timeStamp: currentTime - (2 * 60 * 60 * 1000)
227234
},
228235
{
236+
uid: 7,
229237
unread: false,
230238
message: "Another Event Notification",
231239
status: 'ok',
232240
actions: menuActions,
233241
timeStamp: currentTime - (10 * 60 * 60 * 1000)
234242
},
235243
{
244+
uid: 8,
236245
unread: false,
237246
message: "Another Event Notification",
238247
status: 'warning',
239248
actions: menuActions,
240249
timeStamp: currentTime - (12 * 60 * 60 * 1000)
241250
},
242251
{
252+
uid: 9,
243253
unread: true,
244254
message: "Another Event Notification",
245255
status: 'info',
@@ -254,34 +264,39 @@
254264
subHeading: "3 New Events",
255265
notifications: [
256266
{
267+
uid: 10,
257268
unread: true,
258269
message: "A New Event! Huzzah! Bold",
259270
status: 'info',
260271
actions: menuActions,
261272
timeStamp: currentTime - (1 * 60 * 60 * 1000)
262273
},
263274
{
275+
uid: 11,
264276
unread: true,
265277
message: "Another Event Notification",
266278
status: 'error',
267279
actions: menuActions,
268280
timeStamp: currentTime - (2 * 60 * 60 * 1000)
269281
},
270282
{
283+
uid: 12,
271284
unread: false,
272285
message: "Another Event Notification",
273286
status: 'warning',
274287
actions: menuActions,
275288
timeStamp: currentTime - (10 * 60 * 60 * 1000)
276289
},
277290
{
291+
uid: 13,
278292
unread: false,
279293
message: "Another Event Notification",
280294
status: 'ok',
281295
actions: menuActions,
282296
timeStamp: currentTime - (12 * 60 * 60 * 1000)
283297
},
284298
{
299+
uid: 14,
285300
unread: true,
286301
message: "Another Event Notification",
287302
status: 'warning',
@@ -301,34 +316,39 @@
301316
subHeading: "3 New Events",
302317
notifications: [
303318
{
319+
uid: 15,
304320
unread: true,
305321
message: "A New Event! Huzzah! Bold",
306322
status: 'warning',
307323
actions: menuActions,
308324
timeStamp: currentTime - (1 * 60 * 60 * 1000)
309325
},
310326
{
327+
uid: 16,
311328
unread: true,
312329
message: "Another Event Notification",
313330
status: 'ok',
314331
actions: menuActions,
315332
timeStamp: currentTime - (2 * 60 * 60 * 1000)
316333
},
317334
{
335+
uid: 17,
318336
unread: false,
319337
message: "Another Event Notification",
320338
status: 'ok',
321339
actions: menuActions,
322340
timeStamp: currentTime - (10 * 60 * 60 * 1000)
323341
},
324342
{
343+
uid: 18,
325344
unread: false,
326345
message: "Another Event Notification",
327346
status: 'error',
328347
actions: menuActions,
329348
timeStamp: currentTime - (12 * 60 * 60 * 1000)
330349
},
331350
{
351+
uid: 19,
332352
unread: true,
333353
message: "Another Event Notification",
334354
status: 'info',
@@ -342,34 +362,39 @@
342362
subHeading: "3 New Events",
343363
notifications: [
344364
{
365+
uid: 20,
345366
unread: true,
346367
message: "A New Event! Huzzah! Bold",
347368
status: 'error',
348369
actions: menuActions,
349370
timeStamp: currentTime - (1 * 60 * 60 * 1000)
350371
},
351372
{
373+
uid: 21,
352374
unread: true,
353375
message: "Another Event Notification",
354376
status: 'error',
355377
actions: menuActions,
356378
timeStamp: currentTime - (2 * 60 * 60 * 1000)
357379
},
358380
{
381+
uid: 22,
359382
unread: false,
360383
message: "Another Event Notification",
361384
status: 'warning',
362385
actions: menuActions,
363386
timeStamp: currentTime - (10 * 60 * 60 * 1000)
364387
},
365388
{
389+
uid: 23,
366390
unread: false,
367391
message: "Another Event Notification",
368392
status: 'warning',
369393
actions: menuActions,
370394
timeStamp: currentTime - (12 * 60 * 60 * 1000)
371395
},
372396
{
397+
uid: 24,
373398
unread: true,
374399
message: "Another Event Notification",
375400
status: 'error',

‎src/notification/notification-drawer.component.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
55
drawerExpanded: '=?',
66
drawerTitle: '@',
77
notificationGroups: '<',
8+
notificationTrackField: '@',
89
onClose: '=?',
910
showMarkAllRead: '<?',
1011
onMarkAllRead: '=?',

‎src/notification/notification-drawer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h4 class="panel-title">
2121
<div class="panel-collapse collapse" ng-class="{in: notificationGroup.open || $ctrl.notificationGroups.length === 1}">
2222
<div ng-if="$ctrl.hasNotifications(notificationGroup)" class="panel-body">
2323
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
24-
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
24+
ng-repeat="notification in notificationGroup.notifications track by $ctrl.notificationTrackField ? notification[$ctrl.notificationTrackField] || $index : $index" ng-include src="$ctrl.notificationBodyInclude">
2525
</div>
2626
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
2727
<span class="spinner spinner-xs spinner-inline"></span> Loading More

0 commit comments

Comments
 (0)