portal-FE-common/src/app/pages/functional-menu/functional-menu.component.ts

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2019 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  *
  37  */
  38 import { Component, OnInit } from '@angular/core';
  39 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  40 import { FunctionalMenuService } from 'src/app/shared/services';
  41 import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
  42 import { FunctionalMenuDialogComponent } from './functional-menu-dialog/functional-menu-dialog.component';
  43
  44
  45 @Component({
  46   selector: 'app-functional-menu',
  47   templateUrl: './functional-menu.component.html',
  48   styleUrls: ['./functional-menu.component.scss']
  49 })
  50 export class FunctionalMenuComponent implements OnInit {
  51
  52   result: any;
  53   functionalMenu: any = [];
  54   treedata = [];
  55   isEditMode: boolean;
  56   operationName: string;
  57   self: any;
  58   constructor(public functionalMenuService : FunctionalMenuService, public ngbModal: NgbModal) { }
  59
  60   ngOnInit() {
  61     this.self = this;
  62     this.functionalMenu = [];
  63     this.getFunctionalMenu();
  64
  65   }
  66
  67   /**
  68    * regenerateFunctionalMenuAncestors
  69    */
  70   regenerateFunctionalMenuAncestors(){
  71     this.functionalMenuService.regenerateFunctionalMenuAncestors()
  72     .subscribe(_data => {
  73         this.result = _data
  74         if(this.result){
  75           const modalRef = this.ngbModal.open(ConfirmationModalComponent);
  76           modalRef.componentInstance.title = "";
  77           modalRef.componentInstance.message = 'You have successfully regenerated the menu.';
  78           modalRef.result.then((result) => { }, (resut) => {return;});
  79           this.getFunctionalMenu();
  80         }
  81     }, error =>{
  82       console.log(error);
  83       const modalRef = this.ngbModal.open(ConfirmationModalComponent);
  84       modalRef.componentInstance.title = "";
  85       modalRef.componentInstance.message = 'There was an error while regenerating the menu.';
  86       modalRef.result.then((result) => { }, (resut) => {return;});
  87     });
  88   }
  89
  90   /**
  91    * getFunctionalMenu
  92    */
  93   getFunctionalMenu(){
  94     let actualData=[];
  95     this.functionalMenuService.getManagedFunctionalMenu()
  96     .subscribe(_data => {
  97         this.result = _data;
  98         if(this.result){
  99           for(let i = 0; i < this.result.length; i++){
 100             this.result[i].children=[];
 101             this.result[i].label= this.result[i].text;
 102             this.result[i].id= this.result[i].text;
 103           }
 104           //Adding actual child items to children array in res objects
 105           for(let i = 0; i < this.result.length; i++){
 106              let parentId=this.result[i].menuId;
 107              for(let j = 0; j < this.result.length; j++){
 108                 let childId=this.result[j].parentMenuId;
 109                 if(parentId===childId){
 110                   this.result[i].children.push(this.result[j]);
 111                 }
 112              }
 113           }
 114            // Sort the top-level menu items in order based on the column
 115           this.result.sort(function(a, b) {
 116             return a.column-b.column;
 117           });
 118
 119           // Sort all the children in order based on the column
 120           for(let i = 0; i <  this.result.length; i++){
 121               this.result[i].children.sort(function(a, b){
 122                   return a.column-b.column;
 123               });
 124           }
 125
 126           //Forming actual parent items
 127           for(let i = 0; i <  this.result.length; i++){
 128               let parentId= this.result[i].parentMenuId;
 129               if(parentId===null){
 130                   actualData.push( this.result[i]);
 131               }
 132           }
 133
 134           this.treedata = actualData;
 135           //console.log("this.treedata :: ",this.treedata);
 136
 137           if(this.treedata){
 138             this.buildTree(this.treedata,this.ngbModal, this.self);
 139           }
 140
 141        }
 142     }, error =>{
 143       console.log(error);
 144     });
 145
 146   }
 147
 148   /**
 149    * buildTree
 150    * @param treedataarray
 151    * @param ngbModal
 152    */
 153   buildTree(treedataarray,ngbModal: NgbModal , _self){
 154     console.log("treedataarray>>>>",treedataarray);
 155     $(function() {
 156         (<any>$('#jqTree')).tree('loadData', treedataarray);
 157         (<any>$('#jqTree')).tree({
 158             data: treedataarray,
 159             autoOpen: false,
 160             dragAndDrop: true,
 161             onCreateLi: function(node, $li) {
 162                 ////console.log("node >>",node);
 163             }
 164         }).on(
 165           'tree.contextmenu',
 166           function(event:any) {
 167               // The clicked node is 'event.node'
 168               var node = event.node;
 169               openMenuDetailsModal(node, "view");
 170           }
 171         );
 172
 173         var openMenuDetailsModal = function(node: any, actionName: string ){
 174           const modalRef = ngbModal.open(FunctionalMenuDialogComponent, { size: 'lg' });
 175           modalRef.componentInstance.title = 'Functional Menu ',actionName;
 176           if(node != 'undefined' && node){
 177             modalRef.componentInstance.nodedata = node;
 178             modalRef.componentInstance.operationName = actionName;
 179           }else{
 180             modalRef.componentInstance.nodedata  = {};
 181           }
 182           modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
 183             //console.log("receivedEntry>>>>",receivedEntry);
 184             ngbModal.dismissAll();
 185             if(receivedEntry.httpStatusCode===200){
 186               _self.getFunctionalMenu();
 187             }
 188           });
 189         }
 190      });
 191   }
 192 }