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

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

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

export class FormComponent 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,
	) {
		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).subscribe((data) => {
				this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
				this.form = this.dataModel.buildForm();
				this.form.valueChanges.subscribe(change => {
					this.datasetProfileAdminService.preview(this.dataModel).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).subscribe((data) => {
				this.dataModel = JsonSerializer.fromJSONObject(data, DatasetProfileModelAdmin);
				this.form = this.dataModel.buildForm();
				this.form.valueChanges.subscribe(change => {
					this.datasetProfileAdminService.preview(this.dataModel).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).subscribe(() => {
				this.router.navigate(['/dataset-profile']);
			});
		} else {
			this.createForm(data).subscribe(() => {
				this.router.navigate(['/dataset-profile']);
			});
		}
	}

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