diff options
| -rw-r--r-- | auth/src/main/webapp/user/createUser.html | 33 | ||||
| -rw-r--r-- | auth/src/main/webapp/user/css/user.css | 84 | ||||
| -rw-r--r-- | auth/src/main/webapp/user/js/createUser.js | 123 | ||||
| -rw-r--r-- | auth/src/main/webapp/user/js/modifyUser.js | 154 | ||||
| -rw-r--r-- | auth/src/main/webapp/user/js/user.js | 26 | ||||
| -rw-r--r-- | auth/src/main/webapp/user/modifyUser.html | 32 |
6 files changed, 449 insertions, 3 deletions
diff --git a/auth/src/main/webapp/user/createUser.html b/auth/src/main/webapp/user/createUser.html index 40f8741e..a652720a 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 6fe0b6f9..199843fc 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 726d5993..71a8d566 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 @@ $(document).ready(function() { $("#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 @@ $(document).ready(function() { 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 @@ $(document).ready(function() { 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 04cf054f..73579553 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 @@ $(document).ready(function() { 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 @@ $(document).ready(function() { 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 aa0dc729..c45e68d0 100644 --- a/auth/src/main/webapp/user/js/user.js +++ b/auth/src/main/webapp/user/js/user.js @@ -20,7 +20,8 @@ $(document).ready(function() { 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 @@ $(document).ready(function() { }).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 @@ $(document).ready(function() { 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 2e16c8cb..eec8fa56 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"> |