no message

dmp-backend/web/src/main/java/eu/eudat/controllers/Organisations.java

@@ -33,7 +33,7 @@ public class Organisations extends BaseController {
         try {
             List<Map<String, String>> remoteRepos = this.getApiContext().getOperationsContext().getRemoteFetcher().getOrganisations(query,type);
             OrganisationsExternalSourcesModel projectsExternalSourcesModel = new OrganisationsExternalSourcesModel().fromExternalItem(remoteRepos);
-            return ResponseEntity.status(HttpStatus.OK).body(new ResponseItem<OrganisationsExternalSourcesModel>().payload(projectsExternalSourcesModel).status(ApiMessageCode.SUCCESS_MESSAGE));
+            return ResponseEntity.status(HttpStatus.OK).body(new ResponseItem<OrganisationsExternalSourcesModel>().payload(projectsExternalSourcesModel).status(ApiMessageCode.NO_MESSAGE));
         } catch (NoURLFound ex) {
             return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(new ResponseItem<OrganisationsExternalSourcesModel>().status(ApiMessageCode.ERROR_MESSAGE).message("External Url Not Found"));
         } catch (HugeResultSet ex) {

dmp-frontend/src/app/datasets/dataset-wizard/dataset-wizard.component.ts

@@ -19,7 +19,6 @@ import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation, Templat
 import { FormGroup, Validators, FormBuilder, FormArray } from "@angular/forms";
 import * as FileSaver from 'file-saver';
 import { MatPaginator, MatSort, MatSnackBar, MatStepper } from "@angular/material";
-import { AutoCompleteConfiguration } from '../../shared/components/autocomplete/AutoCompleteConfiguration';
 import { ExternalDatasetCriteria } from '../../models/criteria/external-dataset/ExternalDatasetCriteria';
 import { ExternalDatasetModel } from '../../models/external-dataset/ExternalDatasetModel';
 import { RegistryCriteria } from '../../models/criteria/registry/RegistryCriteria';
@@ -35,6 +34,7 @@ import { Observable } from 'rxjs/Observable';
 import { BreadcrumbItem } from '../../shared/components/breadcrumb/definition/breadcrumb-item';
 import { TagsCriteria } from '../../models/criteria/tags/TagsCriteria';
 import { TagModel } from '../../models/tags/TagModel';
+import { AutoCompleteConfiguration } from '../../shared/components/auto-complete/AutoCompleteConfiguration';
 
 @Component({
   selector: 'app-dataset-wizard-component',

dmp-frontend/src/app/dmps/editor/dmp-editor.component.html

@@ -44,68 +44,46 @@
             <mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
           </mat-form-field>
 
-          <auto-complete class="col-md-6" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}" [configuration]="projectAutoCompleteConfiguration"
+          <div class="col-md-6">
-            titleKey="label" [control]="formGroup.get('project')" [required]="true">
+            <app-single-auto-complete [reactiveFormControl]="formGroup.get('project')" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
-          </auto-complete>
+              [configuration]="projectAutoCompleteConfiguration">
-
+            </app-single-auto-complete>
+          </div>
           <!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
-
+          <div class="col-md-6">
-          <td-chips class="col-md-6" color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
+            <div class="row">
-            (inputChange)="filterProfiles($event)" requireMatch required>
+              <app-multiple-auto-complete class="col-md-10" [reactiveFormControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
-            <ng-template td-chip let-chip="chip">
+                [configuration]="profilesAutoCompleteConfiguration">
-              <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
+              </app-multiple-auto-complete>
-              {{chip.label}}
+              <div class="col-md-2">
-            </ng-template>
+                <button mat-icon-button type="button" (click)="availableProfiles()">
-            <ng-template td-autocomplete-option let-option="option">
+                  <mat-icon>view_list</mat-icon>
-              <div>
+                </button>
-                {{option.label}}
+              </div>
+            </div>
           </div>
-            </ng-template>
-            <mat-progress-bar [style.height.px]="2" *ngIf="filteredProfilesAsync" mode="indeterminate"></mat-progress-bar>
-            <span *ngIf="formGroup.get('profiles').touched || !formGroup.get('profiles').pristine">
-              <mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-            </span>
-          </td-chips>
           <!-- <button mat-button (click)="availableProfiles()">View All</button> -->
-          <a style="float:right" href="#" (click)="availableProfiles()">View All</a>
 
-          <!-- <auto-complete-chip placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
-                    titleKey="name" [control]="formGroup.get('organisations')" [required]="true">
-                </auto-complete-chip> -->
-
-          <td-chips class="col-md-6" color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
-            (inputChange)="filterOrganisations($event)" requireMatch>
-            <ng-template td-chip let-chip="chip">
-              <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
-              {{chip.name}}
-            </ng-template>
-            <ng-template td-autocomplete-option let-option="option">
-              <div>
-                {{option.name}}
-              </div>
-            </ng-template>
-            <mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
-          </td-chips>
 
           <div class="col-md-6">
-            <td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers"
+            <app-multiple-auto-complete [reactiveFormControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
-              placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" (inputChange)="filterResearchers($event)" requireMatch>
+              [configuration]="organisationsAutoCompleteConfiguration">
-              <ng-template td-chip let-chip="chip">
+            </app-multiple-auto-complete>
-                <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
-                {{chip.name}}
-              </ng-template>
-              <ng-template td-autocomplete-option let-option="option">
-                <div>
-                  {{option.name}}
           </div>
-              </ng-template>
+          <div class="col-md-6">
-              <mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
+            <div class="row">
-            </td-chips>
+              <div class="col-md-10">
-
+                <app-multiple-auto-complete [reactiveFormControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
-            <button style="display:inline-block;" mat-icon-button type="button" (click)="addResearcher()">
+                  [configuration]="researchersAutoCompleteConfiguration">
-              <mat-icon aria-label="Example icon-button with a heart icon">add_circle</mat-icon>
+                </app-multiple-auto-complete>
+              </div>
+              <div class="col-md-2">
+                <button mat-icon-button type="button" (click)="addResearcher()">
+                  <mat-icon>add_circle</mat-icon>
                 </button>
               </div>
+            </div>
+          </div>
 
           <h3 mat-subheader class="col-md-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3>
 

dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts

@@ -16,7 +16,6 @@ import { RequestItem } from "../../models/criteria/RequestItem";
 import { DatasetProfileCriteria } from "../../models/criteria/dataset/DatasetProfileCriteria";
 import { DataManagementPlanCriteriaComponent } from "../../shared/components/criteria/data-management-plan/dmp-criteria.component";
 import { DatasetProfileModel } from "../../models/datasets/DatasetProfileModel";
-import { AutoCompleteConfiguration } from "../../shared/components/autocomplete/AutoCompleteConfiguration";
 import { ProjectCriteria } from "../../models/criteria/project/ProjectCriteria";
 import { ProjectService } from "../../services/project/project.service";
 import { DmpUsersModel } from "../../models/dmpUsers/DmpUsersModel";
@@ -32,6 +31,8 @@ import { DataManagementPlanProfile } from "../../models/data-management-plan-pro
 import { LanguageResolverService } from "../../services/language-resolver/language-resolver.service";
 import { IBreadCrumbComponent } from "../../shared/components/breadcrumb/definition/IBreadCrumbComponent";
 import { BreadcrumbItem } from "../../shared/components/breadcrumb/definition/breadcrumb-item";
+import { SingleAutoCompleteConfiguration } from "../../shared/components/autocompletes/single/single-auto-complete-configuration";
+import { MultipleAutoCompleteConfiguration } from "../../shared/components/autocompletes/multiple/multiple-auto-complete-configuration";
 
 @Component({
   selector: 'app-dmp-editor-component',
@@ -55,7 +56,11 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
   filteredResearchers: ExternalSourcesItemModel[];
   filteredProfiles: DatasetProfileModel[];
 
-  projectAutoCompleteConfiguration: AutoCompleteConfiguration;
+  projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
+  profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+  organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+  researchersAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
+
   createNewVersion;
   associatedUsers: Array<DmpUsersModel>
   filteredOptions: Observable<DataManagementPlanProfileListingModel>
@@ -86,7 +91,42 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
       projectRequestItem.criteria = new ProjectCriteria();
       let organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
       organisationRequestItem.criteria = new BaseCriteria();
-      this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem);
+      //this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem);
+
+
+      this.projectAutoCompleteConfiguration = {
+        filterFn: this.searchProject.bind(this),
+        items: this.searchProject(''),
+        displayFn: (item) => item["label"],
+        titleFn: (item) => item["label"],
+        //mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
+        loadDataOnStart: true
+      };
+
+      this.profilesAutoCompleteConfiguration = {
+        filterFn: this.filterProfiles.bind(this),
+        initialItems: (excludedItems: any[]) => this.filterProfiles('').map(result => result.filter(x => excludedItems.map(x => x.id).indexOf(x.id) == -1)),
+        displayFn: (item) => item["label"],
+        titleFn: (item) => item["label"],
+        //mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
+        loadDataOnStart: true
+      };
+
+      this.organisationsAutoCompleteConfiguration = {
+        filterFn: this.filterOrganisations.bind(this),
+        initialItems: (excludedItems: any[]) => this.filterOrganisations('').map(result => result.filter(x => excludedItems.map(x => x.id).indexOf(x.id) == -1)),
+        displayFn: (item) => item["name"],
+        titleFn: (item) => item["name"],
+        loadDataOnStart: true
+      };
+
+      this.researchersAutoCompleteConfiguration = {
+        filterFn: this.filterResearchers.bind(this),
+        initialItems: (excludedItems: any[]) => this.filterResearchers('').map(result => result.filter(x => excludedItems.map(x => x.id).indexOf(x.id) == -1)),
+        displayFn: (item) => item["name"],
+        titleFn: (item) => item["name"],
+        loadDataOnStart: true
+      };
 
       if (itemId != null) {
         this.isNew = false;
@@ -133,6 +173,13 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
       });
   }
 
+  searchProject(query: string) {
+    let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
+    projectRequestItem.criteria = new ProjectCriteria();
+    projectRequestItem.criteria.like = query;
+    return this.projectService.getWithExternal(projectRequestItem);
+  }
+
   formSubmit(): void {
     //this.touchAllFormFields(this.formGroup);
     if (!this.isFormValid()) { return; }
@@ -177,54 +224,32 @@ export class DataManagementPlanEditorComponent implements AfterViewInit, IBreadC
     this.router.navigate(['/invite/' + this.dataManagementPlan.id]);
   }
 
-  filterOrganisations(value: string): void {
+  filterOrganisations(value: string): Observable<ExternalSourcesItemModel[]> {
 
     this.filteredOrganisations = undefined;
-    if (value) {
     this.filteringOrganisationsAsync = true;
 
-      this.externalSourcesService.searchDMPOrganizations(value).subscribe(items => {
+    return this.externalSourcesService.searchDMPOrganizations(value)
-        this.filteredOrganisations = items;
-        this.filteringOrganisationsAsync = false;
-
-        // this.filteredOrganisations = items.filter((filteredObj: any) => {
-        //   return this.objectsModel ? this.objectsModel.indexOf(filteredObj) < 0 : true;
-        // });
-
-      });
-
-    }
   }
 
-  filterResearchers(value: string): void {
+  filterResearchers(value: string): Observable<ExternalSourcesItemModel[]> {
 
     this.filteredResearchers = undefined;
-    if (value) {
     this.filteringResearchersAsync = true;
 
-      this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } }).subscribe(items => {
+    return this.externalSourcesService.searchDMPResearchers({ criteria: { name: value, like: null } })
-        this.filteredResearchers = items;
-        this.filteringResearchersAsync = false;
-
-      });
-    }
   }
 
-  filterProfiles(value: string): void {
+  filterProfiles(value: string): Observable<DatasetProfileModel[]> {
 
     this.filteredProfiles = undefined;
-    if (value) {
     this.filteredProfilesAsync = true;
 
     const request = new RequestItem<DatasetProfileCriteria>();
     let criteria = new DatasetProfileCriteria();
     criteria.like = value;
     request.criteria = criteria;
-      this._service.searchDMPProfiles(request).subscribe(items => {
+    return this._service.searchDMPProfiles(request)
-        this.filteredProfiles = items;
-        this.filteredProfilesAsync = false;
-      });
-    }
   }
 
   addResearcher(rowId: any, rowName: any) {

dmp-frontend/src/app/dmps/editor/dynamic-fields-project/dynamic-field-project/dynamic-field-project.component.ts

@@ -1,12 +1,12 @@
 import { Component, ViewEncapsulation, OnInit, Input, ViewChild } from "@angular/core";
 import { FormGroup } from "@angular/forms";
 import { DataManagementPlanService } from "../../../../services/data-management-plan/data-management-plan.service";
-import { AutoCompleteConfiguration } from "../../../../shared/components/autocomplete/AutoCompleteConfiguration";
 import { RequestItem } from "../../../../models/criteria/RequestItem";
 import { DynamicFieldProjectCriteria, DynamicFieldProjectCriteriaDependencies } from "../../../../models/dynamic-field-project/DynamicFieldProjectCriteria";
 import { AutoCompleteComponent } from "../../../../shared/components/auto-complete/auto-complete.component";
 import { DynamicFieldDependency } from "../../../../models/data-managemnt-plans/DynamicFieldDependency";
 import { LanguageResolverService } from "../../../../services/language-resolver/language-resolver.service";
+import { AutoCompleteConfiguration } from "../../../../shared/components/auto-complete/AutoCompleteConfiguration";
 
 @Component({
   selector: 'app-dynamic-field-project',

dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.html

@@ -16,9 +16,10 @@
           <mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
         </mat-form-field>
 
-                <auto-complete class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration"
+
-                    titleKey="label" [control]="formGroup.get('project')" [required]="true">
+        <app-single-auto-complete [reactiveFormControl]="formGroup.get('project')" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
-                </auto-complete>
+          [configuration]="projectAutoCompleteConfiguration">
+        </app-single-auto-complete>
 
         <td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
           (inputChange)="filterProfiles($event)" requireMatch>
@@ -35,10 +36,6 @@
           <mat-error style="font-size:10.5px" *ngIf="formGroup.get('profiles').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
         </td-chips>
 
-                <!-- <auto-complete-chip class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
-                    titleKey="name" [control]="formGroup.get('organisations')" [required]="true">
-                </auto-complete-chip> -->
-
         <td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
           (inputChange)="filterOrganisations($event)" requireMatch>
           <ng-template td-chip let-chip="chip">

dmp-frontend/src/app/dmps/wizard/editor/dmp-wizard-editor.component.ts

@@ -6,7 +6,6 @@ import { JsonSerializer } from '../../../utilities/JsonSerializer';
 import { RequestItem } from '../../../models/criteria/RequestItem';
 import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
 import { DmpUsersModel } from '../../../models/dmpUsers/DmpUsersModel';
-import { AutoCompleteConfiguration } from '../../../shared/components/autocomplete/AutoCompleteConfiguration';
 import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel';
 import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
 import { ProjectService } from '../../../services/project/project.service';
@@ -20,6 +19,8 @@ import { DataSource } from "@angular/cdk/table";
 import { Observable } from "rxjs/Observable";
 import { FormGroup } from '@angular/forms';
 import { BaseCriteria } from '../../../models/criteria/BaseCriteria';
+import { SingleAutoCompleteConfiguration } from '../../../shared/components/autocompletes/single/single-auto-complete-configuration';
+import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
 
 
 @Component({
@@ -41,7 +42,7 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
   filteredResearchers: ExternalSourcesItemModel[];
   filteredProfiles: DatasetProfileModel[];
 
-  projectAutoCompleteConfiguration: AutoCompleteConfiguration;
+  projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
   createNewVersion;
   associatedUsers: Array<DmpUsersModel>
   labelDisabled: boolean = false;
@@ -54,7 +55,8 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
     public snackBar: MatSnackBar,
     public router: Router,
     public language: TranslateService,
-    private _service: DataManagementPlanService
+    private _service: DataManagementPlanService,
+    private languageResolverService: LanguageResolverService
   ) {
 
   }
@@ -63,7 +65,14 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
 
     let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
     projectRequestItem.criteria = new ProjectCriteria();
-    this.projectAutoCompleteConfiguration = new AutoCompleteConfiguration(this.projectService.getWithExternal.bind(this.projectService), projectRequestItem);
+    this.projectAutoCompleteConfiguration = {
+      filterFn: this.searchProject.bind(this.projectService),
+      items: this.searchProject(''),
+      displayFn: (item) => item["label"],
+      titleFn: (item) => item["label"],
+      //mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
+      loadDataOnStart: true
+    };
 
     let organisationRequestItem: RequestItem<BaseCriteria> = new RequestItem();
     organisationRequestItem.criteria = new BaseCriteria();
@@ -76,6 +85,13 @@ export class DataManagementPlanWizardEditorComponent implements AfterViewInit {
     })
   }
 
+  searchProject(query: string) {
+    let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
+    projectRequestItem.criteria = new ProjectCriteria();
+    projectRequestItem.criteria.like = query;
+    return this.projectService.getWithExternal(projectRequestItem);
+  }
+
   formSubmit(): void {
     //this.touchAllFormFields(this.formGroup);
     if (!this.isFormValid()) { return; }

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts

@@ -3,10 +3,10 @@ import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsu
 import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { DatasetProfileService } from '../../../services/dataset-profile.service';
 import { ActivatedRoute } from '@angular/router';
-import { AutoCompleteConfiguration } from '../../../shared/components/autocomplete/AutoCompleteConfiguration';
 import { RequestItem } from '../../../models/criteria/RequestItem';
 import { BaseCriteria } from '../../../models/criteria/BaseCriteria';
 import { AutocompleteLookupItem } from '../../../models/auto-complete/AutocompleteLookupItem';
+import { AutoCompleteConfiguration } from '../../../shared/components/auto-complete/AutoCompleteConfiguration';
 declare var $: any;
 
 

dmp-frontend/src/app/models/projects/ProjectModel.ts

@@ -66,7 +66,7 @@ export class ProjectModel implements Serializable<ProjectModel> {
     const baseContext: ValidationContext = new ValidationContext();
     baseContext.validation.push({ key: 'id', validators: [] });
     baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'label')] });
-    baseContext.validation.push({ key: 'abbreviation', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'abbreviation')] });
+    baseContext.validation.push({ key: 'abbreviation', validators: [BackendErrorValidator(this.errorModel, 'abbreviation')] });
     baseContext.validation.push({ key: 'uri', validators: [BackendErrorValidator(this.errorModel, 'uri')] });
     baseContext.validation.push({ key: 'type', validators: [BackendErrorValidator(this.errorModel, 'type')] });
     baseContext.validation.push({ key: 'status', validators: [] });

dmp-frontend/src/app/projects/editor/project-editor.component.html

@@ -28,10 +28,8 @@
           </mat-form-field>
 
           <mat-form-field class="col-md-6">
-            <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
+            <input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation">
-              required>
             <mat-error *ngIf="formGroup.get('abbreviation').errors?.backendError">{{baseErrorModel.abbreviation}}</mat-error>
-            <mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
           </mat-form-field>
 
           <mat-form-field class="col-md-6">

dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.ts

@@ -1,7 +1,7 @@
 import { Input, OnInit, Component, AfterViewInit, Output, EventEmitter, OnChanges } from '@angular/core';
 import { FormGroup, FormControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material';
-import { AutoCompleteConfiguration } from '../autocomplete/AutoCompleteConfiguration';
+import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
 
 @Component({
   selector: 'app-auto-complete',

dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html

@@ -1,40 +0,0 @@
-<!-- <div [formGroup]="form" class="autocomplete">
-	<table class="full-width">
-		<tr>
-			<td>
-				<mat-form-field class="autocomplete-input">
-					<input matInput type="text" placeholder="{{placeholder}}" [matAutocomplete]="auto" formControlName="text" [required]="required"
-					 [errorStateMatcher]="errorStateMatcher">
-					<mat-error *ngIf="form.get('value').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-					<mat-error *ngIf="validationErrorString">{{errorString}}</mat-error>
-					<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
-					<input matInput type="text" [matAutocomplete]="auto" hidden="hidden">
-				</mat-form-field>
-			</td>
-			<td *ngIf="createNew">
-				<button mat-raised-button type="button" color="primary" (click)="this.ClickFunctionCall()" tabindex="2">{{'GENERAL.AUTOCOMPLETE.CREATE-NEW' | translate}}</button>
-			</td>
-		</tr>
-
-	</table>
-	<mat-autocomplete #auto="matAutocomplete" (optionSelected)="this.optionSelected($event)">
-		<mat-option *ngFor="let option of options" [value]="option">
-			{{ option.text }} {{option.description?'['+option.description+']':''}}
-		</mat-option>
-	</mat-autocomplete>
-</div> -->
-
-<mat-form-field class="autocomplete-input">
-  <input matInput [matAutocomplete]="auto" [formControl]="control" placeholder="{{placeholder}}" [required]="required">
-  <mat-error *ngIf="control['errors'] && control['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-  <mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
-  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith.bind(this)" (optionSelected)="this.optionSelected($event)">
-    <mat-option *ngFor="let item of filteredItems " [value]="item">
-      <span *ngIf="titleKey">{{item[titleKey]}}</span>
-      <span *ngIf="subtitleKey">{{item[subtitleKey]}}</span>
-    </mat-option>
-    <!-- <mat-option *ngIf="filteredItems.length == 0" value="das">
-			<span>{{'GENERAL.AUTOCOMPLETE.NO-ITEMS' | translate}}</span>
-		</mat-option> -->
-  </mat-autocomplete>
-</mat-form-field>

dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.scss

@@ -1,30 +0,0 @@
-.autocomplete-input {
-	width: 100%;
-}
-
-.autocomplete-progress {
-	overflow: initial !important;
-}
-
-.autocomplete {
-	mat-form-field {
-		width: 100%;
-		padding: 3px;
-	}
-
-	.mat-card {
-		margin: 16px 0;
-	}
-
-	.left-button {
-		float: left;
-	}
-}
-
-.input-table {
-	table-layout: fixed;
-}
-
-.full-width {
-	width: 100%;
-}

dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.ts

@@ -1,172 +0,0 @@
-import { any } from 'codelyzer/util/function';
-import { FormControl, FormGroupDirective, NgForm, FormGroup, FormBuilder } from '@angular/forms';
-import { Observable } from 'rxjs/Rx';
-import { setTimeout } from 'timers';
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ElementRef } from '@angular/core';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/map';
-import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
-import { ErrorStateMatcher, MatInput } from '@angular/material';
-
-@Component({
-	selector: 'auto-complete',
-	templateUrl: './autocomplete.component.html',
-	styleUrls: ['./autocomplete.component.scss']
-})
-export class AutocompleteComponent implements OnInit {
-
-	@Input()
-	disabled = false;
-
-	@Input()
-	public configuration: AutoCompleteConfiguration;
-
-	@Input()
-	titleKey: String;
-
-	@Input()
-	subtitleKey: String;
-
-	@Input()
-	delay: number = 700;
-
-	@Input()
-	placeholder: String;
-
-	filteredItems: any[];
-
-	// @Input()
-	// validationErrorString: String;
-
-	// public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();
-
-	@Input()
-	required: boolean;
-
-	// @Input() selectedDropdownItem: AutoCompleteItem;
-	// @Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();
-
-	// @Output()
-	// output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();
-
-	@Input() control: FormControl;
-
-	// @Input() createNew = false;
-	// //term = new FormControl();
-	// @Input()
-	// ClickFunctionCall: Function;
-
-	loading = false;
-	hasSelectedItem = false;
-
-
-	constructor() {
-
-	}
-
-	ngOnInit() {
-
-		const valueChanges = this.control.valueChanges.share();
-		valueChanges.subscribe(searchTerm => {
-			if (this.hasSelectedItem) {
-				this.resetFormControlValue();
-			} else {
-				this.loading = true;
-			}
-		});
-		valueChanges
-			.debounceTime(this.delay)
-			.distinctUntilChanged()
-			.switchMap(val => {
-				if (this.hasSelectedItem) {
-					this.loading = false;
-					return [];
-				}
-
-				this.configuration.requestItem.criteria.like = this.control.value;
-				return this.configuration.callback(this.configuration.requestItem).map(result => {
-					this.filteredItems = (<any[]>result)
-					this.loading = false;
-				})
-			}).subscribe()
-
-		// this.filteredItems = this.inputField.nativeElement.valueChanges.startWith(null)
-		// 	.debounceTime(this.delay)
-		// 	.finally(() => this.loading = false)
-		// 	.distinctUntilChanged()
-		// 	.switchMap(val => {
-		// 		this.configuration.requestItem.criteria.like = val;
-		// 		return this.configuration.callback(this.configuration.requestItem)
-		// 	})
-		// const valueChanges = this.form.controls['text'].valueChanges.share();
-		// valueChanges.subscribe(searchTerm => {
-		// 	this.loading = true;
-		// 	if (this.form.controls['value'].value) {
-		// 		this.resetFormGroupValue();
-		// 	}
-		// });
-
-		// valueChanges
-		// 	.debounceTime(this.typeaheadMS)
-		// 	.subscribe(searchTerm => {
-		// 		if (typeof searchTerm === 'string') {
-		// 			this.inputOnChange(searchTerm)
-		// 		}
-		// 	});
-	}
-
-	resetFormControlValue() {
-		this.hasSelectedItem = false;
-		//this.control.setValue(null, { emitEvent: false });
-	}
-
-	// // listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
-	// // 	return (item as DropdownListingItem).toDropdownList();
-	// // }
-
-	optionSelected(event: any) {
-		this.hasSelectedItem = true;
-		this.control.setValue(event.option.value, { emitEvent: false });
-		this.filteredItems = [event.option.value];
-
-		//this.selectedDropdownItemChange.emit(event.option.value);
-		//this.form.updateValueAndValidity();
-		//this.options = [event.option.value];
-		//this.loading = false;
-	}
-
-	// inputOnChange(term: string) {
-	// 	//this.form.patchValue({ value: null, description: '', text: '' });
-	// 	//this.form.updateValueAndValidity();
-	// 	this.configuration.criteria.like = term;
-	// 	this.configuration.callback(this.configuration.criteria)
-	// 		.map((res: any) => this.mapper(res))
-	// 		.subscribe(
-	// 		(res: AutoCompleteItem[]) => {
-	// 			this.options = res;
-	// 		},
-	// 		null,
-	// 		() => { this.loading = false });
-	// }
-
-	displayWith(value: any): String {
-		if (!value) return '';
-		return value['' + this.titleKey];
-	}
-	// displayFn(item: AutoCompleteItem): string {
-	// 	return item.text ? item.text : '';
-	// }
-
-	//fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean {
-	//    return this.errorStateMatcher(control, form);
-	// }
-}
-
-export class AutoCompleteErrorStateMatcher implements ErrorStateMatcher {
-	isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-		const isFormSubmitted = form && form.submitted;
-		const isControlInvalid = control && control.invalid && (control.dirty || control.touched || isFormSubmitted);
-		const isFormInvalid = form && form.enabled && form.invalid && (form.dirty || form.touched || isFormSubmitted)
-		return !!(isControlInvalid || isFormInvalid);
-	}
-}

dmp-frontend/src/app/shared/components/autocompletes/multiple/multiple-auto-complete-configuration.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export interface MultipleAutoCompleteConfiguration {
+	// Delay for performing the request. Default: 200ms.
+	requestDelay?: number;
+	// Min characters for the filtering to be applied. Default: 3.
+	minFilteringChars?: number;
+	// Load and present items from start, without user query. Default: true.
+	loadDataOnStart?: boolean;
+	// Static or initial items.
+	initialItems?: (excludedItems: any[]) => Observable<any[]>;
+	// Data retrieval function
+	filterFn?: (searchQuery: string, excludedItems: any[]) => Observable<any[]>;
+	// Property formating for input
+	displayFn?: (item: any) => string;
+	// Property formating for dropdown
+	titleFn?: (item: any) => string;
+	// Property formating for dropdown
+	subtitleFn?: (item: any) => string;
+}

dmp-frontend/src/app/shared/components/autocompletes/multiple/multiple-auto-complete.component.html

@@ -0,0 +1,20 @@
+<mat-form-field class="multiple-auto-complete">
+	<mat-chip-list #chipList ngDefaultControl [disabled]="reactiveFormControl.disabled" [formControl]="reactiveFormControl">
+		<mat-chip *ngFor="let selectedItem of _chipItems()" [disabled]="reactiveFormControl.disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)">
+			{{this._displayFn(selectedItem)}}
+			<mat-icon matChipRemove *ngIf="!reactiveFormControl.disabled && removable">cancel</mat-icon>
+		</mat-chip>
+		<input matInput #textInput (focus)="_onInputFocus()" [placeholder]="placeholder" [formControl]="inputFormControl" [matAutocomplete]="auto" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="_addItem($event)" (click)="_onInputClick($event)"/>
+	</mat-chip-list>
+	<mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
+	<mat-error *ngIf="reactiveFormControl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+	<mat-error *ngIf="reactiveFormControl.hasError('invalidJson')">{{'GENERAL.VALIDATION.INVALID-JSON' | translate}}</mat-error>
+	<mat-progress-spinner matSuffix mode="indeterminate" [class.not-loading]="!loading" [diameter]="22"></mat-progress-spinner>
+	<mat-autocomplete #auto="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
+		<mat-option *ngFor="let item of _items | async" [value]="item" [class.two-line-mat-option]="_subtitleFn(item)">
+			<span>{{_titleFn(item)}}</span>
+			<br *ngIf="_subtitleFn(item)">
+			<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+		</mat-option>
+	</mat-autocomplete>
+</mat-form-field>

dmp-frontend/src/app/shared/components/autocompletes/multiple/multiple-auto-complete.component.scss

@@ -0,0 +1,14 @@
+.multiple-auto-complete {
+	width: 100%;
+	.mat-form-field {
+		padding: 0 3px;
+	}
+	.not-loading {
+		display: none;
+	}
+}
+
+.two-line-mat-option {
+	height: 3.5em;
+	line-height: 1.2em;
+}

dmp-frontend/src/app/shared/components/autocompletes/multiple/multiple-auto-complete.component.ts

@@ -0,0 +1,163 @@
+import { Input, OnInit, Component, Output, EventEmitter, ViewChild, ElementRef, QueryList, AfterViewInit } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm, FormArray, AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ErrorStateMatcher, MatChipInputEvent, MatAutocompleteSelectedEvent, MatChipList, MatAutocompleteTrigger } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject, Observable } from 'rxjs';
+import { map, startWith, merge, mapTo, mergeMap, timeout } from 'rxjs/operators';
+import { MultipleAutoCompleteConfiguration } from './multiple-auto-complete-configuration';
+import { ENTER } from '@angular/cdk/keycodes';
+import { COMMA } from '@angular/cdk/keycodes';
+
+@Component({
+	selector: 'app-multiple-auto-complete',
+	templateUrl: './multiple-auto-complete.component.html',
+	styleUrls: ['./multiple-auto-complete.component.scss']
+})
+export class MultipleAutoCompleteComponent implements OnInit {
+
+	@ViewChild('textInput') textInput: ElementRef;
+	@ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger;
+
+	@Input() reactiveFormControl: FormControl;
+	@Input() placeholder: string;
+	@Input() validationErrorString: string;
+	@Input() configuration: MultipleAutoCompleteConfiguration;
+
+	// Selected Option Event
+	@Output() optionSelected: EventEmitter<any> = new EventEmitter();
+
+	private requestDelay = 200; //ms
+	private minFilteringChars = 3;
+	private loadDataOnStart = true;
+
+	loading = false;
+	_items: Observable<any[]>;
+
+	visible = true;
+	selectable = true;
+	removable = true;
+	addOnBlur = false;
+	separatorKeysCodes = [ENTER, COMMA];
+	inputFormControl: FormControl;
+
+	constructor() {
+	}
+
+	ngOnInit() {
+		this.inputFormControl = new FormControl({ value: this.reactiveFormControl.value, disabled: this.reactiveFormControl.disabled });
+	}
+
+	filter(query: string): Observable<any[]> {
+		// If loadDataOnStart is enabled and query is empty we return the initial items.
+		if (this.isNullOrEmpty(query) && this.loadDataOnStart) {
+			return this.configuration.initialItems(this.reactiveFormControl.value || []) || Observable.of([]);
+		} else if (query && query.length >= this.minFilteringChars) {
+			if (this.configuration.filterFn) {
+				return this.configuration.filterFn(query, this.reactiveFormControl.value || []);
+			} else {
+				return this.configuration.initialItems(this.reactiveFormControl.value || []) || Observable.of([]);
+			}
+		} else {
+			return Observable.of([]);
+		}
+	}
+
+	isNullOrEmpty(query: string): boolean {
+		return typeof query !== 'string' || query === null || query.length === 0;
+	}
+
+	_displayFn(item: any): string {
+		if (this.configuration.displayFn && item) { return this.configuration.displayFn(item); }
+		return item;
+	}
+
+	_titleFn(item: any): string {
+		if (this.configuration.titleFn && item) { return this.configuration.titleFn(item); }
+		return item;
+	}
+
+	_subtitleFn(item: any): string {
+		if (this.configuration.subtitleFn && item) { return this.configuration.subtitleFn(item); }
+		return null;
+	}
+
+	_requestDelay(): number {
+		return this.configuration.requestDelay || this.requestDelay;
+	}
+
+	_minFilteringChars(): number {
+		return this.configuration.minFilteringChars || this.minFilteringChars;
+	}
+
+	_loadDataOnStart(): boolean {
+		return this.configuration.loadDataOnStart || this.loadDataOnStart;
+	}
+
+	_chipItems(): any[] {
+		return this.reactiveFormControl.value || [];
+	}
+
+	_optionSelected(event: MatAutocompleteSelectedEvent) {
+		const newValue = this.reactiveFormControl.value || [];
+		newValue.push(event.option.value);
+		this.reactiveFormControl.patchValue(newValue);
+		this.textInput.nativeElement.value = '';
+		this.inputFormControl.setValue(null);
+
+		this.optionSelected.emit(event.option.value);
+	}
+
+	_onInputFocus() {
+		// We set the items observable on focus to avoid the request being executed on component load.
+		if (!this._items) {
+			this._items = this.inputFormControl.valueChanges
+				.startWith(null)
+				.debounceTime(this.requestDelay)
+				.distinctUntilChanged()
+				.do(() => { this.loading = true; })
+				.flatMap(query => {
+					// If its a valid object, a selection just made and the object is set as the value of the form control. That means we should fire an extra request to the server.
+					if (this._isValidObject(query)) { return Observable.of([]); }
+					return this.filter(query);
+				})
+				.do(() => { this.loading = false; });
+		}
+	}
+
+	_isValidObject(value: any): boolean {
+		try {
+			if (!value) { return false; }
+			if (typeof value !== 'object') { JSON.parse(value); }
+		} catch (e) {
+			return false;
+		}
+		return true;
+	}
+
+	_removeSelectedItem(item: any): void {
+		const index = this.reactiveFormControl.value.indexOf(item);
+		if (index >= 0) {
+			this.reactiveFormControl.value.splice(index, 1);
+		}
+	}
+
+	_onInputClick(item: any) {
+		if (!this.autocomplete.panelOpen) {
+			this.autocomplete.openPanel();
+		}
+	}
+
+	_addItem(event: MatChipInputEvent): void {
+		// const input = event.input;
+		// const value = event.value;
+		// // Add our fruit
+		// if ((value || '').trim()) {
+		// 	this.selectedItems.push(value.trim());
+		// }
+		// // Reset the input value
+		// if (input) {
+		// 	input.value = '';
+		// }
+		// this.inputFormControl.setValue(null);
+	}
+}

dmp-frontend/src/app/shared/components/autocompletes/single/single-auto-complete-configuration.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export interface SingleAutoCompleteConfiguration {
+	// Delay for performing the request. Default: 200ms.
+	requestDelay?: number;
+	// Min characters for the filtering to be applied. Default: 3.
+	minFilteringChars?: number;
+	// Load and present items from start, without user query. Default: true.
+	loadDataOnStart?: boolean;
+	// Static or initial items.
+	items?: Observable<any[]>;
+	// Data retrieval function
+	filterFn?: (searchQuery: string) => Observable<any[]>;
+	// Property formating for input
+	displayFn?: (item: any) => string;
+	// Property formating for dropdown
+	titleFn?: (item: any) => string;
+	// Property formating for dropdown
+	subtitleFn?: (item: any) => string;
+}

dmp-frontend/src/app/shared/components/autocompletes/single/single-auto-complete.component.html

@@ -0,0 +1,15 @@
+<mat-form-field class="auto-complete">
+	<input matInput [placeholder]="placeholder" [matAutocomplete]="auto" [formControl]="reactiveFormControl" (focus)="_onInputFocus()">
+	<mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
+	<mat-error *ngIf="reactiveFormControl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+	<mat-error *ngIf="reactiveFormControl.hasError('invalidJson')">{{'GENERAL.VALIDATION.INVALID-JSON' | translate}}</mat-error>
+	<mat-progress-spinner matSuffix mode="indeterminate" [class.not-loading]="!loading" [diameter]="22"></mat-progress-spinner>
+	<mat-autocomplete #auto="matAutocomplete" [displayWith]="this._displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
+		<mat-option *ngFor="let item of _items | async" [value]="item" [class.two-line-mat-option]="_subtitleFn(item)">
+			<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
+			<span>{{_titleFn(item)}}</span>
+			<br *ngIf="_subtitleFn(item)">
+			<small *ngIf="_subtitleFn(item)">{{_subtitleFn(item)}}</small>
+		</mat-option>
+	</mat-autocomplete>
+</mat-form-field>

dmp-frontend/src/app/shared/components/autocompletes/single/single-auto-complete.component.scss

@@ -0,0 +1,17 @@
+.auto-complete {
+	width: 100%;
+	.mat-form-field {
+		padding: 0 3px;
+	}
+	.not-loading {
+		display: none;
+	}
+}
+.two-line-mat-option {
+	height: 3.5em;
+	line-height: 1.2em;
+}
+
+// .mat-tooltip.warn-tooltip {
+// 	background-color: mat-color($warn);
+// }

dmp-frontend/src/app/shared/components/autocompletes/single/single-auto-complete.component.ts

@@ -0,0 +1,120 @@
+import { Input, OnInit, Component, Output, EventEmitter, ViewChild, ElementRef, QueryList, AfterViewInit } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm, FormArray, AbstractControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ErrorStateMatcher, MatChipInputEvent, MatAutocompleteSelectedEvent, MatChipList } from '@angular/material';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject ,  Observable } from 'rxjs';
+import { map, startWith, merge, mapTo, mergeMap, timeout } from 'rxjs/operators';
+import { SingleAutoCompleteConfiguration } from './single-auto-complete-configuration';
+
+@Component({
+	selector: 'app-single-auto-complete',
+	templateUrl: './single-auto-complete.component.html',
+	styleUrls: ['./single-auto-complete.component.scss']
+})
+export class SingleAutoCompleteComponent implements OnInit {
+
+	@Input() reactiveFormControl: FormControl;
+	@Input() placeholder: string;
+	@Input() validationErrorString: string;
+
+	@Input() configuration: SingleAutoCompleteConfiguration;
+
+	// Selected Option Event
+	@Output() optionSelected: EventEmitter<any> = new EventEmitter();
+
+	private requestDelay = 200; //ms
+	private minFilteringChars = 3;
+	private loadDataOnStart = true;
+
+	// @Input() items: Observable<any[]>;
+	// @Input() filterFn?: (searchQuery: string) => Observable<any[]>;
+	// @Input() displayFn?: (item: any) => string;
+	// @Input() titleFn?: (item: any) => string;
+	// @Input() subtitleFn?: (item: any) => string;
+	loading = false;
+	_items: Observable<any[]>;
+
+	constructor() {
+	}
+
+	ngOnInit() {
+
+	}
+
+	filter(query: string): Observable<any[]> {
+		// If loadDataOnStart is enabled and query is empty we return the initial items.
+		if (this.isNullOrEmpty(query) && this.loadDataOnStart) {
+			return this.configuration.items || Observable.of([]);
+		} else if (query && query.length >= this.minFilteringChars) {
+			if (this.configuration.filterFn) {
+				return this.configuration.filterFn(query);
+			} else {
+				return this.configuration.items || Observable.of([]);
+			}
+		} else {
+			return Observable.of([]);
+		}
+	}
+
+	isNullOrEmpty(query: string): boolean {
+		return typeof query !== 'string' || query === null || query.length === 0;
+	}
+
+	_displayFn(item: any): string {
+		if (this.configuration.displayFn && item) { return this.configuration.displayFn(item); }
+		return item;
+	}
+
+	_titleFn(item: any): string {
+		if (this.configuration.titleFn && item) { return this.configuration.titleFn(item); }
+		return item;
+	}
+
+	_subtitleFn(item: any): string {
+		if (this.configuration.subtitleFn && item) { return this.configuration.subtitleFn(item); }
+		return null;
+	}
+
+	_requestDelay(): number {
+		return this.configuration.requestDelay || this.requestDelay;
+	}
+
+	_minFilteringChars(): number {
+		return this.configuration.minFilteringChars || this.minFilteringChars;
+	}
+
+	_loadDataOnStart(): boolean {
+		return this.configuration.loadDataOnStart || this.loadDataOnStart;
+	}
+
+	_optionSelected(event: MatAutocompleteSelectedEvent) {
+		this.optionSelected.emit(event.option.value);
+	}
+
+	_onInputFocus() {
+		// We set the items observable on focus to avoid the request being executed on component load.
+		if (!this._items) {
+			this._items = this.reactiveFormControl.valueChanges
+				.startWith(null)
+				.debounceTime(this.requestDelay)
+				.distinctUntilChanged()
+				.do(() => { this.loading = true; })
+				.flatMap(query => {
+					// If its a valid object, a selection just made and the object is set as the value of the form control. That means we should fire an extra request to the server.
+					if (this._isValidObject(query)) { return Observable.of([]); }
+					return this.filter(query);
+				})
+				.do(() => { this.loading = false; });
+		}
+	}
+
+	_isValidObject(value: any): boolean {
+		try {
+			if (!value) { return false; }
+			if (typeof value !== 'object') { JSON.parse(value); }
+		} catch (e) {
+			return false;
+		}
+		return true;
+	}
+}

dmp-frontend/src/app/shared/components/external-items/external-item-listing/external-item-listing.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, ContentChild, TemplateRef, ViewChild, Output, EventEmitter } from "@angular/core";
-import { AutoCompleteConfiguration } from "../../autocomplete/AutoCompleteConfiguration";
 import { FormGroup, FormControl, FormArray, AbstractControl } from "@angular/forms";
 import { ExternalSourcesUrlModel } from "../../../../models/external-sources/ExternalSourcesUrlModel";
+import { AutoCompleteConfiguration } from "../../auto-complete/AutoCompleteConfiguration";
 
 @Component({
   selector: 'app-external-item-listing',

dmp-frontend/src/app/shared/components/external-items/external-item/external-item.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
 import { Placeholder } from "@angular/compiler/src/i18n/i18n_ast";
-import { AutoCompleteConfiguration } from "../../autocomplete/AutoCompleteConfiguration";
 import { FormGroup, FormControl } from "@angular/forms";
+import { AutoCompleteConfiguration } from "../../auto-complete/AutoCompleteConfiguration";
 
 @Component({
   selector: 'app-external-item',

dmp-frontend/src/app/shared/shared.module.ts

@@ -1,6 +1,5 @@
 import { BaseCriteriaComponent } from './components/criteria/base/base-criteria.component';
 import { FigurecardComponent } from './components/figurecard/figurecard.component';
-import { AutocompleteComponent } from './components/autocomplete/autocomplete.component';
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
@@ -22,6 +21,8 @@ import { AutoCompleteComponent } from './components/auto-complete/auto-complete.
 import { ExternalItemListingComponent } from './components/external-items/external-item-listing/external-item-listing.component';
 import { ExternalItemComponent } from './components/external-items/external-item/external-item.component';
 import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
+import { SingleAutoCompleteComponent } from './components/autocompletes/single/single-auto-complete.component';
+import { MultipleAutoCompleteComponent } from './components/autocompletes/multiple/multiple-auto-complete.component';
 
 @NgModule({
   imports: [
@@ -41,7 +42,6 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen
     DatasetCriteriaComponent,
     DataManagementPlanCriteriaComponent,
     DataManagementPlanProfileCriteriaComponent,
-    AutocompleteComponent,
     FigurecardComponent,
     BaseCriteriaComponent,
     FileUploaderComponent,
@@ -50,8 +50,9 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen
     AutoCompleteComponent,
     ExternalItemListingComponent,
     ExternalItemComponent,
-    BreadcrumbComponent
+    BreadcrumbComponent,
-
+    SingleAutoCompleteComponent,
+    MultipleAutoCompleteComponent
   ],
 
   exports: [
@@ -64,7 +65,6 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen
     DatasetCriteriaComponent,
     DataManagementPlanProfileCriteriaComponent,
     DataManagementPlanCriteriaComponent,
-    AutocompleteComponent,
     FigurecardComponent,
     BaseCriteriaComponent,
     FileUploaderComponent,
@@ -73,7 +73,9 @@ import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.componen
     AutoCompleteComponent,
     ExternalItemListingComponent,
     ExternalItemComponent,
-    BreadcrumbComponent
+    BreadcrumbComponent,
+    SingleAutoCompleteComponent,
+    MultipleAutoCompleteComponent
   ],
   entryComponents: [
   ]

dmp-frontend/src/assets/lang/en.json

@@ -134,7 +134,7 @@
       "EDIT": "Edit"
     },
     "FIELDS": {
-      "LABEL": "Label",
+      "LABEL": "Title",
       "ABBREVIATION": "Abbreviation",
       "URI": "URL",
       "START": "Start",