From 9a694e167be3ba601f6d6fa774e3d00a64aa510b Mon Sep 17 00:00:00 2001
From: apapachristou
Date: Mon, 11 Nov 2019 12:42:55 +0200
Subject: [PATCH] Creates /contact-support. (Issue #202)
---
dmp-frontend/src/app/app-routing.module.ts | 16 ++--
.../contact-dialog.component.html | 32 -------
.../contact-dialog/contact-dialog.module.ts | 14 ---
.../contact-content.component.html | 33 +++++++
.../contact-content.component.scss | 23 +++++
.../contact-content.component.ts | 87 +++++++++++++++++++
.../contact-content/contact-content.module.ts | 14 +++
.../contact-dialog.component.html | 17 ++++
.../contact-dialog.component.scss | 1 +
.../contact-dialog.component.ts | 4 +-
.../src/app/ui/contact/contact.module.ts | 26 ++++++
.../src/app/ui/contact/contact.routing.ts | 16 ++++
.../sidebar-footer.component.html | 3 +-
.../sidebar-footer.component.ts | 7 +-
.../src/app/ui/sidebar/sidebar.module.ts | 5 +-
15 files changed, 235 insertions(+), 63 deletions(-)
delete mode 100644 dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.html
delete mode 100644 dmp-frontend/src/app/library/contact-dialog/contact-dialog.module.ts
create mode 100644 dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html
create mode 100644 dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss
create mode 100644 dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.ts
create mode 100644 dmp-frontend/src/app/ui/contact/contact-content/contact-content.module.ts
create mode 100644 dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html
rename dmp-frontend/src/app/{library => ui/contact}/contact-dialog/contact-dialog.component.scss (83%)
rename dmp-frontend/src/app/{library => ui/contact}/contact-dialog/contact-dialog.component.ts (85%)
create mode 100644 dmp-frontend/src/app/ui/contact/contact.module.ts
create mode 100644 dmp-frontend/src/app/ui/contact/contact.routing.ts
diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index c8eee17ab..9ba283c4d 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -93,14 +93,14 @@ const appRoutes: Routes = [
title: 'GENERAL.TITLES.DATASET-PROFILES'
}
},
- // {
- // path: 'contact',
- // loadChildren: () => import('./ui/contact/contact.module').then(m => m.ContactModule),
- // data: {
- // breadcrumb: true,
- // title: 'CONTACT.SUPPORT.TITLE'
- // }
- // },
+ {
+ path: 'contact-support',
+ loadChildren: () => import('./ui/contact/contact.module').then(m => m.ContactModule),
+ data: {
+ breadcrumb: true,
+ title: 'CONTACT.SUPPORT.TITLE'
+ }
+ },
{
path: 'glossary',
loadChildren: () => import('./ui/glossary/glossary.module').then(m => m.GlossaryModule),
diff --git a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.html b/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.html
deleted file mode 100644
index 3f7bedeb1..000000000
--- a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
diff --git a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.module.ts b/dmp-frontend/src/app/library/contact-dialog/contact-dialog.module.ts
deleted file mode 100644
index a0fe4ea9f..000000000
--- a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonUiModule } from '../../common/ui/common-ui.module';
-import { ContactDialogComponent } from './contact-dialog.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-@NgModule({
- imports: [CommonUiModule, FormsModule, ReactiveFormsModule],
- declarations: [ContactDialogComponent],
- exports: [ContactDialogComponent],
- entryComponents: [ContactDialogComponent]
-})
-export class ContactDialogModule {
- constructor() { }
-}
diff --git a/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html
new file mode 100644
index 000000000..a052f8455
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html
@@ -0,0 +1,33 @@
+
diff --git a/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss
new file mode 100644
index 000000000..cdbae5052
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss
@@ -0,0 +1,23 @@
+h1 {
+ text-align: center;
+}
+
+img {
+ height: 150px;
+ width: 100%;
+}
+
+.contact-component {
+ margin-top: 80px;
+}
+
+.contact-container {
+ margin: 1em;
+ padding: 2em;
+ box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+ background-color: #ffffff;
+}
+
+.contact-actions {
+ padding-right: 1em;
+}
diff --git a/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.ts b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.ts
new file mode 100644
index 000000000..b7b4dcc70
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.ts
@@ -0,0 +1,87 @@
+import { FormGroup, AbstractControl, FormControl, FormArray } from '@angular/forms';
+import { Component, OnInit, Input } from '@angular/core';
+import { Location } from '@angular/common';
+import { takeUntil } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { ContactEmailFormModel } from '../../../core/model/contact/contact-email-form-model';
+import { ContactSupportService } from '../../../core/services/contact-support/contact-support.service';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { UiNotificationService, SnackBarNotificationLevel } from '../../../core/services/notification/ui-notification-service';
+import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
+
+@Component({
+ selector: 'app-contact-content',
+ templateUrl: './contact-content.component.html',
+ styleUrls: ['./contact-content.component.scss']
+})
+export class ContactContentComponent extends BaseComponent implements OnInit {
+
+ @Input() isDialog: boolean;
+ @Input() form: FormGroup;
+ private contactEmailFormModel: ContactEmailFormModel;
+ public formGroup: FormGroup;
+
+ constructor(
+ private contactSupportService: ContactSupportService,
+ private _location: Location,
+ private uiNotificationService: UiNotificationService,
+ private language: TranslateService,
+ ) {
+ super();
+ }
+
+ ngOnInit() {
+ if (this.isDialog) {
+ this.formGroup = this.form;
+ } else {
+ this.contactEmailFormModel = new ContactEmailFormModel();
+ this.formGroup = this.contactEmailFormModel.buildForm();
+ }
+ }
+
+ cancel() {
+ this._location.back();
+ }
+
+ send() {
+ this.contactSupportService.postEmail(this.formGroup.value)
+ .pipe(takeUntil(this._destroyed))
+ .subscribe(
+ complete => this.onCallbackSuccess(),
+ error => this.onCallbackError(error)
+ );
+ this.formGroup.reset();
+ }
+
+ onCallbackSuccess(): void {
+ this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-EMAIL-SEND'), SnackBarNotificationLevel.Success);
+ }
+
+ onCallbackError(errorResponse: any) {
+ this.setErrorModel(errorResponse.error);
+ this.validateAllFormFields(this.formGroup);
+ this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-EMAIL-SEND'), SnackBarNotificationLevel.Error);
+ }
+
+ public setErrorModel(validationErrorModel: ValidationErrorModel) {
+ Object.keys(validationErrorModel).forEach(item => {
+ (this.contactEmailFormModel.validationErrorModel)[item] = (validationErrorModel)[item];
+ });
+ }
+
+ public validateAllFormFields(formControl: AbstractControl) {
+ if (formControl instanceof FormControl) {
+ formControl.updateValueAndValidity({ emitEvent: false });
+ } else if (formControl instanceof FormGroup) {
+ Object.keys(formControl.controls).forEach(item => {
+ const control = formControl.get(item);
+ this.validateAllFormFields(control);
+ });
+ } else if (formControl instanceof FormArray) {
+ formControl.controls.forEach(item => {
+ this.validateAllFormFields(item);
+ });
+ }
+ }
+
+}
diff --git a/dmp-frontend/src/app/ui/contact/contact-content/contact-content.module.ts b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.module.ts
new file mode 100644
index 000000000..e6b490fdc
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact-content/contact-content.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonUiModule } from '../../../common/ui/common-ui.module';
+import { ContactContentComponent } from './contact-content.component';
+
+@NgModule({
+ imports: [CommonUiModule, FormsModule, ReactiveFormsModule],
+ declarations: [ContactContentComponent],
+ exports: [ContactContentComponent],
+ entryComponents: [ContactContentComponent]
+})
+export class ContactContentModule {
+ constructor() { }
+}
diff --git a/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html b/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html
new file mode 100644
index 000000000..0bc464f10
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html
@@ -0,0 +1,17 @@
+
diff --git a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.scss b/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.scss
similarity index 83%
rename from dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.scss
rename to dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.scss
index e2869c014..f9b1e58ff 100644
--- a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.scss
+++ b/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.scss
@@ -2,6 +2,7 @@
min-width: 150px;
max-width: 500px;
width: 100%;
+ margin-bottom: 1.125rem;
}
.full-width {
diff --git a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.ts b/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.ts
similarity index 85%
rename from dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.ts
rename to dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.ts
index d3cbb2ef5..dca466aef 100644
--- a/dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.ts
+++ b/dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.ts
@@ -11,7 +11,7 @@ export class ContactDialogComponent {
constructor(
public dialogRef: MatDialogRef,
- @Inject(MAT_DIALOG_DATA) public data: FormGroup
+ @Inject(MAT_DIALOG_DATA) public data: any
) { }
cancel() {
@@ -19,7 +19,7 @@ export class ContactDialogComponent {
}
send() {
- this.dialogRef.close(this.data);
+ this.dialogRef.close(this.data.formGroup);
}
close() {
diff --git a/dmp-frontend/src/app/ui/contact/contact.module.ts b/dmp-frontend/src/app/ui/contact/contact.module.ts
new file mode 100644
index 000000000..ec900601e
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonUiModule } from '../../common/ui/common-ui.module';
+import { ContactRoutingModule } from './contact.routing';
+import { ContactContentComponent } from './contact-content/contact-content.component';
+import { ContactDialogComponent } from './contact-dialog/contact-dialog.component';
+import { ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+ imports: [
+ CommonUiModule,
+ ContactRoutingModule,
+ ReactiveFormsModule
+ ],
+ declarations: [
+ ContactContentComponent,
+ ContactDialogComponent
+ ],
+ entryComponents: [
+ ContactContentComponent,
+ ContactDialogComponent
+ ],
+ exports: [
+ ContactDialogComponent
+ ]
+})
+export class ContactModule { }
diff --git a/dmp-frontend/src/app/ui/contact/contact.routing.ts b/dmp-frontend/src/app/ui/contact/contact.routing.ts
new file mode 100644
index 000000000..cc67a2045
--- /dev/null
+++ b/dmp-frontend/src/app/ui/contact/contact.routing.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ContactContentComponent } from './contact-content/contact-content.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: ContactContentComponent,
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule]
+})
+export class ContactRoutingModule { }
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
index 72140e5a5..d9e66567b 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html
@@ -19,8 +19,7 @@
{{'FOOTER.FAQ' | translate}}
-
-
+
{{'FOOTER.CONTACT-SUPPORT' | translate}}
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
index 9ad69b674..25abd211c 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
@@ -8,10 +8,10 @@ import { BaseComponent } from '../../../core/common/base/base.component';
import { ContactEmailFormModel } from '../../../core/model/contact/contact-email-form-model';
import { ContactSupportService } from '../../../core/services/contact-support/contact-support.service';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
-import { ContactDialogComponent } from '../../../library/contact-dialog/contact-dialog.component';
import { GlossaryDialogComponent } from '../../glossary/dialog/glossary-dialog.component';
import { Router } from '@angular/router';
import { FaqDialogComponent } from '../../faq/dialog/faq-dialog.component';
+import { ContactDialogComponent } from '../../contact/contact-dialog/contact-dialog.component';
@Component({
selector: 'app-sidebar-footer',
@@ -46,7 +46,10 @@ export class SidebarFooterComponent extends BaseComponent implements OnInit {
const dialogRef = this.dialog.open(ContactDialogComponent, {
width: '550px',
disableClose: true,
- data: this.formGroup
+ data: {
+ isDialog: true,
+ formGroup: this.formGroup
+ }
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
if (data) {
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
index 6076b550a..a42c97328 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
@@ -6,17 +6,16 @@ import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.componen
import { SidebarComponent } from './sidebar.component';
import { GlossaryModule } from '../glossary/glossary.module';
import { FaqModule } from '../faq/faq.module';
-import { ContactDialogModule } from '../../library/contact-dialog/contact-dialog.module';
+import { ContactModule } from '../contact/contact.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
- ContactDialogModule,
GlossaryModule,
FaqModule,
RouterModule,
- // ContactModule
+ ContactModule
],
declarations: [
SidebarComponent,