[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
This commit is contained in:
parent
3c2cc0708b
commit
16b1903d3c
|
@ -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"
|
<div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center"
|
||||||
role="alert">{{errorMessage}}</div>
|
role="alert">{{errorMessage}}</div>
|
||||||
<div class="uk-margin-top" uk-grid [formGroup]="contactForm">
|
<div class="uk-margin-top" uk-grid [formGroup]="contactForm">
|
||||||
|
@ -23,9 +23,16 @@
|
||||||
<h5 class="uk-text-bold uk-margin-remove-bottom">
|
<h5 class="uk-text-bold uk-margin-remove-bottom">
|
||||||
Email <span class="uk-text-danger uk-text-bold">*</span>
|
Email <span class="uk-text-danger uk-text-bold">*</span>
|
||||||
</h5>
|
</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">
|
[class.uk-form-danger]="contactForm.get('email').invalid && contactForm.get('email').touched">
|
||||||
</div>
|
</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">
|
<div *ngIf="contactForm.get('affiliation')" class="uk-width-1-2@s uk-margin-small-top">
|
||||||
<h5 class="uk-text-bold uk-margin-remove-bottom">
|
<h5 class="uk-text-bold uk-margin-remove-bottom">
|
||||||
Affiliation <span class="uk-text-danger uk-text-bold">*</span>
|
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"
|
<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">
|
[class.uk-form-danger]="contactForm.get('community').invalid && contactForm.get('community').touched">
|
||||||
</div>
|
</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">
|
<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>
|
</div>
|
||||||
<input class="uk-input uk-width-1-1" type="text" placeholder="Your funder name" formControlName="stakeholder"
|
<input class="uk-input uk-width-1-1" type="text" placeholder="Your organization" formControlName="organization"
|
||||||
[class.uk-form-danger]="contactForm.get('stakeholder').invalid && contactForm.get('stakeholder').touched">
|
[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>
|
||||||
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1@s uk-margin-top">
|
<div *ngIf="contactForm.get('subject')" class="uk-width-1-1@s uk-margin-top">
|
||||||
<div class="uk-width-1-1">
|
<div class="uk-width-1-1">
|
||||||
|
|
|
@ -1,33 +1,49 @@
|
||||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||||
import {FormGroup} from '@angular/forms';
|
import {FormGroup} from '@angular/forms';
|
||||||
import {EnvProperties} from "../utils/properties/env-properties";
|
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({
|
@Component({
|
||||||
selector: 'contact-us',
|
selector: 'contact-us',
|
||||||
templateUrl: './contact-us.component.html',
|
templateUrl: './contact-us.component.html',
|
||||||
})
|
})
|
||||||
|
|
||||||
export class ContactUsComponent implements OnInit {
|
export class ContactUsComponent implements OnInit {
|
||||||
@Input()
|
@Input()
|
||||||
public contactForm: FormGroup;
|
public contactForm: FormGroup;
|
||||||
@Input() formTitle: string;
|
@Input() formTitle: string;
|
||||||
@Input() properties: EnvProperties;
|
@Input() properties: EnvProperties;
|
||||||
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
|
@Output() sendEmitter: EventEmitter<any> = new EventEmitter<any>();
|
||||||
@Input() errorMessage;
|
@Input() errorMessage;
|
||||||
|
@Input()
|
||||||
constructor() {
|
public organizationTypes: string[];
|
||||||
}
|
public autoCompleteTypes: Observable<string[]>;
|
||||||
|
|
||||||
ngOnInit() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
||||||
public send() {
|
ngOnInit() {
|
||||||
this.sendEmitter.emit({
|
this.autoCompleteTypes = this.contactForm.get('organizationType').valueChanges
|
||||||
valid: this.contactForm.valid
|
.pipe(
|
||||||
});
|
startWith(''),
|
||||||
}
|
map(value => this._filter(value))
|
||||||
|
);
|
||||||
public handleRecaptcha(captchaResponse: string) {
|
}
|
||||||
this.contactForm.get('recaptcha').setValue(captchaResponse);
|
|
||||||
}
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,11 +5,12 @@ import {RouterModule} from '@angular/router';
|
||||||
import {ContactUsComponent} from './contact-us.component';
|
import {ContactUsComponent} from './contact-us.component';
|
||||||
import {RecaptchaModule} from "ng-recaptcha";
|
import {RecaptchaModule} from "ng-recaptcha";
|
||||||
import {ReactiveFormsModule} from "@angular/forms";
|
import {ReactiveFormsModule} from "@angular/forms";
|
||||||
|
import {MatAutocompleteModule} from "@angular/material/autocomplete";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule, RouterModule,
|
CommonModule, RouterModule,
|
||||||
RecaptchaModule.forRoot(), ReactiveFormsModule],
|
RecaptchaModule.forRoot(), ReactiveFormsModule, MatAutocompleteModule],
|
||||||
declarations: [
|
declarations: [
|
||||||
ContactUsComponent
|
ContactUsComponent
|
||||||
],
|
],
|
||||||
|
|
|
@ -65,7 +65,7 @@ export class Composer {
|
||||||
return email;
|
return email;
|
||||||
}
|
}
|
||||||
|
|
||||||
public static composeEmailForNewStakeholder(contactForm: any, admins: any): Email {
|
public static composeEmailForMonitor(contactForm: any, admins: any): Email {
|
||||||
let email: Email = new Email();
|
let email: Email = new Email();
|
||||||
|
|
||||||
email.subject = "OpenAIRE Monitor | " + contactForm.subject;
|
email.subject = "OpenAIRE Monitor | " + contactForm.subject;
|
||||||
|
@ -73,8 +73,8 @@ export class Composer {
|
||||||
+ "<span><b>Name</b>: " + contactForm.name + "</span><br>"
|
+ "<span><b>Name</b>: " + contactForm.name + "</span><br>"
|
||||||
+ "<span><b>Surname</b>: " + contactForm.surname + "</span><br>"
|
+ "<span><b>Surname</b>: " + contactForm.surname + "</span><br>"
|
||||||
+ "<span><b>Email</b>: " + contactForm.email + "</span><br>"
|
+ "<span><b>Email</b>: " + contactForm.email + "</span><br>"
|
||||||
+ "<span><b>Affiliation</b>: " + contactForm.affiliation + "</span><br>"
|
+ "<span><b>Job Title</b>: " + contactForm.job + "</span><br>"
|
||||||
+ "<span><b>Stakeholder Name</b>: " + contactForm.stakeholder + "</span>"
|
+ "<span><b>Organization</b>: " + contactForm.organization + " (" + contactForm.organizationType + " )</span>"
|
||||||
+ "<p>" + contactForm.message + "</p>"
|
+ "<p>" + contactForm.message + "</p>"
|
||||||
+ "</div>";
|
+ "</div>";
|
||||||
email.recipients = admins;
|
email.recipients = admins;
|
||||||
|
|
Loading…
Reference in New Issue