Skip to content

Commit

Permalink
fix(pfNotificationDrawer): Allow setting of the field to use to track…
Browse files Browse the repository at this point in the history 
… notifications (#602)

This will set the ng-repeat’s ‘track by’ value to the given field in
the notification.
  • Loading branch information
@jeff-phillips-18 @cdcabrera
jeff-phillips-18 authored and cdcabrera committed Aug 29, 2017
1 parent 1b20879 commit 3faf39f
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 2 deletions.
27 changes: 26 additions & 1 deletion src/notification/examples/notification-drawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
* @param {boolean} drawerExpanded Flag if the drawer is expanded (only valid if allowExpand is true). Optional, default: false
* @param {string} drawerTitle Title to display for the drawer (leaving this blank will remove the provided expand capability)
* @param {object} notificationGroups Collection notification groups to add to the drawer. Alternatively, a single group object can be given if categorization is not used.
* @param {string} notificationTrackField Optional field from the notifications to use to track by in the notifications listing ($index used otherwise).
* @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.
* @param {boolean} showMarkAllRead Flag if the mark all read button should be shown, optional, default is false
* @param {function} onMarkAllRead function(notificationGroup) Callback method for the mark all read button (Optional)
Expand Down Expand Up @@ -76,7 +77,7 @@
show-mark-all-read="true" on-mark-all-read="markAllRead"
show-clear-all="true" on-clear-all="clearAll"
heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
notification-footer-include="notification-footer.html" custom-scope="customScope">
notification-footer-include="notification-footer.html" custom-scope="customScope" notification-track-field="uid">
</pf-notification-drawer>
</div>
</div>
Expand Down Expand Up @@ -184,62 +185,71 @@
subHeading: "5 New Events",
notifications: [
{
uid: 1,
unread: true,
message: "A New Event! Huzzah! Bold.",
status: 'info',
actions: menuActions,
timeStamp: currentTime - (1 * 60 * 60 * 1000)
},
{
uid: 2,
unread: true,
message: "Another Event Notification",
status: 'ok',
actions: menuActions,
timeStamp: currentTime - (2 * 60 * 60 * 1000)
},
{
uid: 3,
unread: false,
message: "Another Event Notification",
status: 'warning',
actions: menuActions,
timeStamp: currentTime - (10 * 60 * 60 * 1000)
},
{
uid: 4,
unread: false,
message: "Another Event Notification",
status: 'error',
actions: menuActions,
timeStamp: currentTime - (12 * 60 * 60 * 1000)
},
{
uid: 5,
unread: true,
message: "A New Event! Huzzah! Bold",
status: 'info',
actions: menuActions,
timeStamp: currentTime - (1 * 60 * 60 * 1000)
},
{
uid: 6,
unread: true,
message: "Another Event Notification",
status: 'error',
actions: menuActions,
timeStamp: currentTime - (2 * 60 * 60 * 1000)
},
{
uid: 7,
unread: false,
message: "Another Event Notification",
status: 'ok',
actions: menuActions,
timeStamp: currentTime - (10 * 60 * 60 * 1000)
},
{
uid: 8,
unread: false,
message: "Another Event Notification",
status: 'warning',
actions: menuActions,
timeStamp: currentTime - (12 * 60 * 60 * 1000)
},
{
uid: 9,
unread: true,
message: "Another Event Notification",
status: 'info',
Expand All @@ -254,34 +264,39 @@
subHeading: "3 New Events",
notifications: [
{
uid: 10,
unread: true,
message: "A New Event! Huzzah! Bold",
status: 'info',
actions: menuActions,
timeStamp: currentTime - (1 * 60 * 60 * 1000)
},
{
uid: 11,
unread: true,
message: "Another Event Notification",
status: 'error',
actions: menuActions,
timeStamp: currentTime - (2 * 60 * 60 * 1000)
},
{
uid: 12,
unread: false,
message: "Another Event Notification",
status: 'warning',
actions: menuActions,
timeStamp: currentTime - (10 * 60 * 60 * 1000)
},
{
uid: 13,
unread: false,
message: "Another Event Notification",
status: 'ok',
actions: menuActions,
timeStamp: currentTime - (12 * 60 * 60 * 1000)
},
{
uid: 14,
unread: true,
message: "Another Event Notification",
status: 'warning',
Expand All @@ -301,34 +316,39 @@
subHeading: "3 New Events",
notifications: [
{
uid: 15,
unread: true,
message: "A New Event! Huzzah! Bold",
status: 'warning',
actions: menuActions,
timeStamp: currentTime - (1 * 60 * 60 * 1000)
},
{
uid: 16,
unread: true,
message: "Another Event Notification",
status: 'ok',
actions: menuActions,
timeStamp: currentTime - (2 * 60 * 60 * 1000)
},
{
uid: 17,
unread: false,
message: "Another Event Notification",
status: 'ok',
actions: menuActions,
timeStamp: currentTime - (10 * 60 * 60 * 1000)
},
{
uid: 18,
unread: false,
message: "Another Event Notification",
status: 'error',
actions: menuActions,
timeStamp: currentTime - (12 * 60 * 60 * 1000)
},
{
uid: 19,
unread: true,
message: "Another Event Notification",
status: 'info',
Expand All @@ -342,34 +362,39 @@
subHeading: "3 New Events",
notifications: [
{
uid: 20,
unread: true,
message: "A New Event! Huzzah! Bold",
status: 'error',
actions: menuActions,
timeStamp: currentTime - (1 * 60 * 60 * 1000)
},
{
uid: 21,
unread: true,
message: "Another Event Notification",
status: 'error',
actions: menuActions,
timeStamp: currentTime - (2 * 60 * 60 * 1000)
},
{
uid: 22,
unread: false,
message: "Another Event Notification",
status: 'warning',
actions: menuActions,
timeStamp: currentTime - (10 * 60 * 60 * 1000)
},
{
uid: 23,
unread: false,
message: "Another Event Notification",
status: 'warning',
actions: menuActions,
timeStamp: currentTime - (12 * 60 * 60 * 1000)
},
{
uid: 24,
unread: true,
message: "Another Event Notification",
status: 'error',
Expand Down
1 change: 1 addition & 0 deletions src/notification/notification-drawer.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ angular.module('patternfly.notification').component('pfNotificationDrawer', {
drawerExpanded: '=?',
drawerTitle: '@',
notificationGroups: '<',
notificationTrackField: '@',
onClose: '=?',
showMarkAllRead: '<?',
onMarkAllRead: '=?',
Expand Down
2 changes: 1 addition & 1 deletion src/notification/notification-drawer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h4 class="panel-title">
<div class="panel-collapse collapse" ng-class="{in: notificationGroup.open || $ctrl.notificationGroups.length === 1}">
<div ng-if="$ctrl.hasNotifications(notificationGroup)" class="panel-body">
<div class="drawer-pf-notification" ng-class="{unread: notification.unread, 'expanded-notification': $ctrl.drawerExpanded}"
ng-repeat="notification in notificationGroup.notifications" ng-include src="$ctrl.notificationBodyInclude">
ng-repeat="notification in notificationGroup.notifications track by $ctrl.notificationTrackField ? notification[$ctrl.notificationTrackField] || $index : $index" ng-include src="$ctrl.notificationBodyInclude">
</div>
<div ng-if="notificationGroup.isLoading" class="drawer-pf-loading text-center">
<span class="spinner spinner-xs spinner-inline"></span> Loading More
Expand Down

0 comments on commit 3faf39f

Please sign in to comment.