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

import { AfterViewInit, Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormArray, AbstractControl } from '@angular/forms';
import { FormFocusService } from '../../form-focus/form-focus.service';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
import { DatasetDescriptionSectionEditorModel, DatasetDescriptionCompositeFieldEditorModel } from '../../dataset-description-form.model';
import { FormCompositeFieldComponent } from '../form-composite-field/form-composite-field.component';
import { LinkToScroll } from '../../tableOfContentsMaterial/table-of-contents';
import { ToCEntry, ToCEntryType } from '../../dataset-description.component';
import { VisibilityRuleSource } from '../../visibility-rules/models/visibility-rule-source';
import { VisibilityRule } from '../../visibility-rules/models/visibility-rule';
import { Rule } from '@app/core/model/dataset-profile-definition/rule';


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

	//@Input() section: DatasetDescriptionSectionEditorModel;
	@Input() datasetProfileId: String;
	@Input() form: FormGroup;
	@Input() tocentry: ToCEntry;
	@Input() pathName: string;
	@Input() path: string;
	@Input() linkToScroll: LinkToScroll;
	@Input() hiddenEntriesIds: string[] = [];
	//trackByFn = (index, item) => item ? item['id'] : null;
	panelExpanded = true;
	// sub = true;
	subsectionLinkToScroll: LinkToScroll;


	@Output() askedToScroll = new EventEmitter<string>();
	
	tocentriesType = ToCEntryType;
	@Input() TOCENTRY_ID_PREFIX="";

	constructor(
		public visibilityRulesService: VisibilityRulesService,
		private formFocusService: FormFocusService
	) { }

	ngOnInit() {
		// if (this.section) {
		// 	this.form = this.visibilityRulesService.getFormGroup(this.section.id);
		// }

		if(this.tocentry){//maybe not needed as well
			this.form = this.tocentry.form as FormGroup;
		}
	}

	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;
				}
			}
		}
	}

	// ngAfterViewInit() {
	// 	this.visibilityRulesService.triggerVisibilityEvaluation();
	// }

	addMultipleField(fieldsetIndex: number) {
		const compositeFieldToBeCloned = (this.form.get('compositeFields').get('' + fieldsetIndex) as FormGroup).getRawValue();
		const multiplicityItemsArray = (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems')));
		const idMappings = [] as {old: string, new: string}[];
		const compositeField: DatasetDescriptionCompositeFieldEditorModel = new DatasetDescriptionCompositeFieldEditorModel().cloneForMultiplicity(compositeFieldToBeCloned, multiplicityItemsArray.length,idMappings);




		// ** COMPOSITE FIELD IS SHOWN OR HIDDEN FROM ANOTHER ELEMENT
		const compositeFieldVisibilityDependencies = this.visibilityRulesService.getVisibilityDependency(compositeFieldToBeCloned);
		if(compositeFieldVisibilityDependencies && compositeFieldVisibilityDependencies.length){

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

		// console.log('idMappings ', idMappings);
		compositeFieldToBeCloned.fields.forEach(element => {
			// console.log(this.visibilityRulesService.getVisibilityDependency(element.id));
			const dependency = this.visibilityRulesService.getVisibilityDependency(element.id);



			try{
				
				if(dependency && dependency.length){
					
					// * INNER VISIBILITY DEPENDENCIES
					// * IF INNER INPUT HIDES ANOTHER INNER INPUT

					const innerDependency = compositeFieldToBeCloned.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
						} 
	
						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
					}
					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,
								type: ''							
							}
							this.visibilityRulesService.addNewRule(visRule);
						});
					}
				}


				// console.log(`for ${element.id} targets are`, outerTargets);
			} catch {
				console.log('error');
			}

		});
		// console.log(this.visibilityRulesService);
		// console.log(this.visibilityRulesService.getVisibilityDependency());
		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);
		}
		(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0);
	}

	deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
		const multiplicityItemsArray = (<FormArray>(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';
			}
		});
	}

	// isElementVisible(fieldSet: CompositeField): boolean {
	// 	return fieldSet && fieldSet.fields && fieldSet.fields.length > 0
	// }

	// next(compositeField: CompositeField) {
	// 	this.formFocusService.focusNext(compositeField);
	// }



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