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 { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { DmpEditorWizardModel } from '../dmp-editor/dmp-editor-wizard-model';
import { ProjectEditorWizardModel } from '../project-editor/project-editor-wizard-model';
import { QuickWizardEditorWizardModel } from './quick-wizard-editor.model';
import { QuickWizardService } from '../../../core/services/quick-wizard/quick-wizard.service';
import { DatasetEditorWizardModel } from '../dataset-editor/dataset-editor-wizard-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.quickWizard.dmp = new DmpEditorWizardModel();
        //this.quickWizard.datasets = new DatasetEditorWizardModel();
        this.formGroup = this.quickWizard.buildForm();
        this.breadCrumbs = Observable.of([
            {
                parentComponentName: 'Dashboard',
                label: 'QuickCreate',
                url: '/quick-wizard'
            }]
        );
        // this.route.params
        // .pipe(takeUntil(this._destroyed))
        // .subscribe((params: Params) => {
        //   const itemId = params['id'];

        //   if (itemId != null) {
        //   	this.isNew = false;
        //   	this.projectService.getSingle(itemId).map(data => data as ProjectListingModel)
        //   		.pipe(takeUntil(this._destroyed))
        //   		.subscribe(data => {
        //   			this.project = new ProjectEditorModel().fromModel(data);
        //   			this.formGroup = this.project.buildForm(null, this.project.type === ProjectType.External || !this.editMode);
        //   			this.breadCrumbs = Observable.of([
        //   				{ parentComponentName: 'ProjectListingComponent', label: 'Projects', url: '/projects' },
        //   			]);
        //   		});
        //   } else {
        //   this.breadCrumbs = Observable.of([
        //     { parentComponentName: '/', label: 'QuickWizard', url: '/quickwizard' },
        //   ]);
        //   setTimeout(() => {
        //     this.formGroup = this.quickWizard.buildForm();
        //   });
        //   }
        // });
    }

    isAvtive(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/create-add']);
    }

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

}