argos/dmp-frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
import { MatDialog } from "@angular/material/dialog";
import { DescriptionTemplateFieldSet } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
import { takeUntil } from 'rxjs/operators';
import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { DescriptionPropertyDefinitionEditorModel, DescriptionPropertyDefinitionFieldSetEditorModel } from '../../../description-editor.model';
import { FormFieldSetEditorDialogComponent } from './dialog-editor/form-fieldset-editor-dialog.component';
import { cloneAbstractControl } from '@app/utilities/enhancers/utils';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { Guid } from '@common/types/guid';
import { AnnotationDialogComponent } from '@app/ui/annotations/annotation-dialog-component/annotation-dialog.component';
import { AnnotationEntityType } from '@app/core/common/enum/annotation-entity-type';

@Component({
	selector: 'app-description-form-field-set',
	templateUrl: './form-field-set.component.html',
	styleUrls: ['./form-field-set.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class DescriptionFormFieldSetComponent extends BaseComponent {

	@Input() fieldSet: DescriptionTemplateFieldSet;
	@Input() propertiesFormGroup: UntypedFormGroup;
	@Input() descriptionId: Guid;

	get isMultiplicityEnabled() {
		return this.fieldSet.multiplicity != null && this.fieldSet.multiplicity.min != 0 && this.fieldSet.multiplicity.max != 0;
	}






	isVisibleByVisibilityService: boolean = true;
	@Input() visibilityRulesService: VisibilityRulesService;
	@Input() path: String;


	@Input() datasetProfileId: String;
	// @Input() form: UntypedFormGroup;
	@Input() isChild: Boolean = false;
	@Input() showDelete: Boolean = false;
	@Input() tocentry: ToCEntry;
	@Input() tableRow: boolean = false;
	@Input() showTitle: boolean = true;
	@Input() placeholderTitle: boolean = false;
	@Input() validationErrorModel: ValidationErrorModel;

	constructor(
		private dialog: MatDialog,
		private changeDetector: ChangeDetectorRef
	) {
		super();
	}

	ngOnInit() {
		// this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
		// 	// console.log('getElementVisibilityMapObservable form field');
		// 	if (x[this.fieldSet.id]) {
		// 		this.isVisibleByVisibilityService = x[this.fieldSet.id];
		// 		// this.changeDetector.markForCheck();
		// 	} else {
		// 		this.isVisibleByVisibilityService = false;
		// 	}
		// });
		// if (this.tocentry) {
		// 	this.form = this.tocentry.form as UntypedFormGroup;
		// }
	}

	addMultiplicityField() {
		const formArray = this.propertiesFormGroup?.get('items') as UntypedFormArray;
		if (formArray.disabled) {
			return;
		}

		const item: DescriptionPropertyDefinitionFieldSetEditorModel = new DescriptionPropertyDefinitionEditorModel(this.validationErrorModel).calculateFieldSetProperties(this.fieldSet, null, null);
		formArray.push((item.buildForm({rootPath: `properties.fieldSets[${this.fieldSet.id}].`}).get('items') as UntypedFormArray).at(0));

	}

	deleteMultiplicityField(fieldSetIndex: number): void {
		const formArray = this.propertiesFormGroup.get('items') as UntypedFormArray;
		formArray.removeAt(fieldSetIndex);
		formArray.controls.forEach((fieldSet, index) => {
			fieldSet.get('ordinal').setValue(index + 1);
		});

		//Reapply validators
		DescriptionPropertyDefinitionFieldSetEditorModel.reapplyValidators(
			{
				formArray: formArray,
				validationErrorModel: this.validationErrorModel,
				rootPath: `properties.fieldSets[${this.fieldSet.id}].`
			}
		);
		formArray.markAsDirty();
	}

	editTableMultiplicityFieldInDialog(fieldSetIndex: number) {
		const dialogRef = this.dialog.open(FormFieldSetEditorDialogComponent, {
			width: '750px',
			disableClose: true,
			data: {
				fieldSet: this.fieldSet,
				propertiesFormGroup: cloneAbstractControl((this.propertiesFormGroup?.get('items') as UntypedFormArray).at(fieldSetIndex))
			}
		});
		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(data => {
			if (data) {
				(this.propertiesFormGroup?.get('items') as UntypedFormArray).at(fieldSetIndex).patchValue(data.value);
				this.changeDetector.detectChanges();
			}
		});
	}

	//
	//
	// Annotations
	//
	//
	showAnnotations(fieldSetId: string) {
		const dialogRef = this.dialog.open(AnnotationDialogComponent, {
			width: '40rem',
			maxWidth: '90vw',
			maxHeight: '90vh',
			data: {
				entityId: this.descriptionId,
				anchor: fieldSetId,
				entityType: AnnotationEntityType.Description
			}
		});
		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
			if (result && result.success) {
				//TODO refactor
			}
		});
	}



	// deleteCompositeFieldFormGroup() {

	// 	const compositeFieldId = ((this.form.get('multiplicityItems') as UntypedFormArray).get('' + 0) as UntypedFormGroup).getRawValue().id;
	// 	const fieldIds = (this.form.get('fields') as UntypedFormArray).controls.map(control => control.get('id').value) as string[];

	// 	const numberOfItems = this.form.get('multiplicityItems').get('' + 0).get('fields').value.length;
	// 	for (let i = 0; i < numberOfItems; i++) {
	// 		const multiplicityItem = this.form.get('multiplicityItems').get('' + 0).get('fields').get('' + i).value;
	// 		this.form.get('fields').get('' + i).patchValue(multiplicityItem);
	// 	}
	// 	(<UntypedFormArray>(this.form.get('multiplicityItems'))).removeAt(0);


	// 	this.visibilityRulesService.removeAllIdReferences(compositeFieldId);
	// 	fieldIds.forEach(x => this.visibilityRulesService.removeAllIdReferences(x));
	// }

	// deleteMultipeFieldFromCompositeFormGroup() {
	// 	const parent = this.form.parent;
	// 	const index = (parent as UntypedFormArray).controls.indexOf(this.form);

	// 	const currentId = this.form.get('id').value;
	// 	const fieldIds = (this.form.get('fields') as UntypedFormArray).controls.map(control => control.get('id').value) as string[];


	// 	this.visibilityRulesService.removeAllIdReferences(currentId);
	// 	fieldIds.forEach(x => this.visibilityRulesService.removeAllIdReferences(x));

	// 	(parent as UntypedFormArray).removeAt(index);
	// 	(parent as UntypedFormArray).controls.forEach((control, i) => {
	// 		try {
	// 			control.get('ordinal').setValue(i);
	// 		} catch {
	// 			throw 'Could not find ordinal';
	// 		}
	// 	});
	// }
}