Adding UI enhancements and including unit tests

components/device-mgt/org.wso2.carbon.device.mgt.core/src/test/java/org/wso2/carbon/device/mgt/core/notification/mgt/NotificationManagementServiceImplTests.java

@@ -216,5 +216,12 @@ public class NotificationManagementServiceImplTests {
                 " as added no. of records.");
     }
 
+    @Test(dependsOnMethods = "updateStatusofAllNotification", description = "this tries to " +
+            "update the status of all notifications")
+    public void updateStatusOfAllNotifications() throws NotificationManagementException {
+        Assert.assertTrue(notificationManagementService.updateAllNotifications(Notification
+                .Status.CHECKED, -1234));
+    }
+
 }
 

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.notification.listing/listing.hbs

@@ -44,21 +44,6 @@
 
                         <div class="wr-hidden-operations-content col-lg-8" style="padding: 5px"
                              id="ast-container">
-                            <table width="100%">
-                                <tr>
-                                    <td>
-                                        <div id="noNotificationtxt"  class="panel-body">
-                                            No unread messages
-                                        </div>
-                                    </td>
-                                    <td class="text-right">
-                                        <div id="notification-clear-button" class="hidden"><a
-                                                class="btn btn-primary"
-                                                data-click-event="clear-notification">Clear All
-                                                                                      Notifications</a></div>
-                                    </td>
-                                </tr>
-                            </table>
                         </div>
                     </div>
                 </div>
@@ -68,8 +53,13 @@
     </div>
 {{/zone}}
 {{#zone "bottomJs"}}
-    <script id="notification-listing" data-current-user="{{@user.username}}"
+    <script id="notification-listing-new" data-current-user="{{@user.username}}"
-            data-image-resource="{{@unit.publicUri}}/images/" src="{{@unit.publicUri}}/templates/notification-listing.hbs"
+            data-image-resource="{{@unit.publicUri}}/images/" src="{{@unit
+    .publicUri}}/templates/notification-listing-new.hbs"
+            type="text/x-handlebars-template"></script>
+    <script id="notification-listing-all" data-current-user="{{@user.username}}"
+            data-image-resource="{{@unit.publicUri}}/images/" src="{{@unit
+    .publicUri}}/templates/notification-listing-all.hbs"
             type="text/x-handlebars-template"></script>
     {{js "js/notification-listing.js"}}
 {{/zone}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.notification.listing/public/js/notification-listing.js

@@ -29,12 +29,57 @@ function InitiateViewOption() {
 }
 
 function loadNotifications() {
-    var deviceListing = $("#notification-listing");
+    var deviceListingNew = $("#notification-listing-new");
-    var deviceListingSrc = deviceListing.attr("src");
+    var deviceListingNewSrc = deviceListingNew.attr("src");
-    var currentUser = deviceListing.data("currentUser");
+
+    var deviceListingAll = $("#notification-listing-all");
+    var deviceListingAllSrc = deviceListingAll.attr("src");
+
     $.template(
-        "notification-listing",
+        "notification-listing-new",
-        deviceListingSrc,
+        deviceListingNewSrc,
+        function (template) {
+            invokerUtil.get(
+                deviceMgtAPIBaseURI + "/notifications?status=NEW",
+                // on success
+                function (data, textStatus, jqXHR) {
+                    if (jqXHR.status == 200 && data) {
+                        data = JSON.parse(data);
+                        if (data["notifications"]) {
+                            notificationsAvailable = true;
+                            var viewModel = {};
+                            viewModel["notifications"] = data["notifications"];
+                            viewModel["appContext"] = context;
+                            var content = template(viewModel);
+                            $("#ast-container").append(content);
+                            var settings = {
+                                "sorting" : false
+                            };
+                            $("#unread-notifications").datatables_extended(settings);
+
+                            /**
+                             *  append advance operations to list table toolbar
+                             */
+                            $('#unread-notifications_wrapper').find('.dataTablesTop' +
+                                ' .dataTables_toolbar').html(
+                                "<a\ class=\"btn btn-primary\"" +
+                                " data-click-event=\"clear-notification\">Clear All" +
+                                " Notifications</a>"
+                            );
+                        }
+                    }
+                },
+                // on error
+                function (jqXHR) {
+                    console.log(jqXHR.status);
+                }
+            );
+        }
+    );
+
+    $.template(
+        "notification-listing-all",
+        deviceListingAllSrc,
         function (template) {
             invokerUtil.get(
                 deviceMgtAPIBaseURI + "/notifications",
@@ -42,17 +87,16 @@ function loadNotifications() {
                 function (data, textStatus, jqXHR) {
                     if (jqXHR.status == 200 && data) {
                         data = JSON.parse(data);
-                        if (data["notifications"] && data["notifications"].length > 0) {
+                        if (data["notifications"]) {
                             notificationsAvailable = true;
                             var viewModel = {};
                             viewModel["notifications"] = data["notifications"];
                             viewModel["appContext"] = context;
                             var content = template(viewModel);
-                            $("#ast-container").html(content);
+                            $("#ast-container").append(content);
                             var settings = {
                                 "sorting" : false
                             };
-                            $("#unread-notifications").datatables_extended(settings);
                             $("#all-notifications").datatables_extended(settings);
                         }
                     }
@@ -70,16 +114,9 @@ function loadNotifications() {
 function showAdvanceOperation(operation, button) {
     $(button).addClass('selected');
     $(button).siblings().removeClass('selected');
-    if ($(button).attr("id") == 'allNotifications') {
-        $("#noNotificationtxt").html('You do not have any notifications ');
-    } else if ($(button).attr("id") == 'unReadNotifications') {
-        $("#noNotificationtxt").html('You do not have any unread notifications ');
-    } else {
-        $("#noNotificationtxt").html('You do not have any unread notifications ');
-    }
     var hiddenOperation = ".wr-hidden-operations-content > div";
-    $(hiddenOperation + '[data-operation="' + operation + '"]').show();
     $(hiddenOperation + '[data-operation="' + operation + '"]').siblings().hide();
+    $(hiddenOperation + '[data-operation="' + operation + '"]').show();
 }
 
 $(document).ready(function () {
@@ -143,6 +180,10 @@ $(document).ready(function () {
                 function (data) {
                     $('.message').remove();
                     $("#notification-bubble").html(0);
+                    var undreadNotifications = $("#unread-notifications");
+                    undreadNotifications.find("tbody").empty();
+                    undreadNotifications.find("tbody").append("<tr><td colspan=''>No data" +
+                        " available in table</td></tr>");
                 }, function () {
                     var content = "<li class='message message-danger'><h4><i class='icon fw fw-error'></i>Warning</h4>" +
                         "<p>Unexpected error occurred while loading notification. Please refresh the page and" +

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.notification.listing/public/templates/notification-listing-all.hbs

@@ -0,0 +1,42 @@
+<!-- all -->
+<div class="wr-hidden-operation" data-operation="all">
+    <div class="panel panel-default">
+        <div id="all-body" class="panel-collapse panel-body" role="tabpanel">
+            <div id="error-msg" class="alert alert-danger hidden" role="alert">
+                <i class="icon fw fw-error"></i><span></span>
+            </div>
+
+            <table class="table table-striped table-hover table-bordered display data-table" id="all-notifications">
+                <thead style="display: none;">
+                <tr class="sort-row">
+                    <th>Description</th>
+                    <th>Action</th>
+                </tr>
+                </thead>
+                <tbody>
+                {{#if notifications}}
+                    {{#each notifications}}
+                        <tr data-type="selectable" data-id="{{id}}">
+                            <td  data-display="{{description}}" data-grid-label="Description">{{description}}</td>
+                            <td style="text-align: center;">
+                                <a href="device/{{deviceType}}?id={{deviceIdentifier}}" data-click-event="remove-form">
+                                 <span class="fw-stack">
+                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                    <i class="fw fw-view fw-stack-1x"></i>
+                                </span>
+                                </a>
+                            </td>
+                        </tr>
+                    {{/each}}
+                    {{else}}
+                    <div>
+                        You do not have any notifications
+                    </div>
+                {{/if}}
+                <br class="c-both" />
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<!-- /all -->

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.notification.listing/public/templates/notification-listing-new.hbs

@@ -0,0 +1,44 @@
+<!-- unread -->
+<div class="wr-hidden-operation" data-operation="unread" style="display: block">
+    <div class="panel panel-default">
+        <div id="unread-body" class="panel-collapse panel-body" role="tabpanel">
+            <div id="error-msg" class="alert alert-danger hidden" role="alert">
+                <i class="icon fw fw-error"></i><span></span>
+            </div>
+
+            <table class="table table-striped table-hover table-bordered display data-table" id="unread-notifications">
+                <thead style="display: none;">
+                <tr class="sort-row">
+                    <th>Description</th>
+                    <th>Action</th>
+                </tr>
+                </thead>
+                <tbody>
+                {{#if notifications}}
+                    {{#each notifications}}
+                        {{#equal "NEW" status }}
+                            <tr data-type="selectable" data-id="{{id}}">
+                                <td data-display="{{description}}" data-grid-label="Description">{{description}}</td>
+                                <td style="text-align: center;">
+                                    <a href="device/{{deviceType}}?id={{deviceIdentifier}}" data-id="{{id}}" data-url="device/{{deviceType}}?id={{deviceIdentifier}}" class="new-notification" data-click-event="remove-form">
+                                                     <span class="fw-stack">
+                                                        <i class="fw fw-circle-outline fw-stack-2x"></i>
+                                                        <i class="fw fw-view fw-stack-1x"></i>
+                                                    </span>
+                                    </a>
+                                </td>
+                            </tr>
+                        {{/equal}}
+                    {{/each}}
+                    {{else}}
+                        <div>
+                            You do not have any unread notifications
+                        </div>
+                {{/if}}
+                <br class="c-both" />
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<!-- unread-->

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.notification.listing/public/templates/notification-listing.hbs

@@ -1,75 +0,0 @@
-<!-- unread -->
-<div class="wr-hidden-operation" data-operation="unread" style="display: block">
-    <div class="panel panel-default">
-        <div id="unread-body" class="panel-collapse panel-body" role="tabpanel">
-            <div id="error-msg" class="alert alert-danger hidden" role="alert">
-                <i class="icon fw fw-error"></i><span></span>
-            </div>
-
-            <table class="table table-striped table-hover table-bordered display data-table" id="unread-notifications">
-                <thead style="display: none;">
-                <tr class="sort-row">
-                    <th>Description</th>
-                    <th>Action</th>
-                </tr>
-                </thead>
-                <tbody>
-                {{#each notifications}}
-                    {{#equal "NEW" status }}
-                        <tr data-type="selectable" data-id="{{id}}">
-                            <td data-display="{{description}}" data-grid-label="Description">{{description}}</td>
-                            <td style="text-align: center;">
-                                <a href="device/{{deviceType}}?id={{deviceIdentifier}}" data-id="{{id}}" data-url="device/{{deviceType}}?id={{deviceIdentifier}}" class="new-notification" data-click-event="remove-form">
-                                     <span class="fw-stack">
-                                        <i class="fw fw-circle-outline fw-stack-2x"></i>
-                                        <i class="fw fw-view fw-stack-1x"></i>
-                                    </span>
-                                </a>
-                            </td>
-                        </tr>
-                    {{/equal}}
-                {{/each}}
-                <br class="c-both" />
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>
-<!-- unread-->
-
-<!-- all -->
-<div class="wr-hidden-operation" data-operation="all">
-    <div class="panel panel-default">
-        <div id="all-body" class="panel-collapse panel-body" role="tabpanel">
-            <div id="error-msg" class="alert alert-danger hidden" role="alert">
-                <i class="icon fw fw-error"></i><span></span>
-            </div>
-
-            <table class="table table-striped table-hover table-bordered display data-table" id="all-notifications">
-                <thead style="display: none;">
-                <tr class="sort-row">
-                    <th>Description</th>
-                    <th>Action</th>
-                </tr>
-                </thead>
-                <tbody>
-                {{#each notifications}}
-                    <tr data-type="selectable" data-id="{{id}}">
-                        <td  data-display="{{description}}" data-grid-label="Description">{{description}}</td>
-                        <td style="text-align: center;">
-                            <a href="device/{{deviceType}}?id={{deviceIdentifier}}" data-click-event="remove-form">
-                                 <span class="fw-stack">
-                                    <i class="fw fw-circle-outline fw-stack-2x"></i>
-                                    <i class="fw fw-view fw-stack-1x"></i>
-                                </span>
-                            </a>
-                        </td>
-                    </tr>
-                {{/each}}
-                <br class="c-both" />
-                </tbody>
-            </table>
-        </div>
-    </div>
-</div>
-<!-- /all -->

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/nav-menu.hbs

@@ -160,7 +160,7 @@
         </ul>
         <div class="text-center"><a href="{{@app.context}}/notification-listing" class="btn
             btn-primary all-notifications">Show All Notifications</a></div>
-        <div id="right-side-pane-notifications-clear" class="text-center hidden"><a class="btn
+        <div id="right-side-pane-notifications-clear" class="text-center"><a class="btn
             btn-primary" data-click-event="clear-notification">Clear All Notifications</a></div>
     </div>
 {{/zone}}

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/public/js/nav-menu.js

@@ -21,7 +21,6 @@ var modalPopupContainer = modalPopup + " .modal-content";
 var modalPopupContent = modalPopup + " .modal-content";
 
 var backendEndBasePath = "/api/device-mgt/v1.0";
-var notificationsAvailable = false;
 
 /*
  * set popup maximum height function.
@@ -102,7 +101,6 @@ function loadNewNotifications() {
                         viewModel.context = context;
                         viewModel.notifications = responsePayload.notifications;
                         if (responsePayload.count > 0) {
-                            notificationsAvailable = true;
                             $(messageSideBar).html(template(viewModel));
                         } else {
                             $(messageSideBar).html(
@@ -456,10 +454,6 @@ $(document).ready(function () {
         );
     });
 
-    if(notificationsAvailable) {
-        $("#right-side-pane-notifications-clear").removeClass("hidden");
-    }
-
     $("#right-sidebar").on("click", ".btn", function (e) {
 
         var clickEvent = $(this).data('click-event');

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.ui.navbar.nav-menu/public/templates/notifications.hbs

@@ -6,7 +6,7 @@
                     <i class="icon fw fw-info"></i>
                     <a href="{{../context}}/device/{{deviceType}}?id={{deviceIdentifier}}"
                        data-id="{{id}}"
-                       data-url="device?type={{deviceType}}&id={{deviceIdentifier}}"
+                       data-url="{{../context}}/device/{{deviceType}}?id={{deviceIdentifier}}"
                        class="new-notification" data-click-event="remove-form">
                         {{deviceType}} : {{deviceName}}
                     </a>