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

import {
	ChangeDetectionStrategy,
	ChangeDetectorRef,
	Component,
	EventEmitter,
	Input,
	OnChanges,
	OnInit,
	Output,
	SimpleChanges
} from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { DescriptionTemplateSection } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
import { DescriptionFieldEditorModel } from '../../../description-editor.model';
import { ToCEntry } from '../../../table-of-contents/models/toc-entry';
import { ToCEntryType } from '../../../table-of-contents/models/toc-entry-type.enum';
import { LinkToScroll } from '../../../table-of-contents/table-of-contents.component';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';


@Component({
	selector: 'app-form-section',
	templateUrl: './form-section.component.html',
	styleUrls: ['./form-section.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class DescriptionFormSectionComponent extends BaseComponent implements OnInit, OnChanges {

	@Input() section: DescriptionTemplateSection;
	@Input() propertiesFormGroup: UntypedFormGroup;
	@Input() visibilityRulesService: VisibilityRulesService;
	@Input() path: string;

	// @Input() datasetProfileId: String;
	// @Input() form: UntypedFormGroup;
	@Input() tocentry: ToCEntry;
	@Input() pathName: string;
	@Input() linkToScroll: LinkToScroll;
	@Input() hiddenEntriesIds: string[] = [];
	panelExpanded = true;
	subsectionLinkToScroll: LinkToScroll;
	@Output() askedToScroll = new EventEmitter<string>();
	tocentriesType = ToCEntryType;
	@Input() TOCENTRY_ID_PREFIX = "";

	constructor(
		private changeDetector: ChangeDetectorRef
	) {
		super();

	}

	ngOnInit() {

		// this.visibilityRulesService.getElementVisibilityMapObservable().pipe(takeUntil(this._destroyed)).subscribe(x => {
		// 	this.changeDetector.markForCheck();
		// });
		// Set comment fields to properties
		// this.section.fieldSets.forEach(fieldSet => {
		// 	if (fieldSet.hasCommentField && !this.propertiesFormGroup.contains('commentFieldValue' + fieldSet.id)) {
		// 		const item: DescriptionFieldEditorModel = new DescriptionFieldEditorModel();
		// 		item.key = 'commentFieldValue' + fieldSet.id;
		// 		this.propertiesFormGroup.addControl('commentFieldValue' + fieldSet.id, item.buildForm());
		// 	}
		// });

		//TODO uncomment
		// if (this.tocentry) {//maybe not needed as well
		// 	this.form = this.tocentry.form as UntypedFormGroup;
		// }
		// this.initMultipleFieldsVisibility(); 
	}

	ngOnChanges(changes: SimpleChanges) {

		if (changes['linkToScroll']) {
			if (changes['linkToScroll'].currentValue && changes['linkToScroll'].currentValue.section) {

				if (this.pathName === changes['linkToScroll'].currentValue.section) {
					this.panelExpanded = true;
				} else if (changes['linkToScroll'].currentValue.section.includes(this.pathName)) {
					this.subsectionLinkToScroll = changes['linkToScroll'].currentValue;
					this.panelExpanded = true;
				}
			}
		}
	}

	// setMultipleFieldVisibility(parentCompositeField, compositeField: DatasetDescriptionCompositeFieldEditorModel, idMappings: { old: string, new: string }[]) {
	// 	// ** COMPOSITE FIELD IS SHOWN OR HIDDEN FROM ANOTHER ELEMENT
	// 	const compositeFieldVisibilityDependencies = this.visibilityRulesService.getVisibilityDependency(parentCompositeField);
	// 	if (compositeFieldVisibilityDependencies && compositeFieldVisibilityDependencies.length) {

	// 		compositeFieldVisibilityDependencies.forEach(x => {
	// 			const visRule: Rule = {
	// 				targetField: compositeField.id,
	// 				sourceField: x.sourceControlId,
	// 				requiredValue: x.sourceControlValue
	// 			}
	// 			this.visibilityRulesService.addNewRule(visRule);
	// 		});
	// 	}

	// 	// console.log('idMappings ', idMappings);
	// 	parentCompositeField.fields.forEach(element => {
	// 		// console.log(this.visibilityRulesService.getVisibilityDependency(element.id));
	// 		const dependency = this.visibilityRulesService.getVisibilityDependency(element.id);
	// 		if (dependency && dependency.length) {
	// 			// * INNER VISIBILITY DEPENDENCIES
	// 			// * IF INNER INPUT HIDES ANOTHER INNER INPUT
	// 			const innerDependency = parentCompositeField.fields.reduce((innerD, currentElement) => {
	// 				const innerDependecies = dependency.filter(d => d.sourceControlId === currentElement.id);
	// 				return [...innerD, ...innerDependecies];
	// 			}, []) as VisibilityRuleSource[];
	// 			if (innerDependency.length) {
	// 				//Build visibility source
	// 				const updatedRules = innerDependency.map(x => {
	// 					const newId = idMappings.find(y => y.old === x.sourceControlId);
	// 					return { ...x, sourceControlId: newId.new };
	// 				});
	// 				// const visRule: VisibilityRule = {
	// 				// 	targetControlId: idMappings.find(x => x.old === element.id).new,
	// 				// 	sourceVisibilityRules: updatedRules
	// 				// }


	// 				const rules = updatedRules.map(x => {
	// 					return {
	// 						requiredValue: x.sourceControlValue,
	// 						sourceField: x.sourceControlId,
	// 						targetField: idMappings.find(l => l.old === element.id).new,
	// 						type: ''
	// 					} as Rule;
	// 				});

	// 				rules.forEach(rule => {
	// 					this.visibilityRulesService.addNewRule(rule);
	// 				})

	// 				// this.visibilityRulesService.appendVisibilityRule(visRule);
	// 			}

	// 		}


	// 		// * OUTER DEPENDENCIES

	// 		// * IF INNER INPUT HIDES OUTER INPUTS
	// 		const innerIds = idMappings.map(x => x.old) as string[];

	// 		const outerTargets = this.visibilityRulesService.getVisibilityTargets(element.id).filter(x => !innerIds.includes(x));

	// 		outerTargets.forEach(target => {

	// 			const outerRules = (this.visibilityRulesService.getVisibilityDependency(target) as VisibilityRuleSource[]).filter(x => x.sourceControlId === element.id);
	// 			const updatedRules = outerRules.map(x => {
	// 				return { ...x, sourceControlId: idMappings.find(y => y.old === element.id).new };
	// 			});

	// 			// const visRule: VisibilityRule = {
	// 			// 	targetControlId: target,
	// 			// 	sourceVisibilityRules: updatedRules
	// 			// }


	// 			const rules = updatedRules.map(x => {
	// 				return {
	// 					requiredValue: x.sourceControlValue,
	// 					sourceField: x.sourceControlId,
	// 					targetField: target,
	// 					type: ''
	// 				} as Rule;
	// 			})
	// 			rules.forEach(rule => {
	// 				this.visibilityRulesService.addNewRule(rule);
	// 			})
	// 			// this.visibilityRulesService.appendVisibilityRule(visRule);
	// 		});
	// 		// * IF INNER INPUT IS HIDDEN BY OUTER INPUT
	// 		if (dependency && dependency.length) {
	// 			const fieldsThatHideInnerElement = dependency.filter(x => !innerIds.includes(x.sourceControlId));
	// 			if (fieldsThatHideInnerElement.length) {
	// 				fieldsThatHideInnerElement.forEach(x => {
	// 					const visRule: Rule = {
	// 						targetField: idMappings.find(l => l.old === element.id).new,
	// 						sourceField: x.sourceControlId,
	// 						requiredValue: x.sourceControlValue
	// 					}
	// 					const shouldBeVisibile = this.visibilityRulesService.checkTargetVisibilityProvidedBySource(x.sourceControlId, element.id);
	// 					this.visibilityRulesService.addNewRule(visRule, shouldBeVisibile);
	// 				});
	// 			}
	// 		}
	// 		// console.log(`for ${element.id} targets are`, outerTargets);
	// 	});
	// }

	// initMultipleFieldsVisibility() {
	// 	(this.form.get('compositeFields') as UntypedFormArray).controls.forEach(control => {
	// 		let parentCompositeField = (control as UntypedFormGroup).getRawValue();
	// 		if (parentCompositeField.multiplicityItems && parentCompositeField.multiplicityItems.length > 0) {
	// 			parentCompositeField.multiplicityItems.forEach(compositeField => {
	// 				let idMappings: { old: string, new: string }[] = [{ old: parentCompositeField.id, new: compositeField.id }];
	// 				parentCompositeField.fields.forEach((field, index) => {
	// 					idMappings.push({ old: field.id, new: compositeField.fields[index].id });
	// 				});
	// 				this.setMultipleFieldVisibility(parentCompositeField, compositeField, idMappings);
	// 			})
	// 		}
	// 	});
	// }

	// addMultipleField(fieldsetIndex: number) {
	// 	if (this.form.get('compositeFields').get('' + fieldsetIndex).disabled) {
	// 		return;
	// 	}
	// 	const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as UntypedFormGroup).getRawValue();
	// 	const multiplicityItemsArray = (<UntypedFormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));

	// 	const ordinal = multiplicityItemsArray.length ? multiplicityItemsArray.controls.reduce((ordinal, currentControl) => {
	// 		const currentOrdinal = currentControl.get('ordinal').value as number;

	// 		if (currentOrdinal >= ordinal) {
	// 			return currentOrdinal + 1;
	// 		}
	// 		return ordinal as number;
	// 	}, 0) : 0;
	// 	const idMappings = [] as { old: string, new: string }[];
	// 	const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned, ordinal, idMappings);

	// 	this.setMultipleFieldVisibility(compositeFieldToBeCloned, compositeField, idMappings);
	// 	multiplicityItemsArray.push(compositeField.buildForm());
	// }

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

	// deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
	// 	const multiplicityItemsArray = (<UntypedFormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems')));
	// 	multiplicityItemsArray.removeAt(fildIndex);
	// 	multiplicityItemsArray.controls.forEach((control, i) => {
	// 		try {
	// 			control.get('ordinal').setValue(i);
	// 		} catch {
	// 			throw 'Could not find ordinal';
	// 		}
	// 	});
	// }

	// onAskedToScroll(id: string) {
	// 	this.panelExpanded = true;
	// 	this.askedToScroll.emit(id);
	// }

	// visibleControls(controls: any[]) {
	// 	return controls.filter(control => this.visibilityRulesService.isVisibleMap[control.get('id').value));
	// }
}