Adds "Save" and "Save and Finalize" on quick wizard components.
This commit is contained in:
parent
ed03abd254
commit
b76d7dd5b8
|
@ -29,9 +29,9 @@
|
|||
<div class="navigation-buttons-container">
|
||||
<button matStepperPrevious mat-raised-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>
|
||||
<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>
|
||||
</div>
|
||||
</mat-step>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
|
||||
import { MatStepper } from '@angular/material';
|
||||
import { MatStepper, MatDialog } from '@angular/material';
|
||||
import { Router } from '@angular/router';
|
||||
import { BaseComponent } from '../../core/common/base/base.component';
|
||||
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 { SnackBarNotificationLevel, UiNotificationService } from '../../core/services/notification/ui-notification-service';
|
||||
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({
|
||||
selector: 'dataset-create-wizard.component',
|
||||
|
@ -19,10 +21,12 @@ import { TranslateService } from '@ngx-translate/core';
|
|||
})
|
||||
export class DatasetCreateWizard extends BaseComponent implements OnInit, IBreadCrumbComponent {
|
||||
breadCrumbs: Observable<BreadcrumbItem[]>;
|
||||
@ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
|
||||
isLinear = false;
|
||||
isNew = true;
|
||||
formGroup: FormGroup;
|
||||
|
||||
|
||||
datasetCreateWizardModel: DatasetCreateWizardModel;
|
||||
@ViewChild('stepper') stepper: MatStepper;
|
||||
|
||||
|
@ -31,7 +35,8 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit, IBread
|
|||
private formBuilder: FormBuilder,
|
||||
public quickWizardService: QuickWizardService,
|
||||
public language: TranslateService,
|
||||
private uiNotificationService: UiNotificationService
|
||||
private uiNotificationService: UiNotificationService,
|
||||
private dialog: MatDialog
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
@ -49,21 +54,50 @@ export class DatasetCreateWizard extends BaseComponent implements OnInit, IBread
|
|||
}
|
||||
|
||||
save() {
|
||||
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){
|
||||
control.get('status').setValue('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) {
|
||||
control.get('status').setValue('0');
|
||||
}
|
||||
this.onSubmitSave();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
this.submit();
|
||||
}
|
||||
|
||||
saveFinalize() {
|
||||
if (!this.isFormValid()) { return; }
|
||||
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){
|
||||
control.get('status').setValue('1');
|
||||
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) {
|
||||
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)
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.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() {
|
||||
return this.formGroup.valid;
|
||||
}
|
||||
return this.formGroup.valid;
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
|
@ -59,9 +59,9 @@
|
|||
<div class="navigation-buttons-container">
|
||||
<button matStepperPrevious mat-raised-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>
|
||||
<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>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
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 { TranslateService } from '@ngx-translate/core';
|
||||
import { Observable } from 'rxjs';
|
||||
|
@ -13,141 +13,178 @@ import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item
|
|||
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||
import { ProjectEditorWizardModel } from '../project-editor/project-editor-wizard-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({
|
||||
selector: 'app-quick-wizard-editor-component',
|
||||
templateUrl: 'quick-wizard-editor.component.html',
|
||||
styleUrls: ['./quick-wizard-editor.component.scss']
|
||||
selector: 'app-quick-wizard-editor-component',
|
||||
templateUrl: 'quick-wizard-editor.component.html',
|
||||
styleUrls: ['./quick-wizard-editor.component.scss']
|
||||
})
|
||||
export class QuickWizardEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
|
||||
|
||||
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
|
||||
@ViewChild('stepper') stepper: MatStepper;
|
||||
isNew = true;
|
||||
quickWizard: QuickWizardEditorWizardModel
|
||||
formGroup: FormGroup = null;
|
||||
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
|
||||
@ViewChild('stepper') stepper: MatStepper;
|
||||
@ViewChild(DatasetEditorWizardComponent) datasetEditorWizardComponent: DatasetEditorWizardComponent;
|
||||
isNew = true;
|
||||
quickWizard: QuickWizardEditorWizardModel
|
||||
formGroup: FormGroup = null;
|
||||
|
||||
constructor(
|
||||
public snackBar: MatSnackBar,
|
||||
private route: ActivatedRoute,
|
||||
public router: Router,
|
||||
public language: TranslateService,
|
||||
public quickWizardService: QuickWizardService,
|
||||
private uiNotificationService: UiNotificationService
|
||||
) {
|
||||
super();
|
||||
}
|
||||
constructor(
|
||||
public snackBar: MatSnackBar,
|
||||
private route: ActivatedRoute,
|
||||
public router: Router,
|
||||
public language: TranslateService,
|
||||
public quickWizardService: QuickWizardService,
|
||||
private uiNotificationService: UiNotificationService,
|
||||
private dialog: MatDialog
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.quickWizard = new QuickWizardEditorWizardModel();
|
||||
this.quickWizard.project = new ProjectEditorWizardModel();
|
||||
this.formGroup = this.quickWizard.buildForm();
|
||||
this.breadCrumbs = Observable.of([
|
||||
{
|
||||
parentComponentName: 'Dashboard',
|
||||
label: 'DMP Wizard',
|
||||
url: '/quick-wizard'
|
||||
}]
|
||||
);
|
||||
ngOnInit(): void {
|
||||
this.quickWizard = new QuickWizardEditorWizardModel();
|
||||
this.quickWizard.project = new ProjectEditorWizardModel();
|
||||
this.formGroup = this.quickWizard.buildForm();
|
||||
this.breadCrumbs = Observable.of([
|
||||
{
|
||||
parentComponentName: 'Dashboard',
|
||||
label: 'DMP Wizard',
|
||||
url: '/quick-wizard'
|
||||
}]
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
isActive(step: string): boolean {
|
||||
switch (step) {
|
||||
case 'step1':
|
||||
return this.stepper.selectedIndex == 0;
|
||||
case 'step2':
|
||||
return this.stepper.selectedIndex == 1;
|
||||
case 'step3':
|
||||
return this.stepper.selectedIndex == 2;
|
||||
}
|
||||
}
|
||||
isActive(step: string): boolean {
|
||||
switch (step) {
|
||||
case 'step1':
|
||||
return this.stepper.selectedIndex == 0;
|
||||
case 'step2':
|
||||
return this.stepper.selectedIndex == 1;
|
||||
case 'step3':
|
||||
return this.stepper.selectedIndex == 2;
|
||||
}
|
||||
}
|
||||
|
||||
formSubmit(): void {
|
||||
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) {
|
||||
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){
|
||||
formSubmit(): void {
|
||||
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) {
|
||||
for (let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls) {
|
||||
control.get('status').setValue('0');
|
||||
}
|
||||
this.onSubmit();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
this.onSubmitSave();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
saveFinalize() {
|
||||
if (!this.isFormValid()) { return; }
|
||||
for(let control of (this.formGroup.get('datasets').get('datasetsList') as FormArray).controls){
|
||||
control.get('status').setValue('1');
|
||||
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) {
|
||||
control.get('status').setValue('1');
|
||||
}
|
||||
this.onSubminSaveAndFinalize();
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
this.onSubmit();
|
||||
}
|
||||
|
||||
public isFormValid() {
|
||||
return this.formGroup.valid;
|
||||
}
|
||||
hasDatasets() {
|
||||
if ((this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
public touchAllFormFields(formControl: AbstractControl) {
|
||||
if (formControl instanceof FormControl) {
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
public isFormValid() {
|
||||
return this.formGroup.valid;
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
this.quickWizardService.createQuickWizard(this.formGroup.getRawValue())
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
public touchAllFormFields(formControl: AbstractControl) {
|
||||
if (formControl instanceof FormControl) {
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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.router.navigate(['/home']);
|
||||
}
|
||||
onSubminSaveAndFinalize() {
|
||||
this.quickWizardService.createQuickWizard(this.formGroup.getRawValue())
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
|
||||
onCallbackError(errorResponse: any) {
|
||||
this.setErrorModel(errorResponse.error.payload);
|
||||
this.validateAllFormFields(this.formGroup);
|
||||
}
|
||||
onSubmitSave(): void {
|
||||
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()
|
||||
)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public setErrorModel(validationErrorModel: ValidationErrorModel) {
|
||||
Object.keys(validationErrorModel).forEach(item => {
|
||||
(<any>this.quickWizard.validationErrorModel)[item] = (<any>validationErrorModel)[item];
|
||||
});
|
||||
}
|
||||
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.router.navigate(['/home']);
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
onCallbackError(errorResponse: any) {
|
||||
this.setErrorModel(errorResponse.error.payload);
|
||||
this.validateAllFormFields(this.formGroup);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
public setErrorModel(validationErrorModel: ValidationErrorModel) {
|
||||
Object.keys(validationErrorModel).forEach(item => {
|
||||
(<any>this.quickWizard.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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue