added new testing "form composer" (work in progress)

src/main/webapp/app/add-resource/add-resource.component.html

@@ -1,8 +1,3 @@
 <h2>Modular Form: </h2>
 <jhi-dynamic-form [questions]="questions$ | async"></jhi-dynamic-form>
-<!--
-<form [formGroup]="myForm"]>
-	<button (click)="addItem()">Add Item</button>
-</form>
--->
 <button routerLink="/">Back</button>

src/main/webapp/app/add-resource/add-resource.component.ts

@@ -1,7 +1,8 @@
+/* eslint-disable @angular-eslint/no-empty-lifecycle-method */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, ReactiveFormsModule,Validators } from '@angular/forms';
+import { ReactiveFormsModule,Validators } from '@angular/forms';
 import { Router, RouterModule } from '@angular/router';
 import { DynamicFormComponent } from 'app/dynamic-form/dynamic-form.component'; 
 import { DynamicFormQuestionComponent } from 'app/dynamic-form/dynamic-form-question.component';
@@ -24,34 +25,17 @@ import { MatDialogModule } from '@angular/material/dialog';
 
 export class AddResourceComponent implements OnInit {
 	
-	myForm: FormGroup | any;
 
   //PER FORM DINAMICA
   questions$: Observable<QuestionBase<any>[]>;
   
-  constructor(private router:Router, private formService: QuestionService, private fb: FormBuilder) { 
+  constructor(private router:Router, private formService: QuestionService) { 
 	   this.questions$ = formService.getQuestions('HostingNode');
   }
 
   ngOnInit(): void {
-    this.myForm = this.fb.group({
-      items: this.fb.array([]) // Initialize an empty FormArray
-    });	  
+	  
   }
   
-  //TO ADD FORM ITEMS DYNAMICALLY
-  addItem():void {
-    const item = this.fb.group({
-    name: ['', Validators.required],
-    quantity: [1, [Validators.required, Validators.min(1)]],
-    // Add more form controls as needed
-  });
-  this.items.push(item);
-}
-
-	// Helper method to get the 'items' FormArray
-	get items():FormArray {
-	  return this.myForm.get('items') as FormArray;
-	}
 
 }

src/main/webapp/app/app-routing.module.ts

@@ -9,8 +9,9 @@ import { Authority } from 'app/config/authority.constants';
 import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
 import { CommonModule } from '@angular/common';
 import { AddResourceComponent } from './add-resource/add-resource.component';
+import { FormComposerComponent } from './form-composer/form-composer.component';
 
-const routes: Routes =[{path:'addResource', component: AddResourceComponent}];
+//const routes: Routes =[{path:'addResource', component: AddResourceComponent}];
 
 @NgModule({
 	imports: [
@@ -30,6 +31,10 @@ const routes: Routes =[{path:'addResource', component: AddResourceComponent}];
 					path: 'addResource',
 					component: AddResourceComponent
 				},
+				{
+					path: 'formComposer',
+					component: FormComposerComponent
+				},
 				
 				navbarRoute,
 				...errorRoute,

src/main/webapp/app/app.module.ts

@@ -33,6 +33,7 @@ import { ResourceAddComponent } from './resource-add/resource-add.component';
 import { ResourceDeleteComponent } from './resource-delete/resource-delete.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { TypeHeadlineComponent } from './type-headline/type-headline.component';
+import { FormComposerComponent } from './form-composer/form-composer.component';
 
 //TODO: PER ORA USIAMO DB IN MEMORY COME MOCK
 

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

@@ -0,0 +1,47 @@
+<h1>Nested FormArray / Dynamic FormArray</h1>
+
+<form formGroup="myForm" (ngSubmit)="onSubmit()">
+  <div formArrayName="employees">
+    <div *ngFor="let facet of facets().controls; let fctIdx=index">
+      <div
+        formGroupName="fctIdx"
+        style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;"
+      >
+        Facet {{fctIdx}} : <br/>
+        --
+         Name :
+        <input type="text" formControlName="name" /><br/>
+        Version:
+        <input type="number" formControlName="version" />
+
+        <button (click)="removeFacet(fctIdx)">Remove</button>
+
+        <div formArrayName="skills">
+          <div
+            *ngFor="let props of facetProperties(fctIdx).controls; let propIndex=index"
+          >
+            <div formGroupName="propIndex">
+				--
+              Property {{propIndex}} : <br/>
+               key:
+              <input type="text" formControlName="key" /><br/>
+              value:
+              <input type="text" formControlName="value" /><br/>
+
+              <button (click)="removeFacetProperty(fctIdx,propIndex)">
+                Remove
+              </button>
+            </div>
+          </div>
+        </div>
+        <button type="button" (click)="addFacetProperty(fctIdx)">
+          Add Property
+        </button>
+      </div>
+    </div>
+    <button type="button" (click)="addFacet()">Add Facet</button>
+  </div>
+</form>
+{{this.myForm.value | json}}
+<br />
+<button routerLink="/">Back</button>

src/main/webapp/app/form-composer/form-composer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComposerComponent } from './form-composer.component';
+
+describe('FormComposerComponent', () => {
+  let component: FormComposerComponent;
+  let fixture: ComponentFixture<FormComposerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormComposerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FormComposerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,87 @@
+/* eslint-disable no-console */
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router, RouterModule } from '@angular/router';
+
+@Component({
+  standalone: true,
+  selector: 'jhi-form-composer',
+  templateUrl: './form-composer.component.html',
+  styleUrls: ['./form-composer.component.scss'],
+  imports:[CommonModule, RouterModule]
+})
+
+export class FormComposerComponent implements OnInit {
+
+	myForm: FormGroup | any;
+	
+  constructor(private fb: FormBuilder, private router:Router) { }
+
+  ngOnInit(): void {
+	  this.myForm = this.fb.group({
+      facets: this.fb.array([]) // Initialize an empty FormArray
+    });
+  }
+  
+    //TO ADD FORM ITEMS DYNAMICALLY
+    /*
+  newFacet():void {
+    const item = this.fb.group({
+    name: ['', Validators.required],
+    quantity: [1, [Validators.required, Validators.min(1)]],
+    // Add more form controls as needed
+  });
+  this.items.push(item);
+}
+*/
+
+  newFacet(): FormGroup {
+    return this.fb.group({
+		name: ['', Validators.required],
+    	version: [1, [Validators.required, Validators.min(1)]], //obbligatorio, 1 solo valore
+      	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.facets()
+      .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!
+      key: '',
+      value: ''
+    });
+  }
+
+  addFacetProperty(fctIndex: number):void {
+    this.facetProperties(fctIndex).push(this.newProperty());
+  }
+
+  removeFacetProperty(fctIndex: number, propIndex: number):void {
+    this.facetProperties(fctIndex).removeAt(propIndex);
+  }
+
+  onSubmit():void {
+    console.log(this.myForm.value);
+  }
+  
+  
+	// Helper method to get the 'facets' FormArray
+	facets():FormArray {
+	  return this.myForm.get('facets') as FormArray;
+	}
+
+
+}

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

@@ -12,11 +12,7 @@
 			<mat-icon>add</mat-icon><span>Add new</span>
 		</button>
 		<button mat-raised-button color="primary" routerLink="/addResource">Go to Form</button>
-		<!--	
-		<button mat-raised-button color="primary" (click)="openDialogTest()">
-			<mat-icon>home</mat-icon><span>Test</span>
-		</button>
-		-->
+		<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
 	</div>
 	
 </div>