@ -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 . keywordControl = this . fb . control ( '' ) ;
this . httpClient . get ( '/assets/vocabulary/fos.json' ) . subscribe ( data = > {
this . fos = data [ 'fos' ] ;
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 ( ) ;
}
} ) ) ;
} ) ;
this . keywordControl = this . fb . control ( '' ) ;
}
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 ) ;
}
}
