From cb4b3334be4cb7be63501a779271163d6c05911c Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Thu, 14 Apr 2022 18:05:47 +0300 Subject: [PATCH] finish fos page - search functionality --- explore/src/app/app.component.ts | 5 -- explore/src/app/fos/fos.component.css | 4 + explore/src/app/fos/fos.component.html | 43 +++++----- explore/src/app/fos/fos.component.ts | 112 +++++++++++-------------- explore/src/app/openaireLibrary | 2 +- explore/src/app/sdg/sdg.component.html | 21 +++-- explore/src/assets/openaire-theme | 2 +- 7 files changed, 94 insertions(+), 95 deletions(-) diff --git a/explore/src/app/app.component.ts b/explore/src/app/app.component.ts index 43470987..de297410 100644 --- a/explore/src/app/app.component.ts +++ b/explore/src/app/app.component.ts @@ -65,11 +65,6 @@ export class AppComponent { this.userMenuItems.push(new MenuItem("", "My ORCID links", "", "/my-orcid-links", false, [], [""], {})); this.userMenuItems.push(new MenuItem("", "My links", "", "/myclaims", false, [], ["/myclaims"], {})); - this.subscriptions.push(router.events.forEach((event) => { - if (event instanceof NavigationStart) { - HelperFunctions.scroll(); - } - })); } ngOnInit() { diff --git a/explore/src/app/fos/fos.component.css b/explore/src/app/fos/fos.component.css index a34df8c3..f4b83d93 100644 --- a/explore/src/app/fos/fos.component.css +++ b/explore/src/app/fos/fos.component.css @@ -1,4 +1,8 @@ mark.highlighted { background: #3086ED !important; color: inherit !important; +} +.custom-bottom-border { + border-bottom: solid 5px rgba(233, 100, 57, 0.3); + } \ No newline at end of file diff --git a/explore/src/app/fos/fos.component.html b/explore/src/app/fos/fos.component.html index bba3e205..c8afab55 100644 --- a/explore/src/app/fos/fos.component.html +++ b/explore/src/app/fos/fos.component.html @@ -20,7 +20,7 @@ -
+
@@ -46,24 +46,32 @@ -
+
-
+ +
-

{{fos[index].id}}

+

{{fos[index].id}}

-
+
-

{{child.id}}

-
+

{{child.id}}

+
{{subChild.id}}
@@ -75,24 +83,21 @@
- +
- -

-
+ class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border"> +

+
-

{{subItem.id}}

-
- {{subSubItem.id}} +

+
- -
+ +

No results were found.

 diff --git a/explore/src/app/fos/fos.component.ts b/explore/src/app/fos/fos.component.ts index dda8fa57..44d33a0c 100644 --- a/explore/src/app/fos/fos.component.ts +++ b/explore/src/app/fos/fos.component.ts @@ -1,12 +1,13 @@ import {HttpClient} from "@angular/common/http"; -import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core"; +import {Component, OnDestroy, OnInit} 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"; +import {FormBuilder, FormControl} from "@angular/forms"; +import {ActivatedRoute} from "@angular/router"; +import {Location} from "@angular/common"; @Component({ selector: 'fos', @@ -21,12 +22,9 @@ export class FosComponent implements OnInit, OnDestroy { 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 = []; + public viewResults = []; + + public result = []; properties: EnvProperties = properties; public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FOS'}]; @@ -35,14 +33,23 @@ export class FosComponent implements OnInit, OnDestroy { constructor( private httpClient: HttpClient, - private fb: FormBuilder + private fb: FormBuilder, + private location: Location, + private route: ActivatedRoute, ) {} ngOnInit() { - this.httpClient.get('/assets/vocabulary/fos.json').subscribe(data => { - this.fos = data['fos']; - }); this.keywordControl = this.fb.control(''); + this.httpClient.get('/assets/vocabulary/fos.json').subscribe(data => { + this.fos = data['fos']; + this.subscriptions.push(this.route.queryParams.subscribe(params => { + if(params.keyword) { + this.keywordControl.setValue(params.keyword); + this.keyword = this.keywordControl.value; + this.findMatches(); + } + })); + }); } public ngOnDestroy() { @@ -56,65 +63,49 @@ export class FosComponent implements OnInit, OnDestroy { } onSubmit() { - this.matchLevel1 = false; - this.matchLevel2 = false; - this.matchLevel3 = false; if(this.keywordControl.value) { this.keyword = this.keywordControl.value; - this.keywordControl.setValue(''); - // logic to find matches in all 3 levels through nested loops? + // TODO: router.navigate(); + this.location.go(window.location.pathname + '?keyword=' + this.keyword); this.findMatches(); } } findMatches() { - // console.log(this.keyword); - this.level1Results = []; - this.level2Results = []; - this.level3Results = []; + console.log(this.keyword); + this.viewResults = JSON.parse(JSON.stringify(this.fos)); + let matchLevel1: boolean = false; + let matchLevel2: boolean = false; // 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); - } - }) - } - } - }); - } + if(this.viewResults.length) { + this.viewResults = this.viewResults.filter(item => { + if(item.id.includes(this.keyword.toLowerCase())) { + matchLevel1 = true; + } else { + matchLevel1 = false; } + // // 2nd level search + if(item.children?.length && !matchLevel1) { + item.children = item.children.filter(subItem => { + if(subItem.id.includes(this.keyword.toLowerCase())) { + matchLevel2 = true; + } else { + matchLevel2 = false; + } + // 3rd level search + if(subItem.children?.length && !matchLevel2) { + subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(this.keyword.toLowerCase())); + } + return subItem.children?.length > 0 || matchLevel2; + }); + } + return item.children?.length > 0; }); - // console.log(this.level1Results); - // console.log(this.level2Results); - // console.log(this.level3Results); } - - // filtering (tried with .every as well for nested search but didnt work) - // if(this.fos.length) { - // const level1Matches = this.fos.filter(item => item.id.includes(this.keyword)); - // console.log(level1Matches); - // } } highlightKeyword(name) { - if(name.includes(this.keyword)) { + if(name.includes(this.keyword.toLowerCase())) { return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `${matchedValue}`); } else { return name; @@ -123,8 +114,7 @@ export class FosComponent implements OnInit, OnDestroy { clearKeyword() { this.keyword = null; - this.matchLevel1 = false; - this.matchLevel2 = false; - this.matchLevel3 = false; + this.keywordControl.setValue(''); + this.location.go(window.location.pathname); } } \ No newline at end of file diff --git a/explore/src/app/openaireLibrary b/explore/src/app/openaireLibrary index 6f23b05e..aa210384 160000 --- a/explore/src/app/openaireLibrary +++ b/explore/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 6f23b05e5b1e1401f308226155848dc11de95c00 +Subproject commit aa210384bc1df7b11595243096fd9fd5c8e01ae8 diff --git a/explore/src/app/sdg/sdg.component.html b/explore/src/app/sdg/sdg.component.html index 39cc1b2f..e02a38a2 100644 --- a/explore/src/app/sdg/sdg.component.html +++ b/explore/src/app/sdg/sdg.component.html @@ -8,20 +8,25 @@
-

Lorem ipsum dolor sit amet, consetetur

+

Science for UN Sustainable
Development Goals

+

+ Laying the foundation for new approaches and solutions. +

- We have implemented the UN Sustainable Development Goals ( SDGs) as a
classification scheme covering areas of research associated with one or more SDGs
(the majority of the SDGs are interrelated). The scheme uses automated allocation
of the 17 SDGs and their associated targets and indicators to all fitting documents in
Dimensions thereby addressing research areas aligned to the goals. + + We have developed a classification scheme for UN Sustainable Development Goals,
to view contributions of research towards complex challenges for humanity
such as climate change, biodiversity loss, pollution and poverty reduction.
- +
-
+
@@ -42,7 +47,7 @@
{{sdg.code}}
-
+
{{sdg.label}}
@@ -51,8 +56,8 @@
- {{sdg.number == null ? '0' : sdg.number | number}} -

Research Outcomes

+ {{sdg.number == null ? '0' : sdg.number | number}} +

Research Items

diff --git a/explore/src/assets/openaire-theme b/explore/src/assets/openaire-theme index b441da3a..1200683a 160000 --- a/explore/src/assets/openaire-theme +++ b/explore/src/assets/openaire-theme @@ -1 +1 @@ -Subproject commit b441da3afde53c70df14cbdfc1230de41a034bb1 +Subproject commit 1200683a6b345f1b453859e3136e4df227c40fc8