catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import {Component, Inject, Input, Output, EventEmitter} from "@angular/core";
  22 import {IHostedApplication, IUserProperties} from "app/models";
  23 import {MenuItemGroup, MenuItem} from "app/utils";
  24 import {UserService} from "../../../services/user.service";
  25 import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config";
  26 import {TranslateService} from "../../../shared/translator/translate.service";
  27 import {DesignersConfiguration, Designer} from "app/models";
  28
  29
  30 declare const window:any;
  31 @Component({
  32     selector: 'top-nav',
  33     templateUrl: './top-nav.component.html',
  34     styleUrls:['./top-nav.component.less']
  35 })
  36 export class TopNavComponent {
  37     @Input() public version:string;
  38     @Input() public menuModel:Array<MenuItemGroup>;
  39     @Input() public topLvlSelectedIndex:number;
  40     @Input() public hideSearch:boolean;
  41     @Input() public searchTerm:string;
  42     @Input() public notificationIconCallback:Function;
  43     @Output() public searchTermChange:EventEmitter<string> = new EventEmitter<string>();
  44     emitSearchTerm(event:string) {
  45         this.searchTermChange.emit(event);
  46     }
  47
  48     public topLvlMenu:MenuItemGroup;
  49     public user:IUserProperties;
  50
  51     constructor(private translateService:TranslateService,
  52                 @Inject('$state') private $state:ng.ui.IStateService,
  53                 private userService:UserService,
  54                 @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
  55         window.nav = this;
  56     }
  57
  58     private _getTopLvlSelectedIndexByState = ():number => {
  59         if (!this.topLvlMenu.menuItems) {
  60             return 0;
  61         }
  62
  63         let result = -1;
  64
  65         //set result to current state
  66         this.topLvlMenu.menuItems.every((item:MenuItem, index:number)=> {
  67             if (item.state === this.$state.current.name) {
  68                 if (this.$state.current.name === 'designers') {
  69                     const designerIdx = _.findIndex(DesignersConfiguration.designers, (designer: Designer) => designer.designerStateUrl === this.$state.params.path);
  70                     if (designerIdx !== -1) {
  71                         result = index + designerIdx;
  72                         return false;
  73                     }
  74                 } else {
  75                     result = index;
  76                     return false;
  77                 }
  78             }
  79             return true;
  80         });
  81
  82         //if it's a different state , checking previous state param
  83         if (result === -1) {
  84             this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> {
  85                 if (item.state === this.$state.params['previousState']) {
  86                     result = index;
  87                 }
  88             });
  89         }
  90
  91         if (result === -1) {
  92             result = 0;
  93         }
  94
  95         return result;
  96     };
  97
  98     ngOnChanges(changes) {
  99         if (changes['menuModel']) {
 100             console.log('menuModel was changed!');
 101             this.generateMenu();
 102         }
 103     }
 104
 105     ngOnInit() {
 106         console.log('Nav is init!', this.menuModel);
 107         this.user = this.userService.getLoggedinUser();
 108
 109         this.translateService.languageChangedObservable.subscribe((lang) => {
 110             let tmpArray: Array<MenuItem> = [
 111                 new MenuItem(this.translateService.translate("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null),
 112                 new MenuItem(this.translateService.translate("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null)
 113             ];
 114
 115             // Only designer can perform onboarding
 116             if (this.user && this.user.role === 'DESIGNER') {
 117                 tmpArray.push(new MenuItem(this.translateService.translate("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null));
 118                 _.each(this.sdcConfig.hostedApplications, (hostedApp: IHostedApplication) => {
 119                     if (hostedApp.exists) {
 120                         tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null));
 121                     }
 122                 });
 123
 124                 _.each(DesignersConfiguration.designers, (designer: Designer) => {
 125                     if (designer.designerDisplayOptions["top"]) {
 126                         tmpArray.push(new MenuItem(designer.designerDisplayOptions["top"].displayName, null, "designers", "goToState", {path: designer.designerStateUrl}, null));
 127                     }
 128                 })
 129             }
 130
 131             this.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
 132             this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex;
 133
 134             this.generateMenu();
 135         });
 136     }
 137
 138     generateMenu() {
 139         if (this.menuModel && this.topLvlMenu && this.menuModel[0] !== this.topLvlMenu) {
 140             this.menuModel.unshift(this.topLvlMenu);
 141         }
 142     }
 143
 144     goToState(state:string, params:any):Promise<boolean> {
 145         return new Promise((resolve, reject) => {
 146             this.$state.go(state, params || undefined);
 147             resolve(true);
 148         });
 149     }
 150
 151     menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) {
 152         itemGroup.itemClick = false;
 153
 154         let onSuccess = ():void => {
 155             itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item);
 156         };
 157         let onFailed = ():void => {
 158         };
 159
 160         if (item.callback) {
 161             (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed);
 162         } else {
 163             this[item.action](item.state, item.params).then(onSuccess, onFailed);
 164         }
 165     }
 166 }