120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
import {HttpClient} from "@angular/common/http";
|
|
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 {ActivatedRoute} from "@angular/router";
|
|
import {Location} from "@angular/common";
|
|
|
|
@Component({
|
|
selector: 'fos',
|
|
templateUrl: 'fos.component.html',
|
|
styleUrls: ['fos.component.css']
|
|
})
|
|
export class FosComponent implements OnInit, OnDestroy {
|
|
|
|
public fos: any = [];
|
|
public index: number = 0;
|
|
|
|
public keywordControl: FormControl;
|
|
public keyword: string = null;
|
|
|
|
public viewResults = [];
|
|
|
|
public result = [];
|
|
|
|
properties: EnvProperties = properties;
|
|
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FOS'}];
|
|
|
|
subscriptions: Subscription[] = [];
|
|
|
|
constructor(
|
|
private httpClient: HttpClient,
|
|
private fb: FormBuilder,
|
|
private location: Location,
|
|
private route: ActivatedRoute,
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.keywordControl = this.fb.control('');
|
|
this.httpClient.get(properties.domain+'/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() {
|
|
for (let sub of this.subscriptions) {
|
|
sub.unsubscribe();
|
|
}
|
|
}
|
|
|
|
changeDisplayedFos(i) {
|
|
this.index = i;
|
|
}
|
|
|
|
onSubmit() {
|
|
if(this.keywordControl.value) {
|
|
this.keyword = this.keywordControl.value;
|
|
// TODO: router.navigate();
|
|
this.location.go(window.location.pathname + '?keyword=' + this.keyword);
|
|
this.findMatches();
|
|
}
|
|
}
|
|
|
|
findMatches() {
|
|
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.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;
|
|
});
|
|
}
|
|
}
|
|
|
|
highlightKeyword(name) {
|
|
if(name.includes(this.keyword.toLowerCase())) {
|
|
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
|
} else {
|
|
return name;
|
|
}
|
|
}
|
|
|
|
clearKeyword() {
|
|
this.keyword = null;
|
|
this.keywordControl.setValue('');
|
|
this.location.go(window.location.pathname);
|
|
}
|
|
} |