role UI changes
issue-id: OCS-188
Change-Id: I84a3bd6c7098ce927ae7f01324d43688594ec4f0
Signed-off-by: sukesh a c <sukeshac@huawei.com>
diff --git a/auth/src/main/webapp/user/createUser.html b/auth/src/main/webapp/user/createUser.html
index 40f8741..a652720 100644
--- a/auth/src/main/webapp/user/createUser.html
+++ b/auth/src/main/webapp/user/createUser.html
@@ -97,6 +97,39 @@
<td>
</td>
</tr>
+ <tr>
+ <td>
+ <span class="mandatory"></span>
+ </td>
+ <td class="row_interval">
+ <span>Roles</span><span>:</span>
+ </td>
+ <td>
+ <div>
+ <dl class="dropdown">
+
+ <dt>
+ <a href="#">
+ <span class="hida">Please select roles</span>
+ <p class="multiSel"></p>
+ </a>
+ </dt>
+
+ <dd>
+ <div class="mutliSelect">
+ <ul>
+
+ </ul>
+
+ </div>
+ </dd>
+ </dl>
+ </div>
+ </td>
+ <td>
+ <div id="rolesError" class="errorTip" style="visibility: hidden;">error.</div>
+ </td>
+ </tr>
</table>
</div>
<div id="role_content" class="suggestion_tip">
diff --git a/auth/src/main/webapp/user/css/user.css b/auth/src/main/webapp/user/css/user.css
index 6fe0b6f..199843f 100644
--- a/auth/src/main/webapp/user/css/user.css
+++ b/auth/src/main/webapp/user/css/user.css
@@ -92,4 +92,86 @@
}
#role_content table {
margin-left: 20px;
-}
\ No newline at end of file
+}
+
+
+.dropdown dd,
+.dropdown dt {
+ margin: 0px;
+ padding: 0px;
+}
+
+.dropdown ul {
+ margin: -1px 0 0 0;
+}
+
+.dropdown dd {
+ position: relative;
+}
+
+.dropdown a,
+.dropdown a:visited {
+ color: #fff;
+ text-decoration: none;
+ outline: none;
+ font-size: 12px;
+}
+
+.dropdown dt a {
+ min-height: 25px;
+ line-height: 24px;
+ overflow: hidden;
+ border: 1px solid #c3c3c3;
+ background-color: #fff;
+ padding: 0 0 0 6px;
+ border-radius: 4px;
+ color: #000;
+ display: inline-block;
+ outline: 0;
+ box-shadow: 1px 1px #f6f6f6 inset;
+ font-size: 12px;
+ background: #fff;
+ height: 24px;
+ width: 300px;
+}
+}
+
+.dropdown dt a span,
+.multiSel span {
+ cursor: pointer;
+ display: inline-block;
+ padding: 0 3px 2px 0;
+}
+
+.dropdown dd ul {
+ display: none;
+ left: 0px;
+ padding: 2px 15px 2px 5px;
+ position: absolute;
+ top: 2px;
+ list-style: none;
+ height: 50px;
+ overflow: auto;
+ border: 1px solid #c3c3c3;
+ background-color: #fff;
+ border-radius: 4px;
+ color: #000;
+ outline: 0;
+ box-shadow: 1px 1px #f6f6f6 inset;
+ font-size: 12px;
+ background: #fff;
+ width: 300px;
+}
+
+.dropdown span.value {
+ display: none;
+}
+
+.dropdown dd ul li a {
+ padding: 5px;
+ display: block;
+}
+
+.dropdown dd ul li a:hover {
+ background-color: #fff;
+}
diff --git a/auth/src/main/webapp/user/js/createUser.js b/auth/src/main/webapp/user/js/createUser.js
index 726d599..71a8d56 100644
--- a/auth/src/main/webapp/user/js/createUser.js
+++ b/auth/src/main/webapp/user/js/createUser.js
@@ -16,12 +16,14 @@
$(document).ready(function() {
var USER_SERVICE = "/openoapi/auth/v1/users";
+ var ROLE_SERVICE = "/openoapi/auth/v1/roles";
var $userName = $("#userName");
var $password = $("#password");
var $cfPsdError = $("#cfPsdError");
var $userNameError = $("#userNameError");
var $passwordError = $("#passwordError");
-
+ var $rolesError = $("#rolesError");
+ var roleMap=[];
function initialPage() {
/*initial the event*/
$("#confirm").click(function(e) {
@@ -36,6 +38,110 @@
$("#cancel").click(function(e) {
window.document.location = "/openoui/user/user.html";
})
+ //get and initialize roles
+ getRolesList().done(function(data) {
+ var data = formatRoles(data);
+ for (var i = 0; i < data.length; i++) {
+ var html = '<li><input type="checkbox" value="' + data[i].name + '"/>' + data[i].name + '</li>';
+ $('.mutliSelect ul').append(html);
+ }
+ })
+
+ //init listener
+ $(".dropdown dt a").on('click', function() {
+ $(".dropdown dd ul").slideToggle('fast');
+ });
+
+ $(".dropdown dd ul li a").on('click', function() {
+ $(".dropdown dd ul").hide();
+ });
+
+ function getSelectedValue(id) {
+ return $("#" + id).find("dt a span.value").html();
+ }
+
+ $(document).bind('click', function(e) {
+ var $clicked = $(e.target);
+ if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
+ });
+
+ $('.mutliSelect input[type="checkbox"]').on('click', function() {
+ if($('.hida')[0].innerHTML=='Please select roles')
+ {
+ $('.hida')[0].innerHTML='';
+ }
+
+ var title;
+ if($('.multiSel').text() ==='')
+ {
+ title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
+ title = $(this).val();
+ }
+ else
+ {
+ title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
+ title ="," + $(this).val();
+
+ }
+ var oldText=$('.hida')[0].innerHTML;
+ if ($(this).is(':checked')) {
+ if(oldText.length>0)
+ {
+ $('.hida')[0].innerHTML=oldText+','+title;
+ }
+ else
+ {
+ $('.hida')[0].innerHTML=title;
+ }
+
+ } else {
+
+ var rolesData = oldText.split(',');
+ var rolesList='';
+ for (var i = 0; i < rolesData.length ; i++) {
+ if(title!=rolesData[i])
+ {
+ if(i==0 || rolesList.length==0 )
+ {
+ rolesList=rolesData[i];
+ }
+ else
+ {
+ rolesList=rolesList+','+rolesData[i];
+ }
+ }
+ }
+ if(rolesList.length ==0)
+ {
+ rolesList='Please select roles';
+ }
+ $('.hida')[0].innerHTML=rolesList;
+
+ }
+ });
+
+ }
+
+ function getRolesList() {
+ return Rest.http({
+ url: ROLE_SERVICE + "?=" + new Date().getTime(),
+ type: "GET",
+ async: false,
+ contentType: 'application/json',
+ dataType: "json"
+ })
+ }
+
+ function formatRoles(data) {
+ var rolesData = [];
+ for (var i = 0; i < data.roles.length; i++) {
+ var temp = {};
+ temp.roleid = data.roles[i].id;
+ temp.name = data.roles[i].name;
+ rolesData.push(temp);
+ roleMap[temp.name]=temp.roleid;
+ }
+ return rolesData;
}
function getCreateUser() {
@@ -44,6 +150,16 @@
data.password = $password.val();
data.description = $("#description").val();
data.email = "xxxx@xxxx.com";
+ //get roles
+ var roles=[];
+ var rolesData = $('.hida').text().split(',');
+ for (var i = 0; i < rolesData.length ; i++) {
+ var temp = {};
+ temp.name=rolesData[i];
+ temp.id=roleMap[rolesData[i]];
+ roles.push(temp);
+ }
+ data.roles=roles;
return data;
}
@@ -87,6 +203,11 @@
showError($passwordError, "Mandatory.");
return false;
}
+ if($('.hida')[0].innerHTML=='Please select roles')
+ {
+ showError($rolesError, "Mandatory.");
+ return false;
+ }
return true;
}
diff --git a/auth/src/main/webapp/user/js/modifyUser.js b/auth/src/main/webapp/user/js/modifyUser.js
index 04cf054..7357955 100644
--- a/auth/src/main/webapp/user/js/modifyUser.js
+++ b/auth/src/main/webapp/user/js/modifyUser.js
@@ -15,13 +15,88 @@
*/
$(document).ready(function() {
var USER_SERVICE = "/openoapi/auth/v1/users";
+ var ROLE_SERVICE = "/openoapi/auth/v1/roles";
var userId;
+ var roleMap=[];
function initialPage() {
userId = getId();
getUserDetails(userId).done(function(data) {
listUserDetails(data);
});
+ //init listener
+ $(".dropdown dt a").on('click', function() {
+ $(".dropdown dd ul").slideToggle('fast');
+ });
+
+ $(".dropdown dd ul li a").on('click', function() {
+ $(".dropdown dd ul").hide();
+ });
+
+ function getSelectedValue(id) {
+ return $("#" + id).find("dt a span.value").html();
+ }
+
+ $(document).bind('click', function(e) {
+ var $clicked = $(e.target);
+ if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
+ });
+
+ $('.mutliSelect input[type="checkbox"]').on('click', function() {
+ if($('.hida')[0].innerHTML=='Please select roles')
+ {
+ $('.hida')[0].innerHTML='';
+ }
+
+ var title;
+ if($('.multiSel').text() ==='')
+ {
+ title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
+ title = $(this).val();
+ }
+ else
+ {
+ title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
+ title ="," + $(this).val();
+
+ }
+ var oldText=$('.hida')[0].innerHTML;
+ if ($(this).is(':checked')) {
+ if(oldText.length>0)
+ {
+ $('.hida')[0].innerHTML=oldText+','+title;
+ }
+ else
+ {
+ $('.hida')[0].innerHTML=title;
+ }
+
+ } else {
+
+ var rolesData = oldText.split(',');
+ var rolesList='';
+ for (var i = 0; i < rolesData.length ; i++) {
+ if(title!=rolesData[i])
+ {
+ if(i==0 || rolesList.length==0 )
+ {
+ rolesList=rolesData[i];
+ }
+ else
+ {
+ rolesList=rolesList+','+rolesData[i];
+ }
+ }
+ }
+ if(rolesList.length ==0)
+ {
+ rolesList='Please select roles';
+ }
+ $('.hida')[0].innerHTML=rolesList;
+
+ }
+ });
+
/*initial the event*/
$("#confirm").click(function(e) {
var data = getModifyUser();
@@ -38,6 +113,16 @@
var data = {};
data.description = $("#description").val();
data.email = "xxxx@xxxx.com";
+ //get roles
+ var roles=[];
+ var rolesData = $('.hida').text().split(',');
+ for (var i = 0; i < rolesData.length ; i++) {
+ var temp = {};
+ temp.name=rolesData[i];
+ temp.id=roleMap[rolesData[i]];
+ roles.push(temp);
+ }
+ data.roles=roles;
return data;
}
function getUserDetails(id) {
@@ -53,6 +138,75 @@
function listUserDetails(data) {
$("#userName").val(data.name);
$("#description").val(data.description);
+ var roles=formatRoles(data);
+ var rolesList='';
+ for (var i = 0; i < roles.length; i++) {
+ if(i==0 || rolesList.length==0 )
+ {
+ rolesList=roles[i].name;
+ }
+ else
+ {
+ rolesList=rolesList+','+roles[i].name;
+ }
+ }
+ if(rolesList.length ==0)
+ {
+ rolesList='Please select roles';
+ }
+ $('.hida')[0].innerHTML=rolesList;
+
+
+ //get and initialize roles
+ getRolesList().done(function(data) {
+ var allRoles = formatRoles(data);
+ for (var i = 0; i < allRoles.length; i++) {
+ var isExists=false;
+ for (var j = 0; j < roles.length; j++) {
+ if( roles[j].name== allRoles[i].name)
+ {
+ isExists=true;
+ break;
+ }
+ }
+ if(isExists)
+ {
+ var html = '<li><input type="checkbox" checked=true value="' + allRoles[i].name + '"/>' + allRoles[i].name + '</li>';
+ $('.mutliSelect ul').append(html);
+ }
+ else
+ {
+ var html = '<li><input type="checkbox" value="' + allRoles[i].name + '"/>' + allRoles[i].name + '</li>';
+ $('.mutliSelect ul').append(html);
+ }
+ }
+ })
+ }
+
+
+ function getRolesList() {
+ return Rest.http({
+ url: ROLE_SERVICE + "?=" + new Date().getTime(),
+ type: "GET",
+ async: false,
+ contentType: 'application/json',
+ 'beforeSend' : function(xhr) {
+ xhr.setRequestHeader("X-Auth-Token", "ffbf55c328464a9dbb1920aca768e0d2");
+ },
+ dataType: "json"
+ })
+ }
+
+ function formatRoles(data) {
+ var rolesData = [];
+ for (var i = 0; i < data.roles.length; i++) {
+ var temp = {};
+ temp.roleid = data.roles[i].id;
+ temp.name = data.roles[i].name;
+ rolesData.push(temp);
+ roleMap[temp.name]=temp.roleid;
+ }
+ return rolesData;
}
function modifyUser(data) {
diff --git a/auth/src/main/webapp/user/js/user.js b/auth/src/main/webapp/user/js/user.js
index aa0dc72..c45e68d 100644
--- a/auth/src/main/webapp/user/js/user.js
+++ b/auth/src/main/webapp/user/js/user.js
@@ -20,7 +20,8 @@
var userListHeader = [
{ title: "User", data: "User",width: "20%"},
- { title: "Description", data: "Description",width: "60%"},
+ { title: "Description", data: "Description",width: "30%"},
+ { title: "Roles", data: "Roles",width: "30%"},
{ title: "Operations", data: "Operations",width: "20%"}
];
function initialPage() {
@@ -32,6 +33,15 @@
}).error(function(data) {
if (data.status == 403) {
$(".hw_body").html("<span style='font-size:20px;'>" + JSON.parse(data.responseText).error.message + "</span>");
+ } else {
+ var userListHeader = [
+ { title: "User", data: "User",width: "20%"},
+ { title: "Description", data: "Description",width: "30%"},
+ { title: "Roles", data: "Roles",width: "30%"},
+ { title: "Operations", data: "Operations",width: "20%"}
+ ];
+ Table.create("", "table_id", userListHeader);
+ $(".hw_body").css("visibility", "visible");
}
});
@@ -92,6 +102,20 @@
temp.rowid = data[i].id;
temp.User = data[i].name;
temp.Description = data[i].description;
+ temp.Roles='';
+
+ for (var j = 0; j < data[i].roles.length; j++) {
+ if(temp.Roles.length>0)
+ {
+ temp.Roles=temp.Roles+','+data[i].roles[j].name;
+ }
+ else
+ {
+ temp.Roles=data[i].roles[j].name;
+ }
+
+ }
+
if (data[i].name == "admin") {
temp.Operations = editOpt;
} else {
diff --git a/auth/src/main/webapp/user/modifyUser.html b/auth/src/main/webapp/user/modifyUser.html
index 2e16c8c..eec8fa5 100644
--- a/auth/src/main/webapp/user/modifyUser.html
+++ b/auth/src/main/webapp/user/modifyUser.html
@@ -66,6 +66,38 @@
</td>
</tr>
+ <tr>
+ <td>
+ <span class="mandatory"></span>
+ </td>
+ <td class="row_interval">
+ <span>Roles</span><span>:</span>
+ </td>
+ <td>
+ <div>
+ <dl class="dropdown">
+
+ <dt>
+ <a href="#">
+ <span class="hida">Select</span>
+ <p class="multiSel"></p>
+ </a>
+ </dt>
+
+ <dd>
+ <div class="mutliSelect">
+ <ul>
+
+ </ul>
+
+ </div>
+ </dd>
+ </dl>
+ </div>
+ </td>
+ <td>
+ </td>
+ </tr>
</table>
</div>
<div class="button_Group">