Adding new components with portal-FE-common

added layout, admins, functional-menu, portal-admins, plugins components along with helpers class, models, pipes and dependent angular services.

Issue-ID: PORTAL-795
Change-Id: I8e9771fcee5d0e58c4a48711c943761f29ae48b8
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>

1 files changed, 192 insertions, 0 deletions

diff --git a/portal-FE-common/src/app/pages/functional-menu/functional-menu.component.ts b/portal-FE-common/src/app/pages/functional-menu/functional-menu.component.ts
new file mode 100644
index 00000000..655b4cb4
--- /dev/null
+++ b/portal-FE-common/src/app/pages/functional-menu/functional-menu.component.ts
@@ -0,0 +1,192 @@
+/*-
+ * ============LICENSE_START==========================================
+ * ONAP Portal
+ * ===================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * ===================================================================
+ *
+ * Unless otherwise specified, all software contained herein is licensed
+ * under the Apache License, Version 2.0 (the "License");
+ * you may not use this software except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Unless otherwise specified, all documentation contained herein is licensed
+ * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
+ * you may not use this documentation except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *             https://creativecommons.org/licenses/by/4.0/
+ *
+ * Unless required by applicable law or agreed to in writing, documentation
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * ============LICENSE_END============================================
+ *
+ * 
+ */
+import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FunctionalMenuService } from 'src/app/shared/services';
+import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
+import { FunctionalMenuDialogComponent } from './functional-menu-dialog/functional-menu-dialog.component';
+
+
+@Component({
+  selector: 'app-functional-menu',
+  templateUrl: './functional-menu.component.html',
+  styleUrls: ['./functional-menu.component.scss']
+})
+export class FunctionalMenuComponent implements OnInit {
+
+  result: any;
+  functionalMenu: any = [];
+  treedata = [];
+  isEditMode: boolean;
+  operationName: string;
+  self: any;
+  constructor(public functionalMenuService : FunctionalMenuService, public ngbModal: NgbModal) { }
+
+  ngOnInit() {
+    this.self = this;
+    this.functionalMenu = [];
+    this.getFunctionalMenu();
+
+  }
+
+  /**
+   * regenerateFunctionalMenuAncestors
+   */
+  regenerateFunctionalMenuAncestors(){
+    this.functionalMenuService.regenerateFunctionalMenuAncestors()
+    .subscribe(_data => {
+        this.result = _data
+        if(this.result){
+          const modalRef = this.ngbModal.open(ConfirmationModalComponent);
+          modalRef.componentInstance.title = "";
+          modalRef.componentInstance.message = 'You have successfully regenerated the menu.';
+          modalRef.result.then((result) => { }, (resut) => {return;});
+          this.getFunctionalMenu();
+        }
+    }, error =>{
+      console.log(error);
+      const modalRef = this.ngbModal.open(ConfirmationModalComponent);
+      modalRef.componentInstance.title = "";
+      modalRef.componentInstance.message = 'There was an error while regenerating the menu.';
+      modalRef.result.then((result) => { }, (resut) => {return;});
+    });
+  }
+
+  /**
+   * getFunctionalMenu
+   */
+  getFunctionalMenu(){
+    let actualData=[];
+    this.functionalMenuService.getManagedFunctionalMenu()
+    .subscribe(_data => {
+        this.result = _data;
+        if(this.result){
+          for(let i = 0; i < this.result.length; i++){
+            this.result[i].children=[];
+            this.result[i].label= this.result[i].text;
+            this.result[i].id= this.result[i].text;
+          }
+          //Adding actual child items to children array in res objects
+          for(let i = 0; i < this.result.length; i++){
+             let parentId=this.result[i].menuId;
+             for(let j = 0; j < this.result.length; j++){
+                let childId=this.result[j].parentMenuId;
+                if(parentId===childId){
+                  this.result[i].children.push(this.result[j]);
+                }
+             }
+          }
+           // Sort the top-level menu items in order based on the column
+          this.result.sort(function(a, b) {
+            return a.column-b.column;
+          });
+
+          // Sort all the children in order based on the column
+          for(let i = 0; i <  this.result.length; i++){
+              this.result[i].children.sort(function(a, b){
+                  return a.column-b.column;
+              });
+          }
+
+          //Forming actual parent items
+          for(let i = 0; i <  this.result.length; i++){
+              let parentId= this.result[i].parentMenuId;
+              if(parentId===null){
+                  actualData.push( this.result[i]);
+              }
+          }
+
+          this.treedata = actualData;
+          //console.log("this.treedata :: ",this.treedata);
+          
+          if(this.treedata){
+            this.buildTree(this.treedata,this.ngbModal, this.self);
+          }
+          
+       }
+    }, error =>{
+      console.log(error);
+    });
+
+  }
+
+  /**
+   * buildTree
+   * @param treedataarray 
+   * @param ngbModal 
+   */
+  buildTree(treedataarray,ngbModal: NgbModal , _self){
+    //console.log("treedataarray>>>>",treedataarray);
+    $(function() {
+        $('#jqTree').tree('loadData', treedataarray);
+        $('#jqTree').tree({
+            data: treedataarray,
+            autoOpen: false,
+            dragAndDrop: true,
+            onCreateLi: function(node, $li) {
+                ////console.log("node >>",node);
+            }
+        }).on(
+          'tree.contextmenu',
+          function(event:any) {
+              // The clicked node is 'event.node'
+              var node = event.node;
+              openMenuDetailsModal(node, "view");
+          }
+        );
+
+        var openMenuDetailsModal = function(node: any, actionName: string ){
+          const modalRef = ngbModal.open(FunctionalMenuDialogComponent, { size: 'lg' });
+          modalRef.componentInstance.title = 'Functional Menu ',actionName;
+          if(node != 'undefined' && node){
+            modalRef.componentInstance.nodedata = node;
+            modalRef.componentInstance.operationName = actionName;
+          }else{
+            modalRef.componentInstance.nodedata  = {};
+          }
+          modalRef.componentInstance.passEntry.subscribe((receivedEntry: any) => {
+            //console.log("receivedEntry>>>>",receivedEntry);
+            ngbModal.dismissAll();
+            if(receivedEntry.httpStatusCode===200){
+              _self.getFunctionalMenu();
+            }
+          });
+        }
+     });
+  }
+}