explore-services/explore/src/app/fos/fos.component.ts

124 lines
3.2 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;
// console.log(this.keyword);
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
// if(this.fos.length) {
// const level1Matches = this.fos.filter(item => item.id.includes(this.keyword));
// console.log(level1Matches);
// }
}
clearKeyword() {
this.keyword = null;
this.matchLevel1 = false;
this.matchLevel2 = false;
this.matchLevel3 = false;
}
}