Adding UI enhancements and including unit tests

revert-70aa11f8
Ace 7 years ago
parent fb6c98b969
commit e2ce619166

@ -216,5 +216,12 @@ public class NotificationManagementServiceImplTests {
" as added no. of records."); " 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));
}
} }

@ -44,21 +44,6 @@
<div class="wr-hidden-operations-content col-lg-8" style="padding: 5px" <div class="wr-hidden-operations-content col-lg-8" style="padding: 5px"
id="ast-container"> 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> </div>
</div> </div>
@ -68,8 +53,13 @@
</div> </div>
{{/zone}} {{/zone}}
{{#zone "bottomJs"}} {{#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> type="text/x-handlebars-template"></script>
{{js "js/notification-listing.js"}} {{js "js/notification-listing.js"}}
{{/zone}} {{/zone}}

@ -29,30 +29,74 @@ function InitiateViewOption() {
} }
function loadNotifications() { 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( $.template(
"notification-listing", "notification-listing-new",
deviceListingSrc, deviceListingNewSrc,
function (template) { function (template) {
invokerUtil.get( invokerUtil.get(
deviceMgtAPIBaseURI + "/notifications", deviceMgtAPIBaseURI + "/notifications?status=NEW",
// on success // on success
function (data, textStatus, jqXHR) { function (data, textStatus, jqXHR) {
if (jqXHR.status == 200 && data) { if (jqXHR.status == 200 && data) {
data = JSON.parse(data); data = JSON.parse(data);
if (data["notifications"] && data["notifications"].length > 0) { if (data["notifications"]) {
notificationsAvailable = true; notificationsAvailable = true;
var viewModel = {}; var viewModel = {};
viewModel["notifications"] = data["notifications"]; viewModel["notifications"] = data["notifications"];
viewModel["appContext"] = context; viewModel["appContext"] = context;
var content = template(viewModel); var content = template(viewModel);
$("#ast-container").html(content); $("#ast-container").append(content);
var settings = { var settings = {
"sorting" : false "sorting" : false
}; };
$("#unread-notifications").datatables_extended(settings); $("#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",
// 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
};
$("#all-notifications").datatables_extended(settings); $("#all-notifications").datatables_extended(settings);
} }
} }
@ -70,16 +114,9 @@ function loadNotifications() {
function showAdvanceOperation(operation, button) { function showAdvanceOperation(operation, button) {
$(button).addClass('selected'); $(button).addClass('selected');
$(button).siblings().removeClass('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"; var hiddenOperation = ".wr-hidden-operations-content > div";
$(hiddenOperation + '[data-operation="' + operation + '"]').show();
$(hiddenOperation + '[data-operation="' + operation + '"]').siblings().hide(); $(hiddenOperation + '[data-operation="' + operation + '"]').siblings().hide();
$(hiddenOperation + '[data-operation="' + operation + '"]').show();
} }
$(document).ready(function () { $(document).ready(function () {
@ -143,6 +180,10 @@ $(document).ready(function () {
function (data) { function (data) {
$('.message').remove(); $('.message').remove();
$("#notification-bubble").html(0); $("#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 () { }, function () {
var content = "<li class='message message-danger'><h4><i class='icon fw fw-error'></i>Warning</h4>" + 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" + "<p>Unexpected error occurred while loading notification. Please refresh the page and" +

@ -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 -->

@ -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-->

@ -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 -->

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

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

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

Loading…
Cancel
Save