Refactoring group sharing modal

merge-requests/7/head
Rasika Perera 8 years ago
parent 54211bc3cc
commit 3fe18ba4bb

@ -80,7 +80,7 @@
<div id="ast-container" class="ast-container list-view"> <div id="ast-container" class="ast-container list-view">
<div class="ctrl-info-panel col-centered text-center wr-login"> <div class="ctrl-info-panel col-centered text-center wr-login">
<h2>You don't have any group registered at the moment.</h2> <h2>You don't have any group registered at the moment.</h2>
<br/> <br />
{{#if permissions.ADD_GROUP}} {{#if permissions.ADD_GROUP}}
<p class="text-center"> <p class="text-center">
<a href="{{@app.context}}/group/add" class="wr-btn"> <a href="{{@app.context}}/group/add" class="wr-btn">
@ -115,67 +115,37 @@
</div> </div>
<div id="user-names"> <div id="user-names">
<h4> <h4>
Enter user name to manage group sharing Select user roles to manage group sharing
<br><br> <br><br>
<input type="text" id="share-user-selector" class="form-control modal-input operationDataKeys"> <div style="max-height: 200px; overflow: scroll">
</input> <br />
{{#each userRoles}}
<div class="wr-input-control">
<label class="wr-input-control checkbox">
<input class="roleCheckBoxes" type="checkbox"
data-role-name="{{this}}" />
<span class="helper"
title="{{this}}">{{this}}</span>
</label>
</div>
{{/each}}
</div>
</h4> </h4>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="buttons"> <div class="buttons">
{{#if permissions.CREATE_GROUP_ROLES}}
<a href="{{@app.context}}/role/add" class="btn-operations">
New Role
</a>
<a href="#" id="share-group-new-role-from-selection" class="btn-operations">
New Role from Selection
</a>
{{/if}}
<a href="#" id="share-group-next-link" class="btn-operations"> <a href="#" id="share-group-next-link" class="btn-operations">
Next Next
</a> </a>
<a href="#" id="share-group-w1-cancel-link" class="btn-operations btn-default">
Cancel
</a>
</div>
</div>
</div>
<div id="share-group-w2-modal-content" class="hide">
<div class="modal-header">
<h3 class="pull-left modal-title">
<span>
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-share fw-stack-1x"></i>
</span> Group Sharing
</span>
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i
class="fw fw-cancel"></i></button>
</div>
<div class="modal-body add-margin-top-2x add-margin-bottom-2x">
<div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<div id="user-roles">
<h4>
Select sharing roles
<br><br>
</h4>
</div>
{{#if permissions.CREATE_GROUP_ROLES}}
<div class="buttons">
<a href="#" id="share-group-w2-add-new-role-link" class="btn-operations">
<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-add fw-stack-1x"></i></span> Add New Role
</a>
</div>
{{/if}}
</div>
<div class="modal-footer">
<div class="buttons">
<a href="#" id="share-group-yes-link" class="btn-operations">
OK
</a>
<a href="#" id="share-group-w2-cancel-link" class="btn-operations btn-default">
Cancel
</a>
</div> </div>
</div> </div>
</div> </div>
@ -201,25 +171,10 @@
<h4> <h4>
Enter Group Sharing Role Name Enter Group Sharing Role Name
<br><br> <br><br>
<input type="text" id="group-sharing-role-name" class="form-control modal-input operationDataKeys"/> <input type="text" id="group-sharing-role-name"
<br><br> class="form-control modal-input operationDataKeys" />
Role Permissions
<br><br> <br><br>
</h4> </h4>
<table class="table">
<tbody id="permission-table-container">
{{#each groupPermissions}}
<tr>
<td>{{this}}</td>
<td>
<a href="#" class="btn-operations btn-default" onclick="togglePermissionAction(this)" data-value="unchecked">
<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-add fw-stack-1x"></i></span>
</a>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -239,7 +194,43 @@
<div class="content"> <div class="content">
<div class="row"> <div class="row">
<div class="col-lg-5 col-md-6 col-centered"> <div class="col-lg-5 col-md-6 col-centered">
<h3>Group sharing updated successfully.</h3> <h3>Group was successfully updated.</h3>
<br />
Do you need to Add / Remove users to the chosen roles?
<div class="buttons">
<a href="{{@app.context}}/users" id="share-group-add-users-yes-link"
class="btn-operations">
Yes
</a>
<a href="#" class="btn-operations btn-default" data-dismiss="modal">
No
</a>
</div>
<br />
</div>
</div>
</div>
</div>
<div id="create-combined-role-200-content" class="hide">
<div class="content">
<div class="row">
<div class="col-lg-5 col-md-6 col-centered">
<h3>New Role was successfully created.</h3>
<br />
Do you need to Add / Remove users to the chosen roles?
<div class="buttons">
<a href="{{@app.context}}/users" id="share-group-add-users-yes-link"
class="btn-operations">
Yes
</a>
<a href="#" class="btn-operations btn-default" data-dismiss="modal">
No
</a>
</div>
<br />
</div> </div>
</div> </div>
</div> </div>
@ -256,7 +247,8 @@
Yes Yes
</a> </a>
<a href="#" id="remove-group-cancel-link" class="btn-operations btn-default"> <a href="#" id="remove-group-cancel-link" class="btn-operations btn-default"
data-dismiss="modal">
Cancel Cancel
</a> </a>
</div> </div>

@ -23,6 +23,10 @@ function onRequest(context) {
var groupPermissions = require("/app/pages/cdmf.page.groups/public/group-permissions.json"); var groupPermissions = require("/app/pages/cdmf.page.groups/public/group-permissions.json");
var currentUser = session.get(constants.USER_SESSION_KEY); var currentUser = session.get(constants.USER_SESSION_KEY);
var page = {}; var page = {};
var rolesResult = userModule.getRoles();
if (rolesResult.status == "success") {
page.userRoles = rolesResult.content;
}
if (currentUser) { if (currentUser) {
page.permissions = userModule.getUIPermissions(); page.permissions = userModule.getUIPermissions();
page.permissions.list = stringify(page.permissions); page.permissions.list = stringify(page.permissions);

@ -110,12 +110,12 @@ function loadGroups() {
var objects = []; var objects = [];
$(data.deviceGroups).each(function (index) { $(data.deviceGroups).each(function (index) {
objects.push({ objects.push({
groupId: data.deviceGroups[index].id, groupId: data.deviceGroups[index].id,
name: data.deviceGroups[index].name, name: data.deviceGroups[index].name,
description: data.deviceGroups[index].description, description: data.deviceGroups[index].description,
owner: data.deviceGroups[index].owner, owner: data.deviceGroups[index].owner,
dateOfCreation: data.deviceGroups[index].dateOfCreation dateOfCreation: data.deviceGroups[index].dateOfCreation
}) })
}); });
var json = { var json = {
"recordsTotal": data.count, "recordsTotal": data.count,
@ -154,34 +154,50 @@ function loadGroups() {
class: 'text-right content-fill text-left-on-grid-view no-wrap', class: 'text-right content-fill text-left-on-grid-view no-wrap',
render: function (id, type, row, meta) { render: function (id, type, row, meta) {
var html; var html;
if ($.hasPermission("VIEW_GROUP_DEVICES")){ if ($.hasPermission("VIEW_GROUP_DEVICES")) {
html = '<a href="devices?groupId=' + row.groupId + '&groupName=' + row.name + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' + html = '<a href="devices?groupId=' + row.groupId + '&groupName=' + row.name
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-view fw-stack-1x"></i></span>' + + '" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' +
'<span class="hidden-xs hidden-on-grid-view">View Devices</span></a>'; '<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-view fw-stack-1x"></i></span>'
+
html += '<a href="group/' + row.name + '/' + row.groupId + '/analytics" data-click-event="remove-form" class="btn padding-reduce-on-grid-view">' + '<span class="hidden-xs hidden-on-grid-view">View Devices</span></a>';
'<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></a>'; html += '<a href="group/' + row.name + '/' + row.groupId
+ '/analytics" 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></a>';
} else { } else {
html = ''; html = '';
} }
if($.hasPermission("SHARE_GROUP")) { if ($.hasPermission("SHARE_GROUP")) {
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view share-group-link" data-group-id="' + row.groupId + '" ' + html +=
'data-group-owner="' + row.owner + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-share fw-stack-1x"></i></span>' + '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view share-group-link" data-group-id="'
+ row.groupId + '" ' +
'data-group-owner="' + row.owner
+ '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-share fw-stack-1x"></i></span>'
+
'<span class="hidden-xs hidden-on-grid-view">Share</span></a>'; '<span class="hidden-xs hidden-on-grid-view">Share</span></a>';
} else { } else {
html += ''; html += '';
} }
if($.hasPermission("UPDATE_GROUP")) { if ($.hasPermission("UPDATE_GROUP")) {
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-group-link" data-group-name="' + row.name + '" ' + html +=
'data-group-owner="' + row.owner + '" data-group-description="' + row.description + '" data-group-id="' + row.groupId + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' + '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view edit-group-link" data-group-name="'
+ row.name + '" ' +
'data-group-owner="' + row.owner + '" data-group-description="' + row.description
+ '" data-group-id="' + row.groupId
+ '"><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>'; '<i class="fw fw-edit fw-stack-1x"></i></span><span class="hidden-xs hidden-on-grid-view">Edit</span></a>';
} else { } else {
html += ''; html += '';
} }
if ($.hasPermission("REMOVE_GROUP")) { if ($.hasPermission("REMOVE_GROUP")) {
html += '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-group-link" data-group-id="' + row.groupId + '" ' + html +=
'data-group-owner="' + row.owner + '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-delete fw-stack-1x"></i>' + '<a href="#" data-click-event="remove-form" class="btn padding-reduce-on-grid-view remove-group-link" data-group-id="'
+ row.groupId + '" ' +
'data-group-owner="' + row.owner
+ '"><span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-delete fw-stack-1x"></i>'
+
'</span><span class="hidden-xs hidden-on-grid-view">Delete</span></a>'; '</span><span class="hidden-xs hidden-on-grid-view">Delete</span></a>';
} else { } else {
html += ''; html += '';
@ -336,7 +352,7 @@ function hidePopup() {
$(modalPopupContent).html(""); $(modalPopupContent).html("");
$(modalPopupContent).removeClass("operation-data"); $(modalPopupContent).removeClass("operation-data");
$(modalPopup).modal('hide'); $(modalPopup).modal('hide');
$('body').removeClass('modal-open').css('padding-right','0px'); $('body').removeClass('modal-open').css('padding-right', '0px');
$('.modal-backdrop').remove(); $('.modal-backdrop').remove();
} }
@ -352,33 +368,37 @@ function attachEvents() {
$("a.share-group-link").click(function () { $("a.share-group-link").click(function () {
var groupId = $(this).data("group-id"); var groupId = $(this).data("group-id");
var groupOwner = $(this).data("group-owner"); var groupOwner = $(this).data("group-owner");
$(modalPopupContent).html($('#share-group-w1-modal-content').html()); $(modalPopupContent).html($('#share-group-w1-modal-content').html());
$("a#share-group-next-link").show();
showPopup(); showPopup();
$("a#share-group-next-link").click(function () {
var successCallback = function (data) { markAlreadySavedUsersRoles(groupId);
if(data === 'true') { var shareGroupNextLink = $("a#share-group-next-link");
getAllRoles(groupId, selectedUser); shareGroupNextLink.click(function () {
} else { var roles = [];
var errorMsgWrapper = "#notification-error-msg"; $('.modal .roleCheckBoxes').each(
var errorMsg = "#notification-error-msg span"; function () {
$(errorMsg).text("User does not exist."); if ($(this).is(':checked')) {
$(errorMsgWrapper).removeClass("hidden"); roles.push($(this).data('role-name'));
}
} }
} );
var selectedUser = $('#share-user-selector').val(); updateGroupShare(groupId, roles);
if (selectedUser == $("#group-listing").data("current-user")) {
$("#user-names").html("Please specify a user other than current user.");
$("a#share-group-next-link").hide();
} else {
invokerUtil.get("/api/device-mgt/v1.0/users/checkUser?username=" + selectedUser,
successCallback, function (message) {
displayErrors(message);
});
}
}); });
$("a#share-group-w1-cancel-link").click(function () {
hidePopup(); var shareGroupNewRoleFromSelectionLink = $("a#share-group-new-role-from-selection");
shareGroupNewRoleFromSelectionLink.click(function () {
var roles = [];
$('.modal .roleCheckBoxes').each(
function () {
if ($(this).is(':checked')) {
roles.push($(this).data('role-name'));
}
}
);
addNewRole(roles);
// $(modalPopupContent).html($('#share-group-w3-modal-content').html());
// createNewRole(roles);
}); });
}); });
@ -408,8 +428,8 @@ function attachEvents() {
}; };
invokerUtil.delete("/api/device-mgt/v1.0/groups/id/" + groupId, invokerUtil.delete("/api/device-mgt/v1.0/groups/id/" + groupId,
successCallback, function (message) { successCallback, function (message) {
displayErrors(message); displayErrors(message);
}); });
}); });
@ -453,8 +473,8 @@ function attachEvents() {
}; };
invokerUtil.put("/api/device-mgt/v1.0/groups/id/" + groupId, group, invokerUtil.put("/api/device-mgt/v1.0/groups/id/" + groupId, group,
successCallback, function (message) { successCallback, function (message) {
displayErrors(message); displayErrors(message);
}); });
}); });
@ -464,16 +484,22 @@ function attachEvents() {
}); });
} }
function getAllRoles(groupId, selectedUser) { function markAlreadySavedUsersRoles(groupId) {
$(modalPopupContent).html($('#share-group-w2-modal-content').html());
$("a#share-group-yes-link").hide();
var successCallback = function (data, textStatus, xhr) { var successCallback = function (data, textStatus, xhr) {
data = JSON.parse(data); data = JSON.parse(data);
if (xhr.status == 200) { if (xhr.status == 200) {
if (data.roles.length > 0) { if (data.roles.length > 0) {
generateRoleMap(groupId, selectedUser, data.roles); for (var i = 0; i < data.roles.length; i++) {
$('.roleCheckBoxes').each(
function () {
if (data.roles[i] == $(this).data('role-name')) {
$(this).attr('checked', true);
}
}
);
}
} else { } else {
$('#user-roles').html("There is no any roles for this group."); return;
} }
} else { } else {
displayErrors(xhr); displayErrors(xhr);
@ -481,98 +507,17 @@ function getAllRoles(groupId, selectedUser) {
}; };
invokerUtil.get("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles", invokerUtil.get("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles",
successCallback, function (message) { successCallback, function (message) {
displayErrors(message);
});
$("a#share-group-w2-cancel-link").click(function () {
hidePopup();
});
}
function generateRoleMap(groupId, selectedUser, allRoles) {
var successCallback = function (data, textStatus, xhr) {
data = JSON.parse(data);
if (xhr.status == 200) {
var userRoles = [];
if(data != "EMPTY") {
userRoles = data.roles;
}
var str = $('#user-roles').html();
for (var i = 0; i < allRoles.length; i++) {
var isChecked = '';
for (var j = 0; j < userRoles.length; j++) {
if (allRoles[i] == userRoles[j]) {
isChecked = 'checked';
break;
}
}
str += '<label class="wr-input-control checkbox"><input type="checkbox" class="form-control modal-input operationDataKeys" id="user-role-' + allRoles[i] + '" value="' + allRoles[i]
+ '" ' + isChecked + '/>' +'<span class="helper" title="Check to share this group role with user."> &nbsp;&nbsp;&nbsp;'+ allRoles[i] + '</span></label><br><br>';
}
$('#user-roles').html(str);
$("a#share-group-yes-link").show();
$("a#share-group-yes-link").show();
$("a#share-group-yes-link").click(function () {
var roles = [];
for (var i = 0; i < allRoles.length; i++) {
if ($('#user-role-' + allRoles[i]).is(':checked')) {
roles.push(allRoles[i]);
}
}
updateGroupShare(groupId, selectedUser, roles);
});
$("a#share-group-w2-add-new-role-link").click(function () {
addNewRole(groupId, selectedUser, allRoles);
});
} else {
displayErrors(xhr);
}
};
invokerUtil.get("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles?userName=" + selectedUser,
successCallback, function (message) {
displayErrors(message); displayErrors(message);
}); });
$("a#share-group-w2-cancel-link").click(function () {
hidePopup();
});
} }
function addNewRole(groupId, selectedUser, allRoles) { function addNewRole(roles) {
$(modalPopupContent).html($('#share-group-w3-modal-content').html()); $(modalPopupContent).html($('#share-group-w3-modal-content').html());
function getPermissions() {
var PERMISSION_PREFIX = '/permission/admin/';
var permissions = [];
$('#permission-table-container').find('tr').each(function () {
var row = $(this).closest('tr');
var permission = $(row).find('td:nth-child(1)').text();
var check = $(row).find('td:nth-child(2) a').data('value');
if(check === 'checked') {
permission = PERMISSION_PREFIX + permission;
permissions.push(permission);
}
});
return permissions;
};
$("a#share-group-w3-yes-link").click(function () { $("a#share-group-w3-yes-link").click(function () {
var successCallback = function (data, status, jqXHR) {
if(status == "success") {
getAllRoles(groupId, selectedUser);
}
}
var roleName = $('#group-sharing-role-name').val(); var roleName = $('#group-sharing-role-name').val();
var users = []; if (roleName) {
if(roleName) { createNewCombinedRole(roleName, roles);
var groupRoleInfo = {"roleName": roleName, "permissions": getPermissions(), "users": users};
var currentUser = $("#group-listing").data("current-user");
invokerUtil.post("/api/device-mgt/v1.0/groups/id/" + groupId + "/roles/create?userName=" + currentUser,
groupRoleInfo, successCallback, function (message) {
displayErrors(message);
});
} else { } else {
var errorMsgWrapper = "#notification-error-msg"; var errorMsgWrapper = "#notification-error-msg";
var errorMsg = "#notification-error-msg span"; var errorMsg = "#notification-error-msg span";
@ -588,7 +533,7 @@ function addNewRole(groupId, selectedUser, allRoles) {
function togglePermissionAction(element) { function togglePermissionAction(element) {
$(element).data('value', 'checked'); $(element).data('value', 'checked');
var icon = $(element).find("i")[1]; var icon = $(element).find("i")[1];
if($(icon).hasClass('fw-minus')) { if ($(icon).hasClass('fw-minus')) {
$(icon).removeClass('fw-minus'); $(icon).removeClass('fw-minus');
$(icon).addClass('fw-add'); $(icon).addClass('fw-add');
$(element).data('value', 'unchecked'); $(element).data('value', 'unchecked');
@ -599,7 +544,7 @@ function togglePermissionAction(element) {
} }
} }
function updateGroupShare(groupId, selectedUser, roles) { function updateGroupShare(groupId, roles) {
var successCallback = function (data) { var successCallback = function (data) {
$(modalPopupContent).html($('#share-group-200-content').html()); $(modalPopupContent).html($('#share-group-200-content').html());
setTimeout(function () { setTimeout(function () {
@ -608,11 +553,21 @@ function updateGroupShare(groupId, selectedUser, roles) {
}, 2000); }, 2000);
}; };
var deviceGroupShare = {"username": selectedUser, "groupRoles": roles };
invokerUtil.post("/api/device-mgt/v1.0/groups/id/" + groupId + "/share", invokerUtil.post("/api/device-mgt/v1.0/groups/id/" + groupId + "/share",
deviceGroupShare, successCallback, function (message) { roles, successCallback, function (message) {
displayErrors(message); displayErrors(message);
}); });
}
function createNewCombinedRole(roleName, roleList) {
var successCallback = function (data, status, jqXHR, isLast) {
$(modalPopupContent).html($('#create-combined-role-200-content').html());
showPopup();
};
invokerUtil.post("/api/device-mgt/v1.0/roles/create-combined-role/" + roleName, roleList,
successCallback, function (message) {
displayErrors(message);
});
} }
function displayErrors(jqXHR) { function displayErrors(jqXHR) {

Loading…
Cancel
Save