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