ecomp-sdk-app/src/main/webapp/WEB-INF/fusion/jsp/role_function_list.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
  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 <%@ include file="/WEB-INF/fusion/jsp/popup_modal_rolefunction.html" %>
  28 <%@ include file="/WEB-INF/fusion/jsp/popup_modal.html" %>
  29 <div ng-controller="roleFunctionListController" >
  30         <div class="pageTitle">
  31
  32                 <h1 class="heading1" style="margin-top:20px;">Role Functions</h1>
  33
  34                 <a ng-click="addNewRoleFunctionModalPopup();" class="ion-plus-circled" size="small" ></a>
  35          <br><br>
  36
  37         </div>
  38
  39         <br>
  40         Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.
  41         <br>
  42         <div id="rolesTable" title="Role Functions">
  43           <table att-table table-data="availableRoleFunctions" current-page="1">
  44                 <thead att-table-row type="header">
  45                         <tr>
  46                                 <th att-table-header width="70%">Name</th>
  47                                 <th att-table-header width="10%">Code</th>
  48                                 <th att-table-header width="10%">Edit?</th>
  49                                 <th att-table-header width="10%">Delete?</th>
  50                         </tr>
  51                 </thead>
  52                 <tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
  53                   <tr>
  54                     <td att-table-body width="70%">{{ availableRoleFunction.name }}</td>
  55                     <td att-table-body width="10%">{{ availableRoleFunction.code }}</td>
  56                     <td att-table-body width="10%">
  57                     <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >
  58                     <img src="static/fusion/images/editicon.gif">
  59                     </a> -->
  60                     <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-edit"></a></div>
  61                     </td>
  62                      <td att-table-body width="10%">
  63                         <!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->
  64                         <div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
  65                      </td>
  66                   </tr>
  67                 </tbody>
  68                 </table>
  69         </div>
  70
  71 <!--    <div align="left" style="marin-bottom: 50px;"> -->
  72 <!--            <button type="submit" onClick="window.location='role_function.htm';" att-button -->
  73 <!--                    btn-type="primary" size="small">Create</button> -->
  74 <!--    </div> -->
  75
  76         <div id="dialog" title="Add Role Function">
  77
  78                 <div class="fn-ebz-container" >
  79                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
  80                 <input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
  81                         maxlength="30" />
  82                 </div>
  83                 <br/>
  84                 <div class="fn-ebz-container" >
  85                 <label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
  86                 <input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="editRoleFunction.code!=null"
  87                         maxlength="30" />
  88                 </div>
  89                 <br/>
  90                 <button type="submit" ng-click="saveRoleFunction(editRoleFunction);" att-button
  91                         btn-type="primary" size="small">Save</button>
  92
  93         </div>
  94
  95 </div>
  96
  97
  98
  99
 100 <script>
 101 app.controller('roleFunctionListController', function ($scope, modalService, $modal){
 102         $( "#dialog" ).hide();
 103         $scope.availableRoleFunctions=${availableRoleFunctions};
 104
 105
 106         $scope.editRoleFunction = null;
 107         var dialog = null;
 108         $scope.editRoleFunctionPopup = function(availableRoleFunction) {
 109                 $scope.editRoleFunction = availableRoleFunction;
 110                 $( "#dialog" ).dialog({
 111                       modal: true
 112             });
 113         };
 114
 115         $scope.editRoleFunctionModalPopup = function(availableRoleFunction) {
 116                 $scope.editRoleFunction = availableRoleFunction;
 117                 var modalInstance = $modal.open({
 118                     templateUrl: 'edit_role_function_popup.html',
 119                     controller: 'rolefunctionpopupController',
 120                     resolve: {
 121                         message: function () {
 122                                 var message = {
 123                                                 availableRoleFunction: $scope.editRoleFunction
 124                                 };
 125                           return message;
 126                         }
 127                       }
 128                   });
 129                 modalInstance.result.then(function(response){
 130             console.log('response', response);
 131             $scope.availableRoleFunctions=response.availableRoleFunctions;
 132         });
 133         };
 134
 135         $scope.addNewRoleFunctionModalPopup = function(availableRoleFunction) {
 136                 $scope.editRoleFunction = null;
 137                 var modalInstance = $modal.open({
 138                     templateUrl: 'edit_role_function_popup.html',
 139                     controller: 'rolefunctionpopupController',
 140                     resolve: {
 141                         message: function () {
 142                                 var message = {
 143                                                 availableRoleFunction: $scope.editRoleFunction
 144                                 };
 145                           return message;
 146                         }
 147                       }
 148                   });
 149                 modalInstance.result.then(function(response){
 150             console.log('response', response);
 151             $scope.availableRoleFunctions=response.availableRoleFunctions;
 152         });
 153         };
 154
 155         $scope.addNewRoleFunctionPopup = function() {
 156                 $scope.editRoleFunction = null;
 157                 $( "#dialog" ).dialog({
 158                       modal: true
 159             });
 160         };
 161
 162         $scope.saveRoleFunction = function(availableRoleFunction) {
 163                   var uuu = "role_function_list/saveRoleFunction.htm";
 164                   var postData={availableRoleFunction: availableRoleFunction};
 165                   $.ajax({
 166                          type : 'POST',
 167                          url : uuu,
 168                          dataType: 'json',
 169                          contentType: 'application/json',
 170                          data: JSON.stringify(postData),
 171                          success : function(data){
 172                                 $scope.$apply(function(){
 173                                         $scope.availableRoleFunctions=[];$scope.$apply();
 174                                         $scope.availableRoleFunctions=data.availableRoleFunctions;});
 175                                 //alert("Update Successful.") ;
 176                                 console.log($scope.availableRoleFunctions);
 177
 178                                 $scope.editRoleFunction = null;
 179                                 $( "#dialog" ).dialog("close");
 180                          },
 181                          error : function(data){
 182                                  alert("Error while saving.");
 183                          }
 184                   });
 185                 };
 186
 187
 188                 $scope.removeRole = function(availableRoleFunction) {
 189                         modalService.popupConfirmWin("Confirm","You are about to delete the role function "+availableRoleFunction.name+". Do you want to continue?",
 190                                 function(){
 191                                                         var uuu = "role_function_list/removeRoleFunction.htm";
 192                                                           var postData={availableRoleFunction: availableRoleFunction};
 193                                                           $.ajax({
 194                                                                  type : 'POST',
 195                                                                  url : uuu,
 196                                                                  dataType: 'json',
 197                                                                  contentType: 'application/json',
 198                                                                  data: JSON.stringify(postData),
 199                                                                  success : function(data){
 200                                                                         $scope.$apply(function(){$scope.availableRoleFunctions=data.availableRoleFunctions;});
 201                                                                  },
 202                                                                  error : function(data){
 203                                                                          console.log(data);
 204                                                                          modalService.showFailure("Fail","Error while deleting: "+ data.responseText);
 205                                                                  }
 206                                                           });
 207
 208                 })
 209                 };
 210
 211
 212 });
 213 </script>