Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(pfNotificationDrawer): Allow setting of the field to use to track notifications #602

Merged
merged 1 commit into from
Aug 29, 2017
Merged

fix(pfNotificationDrawer): Allow setting of the field to use to track notifications #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion src/notification/examples/notification-drawer.js
View file
Open in desktop
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).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if it matters a ton, but perhaps key instead of field, just for consistency with the lingo Angular uses re: track by. Example:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: {0}, Duplicate key: {1}, Duplicate value: {2}

From the docs.

* @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
Open in desktop
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
Open in desktop
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