From bb3cab0fcc85354ae2a31d175ce820dbf152195d Mon Sep 17 00:00:00 2001 From: mariateresa Date: Wed, 27 Mar 2024 19:54:40 +0100 Subject: [PATCH] fixed bugs on adding/removing new facet dynamically --- .../facet-composer.component.html | 93 +++--- .../facet-composer.component.ts | 285 +++++------------- 2 files changed, 111 insertions(+), 267 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 7c7b399..496b6c3 100644 --- a/src/main/webapp/app/facet-composer/facet-composer.component.html +++ b/src/main/webapp/app/facet-composer/facet-composer.component.html @@ -2,7 +2,6 @@ - @@ -17,80 +16,58 @@
-
-
+
+
- + - occurr. min + occurr. min - occurr. max + occurr. max - - counter (hide) - - +
- +
- - - - relation - - - {{item}} - - - + + relationFacet + + + {{opt}} + + + - -
-
- - {{typeSpec.facetSpecs[ind].guiProps[i].label}} - - -
-
- -
+ +
+ + {{prop.label}} + + +
+ + +
-
- -
-

Add new Facet:

-
- - Available Facet Types - - - - {{item}} - - - - -
-
-
- + +
Form's Value: {{ myForm.value | json }} 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 6ed26f2..2365dc3 100644 --- a/src/main/webapp/app/facet-composer/facet-composer.component.ts +++ b/src/main/webapp/app/facet-composer/facet-composer.component.ts @@ -3,7 +3,7 @@ /* 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 { Component, Inject, Input, OnInit } from '@angular/core'; import { AbstractControl, 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'; @@ -16,6 +16,7 @@ import { MatExpansionModule } from '@angular/material/expansion'; import { IFacetComposer, IFacetProps } from './i-facet-composer'; import { SharedModule } from 'app/shared/shared.module'; import { MatSelectFilterModule } from 'mat-select-filter'; +import { faAssistiveListeningSystems } from '@fortawesome/free-solid-svg-icons'; @@ -37,39 +38,11 @@ export class FacetComposerComponent implements OnInit { selectedOption: string; myForm: FormGroup; //form complessiva - + // relSelect: FormGroup; // facetData: IFacetComposer[]; typeSpec: ITypeSpecification; fieldsMap: Map; - counterMap: Map; - addableFacets: string[]; - - defaultProperty = { - "type": "text", - "label": "Custom property", - "name": "customProperty", - "value": "", - "validations": [], - "pattern": null, - "propDescription": "A custom property" - } - - - defaultFacet = { - "name": "nuova facet", - "relation": "ConsistsOf", - "properties": [ - { - "value": "simpleproperty" - }, - { - "name": "" - } - ] - } - - - + // eslint-disable-next-line @typescript-eslint/member-ordering constructor(private guiService: FacetComposerService, private fb: FormBuilder, private dialogRef:MatDialogRef, @@ -79,53 +52,19 @@ export class FacetComposerComponent implements OnInit { this.selectedOption = ''; this.typeSpec = {} as ITypeSpecification; this.fieldsMap = new Map(); - this.counterMap = new Map(); - this.myForm = this.fb.group({ - facets: new FormArray([ - ]) - }); - this.addableFacets = []; + this.myForm = this.fb.group({}); } - - removeGroup(i: number) { - const control = this.myForm.controls['times']; - control.removeAt(i); - } ngOnInit(): void { this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => { this.typeSpec = res; - //attenzione allo spazio prima della parentesi - this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+' ('+obj.relation+')', obj])); + this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj])); //parto con una facet per tipo - this.counterMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, 1])); - this.addableFacets = this.fillFacetSelect(this.fieldsMap); this.createForm(res); - console.debug('**************CounterMap****************'); - console.debug(this.counterMap); }); - - } - - fillFacetSelect(myMap:Map):string[]{ - const res:string[] = []; - myMap.forEach(function(value,key){ - const fComp : IFacetComposer = myMap.get(key)!; //'!' significa che assicuriamo che non si undefined (altrimenti segnala errore) - // eslint-disable-next-line @typescript-eslint/restrict-plus-operands - if(fComp.max==='many'){ - res.push(fComp.name+" ("+fComp.relation+")"); - } - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - //console.debug(`Map key is:${key} and value is:${value}`); - //console.debug('************************'); - }); - return res; - } - - onOptionsSelected(value:string): void { this.selectedOption = value; //console.debug('******onOptionsSelected?...'+value); @@ -135,16 +74,68 @@ export class FacetComposerComponent implements OnInit { createForm(fData:ITypeSpecification):void{ for(let i=0; ithis.fieldsMap.get(deno); + //TODO CHECK THIS + const singleFacetArray = this.myForm.controls[deno] as FormArray; + singleFacetArray.push(this.createFacetGroup(icf,true)); + + } + + createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{ + const facetFg: FormGroup = this.fb.group({}); + const nameFc = this.fb.control(item.name); + facetFg.addControl('facetName', nameFc); + + const maxFc = this.fb.control(item.max); + facetFg.addControl('max', maxFc); + + const minFc = this.fb.control(item.min); + facetFg.addControl('min', minFc); + + const descriptionFc = this.fb.control(item.description); + facetFg.addControl('facetDescription', descriptionFc); + + // const relFg: FormGroup = this.fb.group({}); + + /* + console.debug(item.relationOptions); + console.debug('+++++++++++++++++') + */ + const relationFc = this.fb.control(item.relation); + facetFg.addControl('relationFacet', relationFc); + //this.itemRelations = item.relationOptions; + + const addedFc = this.fb.control(isAdded); + facetFg.addControl('isAdded', addedFc); + + //1. creo group con le properties + //2. aggiungo formgroup delle properties ai controls per la facet + // facetFg.addControl('properties',this.createPropertyControls(item.guiProps)); + return this.addPropertyControls(facetFg,item.guiProps); + } + + + + addPropertyControls(facetFg:FormGroup, props: IFacetProps[]){ + let fc:FormControl; + for(let i=0; ithis.myForm.get('facets'); + + getSingleFacetArray(nameplus:string): FormArray { + return this.myForm.controls[nameplus] as FormArray; } - getPropertiesArray(index: number): FormArray{ - return (this.facetArray.at(index)).get('properties'); - } onSubmit() { if (this.myForm.valid) { const formData = this.myForm.value; - console.log("***** FORMDATA *****"); - console.log(formData); - // Process formData + // console.log("***** FORMDATA *****"); + //console.log(formData); + //TODO Process formData } } resetForm() { this.myForm.reset(); } - - /* - private addFacetGroup(): FormGroup { - - return this.fb.group({ - relation: {}, - properties: this.fb.array([]) - }); - } - */ - - addFacet(nameplus:string): void { - nameplus.replace(' (','_').replace(')',''); - alert('replaced...'+nameplus); - //ATTENZIONE: nameplus contiene SPAZIO E PARENTESI - const icf: IFacetComposer = this.fieldsMap.get(nameplus); - //TODO CHECK THIS - this.typeSpec.facetSpecs.push(icf); - - const facetFg: FormGroup = this.fb.group({}); - const nameFc = this.fb.control(icf.name); - facetFg.addControl('name', nameFc); - - const maxFc = this.fb.control(icf.max); - facetFg.addControl('max', maxFc); - - const minFc = this.fb.control(icf.min); - facetFg.addControl('min', minFc); - - const newCounter = (this.counterMap.get(nameplus)!)+1; - //alert('addFacet...nameplus...'+nameplus); - // alert('addFacet...'+this.counterMap.get(nameplus)); - this.counterMap.set(icf.name+'_'+icf.relation,newCounter); - const counterFc = this.fb.control(this.counterMap.get(nameplus)); - facetFg.addControl('counter_'+icf.name+'_'+icf.relation,counterFc); - facetFg.patchValue; - - const descriptionFc = this.fb.control(icf.description); - facetFg.addControl('description', descriptionFc); - - //aggiorno il counter - let oldCounter = this.counterMap.get(icf.name+'_'+icf.relation)!; - this.counterMap.set(icf.name+'_'+icf.relation,oldCounter++); - - const relationFc = this.fb.control(icf.relation,Validators.required); - facetFg.addControl('relation', relationFc); - - const propertiesFa = this.fb.array([]); - for(let j=0; jthis.myForm.controls['facets']; - - controls.removeAt(index); - this.facetArray.removeAt(index); + removeFacet(deno:string, index: number): void { + this.getSingleFacetArray(deno).removeAt(index); this.typeSpec.facetSpecs.splice(index,1); - } - - deleteProperty(ind:number,i:number): void { - this.getPropertiesArray(ind).removeAt(i); - } - - - addNewProperty(ind:number): void { - // alert('add prop!'); - } close():void { this.resetForm();