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