[Library | Trunk]: Add new contact fields for monitor contact

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58982 d315682c-612b-4755-9ff5-7f18f6832af3

contact-us/contact-us.component.html

@@ -1,4 +1,4 @@
-<h2 class="uk-margin-auto uk-text-bold">{{formTitle}}</h2>
+<h2 *ngIf="formTitle" class="uk-margin-auto uk-text-bold">{{formTitle}}</h2>
 <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
      role="alert">{{errorMessage}}</div>
 <div class="uk-margin-top" uk-grid [formGroup]="contactForm">
@@ -23,9 +23,16 @@
         <h5 class="uk-text-bold uk-margin-remove-bottom">
             Email <span class="uk-text-danger uk-text-bold">*</span>
         </h5>
-        <input class="uk-input" type="text" placeholder="Your email" formControlName="email"
+        <input class="uk-input" type="text" placeholder="Preferably your work email" formControlName="email"
                [class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
     </div>
+    <div *ngIf="contactForm.get('job')" class="uk-width-1-2@s uk-margin-small-top">
+        <h5 class="uk-text-bold uk-margin-remove-bottom">
+            Job Title <span class="uk-text-danger uk-text-bold">*</span>
+        </h5>
+        <input class="uk-input" type="text" placeholder="Your job title" formControlName="job"
+               [class.uk-form-danger]="contactForm.get('job').invalid && contactForm.get('job').touched">
+    </div>
     <div *ngIf="contactForm.get('affiliation')" class="uk-width-1-2@s uk-margin-small-top">
         <h5 class="uk-text-bold uk-margin-remove-bottom">
             Affiliation <span class="uk-text-danger uk-text-bold">*</span>
@@ -40,12 +47,25 @@
         <input class="uk-input uk-width-1" type="text" placeholder="Your community name" formControlName="community"
                [class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
     </div>
-    <div *ngIf="contactForm.get('stakeholder')" class="uk-width-1-2@s uk-margin-top">
+    <div *ngIf="contactForm.get('organization')" class="uk-width-1-2@s uk-margin-top">
         <div class="uk-width-1-1">
-            <h5 class="uk-text-bold uk-margin-remove-bottom">Stakeholder Name<span class="uk-text-danger uk-text-bold">*</span></h5>
+            <h5 class="uk-text-bold uk-margin-remove-bottom">Organization<span class="uk-text-danger uk-text-bold">*</span></h5>
         </div>
-        <input class="uk-input uk-width-1-1" type="text" placeholder="Your funder name" formControlName="stakeholder"
-               [class.uk-form-danger]="contactForm.get('stakeholder').invalid && contactForm.get('stakeholder').touched">
+        <input class="uk-input uk-width-1-1" type="text" placeholder="Your organization" formControlName="organization"
+               [class.uk-form-danger]="contactForm.get('organization').invalid && contactForm.get('organization').touched">
+    </div>
+    <div *ngIf="contactForm.get('organizationType')" class="uk-width-1-2@s uk-margin-top">
+        <div class="uk-width-1-1">
+            <h5 class="uk-text-bold uk-margin-remove-bottom">Organization Type<span class="uk-text-danger uk-text-bold">*</span></h5>
+        </div>
+        <input type="text" class="uk-input uk-width-1-1" placeholder="Your Organization Type" formControlName="organizationType"
+               [class.uk-form-danger]="contactForm.get('organizationType').invalid && contactForm.get('organizationType').touched"
+               [matAutocomplete]="auto">
+        <mat-autocomplete #auto="matAutocomplete">
+            <mat-option *ngFor="let option of autoCompleteTypes | async" [value]="option">
+                {{option}}
+            </mat-option>
+        </mat-autocomplete>
     </div>
     <div *ngIf="contactForm.get('subject')" class="uk-width-1-1@s uk-margin-top">
         <div class="uk-width-1-1">

contact-us/contact-us.component.ts

@@ -1,33 +1,49 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FormGroup} from '@angular/forms';
 import {EnvProperties} from "../utils/properties/env-properties";
+import {Option} from "../dashboard/sharedComponents/input/input.component";
+import {Observable} from "rxjs";
+import {map, startWith} from "rxjs/operators";
 
 @Component({
-    selector: 'contact-us',
-    templateUrl: './contact-us.component.html',
+  selector: 'contact-us',
+  templateUrl: './contact-us.component.html',
 })
 
 export class ContactUsComponent implements OnInit {
-    @Input()
-    public contactForm: FormGroup;
-    @Input() formTitle: string;
-    @Input() properties: EnvProperties;
-    @Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
-    @Input() errorMessage;
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
-
-    public send() {
-        this.sendEmitter.emit({
-            valid: this.contactForm.valid
-        });
-    }
-
-    public handleRecaptcha(captchaResponse: string) {
-        this.contactForm.get('recaptcha').setValue(captchaResponse);
-    }
+  @Input()
+  public contactForm: FormGroup;
+  @Input() formTitle: string;
+  @Input() properties: EnvProperties;
+  @Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
+  @Input() errorMessage;
+  @Input()
+  public organizationTypes: string[];
+  public autoCompleteTypes: Observable<string[]>;
+  
+  constructor() {
+  }
+  
+  ngOnInit() {
+    this.autoCompleteTypes = this.contactForm.get('organizationType').valueChanges
+      .pipe(
+        startWith(''),
+        map(value => this._filter(value))
+      );
+  }
+  
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+    return this.organizationTypes.filter(option => option.toLowerCase().includes(filterValue));
+  }
+  
+  public send() {
+    this.sendEmitter.emit({
+      valid: this.contactForm.valid
+    });
+  }
+  
+  public handleRecaptcha(captchaResponse: string) {
+    this.contactForm.get('recaptcha').setValue(captchaResponse);
+  }
 }

contact-us/contact-us.module.ts

@@ -5,11 +5,12 @@ import {RouterModule} from '@angular/router';
 import {ContactUsComponent} from './contact-us.component';
 import {RecaptchaModule} from "ng-recaptcha";
 import {ReactiveFormsModule} from "@angular/forms";
+import {MatAutocompleteModule} from "@angular/material/autocomplete";
 
 @NgModule({
-    imports: [
-        CommonModule, RouterModule,
-        RecaptchaModule.forRoot(), ReactiveFormsModule],
+  imports: [
+    CommonModule, RouterModule,
+    RecaptchaModule.forRoot(), ReactiveFormsModule, MatAutocompleteModule],
     declarations: [
         ContactUsComponent
     ],

utils/email/composer.ts

@@ -65,7 +65,7 @@ export class Composer {
     return email;
   }
   
-  public static composeEmailForNewStakeholder(contactForm: any, admins: any): Email {
+  public static composeEmailForMonitor(contactForm: any, admins: any): Email {
     let email: Email = new Email();
     
     email.subject = "OpenAIRE Monitor | " + contactForm.subject;
@@ -73,8 +73,8 @@ export class Composer {
       + "<span><b>Name</b>: " + contactForm.name + "</span><br>"
       + "<span><b>Surname</b>: " + contactForm.surname + "</span><br>"
       + "<span><b>Email</b>: " + contactForm.email + "</span><br>"
-      + "<span><b>Affiliation</b>: " + contactForm.affiliation + "</span><br>"
-      + "<span><b>Stakeholder Name</b>: " + contactForm.stakeholder + "</span>"
+      + "<span><b>Job Title</b>: " + contactForm.job + "</span><br>"
+      + "<span><b>Organization</b>: " + contactForm.organization + " (" + contactForm.organizationType + " )</span>"
       + "<p>" + contactForm.message + "</p>"
       + "</div>";
     email.recipients = admins;