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

/* 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 { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogActions, 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 {JSONPath} from 'jsonpath-plus'



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

export class FacetComposerComponent implements OnInit {
	
	titleType: string;
	titlePath: string;
	
    myForm: FormGroup;	//form complessiva 
   
    typeSpec: ITypeSpecification;

  // 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.typeSpec = {} as ITypeSpecification;
			this.myForm = this.fb.group({
				facets: new FormArray([
					
				])
			});
  				/*
  			this.propertyGroup = new FormGroup({
				  properties: new FormArray([]),
				  });
				  */
			}
			
			
			/*
			[INFO] An unhandled exception occurred: Script file node_modules/jsonpath-plus/dist/index-umd.js does not exist.
[INFO] See "/private/var/folders/sx/pzmn6csj17n2l3d_f1m5jmdr0000gn/T/ng-8XFcFL/angular-errors.log" for further details.
*/
		ngOnInit(): void {
			this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
					this.typeSpec = res;
					this.createForm(res);
					});
			this.relationOptions('ConsistsOf');
			}
			

		relationOptions(relationName:string): void{
				let options : string[];
				this.guiService.getRelationOptions(this.titlePath, relationName).subscribe(res => {
						/*
						       this.City = values.json() as string[];
	        				   this.var1 = this.City[0];
	                           this.var2 = this.City[1];
						*/
				const result = JSONPath({path: '$[*].name', json: res});
				console.debug('*******		OGGETTI		*******');
				console.debug(result);
				console.debug('*******		*******		*******');
			})
		}
		
		//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
	    createForm(facetData:ITypeSpecification):void{
			for(let i=0; i<facetData.facetSpecs.length; i++){
					const facetSpec = facetData.facetSpecs[i];
					this.createFacetGroup(facetSpec);
				}
		}
		
		
			
		//https://stackoverflow.com/questions/74543979/is-it-possible-to-declare-an-empty-form-group-then-add-form-controls-afterwards
		//crea propertyArray 
		  createPropertyArray(item: IFacetProps[]):FormArray{
			  let fc;
			  const propFa: FormArray = this.fb.array([]);
			  const fg: FormGroup = this.fb.group({});
				for (let i=0; i<item.length; i++){
					 const prop = item[i];
					 //const fc = new FormControl([prop.name])
					 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))
							 }
						 }
					 }
					 fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
					 propFa.push(fg); //
					}
			//	console.debug('************ PROPERTIES-ARRAY: fg.controls:')	
			//	console.debug(propFa.controls);
				return propFa;
		  }


			createFacetGroup(item: IFacetComposer):void{
				 const facetFg: FormGroup = this.fb.group({});
				 //const relationFc = new FormControl('relation',Validators.required); 
				 const relationFc = this.fb.control(item.relation,Validators.required); 
				 facetFg.addControl('relation', relationFc);
				  //1. creo formArray con le properties
				 const propertiesFa = this.createPropertyArray(item.guiProps);
				 //2. aggiungo formarray delle properties ai controls per la facet
				 facetFg.addControl('properties',propertiesFa);
				//TODO
				 this.facetArray.push(facetFg);
			//	 console.debug('************ FACET-ARRAY Controls:')	
			//	 console.debug(this.facetArray.controls);
			}
			
			   get facetArray(): FormArray {
			    return <FormArray>this.myForm.get('facets');
			  }
			 
			 getPropertiesArray(index: number): FormArray{
				 return <FormArray>(<FormArray>this.facetArray.at(index)).get('properties');
			 }
			 
			onSubmit() {
			  if (this.myForm.valid) {
			    const formData = this.myForm.value;
			    console.log("*****		FORMDATA	*****");
			    console.log(formData);
			    // Process formData
			  }
			}	
			
			resetForm() {
			  this.myForm.reset();
			}
			
			/*To update form values programmatically, use the patchValue() or setValue() methods:*/
				updateFormValues() {
				  this.myForm.patchValue({ name: 'John' });
				}	
	///////////////////////////////		
			
		private addFacetGroup(): FormGroup {
		    return this.fb.group({
		      relation: {},
		      properties: this.fb.array([])
		    });
		  }	
	  addFacet(): void {
				 this.facetArray.push(this.addFacetGroup());
		  }
		  
		  
	    removeFacet(index: number): void {
			    this.facetArray.removeAt(index);
		   }
			

		/*	  
	    addProperty(index:number): void {
			    (<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
			  }
			*/  
			
		 close():void {
			 		this.resetForm();
			        this.dialogRef.close({event:'cancel'});
			    } 
		//chiude e basta
	}				

/*
addNewCompany() {
  this.companiesFormArr.push(
    this.fb.group({
      company: [''],
      projects: this.fb.array([])
    })
  );
}

deleteCompany(index: number) {
  this.companiesFormArr.removeAt(index);
}

  addNewProject(control) {
  control.push(
    this.fb.group({
      projectName: ['']
  }))
}

deleteProject(control, index) {
  control.removeAt(index)
}
*/