130 lines
3.5 KiB
TypeScript
130 lines
3.5 KiB
TypeScript
import {HttpClient} from "@angular/common/http";
|
|
import {Component, OnDestroy, OnInit, ViewChild} 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";
|
|
|
|
@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 matchLevel1: boolean = false;
|
|
public matchLevel2: boolean = false;
|
|
public matchLevel3: boolean = false;
|
|
public level1Results = [];
|
|
public level2Results = [];
|
|
public level3Results = [];
|
|
|
|
properties: EnvProperties = properties;
|
|
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'FOS'}];
|
|
|
|
subscriptions: Subscription[] = [];
|
|
|
|
constructor(
|
|
private httpClient: HttpClient,
|
|
private fb: FormBuilder
|
|
) {}
|
|
|
|
ngOnInit() {
|
|
this.httpClient.get('/assets/vocabulary/fos.json').subscribe(data => {
|
|
this.fos = data['fos'];
|
|
});
|
|
this.keywordControl = this.fb.control('');
|
|
}
|
|
|
|
public ngOnDestroy() {
|
|
for (let sub of this.subscriptions) {
|
|
sub.unsubscribe();
|
|
}
|
|
}
|
|
|
|
changeDisplayedFos(i) {
|
|
this.index = i;
|
|
}
|
|
|
|
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?
|
|
this.findMatches();
|
|
}
|
|
}
|
|
|
|
findMatches() {
|
|
// console.log(this.keyword);
|
|
this.level1Results = [];
|
|
this.level2Results = [];
|
|
this.level3Results = [];
|
|
// 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);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
// 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)) {
|
|
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
|
} else {
|
|
return name;
|
|
}
|
|
}
|
|
|
|
clearKeyword() {
|
|
this.keyword = null;
|
|
this.matchLevel1 = false;
|
|
this.matchLevel2 = false;
|
|
this.matchLevel3 = false;
|
|
}
|
|
} |