From 038368257ad8984d69136faeb37f153b38a17b49 Mon Sep 17 00:00:00 2001
From: mariateresa <mariateresa.paratore@isti.cnr.it>
Date: Thu, 7 Mar 2024 17:26:01 +0100
Subject: [PATCH] debugging controllers...

---
 .../facet-composer.component.html             |  78 ++++------
 .../facet-composer.component.ts               | 140 +++++++-----------
 2 files changed, 87 insertions(+), 131 deletions(-)

diff --git a/src/main/webapp/app/facet-composer/facet-composer.component.html b/src/main/webapp/app/facet-composer/facet-composer.component.html
index 4122692..53ac86d 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.html
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.html
@@ -16,55 +16,39 @@
 	    </mat-expansion-panel>
 	    
 	    <div [formGroup]="myForm">
-	  		  <div formArrayName="facets">
-					
-	     		<div *ngFor="let fct of typeSpec.facetSpecs; let ind=index;">
-					<mat-expansion-panel>
-						<mat-expansion-panel-header>
-							<mat-panel-title>
-							<!--TODO: vedi quando si possono rendere editabili le relazioni-->
-							<input formControlName="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}" [disabled]="true"/>
-							 </mat-panel-title>
-							     <mat-panel-description>
-							        {{typeSpec.facetSpecs[ind].name}}
-							      </mat-panel-description>
-							  </mat-expansion-panel-header>
-							  <p>{{typeSpec.facetSpecs[ind].description}}</p>
-							  
-							    <!-- OK SO FAR -->	
-							    		
-							    <p>group {{ind}}</p>
-								 <div  formArrayName="facetProps" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
-										<div formGroupName="ind">
-											<!--
-														<div *ngFor="let student of studentsArray.controls; let i = index" [formGroupName]="i">
-															<input formControlName="firstName" placeholder="First Name">
-															<input formControlName="lastName" placeholder="Last Name">
-															<input formControlName="dob" placeholder="Date of Birth">
-														</div>
-												-->
-											<div *ngFor="let prop of typeSpec.facetSpecs[ind].guiProps; let i=index" >
-										    <p> control {{i}} - <label>{{prop.label}}</label>
-										    	<input formControlName="i" type="{{prop.type}}"/>
-										    </p>
-										 </div>
-										    
+			
+			
+	  		  <div formArrayName="facetBlocks">
+					<div [formGroupName] ="ind" *ngFor="let fct of typeSpec.facetSpecs; let ind=index;" >
+						<mat-expansion-panel>
+							<mat-expansion-panel-header>
+								<mat-panel-title>
+								<!--TODO: vedi quando si possono rendere editabili le relazioni-->
+								<input formControlName="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}" />
+								 </mat-panel-title>
+								     <mat-panel-description>
+								        {{typeSpec.facetSpecs[ind].name}}
+								      </mat-panel-description>
+								  </mat-expansion-panel-header>
+								  <p>{{typeSpec.facetSpecs[ind].description}}</p>
+								  
+								    <!-- OK SO FAR -->	
+									 <div  formArrayName="facetPropsBlock" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
+										<div [formGroupName] ="i" *ngFor="let prop of typeSpec.facetSpecs[ind].guiProps; let i=index" >
+											    <label for="{{prop.name}}">{{i}}.{{prop.label}}</label>
+											    	<input formControlName="{{prop.name}}" id="{{prop.name}}" type="{{prop.type}}"/>
+											    
+										</div>
 									</div>
-								</div>
-								
-								
-				</mat-expansion-panel>
-			</div>
+									
+									
+					</mat-expansion-panel>
+				 </div>
+  			</div>
+  			
+  			
   		</div>
-  		
-  		
-  		
-  		
-  		
-  		
-  		
-  		
-  </div>
+  
 		 <!-- <button mat-button (click)="doAction()">Save Form</button> -->
  <!--</form>-->
 	    <!--fine form esterna-->
diff --git a/src/main/webapp/app/facet-composer/facet-composer.component.ts b/src/main/webapp/app/facet-composer/facet-composer.component.ts
index 9253d6b..36dbe9f 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.ts
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.ts
@@ -33,7 +33,6 @@ export class FacetComposerComponent implements OnInit {
 	
     myForm: FormGroup ;	//form complessiva 
    
-   
     typeSpec: ITypeSpecification;
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
@@ -43,107 +42,80 @@ export class FacetComposerComponent implements OnInit {
 			this.titleType = data.type.name;
 			this.titlePath = data.context.path;
 			this.typeSpec = {} as ITypeSpecification;
-			
-			/*
-			this.myForm = this.fb.group({
-      							'facets': this.fb.array([]),
-      							'facetPropsArray':this.fb.array([]),
-    							});
-    		*/					
-    							
-			this.myForm = this.fb.group({
-      							'facets': this.fb.array([
+   							
+    	   	this.myForm = this.fb.group({
+      							'facetBlocks': this.fb.array([
 									  this.fb.group({
 										  'relation':'',
-										  'facetPropsArray':this.fb.array([]),
+										  'facetPropsBlock':this.fb.array([]),
+										  //TODO: PROVA-> 'facetPropsBlock':this.fb.array([this.fb.group({}]),
 									  })
 								  ]),
       							
     							});
-    							
-    							/*
-    							 segmentRows3: this.fb.array([
-								    this.fb.group({
-								        segmentId3: '',
-								        segmentTime3: '',
-								        personRows3: this.fb.array([
-								        this.fb.group({
-								           personR3: '',
-								           personI3: ''
-								          })
-								        ])
-								    })
-								  ]),
-										*/
 			}
-			
-			/*
-			 Cannot find control with path
-			*/
-		    
-			
-		  get Facets(): FormArray {
-		    return this.myForm.get('facets') as FormArray;
-		  }
-		  get FacetPropsArray(): FormArray {
-		    return this.myForm.get('facetPropsArray') as FormArray;
-		  }
-
-	
+		
+		get facetBlocks() {
+			    return this.myForm.get('facetBlocks') as FormArray;
+			  }
+			   
 		  
-		  addFacets() {
+		  get facetPropsBlock(): FormArray {
+		    return this.myForm.get('facetPropsBlock') as FormArray;
+		  }
+		  
+		  /*
+		  addFacetBlocks() {
 			const fc = {} as IFacetComposer;
-		    this.facets.push(this.fb.group(fc));
+		    this.facetBlocks.push(this.fb.group(fc));
 		  }	
 		  
 		  addFacetProps() {
 			const fp = {} as IFacetProps;
-		    this.facetPropsArray.push(this.fb.group(fp));
+		    this.facetPropsBlock.push(this.fb.control(fp));
 		  }	
+			*/
 			
-		ngOnInit(): void {
-			this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
-				this.typeSpec = res;
-				this.prepareEnvironment(res);
-				});
-	}		    
+			ngOnInit(): void {
+				alert("facetPropsBlock");
+				alert(this.facetPropsBlock);
+				
+				this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
+					this.typeSpec = res;
+					this.prepareControls(res);
+					});
+			}		    
 	
-		prepareEnvironment(spec:ITypeSpecification){
-				for (let ind = 0; ind < spec.facetSpecs.length; ind++) {
-					//TODO: metti a posto validazione
-					//this.fb.group()
-					const itemExt = this.fb.control({
-										relation: [spec.facetSpecs[ind].relation,null]
-								});
-									
-					const fGroup: FormGroup = new FormGroup({});
-					let ctrl: FormControl|undefined;
-				  		for(let j=0; j<spec.facetSpecs[ind].guiProps.length; j++){ 
-							const item = spec.facetSpecs[ind].guiProps[j];
-							  if(item.validations.length===0){
-								 ctrl = this.fb.control({
-										name: ['',null]
-									});    
-							}else{
-								ctrl = this.fb.control({
-								name: ['',Validators.required]
-							});
-			  				}
-			  				fGroup.addControl('',ctrl); //AGGIUNGO FORMCONTROL AL FORMGROUP
-						}
-						this.FacetPropsArray.push(fGroup); //AGGIUNGO FORMGROUP PER LA FACET	
-		  }
+		prepareControls(spec:ITypeSpecification){
+			for (let i=0; i<spec.facetSpecs.length; i++){
+				this.facetBlocks.push(this.fb.group({
+										'relation': [spec.facetSpecs[i].relation,Validators.required]
+								}));
+				
+				for(let j=0; j<spec.facetSpecs[i].guiProps.length; j++){
+					const props = spec.facetSpecs[i].guiProps[j];
+					alert(this.facetPropsBlock);
+					//const name = props.name;
+					if(props.validations.length===0){
+						this.facetPropsBlock.push(
+								this.fb.control({
+										j : ['',null]
+								})
+								);
+					}else{
+						this.facetPropsBlock.push(
+												this.fb.control({
+												j : ['',Validators.required],
+											})
+								);
+					}
+					
+				}
+				this.facetBlocks.push(this.facetPropsBlock);
+		  	}
 		}
 		
-	 	get facets() {
-			    return this.myForm.get('facets') as FormArray;
-			  }
-			   
-		// eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures
-		get facetPropsArray(){
-			return this.myForm.get('facetPropsArray') as FormArray;
-		}
-		  
+	
 		 close():void {
 			        this.dialogRef.close({event:'cancel'});
 			    }