argos/dmp-frontend/src/app/dmps/editor/dmp-finalise-dialog/dmp-finalise-dialog.component.ts

import { Component, Inject, OnInit, ViewChild } from '@angular/core';
import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatDialogRef, MatSelectionList, MAT_DIALOG_DATA } from '@angular/material';
import { Router } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../core/common/base/base.component';
import { DatasetCriteria } from '../../../models/criteria/dataset/DatasetCriteria';
import { DataManagementPlanModel } from '../../../models/data-managemnt-plans/DataManagementPlanModel';
import { DataTableRequest } from '../../../models/data-table/DataTableRequest';
import { DatasetListingModel } from '../../../models/datasets/DatasetListingModel';
import { DatasetStatus } from '../../../models/datasets/DatasetWizardModel';
import { DatasetService } from '../../../services/dataset/dataset.service';

@Component({
	selector: 'app-dmp-finalise-dialog-component',
	templateUrl: 'dmp-finalise-dialog.component.html',

})
export class DMPFinaliseDialogComponent extends BaseComponent implements OnInit {

	@ViewChild('datasetsDraftSelectionList') selectionList: MatSelectionList;
	public formGroup: FormGroup;
	public submitFunction: (items: DatasetListingModel[]) => any;
	public dmp: DataManagementPlanModel;
	public datasetsFinalised: DatasetListingModel[];
	public datasetsDraft: DatasetListingModel[];
	constructor(
		public router: Router,
		public dialogRef: MatDialogRef<DMPFinaliseDialogComponent>,
		public dmpService: DatasetService,
		@Inject(MAT_DIALOG_DATA) public data: any
	) {
		super();
		this.submitFunction = data['submitFunction'];
		this.dmp = data['dmp'];
	}

	ngOnInit(): void {
		this.initialiseDatasetFinalisedRequest();
		this.initialiseDMPFinalisedRequest();
	}

	initialiseDatasetFinalisedRequest() {
		const request = new DataTableRequest<DatasetCriteria>(null, null, null);
		request.criteria = new DatasetCriteria();
		request.criteria.dmpIds = [this.dmp.id];
		request.criteria.status = DatasetStatus.Finalised;
		this.dmpService.getPaged(request).map(x => x.data)
			.pipe(takeUntil(this._destroyed))
			.subscribe(result => {
				this.datasetsFinalised = result;
				this.createFormGroup();
			});
	}


	initialiseDMPFinalisedRequest() {
		const request = new DataTableRequest<DatasetCriteria>(null, null, null);
		request.criteria = new DatasetCriteria();
		request.criteria.dmpIds = [this.dmp.id];
		request.criteria.status = DatasetStatus.Draft;
		this.dmpService.getPaged(request).map(x => x.data)
			.pipe(takeUntil(this._destroyed))
			.subscribe(result => {
				this.datasetsDraft = result;
			});
	}

	createFormGroup() {
		this.formGroup = new FormBuilder().group({
			datasets: [this.datasetsFinalised, this.minLengthArray(1)]
		});
	}

	onSubmit() {
		//this.formGroup.get('datasets').patchValue(this.formGroup.get('datasets').value.push(this.selectionList.selectedOptions.selected.map(x => x.value)));
		this.touchAllFormFields(this.formGroup);
		if (!this.formGroup.valid) { return; }
		this.submitFunction(this.formGroup.get('datasets').value);
	}

	minLengthArray(min: number) {
		return (c: AbstractControl): { [key: string]: any } => {
			if (c.value.length >= min) {
				return null;
			}
			return { 'minLengthArray': { valid: false } };
		};
	}

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