Merge pull request #220 from charithag/master

Add missing UI functionalities
4.x.x
Ruwan 9 years ago
commit 928ef622d7

@ -20,6 +20,7 @@ var groupModule = {};
(function (groupModule) { (function (groupModule) {
var log = new Log("/app/modules/group.js"); var log = new Log("/app/modules/group.js");
var userModule = require("/app/modules/user.js").userModule;
var constants = require('/app/modules/constants.js'); var constants = require('/app/modules/constants.js');
var devicemgtProps = require('/app/conf/devicemgt-props.js').config(); var devicemgtProps = require('/app/conf/devicemgt-props.js').config();
var utility = require("/app/modules/utility.js").utility; var utility = require("/app/modules/utility.js").utility;
@ -32,7 +33,12 @@ var groupModule = {};
var endPoint; var endPoint;
groupModule.getGroupCount = function () { groupModule.getGroupCount = function () {
var permissions = userModule.getUIPermissions();
if (permissions.LIST_ALL_GROUPS) {
endPoint = groupServiceEndpoint + "/count";
} else if (permissions.LIST_GROUPS) {
endPoint = groupServiceEndpoint + "/user/" + user.username + "/count"; endPoint = groupServiceEndpoint + "/user/" + user.username + "/count";
}
return serviceInvokers.XMLHttp.get( return serviceInvokers.XMLHttp.get(
endPoint, function (responsePayload) { endPoint, function (responsePayload) {
return responsePayload; return responsePayload;

@ -100,18 +100,19 @@
<th data-for="By Ownership" class="select-filter"></th> <th data-for="By Ownership" class="select-filter"></th>
<th class="no-sort"></th> <th class="no-sort"></th>
</tr> </tr>
<tr class="bulk-action-row"> <!--TODO: Enable bulk action row after gain compatibility with iot operation bar-->
<th colspan="7"> <!--<tr class="bulk-action-row">-->
<div id="operation-bar" class="hidden"> <!--<th colspan="7">-->
{{unit "mdm.unit.device.operation-bar"}} <!--<div id="operation-bar" class="hidden">-->
</div> <!--{{!unit "mdm.unit.device.operation-bar"}}-->
<div id="operation-guide" class="bs-callout bs-callout-info"> <!--</div>-->
<h4>Enabling Device Operations</h4> <!--<div id="operation-guide" class="bs-callout bs-callout-info">-->
<p>To enable device operations, select the desired platform from above <!--<h4>Enabling Device Operations</h4>-->
filter.</p> <!--<p>To enable device operations, select the desired platform from above-->
</div> <!--filter.</p>-->
</th> <!--</div>-->
</tr> <!--</th>-->
<!--</tr>-->
</thead> </thead>
<tbody id="ast-container"> <tbody id="ast-container">
@ -326,7 +327,6 @@
{{#zone "bottomJs"}} {{#zone "bottomJs"}}
<script id="device-listing" data-current-user="{{currentUser.username}}" data-device-types="{{deviceTypes}}" <script id="device-listing" data-current-user="{{currentUser.username}}" data-device-types="{{deviceTypes}}"
data-image-resource="{{@app.context}}/public/cdmf.unit.device.type." data-image-resource="{{@app.context}}/public/cdmf.unit.device.type."
src="{{@page.publicUri}}/templates/listing.hbs"
type="text/x-handlebars-template"></script> type="text/x-handlebars-template"></script>
{{js "js/listing.js"}} {{js "js/listing.js"}}
{{/zone}} {{/zone}}

@ -70,7 +70,6 @@ $(document).ready(function () {
addDeviceSelectedClass(this); addDeviceSelectedClass(this);
}); });
var i;
var permissionList = $("#permission").data("permission"); var permissionList = $("#permission").data("permission");
for (var key in permissionList) { for (var key in permissionList) {
if (permissionList.hasOwnProperty(key)) { if (permissionList.hasOwnProperty(key)) {
@ -163,10 +162,8 @@ function toTitleCase(str) {
function loadDevices(searchType, searchParam){ function loadDevices(searchType, searchParam){
var deviceListing = $("#device-listing"); var deviceListing = $("#device-listing");
var deviceListingSrc = deviceListing.attr("src");
var imageResource = deviceListing.data("image-resource"); var imageResource = deviceListing.data("image-resource");
var currentUser = deviceListing.data("currentUser"); var currentUser = deviceListing.data("currentUser");
var frontEndPagination = false;
var serviceURL; var serviceURL;
if ($.hasPermission("LIST_DEVICES")) { if ($.hasPermission("LIST_DEVICES")) {
@ -206,6 +203,16 @@ function loadDevices(searchType, searchParam){
return type; return type;
} }
function getDeviceTypeCategory(type) {
var deviceTypes = deviceListing.data("deviceTypes");
for (var i = 0; i < deviceTypes.length; i++) {
if (deviceTypes[i].type == type) {
return deviceTypes[i].category;
}
}
return type;
}
$('#device-grid').datatables_extended ({ $('#device-grid').datatables_extended ({
serverSide: true, serverSide: true,
processing: false, processing: false,
@ -238,7 +245,8 @@ function loadDevices(searchType, searchParam){
return html; return html;
}}, }},
{ targets: 2, data: 'enrolmentInfo.owner', className: 'fade-edge remove-padding-top'}, { targets: 2, data: 'enrolmentInfo.owner', className: 'fade-edge remove-padding-top'},
{ targets: 3, data: 'enrolmentInfo.status', className: 'fade-edge remove-padding-top' , {
targets: 3, data: 'enrolmentInfo.status', className: 'fade-edge remove-padding-top',
render: function ( status, type, row, meta ) { render: function ( status, type, row, meta ) {
var html; var html;
switch (status) { switch (status) {
@ -257,11 +265,22 @@ function loadDevices(searchType, searchParam){
} }
return html; return html;
}}, }},
{ targets: 4, data: 'type' , className: 'fade-edge remove-padding-top' , {
targets: 4, data: 'type', className: 'fade-edge remove-padding-top',
render: function ( status, type, row, meta ) { render: function ( status, type, row, meta ) {
return getDeviceTypeLabel(row.type); return getDeviceTypeLabel(row.type);
}}, }
{ targets: 5, data: 'enrolmentInfo.ownership' , className: 'fade-edge remove-padding-top' }, },
{
targets: 5, data: 'enrolmentInfo.ownership', className: 'fade-edge remove-padding-top',
render: function (status, type, row, meta) {
if (getDeviceTypeCategory(row.type) == 'mobile') {
return row.enrolmentInfo.ownership;
} else {
return null;
}
}
},
{ targets: 6, data: 'enrolmentInfo.status' , className: 'text-right content-fill text-left-on-grid-view no-wrap' , { targets: 6, data: 'enrolmentInfo.status' , className: 'text-right content-fill text-left-on-grid-view no-wrap' ,
render: function ( status, type, row, meta ) { render: function ( status, type, row, meta ) {
var deviceType = row.type; var deviceType = row.type;
@ -271,6 +290,15 @@ function loadDevices(searchType, searchParam){
html = '<a href="device/' + deviceType + '?id=' + deviceIdentifier + '" data-click-event="remove-form"' + html = '<a href="device/' + deviceType + '?id=' + deviceIdentifier + '" data-click-event="remove-form"' +
' class="btn padding-reduce-on-grid-view"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' + ' class="btn padding-reduce-on-grid-view"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-view fw-stack-1x"></i></span><span class="hidden-xs hidden-on-grid-view">View</span></a>'; '<i class="fw fw-view fw-stack-1x"></i></span><span class="hidden-xs hidden-on-grid-view">View</span></a>';
html += '<a href="analytics?deviceId=' + deviceIdentifier + '&deviceType=' + deviceType + '&deviceName=' + row.name + '" ' +
'data-click-event="remove-form" class="btn padding-reduce-on-grid-view"><span class="fw-stack">' +
'<i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-statistics fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Analytics</span>';
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-device-link" ' +
'data-deviceid="' + deviceIdentifier + '" data-devicetype="' + deviceType + '" data-devicename="' + row.name + '">' +
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-edit fw-stack-1x"></i></span>' +
'<span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
} }
return html; return html;
}} }}
@ -285,6 +313,7 @@ function loadDevices(searchType, searchParam){
var status = data.enrolmentInfo.status; var status = data.enrolmentInfo.status;
var ownership = data.enrolmentInfo.ownership; var ownership = data.enrolmentInfo.ownership;
var deviceType = data.type; var deviceType = data.type;
var category = getDeviceTypeCategory(deviceType);
$.each($('td', row), function (colIndex) { $.each($('td', row), function (colIndex) {
switch(colIndex) { switch(colIndex) {
case 1: case 1:
@ -304,18 +333,21 @@ function loadDevices(searchType, searchParam){
case 4: case 4:
$(this).attr('data-grid-label', "Type"); $(this).attr('data-grid-label', "Type");
$(this).attr('data-search', deviceType); $(this).attr('data-search', deviceType);
$(this).attr('data-display', deviceType); $(this).attr('data-display', getDeviceTypeLabel(deviceType));
break; break;
case 5: case 5:
if (category == 'mobile') {
$(this).attr('data-grid-label', "Ownership"); $(this).attr('data-grid-label', "Ownership");
$(this).attr('data-search', ownership); $(this).attr('data-search', ownership);
$(this).attr('data-display', ownership); $(this).attr('data-display', ownership);
}
break; break;
} }
}); });
}, },
"fnDrawCallback": function( oSettings ) { "fnDrawCallback": function( oSettings ) {
$(".icon .text").res_text(0.2); $(".icon .text").res_text(0.2);
attachDeviceEvents();
} }
}); });
$(deviceCheckbox).click(function () { $(deviceCheckbox).click(function () {
@ -338,50 +370,6 @@ function openCollapsedNav() {
}); });
} }
function loadGroupedDevices(groupId) {
var serviceURL = "api/group/id/" + groupId + "/device/all";
var deviceListing = $("#device-listing");
var deviceListingSrc = deviceListing.attr("src");
var imageResource = deviceListing.data("image-resource");
var currentUser = deviceListing.data("currentUser");
$.template("device-listing", deviceListingSrc, function (template) {
var loadGroupRequest = $.ajax({
url: serviceURL,
method: "GET",
contentType: "application/json",
accept: "application/json"
});
loadGroupRequest.done(function (data) {
data = JSON.parse(data);
var viewModel = {};
viewModel.devices = data.data;
viewModel.imageLocation = imageResource;
viewModel.isGroupView = "true";
if (viewModel.devices.length > 0) {
$('#device-grid').removeClass('hidden');
var content = template(viewModel);
$("#ast-container").html(content);
/*
* On device checkbox select add parent selected style class
*/
$(deviceCheckbox).click(function () {
addDeviceSelectedClass(this);
});
attachDeviceEvents();
} else {
$('#device-table').addClass('hidden');
$('#device-listing-status-msg').text('No device is available to be displayed.');
}
$("#loading-content").remove();
$('#device-grid').datatables_extended();
$(".icon .text").res_text(0.2);
});
});
}
function initPage() { function initPage() {
var deviceListing = $("#device-listing"); var deviceListing = $("#device-listing");
var currentUser = deviceListing.data("currentUser"); var currentUser = deviceListing.data("currentUser");
@ -642,9 +630,9 @@ function attachDeviceEvents() {
}); });
postOperationRequest.done(function (data) { postOperationRequest.done(function (data) {
$(modalPopupContent).html($('#edit-device-200-content').html()); $(modalPopupContent).html($('#edit-device-200-content').html());
$("h4[data-deviceid='" + deviceId + "']").html(newDeviceName);
setTimeout(function () { setTimeout(function () {
hidePopup(); hidePopup();
location.reload(false);
}, 2000); }, 2000);
}); });
postOperationRequest.fail(function (jqXHR, textStatus) { postOperationRequest.fail(function (jqXHR, textStatus) {

@ -17,6 +17,7 @@
{{/zone}} {{/zone}}
{{#zone "navbarActions"}} {{#zone "navbarActions"}}
{{#if permissions.ADD_GROUP}}
<li> <li>
<a href="{{@app.context}}/group/add" class="cu-btn"> <a href="{{@app.context}}/group/add" class="cu-btn">
<span class="icon fw-stack"> <span class="icon fw-stack">
@ -26,6 +27,7 @@
Add Group Add Group
</a> </a>
</li> </li>
{{/if}}
{{/zone}} {{/zone}}
{{#zone "content"}} {{#zone "content"}}
@ -33,6 +35,7 @@
<div class="wr-hidden-operations wr-advance-operations"></div> <div class="wr-hidden-operations wr-advance-operations"></div>
<div class="col-md-12 wr-page-content"> <div class="col-md-12 wr-page-content">
<div> <div>
<span id="permission" data-permission="{{permissions.list}}"></span>
{{#if groupCount}} {{#if groupCount}}
<div class="container-fluid"> <div class="container-fluid">
<table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view" <table class="table table-striped table-hover list-table display responsive nowrap data-table table-selectable grid-view"

@ -21,14 +21,15 @@ function onRequest(context) {
var userModule = require("/app/modules/user.js").userModule; var userModule = require("/app/modules/user.js").userModule;
var constants = require("/app/modules/constants.js"); var constants = require("/app/modules/constants.js");
var currentUser = session.get(constants.USER_SESSION_KEY); var currentUser = session.get(constants.USER_SESSION_KEY);
var page_data = {}; var page = {};
if (currentUser) { if (currentUser) {
page_data.permissions = userModule.getUIPermissions(); page.permissions = userModule.getUIPermissions();
page_data.currentUser = currentUser; page.permissions.list = stringify(page.permissions);
page.currentUser = currentUser;
var groupCount = groupModule.getGroupCount(); var groupCount = groupModule.getGroupCount();
if (groupCount > 0) { if (groupCount > 0) {
page_data.groupCount = groupCount; page.groupCount = groupCount;
} }
} }
return page_data; return page;
} }

@ -82,6 +82,19 @@ function toTitleCase(str) {
}); });
} }
(function () {
var permissionSet = {};
//This method is used to setup permission for device listing
$.setPermission = function (permission) {
permissionSet[permission] = true;
};
$.hasPermission = function (permission) {
return permissionSet[permission];
};
})();
function loadGroups() { function loadGroups() {
var groupListing = $("#group-listing"); var groupListing = $("#group-listing");
var groupListingSrc = groupListing.attr("src"); var groupListingSrc = groupListing.attr("src");
@ -108,8 +121,21 @@ function loadGroups() {
$(".icon .text").res_text(0.2); $(".icon .text").res_text(0.2);
}; };
invokerUtil.get("/devicemgt_admin/groups/user/" + currentUser + "?start=0&rowCount=1000", var serviceURL;
successCallback, function (message) { if ($.hasPermission("LIST_ALL_GROUPS")) {
serviceURL = "/devicemgt_admin/groups?start=0&rowCount=1000";
} else if ($.hasPermission("LIST_GROUPS")) {
//Get authenticated users groups
serviceURL = "/devicemgt_admin/groups/user/" + currentUser + "?start=0&rowCount=1000";
} else {
$("#loading-content").remove();
$('#device-table').addClass('hidden');
$('#device-listing-status-msg').text('Permission denied.');
$("#device-listing-status").removeClass(' hidden');
return;
}
invokerUtil.get(serviceURL, successCallback, function (message) {
displayErrors(message.content); displayErrors(message.content);
}); });
@ -129,6 +155,13 @@ function openCollapsedNav() {
* DOM ready functions. * DOM ready functions.
*/ */
$(document).ready(function () { $(document).ready(function () {
var permissionList = $("#permission").data("permission");
for (var key in permissionList) {
if (permissionList.hasOwnProperty(key)) {
$.setPermission(key);
}
}
loadGroups(); loadGroups();
//$('#device-grid').datatables_extended(); //$('#device-grid').datatables_extended();
@ -138,30 +171,36 @@ $(document).ready(function () {
}); });
/* for device list sorting drop down */ /* for device list sorting drop down */
$(".ctrl-filter-type-switcher").popover({ $(".ctrl-filter-type-switcher").popover(
{
html: true, html: true,
content: function () { content: function () {
return $("#content-filter-types").html(); return $("#content-filter-types").html();
} }
}); }
);
/* for data tables*/ /* for data tables*/
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
$("[data-toggle=popover]").popover(); $("[data-toggle=popover]").popover();
$(".ctrl-filter-type-switcher").popover({ $(".ctrl-filter-type-switcher").popover(
{
html: true, html: true,
content: function () { content: function () {
return $('#content-filter-types').html(); return $('#content-filter-types').html();
} }
}); }
);
$('#nav').affix({ $('#nav').affix(
{
offset: { offset: {
top: $('header').height() top: $('header').height()
} }
}); }
);
}); });
@ -212,12 +251,14 @@ function attachEvents() {
$('#user-names').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>'); $('#user-names').html('<div style="height:100px" data-state="loading" data-loading-text="Loading..." data-loading-style="icon-only" data-loading-inverse="true"></div>');
showPopup(); showPopup();
$("a#share-group-next-link").hide(); $("a#share-group-next-link").hide();
var userRequest = $.ajax({ var userRequest = $.ajax(
{
url: "api/user/all", url: "api/user/all",
method: "GET", method: "GET",
contentType: "application/json", contentType: "application/json",
accept: "application/json" accept: "application/json"
}); }
);
userRequest.done(function (data, txtStatus, jqxhr) { userRequest.done(function (data, txtStatus, jqxhr) {
var users = JSON.parse(data); var users = JSON.parse(data);
var status = jqxhr.status; var status = jqxhr.status;
@ -318,10 +359,9 @@ function attachEvents() {
var successCallback = function (data) { var successCallback = function (data) {
data = JSON.parse(data); data = JSON.parse(data);
if (data.status == 200) { if (data.status == 200) {
$(modalPopupContent).html($('#edit-group-200-content').html());
$("h4[data-groupid='" + groupId + "']").html(newGroupName);
setTimeout(function () { setTimeout(function () {
hidePopup(); hidePopup();
location.reload(false);
}, 2000); }, 2000);
} else { } else {
displayErrors(status); displayErrors(status);

@ -1,5 +1,5 @@
/* /*
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved. * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
* *
* WSO2 Inc. licenses this file to you under the Apache License, * WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except * Version 2.0 (the "License"); you may not use this file except
@ -78,7 +78,8 @@ $.fn.datatables_extended = function(settings){
$( "#operation-guide" ).hide(); $( "#operation-guide" ).hide();
$( "#operation-bar" ).removeClass("hidden"); $( "#operation-bar" ).removeClass("hidden");
$("#operation-bar").show(); $("#operation-bar").show();
loadOperationBar(val); //TODO: Enable after adding iot operations bar
//loadOperationBar(val);
} }
} }
@ -86,13 +87,14 @@ $.fn.datatables_extended = function(settings){
$(column).each(function () { $(column).each(function () {
if ($(column.nodes()).attr('data-search')) { if ($(column.nodes()).attr('data-search')) {
var titles = []; var values = [];
column.nodes().unique().sort().each(function (d, j) { column.nodes().unique().sort().each(function (d, j) {
var title = $(d).attr('data-display'); var title = $(d).attr('data-display');
if ($.inArray(title, titles) < 0) { var value = $(d).attr('data-search');
titles.push(title); if ($.inArray(value, values) < 0) {
if (title !== undefined) { values.push(value);
select.append('<option value="' + title + '">' + title + '</option>') if (value !== undefined) {
select.append('<option value="' + value + '">' + title + '</option>')
} }
} }
}); });

@ -2193,7 +2193,7 @@ input[type=number].form-control {
} }
.table.list-table.grid-view .padding-reduce-on-grid-view { .table.list-table.grid-view .padding-reduce-on-grid-view {
padding: 2px; padding: 1px;
} }
.table.list-table.grid-view .text-left-on-grid-view { .table.list-table.grid-view .text-left-on-grid-view {
@ -6428,7 +6428,7 @@ body.inverse .fade-edge:after {
display: none; display: none;
} }
.table.list-table.grid-view .padding-reduce-on-grid-view { .table.list-table.grid-view .padding-reduce-on-grid-view {
padding: 2px; padding: 1px;
} }
.table.list-table.grid-view .text-left-on-grid-view { .table.list-table.grid-view .text-left-on-grid-view {
text-align: left; text-align: left;

Loading…
Cancel
Save