argos/dmp-frontend/src/app/ui/dmp/editor/dmp-finalize-dialog/dmp-finalize-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 { DatasetStatus } from '../../../../core/common/enum/dataset-status';
import { DataTableRequest } from '../../../../core/model/data-table/data-table-request';
import { DatasetListingModel } from '../../../../core/model/dataset/dataset-listing';
import { DmpModel } from '../../../../core/model/dmp/dmp';
import { DatasetCriteria } from '../../../../core/query/dataset/dataset-criteria';
import { DatasetService } from '../../../../core/services/dataset/dataset.service';

@Component({
	selector: 'app-dmp-finalize-dialog-component',
	templateUrl: 'dmp-finalize-dialog.component.html',
	styleUrls: ['./dmp-finalize-dialog.component.scss']
})
export class DmpFinalizeDialogComponent extends BaseComponent implements OnInit {

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

	ngOnInit(): void {
		this.initialiseDatasetFinalizedRequest();
		this.initialiseDmpFinalizedRequest();
	}

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

	initialiseDmpFinalizedRequest() {
		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.datasetsFinalized, 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);
			});
		}
	}
}