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';
import { DescriptionFormAnnotationService } from '../../description-form-annotation.service';

@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,
		private descriptionFormAnnotationService: DescriptionFormAnnotationService
	) {
		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(changesMade => {
			if (changesMade) {
				this.descriptionFormAnnotationService.refreshAnnotations(() => {
					this.changeDetector.markForCheck();
				});
			}
		});
	}
}