building dynamic FormControls for facets' specifications

src/main/java/org/gcube/informationsystem/web/rest/InformationSystemResource.java

@@ -143,7 +143,6 @@ public class InformationSystemResource {
 			informationSystemService.setUma(createUmaToken(currentContext));
 			ResourceTypeDTO dto = informationSystemService.getResourceType(typeName);
 			ResourceBuilderDTO builderDto = new ResourceBuilderDTO(dto.getName(), dto.getDescription(), dto.isAstratto());
-			ArrayList<ResourceBuilderDTO> result = new ArrayList<ResourceBuilderDTO>();
 			
 			for(FacetTypeDTO ft : dto.getFacetTypes()) {
 				FacetSpecDTO fs = informationSystemService.getFacetSpecification(ft.getTarget());
@@ -153,10 +152,8 @@ public class InformationSystemResource {
 				facetSpecs.add(fs);
 			}
 			builderDto.setFacetSpecs(facetSpecs);
-			result.add(builderDto);
 			ObjectMapper objectMapper = new ObjectMapper();
-			//devo ritornare un array con un elemento per costruire la GUI correttamente
+			String sc = objectMapper.writeValueAsString(builderDto);
-			String sc = objectMapper.writeValueAsString(result);
 			return ResponseEntity.ok().body(sc);
 		} catch (Exception e) {
 			e.printStackTrace();

src/main/webapp/app/facet-composer/facet-composer.component.html

@@ -1,55 +1,41 @@
 <h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
-<!--
+
-<mat-dialog-content [formGroup]="composerForm" (ngSubmit)="onSubmit()">
+<mat-dialog-content>
         <mat-expansion-panel>
 				    <mat-expansion-panel-header>
 				      <mat-panel-title>
-				        Resource Description
+				       {{typeSpec.name}}
 				      </mat-panel-title>
 				      <mat-panel-description>
-				        {{titleType}} 
+						  <!--la descrizione è lunga e non posso metterla qua-->
 				      </mat-panel-description>
 				    </mat-expansion-panel-header>
-		            <p>{{itemDesc}}</p>
+				    <p> {{typeSpec.description}} </p>
 	    </mat-expansion-panel>
-	 -->   
+	    <!--inizio form esterna (elenco facet)-->
-	    <!-- inizio -->
+	    <div *ngFor="let fct of typeSpec.facetSpecs; let ind=index;">
-	    <!--
-	  <div *ngFor="let fct of itemFacets; let ind=index;">
-		      <div style="border: 1px solid blue; padding: 10px; margin: 5px;">
 			  <mat-expansion-panel>
 				    <mat-expansion-panel-header>
 				      <mat-panel-title>
-						 {{fct.relation}}
+						  <!--TODO: vedi quando si possono rendere editabili le relazioni-->
+						 <input type="text" value="{{fct.relation}}" disabled="true"/>
 				      </mat-panel-title>
 				      <mat-panel-description>
 				        {{fct.name}}
 				      </mat-panel-description>
 				    </mat-expansion-panel-header>
 				    <p>{{fct.description}}</p>
+				     <div style="border: 1px solid blue; padding: 10px; margin: 5px;">
+					 formGroup per la facet {{ind}}
+				 	</div>
 				  </mat-expansion-panel>
-				-->	  
-				  <!-- qui andranno le varie properties della facet come form
-				<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>
+	    <!--fine form esterna-->
 	    
 	    
-  			</div>
-	</div>
 </mat-dialog-content>    
 	    
 <mat-dialog-actions align="end">
    <button mat-button (click)="close()">Cancel</button>
-   <button mat-button (click)="doAction()">Save</button>
+  <!-- <button mat-button (click)="doAction()">Save</button> -->
 </mat-dialog-actions>
- -->

src/main/webapp/app/facet-composer/facet-composer.component.ts

@@ -6,12 +6,13 @@ import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Va
 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 { IFacetComposer } from './i-facet-composer';
+import { IFacetComposer, IFacetGui } from './i-facet-composer';
 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 { IFacetProp } from 'app/services/i-facet';
 
 
 
@@ -32,7 +33,19 @@ export class FacetComposerComponent implements OnInit {
 	titlePath: string;
 	
     composerForm: FormGroup | any; 	//form complessiva
-    composerFields: ITypeSpecification[]; 
+    typeSpec: ITypeSpecification;
+    facetItem: IFacetProp[] = [];
+    
+    facetPropsForm: FormGroup[] =[]; //form per le props di una singola facet
+
+	defaultFacetItem = {
+		  name: '',
+		  description: '',
+		  mandatory:false,
+		  notnull:false,
+		  regexp:'',
+		  propertyType:''
+	  };
 	
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
@@ -41,38 +54,85 @@ export class FacetComposerComponent implements OnInit {
     	@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){
 			this.titleType = data.type.name;
 			this.titlePath = data.context.path;
-			this.composerFields = {} as ITypeSpecification[];
+			this.typeSpec = {} as ITypeSpecification;
 			}
 
 		  ngOnInit(): void {
 			  	  this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
-						this.composerFields = res;
+						this.typeSpec = res;
-						//this.composerForm = this.gener
 			    });
-			    this.composerForm = this.generateFacetsForm();
+			    //this.composerForm = this.generateFacetsForm();
+			  
 		  }
 		  
-		    generateFacetsForm(): FormGroup {
+		  /*
-			    const baseForm = this.fb.group({});
+		  export interface IFacetGui {
-			    this.composerFields.forEach((field) => {
+			type: string;
-			      baseForm.addControl(field.name, this.generateFormGroup(baseForm, field));
+			label: string;
-			    });
+			name: string;
-			    console.log(baseForm);
+			value: string;
-			    return baseForm;
+			pattern: string;
+			propDescription: string;
+			validations: IValidation[]
 		}
+		*/
+			
+			private createFacetForm(props: IFacetProp,i:number){
+				this.facetPropsForm[i] = this.fb.group(
+					{
+						name : ['',props.],
+						
+					}
+				)
 					
 					
-			generateFormGroup(baseForm: FormGroup, field: ITypeSpecification): FormGroup | FormControl {
+			}
-			    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
-			    if (field.facetSpecs) {
+				  
-			      const formGroup = this.fb.group({});
+				  
-			      field.facetSpecs.forEach((item) => {
+	
-			       formGroup.addControl(item.name, this.generateFormGroup(formGroup, item.controls));
+		
-			      });
+		
-			      return formGroup;
+		  /*
-			    }
+		 get itemsArray() {
-			    return new FormControl('');
+		    return <FormArray>this.toDoListForm.get('facetItems');
-  			}
+		  }*/
+  
+  //TODO: vedi qua
+  //https://copyprogramming.com/howto/typescript-angular-9-programmatically-add-control-to-form
+  /*
+  {
+          "type": "text",
+          "label": "Unit",
+          "name": "unit",
+          "value": "",
+          "validations": [
+            {
+              "name": "pattern",
+              "validator": "pattern",
+              "message": "Wrong field format, required is: ^(Byte|kB|MB|GB|TB|PB|EB|ZB|YB)$"
+            }
+          ],
+          "pattern": null,
+          "propDescription": ""
+        }
+        */
+  
+				//chiude e basta
+			    close():void {
+			        this.dialogRef.close({event:'cancel'});
+			    }
+			    /*
+				  //chiude e passa i dati al component chiamante
+				   doAction():void {
+				        this.dialogRef.close({event:'add',data:this.composerForm.value});
+				    }
+				
+				  
+				  onSubmit():void {
+				    console.log(this.composerForm.value);
+				  }
+  				*/
   }
  
   

src/main/webapp/app/facet-composer/facet-composer.service.ts

@@ -25,13 +25,11 @@ export class FacetComposerService {
  
  //TODO: paginate (when pagination APIs will be ready)
  //resourcespecification
-	getFormStructure(ctxPath:string, type:string): Observable<ITypeSpecification[] > {
+	getFormStructure(ctxPath:string, type:string): Observable<ITypeSpecification> {
 			const serviceUrl = this.applicationConfigService.getEndpointFor('api/is/facetspecifications');
 			let queryParams = new HttpParams();
 			queryParams = queryParams.append("typeName",type).append("currentContext",ctxPath);
-			return this.http.get<ITypeSpecification[]>(serviceUrl,{params:queryParams});
+			return this.http.get<ITypeSpecification>(serviceUrl,{params:queryParams});
 	  }
 	  
-	  
-	  
 }

src/main/webapp/app/table-screen/table-screen.component.html

@@ -19,10 +19,9 @@
 		<!--
 		<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>
+		-->
+				<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
 		
 </div>