sync notification UI with backend changes

This commit is contained in:
Girish Ramakrishnan
2021-05-29 12:11:17 -07:00
parent 841c9bc261
commit 5aa6e18ea7
5 changed files with 38 additions and 68 deletions
+4 -3
View File
@@ -19,10 +19,11 @@
<div class="card notification-item" ng-repeat="notification in notifications.notifications">
<div class="row">
<div class="col-xs-12" ng-click="notification.isCollapsed = !notification.isCollapsed" ng-class="{ 'notification-details': notification.detailsShown }">
{{ notification.title }} <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
<button class="btn btn-xs btn-default pull-right" ng-hide="notification.acknowledged" ng-click="notifications.ack(notification, $event)" uib-tooltip="{{ 'notifications.dismissTooltip' | tr }}"><i class="fa fa-times"></i></button>
<span ng-class="{'text-bold': !notification.acknowledged }">{{ notification.title }}</span> <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
<!-- hidden for now since it seems overkill to have "unread" -->
<!-- <button class="btn btn-xs btn-default pull-right" ng-show="notification.acknowledged" ng-click="notifications.ack(notification, false, $event)" uib-tooltip="{{ 'notifications.dismissTooltip' | tr }}"><i class="fa fa-asterisk"></i></button> -->
<div uib-collapse="notification.isCollapsed" expanding="notificationExpanding(notification)">
<div uib-collapse="notification.isCollapsed" expanding="notifications.ack(notification, true)">
<br/>
<p ng-hide="notification.messageJson" ng-click="$event.stopPropagation();" style="cursor: auto; overflow: auto;" ng-bind-html="notification.message | markdown2html"></p>
<pre ng-show="notification.messageJson" ng-click="$event.stopPropagation();" style="cursor: auto">{{ notification.messageJson | json }}</pre>
+18 -43
View File
@@ -12,7 +12,7 @@ angular.module('Application').controller('NotificationsController', ['$scope', '
busy: true,
refresh: function () {
Client.getNotifications(false, 1, 100, function (error, result) {
Client.getNotifications({}, 1, 100, function (error, result) {
if (error) return console.error(error);
// collapse by default
@@ -31,69 +31,44 @@ angular.module('Application').controller('NotificationsController', ['$scope', '
});
},
clicked: function (notification) {
if ($scope.notifications.activeNotification === notification) return $scope.notifications.activeNotification = null;
$scope.notifications.activeNotification = notification;
},
ack: function (notification, acked, event) {
if (event) event.stopPropagation();
ackOne: function (id, callback) {
Client.ackNotification(id, function (error) {
if (error) return callback(error);
if (notification.acknowledged === acked) return;
$scope.$parent.notificationAcknowledged(id);
callback();
});
},
ack: function (notification, event) {
event.stopPropagation();
$scope.notifications.ackOne(notification.id, function (error) {
Client.ackNotification(notification.id, acked, function (error) {
if (error) console.error(error);
$scope.notifications.refresh();
notification.acknowledged = acked;
$scope.$parent.notificationAcknowledged(acked);
});
},
action: function (notification) {
if (notification.action) window.location = notification.action;
},
clearAll: function () {
$scope.clearAllBusy = true;
async.eachLimit($scope.notifications.notifications, 20, function (notification, callback) {
if (notification.acknowledged) return callback();
$scope.notifications.ackOne(notification.id, callback);
Client.ackNotification(notification.id, true, function (error) {
if (error) {
console.error(error);
} else {
notification.acknowledged = true;
$scope.$parent.notificationAcknowledged(true);
}
callback();
});
}, function (error) {
if (error) console.error(error);
$scope.notifications.refresh();
$scope.clearAllBusy = false;
});
}
};
$scope.notificationExpanding = function (notification) {
if (!notification.eventId) return;
notification.busyLoadEvent = true;
Client.getEvent(notification.eventId, function (error, result) {
notification.busyLoadEvent = false;
if (error) return console.error(error);
notification.event = result;
});
};
Client.onReady(function () {
$scope.notifications.refresh();
});
Client.onReconnect(function () {
$scope.notifications.refresh();
});
}]);