Improve notification view layout and add relevant actions

src/views/account.html

@@ -286,27 +286,32 @@
   <br/>
 
   <div class="text-left">
-    <h3>Notifications</h3>
+    <h3>Notifications <button class="btn btn-xs btn-primary btn-outline pull-right" ng-click="notifications.clearAll()"><i class="fa fa-check"></i> Clear All</button> </h3>
   </div>
 
   <div class="card">
     <div class="grid-item-top">
-      <div class="row">
+      <div class="row" ng-show="notifications.busy">
+        <div class="col-lg-12 text-center">
+          <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
+        </div>
+      </div>
+      <div class="row" ng-hide="notifications.busy">
         <div class="col-xs-12">
-          <table class="table table-hover">
-            <thead>
-              <tr>
-                <th style="width:30%">Title</th>
-                <th style="width:70%" class="hidden-xs hidden-sm">Message</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr ng-repeat="notification in notifications">
-                <td class="text-left elide-table-cell" ng-click="notificationClicked(notification)">
+          <table class="table table-hover" style="margin-bottom: 0;">
+            <tbody ng-repeat="notification in notifications.notifications">
+              <tr ng-class="{ 'notification-details': notifications.activeNotification === notification }">
+                <td class="text-left hand elide-table-cell" ng-click="notifications.clicked(notification)">
                   {{ notification.title }}
                 </td>
-                <td class="text-left hand elide-table-cell hidden-xs hidden-sm" ng-click="notificationClicked(notification)">
-                  {{ notification.message }}
+                <td class="text-right no-wrap" style="vertical-align: bottom">
+                  <button class="btn btn-xs btn-success" ng-click="notifications.ack(notification)" uib-tooltip="Clear"><i class="fa fa-check"></i></button>
+                </td>
+              </tr>
+              <tr ng-show="notifications.activeNotification === notification" class="notification-details">
+                <td>{{ notification.message }}</td>
+                <td class="text-right no-wrap" style="vertical-align: bottom">
+                  <button class="btn btn-xs btn-primary" ng-show="notification.action" ng-click="notifications.action(notification)"><i class="fa fa-arrow-right"></i> Goto View</button>
                 </td>
               </tr>
             </tbody>

src/views/account.js

@@ -12,7 +12,6 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
     $scope.activeClients = [];
     $scope.webadminClient = {};
     $scope.apiClient = {};
-    $scope.notifications = [];
 
     $scope.twoFactorAuthentication = {
         busy: false,
@@ -382,23 +381,54 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
         });
     }
 
-    function refreshNotifications() {
-        Client.getNotifications(false, 1, 100, function (error, result) {
-            if (error) return console.error(error);
+    $scope.notifications = {
+        notifications: [],
+        activeNotification: null,
+        busy: true,
 
-            $scope.notifications = result;
-        });
-    }
+        refresh: function () {
+            Client.getNotifications(false, 1, 100, function (error, result) {
+                if (error) return console.error(error);
 
-    $scope.notificationClicked = function (notification) {
-        Client.ackNotification(notification.id, function (error) {
-            if (error) return console.error(error);
+                $scope.notifications.notifications = result;
 
-            $scope.$parent.notificationAcknowledged(notification.id);
+                $scope.notifications.busy = false;
+            });
+        },
 
-            if (notification.action) window.location = notification.action;
-            else refreshNotifications();
-        });
+        clicked: function (notification) {
+            if ($scope.notifications.activeNotification === notification) return $scope.notifications.activeNotification = null;
+            $scope.notifications.activeNotification = notification;
+        },
+
+        ack: function (notification, callback) {
+            callback = callback || function (error) { if (error) console.error(error); };
+
+            Client.ackNotification(notification.id, function (error) {
+                if (error) return callback(error);
+
+                $scope.$parent.notificationAcknowledged(notification.id);
+                $scope.notifications.refresh();
+
+                callback();
+            });
+        },
+
+        action: function (notification) {
+            if (notification.action) window.location = notification.action
+        },
+
+        clearAll: function () {
+            $scope.notifications.busy = true;
+
+            asyncForEach($scope.notifications.notifications, function (notification, callback) {
+                $scope.notifications.ack(notification, callback);
+            }, function (error) {
+                if (error) console.error(error);
+
+                $scope.notifications.busy = false;
+            });
+        }
     };
 
     Client.onReady(function () {
@@ -418,7 +448,7 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
             });
         });
 
-        refreshNotifications();
+        $scope.notifications.refresh();
     });
 
     // setup all the dialog focus handling