From 600ea7c55f14cb5416469dee7b429a4fc8c1591c Mon Sep 17 00:00:00 2001 From: mariateresa Date: Fri, 9 Feb 2024 17:29:46 +0100 Subject: [PATCH] added new testing "form composer" (work in progress) --- .../add-resource/add-resource.component.html | 5 -- .../add-resource/add-resource.component.ts | 26 ++---- src/main/webapp/app/app-routing.module.ts | 7 +- src/main/webapp/app/app.module.ts | 1 + .../form-composer.component.html | 47 ++++++++++ .../form-composer.component.scss | 0 .../form-composer.component.spec.ts | 23 +++++ .../form-composer/form-composer.component.ts | 87 +++++++++++++++++++ .../table-screen/table-screen.component.html | 6 +- 9 files changed, 170 insertions(+), 32 deletions(-) create mode 100644 src/main/webapp/app/form-composer/form-composer.component.html create mode 100644 src/main/webapp/app/form-composer/form-composer.component.scss create mode 100644 src/main/webapp/app/form-composer/form-composer.component.spec.ts create mode 100644 src/main/webapp/app/form-composer/form-composer.component.ts diff --git a/src/main/webapp/app/add-resource/add-resource.component.html b/src/main/webapp/app/add-resource/add-resource.component.html index 33cac95..e2fd8a6 100644 --- a/src/main/webapp/app/add-resource/add-resource.component.html +++ b/src/main/webapp/app/add-resource/add-resource.component.html @@ -1,8 +1,3 @@

Modular Form:

- diff --git a/src/main/webapp/app/add-resource/add-resource.component.ts b/src/main/webapp/app/add-resource/add-resource.component.ts index dd55483..1c5e188 100644 --- a/src/main/webapp/app/add-resource/add-resource.component.ts +++ b/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[]>; - 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; - } } diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts index b8b4c9f..5774ad9 100644 --- a/src/main/webapp/app/app-routing.module.ts +++ b/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, diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts index f798fb5..527653d 100644 --- a/src/main/webapp/app/app.module.ts +++ b/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 diff --git a/src/main/webapp/app/form-composer/form-composer.component.html b/src/main/webapp/app/form-composer/form-composer.component.html new file mode 100644 index 0000000..bb90881 --- /dev/null +++ b/src/main/webapp/app/form-composer/form-composer.component.html @@ -0,0 +1,47 @@ +

Nested FormArray / Dynamic FormArray

+ +
+
+
+
+ Facet {{fctIdx}} :
+ -- + Name : +
+ Version: + + + + +
+
+
+ -- + Property {{propIndex}} :
+ key: +
+ value: +
+ + +
+
+
+ +
+
+ +
+
+{{this.myForm.value | json}} +
+ \ No newline at end of file diff --git a/src/main/webapp/app/form-composer/form-composer.component.scss b/src/main/webapp/app/form-composer/form-composer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/main/webapp/app/form-composer/form-composer.component.spec.ts b/src/main/webapp/app/form-composer/form-composer.component.spec.ts new file mode 100644 index 0000000..15a278d --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FormComposerComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FormComposerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/main/webapp/app/form-composer/form-composer.component.ts b/src/main/webapp/app/form-composer/form-composer.component.ts new file mode 100644 index 0000000..860496b --- /dev/null +++ b/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; + } + + +} 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 7f6c648..c2a3a01 100644 --- a/src/main/webapp/app/table-screen/table-screen.component.html +++ b/src/main/webapp/app/table-screen/table-screen.component.html @@ -12,11 +12,7 @@ addAdd new - +