openaire-library/fos/fos-selection/fos-selection.component.ts

import {HttpClient} from "@angular/common/http";
import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from "@angular/core";
import {FormBuilder, FormControl} from "@angular/forms";
import {ActivatedRoute, Router} from "@angular/router";
import {Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
import {StringUtils} from "../../utils/string-utils.class";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import {HelperFunctions} from "../../utils/HelperFunctions.class";
import Timeout = NodeJS.Timeout;

declare var UIkit;

@Component({
	selector: 'fos-selection',
	templateUrl: 'fos-selection.component.html',
	styleUrls: ['fos-selection.component.less']
})
export class FosSelectionComponent {
	public properties: EnvProperties = properties;
	@Input() subjects: string[];
	@Input() contentHeight: number = 0;
	@ViewChild("searchElement") searchElement: ElementRef;

	public loading: boolean;
	public fos: any[] = [];
	public fosOptions: any = [];
	public activeSection: string;

	public keywordControl: FormControl;
	public keyword: string;

	public viewResults = [];

	public result = [];

	private subscriptions: Subscription[] = [];
	private observer: IntersectionObserver;
	private timeout: Timeout;
	@ViewChild('tabs') tabs: ElementRef;
	public sliderInit: boolean = false;

	constructor(
		private httpClient: HttpClient,
		private fb: FormBuilder,
		private cdr: ChangeDetectorRef,
		private route: ActivatedRoute,
		private _router: Router
	) {}

	ngOnInit() {
		this.loading = true;
		this.httpClient.get(this.properties.domain+'/assets/common-assets/vocabulary/fos.json').subscribe(data => {
			this.fos = data['fos'];
			this.convertFosToOptions();
			if (typeof document !== 'undefined') {
				setTimeout(()=> {
					let slider = UIkit.slider(this.tabs.nativeElement);
					slider.clsActive = 'uk-slider-active';
					slider.updateActiveClasses();
					this.sliderInit = true;
					slider.slides.forEach(item => {
						item.classList.remove('uk-active');
					});
					if (this.route.snapshot.fragment) {
						this.activeSection = this.route.snapshot.fragment;
						let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
						slider.show(i);
					} else {
						this.activeSection = this.fos[0].id;
					}
					this.cdr.detectChanges();
				});
			}
			this.subscriptions.push(this.route.fragment.subscribe(fragment => {
				if(fragment) {
					this.activeSection = fragment;
					if(this.tabs) {
						let slider = UIkit.slider(this.tabs.nativeElement);
						let i = this.fos.findIndex(item => item.id == fragment);
						slider.show(i);
					}
				} else {
					this.activeSection = this.fos[0].id;
				}
			}));
			this.keywordControl = this.fb.control('');
			this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
				this.keyword = value;
				this.findMatches(this.keyword);
				if (typeof document !== 'undefined') {
					setTimeout(() => {
						this.setObserver();
					});
				}
			}));
		});
		this.loading = false;
	}

	ngOnDestroy() {
    for (let sub of this.subscriptions) {
      sub.unsubscribe();
    }
		if(this.observer) {
			this.observer.disconnect();
		}
  }

	private setObserver() {
		if(this.observer) {
			this.observer.disconnect();
		}
		this.observer = new IntersectionObserver((entries) => {
			entries.forEach(entry => {
				if(entry.isIntersecting) {
					if(this.timeout) {
						clearTimeout(this.timeout);
					}
					this.timeout = setTimeout(() => {
						this._router.navigate(['./'], {fragment: entry.target.id, relativeTo: this.route, state: {disableScroll: true}});
					}, 200);
				}
			});
		}, {threshold: 0.25, rootMargin: '-100px'});
		this.fos.forEach(fos => {
			let element = document.getElementById(fos.id);
			if(element) {
				this.observer.observe(element);
			}
		});
	}

	convertFosToOptions() {
		this.fosOptions = [];
		this.fos.forEach(fos => {
			this.fosOptions.push({id: fos.id, checked: false});
			if(fos.children) {
				fos.children.forEach(child => {
					this.fosOptions.push({id: child.id, checked: false});
					if(child.children) {
						child.children.forEach(child2 => {
							this.fosOptions.push({id: child2.id, checked: this.subjects?.includes(child2.id)});
						});
					}
				});
			}
		});
	}

	findMatches(value: string) {
		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 => {
				matchLevel1 = !!item.id.includes(value?.toLowerCase());
				// // 2nd level search
				if(item.children?.length && !matchLevel1) {
					item.children = item.children.filter(subItem => {
						matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
						// 3rd level search
						if(subItem.children?.length && !matchLevel2) {
							subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.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;
		}
	}

  public urlEncodeAndQuote(str: string): string {
    return StringUtils.quote(StringUtils.URIEncode(str));
  }

	public scrollToId(value: string) {
		HelperFunctions.scrollToId(value);
		this.activeSection = value;
	}

	public getSelectedSubjects() {
    return this.fosOptions.filter(sub => sub.checked == true);
  }

	get calculatedHeight(): number {
		if(this.contentHeight && this.searchElement) {
			return this.contentHeight - this.searchElement.nativeElement.offsetHeight - 100;
		}
	}
}