feature(Edam):added edam ontology selection

package.json

@@ -45,6 +45,7 @@
     "@angular/upgrade": "^7.2.10",
     "@coreui/angular": "^2.4.5",
     "@coreui/coreui": "^2.1.8",
+    "angular-ng-autocomplete": "^1.1.14",
     "angulartics2": "^7.5.1",
     "bootstrap": "^4.3.1",
     "chart.js": "2.8.0",

src/app/api-connector/applications.service.ts

@@ -3,12 +3,13 @@ import {ApiSettings} from './api-settings.service'
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {Cookie} from 'ng2-cookies/ng2-cookies';
+import {EdamOntologyTerm} from '../applications/edam-ontology-term';
 
 const header: HttpHeaders = new HttpHeaders({
-  'X-CSRFToken': Cookie.get('csrftoken'),
-  'Content-Type': 'application/json'
+                                              'X-CSRFToken': Cookie.get('csrftoken'),
+                                              'Content-Type': 'application/json'
 
-});
+                                            });
 
 /**
  * Service which provides methods for creating application.
@@ -35,7 +36,7 @@ export class ApplicationsService {
 
   validateApplicationAsPIByHash(hash: string): Observable<any> {
 
-    return this.http.post(`${ApiSettings.getApiBaseURL()}project_applications/validation/${hash}/`, null,{
+    return this.http.post(`${ApiSettings.getApiBaseURL()}project_applications/validation/${hash}/`, null, {
       headers: header,
       withCredentials: true
     })
@@ -62,6 +63,13 @@ export class ApplicationsService {
     })
   }
 
+  getEdamOntologyTerms(): Observable<EdamOntologyTerm[]> {
+    return this.http.get<EdamOntologyTerm[]>(`${ApiSettings.getApiBaseURL()}edam_ontology/`, {
+      headers: header,
+      withCredentials: true
+    })
+  }
+
   /**
    * Checks if some client has the ressource avaiable for an application.
    * @param {string} app_id

src/app/applications/addcloudapplication.component.html

@@ -292,7 +292,9 @@ <h5 class="col-md-12 form-control-label">Resources*
               <label class="col-md-4"></label>
               <div class="col-md-8">
                 <div class="alert alert-primary" role="alert">
-                  In case you need additional and/or special resources, which are not available in the flavour selection, use the comment field to state so. The same applies to unusually large amounts of resources.
+                  In case you need additional and/or special resources, which are not available in the flavour
+                  selection, use the comment field to state so. The same applies to unusually large amounts of
+                  resources.
                 </div>
               </div>
             </div>
@@ -341,6 +343,43 @@ <h5 class="col-md-6 form-control-label">Institutional Information</h5>
             <div class="form-group row">
               <h5 class="col-md-6 form-control-label">Additional Information</h5>
             </div>
+            <div class="form-group row">
+              <label class="col-md-4 form-control-label" for="text-input"><strong>EDAM ontology
+                Terms </strong></label>
+              <div class="col-md-8">
+                <div class="ng-autocomplete">
+                  <ng-autocomplete #edam_ontology
+                                   [data]="edam_ontology_terms"
+                                   [searchKeyword]="ontology_search_keyword"
+                                   (selected)='selectEvent($event)'
+                                   (inputChanged)='onChangeSearch($event)'
+                                   (inputFocused)='onFocused($event)'
+                                   placeHolder="Add your EDAM ontology terms"
+
+                                   [itemTemplate]="itemTemplate"
+                                   [notFoundTemplate]="notFoundTemplate">
+                  </ng-autocomplete>
+
+                  <ng-template #itemTemplate let-item>
+                    <a [innerHTML]="item.term"></a>
+                  </ng-template>
+
+                  <ng-template #notFoundTemplate let-notFound>
+                    <div [innerHTML]="notFound"></div>
+                  </ng-template>
+                </div>
+                <div>
+                  <h5><span *ngFor="let term of selected_ontology_terms"
+                            style="margin-left: 5px; "
+                            class="badge badge-info">{{term.term}}
+                    <span class="badge" style="cursor: pointer;" (click)="removeEDAMterm(term)">&#10060;</span>
+ </span>
+
+                  </h5>
+                </div>
+              </div>
+
+            </div>
             <div class="form-group row">
               <label class="col-md-4 form-control-label" for="text-input"><strong>Horizon
                 2020</strong></label>

src/app/applications/addcloudapplication.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {NgForm} from '@angular/forms';
 import {ApiSettings} from '../api-connector/api-settings.service'
 import {ApplicationsService} from '../api-connector/applications.service'
@@ -7,6 +7,8 @@ import {Flavor} from '../virtualmachines/virtualmachinemodels/flavor';
 import {FlavorType} from '../virtualmachines/virtualmachinemodels/flavorType';
 import {environment} from '../../environments/environment';
 import {ApplicationBaseClass} from 'app/shared/shared_modules/baseClass/application-base-class';
+import {EdamOntologyTerm} from './edam-ontology-term';
+import {AutocompleteComponent} from 'angular-ng-autocomplete';
 
 /**
  * This components provides the functions to create a new Cloud Application.
@@ -26,11 +28,19 @@ export class AddcloudapplicationComponent extends ApplicationBaseClass implement
    */
   public production: boolean = environment.production;
 
+  public edam_ontology_terms: EdamOntologyTerm[];
+
+  @ViewChild('edam_ontology') edam_ontology: AutocompleteComponent;
+
   /**
    * List of all collapse booleans.
    */
   public collapseList: boolean[];
 
+  ontology_search_keyword: string = 'term';
+
+  selected_ontology_terms: EdamOntologyTerm[] = [];
+
   /**
    * Contains errors recieved when submitting an application.
    */
@@ -72,6 +82,9 @@ export class AddcloudapplicationComponent extends ApplicationBaseClass implement
   ngOnInit(): void {
     this.getListOfFlavors();
     this.getListOfTypes();
+    this.applicationsservice.getEdamOntologyTerms().subscribe((terms: EdamOntologyTerm[]) => {
+      this.edam_ontology_terms = terms;
+    })
   }
 
   /**
@@ -106,6 +119,28 @@ export class AddcloudapplicationComponent extends ApplicationBaseClass implement
     this.flavorservice.getListOfFlavorsAvailable().subscribe((flavors: Flavor[]) => this.flavorList = flavors);
   }
 
+  removeEDAMterm(term: EdamOntologyTerm): void {
+    const indexOf: number = this.selected_ontology_terms.indexOf(term);
+    this.selected_ontology_terms.splice(indexOf, 1);
+
+  }
+
+  selectEvent(item) {
+    if (this.selected_ontology_terms.indexOf(item) === -1) {
+      this.selected_ontology_terms.push(item);
+    }
+    this.edam_ontology.clear();
+  }
+
+  onChangeSearch(val: string) {
+    // fetch remote data from here
+    // And reassign the 'data' which is binded to 'data' property.
+  }
+
+  onFocused(e) {
+    // do something when input is focused
+  }
+
   /**
    * Submits a new cloud application.
    * Therefore checks if the different values are valid.

src/app/applications/applications.module.ts

@@ -10,39 +10,43 @@ import {ModalModule} from 'ngx-bootstrap/modal';
 import {AddsimplevmComponent} from './addsimplevm.component';
 import {AddcloudapplicationComponent} from './addcloudapplication.component';
 import {ClickOutsideModule} from 'ng4-click-outside';
-import { MinAmoutValidatorDirective, MaxAmoutValidatorDirective, IntegerValidatorDirective, IntegerOrNullValidatorDirective } from './numberValidations.directive';
-import {ApplicationBaseClass} from "../shared/shared_modules/baseClass/application-base-class";
-import {SharedModuleModule} from "../shared/shared_modules/shared-module.module";
-import { TypeOverviewComponent } from './type-overview.component';
+import {
+  MinAmoutValidatorDirective,
+  MaxAmoutValidatorDirective,
+  IntegerValidatorDirective,
+  IntegerOrNullValidatorDirective
+} from './numberValidations.directive';
+import {TypeOverviewComponent} from './type-overview.component';
 import {AppSidebarModule} from '@coreui/angular';
 import {ValidationApplicationComponent} from '../validation-application/validation-application.component';
+import {AutocompleteLibModule} from 'angular-ng-autocomplete';
 
 /**
  * Applications Module.
  */
 @NgModule({
-    imports: [
-        AccordionModule.forRoot(),
-        ApplicationsRoutingModule,
-        ClickOutsideModule,
-        TabsModule,
-        CommonModule,
-        FormsModule,
-        ModalModule.forRoot(),
-        AppSidebarModule,
-        //SharedModuleModule
-    ],
-    declarations: [
-        ApplicationsComponent,
-        AddsimplevmComponent,
-        AddcloudapplicationComponent,
-        MinAmoutValidatorDirective,
-        MaxAmoutValidatorDirective,
-        IntegerValidatorDirective,
-        IntegerOrNullValidatorDirective,
-        TypeOverviewComponent,
-      ValidationApplicationComponent
-    ]
-})
+            imports: [
+              AccordionModule.forRoot(),
+              ApplicationsRoutingModule,
+              ClickOutsideModule,
+              TabsModule,
+              CommonModule,
+              FormsModule,
+              ModalModule.forRoot(),
+              AppSidebarModule,
+              AutocompleteLibModule
+            ],
+            declarations: [
+              ApplicationsComponent,
+              AddsimplevmComponent,
+              AddcloudapplicationComponent,
+              MinAmoutValidatorDirective,
+              MaxAmoutValidatorDirective,
+              IntegerValidatorDirective,
+              IntegerOrNullValidatorDirective,
+              TypeOverviewComponent,
+              ValidationApplicationComponent
+            ]
+          })
 export class ApplicationsModule {
 }

src/app/applications/edam-ontology-term.spec.ts

@@ -0,0 +1,7 @@
+import { EdamOntologyTerm } from './edam-ontology-term';
+
+describe('EdamOntologyTerm', () => {
+  it('should create an instance', () => {
+    expect(new EdamOntologyTerm()).toBeTruthy();
+  });
+});

src/app/applications/edam-ontology-term.ts

@@ -0,0 +1,56 @@
+export class EdamOntologyTerm {
+
+  private _storid: number;
+  private _name: string;
+  private _term: string;
+  private _uri: string;
+  private _is_a: number[];
+
+  constructor(storid: number, name: string, term: string, uri: string, is_a: number[]) {
+    this._storid = storid;
+    this._name = name;
+    this._term = term;
+    this._uri = uri;
+    this._is_a = is_a;
+  }
+
+  get storid(): number {
+    return this._storid;
+  }
+
+  set storid(value: number) {
+    this._storid = value;
+  }
+
+  get name(): string {
+    return this._name;
+  }
+
+  set name(value: string) {
+    this._name = value;
+  }
+
+  get term(): string {
+    return this._term;
+  }
+
+  set term(value: string) {
+    this._term = value;
+  }
+
+  get uri(): string {
+    return this._uri;
+  }
+
+  set uri(value: string) {
+    this._uri = value;
+  }
+
+  get is_a(): number[] {
+    return this._is_a;
+  }
+
+  set is_a(value: number[]) {
+    this._is_a = value;
+  }
+}