ecomp-portal-FE-os/client/src/views/functionalMenu/functionalMenu.controller.js

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  37  */
  38 'use strict';
  39 (function () {
  40     class FunctionalMenuCtrl {
  41         constructor($log, functionalMenuService, $scope,ngDialog, confirmBoxService,$modal) {
  42             $log.info('FunctionalMenuCtrl init');
  43
  44             $scope.invokeDialog = () => {
  45                 // alert("click dialog");
  46             };
  47
  48             this.regenerateFunctionalMenuAncestors = () => {
  49                 functionalMenuService.regenerateFunctionalMenuAncestors().then(res => {
  50                     $log.debug("FunctionalMenuCtrl:regenerateFunctionalMenuAncestors::returned from regenerateFunctionalMenuAncestors API call");
  51                     confirmBoxService.showInformation('You have successfully regenerated the menu.').then(isConfirmed => {
  52                     });
  53                 })['catch'](function (err) {
  54                     $log.error("FunctionalMenuCtrl:regenerateFunctionalMenuAncestors:: error: " + err);
  55                     confirmBoxService.showInformation('There was an error while regenerating the menu.').then(isConfirmed => {
  56                     });
  57                 });
  58             };
  59
  60             let getFunctionalMenu = () => {
  61                 this.isLoadingTable = true;
  62                 functionalMenuService.getManagedFunctionalMenu().then(res => {
  63
  64                     let actualData=[];
  65
  66                     //Adding children and label attribute to all objects in res
  67                     for(let i = 0; i < res.length; i++){
  68                         res[i].children=[];
  69                         res[i].label=res[i].text;
  70                         res[i].id=res[i].text;
  71
  72                     }
  73                     //Adding actual child items to children array in res objects
  74                     for(let i = 0; i < res.length; i++){
  75
  76                         let parentId=res[i].menuId;
  77                         for(let j = 0; j < res.length; j++){
  78                             let childId=res[j].parentMenuId;
  79                             if(parentId===childId){
  80                                 res[i].children.push(res[j]);
  81
  82                             }
  83                         }
  84                     }
  85
  86                     // Sort the top-level menu items in order based on the column
  87                     res.sort(function(a, b) {
  88                         return a.column-b.column;
  89                     });
  90
  91                     // Sort all the children in order based on the column
  92                     for(let i = 0; i < res.length; i++){
  93                         res[i].children.sort(function(a, b){
  94                             return a.column-b.column;
  95                         });
  96                     }
  97
  98                     //Forming actual parent items
  99                     for(let i = 0; i < res.length; i++){
 100                         let parentId=res[i].parentMenuId;
 101                         if(parentId===null){
 102                             actualData.push(res[i]);
 103                         }
 104                     }
 105
 106                     $scope.treedata = actualData;
 107
 108                 }).catch(err => {
 109                     $log.error('FunctionalMenuCtrl:getFunctionalMenu:: error ',err);
 110                 }).finally(()=> {
 111                     this.isLoadingTable = false;
 112                 });
 113
 114             };
 115
 116
 117             let init = () => {
 118                 this.isLoadingTable = false;
 119                 this.functionalMenu = [];
 120                 getFunctionalMenu();
 121                 this.searchString = '';
 122
 123
 124             };
 125
 126             this.filterByDropdownValue = item => {
 127                 if(this.filterByApp.value === ''){
 128                     return true;
 129                 }
 130                 return item.appName === this.filterByApp.value;
 131             };
 132
 133             let getDialogTitle = (source) => {
 134                 switch (source) {
 135                     case 'edit':
 136                         return "Functional Menu - Edit";
 137                     case 'view':
 138                         return "Functional Menu - View";
 139                     case 'add':
 140                         return "Functional Menu - Add";
 141                     default:
 142                         return "Functional Menu";
 143                 };
 144             };
 145
 146             $scope.reloadTreeStructure = (selectedItem,source) => {
 147                 getFunctionalMenu();
 148             };
 149             $scope.openMenuDetailsModal = (selectedItem,source) => {
 150                 let data = null;
 151                 let selectedMenuDetails = null;
 152                 console.log('selectedItem: ', selectedItem);
 153
 154                 functionalMenuService.getMenuDetails(selectedItem.menuId)
 155                     .then(function( resp ){
 156                         selectedMenuDetails = resp;
 157                         $log.info('FunctionalMenuCtrl::openMenuDetailsModal: getMenuDetails: ', resp );
 158
 159                         if(selectedItem){
 160                             data = {
 161                                 menuItem: {menu: _.clone(selectedItem),menuDetails:_.clone(selectedMenuDetails)},
 162                                 source: source,
 163                                 title: getDialogTitle(source)
 164                             };
 165                         }
 166                           var modalInstance = $modal.open({
 167                             templateUrl: 'app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html',
 168                             controller: 'MenuDetailsModalCtrl as functionalMenuDetails',
 169                             sizeClass: 'modal-large',
 170                             resolve: {
 171                                                 items: function () {
 172                                           return data;
 173                                                 }
 174                                 }
 175                         })
 176
 177                         modalInstance.result.finally(function (needUpdate){
 178                                 if(needUpdate.value === true){
 179                                         $log.debug('FunctionalMenuCtrl::openMenuDetailsModal: updating table data...');
 180                                 if(source==="edit") {
 181                                     init();
 182                                 }
 183
 184                           }
 185                         });
 186                     });
 187             };
 188
 189
 190             $scope.createNewMenuItem = (selectedItem,source) => {
 191
 192                 if(selectedItem != null && selectedItem.getLevel() >= 4){
 193                     confirmBoxService.showInformation('You are not allowed to have a menu item at a level greater than 4.').then(isConfirmed => {
 194
 195                     });
 196                     return ;
 197                 }
 198
 199                 let data = null;
 200                 let selectedMenuDetails = null;
 201                 functionalMenuService.getMenuDetails(selectedItem.menuId)
 202                     .then(function( resp ){
 203                         selectedMenuDetails = resp;
 204
 205                         if((selectedItem.children===null || !selectedItem.children.length>0) &&
 206                             (!!selectedMenuDetails.url || !!selectedMenuDetails.appid || !!selectedMenuDetails.roles)){
 207                             confirmBoxService.showInformation('Warning: the child menu item "' + selectedItem.name + '" is already configured with an application. You can create a new mid-level menu item, and move this item under it.').then(isConfirmed => {
 208                                 return;
 209                             });
 210                         }else{
 211                             if(selectedItem){
 212                                 data = {
 213                                     menuItem: {menu: _.clone(selectedItem)},
 214                                     source:source,
 215                                     title: getDialogTitle(source)
 216                                 };
 217                             }
 218
 219                                 var modalInstance = $modal.open({
 220                                 templateUrl: 'app/views/functionalMenu/functionalMenu-dialog/menu-details.modal.html',
 221                                 controller: 'MenuDetailsModalCtrl as functionalMenuDetails',
 222                                 sizeClass: 'modal-large',
 223                                 resolve: {
 224                                                         items: function () {
 225                                           return data;
 226                                                         }
 227                                         }
 228                             })
 229
 230                             modalInstance.result.finally(function (needUpdate){
 231                                 if(needUpdate.value === true){
 232                                     $log.debug('FunctionalMenuCtrl::getMenuDetails: updating table data...');
 233                                     init();
 234                                     //getOnboardingWidgets();
 235
 236                               }
 237                                 });
 238                         }
 239                     });
 240             };
 241
 242             $scope.deleteMenuItem = (selectedItem,source) => {
 243                 $log.info('FunctionalMenuCtrl:deleteMenuItem:: delete selectedItem: ', selectedItem);
 244
 245                 if(selectedItem.children!=null && selectedItem.children.length>0){
 246                     confirmBoxService.showInformation('You are not allowed to delete a menu item that has children. You can only delete leaf menu items.').then(isConfirmed => {
 247
 248                     });
 249                 }else{
 250                     confirmBoxService.deleteItem(selectedItem.name).then(isConfirmed => {
 251                         if(isConfirmed){
 252                             $log.info('FunctionalMenuCtrl:deleteMenuItem:: Deleting Menu Item :: name: '+selectedItem.name+'; menuId: '+selectedItem.menuId);
 253                             $log.info('FunctionalMenuCtrl:deleteMenuItem:: selectedItem: ', selectedItem);
 254
 255                             functionalMenuService.deleteMenuItem(selectedItem.menuId).then(() => {
 256                                 //TODO:Have to splice menu item
 257                                 //this.widgetsList.splice(this.widgetsList.indexOf(widget), 1);
 258                                 $log.info('FunctionalMenuCtrl:deleteMenuItem:: Removed Menu Item :: '+selectedItem.name);
 259                                 init();
 260                             }).catch(err => {
 261                                 $log.error(err);
 262                             });
 263                         }
 264                     }).catch(err => {
 265                         $log.error(err);
 266                     });
 267                 }
 268             };
 269
 270             init();
 271         }
 272     }
 273     FunctionalMenuCtrl.$inject = ['$log', 'functionalMenuService','$scope', 'ngDialog', 'confirmBoxService','$modal'];
 274     angular.module('ecompApp').controller('FunctionalMenuCtrl', FunctionalMenuCtrl);
 275
 276     angular.module('ecompApp').directive('jqTree', ['functionalMenuService','$log','confirmBoxService',function(functionalMenuService,$log,confirmBoxService){
 277         return {
 278             templateUrl: 'jqtree-tmpl.html',
 279             link: function(scope, el, attrs){
 280
 281                 var $jqTree =  el.find('#jqTree').tree({
 282                     data: scope.treedata,
 283                     autoOpen: false,
 284                     dragAndDrop: true,
 285                     onCreateLi: function(node, $li) {
 286                         $li.attr('id', node.id.replace(/\s+/g,'_'));
 287                     }
 288                 });
 289
 290                 el.find('#jqTree').bind('tree.move',  function(event){
 291                     event.preventDefault();
 292                     console.log('moved_node', event.move_info.moved_node);
 293                     console.log('target_node', event.move_info.target_node);
 294                     console.log('position', event.move_info.position);
 295                     console.log('previous_parent', event.move_info.previous_parent);
 296
 297
 298
 299                     if(event.move_info.target_node != null &&
 300                         ((event.move_info.position === 'after' && event.move_info.target_node.getLevel() > 4) ||
 301                         (event.move_info.position === 'inside' && event.move_info.target_node.getLevel() > 3))){
 302                         confirmBoxService.showInformation('You are not allowed to have a menu item at a level greater than 4.').then(isConfirmed => {
 303
 304                         });
 305                         return ;
 306                     }
 307
 308                     var confMsg = 'Are you sure you want to move "'+event.move_info.moved_node.name+'" ?';
 309                     if ((event.move_info.position === "inside") && (event.move_info.target_node.url != "")) {
 310                         // If we are moving UNDER a node that has a url associated with it, warn the user
 311                         // that all the app information will be removed if they do this.
 312                         confMsg = 'Warning: You are moving "'+event.move_info.moved_node.name+'" under "'+event.move_info.target_node.name+'", which has application information associated with it. This will cause all the application information from "'+event.move_info.target_node.name+'" to be deleted.';
 313                     }
 314                     confirmBoxService.moveMenuItem(confMsg).then(isConfirmed => {
 315                         if(isConfirmed){
 316                             /*
 317                              {
 318                              "menuId": 129,
 319                              "column": 3,
 320                              "text": "",
 321                              "parentMenuId": 37,
 322                              "url": "",
 323                              "appid": null,
 324                              "roles": null
 325                              }
 326
 327                              The menuId for the menu item being moved
 328                              The column it is being moved to
 329                              The parentMenuId for the parent it is being moved under
 330                              */
 331
 332                             // The target_node is the node before the position we are
 333                             // moving to. If we are moving to a lower column number, or
 334                             // to a new parent, we must adjust the column to be after
 335                             // the target_node.
 336                             var new_column = event.move_info.target_node.column;
 337                             var old_column = event.move_info.moved_node.column;
 338                             if ((event.move_info.moved_node.parentMenuId !=
 339                                 event.move_info.target_node.parentMenuId) ||
 340                                 (new_column < old_column)
 341                             ) {
 342                                 new_column += 1;
 343                             }
 344                             var activeMenuItem = {
 345                                 menuId:event.move_info.moved_node.menuId,
 346                                 column:new_column,
 347                                 text:"",
 348                                 parentMenuId:event.move_info.target_node.parentMenuId,
 349                                 url:"",
 350                                 appid: null,
 351                                 roles:null
 352                             };
 353                             // When position is "inside", this is a special case,
 354                             // where you are moving to the first column under
 355                             // a parent. The target_node is the parent node.
 356                             // So we need to set the column to 1, and the parentMenuId to the menuId of
 357                             // the target move.
 358                             if (event.move_info.position === "inside") {
 359                                 console.log("special case: target_node is parent");
 360                                 activeMenuItem.column = 1;
 361                                 activeMenuItem.parentMenuId = event.move_info.target_node.menuId;
 362                             }
 363
 364
 365                             functionalMenuService.saveEditedMenuItem(activeMenuItem)
 366                                 .then(() => {
 367                                     $log.debug(' Menu Item moved');
 368                                     scope.reloadTreeStructure();
 369                                 }).catch(err => {
 370                                 $log.error(err);
 371                             }).finally(()=>{
 372                             });
 373                         }
 374                     }).catch(err => {
 375                         $log.error(err);
 376                     });
 377
 378                     //event.move_info.do_move();
 379                 });
 380
 381
 382                 $jqTree.jqTreeContextMenu(el.find('ul.dropdown-menu'), {
 383                     "view": function (node) {scope.openMenuDetailsModal(node,'view'); },
 384                     "edit": function (node) {scope.openMenuDetailsModal(node,'edit'); },
 385                     "delete": function (node) { scope.deleteMenuItem(node,'delete') },
 386                     "add": function (node) {  scope.createNewMenuItem(node,'add') }
 387                 });
 388
 389                 scope.$watch('treedata', function(oldValue, newValue){
 390                     if(oldValue !== newValue){
 391                         console.log('FunctionalMenuCtrl:: Tree value has changed in some way');
 392                         $jqTree.tree('loadData',  scope.treedata);
 393                         $jqTree.tree('reload', function() {
 394                             console.log('FunctionalMenuCtrl:: Tree is reloaded');
 395                         });
 396                     }
 397                 });
 398             }
 399         };
 400     }]);
 401
 402 })();
 403
 404