MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

Fix show quick contact behaviour. Add contact methods in app component

This commit is contained in:
Konstantinos Triantafyllou 2022-02-24 18:43:20 +02:00
parent 45ba9517e6
commit 9524ad1b88
10 changed files with 158 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/app.component.ts
View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core';
import {Component, ViewChild} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router';
import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
@ -12,6 +12,14 @@ import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {QuickContactService} from './openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {Composer} from "./openaireLibrary/utils/email/composer";
import {NotificationHandler} from "./openaireLibrary/utils/notification-handler";
import {EmailService} from "./openaireLibrary/utils/email/email.service";
import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
import {QuickContactComponent} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.component";
import {AlertModal} from "./openaireLibrary/utils/modal/alert";
@Component({
selector: 'app-root',
@ -44,7 +52,13 @@ import {QuickContactService} from './openaireLibrary/sharedComponents/quick-cont
</cookie-law>
<bottom *ngIf="properties && showMenu" [grantAdvance]="false"
[properties]="properties"></bottom>
<quick-contact *ngIf="showQuickContact"></quick-contact>
<quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending" [organizationTypes]="organizationTypes"></quick-contact>
<modal-alert #modal>
<div class="uk-padding-small uk-padding-remove-horizontal">
Our team will respond to your submission soon.
</div>
</modal-alert>
</div>
`
@ -60,13 +74,25 @@ export class AppComponent {
url: string;
header: Header;
logoPath: string = 'assets/common-assets/';
/* Contact */
public showQuickContact: boolean;
public contactForm: FormGroup;
public organizationTypes: string[] = [
'Funding agency', 'University / Research Center',
'Research Infrastructure', 'Government',
'Non-profit', 'Industry', 'Other'
];
public sending = false;
@ViewChild('modal') modal: AlertModal;
@ViewChild('quickContact') quickContact: QuickContactComponent;
private subscriptions: any[] = [];
constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
private router: Router, private stakeholderService: StakeholderService, private smoothScroll: SmoothScroll,
private userManagementService: UserManagementService,
private quickContactService: QuickContactService) {
private quickContactService: QuickContactService,
private fb: FormBuilder,
private emailService: EmailService) {
this.subscriptions.push(router.events.forEach((event) => {
if (event instanceof NavigationEnd) {
this.url = event.url;
@ -76,7 +102,13 @@ export class AppComponent {
}
let params = r.snapshot.params;
this.params.next(params);
if(event.url === '/contact-us') {
this.quickContactService.setDisplay(false);
} else if(event.url !== '/contact-us' && !this.showQuickContact) {
this.quickContactService.setDisplay(true);
}
}
}));
}
@ -95,6 +127,7 @@ export class AppComponent {
badge:true
};
this.buildMenu();
this.reset();
}));
this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
this.showQuickContact = display;
@ -146,4 +179,66 @@ export class AppComponent {
this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
}
}
public send(event) {
if(event.valid === true) {
this.sendMail(this.properties.admins);
}
}
public reset() {
if(this.quickContact) {
this.quickContact.close();
}
this.contactForm = this.fb.group( {
name: this.fb.control('', Validators.required),
surname: this.fb.control('', Validators.required),
email: this.fb.control('', [Validators.required, Validators.email]),
job: this.fb.control('', Validators.required),
organization: this.fb.control('', Validators.required),
organizationType: this.fb.control('', [Validators.required, StringUtils.validatorType(this.organizationTypes)]),
message: this.fb.control('', Validators.required),
recaptcha: this.fb.control('', Validators.required),
});
}
private sendMail(admins: string[]) {
this.sending = true;
this.subscriptions.push(this.emailService.contact(this.properties,
Composer.composeEmailForMonitor(this.contactForm.value, admins),
this.contactForm.value.recaptcha).subscribe(
res => {
if (res) {
this.sending = false;
this.reset();
this.modalOpen();
} else {
this.handleError('Email <b>sent failed!</b> Please try again.');
}
},
error => {
this.handleError('Email <b>sent failed!</b> Please try again.', error);
}
));
}
public modalOpen() {
this.modal.okButton = true;
this.modal.alertTitle = 'Your request has been successfully submitted';
this.modal.alertMessage = false;
this.modal.cancelButton = false;
this.modal.okButtonLeft = false;
this.modal.okButtonText = 'OK';
this.modal.open();
}
handleError(message: string, error = null) {
if(error) {
console.error(error);
}
this.sending = false;
this.quickContact.close();
NotificationHandler.rise(message, 'danger');
this.contactForm.get('recaptcha').setValue('');
}
}

4
src/app/app.module.ts
View File

@ -18,6 +18,7 @@ import {Schema2jsonldModule} from "./openaireLibrary/sharedComponents/schema2jso
import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";
import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.service";
import {SharedModule} from "./openaireLibrary/shared/shared.module";
import {AlertModalModule} from "./openaireLibrary/utils/modal/alertModal.module";
@NgModule({
@ -35,7 +36,8 @@ import {SharedModule} from "./openaireLibrary/shared/shared.module";
BrowserTransferStateModule,
BrowserModule.withServerTransition({appId: 'monitor'}),
AppRoutingModule,
Schema2jsonldModule
Schema2jsonldModule,
AlertModalModule
],
declarations: [AppComponent, OpenaireErrorPageComponent],
exports: [AppComponent],

10
src/app/contact/contact.component.html
View File

@ -8,8 +8,7 @@
<div class="uk-section uk-padding-remove-top uk-container uk-container-large">
<div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
<div class="uk-position-relative">
<contact-us *ngIf="!showLoading" [organizationTypes]="organizationTypes"
[properties]="properties" [errorMessage]="errorMessage"
<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
[contactForm]="contactForm" (sendEmitter)="send($event)">
<h1 page-title class="uk-margin-auto">
Contact us<span class="uk-text-primary">.</span>
@ -20,15 +19,12 @@
can help your organization in your open science needs.
</div>
</contact-us>
<div *ngIf="showLoading" class="uk-position-center uk-margin-medium-top">
<loading></loading>
</div>
</div>
</div>
</div>
</div>
<modal-alert #AlertModal (alertOutput)="goToHome()">
<div class="uk-text-center">
<modal-alert #modal (alertOutput)="goToHome()">
<div class="uk-padding-small uk-padding-remove-horizontal">
Our team will respond to your submission soon.<br>
Press OK to redirect to OpenAIRE Monitor home page.
</div>

49
src/app/contact/contact.component.ts
View File

@ -13,6 +13,8 @@ import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "
import {Subscriber} from "rxjs";
import {properties} from "../../environments/environment";
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
import {NotificationHandler} from "../openaireLibrary/utils/notification-handler";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
@Component({
selector: 'contact',
@ -24,8 +26,7 @@ export class ContactComponent implements OnInit {
public pageTitle: string = "OpenAIRE - Monitor | Contact Us";
public description: string = "OpenAIRE - Monitor . Any Questions? Contact us to learn more";
public piwiksub: any;
public showLoading = true;
public errorMessage = '';
public sending = true;
public email: Email;
public properties: EnvProperties = null;
public pageContents = null;
@ -37,11 +38,11 @@ export class ContactComponent implements OnInit {
'Non-profit', 'Industry', 'Other'
];
public contactForm: FormGroup;
@ViewChild('AlertModal') modal;
@ViewChild('modal') modal;
constructor(private route: ActivatedRoute,
private _router: Router,
private _emailService: EmailService,
private emailService: EmailService,
private _meta: Meta,
private _title: Title,
private seoService: SEOService,
@ -71,7 +72,7 @@ export class ContactComponent implements OnInit {
this.reset();
//this.getDivContents();
// this.getPageContents();
this.showLoading = false;
this.sending = false;
}
@ -91,17 +92,6 @@ export class ContactComponent implements OnInit {
HelperFunctions.scroll();
if(event.valid === true) {
this.sendMail(this.properties.admins);
} else {
this.errorMessage = 'Please fill in all the required fields!';
}
}
private validatorType(options: string[]): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (options.filter(type => type === control.value).length === 0) {
return {'type': false};
}
return null;
}
}
@ -112,32 +102,28 @@ export class ContactComponent implements OnInit {
email: this.fb.control('', [Validators.required, Validators.email]),
job: this.fb.control('', Validators.required),
organization: this.fb.control('', Validators.required),
organizationType: this.fb.control('', [Validators.required, this.validatorType(this.organizationTypes)]),
organizationType: this.fb.control('', [Validators.required, StringUtils.validatorType(this.organizationTypes)]),
message: this.fb.control('', Validators.required),
recaptcha: this.fb.control('', Validators.required),
});
this.errorMessage = '';
}
private sendMail(admins: any) {
this.showLoading = true;
this.subscriptions.push(this._emailService.contact(this.properties,
this.sending = true;
this.subscriptions.push(this.emailService.contact(this.properties,
Composer.composeEmailForMonitor(this.contactForm.value, admins),
this.contactForm.value.recaptcha).subscribe(
res => {
this.showLoading = false;
if (res) {
this.sending = false;
this.reset();
this.modalOpen();
} else {
this.errorMessage = 'Email sent failed! Please try again.';
this.contactForm.get('recaptcha').setValue('');
this.handleError('Email <b>sent failed!</b> Please try again.');
}
},
error => {
this.handleError('Email sent failed! Please try again.', error);
this.showLoading = false;
this.contactForm.get('recaptcha').setValue('');
this.handleError('Email <b>sent failed!</b> Please try again.', error);
}
));
}
@ -152,10 +138,13 @@ export class ContactComponent implements OnInit {
this.modal.open();
}
handleError(message: string, error) {
this.errorMessage = message;
console.log('Server responded: ' + error);
this.showLoading = false;
handleError(message: string, error = null) {
if(error) {
console.error(error);
}
NotificationHandler.rise(message, 'danger');
this.sending = false;
this.contactForm.get('recaptcha').setValue('');
}
public goToHome() {

3
src/app/contact/contact.module.ts
View File

@ -14,14 +14,13 @@ import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2js
import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module";
import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
@NgModule({
imports: [
ContactRoutingModule, CommonModule, RouterModule,
AlertModalModule, RecaptchaModule, HelperModule,
Schema2jsonldModule, SEOServiceModule, ContactUsModule, BreadcrumbsModule, LoadingModule
Schema2jsonldModule, SEOServiceModule, ContactUsModule, BreadcrumbsModule
],
declarations: [
ContactComponent

3
src/app/home/home-routing.module.ts
View File

@ -4,11 +4,12 @@ import { RouterModule } from '@angular/router';
import{HomeComponent} from './home.component';
import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {CanExitGuard} from "../openaireLibrary/utils/can-exit.guard";
@NgModule({
imports: [
RouterModule.forChild([
{ path: '', component: HomeComponent, canDeactivate: [PreviousRouteRecorder] }
{ path: '', component: HomeComponent, canDeactivate: [PreviousRouteRecorder, CanExitGuard] }
])
]

2
src/app/home/home.component.html
View File

@ -14,7 +14,7 @@
</div>
</div>
</div>
<section-scroll [customClass]="'uk-section uk-section-primary uk-padding-remove-bottom'"
<section-scroll [customClass]="'uk-section uk-section-primary'"
[childrenCustomClass]="'uk-container uk-container-large'">
<div top class="uk-width-1-1">
<div class="top-content uk-container uk-container-large">

20
src/app/home/home.component.ts
View File

@ -19,13 +19,14 @@ import {UserManagementService} from "../openaireLibrary/services/user-management
import {properties} from "../../environments/environment";
import {Subscriber} from "rxjs";
import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
import {CanExitGuard, IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard";
@Component({
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})
export class HomeComponent implements OnDestroy, AfterViewInit {
export class HomeComponent implements OnDestroy, AfterViewInit, IDeactivateComponent {
public pageTitle = "OpenAIRE | Monitor";
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators.";
public stakeholders: StakeholderInfo[] = [];
@ -99,7 +100,24 @@ export class HomeComponent implements OnDestroy, AfterViewInit {
}));
}
canExit(): boolean {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
}
});
if (this.observer) {
this.observer.disconnect();
}
return true;
}
OnDestroy() {
this.subscriptions.forEach(value => {
if (value instanceof Subscriber) {
value.unsubscribe();
}
});
if (this.observer) {
this.observer.disconnect();
}

2
src/app/openaireLibrary

@ -1 +1 @@
Subproject commit 31e56588271d0ed3fc64990a35ac007e7aa4b2b3
Subproject commit ada419f8e82836c19633544aeddcc7ca31a5699b

2
src/environments/environment.ts
View File

@ -90,7 +90,7 @@ export let properties: EnvProperties = {
depositSearchPage: "/participate/deposit/search",
shareInZenodoPage: "/participate/deposit/zenodo",
reCaptchaSiteKey: "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
admins: ["kostis30fylloy@gmail.com", "argirok@di.uoa.gr"],
admins: ["kostis30fylloy@gmail.com"],
lastIndexUpdate: "2019-05-16",
indexInfoAPI: "https://beta.services.openaire.eu/openaire/info/",
altMetricsAPIURL: "https://api.altmetric.com/v1/doi/",