ecomp-portal-BE/war/WEB-INF/fusion/jsp/role.jsp

   1 <%--
   2   ================================================================================
   3   eCOMP Portal
   4   ================================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ================================================================================
  19   --%>
  20
  21 <%@ include file="/WEB-INF/fusion/jsp/include.jsp"%> --%>
  22
  23 <%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
  24 <%@ taglib prefix="fmt"    uri="http://java.sun.com/jsp/jstl/fmt" %>
  25 <%@ taglib prefix="fn"     uri="http://java.sun.com/jsp/jstl/functions" %>
  26
  27 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox.css"  >
  28 <link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
  29
  30 <script src= "static/ebz/angular_js/angular.js"></script>
  31 <script src= "static/ebz/angular_js/angular-sanitize.js"></script>
  32 <script src= "static/ebz/angular_js/att_abs_tpls.js"></script>
  33 <script src= "static/ebz/angular_js/app.js"></script>
  34 <script src= "static/ebz/angular_js/gestures.js"></script>
  35
  36 <script src="static/js/jquery-1.10.2.js"></script>
  37 <script src="static/js/modalService.js"></script>
  38 <script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
  39 <script src="static/js/jquery-ui.js" type="text/javascript"></script>
  40 <%@ include file="/WEB-INF/fusion/jsp/popup_modal_role.html" %>
  41 <style type="text/css">
  42     .bc-style{
  43         margin: 20px;
  44         align: left;
  45     }
  46 </style>
  47 <div class="bc-style">
  48     <ul class="breadcrumb" >
  49         <li><a href="welcome">Home</a></li>
  50         <li><a href="role_list">Roles</a></li>
  51         <li class="active">Role</li>
  52     </ul>
  53 </div>
  54 <div class="pageTitle">
  55 <h3>
  56         <c:choose>
  57                 <c:when test="${!empty param.role_id}">
  58                         <h1 class="heading1" style="margin-top:20px;">Role Edit</h1>
  59                 </c:when>
  60                 <c:otherwise>
  61                         <h1 class="heading1" style="margin-top:20px;">Role Create</h1>
  62                 </c:otherwise>
  63         </c:choose>
  64         </h3>
  65 </div>
  66
  67 <div ng-controller="roleController" >
  68
  69         <br>
  70      Please edit the role details below:&nbsp;<br>
  71
  72         <div class="fn-ebz-container" >
  73                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><BR>
  74                 <input type="text" class="fn-ebz-text" ng-model="role.name"
  75                         maxlength="30" />
  76         </div>
  77
  78         <div class="fn-ebz-container" >
  79                 <label class="fn-ebz-text-label">Priority:</label><BR>
  80                 <input type="text" class="fn-ebz-text" ng-model="role.priority"
  81                         maxlength="30" />
  82         </div>
  83
  84         <div align="left" >
  85                 <button type="submit" ng-click="saveRole();" att-button
  86                         btn-type="primary" size="small">Save</button>
  87         </div>
  88
  89         <br>
  90         <div class="pageTitle">
  91                 <label>Role Functions</label>
  92                 <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small"></a>
  93         </div>
  94
  95         <table table-data="role.roleFunctions" att-table >
  96              <thead att-table-row type="header">
  97                 <tr>
  98                         <th att-table-header sortable="false" align="left"  width="90%">Name</th>
  99                         <th att-table-header sortable="false"  width="10%">Remove?</th>
 100                 </tr>
 101                  </thead>
 102                  <tbody att-table-row type="body" row-repeat="roleFunction in role.roleFunctions track by roleFunction.code" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
 103                   <tr>
 104                     <td att-table-body width="90%" >{{ roleFunction.name }}</td>
 105                     <td att-table-body width="10%">
 106                         <div ng-click="removeRoleFunction(roleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
 107                      </td>
 108                   </tr>
 109                  </tbody>
 110         </table>
 111         <a href="role_function_list.htm">Manage Role Functions</a><br><br>
 112
 113         <div class="pageTitle">
 114                 <label>Child Roles</label>
 115                 <a ng-click="addNewChildRoleModalPopup();" class="icon-add" size="small"></a>
 116         </div>
 117
 118         <table table-data="role.childRoles" att-table >
 119              <thead att-table-row type="header">
 120                 <tr>
 121                         <th att-table-header sortable="false" align="left"  width="90%">Name</th>
 122                         <th att-table-header sortable="false"  width="10%">Remove?</th>
 123                 </tr>
 124                  </thead>
 125                  <tbody att-table-row type="body" row-repeat="role in role.childRoles track by role.id" style="max-height: 980px;" >
 126                   <tr>
 127                     <td att-table-body width="90%" >{{ role.name }}</td>
 128                     <td att-table-body width="10%">
 129                         <div ng-click="removeChildRole(role);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
 130                      </td>
 131                   </tr>
 132                  </tbody>
 133         </table>
 134
 135         <div id="dialogChildRole" title="Select Child Roles">
 136           <table table-data="availableRoles" att-table>
 137                 <thead att-table-row type="header">
 138                         <tr>
 139                                 <th att-table-header sortable="false" width="10%"> </th>
 140                                 <th att-table-header sortable="false" width="90%">Role</th>
 141                         </tr>
 142                         </thead>
 143                         <tbody att-table-row type="body" row-repeat="availableRole in availableRoles track by availableRole.id" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
 144                         <tr>
 145                         <td att-table-body width="10%">
 146                                 <div ng-click="toggleChildRole(availableRole.selected,availableRole);">
 147                         <input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
 148                         </div>
 149                     </td>
 150                     <td att-table-body width="90%">{{ availableRole.name }}</td>
 151
 152                   </tr>
 153                   </tbody>
 154                 </table>
 155         </div>
 156 </div>
 157
 158
 159
 160 <script>
 161 app.controller('roleController', function ($scope, modalService, $modal){
 162         $scope.role=${role};
 163         console.log($scope.role);
 164
 165         $( "#dialogRoleFunction" ).hide();
 166         $( "#dialogChildRole" ).hide();
 167
 168         $scope.ociavailableRoleFunctions=${availableRoleFunctions};
 169
 170         $scope.availableRoleFunctions = [];
 171         if($scope.ociavailableRoleFunctions)
 172                 $.each($scope.ociavailableRoleFunctions, function(i, a){
 173                         var availableRoleFunction = a;
 174                         availableRoleFunction.selected = false;
 175                     $.each($scope.role.roleFunctions, function(j, b){
 176                         if(a.code === b.code) {
 177                                 availableRoleFunction.selected = true;
 178                         }
 179                     });
 180                     $scope.availableRoleFunctions.push(availableRoleFunction);
 181                 });
 182                 ;
 183
 184                 $scope.saveRole = function() {
 185                           var uuu = "role/saveRole.htm?role_id=${param.role_id}";
 186                           var postData={role: $scope.role, childRoles: $scope.role.childRoles, roleFunctions : $scope.role.roleFunctions};
 187                           $.ajax({
 188                                  type : 'POST',
 189                                  url : uuu,
 190                                  dataType: 'json',
 191                                  contentType: 'application/json',
 192                                  data: JSON.stringify(postData),
 193                                  success : function(data){
 194                                         alert("Update Successful.") ;
 195                                  },
 196                                  error : function(data){
 197                                          console.log(data);
 198                                          alert("Error while saving.");
 199                                  }
 200                           });
 201                         };
 202
 203                 $scope.addNewRoleFunctionModalPopup = function() {
 204                         var modalInstance = $modal.open({
 205                             templateUrl: 'role_functions_popup.html',
 206                             controller: 'rolepopupController',
 207                             resolve: {
 208                                 role: function () {
 209                                   return $scope.role;
 210                                 }
 211                               }
 212                           });
 213                         modalInstance.result.then(function(response){
 214                     console.log('response', response);
 215                     $scope.role=response.role;
 216                 });
 217                 };
 218
 219                 $scope.addNewChildRoleModalPopup = function() {
 220                         var modalInstance = $modal.open({
 221                             templateUrl: 'child_roles_popup.html',
 222                             controller: 'rolepopupController',
 223                             resolve: {
 224                                 role: function () {
 225                                   return $scope.role;
 226                                 }
 227                               }
 228                           });
 229                         modalInstance.result.then(function(response){
 230                     console.log('response', response);
 231                     $scope.role=response.role;
 232                 });
 233                 };
 234
 235
 236
 237                 $scope.removeRoleFunction = function(roleFunction) {
 238                         if (confirm("You are about to remove the role function "+roleFunction.name+" from the role for "+$scope.role.name+". Do you want to continue?")) {
 239                                 //alert('deleted'+role.name);
 240                                 var uuu = "role/removeRoleFunction.htm?role_id=${param.role_id}";
 241                                   var postData={roleFunction:roleFunction};
 242                                   $.ajax({
 243                                          type : 'POST',
 244                                          url : uuu,
 245                                          dataType: 'json',
 246                                          contentType: 'application/json',
 247                                          data: JSON.stringify(postData),
 248                                          success : function(data){
 249                                                 $scope.$apply(function(){
 250                                                         $scope.role=data.role;
 251                                                         $.each($scope.availableRoleFunctions, function(k, c){
 252                                                         if(c.code === roleFunction.code) {
 253                                                                 c.selected = false;
 254                                                         }
 255                                                     });
 256                                                 });
 257
 258                                          },
 259                                          error : function(data){
 260                                                  alert("Error while saving.");
 261                                          }
 262                                   });
 263                         };
 264
 265                 };
 266
 267                 $scope.removeChildRole = function(childRole) {
 268                         if (confirm("You are about to remove the child role "+childRole.name+" from the role for "+$scope.role.name+". Do you want to continue?")) {
 269                                 //alert('deleted'+role.name);
 270                                 var uuu = "role/removeChildRole.htm?role_id=${param.role_id}";
 271                                   var postData={childRole:childRole};
 272                                   $.ajax({
 273                                          type : 'POST',
 274                                          url : uuu,
 275                                          dataType: 'json',
 276                                          contentType: 'application/json',
 277                                          data: JSON.stringify(postData),
 278                                          success : function(data){
 279                                                 $scope.$apply(function(){
 280                                                         $scope.role=data.role;
 281                                                         $.each($scope.availableRoles, function(k, c){
 282                                                         if(c.id === childRole.id) {
 283                                                                 c.selected = false;
 284                                                         }
 285                                                     });
 286                                                 });
 287
 288                                          },
 289                                          error : function(data){
 290                                                  alert("Error while saving.");
 291                                          }
 292                                   });
 293                         };
 294
 295                 };
 296
 297 });
 298 </script>