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

src/app/app.component.ts

@@ -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,23 +74,41 @@ 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) {
+      if (event instanceof NavigationEnd) {
-        this.url = event.url;
+          this.url = event.url;
-        let r = this.route;
+          let r = this.route;
-        while (r.firstChild) {
+          while (r.firstChild) {
-          r = r.firstChild;
+            r = r.firstChild;
+          }
+          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);
+          }
         }
-        let params = r.snapshot.params;
+        
-        this.params.next(params);
-      }
     }));
   }
   
@@ -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('');
+  }
 }

src/app/app.module.ts

@@ -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({
   
@@ -29,13 +30,14 @@ import {SharedModule} from "./openaireLibrary/shared/shared.module";
     ErrorModule,
     FormsModule,
     NavigationBarModule,
-		QuickContactModule,
+    QuickContactModule,
     BottomModule,
     CookieLawModule,
     BrowserTransferStateModule,
-    BrowserModule.withServerTransition({ appId: 'monitor' }),
+    BrowserModule.withServerTransition({appId: 'monitor'}),
     AppRoutingModule,
-    Schema2jsonldModule
+    Schema2jsonldModule,
+    AlertModalModule
   ],
   declarations: [AppComponent, OpenaireErrorPageComponent],
   exports: [AppComponent],

src/app/contact/contact.component.html

@@ -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"
+        <contact-us [organizationTypes]="organizationTypes" [sending]="sending"
-                    [properties]="properties" [errorMessage]="errorMessage"
                     [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()">
+<modal-alert #modal (alertOutput)="goToHome()">
-  <div class="uk-text-center">
+  <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>

src/app/contact/contact.component.ts

@@ -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 sending = true;
-    public errorMessage = '';
     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.sending = true;
-        this.subscriptions.push(this._emailService.contact(this.properties,
+        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.handleError('Email <b>sent failed!</b> Please try again.');
-                    this.contactForm.get('recaptcha').setValue('');
                 }
             },
             error => {
-                this.handleError('Email sent failed! Please try again.', error);
+                this.handleError('Email <b>sent failed!</b> Please try again.', error);
-                this.showLoading = false;
-                this.contactForm.get('recaptcha').setValue('');
             }
         ));
     }
@@ -152,10 +138,13 @@ export class ContactComponent implements OnInit {
         this.modal.open();
     }
 
-    handleError(message: string, error) {
+    handleError(message: string, error = null) {
-        this.errorMessage = message;
+        if(error) {
-        console.log('Server responded: ' + error);
+            console.error(error);
-        this.showLoading = false;
+        }
+        NotificationHandler.rise(message, 'danger');
+        this.sending = false;
+        this.contactForm.get('recaptcha').setValue('');
     }
 
     public goToHome() {

src/app/contact/contact.module.ts

@@ -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

src/app/home/home-routing.module.ts

@@ -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] }
 
     ])
   ]

src/app/home/home.component.html

@@ -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">

src/app/home/home.component.ts

@@ -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[] = [];
@@ -98,8 +99,25 @@ export class HomeComponent implements OnDestroy, AfterViewInit {
       this.getStakeholders();
     }));
   }
+  
+  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();
     }

src/app/openaireLibrary

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

src/environments/environment.ts

@@ -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/",