diff --git a/src/app/mapping/mapping.component.ts b/src/app/mapping/mapping.component.ts
index b144ce4bae291215cb20a4b303fbe624af306b12..c325049261d3776a78a219dc72bfa1b82b93e111 100644
--- a/src/app/mapping/mapping.component.ts
+++ b/src/app/mapping/mapping.component.ts
@@ -687,11 +687,14 @@ export class MappingComponent implements OnInit {
const paths: Path[] = [];
- for (let i = 0; i < this.datasets.length; i++) {
- if (this.selectedPaths[i]) {
- paths.push(new Path(this.datasets[i].uri, this.selectedPaths[i], this.datasets[i].card, this.datasets[i].dcatClass));
+ if (this.datasets) {
+ for (let i = 0; i < this.datasets.length; i++) {
+ if (this.selectedPaths[i]) {
+ paths.push(new Path(this.datasets[i].uri, this.selectedPaths[i], this.datasets[i].card, this.datasets[i].dcatClass));
+ }
}
}
+
const data: RequestMapping = new RequestMapping(this.ids, paths, this.tokenStorage.getFDPToken());
this.dataEvent.emit(data);
diff --git a/src/app/semantic-enrichment/semantic-enrichment.component.html b/src/app/semantic-enrichment/semantic-enrichment.component.html
index 01bb4fee45c69a7b5378dcb77047a7e8beecaa58..57934e6f50459c7a05bef1e9d721725be9296265 100644
--- a/src/app/semantic-enrichment/semantic-enrichment.component.html
+++ b/src/app/semantic-enrichment/semantic-enrichment.component.html
@@ -9,13 +9,13 @@
</nb-card>
</ng-template>
-<nb-autocomplete #auto [handleDisplayFn]="viewHandle" (selectedChange)="setIri($event)">
- <nb-option
+<mat-autocomplete #auto="matAutocomplete" [displayWith]="viewHandle" (optionSelected)="setIri($event)">
+ <mat-option
*ngFor="let option of filteredOptions | async"
[value]="option">
{{option.source.document.label}}
- </nb-option>
-</nb-autocomplete>
+ </mat-option>
+</mat-autocomplete>
<ng-template #loading xmlns="http://www.w3.org/1999/html">
<nb-card size="small" [nbSpinner]="true" nbSpinnerStatus="primary" nbSpinnerSize="giant"></nb-card>
@@ -30,17 +30,17 @@
<nb-card size="small">
<nb-card-body>
- <nb-form-field >
+ <mat-form-field class="half-width">
<input
type="text"
placeholder="enter a value with at least 4 characters"
- [ngModel]="autocompleteMap.get(keyword.id)"
- (ngModelChange)="onModelChange($event, keyword.id)"
- nbInput
- [nbAutocomplete]="auto"
+ [(ngModel)]="values[i]"
+ (ngModelChange)="onModelChange($event)"
+ matInput
+ [matAutocomplete]="auto"
(focusin)="setId(keyword.id)">
- </nb-form-field>
+ </mat-form-field>
<div class="mt0-m">
<table *ngIf="autocompleteMap.get(keyword.id).length > 0">
<thead style="background-color: #3366ff">
@@ -64,7 +64,6 @@
</div>
</nb-card-body>
</nb-card>
- <p *ngIf="myControl.get(keyword.id) !== null">{{ myControl.get(keyword.id) | json }}</p>
<table>
<thead style="background-color: #3366ff">
<th></th>
diff --git a/src/app/semantic-enrichment/semantic-enrichment.component.scss b/src/app/semantic-enrichment/semantic-enrichment.component.scss
index e4f89e3fbce8bac5a5b8e2dee1e3b840d055ec21..98beafa84a3a3e09fc55f95d46589a373170a32c 100644
--- a/src/app/semantic-enrichment/semantic-enrichment.component.scss
+++ b/src/app/semantic-enrichment/semantic-enrichment.component.scss
@@ -2,3 +2,7 @@
vertical-align: middle;
margin: auto
}
+
+.half-width {
+ width: 50%;
+}
diff --git a/src/app/semantic-enrichment/semantic-enrichment.component.ts b/src/app/semantic-enrichment/semantic-enrichment.component.ts
index da6fb67b8565757667cef210c0bd05658f61ff0d..4f0b86d1df5c37b0ffb6e73f3a96ec5db04f1047 100644
--- a/src/app/semantic-enrichment/semantic-enrichment.component.ts
+++ b/src/app/semantic-enrichment/semantic-enrichment.component.ts
@@ -1,5 +1,8 @@
import {
+ AfterContentChecked, AfterContentInit,
+ AfterViewChecked,
+ AfterViewInit, ChangeDetectorRef,
Component,
Input,
OnInit,
@@ -7,24 +10,24 @@ import {
ViewChild
} from '@angular/core';
import {Observable, of} from 'rxjs';
-import {debounceTime, distinctUntilChanged, map, startWith, switchMap, tap} from 'rxjs/operators';
+import { delay, map} from 'rxjs/operators';
import {PostService} from './services/post.service';
-import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {KeywordResponse} from '../mapping/class/dataset';
-import {ESModel, Result} from './ESModel';
+import { Result} from './ESModel';
import {ConceptsRequest, DataConcept} from './ConceptsRequest';
import {RequestMapping} from '../mapping/class/requestMapping';
import {NbDialogService} from '@nebular/theme';
import {MappingService} from '../mapping/service/mapping.service';
import {FeedbackDialogComponent} from '../mapping/dialog/feedback-dialog/feedback-dialog.component';
import {MatDialog} from '@angular/material/dialog';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
@Component({
selector: 'app-semantic-enrichment',
templateUrl: './semantic-enrichment.component.html',
styleUrls: ['./semantic-enrichment.component.scss']
})
-export class SemanticEnrichmentComponent implements OnInit {
+export class SemanticEnrichmentComponent implements OnInit, AfterContentChecked {
@Input()
data: RequestMapping;
@@ -39,28 +42,30 @@ export class SemanticEnrichmentComponent implements OnInit {
errorMess: string;
response: KeywordResponse[];
- myControl: FormArray = new FormArray([]);
filteredOptions: Observable<Result[]>;
autocompleteMap: Map<string, Result[]> = new Map<string, Result[]>();
+ values: string[] = [];
private loadingPublish: boolean;
private id: string;
constructor(private service: PostService, private dialogService: NbDialogService,
- private mappingService: MappingService, private matDialog: MatDialog, private fb: FormBuilder) {
- this.filteredOptions = this.myControl.valueChanges.pipe(
- startWith(''),
- debounceTime(400),
- distinctUntilChanged(),
- switchMap(val => this.filter(val || ''))
- );
+ private mappingService: MappingService, private matDialog: MatDialog,
+ private cdRef: ChangeDetectorRef) {
+
}
+
ngOnInit(): void {
this.getConceptsByKeywords();
}
+ ngAfterContentChecked(): void {
+ //this.cdRef.detectChanges();
+ }
+
+
getConceptsByKeywords() {
this.errorMess = null;
this.isLoading = true;
@@ -69,7 +74,6 @@ export class SemanticEnrichmentComponent implements OnInit {
this.response = response;
this.response.forEach((resp: KeywordResponse) => {
this.autocompleteMap.set(resp.id, []);
- this.myControl.push(new FormControl(''));
resp.concepts.results.forEach((result: Result) => {
if (resp.concepts.results.indexOf(result) === 0) {
result.checked = true;
@@ -106,8 +110,13 @@ export class SemanticEnrichmentComponent implements OnInit {
});
}
- viewHandle(value: Result) {
- return value.source.document.label;
+ viewHandle(value: any) {
+ if (typeof value !== 'string' && typeof value !== 'undefined') {
+ if (value.source) {
+ return value.source.document.label;
+ }
+ }
+ return value;
}
onSubmit() {
@@ -160,18 +169,18 @@ export class SemanticEnrichmentComponent implements OnInit {
}
- onModelChange(value: string, id: string) {
- this.filteredOptions = this.filter(value);
+ onModelChange(value: string) {
+ Promise.resolve(null).then(() => this.filteredOptions = this.filter(value));
}
setId(id: string) {
this.id = id;
}
- setIri(option: Result) {
+ setIri(option: MatAutocompleteSelectedEvent) {
const iris = this.autocompleteMap.get(this.id);
if (iris) {
- iris.push(option);
+ iris.push(option.option.value);
}
this.autocompleteMap.set(this.id, iris);
console.log(this.autocompleteMap);