information-system-gui/src/main/webapp/app/facet-composer/facet-composer.component.ts

/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/member-ordering */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable no-console */
import { CommonModule } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { IContextNode } from 'app/services/i-context-node';
import { IResource } from 'app/services/i-resource';
import { FacetComposerService, ITypeSpecification } from './facet-composer.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';
import { IFacetComposer, IFacetProps } from './i-facet-composer';
import { SharedModule } from 'app/shared/shared.module';
import { MatSelectFilterModule } from 'mat-select-filter';



@Component({
  standalone: true,
  selector: 'jhi-facet-composer',
  templateUrl: './facet-composer.component.html',
  styleUrls: ['./facet-composer.component.scss'],
  imports:[CommonModule,MatFormFieldModule,SharedModule,
  ReactiveFormsModule,MatButtonModule,
  MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
  providers: [FacetComposerService]
})

export class FacetComposerComponent implements OnInit {
	
	titleType: string;
	titlePath: string;
	selectedOption: string;
	
    myForm: FormGroup;	//form complessiva 
    typeSpec: ITypeSpecification;
    fieldsMap: Map<string, IFacetComposer>;
    
    
  // eslint-disable-next-line @typescript-eslint/member-ordering
  constructor(private guiService: FacetComposerService, private fb: FormBuilder,
        private dialogRef:MatDialogRef<FacetComposerComponent>,
    	@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){
			this.titleType = data.type.name;
			this.titlePath = data.context.path;
			this.selectedOption = '';
		    this.typeSpec = {} as ITypeSpecification;
		    this.fieldsMap = new Map<string,IFacetComposer>();
			this.myForm = this.fb.group({});
		}


		ngOnInit(): void {
			this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
					this.typeSpec = res;
					this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj]));
					//parto con una facet per tipo
					this.createForm(res);
					});
			}
		
			onOptionsSelected(value:string): void {
				this.selectedOption = value;
				//console.debug('******onOptionsSelected?...'+value);
			}
		
		//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
	    createForm(fData:ITypeSpecification):void{
			for(let i=0; i<fData.facetSpecs.length; i++){
					const facetSpec = fData.facetSpecs[i];
					this.createFacetArrayEntry(facetSpec); 
				}
		}
		
		createFacetArrayEntry(item: IFacetComposer):void{
			const nameplus:string = item.name+'_'+item.relation;
			const singleFacetArray: FormArray = this.fb.array([]);
			singleFacetArray.push(this.createFacetGroup(item,false));
			this.myForm.addControl(nameplus,singleFacetArray);
			}
			
	
		  
		  	  addFacet(deno:string): void {
				const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno);
				const singleFacetArray = this.myForm.controls[deno] as FormArray;
				singleFacetArray.push(this.createFacetGroup(icf,true));
		  }
		  
		  
		 
		   createExtraPropGroup(): FormGroup{
				 const extraFg: FormGroup = this.fb.group({});
				 extraFg.addControl('deno', '');
				 return extraFg;
			  }
		 
			createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{
				 const facetFg: FormGroup = this.fb.group({});
				 const nameFc = this.fb.control(item.name); 
				 facetFg.addControl('facetName', nameFc);
				 
				 const maxFc = this.fb.control(item.max); 
				 facetFg.addControl('max', maxFc);
				 
				 const minFc = this.fb.control(item.min); 
				 facetFg.addControl('min', minFc);
				 				 
				 const descriptionFc = this.fb.control(item.description); 
				 facetFg.addControl('facetDescription', descriptionFc);
				 
				 const relationFc = this.fb.control(item.relation); 
				 facetFg.addControl('relationFacet', relationFc);
				 //this.itemRelations = item.relationOptions;			
				 
				 const addedFc = this.fb.control(isAdded); 
				 facetFg.addControl('isAdded', addedFc);
			  	
				 //1. creo group con le properties
				 //2. aggiungo formgroup delle properties ai controls per la facet
				// facetFg.addControl('properties',this.createPropertyControls(item.guiProps));
				return this.addPropertyControls(facetFg,item.guiProps);
			}
			
			
			
		addPropertyControls(facetFg:FormGroup, props: IFacetProps[]){
			  let fc:FormControl;
			  for(let i=0; i<props.length; i++){
				  const prop=props[i];
				  	if(prop.type==="date"){
						 fc = this.fb.control(new Date())
					 }
					 if(prop.type==="number"){
						 fc = this.fb.control(0)
					 }
					 if(prop.type==="boolean"){
						 fc = this.fb.control(true)
					 }
					 else{
						 fc = this.fb.control('') //text
					 }					 
					 if (prop.validations.length>0){
						 for (let k=0; k<prop.validations.length; k++){
							 if(prop.validations[k].name==='required'){
								 fc.addValidators(Validators.required)
							 }
							 if(prop.validations[k].name==='pattern'){
								 fc.addValidators(Validators.pattern(prop.pattern))
							 }
						 }
					 }
					 facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
			  }
			console.debug("-----------	facetFg	-------");
						console.debug(facetFg)
			console.debug("-----------------");

			return facetFg;
		  }
			  /*
			   getExtraPropsArray(nameplus:string): FormArray {
				 const  fa = this.getSingleFacetArray(nameplus);
				  return  fa.controls['extraPropsArray'] as FormArray
			  }*/
			  
			   getSingleFacetArray(nameplus:string): FormArray {
				    return this.myForm.controls[nameplus] as FormArray;
			  }
			 
			 
			onSubmit() {
			  if (this.myForm.valid) {
			    const formData = this.myForm.value;
			  //  console.log("*****		FORMDATA	*****");
			    //console.log(formData);
			    //TODO Process formData
			  }
			}	
			
			resetForm() {
			  this.myForm.reset();
			}
		  
	 
	   removeFacet(deno:string, index: number): void {
		  this.getSingleFacetArray(deno).removeAt(index);
		  this.typeSpec.facetSpecs.splice(index,1);
		}
		
			
		 close():void {
			 		this.resetForm();
			        this.dialogRef.close({event:'cancel'});
			    } 
		//chiude e basta
	}