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

import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { BaseComponent } from "../../../core/common/base/base.component";
import { ProjectCriteria } from '../../../core/query/project/project-criteria';
import { RequestItem } from '../../../core/query/request-item';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { ProjectService } from '../../../core/services/project/project.service';
import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { ProjectEditorWizardModel } from './project-editor-wizard-model';

@Component({
	selector: 'app-quick-wizard-project-editor-component',
	templateUrl: 'project-editor-wizard.component.html',
	styleUrls: ['./project-editor-wizard.component.scss']
})
export class ProjectEditorWizardComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
	breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);

	isNew = false;
	project: ProjectEditorWizardModel;
	@Input() formGroup: FormGroup;
	//formGroup: FormGroup = null;
	private uiNotificationService: UiNotificationService

	projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;

	constructor(
		public snackBar: MatSnackBar,
		private route: ActivatedRoute,
		public router: Router,
		public language: TranslateService,
		private projectService: ProjectService,
		public languageResolverService: LanguageResolverService,
	) {
		super();
	}

	ngOnInit() {
		this.breadCrumbs = Observable.of([{
			parentComponentName: 'QuickCreate',
			label: this.language.instant('NAV-BAR.PROJECT'),
			url: '/quick-wizard/project'
		}]);

		const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
		projectRequestItem.criteria = new ProjectCriteria();

		this.projectAutoCompleteConfiguration = {
			filterFn: this.searchProject.bind(this),
			initialItems: (extraData) => this.searchProject(''),
			displayFn: (item) => item['label'],
			titleFn: (item) => item['label']
		};

		if (!this.formGroup) {
			this.project = new ProjectEditorWizardModel();
			this.formGroup = this.project.buildForm();
		}

		this.formGroup.get('existProject').enable();
		this.formGroup.get('label').disable();
		this.formGroup.get('description').disable();

		// 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: 'QuickWizardComponent', label: 'Projects', url: '/projects' },
		//     ]);
		//     this.project = new ProjectEditorWizardModel();
		//     setTimeout(() => {
		//       this.formGroup = this.project.buildForm();
		//     });
		//      }
		//   });
	}

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

	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(['/project']);
	}

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

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

	searchProject(query: string) {
		const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
		projectRequestItem.criteria = new ProjectCriteria();
		projectRequestItem.criteria.like = query;
		return this.projectService.getWithExternal(projectRequestItem);
	}

	create() {
		this.isNew = !this.isNew;
		if (this.isNew) {
			this.formGroup.get('existProject').disable();
			this.formGroup.get('existProject').reset();
			this.formGroup.get('label').enable();
			this.formGroup.get('description').enable();
		} else {
			this.formGroup.get('existProject').enable();
			this.formGroup.get('label').disable();
			this.formGroup.get('label').reset();
			this.formGroup.get('description').disable();
			this.formGroup.get('description').reset();
		}
	}
}