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


import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FormArray, FormControl, FormGroup } 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 { 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 { Subscription } from 'rxjs';

@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 {
	@Input() viewOnly: boolean;
	@Input() form: FormGroup;
	@Input() showOrdinal = true;
	@Input() indexPath: string;
	validationTypeEnum = ValidationType;
	viewStyleEnum = DatasetProfileFieldViewStyle;
	isFieldMultiplicityEnabled = false;

	@Input() expandView: boolean = true;

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

	ngOnInit() {
		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;
			}
		}
		// 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;
				}
			}

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

	previewForm: FormGroup;

	generatePreviewForm(){


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


		this.previewForm = null;
		// this._showPreview = false;
		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';	
		}

		this.previewForm = fieldEditorModel.buildForm();

		// this._showPreview = true;
	};

	// 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();


	// }
}