ecomp-portal-BE/war/WEB-INF/fusion/jsp/profile.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 <%@ page import="org.openecomp.portalsdk.core.domain.User"%>
  21 <%@ page import="org.openecomp.portalsdk.core.web.support.UserUtils"%>
  22
  23 <%@page import="org.openecomp.portalsdk.core.web.support.ControllerProperties"%>
  24 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  25 <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
  26
  27 <link rel="stylesheet" type="text/css" href="static/fusion/css/jquery-ui.css">
  28
  29 <script src= "static/ebz/angular_js/angular.js"></script>
  30 <script src= "static/ebz/angular_js/angular-sanitize.js"></script>
  31 <script src="static/ebz/sandbox/att-abs-tpls.js" type="text/javascript"></script>
  32 <script src= "static/ebz/angular_js/app.js"></script>
  33 <script src= "static/ebz/angular_js/gestures.js"></script>
  34
  35 <script src="static/js/jquery-1.10.2.js"></script>
  36 <script src="static/js/modalService.js"></script>
  37 <script src="static/js/jquery.mask.min.js" type="text/javascript"></script>
  38 <script src="static/js/jquery-ui.js" type="text/javascript"></script>
  39
  40
  41
  42 <link rel="stylesheet" type="text/css" href="static/ebz/fn-ebz.css" >
  43 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox.css" >
  44 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/sandbox-base.css" >
  45 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/sandbox-buttons.css" >
  46 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/sandbox-datepicker.css" >
  47 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/sandbox-forms.css" >
  48 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/sandbox-slider.css" >
  49 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/sandbox-tables.css" >
  50 <link rel="stylesheet" type="text/css" href="static/ebz/sandbox/ui-charts-tpls.css" >
  51 <link rel="stylesheet" type="text/css" href="static/ebz/icons/style.css" >
  52 <%@ include file="/WEB-INF/fusion/jsp/include.jsp"%>
  53
  54 <div class="pageTitle">
  55         <h3>
  56         <c:choose>
  57                 <c:when test="${!empty profileId}">
  58                         <h1 class="heading1" style="margin-top:20px;">Profile Edit</h1>
  59                 </c:when>
  60                 <c:otherwise>
  61                         <h1 class="heading1" style="margin-top:20px;">Profile Edit</h1>
  62                 </c:otherwise>
  63         </c:choose>
  64         </h3>
  65 </div>
  66
  67 <div ng-controller="profileController" >
  68
  69      Please edit the profile details below:&nbsp;<br><br>
  70
  71         <div class="fn-ebz-container" >
  72                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>First Name:</label><BR>
  73                 <input type="text" class="fn-ebz-text" ng-model="profile.firstName"
  74                         maxlength="30" />
  75         </div>
  76
  77         <div class="fn-ebz-container" >
  78                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>Last Name:</label><BR>
  79                 <input type="text" class="fn-ebz-text" ng-model="profile.lastName"
  80                         maxlength="30" />
  81         </div>
  82
  83         <div class="fn-ebz-container" >
  84                 <label class="fn-ebz-text-label">OrgUserId:</label><BR>
  85                 <input type="text" class="fn-ebz-text" ng-model="profile.orgUserId"
  86                         maxlength="30" style="margin-right:0px;"/>
  87         </div>
  88
  89         <div class="fn-ebz-container" >
  90         <label class="fn-ebz-text-label">Manager OrgUserId:</label><BR>
  91                 <input type="text" class="fn-ebz-text" ng-model="profile.orgManagerUserId"
  92                         maxlength="30" style="margin-right:0px;"/>
  93         </div>
  94 <BR>
  95         <div class="fn-ebz-container" >
  96                 <label class="fn-ebz-text-label">Login Id:</label><BR>
  97                 <input type="text" class="fn-ebz-text" ng-model="profile.loginId"
  98                         maxlength="30" />
  99         </div>
 100
 101         <div class="fn-ebz-container" >
 102                 <label class="fn-ebz-text-label">Password:</label><BR>
 103                 <input type="password" att-form-field ng-model="profile.loginPwd"
 104                         maxlength="30" />
 105         </div>
 106
 107         <div class="fn-ebz-container" >
 108                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>Phone:</label><BR>
 109                 <input type="text" class="fn-ebz-text" ng-model="profile.phone"
 110                         maxlength="30" />
 111         </div>
 112
 113         <div class="fn-ebz-container" >
 114         <label class="fn-ebz-text-label">Fax:</label><BR>
 115                 <input type="text" class="fn-ebz-text" ng-model="profile.fax"
 116                         maxlength="30" />
 117         </div>
 118 <BR>
 119         <div class="fn-ebz-container" >
 120         <label class="fn-ebz-text-label">Cellular:</label><BR>
 121                 <input type="text" class="fn-ebz-text" ng-model="profile.cellular"
 122                         maxlength="30" />
 123         </div>
 124
 125         <div class="fn-ebz-container" >
 126                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>Email:</label><BR>
 127                 <input type="text" class="fn-ebz-text" ng-model="profile.email"
 128                         maxlength="30" />
 129         </div>
 130
 131         <div class="fn-ebz-container" >
 132                 <label class="fn-ebz-text-label">Address 1:</label><BR>
 133                 <input type="text" class="fn-ebz-text" ng-model="profile.address1"
 134                         maxlength="30" />
 135         </div>
 136
 137         <div class="fn-ebz-container" >
 138                 <label class="fn-ebz-text-label">Address 2:</label><BR>
 139                 <input type="text" class="fn-ebz-text" ng-model="profile.address2"
 140                         maxlength="30" />
 141         </div>
 142 <BR>
 143         <div class="fn-ebz-container" >
 144         <label class="fn-ebz-text-label">City:</label><BR>
 145                 <input type="text" class="fn-ebz-text" ng-model="profile.city"
 146                         maxlength="30" />
 147         </div>
 148
 149         <div class="fn-ebz-container">
 150                 <label  class="fn-ebz-text-label">State:</label><BR>
 151                 <div class="form-field" att-select="stateList.options" ng-model="stateList.selected"></div>
 152         </div>
 153
 154         <div class="fn-ebz-container" >
 155                 <label class="fn-ebz-text-label">Zip Code:</label><BR>
 156                 <input type="text" class="fn-ebz-text" ng-model="profile.zipCode"
 157                         maxlength="30" />
 158         </div>
 159
 160         <div class="fn-ebz-container">
 161                 <label  class="fn-ebz-text-label">Country:</label><BR>
 162                 <div class="form-field" att-select="countries" ng-model="selectedCountry"></div>
 163         </div>
 164         <BR>
 165         <div class="fn-ebz-container">
 166                 <label  class="fn-ebz-text-label">Time Zone:</label><BR>
 167                 <div class="form-field" att-select="timeZones" ng-model="selectedTimeZone"></div>
 168         </div>
 169
 170         <div align="left" >
 171                 <button type="submit" ng-click="saveProfile();" att-button
 172                         btn-type="primary" size="small">Save</button>
 173         </div>
 174
 175 <br>
 176         <div class="pageTitle">
 177                 <label>Roles</label>
 178                 <a ng-click="addNewRolePopup();" class="icon-add" size="small"></a>
 179
 180         </div>
 181
 182         <table  att-table table-data="profile.roles" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
 183 <!--    <table border="1" class="hovertable_1"> -->
 184              <thead att-table-row type="header">
 185                 <tr>
 186                         <th att-table-header sortable="false" align="left"  width="90%">Name</th>
 187                         <th att-table-header sortable="false"  width="10%">Remove?</th>
 188                 </tr>
 189                  </thead>
 190                  <tbody att-table-row type="body" row-repeat="role in profile.roles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
 191 <!--              <tr ng-repeat="role in profile.roles track by role.id"> -->
 192                   <tr>
 193                     <td att-table-body width="90%" >{{ role.name }}</td>
 194                     <td att-table-body width="10%">
 195                         <a ng-click="removeRole(role);" ><img src="static/fusion/images/deleteicon.gif"></a>
 196                      </td>
 197                   </tr>
 198                  </tbody>
 199         </table>
 200
 201
 202         <div id="dialog" title="Select Roles">
 203           <table table-data="availableRoles" att-table >
 204                 <thead att-table-row type="header">
 205                                 <tr>
 206                                         <th att-table-header sortable="false" width="10%"> </th>
 207                                         <th att-table-header sortable="false" width="90%">Role</th>
 208                                 </tr>
 209                          </thead>
 210
 211                     <tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
 212                           <tr>
 213                                 <td att-table-body width="10%">
 214                                         <div ng-click="toggleRole(availableRole.selected,availableRole);">
 215                                 <input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
 216                                 </div>
 217                             </td>
 218                             <td att-table-body width="90%">{{ availableRole.name }}</td>
 219                           </tr>
 220                     </tbody>
 221          </table>
 222         </div>
 223
 224 </div>
 225
 226
 227
 228 <script>
 229 app.controller('profileController', function ($scope){
 230
 231         $scope.profile=${model.profile};
 232         $scope.sbcid=$scope.profile.sbcid;
 233         $scope.managerAttuid=$scope.profile.managerAttuid;
 234
 235         $scope.viewPerPage = 2;
 236         $scope.currentPage = 1;
 237         $scope.totalPage;
 238         $scope.searchCategory = "";
 239         $scope.searchString = "";
 240
 241         $( "#dialog" ).hide();
 242
 243         $scope.ociavailableRoles=${model.availableRoles};
 244         //modalService.showFailure('Error','') ;
 245         $scope.availableRoles = [];
 246         if($scope.ociavailableRoles)
 247                 $.each($scope.ociavailableRoles, function(i, a){
 248                         var availableRole = a;
 249                         availableRole.selected = false;
 250                     $.each($scope.profile.roles, function(j, b){
 251                         if(a.id === b.id) {
 252                                 availableRole.selected = true;
 253                         }
 254                     });
 255                     $scope.availableRoles.push(availableRole);
 256                 });
 257                 ;
 258
 259         $scope.ociTimeZones = ${model.timeZones};
 260         $scope.timeZones = [];
 261         $scope.selectedTimeZone = null;
 262         if($scope.ociTimeZones){
 263                 $.each($scope.ociTimeZones, function(i, a){
 264                         var timeZone = {"index":i, "value":a.value, "title":a.label};
 265                     $scope.timeZones.push(timeZone);
 266                     if($scope.profile.timeZoneId !== null && a.value === $scope.profile.timeZoneId.toString()){
 267                         $scope.selectedTimeZone = timeZone;
 268                         }
 269                 });
 270         };
 271
 272         $scope.ociCountries = ${model.countries};
 273         $scope.countries = [];
 274         $scope.selectedCountry = null;
 275         //alert($scope.ociCountries[0].label);
 276         if($scope.ociCountries)
 277         $.each($scope.ociCountries, function(i, a){
 278                 var country = {"index":i, "value":a.value, "title":a.label};
 279             $scope.countries.push(country);
 280             if(a.value === $scope.profile.country){
 281                 $scope.selectedCountry = country;
 282                 }
 283         });
 284         ;
 285
 286         var stateList=${model.stateList};
 287         //alert(stateList[0].label);
 288         stateList = stateList== null? []: stateList;
 289         var selectedState= $scope.profile.state ? $scope.profile.state:"";
 290         $scope.stateList = initDropdownWithLookUp(stateList,selectedState );
 291
 292         $scope.saveProfile = function() {
 293                   var uuu = "profile/saveProfile?profile_id=${param.profile_id}";
 294                   var postData={profile: $scope.profile,
 295                                         selectedCountry:$scope.selectedCountry!=null?$scope.selectedCountry.value:"",
 296                                         selectedState:$scope.stateList.selected!=null?$scope.stateList.selected.value:"",
 297                                         selectedTimeZone:$scope.selectedTimeZone!=null?$scope.selectedTimeZone.value:""
 298                                };
 299                   $.ajax({
 300                          type : 'POST',
 301                          url : uuu,
 302                          dataType: 'json',
 303                          contentType: 'application/json',
 304                          data: JSON.stringify(postData),
 305                          success : function(data){
 306                                 alert("Update Successful.") ;
 307                          },
 308                          error : function(data){
 309                                  alert("Error while saving.");
 310                          }
 311                   });
 312         };
 313
 314                 $scope.addNewRolePopup = function(role) {
 315                         $( "#dialog" ).dialog({
 316                               modal: true
 317                             });
 318                 };
 319
 320                 $scope.toggleRole = function(selected,availableRole) {
 321                                 //alert('toggleRole: '+selected);
 322                                 if(!selected) {
 323                                         //remove role
 324                                         var uuu = "profile/removeRole?profile_id=${param.profile_id}";
 325                                         if (confirm("You are about to remove the role "+availableRole.name+" from the profile for "+$scope.profile.firstName+" "+$scope.profile.lastName+". Do you want to continue?")) {
 326
 327                                                 var postData={role:availableRole};
 328                                                   $.ajax({
 329                                                          type : 'POST',
 330                                                          url : uuu,
 331                                                          dataType: 'json',
 332                                                          contentType: 'application/json',
 333                                                          data: JSON.stringify(postData),
 334                                                          success : function(data){
 335                                                                 $scope.$apply(function(){$scope.profile=data;});
 336                                                          },
 337                                                          error : function(data){
 338                                                                  alert("Error while saving.");
 339                                                          }
 340                                                   });
 341                                         } else {
 342                                                 availableRole.selected=true;
 343                                         }
 344                                 } else {
 345                                         //add role
 346                                         var uuu = "profile/addNewRole?profile_id=${param.profile_id}";
 347                                         if (confirm("You are about to add the role "+availableRole.name+" from the profile for "+$scope.profile.firstName+" "+$scope.profile.lastName+". Do you want to continue?")) {
 348                                                 var postData={role:availableRole};
 349                                                   $.ajax({
 350                                                          type : 'POST',
 351                                                          url : uuu,
 352                                                          dataType: 'json',
 353                                                          contentType: 'application/json',
 354                                                          data: JSON.stringify(postData),
 355                                                          success : function(data){
 356                                                                 $scope.$apply(function(){$scope.profile=data;});
 357                                                          },
 358                                                          error : function(data){
 359                                                                  alert("Error while saving.");
 360                                                          }
 361                                                   });
 362                                         }
 363                                 }
 364
 365
 366                 };
 367
 368                 $scope.removeRole = function(role) {
 369                         if (confirm("You are about to remove the role "+role.name+" from the profile for "+$scope.profile.firstName+" "+$scope.profile.lastName+". Do you want to continue?")) {
 370                                 //alert('deleted'+role.name);
 371                                 var uuu = "profile/removeRole?profile_id=${param.profile_id}";
 372                                   var postData={role:role};
 373                                   $.ajax({
 374                                          type : 'POST',
 375                                          url : uuu,
 376                                          dataType: 'json',
 377                                          contentType: 'application/json',
 378                                          data: JSON.stringify(postData),
 379                                          success : function(data){
 380                                                 $scope.$apply(function(){
 381                                                         $scope.profile=data;
 382                                                         $.each($scope.availableRoles, function(k, c){
 383                                                         if(c.id === role.id) {
 384                                                                 c.selected = false;
 385                                                         }
 386                                                     });
 387                                                 });
 388
 389                                          },
 390                                          error : function(data){
 391                                                  alert("Error while saving.");
 392                                          }
 393                                   });
 394                         }
 395
 396                 };
 397
 398                 function initDropdownWithLookUp(arr,selectedValue){
 399                         var dropdownArray=[];
 400                         var selected = null;
 401                         if(arr){
 402                                 for(var i = 0,l = arr.length; i < l; i++) {
 403                                         var option = {
 404                                                 "index" : i ,
 405                                                 "value" : arr[i].value,
 406                                                 "title" : arr[i].label
 407                                             };
 408                                         dropdownArray.push(option);
 409                                         if(arr[i].value === selectedValue){
 410                                                 selected = option;
 411                                         }
 412                                 }
 413                         }
 414                         var dropDown={};
 415                         dropDown.options = dropdownArray;
 416                         dropDown.selected = selected;
 417                         return dropDown;
 418                 };
 419
 420                 $scope.doRolePopup = function() {
 421                          var modalInstance = $modal.open({
 422                             templateUrl: 'roles_popup.html',
 423                             controller: 'rolepopupController',
 424                             resolve: {
 425                                  message: function () {
 426                                          var message ={
 427                                                          availableRoles: $scope.availableRoles
 428                                           };
 429                                   return message;
 430                                 }
 431                               }
 432                           });
 433                                 modalInstance.result.then(function (opts) {
 434                                         if(opts!=null){
 435                                                 $scope.profile=opts.profile;
 436                                         }
 437                    });
 438                 }
 439
 440
 441 });
 442 </script>