ecomp-sdk-app/src/main/webapp/WEB-INF/fusion/jsp/profile.jsp

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