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, OnChanges } 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     languageFinal : string;
  61     @Input() langFromTab:string;
  62
  63     @Output() collapsedEvent = new EventEmitter<boolean>();
  64
  65     constructor(public router: Router, public sidebarService: SidebarService) {
  66         this.router.events.subscribe(val => {
  67             if (
  68                 val instanceof NavigationEnd &&
  69                 window.innerWidth <= 992 &&
  70                 this.isToggled()
  71             ) {
  72                 this.toggleSidebar();
  73             }
  74         });
  75     }
  76
  77     ngOnChanges() {
  78         this.changeLang(this.langFromTab);
  79     }
  80
  81     changeLang(lang){
  82         this.menuData=[];
  83         this.isActive = false;
  84         this.collapsed = false;
  85         this.languageFinal=lang;
  86         this.showMenu = '';
  87         this.pushRightClass = 'push-right';
  88         this.sidebarService.getLeftMenu()
  89         .subscribe(data => {
  90             this.result = data;
  91             if (this.result.data && this.result.data2) {
  92                 this.leftParentData = JSON.parse(this.result.data);
  93                 this.leftChildData = JSON.parse(this.result.data2);
  94             } else {
  95                 this.labelName = this.result.label;
  96                 this.leftParentData = this.result.navItems;
  97                 this.showOnlyParentMenu = true;
  98             }
  99
 100             for (var i = 0; i < this.leftParentData.length; i++) {
 101                 var parentItem = {
 102                     name: null,
 103                     imageSrc: null,
 104                     href: null,
 105                     menuItems: [],
 106                     state: null
 107                 }
 108                 if (this.showOnlyParentMenu) {
 109                     parentItem.name = this.leftParentData[i].name;
 110                     parentItem.imageSrc = this.leftParentData[i].imageSrc;
 111                     parentItem.state = '/'+this.leftParentData[i].state;
 112                 } else {
 113                     parentItem.name = this.leftParentData[i].label;
 114                     parentItem.imageSrc = this.leftParentData[i].imageSrc;
 115                 }
 116                 // Add link to items with no subitems
 117                 if (!this.showOnlyParentMenu) {
 118                     if (this.leftChildData[i].length == 0)
 119                         parentItem.href = this.leftParentData[i].action;
 120
 121                     for (var j = 0; j < this.leftChildData[i].length; j++) {
 122
 123                         var childItem = {
 124                             name: null,
 125                             href: null
 126                         };
 127                         if (this.leftChildData[i][j].label != null && this.leftChildData[i][j].label.length > 0) {
 128
 129                             childItem.name = this.leftChildData[i][j].label;
 130                             childItem.href = this.leftChildData[i][j].action;
 131                             parentItem.menuItems.push(childItem);
 132                         }
 133                     }
 134                 }
 135                 this.menuData.push(parentItem);
 136             }
 137
 138         });
 139     }
 140
 141     ngOnInit() {
 142         this.changeLang("");
 143     }
 144
 145     eventCalled() {
 146         this.isActive = !this.isActive;
 147     }
 148
 149     addExpandClass(element: any) {
 150         if (element === this.showMenu) {
 151             this.showMenu = '0';
 152         } else {
 153             this.showMenu = element;
 154         }
 155     }
 156
 157     toggleCollapsed() {
 158         this.collapsed = !this.collapsed;
 159         this.collapsedEvent.emit(this.collapsed);
 160     }
 161
 162     isToggled(): boolean {
 163         const dom: Element = document.querySelector('body');
 164         return dom.classList.contains(this.pushRightClass);
 165     }
 166
 167     toggleSidebar() {
 168         const dom: any = document.querySelector('body');
 169         dom.classList.toggle(this.pushRightClass);
 170     }
 171 }