MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

finish fos page - search functionality

This commit is contained in:
Alex Martzios 2022-04-14 18:05:47 +03:00
parent 99bdbb72f8
commit cb4b3334be
7 changed files with 94 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
explore/src/app/app.component.ts
View File

@ -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() {

4
explore/src/app/fos/fos.component.css
View File

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

43
explore/src/app/fos/fos.component.html
View File

@ -20,7 +20,7 @@
</a>
</div>
</div>
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center">
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center" uk-scrollspy-class>
<img src="../../assets/explore-assets/fos-hero-img.svg" loading="lazy">
</div>
</div>
@ -46,24 +46,32 @@
</div>
</ng-container>
<ng-container *ngIf="!keyword">
<div class="uk-margin-large-top uk-padding-small">
<div class="uk-margin-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">
<!-- <div *ngFor="let item of fos; index as i" class="uk-margin-small-bottom">
<a class="uk-text-capitalize" (click)="changeDisplayedFos(i)">
{{item.id}}
</a>
</div>
</div> -->
<ul class="uk-list">
<li *ngFor="let item of fos; index as i"
class="uk-margin-small-bottom uk-text-capitalize"
[class]="index == i ? 'uk-active':''"
(click)="changeDisplayedFos(i)">
<a>{{item.id}}</a>
</li>
</ul>
</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>
<h2 class="uk-h4 uk-margin-remove">{{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 class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<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">
<h3 class="uk-h6 uk-margin-small-bottom">{{child.id}}</h3>
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
{{subChild.id}}
</div>
</div>
@ -75,24 +83,21 @@
</ng-container>
<ng-container *ngIf="keyword && keyword.length">
<div class="uk-margin-medium-top uk-padding-small">
<ng-container *ngFor="let item of level1Results;">
<ng-container *ngFor="let item of viewResults;">
<div
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize"
style="border-bottom: 3px solid coral">
<!-- <h2>{{highlightKeyword(item.id)}}</h2> -->
<h2 [innerHTML]="highlightKeyword(item.id)"></h2>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-large-bottom" uk-grid="masonry: true">
class="uk-margin-large-bottom uk-padding uk-padding-remove-top uk-padding-remove-horizontal uk-text-capitalize custom-bottom-border">
<h2 class="uk-h4 uk-margin-remove" [innerHTML]="highlightKeyword(item.id)"></h2>
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
<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}}
<h3 class="uk-h6 uk-margin-small-bottom" [innerHTML]="highlightKeyword(subItem.id)"></h3>
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;" [innerHTML]="highlightKeyword(subSubItem.id)">
</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">
<ng-container *ngIf="!viewResults?.length">
<div class="uk-padding uk-text-center">
<h2 class="uk-h3">No results were found.</h2>
</div>
</ng-container>

112
explore/src/app/fos/fos.component.ts
View File

@ -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) => `<mark class="highlighted">${matchedValue}</mark>`);
} 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);
}
}

2
explore/src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 6f23b05e5b1e1401f308226155848dc11de95c00
Subproject commit aa210384bc1df7b11595243096fd9fd5c8e01ae8

21
explore/src/app/sdg/sdg.component.html
View File

@ -8,20 +8,25 @@
<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">
<!-- TODO: add svg sdg img to the end of the title -->
<h1 uk-scrollspy-class>Lorem ipsum dolor sit amet, consetetur<span class="custom-sdg-dot"></span></h1>
<h1 uk-scrollspy-class>Science for UN Sustainable <br> Development Goals<span class="custom-sdg-dot"></span></h1>
<h2 uk-scrollspy-class class="uk-h5 uk-margin-remove-top">
Laying the foundation for new approaches and solutions.
</h2>
<div uk-scrollspy-class>
We have implemented the UN Sustainable Development Goals ( SDGs) as a <br> classification scheme covering areas of research associated with one or more SDGs <br> (the majority of the SDGs are interrelated). The scheme uses automated allocation <br> of the 17 SDGs and their associated targets and indicators to all fitting documents in <br> Dimensions thereby addressing research areas aligned to the goals.
<!-- We have implemented the UN Sustainable Development Goals ( SDGs) as a <br> classification scheme covering areas of research associated with one or more SDGs <br> (the majority of the SDGs are interrelated). The scheme uses automated allocation <br> of the 17 SDGs and their associated targets and indicators to all fitting documents in <br> Dimensions thereby addressing research areas aligned to the goals. -->
We have developed a classification scheme for UN Sustainable Development Goals, <br> to view contributions of research towards complex challenges for humanity <br> such as climate change, biodiversity loss, pollution and poverty reduction.
</div>
<div>
<a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-top" uk-scrollspy-class
<!-- TODO: need a page for the description of the algorithm - to get us there from the learn more btn -->
<!-- <a class="uk-display-inline-block uk-text-uppercase uk-button-text uk-margin-top" uk-scrollspy-class
routerLinkActive="router-link-active" routerLink="/">
<span class="uk-flex uk-flex-middle">
<span>Learn More</span>
</span>
</a>
</a> -->
</div>
</div>
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center uk-position-relative">
<div class="uk-width-2-5@m uk-width-1-1@s uk-text-center uk-position-relative" uk-scrollspy-class>
<img src="../../assets/explore-assets/sdg-hero-img.svg" loading="lazy">
<div class="uk-position-absolute uk-card uk-card-default uk-padding" style="bottom: 0; left: 0">
<img src="../../assets/explore-assets/sdg-badge.png" loading="lazy" style="max-width: 215px">
@ -42,7 +47,7 @@
<div class="uk-text-bold uk-h4 uk-margin-remove" style="color: inherit;">
{{sdg.code}}
</div>
<div class="uk-text-small uk-text-bold uk-text-uppercase uk-margin-small-left">
<div class="uk-text-bold uk-text-uppercase uk-margin-small-left">
{{sdg.label}}
</div>
</div>
@ -51,8 +56,8 @@
<img [src]="'../../assets/explore-assets/sdgs/g' + sdg.code + '.png'" alt="">
</div>
<div>
<span class="uk-text-large uk-text-bold">{{sdg.number == null ? '0' : sdg.number | number}}</span>
<p class="uk-text-small uk-margin-remove">Research Outcomes</p>
<span class="uk-text-large uk-text-bold uk-margin-small-bottom">{{sdg.number == null ? '0' : sdg.number | number}}</span>
<p class="uk-text-small uk-margin-remove">Research Items</p>
</div>
</div>
</div>

2
explore/src/assets/openaire-theme

@ -1 +1 @@
Subproject commit b441da3afde53c70df14cbdfc1230de41a034bb1
Subproject commit 1200683a6b345f1b453859e3136e4df227c40fc8