Creates /contact-support. (Issue #202)

dmp-frontend/src/app/app-routing.module.ts

@@ -93,14 +93,14 @@ const appRoutes: Routes = [
 			title: 'GENERAL.TITLES.DATASET-PROFILES'
 		}
 	},
-	// {
+	{
-	// 	path: 'contact',
+		path: 'contact-support',
-	// 	loadChildren: () => import('./ui/contact/contact.module').then(m => m.ContactModule),
+		loadChildren: () => import('./ui/contact/contact.module').then(m => m.ContactModule),
-	// 	data: {
+		data: {
-	// 		breadcrumb: true,
+			breadcrumb: true,
-	// 		title: 'CONTACT.SUPPORT.TITLE'
+			title: 'CONTACT.SUPPORT.TITLE'
-	// 	}
+		}
-	// },
+	},
 	{
 		path: 'glossary',
 		loadChildren: () => import('./ui/glossary/glossary.module').then(m => m.GlossaryModule),

dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.html

@@ -1,32 +0,0 @@
-<form class="form" [formGroup]="data">
-	<div class="row d-flex flex-row">
-		<div mat-dialog-title class="col-auto">
-			{{'CONTACT.SUPPORT.SUBTITLE' | translate}}
-		</div>
-		<div class="col-auto ml-auto close-btn" (click)="close()">
-			<mat-icon>close</mat-icon>
-		</div>
-	</div>
-	<div mat-dialog-content class="row">
-		<mat-form-field class="full-width">
-			<!-- <input matInput placeholder="{{'CONTACT.SUPPORT.SUBJECT' | translate}}" [(ngModel)]="data.subject" name="contactSupportSubject" required> -->
-			<input matInput placeholder="{{'CONTACT.SUPPORT.SUBJECT' | translate}}" type="text" name="subject" formControlName="subject" required>
-			<mat-error *ngIf="data.get('subject').hasError('backendError')">
-				{{data.get('subject').getError('backendError').message}}</mat-error>
-			<mat-error *ngIf="data.get('subject').hasError('required')">
-				{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-		</mat-form-field>
-
-		<mat-form-field class="full-width">
-			<textarea matInput placeholder="{{'CONTACT.SUPPORT.DESCRIPTION' | translate}}" type="text" name="description" formControlName="description" required></textarea>
-			<mat-error *ngIf="data.get('description').hasError('backendError')">
-				{{data.get('description').getError('backendError').message}}</mat-error>
-			<mat-error *ngIf="data.get('description').hasError('required')">
-				{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-		</mat-form-field>
-	</div>
-	<div mat-dialog-actions class="row">
-		<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
-		<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!data.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
-	</div>
-</form>

dmp-frontend/src/app/library/contact-dialog/contact-dialog.module.ts

@@ -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() { }
-}

dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html

@@ -0,0 +1,33 @@
+<form class="form" [formGroup]="formGroup">
+	<div [ngClass]="{'container contact-component': !isDialog}">
+		<div *ngIf="!isDialog" class="row">
+			<div class="col-md-12">
+				<h1>{{ 'CONTACT.TITLE-DASHED' | translate}}</h1>
+			</div>
+		</div>
+		<div [ngClass]="{'contact-container': !isDialog}" class="row">
+			<div class="col-md-12">
+				<mat-form-field class="full-width mb-2">
+					<!-- <input matInput placeholder="{{'CONTACT.SUPPORT.SUBJECT' | translate}}" [(ngModel)]="formGroup.subject" name="contactSupportSubject" required> -->
+					<input matInput placeholder="{{'CONTACT.SUPPORT.SUBJECT' | translate}}" type="text" name="subject" formControlName="subject" required>
+					<mat-error *ngIf="formGroup.get('subject').hasError('backendError')">
+						{{formGroup.get('subject').getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="formGroup.get('subject').hasError('required')">
+						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				</mat-form-field>
+
+				<mat-form-field class="full-width">
+					<textarea matInput placeholder="{{'CONTACT.SUPPORT.DESCRIPTION' | translate}}" type="text" name="description" formControlName="description" required></textarea>
+					<mat-error *ngIf="formGroup.get('description').hasError('backendError')">
+						{{formGroup.get('description').getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="formGroup.get('description').hasError('required')">
+						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				</mat-form-field>
+			</div>
+		</div>
+		<div *ngIf="!isDialog" class="row contact-actions">
+			<div class="ml-auto col-auto"><button mat-raised-button type="button" (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
+			<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
+		</div>
+	</div>
+</form>

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;
+}

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 => {
+			(<any>this.contactEmailFormModel.validationErrorModel)[item] = (<any>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);
+			});
+		}
+	}
+
+}

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() { }
+}

dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html

@@ -0,0 +1,17 @@
+<div class="form">
+	<div class="row d-flex flex-row">
+		<div mat-dialog-title class="col-auto">
+			{{'CONTACT.SUPPORT.SUBTITLE' | translate}}
+		</div>
+		<div class="col-auto ml-auto close-btn" (click)="close()">
+			<mat-icon>close</mat-icon>
+		</div>
+	</div>
+	<div mat-dialog-content class="row">
+		<app-contact-content [isDialog]="data.isDialog" [form]="data.formGroup"></app-contact-content>
+	</div>
+	<div mat-dialog-actions class="row">
+		<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close (click)="cancel()">{{'CONTACT.SUPPORT.CANCEL' | translate}}</button></div>
+		<div class="col-auto"><button mat-raised-button color="primary" type="button" [disabled]="!data.formGroup.valid" (click)="send()"><i class="fa fa-paper-plane pr-2"></i>{{'CONTACT.SUPPORT.SEND' | translate}}</button></div>
+	</div>
+</div>

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 {

dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.ts

@@ -11,7 +11,7 @@ export class ContactDialogComponent {
 
 	constructor(
 		public dialogRef: MatDialogRef<ContactDialogComponent>,
-		@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() {

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 { }

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 { }

dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html

@@ -19,8 +19,7 @@
 				{{'FOOTER.FAQ' | translate}}</p>
 		</div>
 		<div class="col-auto text-center">
-			<p class="option" (click)="openContactDialog()">
+			<p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
-			<!-- <p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact'}"> -->
 				<!-- <i class="fa fa-envelope-open pr-2 pt-1"></i> -->
 				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
 		</div>

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) {

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,