role UI changes

issue-id: OCS-188
Change-Id: I84a3bd6c7098ce927ae7f01324d43688594ec4f0
Signed-off-by: sukesh a c <sukeshac@huawei.com>

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