import { Component, OnInit, ViewChild } from '@angular/core'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { MatSnackBar, MatStepper, MatDialog } from '@angular/material'; import { ActivatedRoute, Router } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model'; import { BaseComponent } from "../../../core/common/base/base.component"; import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service'; import { QuickWizardService } from '../../../core/services/quick-wizard/quick-wizard.service'; 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'] }) export class QuickWizardEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent { breadCrumbs: Observable = 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, 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: this.language.instant('NAV-BAR.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; } } 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.onSubmitSave(); } else { return; } } saveFinalize() { if (!this.isFormValid()) { return; } 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; } } hasDatasets() { if ((this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) { return true; } else { return false; } } public isFormValid() { return this.formGroup.valid; } 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); }); } } onSubminSaveAndFinalize() { this.quickWizardService.createQuickWizard(this.formGroup.getRawValue()) .pipe(takeUntil(this._destroyed)) .subscribe( complete => this.onCallbackSuccess(), error => this.onCallbackError(error) ); } 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(false); } else if (result === false) { this.quickWizardService.createQuickWizard(this.formGroup.value) .pipe(takeUntil(this._destroyed)) .subscribe( complete => this.onCallbackSuccess() ) } }); } 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']); } onCallbackError(errorResponse: any) { this.setErrorModel(errorResponse.error.payload); this.validateAllFormFields(this.formGroup); } public setErrorModel(validationErrorModel: ValidationErrorModel) { Object.keys(validationErrorModel).forEach(item => { (this.quickWizard.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); }); } } 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; } } }