argos/dmp-frontend/src/app/dataset-profile-form/form/form.component.ts

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatDialog, MatHorizontalStepper } from '@angular/material';
import { ActivatedRoute, Router } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../core/common/base/base.component';
import { DatasetProfileModelAdmin } from '../../models/datasetProfileAdmin/DatasetProfileModelAdmin';
import { Page } from '../../models/datasetProfileAdmin/Page';
import { Section } from '../../models/datasetProfileAdmin/Section';
import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
import { DatasetProfileService } from '../../services/dataset-profile.service';
import { DatasetProfileAdmin } from '../../services/datasetProfileAdmin/datasetProfileAfmin.service';
import { JsonSerializer } from '../../utilities/JsonSerializer';

@Component({
	selector: 'app-form-component',
	templateUrl: './form.component.html',
	providers: [DatasetProfileAdmin, DatasetProfileService],
	styleUrls: ['./form.component.scss']
})

export class FormComponent extends BaseComponent implements OnInit, AfterViewInit {


	dataModel: DatasetProfileModelAdmin;
	form: FormGroup;
	previewerFormGroup: FormGroup;
	private profileID: string;
	private cloneId: string;
	dataWizardModel: DatasetWizardModel;
	@ViewChild('stepper') stepper: MatHorizontalStepper;
	constructor(
		public datasetprofileAdmin: DatasetProfileAdmin,
		private datasetProfileService: DatasetProfileService,
		private datasetProfileAdminService: DatasetProfileAdmin,
		private route: ActivatedRoute,
		private router: Router,
		public dialog: MatDialog,
	) {
		super();
		this.profileID = route.snapshot.params['id'];
		this.cloneId = route.snapshot.params['cloneid'];
	}

	ngAfterViewInit(): void {
		console.log(this.stepper);
	}

	ngOnInit() {

		this.dataModel = JsonSerializer.fromJSONObject(new DatasetProfileModelAdmin(), DatasetProfileModelAdmin);
		if (this.profileID) {
			this.datasetProfileService.getDatasetProfileById(this.profileID)
				.pipe(takeUntil(this._destroyed))
				.subscribe((data) => {
					this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
					this.form = this.dataModel.buildForm();
					this.form.valueChanges
						.pipe(takeUntil(this._destroyed))
						.subscribe(change => {
							this.datasetProfileAdminService.preview(this.dataModel)
								.pipe(takeUntil(this._destroyed))
								.subscribe(dataset => {
									const datasetModel = new DatasetWizardModel();
									datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
									this.dataWizardModel = datasetModel;
									this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
								});
						});
					this.form.updateValueAndValidity();
				});
		} else if (this.cloneId) {
			this.datasetprofileAdmin.clone(this.cloneId)
				.pipe(takeUntil(this._destroyed))
				.subscribe((data) => {
					this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
					this.form = this.dataModel.buildForm();
					this.form.valueChanges
						.pipe(takeUntil(this._destroyed))
						.subscribe(change => {
							this.datasetProfileAdminService.preview(this.dataModel)
								.pipe(takeUntil(this._destroyed))
								.subscribe(dataset => {
									const datasetModel = new DatasetWizardModel();
									datasetModel.datasetProfileDefinition = JsonSerializer.fromJSONObject(dataset, DatasetProfileDefinitionModel);
									this.dataWizardModel = datasetModel;
									this.previewerFormGroup = <FormGroup>this.dataWizardModel.buildForm().get('datasetProfileDefinition');
								});
						});
					this.form.updateValueAndValidity();
				});
		} else {
			this.addSection();
			this.addPage();
		}
	}

	onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
		if (!isMultiplicityEnabled) {
			(<FormControl>this.form.get('multiplicity').get('min')).setValue(0);
			(<FormControl>this.form.get('multiplicity').get('max')).setValue(0);
		}
	}

	addSection() {
		const section: Section = new Section();
		this.dataModel.sections.push(section);
		(<FormArray>this.form.get('sections')).push(section.buildForm());
	}

	addPage() {
		const page: Page = new Page(this.dataModel.pages.length);
		this.dataModel.pages.push(page);
		(<FormArray>this.form.get('pages')).push(page.buildForm());
	}

	DeleteSection(index) {
		this.dataModel.sections.splice(index, 1);
		(<FormArray>this.form.get('sections')).removeAt(index);
	}

	DeletePage(index) {
		this.dataModel.pages.splice(index, 1);
		(<FormArray>this.form.get('pages')).removeAt(index);
	}

	createForm(data) {
		return this.datasetprofileAdmin.createForm(data);
	}
	updateForm(id, data) {
		return this.datasetprofileAdmin.updateForm(id, data);
	}

	onSubmit() {
		const data = this.form.value;

		if (this.profileID) {
			this.updateForm(this.profileID, data)
				.pipe(takeUntil(this._destroyed))
				.subscribe(() => {
					this.router.navigate(['/dataset-profile']);
				});
		} else {
			this.createForm(data)
				.pipe(takeUntil(this._destroyed))
				.subscribe(() => {
					this.router.navigate(['/dataset-profile']);
				});
		}
	}

	isStepActive(step: number) {
		return this.stepper && this.stepper.selectedIndex === step;
	}
}