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


import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { AbstractControl, AbstractControlOptions, FormArray, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
import { ValidationType } from '@app/core/common/enum/validation-type';
import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BooleanDecisionFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/boolean-decision-field-data-editor-model';
import { CheckBoxFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/check-box-field-data-editor-model';
import { DatePickerDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/date-picker-data-editor-models';
import { FreeTextFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/free-text-field-data-editor-model';
import { RadioBoxFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/radio-box-field-data-editor-model';
import { ResearchersAutoCompleteFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/researchers-auto-complete-field-data-editor-model';
import { TextAreaFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/text-area-field-data-editor-model';
import { WordListFieldDataEditorModel } from '@app/ui/admin/dataset-profile/admin/field-data/word-list-field-data-editor-model';
import { RuleEditorModel } from '@app/ui/admin/dataset-profile/admin/rule-editor-model';
import { BaseComponent } from '@common/base/base.component';
import { debounce, debounceTime, takeUntil } from 'rxjs/operators';
import { ExternalDatasetEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { DataRepositoriesDataEditorModel } from '../../../admin/field-data/data-repositories-data-editor-models';
import { RegistriesDataEditorModel } from '../../../admin/field-data/registries-data-editor-models';
import { ServicesDataEditorModel } from '../../../admin/field-data/services-data-editor-models';
import { TagsDataEditorModel } from '../../../admin/field-data/tags-data-editor-models';
import { ResearchersDataEditorModel } from '../../../admin/field-data/researchers-data-editor-models';
import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models';
import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/dataset-identifier-data-editor-models';
import { ExternalDatasetsDataEditorModel } from '../../../admin/field-data/external-datasets-data-editor-models';
import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models';
import { DatasetDescriptionFieldEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { Subject, Subscription } from 'rxjs';
import { ViewStyleType } from './view-style-enum';
import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
import { Guid } from '@common/types/guid';
import { ErrorStateMatcher, MatSlideToggleChange } from '@angular/material';
import { DefaultValueEditorModel } from '../../../admin/default-value-editor-model';

@Component({
	selector: 'app-dataset-profile-editor-field-component',
	templateUrl: './dataset-profile-editor-field.component.html',
	styleUrls: ['./dataset-profile-editor-field.component.scss']
})
export class DatasetProfileEditorFieldComponent extends BaseComponent implements OnInit, ErrorStateMatcher {
	@Input() viewOnly: boolean;
	@Input() form: FormGroup;
	@Input() showOrdinal = true;
	@Input() indexPath: string;
	validationTypeEnum = ValidationType;
	viewStyleEnum = DatasetProfileFieldViewStyle;
	// isFieldMultiplicityEnabled = false;

	viewType: ViewStyleType;
	viewTypeEnum =  ViewStyleType;
	private subject$:Subject<DatasetDescriptionFieldEditorModel> = new Subject<DatasetDescriptionFieldEditorModel>();
	


	@Input() expandView: boolean = true;


	@Output() delete = new EventEmitter<void>();

	constructor(
		public enumUtils: EnumUtils,
		public datasetProfileService: DatasetProfileService
	) { super(); 
	
	}


	isErrorState(control: FormControl, form: FormGroupDirective | NgForm): boolean {

		if(this.form.get('viewStyle').untouched) return false;
		
		return this.form.get('viewStyle').invalid;
	}

	ngOnInit() {

		this.subject$.pipe(takeUntil(this._destroyed)).pipe(debounceTime(600)).subscribe(model=>{
			this.previewForm = model.buildForm();
		});



		this.showPreview = true;
		// if (this.form.get('multiplicity')) {
		// 	if (this.form.get('multiplicity').value.min > 1 && this.form.get('multiplicity').value.max > 1) {
		// 		this.isFieldMultiplicityEnabled = true;
		// 	}
		// }

		if(this.form.get('viewStyle').get('renderStyle').value){

			// this.matcher.setReference(this.form);
			const type = this.form.get('viewStyle').get('renderStyle').value;
			
			switch(type){
				case DatasetProfileFieldViewStyle.BooleanDecision:
					this.viewType = this.viewTypeEnum.BooleanDecision;
					break;
				case DatasetProfileFieldViewStyle.CheckBox:
					this.viewType = this.viewTypeEnum.CheckBox;
					break;
				case DatasetProfileFieldViewStyle.ComboBox:

					const comboType = this.form.get('data').get('type').value;
					if(comboType === DatasetProfileComboBoxType.Autocomplete){
						this.viewType = this.viewTypeEnum.Other;
					}else if(comboType === DatasetProfileComboBoxType.WordList){
						this.viewType = this.viewTypeEnum.Select;
					}
					break;
				case DatasetProfileFieldViewStyle.InternalDmpEntities:
					this.viewType = this.viewTypeEnum.InternalDmpEntities;
					break;
				case DatasetProfileFieldViewStyle.FreeText:
					this.viewType = this.viewTypeEnum.FreeText;
					break;
				case DatasetProfileFieldViewStyle.RadioBox:
					this.viewType = this.viewTypeEnum.RadioBox;
					break;
				case DatasetProfileFieldViewStyle.TextArea:
					this.viewType = this.viewTypeEnum.TextArea;
					break;
				case DatasetProfileFieldViewStyle.DatePicker:
					this.viewType = this.viewTypeEnum.DatePicker;
					break;
				case DatasetProfileFieldViewStyle.ExternalDatasets:
					this.viewType = this.viewTypeEnum.ExternalDatasets;
					break;
				case DatasetProfileFieldViewStyle.DataRepositories:
					this.viewType = this.viewTypeEnum.DataRepositories;
					break;
				case DatasetProfileFieldViewStyle.Registries:
					this.viewType = this.viewTypeEnum.Registries;
					break;
				case DatasetProfileFieldViewStyle.Services:
					this.viewType = this.viewTypeEnum.Services;
					break;
				case DatasetProfileFieldViewStyle.Tags:
					this.viewType = this.viewTypeEnum.Tags;
					break;
				case DatasetProfileFieldViewStyle.Researchers:
					this.viewType = this.viewTypeEnum.Researchers;
					break;
				case DatasetProfileFieldViewStyle.Organizations:
					this.viewType = this.viewTypeEnum.Organizations;
					break;
				case DatasetProfileFieldViewStyle.DatasetIdentifier:
					this.viewType = this.viewTypeEnum.DatasetIdentifier;
					break;
				case DatasetProfileFieldViewStyle.Currency:
					this.viewType = this.viewTypeEnum.Currency;
					break;
				case DatasetProfileFieldViewStyle.Validation:
					this.viewType = this.viewTypeEnum.Validation;
					break;
			}

		}




		// this.addNewRule();

		// this.form.get('viewStyle').get('renderStyle').valueChanges
		// 	.pipe(takeUntil(this._destroyed))
		// 	.subscribe(x => {


		// 		// const previewStatus = this.showPreview;
		// 		//!! Important to be before the if statement
		// 		this.showPreview = false;

		// 		if (this.form.get('data')) {
		// 			this.form.removeControl('data');

		// 			switch (x) {
		// 				case DatasetProfileFieldViewStyle.BooleanDecision:
		// 					this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.CheckBox:
		// 					this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.ComboBox:
		// 					this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.InternalDmpEntities:
		// 					this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.FreeText:
		// 					this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.RadioBox:
		// 					this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.TextArea:
		// 					this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.DatePicker:
		// 					this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.ExternalDatasets:
		// 					this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.DataRepositories:
		// 					this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Registries:
		// 					this.form.addControl('data', new RegistriesDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Services:
		// 					this.form.addControl('data', new ServicesDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Tags:
		// 					this.form.addControl('data', new TagsDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Researchers:
		// 					this.form.addControl('data', new ResearchersDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Organizations:
		// 					this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.DatasetIdentifier:
		// 					this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Currency:
		// 					this.form.addControl('data', new CurrencyDataEditorModel().buildForm());
		// 					break;
		// 				case DatasetProfileFieldViewStyle.Validation:
		// 					this.form.addControl('data', new ValidationDataEditorModel().buildForm());
		// 					break;
		// 			}
		// 		}


		// 		//reset the preview status
		// 		// this.showPreview = previewStatus;
		// 		this.showPreview = true;
		// 	});
	}

	defaulValueRequired(viewStile: DatasetProfileFieldViewStyle): boolean {
		switch (viewStile) {
			case DatasetProfileFieldViewStyle.CheckBox:
				return true;
			case DatasetProfileFieldViewStyle.RadioBox:
			case DatasetProfileFieldViewStyle.TextArea:
			case DatasetProfileFieldViewStyle.FreeText:
			case DatasetProfileFieldViewStyle.ComboBox:
			case DatasetProfileFieldViewStyle.InternalDmpEntities:
			case DatasetProfileFieldViewStyle.BooleanDecision:
			case DatasetProfileFieldViewStyle.DatePicker:
			case DatasetProfileFieldViewStyle.ExternalDatasets:
			case DatasetProfileFieldViewStyle.DataRepositories:
			case DatasetProfileFieldViewStyle.Registries:
			case DatasetProfileFieldViewStyle.Services:
			case DatasetProfileFieldViewStyle.Tags:
			case DatasetProfileFieldViewStyle.Registries:
			case DatasetProfileFieldViewStyle.Organizations:
			case DatasetProfileFieldViewStyle.DatasetIdentifier:
			case DatasetProfileFieldViewStyle.Currency:
			case DatasetProfileFieldViewStyle.Validation:
				return false;
			default:
				return false;
		}
	}



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

	addNewRule() {
		const rule: RuleEditorModel = new RuleEditorModel();
		(<FormArray>this.form.get('visible').get('rules')).push(rule.buildForm());
	}


	private _formChangesSubscription:Subscription;
	private _showPreview: boolean = false;;

	 get showPreview(): boolean{

		return this._showPreview;
	 }

	 set showPreview(value:boolean){
		if(value == false){//hide preview
			//close subsciption
			if(this._formChangesSubscription){
				this._formChangesSubscription.unsubscribe();
				this._formChangesSubscription = null;
			}
		}

		if(value == true){
			//value is already true
			if(this._showPreview){
				if(this._formChangesSubscription){
					this._formChangesSubscription.unsubscribe();
					this._formChangesSubscription = null;
				}
			}

			//initialize
			if(this.form.get('viewStyle').get('renderStyle').value){
				this._generatePreviewForm();
			}
			this._formChangesSubscription = this.form.valueChanges.subscribe(()=>{
				this._generatePreviewForm();
			});
		}
		this._showPreview = value;
		
	 }

	previewForm: FormGroup;

	private _generatePreviewForm(){

		if(!this.form.get('data')){
			return;
		}
		this.previewForm = null;
		const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
		
		fieldEditorModel.viewStyle= {
				renderStyle: this.form.get('viewStyle').get('renderStyle').value,
				cssClass: null
			};
		
		fieldEditorModel.data = (this.form.get('data') as FormGroup).getRawValue();		
		fieldEditorModel.value = this.form.get('defaultValue').get('value').value;
		fieldEditorModel.validationRequired = (this.form.get('validations').value as Array<ValidationType>).includes(ValidationType.Required);

		if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.CheckBox){
			fieldEditorModel.value = this.form.get('defaultValue').get('value').value === 'true';	
		}
		// if(this.form.get('viewStyle').get('renderStyle').value == DatasetProfileFieldViewStyle.Researchers){
		// 	fieldEditorModel.data = new ResearchersAutoCompleteFieldDataEditorModel().buildForm().getRawValue();
		// }


		// const myTicket = Guid.create().toString();
		// this.validTicket = myTicket;
		// setTimeout(() => { //TODO
		// 	//user hasnt make any new change to inputs /show preview
		// 	if(myTicket === this.validTicket){
		// 		this.previewForm = fieldEditorModel.buildForm();
		// 	}
		// }, 600);

		this.subject$.next(fieldEditorModel);


		// setTimeout(() => {
		// 	this.previewForm = fieldEditorModel.buildForm();
		// });
	};

	

	// validTicket:string;
	// generatePreview(){
	// 	const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
			
	// 	fieldEditorModel.viewStyle= {
	// 			renderStyle: this.form.get('viewStyle').get('renderStyle').value,
	// 			cssClass: null
	// 		};
	// 	fieldEditorModel.defaultValue = this.form.get('defaultValue').value;
	// 	switch (this.form.get('viewStyle').get('renderStyle').value) {
	// 		case DatasetProfileFieldViewStyle.TextArea:
	// 			fieldEditorModel.data = { 
	// 				label: this.form.get('data').get('label').value
	// 			};
	// 			break;
		
	// 		default:
	// 			break;
	// 	}

	// 		// this.previewForm = fieldEditorModel.buildForm();


	// }
	onInputTypeChange(){
		

		const x = this.viewType;

		this.showPreview = false;

		if (this.form.get('data')) {
			this.form.removeControl('data');
		}
		

		this.form.removeControl('defaultValue');
		const defaultValueModel = new DefaultValueEditorModel();
		this.form.addControl('defaultValue',defaultValueModel.buildForm());

		switch (x) {
			case this.viewTypeEnum.BooleanDecision:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
				this.form.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.CheckBox:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
				this.form.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Select:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
				this.form.addControl('data', new WordListFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Other:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
				this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
				break;
			case this.viewTypeEnum.InternalDmpEntities:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
				this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
				break;
			case this.viewTypeEnum.FreeText:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
				this.form.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.RadioBox:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
				this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.TextArea:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
				this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.DatePicker:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
				this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.ExternalDatasets:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
				this.form.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.DataRepositories:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
				this.form.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Registries:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
				this.form.addControl('data', new RegistriesDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Services:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
				this.form.addControl('data', new ServicesDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Tags:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
				this.form.addControl('data', new TagsDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Researchers:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
				// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
				this.form.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Organizations:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
				this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.DatasetIdentifier:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
				this.form.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Currency:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
				this.form.addControl('data', new CurrencyDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Validation:
				this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
				this.form.addControl('data', new ValidationDataEditorModel().buildForm());
				break;
		}
		setTimeout(() => { //TODO
			this.showPreview = true;
		});
	}


	toggleRequired(event:MatSlideToggleChange){
		
		let validationsControl = this.form.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();
		}
		
	}

	get isRequired(){
		let validationsControl = this.form.get('validations') as FormControl;
		let validations: Array<ValidationType> = validationsControl.value;
	
		if(validations.includes(ValidationType.Required)){
			return true;
		}
		return false;
		
	}


	onDelete(){
		this.delete.emit();
	}

}