MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Creates /contact-support. (Issue #202)

This commit is contained in:
apapachristou 2019-11-11 12:42:55 +02:00
parent 1c6d58a47b
commit 9a694e167b
15 changed files with 235 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dmp-frontend/src/app/app-routing.module.ts
View File

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

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

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

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

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

33
dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.html Normal file
View File

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

23
dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.scss Normal file
View File

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

87
dmp-frontend/src/app/ui/contact/contact-content/contact-content.component.ts Normal file
View File

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

14
dmp-frontend/src/app/ui/contact/contact-content/contact-content.module.ts Normal file
View File

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

17
dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.html Normal file
View File

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

1
dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.scss → dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.scss
View File

@ -2,6 +2,7 @@
min-width: 150px;
max-width: 500px;
width: 100%;
margin-bottom: 1.125rem;
}
.full-width {

4
dmp-frontend/src/app/library/contact-dialog/contact-dialog.component.ts → dmp-frontend/src/app/ui/contact/contact-dialog/contact-dialog.component.ts
View File

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

26
dmp-frontend/src/app/ui/contact/contact.module.ts Normal file
View File

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

16
dmp-frontend/src/app/ui/contact/contact.routing.ts Normal file
View File

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

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

@ -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'}"> -->
<p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
<!-- <i class="fa fa-envelope-open pr-2 pt-1"></i> -->
{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
</div>

7
dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts
View File

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

5
dmp-frontend/src/app/ui/sidebar/sidebar.module.ts
View File

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