From aef1a25a820b9a3e77780ff93eca0b086a2d32f2 Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Thu, 11 May 2023 17:17:16 +0300 Subject: [PATCH] [Library & openaire-theme & Explore | explore-redesign]: Added search form in menu (navbar) in landing pages. 1. search.less: Added css for modifier .small-vertical for .input-wrapper of . 2. layout.service.ts: Added hasMenuSearchBarSubject: BehaviorSubject = new BehaviorSubject(false), parsing and getter/setter methods. 3. navigationBar.module.ts: Imported SearchInputModule. 4. navigationBar.component.ts: a. Added searchMode: boolean = false; and hasSearchBar: boolean = false; (and other helpful fields) b. Subscribe to queryParams to hide search bar and reset keyword | Subscribe to layoutService.hasMenuSearchBar to check if search should be included in navbar or not. c. Added methods "openSearch()" to show the search form and "goTo()" to trigger the search action and navigate to the search page. 5. navigationBar.component.html: Added
and search-icon button to show search bar | Added checks if searchMode is enabled (search form visible) or not. 6. app-routing.module.ts: In routes for landing pages added in data: hasMenuSearchBar: true. --- .../sidebar/layout.service.ts | 19 ++++++ sharedComponents/navigationBar.component.html | 20 ++++++- sharedComponents/navigationBar.component.ts | 60 ++++++++++++++++++- sharedComponents/navigationBar.module.ts | 3 +- 4 files changed, 97 insertions(+), 5 deletions(-) diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts index 447d7a5f..39a2eaa8 100644 --- a/dashboard/sharedComponents/sidebar/layout.service.ts +++ b/dashboard/sharedComponents/sidebar/layout.service.ts @@ -75,6 +75,11 @@ export class LayoutService { private isMobileSubject: BehaviorSubject = new BehaviorSubject(false); /** Active sidebar Item*/ private activeSidebarItemSubject: BehaviorSubject = new BehaviorSubject(null); + /** + * Add hasMenuSearchBar: false/ nothing on data of route config, if the search bar in the menu should not appear, otherwise true. + */ + private hasMenuSearchBarSubject: BehaviorSubject = new BehaviorSubject(false); + private subscriptions: any[] = []; ngOnDestroy() { @@ -166,6 +171,12 @@ export class LayoutService { } else { this.setActiveMenuItem(''); } + if (data['hasMenuSearchBar'] !== undefined && + data['hasMenuSearchBar'] === true) { + this.setHasMenuSearchBar(true); + } else { + this.setHasMenuSearchBar(false); + } } })); this.setObserver(); @@ -292,4 +303,12 @@ export class LayoutService { setActiveSidebarItem(value: SidebarItem) { this.activeSidebarItemSubject.next(value); } + + get hasMenuSearchBar(): Observable { + return this.hasMenuSearchBarSubject.asObservable(); + } + + setHasMenuSearchBar(value: boolean) { + this.hasMenuSearchBarSubject.next(value); + } } diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 611a4716..49ae59f2 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -170,12 +170,28 @@ +
- +
+ +
+
+ +
+
+ +
+
+ +
@@ -183,7 +199,7 @@
-
    +
    • Home
      • diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts index 4f3cf8e4..6fcd0125 100644 --- a/sharedComponents/navigationBar.component.ts +++ b/sharedComponents/navigationBar.component.ts @@ -1,4 +1,13 @@ -import {ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core'; +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'; @@ -9,6 +18,9 @@ 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; @@ -57,6 +69,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges { subs: Subscription[] = []; showEntity = {}; showPage = {}; + public searchMode: boolean = false; public additionalMenuItems: MenuItem[] = []; public featuredMenuItems: MenuItem[] = []; @@ -64,13 +77,28 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges { 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; + public routerHelper: RouterHelper = new RouterHelper(); + constructor(private router: Router, private route: ActivatedRoute, private config: ConfigurationService, private _helpContentService: HelpContentService, - private layoutService: LayoutService) {} + private layoutService: LayoutService, + private cdr: ChangeDetectorRef) {} ngOnInit() { + this.subs.push(this.route.queryParams.subscribe(params => { + this.searchMode = false; + this.keyword = ""; + })); this.initialize(); } @@ -145,6 +173,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges { 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) { @@ -204,4 +235,29 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges { // 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() { + 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], {queryParams: this.routerHelper.createQueryParams(parameterNames, parameterValues)}); + } } diff --git a/sharedComponents/navigationBar.module.ts b/sharedComponents/navigationBar.module.ts index ba856688..3d4b481f 100644 --- a/sharedComponents/navigationBar.module.ts +++ b/sharedComponents/navigationBar.module.ts @@ -10,12 +10,13 @@ import { UserMiniModule} from '../login/userMiniModule.module'; import {SearchBarModule} from "./searchBar/searchBar.module"; import {HelpContentService} from '../services/help-content.service'; import {IconsModule} from "../utils/icons/icons.module"; +import {SearchInputModule} from "./search-input/search-input.module"; @NgModule({ imports: [ CommonModule, FormsModule, RouterModule, - UserMiniModule, IconsModule, + UserMiniModule, IconsModule, SearchInputModule, // , SearchBarModule ], declarations: [