import { ChangeDetectorRef, Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, ViewChild, ViewChildren } from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {Session, User} from '../login/utils/helper.class'; import {ConfigurationService} from '../utils/configuration/configuration.service'; import {MenuAlignment, MenuItem} from './menu'; import {EnvProperties} from '../utils/properties/env-properties'; import {Subscription} from 'rxjs'; import {HelpContentService} from '../services/help-content.service'; import {properties} from "../../../environments/environment"; import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service"; import {NotificationConfiguration} from "../notifications/notifications-sidebar/notifications-sidebar.component"; import {SearchInputComponent} from "./search-input/search-input.component"; import {Filter} from "../searchPages/searchUtils/searchHelperClasses.class"; import {RouterHelper} from "../utils/routerHelper.class"; declare var UIkit; export interface Header { route?: string, url?: string, title: string, logoUrl: string, logoSmallUrl: string, logoInfo?: string, position: 'left' | 'center' | 'right', badge: boolean, darkBg?: boolean, menuPosition?: 'center' | 'right', replaceHeader?: Header; } @Component({ selector: 'navbar', templateUrl: 'navigationBar.component.html' }) export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges { @Input() portal: string = 'connect'; @Input() onlyTop: boolean = false; @Input() logoPath: string = 'assets/common-assets/'; @Input() userMenu: boolean = true; @Input() showHomeMenuItem: boolean = false; @Input() communityId; @Input() showCommunityName: boolean = false; @Input() userMenuItems: MenuItem[]; @Input() menuItems: MenuItem[]; @Input() header: Header; @Input() showMenu: boolean = true; @Input() homeurl: boolean = true; @Input() properties: EnvProperties = properties; @Input() user: User; @Input() enableSearch: boolean = false; @Input() searchRoute: string = '/search/find'; @Input() searchPlaceHolder: string = 'Search for research results'; @Input() showLogo: boolean = true; @Input() notificationConfiguration: NotificationConfiguration; replaceHeader: boolean = false; hasStickyHeaderOnMobile: boolean = false; public activeHeader: Header; keyword: string = ''; public isAuthorized: boolean = false; subs: Subscription[] = []; showEntity = {}; showPage = {}; public searchMode: boolean = false; public portalName: string = ""; public additionalMenuItems: MenuItem[] = []; public featuredMenuItems: MenuItem[] = []; public isMenuEnabled: boolean = false; public isFeaturedMenuEnabled: boolean = false; public featuredAlignment: string = MenuAlignment.CENTER.valueOf(); public hasSearchBar: boolean = false; public resultsQuickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = { filter: null, selected: true, filterId: "resultbestaccessright", value: "Open Access" }; @ViewChild('search_input') search_input: SearchInputComponent; @ViewChild('canvas') canvas: ElementRef; public routerHelper: RouterHelper = new RouterHelper(); constructor(private router: Router, private route: ActivatedRoute, private config: ConfigurationService, private _helpContentService: HelpContentService, private layoutService: LayoutService, private cdr: ChangeDetectorRef) {} ngOnInit() { this.subs.push(this.route.queryParams.subscribe(params => { this.searchMode = false; this.keyword = ""; })); this.subs.push(this.layoutService.hasStickyHeaderOnMobile.subscribe(hasStickyHeaderOnMobile => { this.hasStickyHeaderOnMobile = hasStickyHeaderOnMobile; })) this.initialize(); } ngOnDestroy() { for (let sub of this.subs) { sub.unsubscribe(); } } ngOnChanges(changes: SimpleChanges) { if(changes.header) { this.setHeader(this.layoutService.replaceHeaderValue); } } closeCanvas(element = this.canvas.nativeElement) { UIkit.offcanvas(element).hide(); } initialize() { if ((['provide', 'develop']).indexOf(this.portal) != -1) { this.header = { route: '/', url: null, title: this.portal, logoUrl: this.logoPath + 'logo-large-' + this.portal + '.png', logoSmallUrl: this.logoPath + 'logo-small-' + this.portal + '.png', position: 'left', menuPosition: 'right', badge: true }; } this.isAuthorized = Session.isClaimsCurator(this.user) || Session.isPortalAdministrator(this.user); if ((this.properties.adminToolsAPIURL && this.communityId) || properties.adminToolsPortalType == "community") { //this.config.getCommunityInformation(this.properties, this.communityId).subscribe(data => { this.subs.push(this.config.portalAsObservable.subscribe(data => { if (data) { if(data.name) { this.portalName = data.name; } this.showEntity = {}; this.showPage = {}; if (data['entities']) { for (let i = 0; i < data['entities'].length; i++) { this.showEntity['' + data['entities'][i]['pid'] + ''] = data['entities'][i]['isEnabled']; } } if (data['pages']) { for (let i = 0; i < data['pages'].length; i++) { this.showPage[data['pages'][i]['route']] = data['pages'][i]['isEnabled']; } } } }, error => { this.handleError('Error getting community information (e.g. pages,entities) for community with id: ' + this.communityId, error); })); } if(this.portal != 'connect' && this.portal != 'connect-admin' && this.properties.adminToolsPortalType == 'community') { this.subs.push( this._helpContentService.getMenuItems(this.portal).subscribe( data => { this.isMenuEnabled = data.isMenuEnabled; this.isFeaturedMenuEnabled = data.isFeaturedMenuEnabled; this.featuredAlignment = data.featuredAlignment; this.featuredMenuItems = data.featuredMenuItems; this.additionalMenuItems = data.menuItems; }, error => this.handleError("Server error fetching custom menu items", error) ) ); } this.subs.push(this.layoutService.replaceHeader.subscribe(replaceHeader => { this.setHeader(replaceHeader); })); this.subs.push(this.layoutService.hasMenuSearchBar.subscribe(hasSearchBar => { this.hasSearchBar = hasSearchBar; })); } setHeader(replaceHeader: boolean) { this.replaceHeader = this.header.replaceHeader && replaceHeader; this.activeHeader = this.replaceHeader?this.header.replaceHeader:this.header; } isEnabled(required, enabled) { if (!required) { return true; } for (let requiredEntity of required) { if (typeof enabled[requiredEntity] === 'undefined' || enabled[requiredEntity] == false) { return false; } } return true; } isAtleastOneEnabled(required, enabled) { if (!required || required.length == 0) { return true; } var count = required.length; for (let requiredEntity of required) { if (typeof enabled[requiredEntity] === 'undefined' || enabled[requiredEntity] == false) { count--; } } return (count > 0); } private handleError(message: string, error) { console.error('NavigationBar (component): ' + message, error); } get isHeaderLeft(): boolean { return this.header.position === 'left' || (this.header.position === 'center' && this.header.menuPosition === 'center' && this.menuItems.length > 0); } get currentRoute() { return { route: this.router.url.split('?')[0].split('#')[0], fragment: this.route.snapshot.fragment } } isTheActiveMenu(menu: MenuItem): boolean { // if(menu instanceof MenuItem) { return MenuItem.isTheActiveMenu( menu, this.currentRoute, this.layoutService.activeMenuItem); // } else { // let item: MenuItem = menu.rootItem; // item.items = menu.items; // return MenuItem.isTheActiveMenu(item, this.currentRoute, this.layoutService.activeMenuItem); // } } openSearch(event) { event.stopPropagation(); this.searchMode = true; this.cdr.detectChanges(); this.search_input.input.focus(true); } goTo(canvas = null) { let parameterNames = []; let parameterValues = []; if (this.resultsQuickFilter && this.resultsQuickFilter.selected) { parameterNames.push(this.resultsQuickFilter.filterId); parameterValues.push('"' + encodeURIComponent(this.resultsQuickFilter.value) + '"'); } if (this.keyword.length > 0) { parameterNames.push("fv0"); parameterValues.push(this.keyword); parameterNames.push("f0"); parameterValues.push("q"); } this.router.navigate([this.properties.searchLinkToAll ? this.properties.searchLinkToAll : this.properties.searchLinkToResults], {queryParams: this.routerHelper.createQueryParams(parameterNames, parameterValues)}); if(canvas) { this.closeCanvas(canvas); } } }