ecomp-portal-FE/client/app/views/functionalMenu/functionalMenu-dialog/menu-details.controller.js

   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 'use strict';
  21 (function () {
  22     class MenuDetailsModalCtrl {
  23         constructor($scope, $log, functionalMenuService, errorMessageByCode, ECOMP_URL_REGEX,$rootScope,confirmBoxService) {
  24             let newMenuModel = {
  25                 name: null,
  26                 menuId: null,
  27                 parentMenuId: null,
  28                 url: null
  29             };
  30
  31             let getAvailableRoles = (appid) => {
  32                 this.isSaving = true;
  33                 if (appid != null) {
  34                     $log.debug("MenuDetailsModalCtrl::getAvailableRoles: About to call getManagedRolesMenu");
  35                     functionalMenuService.getManagedRolesMenu(appid).then(rolesObj => {
  36                         $log.debug("MenuDetailsModalCtrl::getAvailableRoles: Roles returned = " + JSON.stringify(rolesObj))
  37                         this.availableRoles = rolesObj;
  38                         this.preSelectedRoles = {roles:[]};
  39
  40                         if(($scope.ngDialogData.source=='edit') && this.isMidLevelMenuItem()){
  41                             this.preSelectedRoles = {roles:[]};
  42                         }else if(!angular.isUndefined(this.menuItem.menuDetails) &&
  43                             $scope.ngDialogData.source=='edit' && this.isLeafMenuItem() &&
  44                             this.menuItem.menuDetails.appid!=appid) {
  45                             this.preSelectedRoles = {roles:[]};
  46                         }else{
  47                             if((!angular.isUndefined(this.menuItem.menuDetails)) &&
  48                                 (!angular.isUndefined(this.menuItem.menuDetails.roles))){
  49                                     $log.debug('menuDetails.roles: ' + this.menuItem.menuDetails.roles);
  50                                     for(var i=0; i<this.menuItem.menuDetails.roles.length; i++){
  51                                         var role = {"roleId":this.menuItem.menuDetails.roles[i]};
  52                                         $log.debug('MenuDetailsModalCtrl::getAvailableRoles: adding role to preselected: ' + i + ': ' + JSON.stringify(role));
  53                                         this.preSelectedRoles.roles.push(role);
  54                                     }
  55                             }
  56                         }
  57                         $rootScope.$broadcast('availableRolesReady');
  58                         this.isSaving = false;
  59                     }).catch(err => {
  60                         $log.error("MenuDetailsModalCtrl::getAvailableRoles: error: " + err);
  61                     });
  62                 } else {
  63                     $log.debug("MenuDetailsModalCtrl::getAvailableRoles: appid was null");
  64                 }
  65             };
  66
  67             let getAvailableApps = () => {
  68                 functionalMenuService.getAvailableApplications().then(apps => {
  69                     $log.debug("MenuDetailsModalCtrl::getAvailableApps: Apps returned = " + JSON.stringify(apps))
  70                     this.availableApps = apps;
  71                     if (angular.isDefined(this.selectedApp) && angular.isDefined(this.selectedApp.index)) {
  72                         for (var i = 0; i < apps.length; i++) {
  73                             if (apps[i].index === this.selectedApp.index) {
  74                                 $log.debug("MenuDetailsModalCtrl::getAvailableApps: found app with index: " + this.selectedApp.index);
  75                                 $log.debug("MenuDetailsModalCtrl::getAvailableApps: setting isDisabled to: " + !apps[i].enabled);
  76                                 this.selectedApp.isDisabled = !apps[i].enabled;
  77                                 break;
  78                             }
  79                         }
  80                         $log.debug("didn't find index: " + this.selectedApp.index);
  81                     }
  82                 })['catch'](function (err) {
  83                     $log.error("MenuDetailsModalCtrl::getAvailableApps: getAvailableApps error: " + err);
  84                 }).finally(()=>{
  85                     this.isSaving = false;
  86                 });
  87             };
  88
  89             let init = () => {
  90                 $log.info('MenuDetailsModalCtrl::init');
  91                 this.saveOrContinueBtnText = "Save";
  92                 this.isSaving = false;
  93                 this.displayRoles = $scope.ngDialogData.source=='view' ? true : false;
  94                 this.formEditable = $scope.ngDialogData.source=='view' ? false : true;
  95                 this.selectedRole = [];
  96                 this.availableRoles = [];
  97                 this.menuItem = _.clone($scope.ngDialogData.menuItem);
  98                 $log.info('MenuDetailsModalCtrl::getAvailableApps: Within init, about to check menuDetails for defined');
  99                 if(!angular.isUndefined(this.menuItem.menuDetails) &&
 100                     ($scope.ngDialogData.source=='view' ||
 101                     ($scope.ngDialogData.source=='edit') && this.isLeafMenuItem() )){
 102
 103                     $log.debug("MenuDetailsModalCtrl::init: menuItem: ");
 104                     $log.debug('MenuDetailsModalCtrl::init: ',this.menuItem);
 105                     this.menuItem.menu.url = this.menuItem.menuDetails.url;
 106                     this.selectedApp={};
 107                     this.selectedApp.index = this.menuItem.menuDetails.appid;
 108                     getAvailableRoles(this.selectedApp.index);
 109
 110                 }
 111
 112                 if($scope.ngDialogData.source=='view' || $scope.ngDialogData.source=='edit'){
 113                     this.menutitle = this.menuItem.menu.name;
 114                     this.menuLocation = this.isParentMenuItem() ? this.menuItem.menu.name : this.menuItem.menu.parent.name;
 115                 }else{
 116                     this.menutitle = '';
 117                     this.menuLocation = this.menuItem.menu.name;
 118                 }
 119                 getAvailableApps();
 120                 $log.debug("MenuDetailsModalCtrl::init: Menu details: " +  JSON.stringify(this.menuItem.menuDetails));
 121             };
 122
 123
 124             this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
 125
 126             this.conflictMessages = {};
 127             this.scrollApi = {};
 128             let handleConflictErrors = err => {
 129                 if(!err.data){
 130                     return;
 131                 }
 132                 if(!err.data.length){
 133                     err.data = [err.data]
 134                 }
 135                 $log.debug('MenuDetailsModalCtrl::handleConflictErrors: err.data = ' + JSON.stringify(err.data));
 136                 _.forEach(err.data, item => {
 137                     _.forEach(item.fields, field => {
 138                         this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
 139                         $log.debug('MenuDetailsModalCtrl::handleConflictErrors: fieldName = ' + field.name);
 140                         $scope.functionalMenuForm[field.name].$setValidity('conflict', false);
 141                         watchOnce[field.name]();
 142                     });
 143                 });
 144                 this.scrollApi.scrollTop();
 145             };
 146
 147             let resetConflict = fieldName => {
 148                 delete this.conflictMessages[fieldName];
 149                 $log.debug('MenuDetailsModalCtrl::resetConflict: $setValidity(true) = ' + fieldName);
 150                 if($scope.functionalMenuForm[fieldName]){
 151                     $scope.functionalMenuForm[fieldName].$setValidity('conflict', true);
 152                 }
 153             };
 154
 155             let watchOnce = {
 156                 text: () => {
 157                     let unregisterName = $scope.$watch('functionalMenuDetails.menutitle', (newVal, oldVal) => {
 158                         if(newVal.toLowerCase() !== oldVal.toLowerCase()){
 159                             resetConflict('text');
 160                             unregisterName();
 161                         }
 162                     });
 163                 },
 164                 url: () => {
 165                     let unregisterUrl = $scope.$watch('functionalMenuDetails.menuItem.menu.url', (newVal, oldVal) => {
 166                         if(newVal.toLowerCase() !== oldVal.toLowerCase()){
 167                             resetConflict('url');
 168                             unregisterUrl();
 169                         }
 170                     });
 171                 }
 172             };
 173
 174             //***************************
 175
 176             this.isLeafMenuItem = () => {
 177                 return this.menuItem.menu.children.length>0 ? false : true;
 178             };
 179
 180             this.isMidLevelMenuItem = () => {
 181                 return this.menuItem.menu.parentMenuId!=null && this.menuItem.menu.children.length>0 ? true : false;
 182             };
 183
 184             this.isParentMenuItem = () => {
 185                 return this.menuItem.menu.parentMenuId!=null ? false : true;
 186             };
 187
 188             this.updateSelectedApp = (appItem) => {
 189                 if (!appItem) {
 190                     return;
 191                 }
 192                 $log.debug('MenuDetailsModalCtrl::updateSelectedApp: drop down app item = ' + JSON.stringify(appItem.index));
 193                 $log.debug("MenuDetailsModalCtrl::updateSelectedApp: appItem in updateSelectedApp: ");
 194                 $log.debug('MenuDetailsModalCtrl::updateSelectedApp: ',appItem);
 195                 this.selectedApp.isDisabled = ! appItem.enabled;
 196                 $log.debug("MenuDetailsModalCtrl::updateSelectedApp: isDisabled: "+this.selectedApp.isDisabled);
 197                 getAvailableRoles(appItem.index);
 198             };
 199
 200             this.continue = () => {
 201                 this.displayRoles = true;
 202                 this.formEditable = false;
 203             };
 204
 205             this.saveChanges = () => {
 206
 207                 if(!!this.menuItem.menu.url && (angular.isUndefined(this.selectedApp) || !this.selectedApp.index>0)) {
 208                     confirmBoxService.showInformation('Please select the appropriate app, or remove the url').then(isConfirmed => {});
 209                     return;
 210                 }else if(!this.menuItem.menu.url && !angular.isUndefined(this.selectedApp) && this.selectedApp.index>0){
 211                     confirmBoxService.showInformation('Please enter url, or select "No Application"').then(isConfirmed => {});
 212                     return;
 213                 }else if(!this.menutitle){
 214                     confirmBoxService.showInformation('Please enter the Menu title').then(isConfirmed => {});
 215                     return;
 216                 }
 217
 218                 this.isSaving = true;
 219                 var activeMenuItem = {};
 220
 221                 if ($scope.ngDialogData.source == 'edit') {
 222                     $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving an edit menu item');
 223                     activeMenuItem = {
 224                         menuId:this.menuItem.menu.menuId,
 225                         column:this.menuItem.menu.column,
 226                         text:this.menutitle,
 227                         parentMenuId:this.menuItem.menu.parentMenuId,
 228                         url:this.menuItem.menu.url,
 229                         appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
 230                         roles:this.selectedRole
 231                     };
 232                     if (!activeMenuItem.appid && !activeMenuItem.url) {
 233                         activeMenuItem.roles = null;
 234                     }
 235                     functionalMenuService.saveEditedMenuItem(activeMenuItem)
 236                         .then(() => {
 237                             $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
 238                             $scope.closeThisDialog(true);
 239                         }).catch(err => {
 240                         if(err.status === 409){
 241                             handleConflictErrors(err);
 242                         }
 243                         $log.error('MenuDetailsModalCtrl::saveChanges: error - ',err);
 244                     }).finally(()=>{
 245                         this.isSaving = false;
 246                     });
 247
 248                     $log.debug("MenuDetailsModalCtrl::saveChanges: Edit Menu output will be: " + JSON.stringify(activeMenuItem));
 249                 } else {
 250                     $log.debug('MenuDetailsModalCtrl::saveChanges: Will be saving a New menu item');
 251                     var newMenuItem = {
 252                         menuId:null,
 253                         column:this.menuItem.menu.column,
 254                         text:this.menutitle,
 255                         parentMenuId:this.menuItem.menu.menuId,
 256                         url:this.menuItem.menu.url,
 257                         appid: angular.isUndefined(this.selectedApp) ? null:this.selectedApp.index,
 258                         roles:this.selectedRole
 259                     };
 260
 261                     $log.debug("MenuDetailsModalCtrl::saveChanges:  New Menu output will be: " + JSON.stringify(newMenuItem));
 262                     functionalMenuService.saveMenuItem(newMenuItem)
 263                         .then(() => {
 264                             $log.debug('MenuDetailsModalCtrl::saveChanges:  Menu Item saved');
 265                             $scope.closeThisDialog(true);
 266                         }).catch(err => {
 267                         if(err.status === 409){//Conflict
 268                             handleConflictErrors(err);
 269                         }
 270                         $log.error('MenuDetailsModalCtrl::saveChanges error: ', err);
 271                     }).finally(()=>{
 272                         this.isSaving = false;
 273                     });
 274
 275                 }
 276             };
 277
 278             init();
 279
 280             $scope.$on('$stateChangeStart', e => {
 281                 e.preventDefault();
 282             });
 283         }
 284     }
 285     MenuDetailsModalCtrl.$inject = ['$scope', '$log', 'functionalMenuService', 'errorMessageByCode', 'ECOMP_URL_REGEX','$rootScope','confirmBoxService'];
 286     angular.module('ecompApp').controller('MenuDetailsModalCtrl', MenuDetailsModalCtrl);
 287
 288     angular.module('ecompApp').directive('dropdownMultiselect', ['functionalMenuService',function(){
 289         return {
 290             restrict: 'E',
 291             scope: {
 292                 model: '=',
 293                 options: '=',
 294                 populated_roles: '=preSelected',
 295                 dropdownTitle: '@',
 296                 source: '='
 297             },
 298             template: "<div class='btn-group' data-ng-class='{open: open}'>" +
 299             "<button class='btn btn-medium'>{{dropdownTitle}}</button>" +
 300             "<button class='btn dropdown-toggle' data-ng-click='open=!open;openDropDown()'><span class='caret'></span></button>" +
 301             "<ul class='dropdown-menu dropdown-menu-medium' aria-labelledby='dropdownMenu'>" +
 302             "<li data-ng-repeat='option in options'> <input ng-disabled='setDisable(source)'  type='checkbox' data-ng-change='setSelectedItem(option.roleId)' ng-model='selectedItems[option.roleId]'>{{option.rolename}}</li>" +
 303             "</ul>" +
 304             "</div>",
 305             controller: function ($scope) {
 306                 $scope.selectedItems = {};
 307                 $scope.checkAll = false;
 308                 $scope.$on('availableRolesReady', function() {
 309                     init();
 310                 });
 311
 312                 function init() {
 313                     console.log('dropdownMultiselect init');
 314                     $scope.dropdownTitle = $scope.source =='view' ? 'View Roles' : 'Select Roles';
 315                     console.log('$scope.populated_roles = ' + $scope.populated_roles);
 316                 }
 317
 318                 $scope.$watch('populated_roles', function(){
 319                     if ($scope.populated_roles && $scope.populated_roles.length>0) {
 320                         for (var i = 0; i < $scope.populated_roles.length; i++) {
 321                             $scope.model.push($scope.populated_roles[i].roleId);
 322                             $scope.selectedItems[$scope.populated_roles[i].roleId] = true;
 323                         }
 324                         if ($scope.populated_roles.length == $scope.options.length) {
 325                             $scope.checkAll = true;
 326                         }
 327                     }else{
 328                         deselectAll();
 329                     }
 330                 });
 331
 332                 $scope.openDropDown = function () {
 333
 334                 };
 335
 336                 $scope.checkAllClicked = function () {
 337                     if ($scope.checkAll) {
 338                         selectAll();
 339                     } else {
 340                         deselectAll();
 341                     }
 342                 };
 343
 344                 function selectAll() {
 345                     $scope.model = [];
 346                     $scope.selectedItems = {};
 347                     angular.forEach($scope.options, function (option) {
 348                         $scope.model.push(option.roleId);
 349                     });
 350                     angular.forEach($scope.model, function (id) {
 351                         $scope.selectedItems[id] = true;
 352                     });
 353                     console.log($scope.model);
 354                 };
 355
 356                 function deselectAll() {
 357                     $scope.model = [];
 358                     $scope.selectedItems = {};
 359                     console.log($scope.model);
 360                 };
 361
 362                 $scope.setSelectedItem = function (id) {
 363                     var filteredArray = [];
 364                     if ($scope.selectedItems[id] == true) {
 365                         $scope.model.push(id);
 366                     } else {
 367                         filteredArray = $scope.model.filter(function (value) {
 368                             return value != id;
 369                         });
 370                         $scope.model = filteredArray;
 371                         $scope.checkAll = false;
 372                     }
 373                     console.log(filteredArray);
 374                     return false;
 375                 };
 376
 377                 $scope.setDisable = function(source){
 378                     return source =='view' ? true : false;
 379                 }
 380             }
 381         }
 382     }]);
 383
 384 })();