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

import {of as observableOf,  Observable } from 'rxjs';
import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { BaseComponent } from "../../../core/common/base/base.component";
import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
import { DatasetProfileCriteria } from '../../../core/query/dataset-profile/dataset-profile-criteria';
import { RequestItem } from '../../../core/query/request-item';
import { DmpService } from '../../../core/services/dmp/dmp.service';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { DmpEditorWizardModel } from './dmp-editor-wizard-model';


@Component({
	selector: 'app-quick-wizard-dmp-editor-component',
	templateUrl: 'dmp-editor-wizard.component.html',
	styleUrls: ['./dmp-editor-wizard.component.scss']
})
export class DmpEditorWizardComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {

	breadCrumbs: Observable<BreadcrumbItem[]> = observableOf([]);

	isNew = true;
	dmp: DmpEditorWizardModel;
	@Input() formGroup: FormGroup;
	@Input() dmpLabel: string;
	@Input() datasetFormGroup: FormGroup;
	private uiNotificationService: UiNotificationService

	profilesAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
	filteredProfiles: DatasetProfileModel[];
	filteredProfilesAsync = false;


	constructor(
		public snackBar: MatSnackBar,
		public router: Router,
		private route: ActivatedRoute,
		private _service: DmpService,
		public language: TranslateService
	) {
		super();
	}

	ngOnInit(): void {

		this.profilesAutoCompleteConfiguration = {
			filterFn: this.filterProfiles.bind(this),
			initialItems: (extraData) => this.filterProfiles(''),
			displayFn: (item) => item['label'],
			titleFn: (item) => item['label'],
			subtitleFn: (item) => item['description']
		};

		if (this.formGroup == null) {
			this.dmp = new DmpEditorWizardModel();
			this.formGroup = this.dmp.buildForm();
		}
		this.formGroup.get('label').setValue(this.language.instant('QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.DMP-NAME') + this.dmpLabel);
		this.formGroup.get('label').setValue(this.language.instant('QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.DMP-NAME') + this.dmpLabel);

		this.breadCrumbs = observableOf([{
			parentComponentName: 'grant',
			label: this.language.instant('NAV-BAR.DMP'),
			url: '/quick-wizard/dmp'
		}]);
	}

	formSubmit(): void {
		this.touchAllFormFields(this.formGroup);
		if (!this.isFormValid()) { return; }
		this.onSubmit();
	}

	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 {
		// this.grantService.createGrant(this.formGroup.value)
		// 	.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(['/dmp']);
	}

	onCallbackError(errorResponse: any) {
		this.setErrorModel(errorResponse.error.payload);
		this.validateAllFormFields(this.formGroup);
	}

	public setErrorModel(validationErrorModel: ValidationErrorModel) {
		Object.keys(validationErrorModel).forEach(item => {
			(<any>this.dmp.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);
			});
		}
	}

	filterProfiles(value: string): Observable<DatasetProfileModel[]> {

		this.filteredProfiles = undefined;
		this.filteredProfilesAsync = true;

		const request = new RequestItem<DatasetProfileCriteria>();
		const criteria = new DatasetProfileCriteria();
		criteria.like = value;
		request.criteria = criteria;
		return this._service.searchDMPProfiles(request);
	}

	datasetIsEmpty() {
		if (this.datasetFormGroup && this.datasetFormGroup.get('datasetsList') && (this.datasetFormGroup.get('datasetsList') as FormArray).length != 0) {
			return true;
		}
		return false;
	}
}