MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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 <search-input>.
2. layout.service.ts: Added hasMenuSearchBarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(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 <div search-input> 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.
This commit is contained in:
Konstantina Galouni 2023-05-11 17:17:16 +03:00
parent cf42f3a122
commit aef1a25a82
4 changed files with 97 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
dashboard/sharedComponents/sidebar/layout.service.ts
View File

@ -75,6 +75,11 @@ export class LayoutService {
private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** Active sidebar Item*/
private activeSidebarItemSubject: BehaviorSubject<SidebarItem> = new BehaviorSubject<SidebarItem>(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<boolean> = new BehaviorSubject<boolean>(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<boolean> {
return this.hasMenuSearchBarSubject.asObservable();
}
setHasMenuSearchBar(value: boolean) {
this.hasMenuSearchBarSubject.next(value);
}
}

20
sharedComponents/navigationBar.component.html
View File

@ -170,12 +170,28 @@
<ng-container *ngIf="!activeHeader.menuPosition || activeHeader.menuPosition === 'center'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container>
<div *ngIf="searchMode" #search_input search-input [(value)]="keyword" placeholder="Search by name, description, subject..."
[searchInputClass]="'flat small-vertical'" (searchEmitter)="goTo()"
class="uk-width-large@l uk-width-medium uk-width-xlarge@xl"></div>
</div>
<div class="uk-navbar-right">
<ng-container *ngIf="activeHeader.menuPosition === 'right'">
<ng-container *ngTemplateOutlet="mainMenu"></ng-container>
</ng-container>
<user-mini *ngIf="userMenu" [user]="user"
<div *ngIf="searchMode" class="uk-flex uk-flex-middle uk-margin-medium-right" (click)="searchMode = false">
<div class="search-icon clickable">
<icon name="close" [flex]="true" ratio="1.5" visuallyHidden="close search mode"></icon>
</div>
</div>
<div *ngIf="!searchMode && hasSearchBar" class="uk-flex uk-flex-middle uk-margin-right" (click)="openSearch($event)">
<div class="search-icon clickable">
<icon name="search" [flex]="true" ratio="1" visuallyHidden="search"></icon>
</div>
</div>
<user-mini *ngIf="!searchMode && userMenu" [user]="user"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini>
<div class="uk-visible@m">
@ -183,7 +199,7 @@
</div>
</div>
<ng-template #mainMenu>
<ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
<ul *ngIf="!searchMode" class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
<li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLink="/">Home</a>
</li>

60
sharedComponents/navigationBar.component.ts
View File

@ -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)});
}
}

3
sharedComponents/navigationBar.module.ts
View File

@ -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: [