argos/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts

import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';
import { FieldEditorModel } from '../../../admin/field-editor-model';
import { Guid } from '@common/types/guid';
import { RuleEditorModel } from '../../../admin/rule-editor-model';
import { ValidationType } from '@app/core/common/enum/validation-type';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';

@Component({
	selector: 'app-dataset-profile-editor-composite-field-component',
	templateUrl: './dataset-profile-editor-composite-field.component.html',
	styleUrls: ['./dataset-profile-editor-composite-field.component.scss']
})
export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnChanges {

	@Input() form: FormGroup;
	@Input() indexPath: string;
	@Input() viewOnly: boolean;

	@Input() numbering: string;


	previewForm: FormGroup;
	// isComposite = false;
	isMultiplicityEnabled = false;
	viewStyleEnum = DatasetProfileFieldViewStyle;

	constructor() { }

	ngOnChanges(){
		this.setTargetField(null);
	}
	ngOnInit() {
		//this.addNewField();
		if (this.form.get('multiplicity')) {
			if (this.form.get('multiplicity').value.min > 1 || this.form.get('multiplicity').value.max > 1) {
				this.isMultiplicityEnabled = true;
			}
		}
		// this.isComposite = (this.form.get('fields') as FormArray).length > 1;

		if (this.viewOnly) {
			this.form.get('hasCommentField').disable();
		}

		//SET UP TARGET FIELD
		if((this.form.get('fields') as FormArray).length>0){
			//get the first field in list
			this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
		}

	}


	generatePreview(){
		const editorModel = new DatasetDescriptionCompositeFieldEditorModel();
		editorModel.title = this.form.get('title').value;
		editorModel.description = this.form.get('description').value;
		editorModel.extendedDescription = this.form.get('extendedDescription').value;
		editorModel.additionalInformation = this.form.get('additionalInformation').value;
		editorModel.hasCommentField = this.form.get('hasCommentField').value;
		editorModel.fields = [];

		(this.form.get('fields') as FormArray).controls.forEach(field=>{
			const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
			
			fieldEditorModel.viewStyle= {
					renderStyle: field.get('viewStyle').get('renderStyle').value,
					cssClass: null
				};
			fieldEditorModel.defaultValue = field.get('defaultValue').value;
			switch (field.get('viewStyle').get('renderStyle').value) {
				case DatasetProfileFieldViewStyle.TextArea:
					fieldEditorModel.data = { 
						label: field.get('data').get('label').value
					};
					break;
			
				default:
					break;
			}
			

			editorModel.fields.push(fieldEditorModel);
		});


		this.previewForm = editorModel.buildForm();
	}

	onIsCompositeChange(isComposite: boolean) {
		if (!isComposite && (<FormArray>this.form.get('fields')).length > 1) {
			for (let i = 0; i < (<FormArray>this.form.get('fields')).length - 1; i++) {
				(<FormArray>this.form.get('fields')).removeAt(1);
			}
			(this.form.get('fields') as FormArray).controls.splice(1);
		}
		if ((<FormArray>this.form.get('fields')).length === 0) {
			const field: FieldEditorModel = new FieldEditorModel();
			(<FormArray>this.form.get('fields')).push(field.buildForm());
		}
	}

	onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
		if (!isMultiplicityEnabled) {
			(<FormControl>this.form.get('multiplicity').get('min')).setValue(0);
			(<FormControl>this.form.get('multiplicity').get('max')).setValue(0);
		}
	}

	addNewField() {
		const field: FieldEditorModel = new FieldEditorModel();
		field.id=Guid.create().toString();
		(<FormArray>this.form.get('fields')).push(field.buildForm());
	}

	DeleteField(index) {
		(<FormArray>this.form.get('fields')).removeAt(index);
	}

	getFieldTile(formGroup: FormGroup, index: number) {
		if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
		return "Field " + (index + 1);
	}


	targetField:FormGroup;
	validationTypeEnum = ValidationType;


	addVisibilityRule(targetField: FormGroup){
		const rule: RuleEditorModel = new RuleEditorModel();
		(<FormArray>targetField.get('visible').get('rules')).push(rule.buildForm());
	}
	toggleRequired(targetField: FormGroup, event:MatCheckboxChange){
		
		let validationsControl = targetField.get('validations') as FormControl;
		let validations: Array<ValidationType> = validationsControl.value;

		if(event.checked){
			if(!validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
				// validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
				// validationsControl.updateValueAndValidity();
				validations.push(ValidationType.Required);
				// validationsControl.setValue(validations);
				validationsControl.updateValueAndValidity();
			}
		}else{
			validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
			validationsControl.updateValueAndValidity();
		}
		
		
		// if(validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
		// 	validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
		// 	validationsControl.updateValueAndValidity();
		// }else{ 
		// 	//SET REQUIRED VALIDATOR
		// 	console.log('setting required validator');
		// 	validations.push(ValidationType.Required);
		// 	validationsControl.setValue(validations);
		// 	validationsControl.updateValueAndValidity();
		// }
	}
	setTargetField(field:FormGroup){
		this.targetField = field;
	}


	deleteTargetField(){
		if(!this.targetField) return;

		let index = -1;

		const fields = this.form.get('fields') as FormArray;

		for(let i=0;i< fields.length; i++){
			let field = fields.at(i);
			if(field.get('id').value === this.targetField.get('id').value){//index found
				index = i;
				break;
			}
		}

		if(index>=0){//target found in fields
			this.DeleteField(index);
			this.targetField = null;
		}

	}
}