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';
import { MatDialog } from '@angular/material';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { TranslateService } from '@ngx-translate/core';

@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(
		private dialog: MatDialog,
		private language: TranslateService,
		) { }

	ngOnChanges(){
		this.setTargetField(null);
	}

	get isMultiplicityEnabled(){
		if(!this.form.get('multiplicity')){
			return false;
		}

		if (this.form.get('multiplicity').value.min > 0 || this.form.get('multiplicity').value.max > 0) {
			return true;
		}

		return false;
	}


	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: MatCheckboxChange) {

		const multiplicity = this.form.get('multiplicity') as FormGroup;

		const minControl = multiplicity.get('min');
		const maxControl = multiplicity.get('max');

		if (isMultiplicityEnabled.checked) {
			minControl.setValue(0);
			maxControl.setValue(1);
		}else{
			minControl.setValue(0);
			maxControl.setValue(0);
		}

		minControl.updateValueAndValidity();
		maxControl.updateValueAndValidity();
		
	}

	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(){
		
		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
			restoreFocus: false,
			data: {
				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
				isDeleteConfirmation: true
			}
		});
		dialogRef.afterClosed().subscribe(result => {
			if (result) {
				this._deleteTargetField();
			}
		});
	
	}


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

	}
}