2022-03-31 13:57:13 +02:00
import { HttpClient } from "@angular/common/http" ;
2022-04-14 17:05:47 +02:00
import { Component , OnDestroy , OnInit } from "@angular/core" ;
2022-03-31 13:57:13 +02:00
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" ;
2022-04-14 17:05:47 +02:00
import { FormBuilder , FormControl } from "@angular/forms" ;
2022-06-21 13:08:21 +02:00
import { ActivatedRoute , Router } from "@angular/router" ;
import { Meta , Title } from "@angular/platform-browser" ;
2022-04-14 17:05:47 +02:00
import { Location } from "@angular/common" ;
2022-06-09 15:45:39 +02:00
import { StringUtils } from "../openaireLibrary/utils/string-utils.class" ;
2022-06-21 13:27:41 +02:00
import { SEOService } from "../openaireLibrary/sharedComponents/SEO/SEO.service" ;
import { PiwikService } from "../openaireLibrary/utils/piwik/piwik.service" ;
2022-03-31 13:57:13 +02:00
@Component ( {
selector : 'fos' ,
templateUrl : 'fos.component.html' ,
2022-07-18 17:59:32 +02:00
styleUrls : [ 'fos.component.less' ]
2022-03-31 13:57:13 +02:00
} )
export class FosComponent implements OnInit , OnDestroy {
2022-06-21 13:08:21 +02:00
public url : string = null ;
public pageTitle : string = "OpenAIRE | Fields of Science" ;
public pageDescription : string = "We have integrated a Field-of-Science (FoS) taxonomy into our dataset to organize and discover research more effectively. Using the full capabilities of the OpenAIRE Research Graph (full-texts, citations, references, venues) we apply AI and bring forward any multidisciplinarity potential." ;
2022-03-31 13:57:13 +02:00
2022-06-09 15:23:01 +02:00
public fos : any [ ] = [ ] ;
public fosOptions : string [ ] = [ ] ;
2022-03-31 13:57:13 +02:00
public index : number = 0 ;
2022-04-07 15:20:10 +02:00
public keywordControl : FormControl ;
public keyword : string = null ;
2022-04-14 17:05:47 +02:00
public viewResults = [ ] ;
public result = [ ] ;
2022-04-07 15:20:10 +02:00
2022-03-31 13:57:13 +02:00
properties : EnvProperties = properties ;
2022-05-25 08:08:41 +02:00
public breadcrumbs : Breadcrumb [ ] = [ { name : 'home' , route : '/' } , { name : 'Fields of Science' } ] ;
2022-03-31 13:57:13 +02:00
subscriptions : Subscription [ ] = [ ] ;
constructor (
2022-04-07 15:20:10 +02:00
private httpClient : HttpClient ,
2022-04-14 17:05:47 +02:00
private fb : FormBuilder ,
private location : Location ,
private route : ActivatedRoute ,
2022-06-21 13:08:21 +02:00
private _router : Router ,
private _meta : Meta ,
2022-06-21 13:27:41 +02:00
private _title : Title ,
private seoService : SEOService ,
private _piwikService : PiwikService
2022-03-31 13:57:13 +02:00
) { }
ngOnInit() {
2022-06-21 13:27:41 +02:00
if ( this . properties . enablePiwikTrack && ( typeof document !== 'undefined' ) ) {
this . subscriptions . push ( this . _piwikService . trackView ( this . properties , this . pageTitle , this . properties . piwikSiteId ) . subscribe ( ) ) ;
}
2022-06-21 13:08:21 +02:00
this . url = this . properties . domain + this . properties . baseLink + this . _router . url ;
2022-06-21 13:27:41 +02:00
this . seoService . createLinkForCanonicalURL ( this . url ) ;
2022-06-21 13:08:21 +02:00
this . updateUrl ( this . url ) ;
this . updateTitle ( this . pageTitle ) ;
this . updateDescription ( this . pageDescription ) ;
2022-04-14 17:05:47 +02:00
this . keywordControl = this . fb . control ( '' ) ;
2022-05-16 23:31:28 +02:00
this . httpClient . get ( properties . domain + '/assets/vocabulary/fos.json' ) . subscribe ( data = > {
2022-04-14 17:05:47 +02:00
this . fos = data [ 'fos' ] ;
2022-06-09 15:23:01 +02:00
this . convertFosToOptions ( ) ;
2022-04-14 17:05:47 +02:00
this . subscriptions . push ( this . route . queryParams . subscribe ( params = > {
if ( params . keyword ) {
this . keywordControl . setValue ( params . keyword ) ;
this . keyword = this . keywordControl . value ;
this . findMatches ( ) ;
}
} ) ) ;
2022-03-31 13:57:13 +02:00
} ) ;
}
public ngOnDestroy() {
for ( let sub of this . subscriptions ) {
sub . unsubscribe ( ) ;
}
}
changeDisplayedFos ( i ) {
this . index = i ;
2022-04-07 15:20:10 +02:00
}
onSubmit() {
if ( this . keywordControl . value ) {
this . keyword = this . keywordControl . value ;
2022-04-14 17:05:47 +02:00
// TODO: router.navigate();
this . location . go ( window . location . pathname + '?keyword=' + this . keyword ) ;
2022-04-07 15:20:10 +02:00
this . findMatches ( ) ;
}
}
2022-06-09 15:23:01 +02:00
convertFosToOptions() {
this . fosOptions = [ ] ;
this . fos . forEach ( fos = > {
this . fosOptions . push ( fos . id ) ;
if ( fos . children ) {
fos . children . forEach ( child = > {
this . fosOptions . push ( child . id ) ;
if ( child . children ) {
child . children . forEach ( child2 = > {
this . fosOptions . push ( child2 . id ) ;
} ) ;
}
} ) ;
}
} ) ;
}
2022-04-07 15:20:10 +02:00
findMatches() {
2022-04-14 17:05:47 +02:00
this . viewResults = JSON . parse ( JSON . stringify ( this . fos ) ) ;
let matchLevel1 : boolean = false ;
let matchLevel2 : boolean = false ;
2022-04-07 15:20:10 +02:00
// 1st level search
2022-04-14 17:05:47 +02:00
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 ;
} ) ;
2022-04-07 15:20:10 +02:00
}
2022-04-14 17:05:47 +02:00
return item . children ? . length > 0 ;
2022-04-07 15:20:10 +02:00
} ) ;
}
}
2022-04-13 08:42:37 +02:00
highlightKeyword ( name ) {
2022-04-14 17:05:47 +02:00
if ( name . includes ( this . keyword . toLowerCase ( ) ) ) {
2022-04-13 08:42:37 +02:00
return name . replace ( new RegExp ( this . keyword , "gi" ) , ( matchedValue ) = > ` <mark class="highlighted"> ${ matchedValue } </mark> ` ) ;
} else {
return name ;
}
}
2022-04-07 15:20:10 +02:00
clearKeyword() {
this . keyword = null ;
2022-04-14 17:05:47 +02:00
this . keywordControl . setValue ( '' ) ;
this . location . go ( window . location . pathname ) ;
2022-03-31 13:57:13 +02:00
}
2022-06-09 15:45:39 +02:00
public urlEncodeAndQuote ( str : string ) : string {
return StringUtils . quote ( StringUtils . URIEncode ( str ) ) ;
2022-06-21 13:08:21 +02:00
}
private updateUrl ( url : string ) {
this . _meta . updateTag ( { content : url } , "property='og:url'" ) ;
}
private updateTitle ( title : string ) {
var _title = ( ( title . length > 50 ) ? title . substring ( 0 , 50 ) : title ) ;
this . _title . setTitle ( _title ) ;
this . _meta . updateTag ( { content : _title } , "property='og:title'" ) ;
}
private updateDescription ( description : string ) {
this . _meta . updateTag ( { content : description } , "name='description'" ) ;
this . _meta . updateTag ( { content : description } , "property='og:description'" ) ;
2022-06-09 15:45:39 +02:00
}
2022-07-18 17:59:32 +02:00
}