argos/dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar, MatStepper } 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';



@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<BreadcrumbItem[]> = Observable.of([]);

    @ViewChild('stepper') stepper: MatStepper;
    isNew = true;

    quickWizard: QuickWizardEditorWizardModel
    formGroup: FormGroup = null;
    firstStepFormGroup: FormGroup;
    secondFormGroup: FormGroup;


    constructor(
        public snackBar: MatSnackBar,
        private route: ActivatedRoute,
        public router: Router,
        public language: TranslateService,
        public quickWizardService: QuickWizardService,
        private uiNotificationService: UiNotificationService
    ) {
        super();
    }

    ngOnInit(): void {
        this.quickWizard = new QuickWizardEditorWizardModel();
        this.quickWizard.project = new ProjectEditorWizardModel();
        this.formGroup = this.quickWizard.buildForm();
        this.breadCrumbs = Observable.of([
            {
                parentComponentName: 'Dashboard',
                label: 'Quick Create DMP',
                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.isFormValid()) { return; }
        if (this.formGroup.get('datasets') && this.formGroup.get('datasets').get('datasetsList') && (this.formGroup.get('datasets').get('datasetsList') as FormArray).length > 0) {
            this.onSubmit();
        } else {
            return;
        }
    }

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

    onSubmit(): void {
        if (!this.isFormValid()) { return; }
        this.quickWizardService.createQuickWizard(this.formGroup.getRawValue())
            .pipe(takeUntil(this._destroyed))
            .subscribe(
                complete => this.onCallbackSuccess(),
                error => this.onCallbackError(error)
            );
    }


    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 => {
            (<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;
        }
    }





}