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

2022-02-24 18:43:20 +02:00 · 2022-02-24 18:43:20 +02:00 · 9524ad1b88
parent 45ba9517e6
commit 9524ad1b88
10 changed files with 158 additions and 58 deletions
--- a/src/app/app.component.ts
+++ b/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) {
-        this.url = event.url;
-        let r = this.route;
-        while (r.firstChild) {
-          r = r.firstChild;
+      if (event instanceof NavigationEnd) {
+          this.url = event.url;
+          let r = this.route;
+          while (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('');
+  }
 }
--- a/src/app/app.module.ts
+++ b/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],
--- a/src/app/contact/contact.component.html
+++ b/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"
-                    [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>
--- a/src/app/contact/contact.component.ts
+++ b/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 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() {
--- a/src/app/contact/contact.module.ts
+++ b/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
--- a/src/app/home/home-routing.module.ts
+++ b/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] }

    ])
  ]
--- a/src/app/home/home.component.html
+++ b/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">
--- a/src/app/home/home.component.ts
+++ b/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();
    }
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@ -1 +1 @@
-Subproject commit 31e56588271d0ed3fc64990a35ac007e7aa4b2b3
+Subproject commit ada419f8e82836c19633544aeddcc7ca31a5699b
--- a/src/environments/environment.ts
+++ b/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/",