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

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