progress on fos search functionality

explore/src/app/fos/fos.component.html

@@ -7,7 +7,7 @@
 <div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
 	<div class="uk-grid uk-grid-large uk-grid-stack uk-padding-small" uk-grid>
 		<div class="uk-width-3-5@m uk-width-1-1@s uk-flex uk-flex-column uk-flex-center">
-			<h1 uk-scrollspy-class>Fields of Science and Technology<span class="uk-text-primary">.</span></h1>
+			<h1 uk-scrollspy-class>Fields of Science<span class="uk-text-primary">.</span></h1>
 			<div uk-scrollspy-class>
 				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 			</div>
@@ -21,40 +21,80 @@
 			</div>
 		</div>
 		<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center">
-			<img src="" loading="lazy">
+			<img src="../../assets/explore-assets/fos-hero-img.svg" loading="lazy">
 		</div>
 	</div>
 </div>
 <div class="uk-container uk-container-large uk-section"  uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
 	<div class="uk-grid uk-flex uk-flex-middle uk-flex-center uk-padding-small" uk-grid>
-		<div>
+		<div class="uk-margin-large-bottom">
-			<input type="text" class="uk-input" style="width: 500px;">
+			<div search-input [searchControl]="keywordControl" placeholder="Search" (searchEmitter)="onSubmit()"
+				class="uk-width-large"></div>
 		</div>
 	</div>
-	<div class="uk-margin-large-top uk-padding-small">
+	<ng-container *ngIf="keyword && keyword.length">
-		<div class="uk-grid uk-grid-large" uk-grid>
+		<div class="uk-padding-small">
-			<div class="uk-width-1-4">
+			<div class="uk-margin-small-bottom">Search results for '{{keyword}}'</div>
-				<div *ngFor="let item of fos; index as i" class="uk-margin-bottom">
+			<span class="uk-display-inline-block">
-					<a class="uk-text-capitalize" (click)="changeDisplayedFos(i)">
+				<a [attr.uk-tooltip]="'Remove'" (click)="clearKeyword()">
-						{{item.id}}
+					<span class="uk-label uk-flex uk-flex-middle">
-					</a>
+						<span class="uk-margin-small-right uk-width-expand">{{keyword}}</span>
+						<icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
+					</span>
+				</a>
+			</span>
+		</div>
+	</ng-container>
+	<ng-container *ngIf="!keyword">
+		<div class="uk-margin-large-top uk-padding-small">
+			<div class="uk-grid uk-grid-large" uk-grid>
+				<div class="uk-width-1-4">
+					<div *ngFor="let item of fos; index as i" class="uk-margin-bottom">
+						<a class="uk-text-capitalize" (click)="changeDisplayedFos(i)">
+							{{item.id}}
+						</a>
+					</div>
+				</div>
+				<div *ngIf="fos[index]" class="uk-width-3-4">
+					<div class="uk-text-capitalize">
+						<h2 class="uk-margin-remove-top">{{fos[index].id}}</h2>
+					</div>
+					<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-large-bottom" uk-grid="masonry: true">
+						<div *ngFor="let child of fos[index].children">
+							<div class="whole-child uk-text-capitalize">
+								<h3 class="uk-h6">{{child.id}}</h3>
+								<div *ngFor="let subChild of child.children" class="uk-margin-small-bottom">
+									{{subChild.id}}
+								</div>
+							</div>
+						</div>
+					</div>	
 				</div>
 			</div>
-			<div *ngIf="fos[index]" class="uk-width-3-4">
+		</div>
-				<div class="uk-text-capitalize">
+	</ng-container>
-					<h2 class="uk-margin-remove-top">{{fos[index].id}}</h2>
+	<ng-container *ngIf="keyword && keyword.length">
-				</div>
+		<div class="uk-margin-medium-top uk-padding-small">
-				<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-large-bottom" uk-grid="masonry: true">
+			<ng-container *ngFor="let item of level1Results;">
-					<div *ngFor="let child of fos[index].children">
+				<div
-						<div class="whole-child uk-text-capitalize">
+					class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize"
-							<h3 class="uk-h6">{{child.id}}</h3>
+					style="border-bottom: 3px solid coral">
-							<div *ngFor="let subChild of child.children" class="uk-margin-small-bottom">
+					<h2>{{item.id}}</h2>
-								{{subChild.id}}
+					<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-large-bottom" uk-grid="masonry: true">
+						<div *ngFor="let subItem of item.children">
+							<h3 class="uk-h6">{{subItem.id}}</h3>
+							<div *ngFor="let subSubItem of subItem.children" class="uk-margin-small-bottom">
+								{{subSubItem.id}}
 							</div>
 						</div>
 					</div>
-				</div>	
+				</div>
-			</div>
+			</ng-container>
+			<ng-container *ngIf="!(matchLevel1 == true || matchLevel2 == true || matchLevel3 == true)">
+				<div class="uk-padding uk-text-center" style="border: 3px solid coral">
+					<h2 class="uk-h3">No results were found.</h2>
+				</div>
+			</ng-container>
 		</div>
-	</div>
+	</ng-container>
 </div>

explore/src/app/fos/fos.component.ts

@@ -1,10 +1,12 @@
 import {HttpClient} from "@angular/common/http";
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
 import {Subscription} from "rxjs";
 
 import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
 import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
 import {properties} from "src/environments/environment";
+import { FormBuilder, FormControl } from "@angular/forms";
+import { isTemplateExpression } from "typescript";
 
 @Component({
 	selector: 'fos',
@@ -15,6 +17,17 @@ export class FosComponent implements OnInit, OnDestroy {
 
 	public fos: any = [];
 	public index: number = 0;
+
+	public keywordControl: FormControl;
+	public keyword: string = null;
+
+	public matchLevel1: boolean = false;
+	public matchLevel2: boolean = false;
+	public matchLevel3: boolean = false;
+	public level1Results = [];
+	public level2Results = [];
+	public level3Results = [];
+
 	
 	properties: EnvProperties = properties;
 	public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FOS'}];
@@ -22,13 +35,15 @@ export class FosComponent implements OnInit, OnDestroy {
 	subscriptions: Subscription[] = [];
 
 	constructor(
-		private httpClient: HttpClient
+		private httpClient: HttpClient,
+		private fb: FormBuilder
 	) {}
 
 	ngOnInit() {
 		this.httpClient.get('/assets/vocabulary/fos.json').subscribe(data => {
 		this.fos = data['fos'];
 		});
+		this.keywordControl = this.fb.control('');
 	}
 
 	public ngOnDestroy() {
@@ -39,6 +54,71 @@ export class FosComponent implements OnInit, OnDestroy {
 
 	changeDisplayedFos(i) {
 		this.index = i;
-		// console.log(this.fos[this.index]);
+	}
+
+	onSubmit() {
+		this.matchLevel1 = false;
+		this.matchLevel2 = false;
+		this.matchLevel3 = false;
+		if(this.keywordControl.value) {
+			this.keyword = this.keywordControl.value;
+			// console.log(this.keyword);
+			this.keywordControl.setValue('');
+			// logic to find matches in all 3 levels through nested loops? 
+			this.findMatches();
+		}
+	}
+
+	findMatches() {
+		console.log(this.keyword);
+		this.level1Results = [];
+		this.level2Results = [];
+		this.level3Results = [];
+		// 1st level search
+		if(this.fos.length) {
+			this.fos.forEach(item => {
+				if(item.id.includes(this.keyword)) {
+					console.log('1st level match: ' + item.id);
+					this.matchLevel1 = true;
+					this.level1Results.push(item);
+					// 2nd level search
+					if(item.children.length) {
+						item.children.forEach(subItem => {
+							if(subItem.id.includes(this.keyword)) {
+								console.log('2nd level match: ' + subItem.id);
+								this.matchLevel2 = true;
+								this.level2Results.push(subItem);
+								// 3rd level search
+								if(subItem.children.length){
+									subItem.children.forEach(subSubItem => {
+										if(subSubItem.id.includes(this.keyword)) {
+											console.log('3rd level match: ' + subSubItem.id);
+											this.matchLevel3 = true;
+											this.level3Results.push(subSubItem);
+										}
+									})
+								}
+							}
+						});
+					}
+				}
+			});
+			console.log(this.level1Results);
+			console.log(this.level2Results);
+			console.log(this.level3Results);
+		}
+
+		// filtering
+		// if(this.fos.length) {
+		// 	const level1Matches = this.fos.filter(item => item.id.includes(this.keyword));
+		// 	console.log(level1Matches);
+		// }
+	}
+
+	clearKeyword() {
+		this.keyword = null;
+		this.matchLevel1 = false;
+		this.matchLevel2 = false;
+		this.matchLevel3 = false;
 	}
 }

explore/src/app/fos/fos.module.ts

@@ -7,11 +7,14 @@ import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumb
 
 import {FosRoutingModule} from './fos-routing.module';
 import {FosComponent} from './fos.component';
+import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
 
 @NgModule({
 	imports: [
 		CommonModule, FormsModule, RouterModule,
-		FosRoutingModule, BreadcrumbsModule
+		FosRoutingModule, BreadcrumbsModule, IconsModule,
+		SearchInputModule
 	],
 	declarations: [
 		FosComponent

explore/src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 0c5483ac9b0c0f7d1902ab4dbec51d14495e956a
+Subproject commit 95e382fc6273017c4739bf4e3a9603d720f3c253

explore/src/app/sdg/sdg.component.html

@@ -34,7 +34,15 @@
 			<div *ngFor="let sdg of displayedSdgs">
 				<a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="{f0: 'sdg', fv0: sdg.id}" target="_blank">
 					<div class="uk-card uk-card-default uk-card-body" [class]="'sdg-card sdg-' + sdg.code">
-						<div class="uk-text-center uk-margin-bottom">
+						<div class="uk-margin-bottom">
+							<div class="uk-text-small">
+								Goal {{sdg.code}}
+							</div>
+							<div class="uk-text-small uk-text-bold uk-text-uppercase">
+								{{sdg.label}}
+							</div>
+						</div>
+						<div class="uk-text-center">
 							<div>
 								<span class="uk-text-large uk-text-bold">{{sdg.number == null ? '0' : sdg.number | number}}</span>
 								<p class="uk-text-small" style="margin-top: 5px; margin-bottom: 10px;">Research Outcomes</p>
@@ -43,12 +51,6 @@
 								<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
 							</div>
 						</div>
-						<div class="uk-text-small">
-							Goal {{sdg.code}}
-						</div>
-						<div class="uk-text-small uk-text-bold uk-text-uppercase">
-							{{sdg.label}}
-						</div>
 					</div>
 				</a>
 			</div>

explore/src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit e552bc1f3041ff03719538a7abf08aa04d2a4182
+Subproject commit 09341b18896d4582455a99ef50944bd544bb10df