From c33b9ba58fea9be7f34e222a1d0d8476b2c84bd4 Mon Sep 17 00:00:00 2001
From: mariateresa <mariateresa.paratore@isti.cnr.it>
Date: Fri, 23 Feb 2024 18:08:16 +0100
Subject: [PATCH] work in progress

---
 src/main/webapp/app/app-routing.module.ts     |   5 +
 .../facet-composer.component.html             |  71 ++++++----
 .../facet-composer.component.ts               | 133 +++++++++++-------
 src/main/webapp/app/services/i-facet.ts       |  11 +-
 .../table-screen/table-screen.component.html  |   3 +
 5 files changed, 142 insertions(+), 81 deletions(-)

diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts
index d955f6d..d2808b8 100644
--- a/src/main/webapp/app/app-routing.module.ts
+++ b/src/main/webapp/app/app-routing.module.ts
@@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
 import { AddResourceComponent } from './add-resource/add-resource.component';
 import { FormComposerComponent } from './form-composer/form-composer.component';
 import { FacetComposerComponent } from './facet-composer/facet-composer.component';
+import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
 
 //const routes: Routes =[{path:'addResource', component: AddResourceComponent}];
 
@@ -40,6 +41,10 @@ import { FacetComposerComponent } from './facet-composer/facet-composer.componen
 					path: 'facetComposer',
 					component: FacetComposerComponent     
 				},
+				{
+					path: 'dynamicFormComponent',
+					component: DynamicFormComponent     
+				},
 				
 				navbarRoute,
 				...errorRoute,
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 0ee8490..ca58b68 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.html
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.html
@@ -1,40 +1,59 @@
 <h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
 <mat-dialog-content [formGroup]="myForm" (ngSubmit)="onSubmit()">
-        <h3>{{itemName}}</h3>
-        <h3>{{itemDesc}}</h3>
-        <!--
-			*ngFor="let x of itemsArray.controls; let i = index; ngForTrackBy: track"
-        [formGroupName]="i"
-			-->
+        <mat-expansion-panel>
+				    <mat-expansion-panel-header>
+				      <mat-panel-title>
+				        Resource Description
+				      </mat-panel-title>
+				      <mat-panel-description>
+				        {{itemName}} 
+				      </mat-panel-description>
+				    </mat-expansion-panel-header>
+		            <p>{{itemDesc}}</p>
+	    </mat-expansion-panel>
+	    
+	    <!-- inizio -->
 	  <div *ngFor="let fct of itemFacets; let ind=index;">
-		
-		      <div style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
+		      <div style="border: 1px solid blue; padding: 10px; margin: 5px;">
         		  <mat-expansion-panel>
 				    <mat-expansion-panel-header>
 				      <mat-panel-title>
-				        {{fct.name}} - {{ind}} 
+						 {{fct.relation}}
 				      </mat-panel-title>
 				      <mat-panel-description>
-				        relation: {{fct.relation}}
-				      </mat-panel-description>
+				        {{fct.name}}
+ 				      </mat-panel-description>
 				    </mat-expansion-panel-header>
 				    <p>{{fct.description}}</p>
 				  </mat-expansion-panel>
-				  <
-	 		  </div>
-  	  </div>
-        <!--
-			  <div >
-			  		{{itemFacets[1].relation}}
-			  </div>
-			  -->
-  <div formArrayName="facets">
-	  <div *ngFor="let facet of facets().controls; let fctIdx=index">
-		      <div formGroupName="fctIdx" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
-        		{{itemFacets[fctIdx].relation}} : <br/>  
-	 		  </div>
-  </div>
-  </div>
+					  
+				  <!-- qui andranno le varie properties della facet come form
+			  			<div *ngFor="let prop of fct.properties; let fi=index;">-->
+				<div formGroupName="facetPropsForm">
+					<div  *ngFor="let prop of facetPropsList; let i = index;"
+        					[formGroupName]="i">
+								  <label></label>
+								   <input formControlName="{{prop.name}}"
+								   		name="{{prop.name}}"
+							            type="text"
+							          />
+								  
+				</div>	
+					
+				</div>	  
+
+							  <!--
+			        		{{fi}} name: {{prop.name}}<br/>  
+			        		{{fi}} description: {{prop.description}}<br/>  
+			        		{{fi}} mandatory: {{prop.mandatory}}<br/>  
+			        		{{fi}} notnull: {{prop.notnull}}<br/>  
+			        		{{fi}} regexp: {{prop.regexp}}<br/>  
+			        		{{fi}} propertyType: {{prop.propertyType}}<br/>
+			        		-->
+	  					
+  			</div>
+  			<!-- qui va il bottone per aggiungere/rimuovere una facet -->
+	</div>
 </mat-dialog-content>
 	  
 <!--
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 f2f7100..bc94e53 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.ts
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.ts
@@ -1,7 +1,8 @@
+/* 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, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { 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';
@@ -11,6 +12,7 @@ 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 { IFacetProperty } from './i-facet-property';
 
 
 
@@ -26,42 +28,80 @@ import { MatExpansionModule } from '@angular/material/expansion';
 })
 
 export class FacetComposerComponent implements OnInit {
-
-	myForm: FormGroup | any;
+	
+	//NEW
+   myForm: FormGroup | any; 	//form complessiva
+   //form delle facet properties (CPU, Capacity, IPAddress, ecc.)
+   //è un formGroup perché aggiungo campi man mano che li leggo dalla specifica dinamica
+   facetPropsForm: FormGroup | any;
+   
+   facetPropsList: IFacetProperty[] = [];
+   //Form delle facet è un formArray percé prevede possibilità di aggiungere/rimuovere form
+   //facetTypes = new FormArray<FormGroup>([]);
+	
 	titleType: string;
 	titlePath: string;
-	typeSpecification: any; //array con le specifiche delle facet per tipo risorsa
-   // facetBlocks: IFacetComposer[]|any; //array con le specifiche delle facet per tipo risorsa
 	
 	////campi GUI
 	itemName: string|any;
 	itemDesc: string|any;
 	itemFacets: IFacetComposer[]|any;
-	
-	
+
+  // 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;
 			}
-
-
+		/*	
+  facetPropsArray() {
+    return <FormArray>this.facetPropsForm.get('facetProps');
+  } */
+  
   ngOnInit(): void {
-	  	this.myForm = this.fb.group({
-		  			facets:this.fb.array([])// Initialize an empty FormArray
+	  this.myForm = this.fb.group({
+		  			facetTypes : this.fb.array([])// Initialize an empty FormArray
 	 			 });
-	//alert('before fetching');
-	this.guiService.fetchFacetConfiguration(this.titlePath,this.titleType).subscribe(res => {
+	 			 
+      this.facetPropsForm = this.fb.group({
+	      					  facetPropsArray : this.fb.array([]),
+	    					});
+	    					
+	  this.guiService.fetchFacetConfiguration(this.titlePath,this.titleType).subscribe(res => {
       this.itemName=res.name;
       this.itemDesc=res.description;
       this.itemFacets = res.facetSpecs;
+      
+      this.displayItems();
+    });
+  
+  }
+ 
+  
+    displayItems() {
+    const transformedItems = this.facetPropsList.map((prop: any) =>
+       this.createItem(prop)
+    );
+    console.log("******transformedItems******");
+    console.log(transformedItems);
+    this.facetPropsForm.setControl('facetPropsList', this.fb.array(transformedItems));
+  }
+  
+    createItem(item: IFacetProperty) {
+    return this.fb.group({
+		//TODO: INSERIRE QUA DENTRO REGOLE VALIDAZIONE DESUNTE DA PRIPRITY/NOTNULL/ETC
+      title: [item.description, [Validators.required]],
+      completed: [item.name, [Validators.required]],
+      priority: [item.mandatory, [Validators.required]],
+      notnull: [item.notnull, [Validators.required]],
+      propertyType: [item.propertyType, [Validators.required]],
+      regexp: [item.regexp, [Validators.required]],
     });
   }
   
-//TODO: questo per aggiungere una nuova facet
-
-  newFacet(): FormGroup {
+  /*
+  newFacetProperty( ): FormGroup {
     return this.fb.group({
 		//TODO: TUTTO QUESTO VA PARAMETRIZZATO
 		name: ['', Validators.required],
@@ -72,43 +112,7 @@ export class FacetComposerComponent implements OnInit {
       	properties: this.fb.array([])
     });
   }
-  
-  addFacet():void{
-	  this.facets().push(this.newFacet());
-  }
-
-  removeFacet(fctIndex: number):void {
-    this.facets().removeAt(fctIndex);
-  }
-
-  facetProperties(fctIndex: number): FormArray {
-    return this.itemFacets()
-      .at(fctIndex)
-      .get('properties') as FormArray;
-  }
-
-  newProperty(): FormGroup { //la property per una facet è una coppia key/value (stringhe)
-    return this.fb.group({  //questi corrispondono ai nomi dei control nell'html!
-      name: '', //label
-      description: '', //sub-label
-      mandatory: false,
-      notnull: false,
-      regexp:''
-    });
-  }
-
-  addFacetProperty(fctIndex: number):void {
-    this.facetProperties(fctIndex).push(this.newProperty());
-  }
-
-  removeFacetProperty(fctIndex: number, propIndex: number):void {
-    this.facetProperties(fctIndex).removeAt(propIndex);
-  }
-  
-	// Helper method to get the 'facets' FormArray
-	facets():FormArray {
-	  return this.myForm.get('facets') as FormArray;
-	}
+*/
 
 ////////////////
 
@@ -126,5 +130,26 @@ export class FacetComposerComponent implements OnInit {
     console.log(this.myForm.value);
   }
   
-
+  /*
+  	 addFacetType(){
+	   this.facetTypes.push(this.newFacetType())
+   	}
+   
+	 removeFacetType(fctIndex: number):void {
+	   this.facetTypes.removeAt(fctIndex);
+	 }
+  newFacetType( ): FormGroup {
+    return this.fb.group({
+		//TODO: TUTTO QUESTO VA PARAMETRIZZATO
+		name: ['', Validators.required],
+		min: [1, Validators.required],
+		max: [1, Validators.required],
+		relation: ['', Validators.required],
+		description: [''],
+      	properties: this.fb.array([])
+    });
+  }
+  */
+ 
+ 
 }
diff --git a/src/main/webapp/app/services/i-facet.ts b/src/main/webapp/app/services/i-facet.ts
index 00d2eaf..68e794c 100644
--- a/src/main/webapp/app/services/i-facet.ts
+++ b/src/main/webapp/app/services/i-facet.ts
@@ -1,7 +1,16 @@
-import { IFacetProp } from "./i-facet-prop";
 
 export interface IFacet {
   name: string;
   description: string;
   properties: IFacetProp[];
 }
+
+export interface IFacetProp {
+  type: string;
+  name: string;
+  description: string;
+  mandatory:boolean;
+  notnull:boolean;
+  regexp:string;
+  propertyType:string;
+}
diff --git a/src/main/webapp/app/table-screen/table-screen.component.html b/src/main/webapp/app/table-screen/table-screen.component.html
index 7f47810..f60cb58 100644
--- a/src/main/webapp/app/table-screen/table-screen.component.html
+++ b/src/main/webapp/app/table-screen/table-screen.component.html
@@ -19,8 +19,11 @@
 		<!--
 		<button mat-raised-button color="primary" routerLink="/addResource">New Resource</button>
 		<button mat-raised-button color="primary" routerLink="/facetComposer">Facet Composer</button>
+		
 		<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
 		-->
+		<button mat-raised-button color="primary" routerLink="/dynamicFormComponent">Form Dinamica</button>
+		
 </div>
 	
 </div>