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

Adds "Save" and "Save and Finalize" on quick wizard components.

This commit is contained in:
Diamantis Tziotzios 2019-03-26 17:43:19 +02:00
parent ed03abd254
commit b76d7dd5b8
4 changed files with 205 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.html
View File

@ -29,9 +29,9 @@
<div class="navigation-buttons-container"> <div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button <button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button> color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!formGroup.valid" <button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button> color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='save()' <button class="saveButton" matStepperNext mat-raised-button (click)='save()' [disabled]="!hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button> color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div> </div>
</mat-step> </mat-step>

64
dmp-frontend/src/app/ui/dataset-create-wizard/dataset-create-wizard.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'; import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { MatStepper } from '@angular/material'; import { MatStepper, MatDialog } from '@angular/material';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { BaseComponent } from '../../core/common/base/base.component'; import { BaseComponent } from '../../core/common/base/base.component';
import { QuickWizardService } from '../../core/services/quick-wizard/quick-wizard.service'; import { QuickWizardService } from '../../core/services/quick-wizard/quick-wizard.service';
@ -11,6 +11,8 @@ import { takeUntil } from 'rxjs/operators';
import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item'; import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
import { SnackBarNotificationLevel, UiNotificationService } from '../../core/services/notification/ui-notification-service'; import { SnackBarNotificationLevel, UiNotificationService } from '../../core/services/notification/ui-notification-service';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { ConfirmationDialogComponent } from '../../library/confirmation-dialog/confirmation-dialog.component';
import { DatasetEditorWizardComponent } from '../quick-wizard/dataset-editor/dataset-editor-wizard.component';
@Component({ @Component({
selector: 'dataset-create-wizard.component', selector: 'dataset-create-wizard.component',
@ -19,10 +21,12 @@ import { TranslateService } from '@ngx-translate/core';
}) })
export class DatasetCreateWizard extends BaseComponent implements OnInit, IBreadCrumbComponent { export class DatasetCreateWizard extends BaseComponent implements OnInit, IBreadCrumbComponent {
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
@ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
isLinear = false; isLinear = false;
isNew = true; isNew = true;
formGroup: FormGroup; formGroup: FormGroup;
datasetCreateWizardModel: DatasetCreateWizardModel; datasetCreateWizardModel: DatasetCreateWizardModel;
@ViewChild('stepper') stepper: MatStepper; @ViewChild('stepper') stepper: MatStepper;
@ -31,7 +35,8 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit, IBread
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
public quickWizardService: QuickWizardService, public quickWizardService: QuickWizardService,
public language: TranslateService, public language: TranslateService,
private uiNotificationService: UiNotificationService private uiNotificationService: UiNotificationService,
private dialog: MatDialog
) { ) {
super(); super();
} }
@ -49,21 +54,50 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit, IBread
} }
save() { save() {
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){ if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
control.get('status').setValue('0'); for (let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls) {
control.get('status').setValue('0');
}
this.onSubmitSave();
} else {
return;
} }
this.submit();
} }
saveFinalize() { saveFinalize() {
if (!this.isFormValid()) { return; } if (!this.isFormValid()) { return; }
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){ if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
control.get('status').setValue('1'); for (let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls) {
control.get('status').setValue('1');
}
this.onSubmitSaveAndFinalize();
} else {
return;
} }
this.submit();
} }
submit() { onSubmitSave() {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
data: {
message: this.language.instant('QUICKWIZARD.SAVE-DIALOG.TITLE'),
confirmButton: this.language.instant('QUICKWIZARD.SAVE-DIALOG.ACTIONS.AFFIRMATIVE'),
cancelButton: this.language.instant('QUICKWIZARD.SAVE-DIALOG.ACTIONS.NEGATIVE')
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this.datasetEditorWizardComponent.addDataset();
} else if (result === false) {
this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess()
)
}
});
}
onSubmitSaveAndFinalize() {
this.quickWizardService.createQuickDatasetWizard(this.formGroup.value) this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
@ -71,9 +105,17 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit, IBread
) )
} }
hasDatasets() {
if ((this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
return true;
} else {
return false;
}
}
public isFormValid() { public isFormValid() {
return this.formGroup.valid; return this.formGroup.valid;
} }
onCallbackSuccess(): void { onCallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success); this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);

4
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html
View File

@ -59,9 +59,9 @@
<div class="navigation-buttons-container"> <div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button <button matStepperPrevious mat-raised-button
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button> color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.BACK' | translate}}</button>
<button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!formGroup.valid" <button class="saveAndFinalizeButton" matStepperNext mat-raised-button (click)='saveFinalize()' [disabled]="!isFormValid() || !hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button> color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE-AND-FINALIZE' | translate}}</button>
<button class="saveButton" matStepperNext mat-raised-button (click)='formSubmit()' <button class="saveButton" matStepperNext mat-raised-button (click)='formSubmit()' [disabled]="!hasDatasets()"
color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button> color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.SAVE' | translate}}</button>
</div> </div>
</ng-container> </ng-container>

259
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar, MatStepper } from '@angular/material'; import { MatSnackBar, MatStepper, MatDialog } from '@angular/material';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
@ -13,141 +13,178 @@ import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent'; import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { ProjectEditorWizardModel } from '../project-editor/project-editor-wizard-model'; import { ProjectEditorWizardModel } from '../project-editor/project-editor-wizard-model';
import { QuickWizardEditorWizardModel } from './quick-wizard-editor.model'; import { QuickWizardEditorWizardModel } from './quick-wizard-editor.model';
import { DatasetEditorWizardComponent } from '../dataset-editor/dataset-editor-wizard.component';
import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
@Component({ @Component({
selector: 'app-quick-wizard-editor-component', selector: 'app-quick-wizard-editor-component',
templateUrl: 'quick-wizard-editor.component.html', templateUrl: 'quick-wizard-editor.component.html',
styleUrls: ['./quick-wizard-editor.component.scss'] styleUrls: ['./quick-wizard-editor.component.scss']
}) })
export class QuickWizardEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent { export class QuickWizardEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]); breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
@ViewChild('stepper') stepper: MatStepper; @ViewChild('stepper') stepper: MatStepper;
isNew = true; @ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
quickWizard: QuickWizardEditorWizardModel isNew = true;
formGroup: FormGroup = null; quickWizard: QuickWizardEditorWizardModel
formGroup: FormGroup = null;
constructor( constructor(
public snackBar: MatSnackBar, public snackBar: MatSnackBar,
private route: ActivatedRoute, private route: ActivatedRoute,
public router: Router, public router: Router,
public language: TranslateService, public language: TranslateService,
public quickWizardService: QuickWizardService, public quickWizardService: QuickWizardService,
private uiNotificationService: UiNotificationService private uiNotificationService: UiNotificationService,
) { private dialog: MatDialog
super(); ) {
} super();
}
ngOnInit(): void { ngOnInit(): void {
this.quickWizard = new QuickWizardEditorWizardModel(); this.quickWizard = new QuickWizardEditorWizardModel();
this.quickWizard.project = new ProjectEditorWizardModel(); this.quickWizard.project = new ProjectEditorWizardModel();
this.formGroup = this.quickWizard.buildForm(); this.formGroup = this.quickWizard.buildForm();
this.breadCrumbs = Observable.of([ this.breadCrumbs = Observable.of([
{ {
parentComponentName: 'Dashboard', parentComponentName: 'Dashboard',
label: 'DMP Wizard', label: 'DMP Wizard',
url: '/quick-wizard' url: '/quick-wizard'
}] }]
); );
} }
isActive(step: string): boolean { isActive(step: string): boolean {
switch (step) { switch (step) {
case 'step1': case 'step1':
return this.stepper.selectedIndex == 0; return this.stepper.selectedIndex == 0;
case 'step2': case 'step2':
return this.stepper.selectedIndex == 1; return this.stepper.selectedIndex == 1;
case 'step3': case 'step3':
return this.stepper.selectedIndex == 2; return this.stepper.selectedIndex == 2;
} }
} }
formSubmit(): void { formSubmit(): void {
this.touchAllFormFields(this.formGroup); this.touchAllFormFields(this.formGroup);
if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) { if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){ for (let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls) {
control.get('status').setValue('0'); control.get('status').setValue('0');
} }
this.onSubmit(); this.onSubmitSave();
} else { } else {
return; return;
} }
} }
saveFinalize() { saveFinalize() {
if (!this.isFormValid()) { return; } if (!this.isFormValid()) { return; }
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){ if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
control.get('status').setValue('1'); for (let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls) {
control.get('status').setValue('1');
}
this.onSubminSaveAndFinalize();
} else {
return;
} }
this.onSubmit();
} }
public isFormValid() { hasDatasets() {
return this.formGroup.valid; if ((this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
} return true;
} else {
return false;
}
}
public touchAllFormFields(formControl: AbstractControl) { public isFormValid() {
if (formControl instanceof FormControl) { return this.formGroup.valid;
formControl.markAsTouched(); }
} else if (formControl instanceof FormGroup) {
Object.keys(formControl.controls).forEach(item => {
const control = formControl.get(item);
this.touchAllFormFields(control);
});
} else if (formControl instanceof FormArray) {
formControl.controls.forEach(item => {
this.touchAllFormFields(item);
});
}
}
onSubmit(): void { public touchAllFormFields(formControl: AbstractControl) {
this.quickWizardService.createQuickWizard(this.formGroup.getRawValue()) if (formControl instanceof FormControl) {
.pipe(takeUntil(this._destroyed)) formControl.markAsTouched();
.subscribe( } else if (formControl instanceof FormGroup) {
complete => this.onCallbackSuccess(), Object.keys(formControl.controls).forEach(item => {
error => this.onCallbackError(error) const control = formControl.get(item);
); this.touchAllFormFields(control);
} });
} else if (formControl instanceof FormArray) {
formControl.controls.forEach(item => {
this.touchAllFormFields(item);
});
}
}
onCallbackSuccess(): void { onSubminSaveAndFinalize() {
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success); this.quickWizardService.createQuickWizard(this.formGroup.getRawValue())
this.router.navigate(['/home']); .pipe(takeUntil(this._destroyed))
} .subscribe(
complete => this.onCallbackSuccess(),
error => this.onCallbackError(error)
);
}
onCallbackError(errorResponse: any) { onSubmitSave(): void {
this.setErrorModel(errorResponse.error.payload); const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
this.validateAllFormFields(this.formGroup); data: {
} message: this.language.instant('QUICKWIZARD.SAVE-DIALOG.TITLE'),
confirmButton: this.language.instant('QUICKWIZARD.SAVE-DIALOG.ACTIONS.AFFIRMATIVE'),
cancelButton: this.language.instant('QUICKWIZARD.SAVE-DIALOG.ACTIONS.NEGATIVE')
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this.datasetEditorWizardComponent.addDataset();
} else if (result === false) {
this.quickWizardService.createQuickDatasetWizard(this.formGroup.value)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => this.onCallbackSuccess()
)
}
});
}
public setErrorModel(validationErrorModel: ValidationErrorModel) { onCallbackSuccess(): void {
Object.keys(validationErrorModel).forEach(item => { this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
(<any>this.quickWizard.validationErrorModel)[item] = (<any>validationErrorModel)[item]; this.router.navigate(['/home']);
}); }
}
public validateAllFormFields(formControl: AbstractControl) { onCallbackError(errorResponse: any) {
if (formControl instanceof FormControl) { this.setErrorModel(errorResponse.error.payload);
formControl.updateValueAndValidity({ emitEvent: false }); this.validateAllFormFields(this.formGroup);
} 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);
});
}
}
getProjectLabel(): string { public setErrorModel(validationErrorModel: ValidationErrorModel) {
if (this.formGroup.get('project').get('existProject').value) { Object.keys(validationErrorModel).forEach(item => {
return this.formGroup.get('project').get('existProject').value['label']; (<any>this.quickWizard.validationErrorModel)[item] = (<any>validationErrorModel)[item];
} else { });
return this.formGroup.get('project').get('label').value; }
}
} 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);
});
}
}
getProjectLabel(): string {
if (this.formGroup.get('project').get('existProject').value) {
return this.formGroup.get('project').get('existProject').value['label'];
} else {
return this.formGroup.get('project').get('label').value;
}
}
} }