portal-FE-common/src/app/layout/components/sidebar/sidebar.component.ts

   1 /*
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal SDK
   4  * ===================================================================
   5  * Copyright © 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, Output, EventEmitter, OnInit, Input } from '@angular/core';
  39 import { Router, NavigationEnd } from '@angular/router';
  40 import { SidebarService } from '../../../shared/services/index'
  41
  42 @Component({
  43     selector: 'app-sidebar',
  44     templateUrl: './sidebar.component.html',
  45     styleUrls: ['./sidebar.component.scss']
  46 })
  47 export class SidebarComponent implements OnInit {
  48     @Input() labelName: string;
  49     isActive: boolean;
  50     collapsed: boolean;
  51     showMenu: string;
  52     pushRightClass: string;
  53     result: any;
  54     showOnlyParentMenu: boolean;
  55     leftParentData: any;
  56     leftChildData: any;
  57     menuData: Array<object> = [];
  58     page: any;
  59
  60     @Output() collapsedEvent = new EventEmitter<boolean>();
  61
  62     constructor(public router: Router, public sidebarService: SidebarService) {
  63         this.router.events.subscribe(val => {
  64             if (
  65                 val instanceof NavigationEnd &&
  66                 window.innerWidth <= 992 &&
  67                 this.isToggled()
  68             ) {
  69                 this.toggleSidebar();
  70             }
  71         });
  72     }
  73
  74     ngOnInit() {
  75         this.isActive = false;
  76         this.collapsed = false;
  77         this.showMenu = '';
  78         this.pushRightClass = 'push-right';
  79         this.sidebarService.getLeftMenu()
  80             .subscribe(data => {
  81                 this.result = data;
  82                 if (this.result.data && this.result.data2) {
  83                     this.leftParentData = JSON.parse(this.result.data);
  84                     this.leftChildData = JSON.parse(this.result.data2);
  85                 } else {
  86                     this.labelName = this.result.label;
  87                     this.leftParentData = this.result.navItems;
  88                     this.showOnlyParentMenu = true;
  89                 }
  90
  91                 for (var i = 0; i < this.leftParentData.length; i++) {
  92                     var parentItem = {
  93                         name: null,
  94                         imageSrc: null,
  95                         href: null,
  96                         menuItems: [],
  97                         state: null
  98                     }
  99                     if (this.showOnlyParentMenu) {
 100                         parentItem.name = this.leftParentData[i].name;
 101                         parentItem.imageSrc = this.leftParentData[i].imageSrc;
 102                         parentItem.state = '/'+this.leftParentData[i].state;
 103                     } else {
 104                         parentItem.name = this.leftParentData[i].label;
 105                         parentItem.imageSrc = this.leftParentData[i].imageSrc;
 106                     }
 107                     // Add link to items with no subitems
 108                     if (!this.showOnlyParentMenu) {
 109                         if (this.leftChildData[i].length == 0)
 110                             parentItem.href = this.leftParentData[i].action;
 111
 112                         for (var j = 0; j < this.leftChildData[i].length; j++) {
 113
 114                             var childItem = {
 115                                 name: null,
 116                                 href: null
 117                             };
 118                             if (this.leftChildData[i][j].label != null && this.leftChildData[i][j].label.length > 0) {
 119
 120                                 childItem.name = this.leftChildData[i][j].label;
 121                                 childItem.href = this.leftChildData[i][j].action;
 122                                 parentItem.menuItems.push(childItem);
 123                             }
 124                         }
 125                     }
 126                     this.menuData.push(parentItem);
 127                 }
 128
 129             });
 130
 131     }
 132     eventCalled() {
 133         this.isActive = !this.isActive;
 134     }
 135
 136     addExpandClass(element: any) {
 137         if (element === this.showMenu) {
 138             this.showMenu = '0';
 139         } else {
 140             this.showMenu = element;
 141         }
 142     }
 143
 144     toggleCollapsed() {
 145         this.collapsed = !this.collapsed;
 146         this.collapsedEvent.emit(this.collapsed);
 147     }
 148
 149     isToggled(): boolean {
 150         const dom: Element = document.querySelector('body');
 151         return dom.classList.contains(this.pushRightClass);
 152     }
 153
 154     toggleSidebar() {
 155         const dom: any = document.querySelector('body');
 156         dom.classList.toggle(this.pushRightClass);
 157     }
 158 }