gCubeSystem
/
information-system-gui
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed bugs on adding/removing new facet dynamically

This commit is contained in:
Maria Teresa Paratore 2024-03-27 19:54:40 +01:00
parent c49a558f05
commit bb3cab0fcc
2 changed files with 111 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/main/webapp/app/facet-composer/facet-composer.component.html
View File

@ -2,7 +2,6 @@
<!-- myForm inizio form globale --> <!-- myForm inizio form globale -->
<mat-dialog-content> <mat-dialog-content>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
@ -17,80 +16,58 @@
<div [formGroup]="myForm"> <div [formGroup]="myForm">
<div formArrayName="facets"> <div formArrayName="{{facetTemplate.key}}" *ngFor="let facetTemplate of fieldsMap|keyvalue;" >
<div [formGroupName] ="ind" *ngFor="let fct of facetArray.controls; let ind=index;" style="border: 3px solid rgb(72, 157, 202); padding: 10px; margin: 5px;"> <div [formGroupName] ="ind" *ngFor="let fct of (getSingleFacetArray(facetTemplate.key)).controls; let ind=index;" style="border: 3px solid rgb(72, 157, 202); padding: 10px; margin: 5px;">
<mat-form-field appearance="outline" > <mat-form-field appearance="outline" >
<input matInput formControlName="name" [style.width.px]="350" id="{{typeSpec.facetSpecs[ind].name}}" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" /> <input matInput formControlName="facetName" [style.width.px]="350" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" />
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label for="relation" >occurr. min</mat-label> <mat-label for="min" >occurr. min</mat-label>
<input matInput formControlName="min" id="min" type="text" readonly="true"/> <input matInput formControlName="min" id="min" type="text" readonly="true"/>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label for="relation" >occurr. max</mat-label> <mat-label for="max" >occurr. max</mat-label>
<input matInput formControlName="max" id="max" type="text" readonly="true"/> <input matInput formControlName="max" id="max" type="text" readonly="true"/>
</mat-form-field> </mat-form-field>
<mat-form-field>
<mat-label for="'counter_'+typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation" >counter (hide)</mat-label>
<input matInput formControlName="{{'counter_'+typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation}}"
id="{{'counter_'+typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation}}" type="number"
readonly="true"/>
</mat-form-field>
<div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;"> <div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
<textarea matInput formControlName="description" [readonly]="true">{{typeSpec.facetSpecs[ind].description}}</textarea> <textarea matInput formControlName="facetDescription" [readonly]="true">{{facetTemplate.value.description}}</textarea>
</div> </div>
<mat-form-field>
<mat-label for="relationFacet" >relationFacet</mat-label>
<mat-form-field style="padding-top: 24px; padding-bottom: 24px;"> <mat-select formControlName="relationFacet" id="relationFacet">
<mat-label for="relation" >relation</mat-label> <mat-option *ngFor="let opt of facetTemplate.value.relationOptions" [value]="opt">
<mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" > {{opt}}
<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item" >
{{item}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<!-- OK SO FAR --> <!-- PROPERTIES -->
<div formArrayName="properties" style="border: 1px solid rgb(159, 204, 217); padding: 10px; margin: 5px;"> <div *ngFor="let prop of facetTemplate.value.guiProps">
<div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;">
<mat-form-field> <mat-form-field>
<mat-label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label> <mat-label>{{prop.label}}</mat-label>
<input matInput formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" <input matInput formControlName="{{prop.name}}" id="{{prop.name}}"
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/> type="{{prop.type}}"/>
</mat-form-field> </mat-form-field>
</div> </div>
</div> <input matInput formControlName="isAdded" style="display: none;"/>
<!--(counterMap.get(typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation)!)-->
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;"> <div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
<button mat-icon-button color="primary" <button mat-icon-button color="primary"
[disabled]="typeSpec.facetSpecs[ind].min==='1' && ((counterMap.get(typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation)!)==1)"
(click)="removeFacet(ind)" matTooltip="remove" matTooltipClass="tableTooltip" [disabled]="facetTemplate.value.min==='1' && !myForm.get([facetTemplate.key,ind,'isAdded'])!.value"
(click)="removeFacet(facetTemplate.key,ind)" matTooltip="remove {{facetTemplate.key}}" matTooltipClass="tableTooltip"
matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button> matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
</div> </div>
</div>
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;"> </div>
<h3>Add new Facet:</h3> <button mat-icon-button color="primary" matTooltip="add new {{facetTemplate.key}}"
<div style="padding-top: 24px; padding-bottom: 24px;">
<mat-form-field appearance="outline" [style.width.px]="250">
<mat-label for="selFacet" >Available Facet Types</mat-label>
<!--<select #teams (change)="onSelected(teams.value)">
(change)='onOptionsSelected(mySelect.value)'-->
<mat-select #selFacet (valueChange)="onOptionsSelected($event)">
<mat-option *ngFor="let item of addableFacets" [value]="item">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button color="primary" matTooltip="add new facet"
matTooltipClass="tableTooltip" [matTooltipPosition]="'right'" matTooltipClass="tableTooltip" [matTooltipPosition]="'right'"
(click)="addFacet(selectedOption)"> (click)="addFacet(facetTemplate.key)" [disabled]="facetTemplate.value.max==='1'">
<mat-icon>add</mat-icon></button> <mat-icon>add</mat-icon></button>
</div> </div>
</div>
</div>
</div>
</div> <!-- chiude la form -->
<b>Form's Value:</b> <b>Form's Value:</b>
{{ myForm.value | json }} {{ myForm.value | json }}

279
src/main/webapp/app/facet-composer/facet-composer.component.ts
View File

@ -3,7 +3,7 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable no-console */ /* eslint-disable no-console */
import { CommonModule } from '@angular/common'; 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 { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { IContextNode } from 'app/services/i-context-node'; 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 { IFacetComposer, IFacetProps } from './i-facet-composer';
import { SharedModule } from 'app/shared/shared.module'; import { SharedModule } from 'app/shared/shared.module';
import { MatSelectFilterModule } from 'mat-select-filter'; import { MatSelectFilterModule } from 'mat-select-filter';
import { faAssistiveListeningSystems } from '@fortawesome/free-solid-svg-icons';
@ -37,38 +38,10 @@ export class FacetComposerComponent implements OnInit {
selectedOption: string; selectedOption: string;
myForm: FormGroup; //form complessiva myForm: FormGroup; //form complessiva
// relSelect: FormGroup<any>;
// facetData: IFacetComposer[]; // facetData: IFacetComposer[];
typeSpec: ITypeSpecification; typeSpec: ITypeSpecification;
fieldsMap: Map<string, IFacetComposer>; fieldsMap: Map<string, IFacetComposer>;
counterMap: Map<string, number>;
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 // eslint-disable-next-line @typescript-eslint/member-ordering
constructor(private guiService: FacetComposerService, private fb: FormBuilder, constructor(private guiService: FacetComposerService, private fb: FormBuilder,
@ -79,53 +52,19 @@ export class FacetComposerComponent implements OnInit {
this.selectedOption = ''; this.selectedOption = '';
this.typeSpec = {} as ITypeSpecification; this.typeSpec = {} as ITypeSpecification;
this.fieldsMap = new Map<string,IFacetComposer>(); this.fieldsMap = new Map<string,IFacetComposer>();
this.counterMap = new Map<string,number>(); this.myForm = this.fb.group({});
this.myForm = this.fb.group({
facets: new FormArray([
])
});
this.addableFacets = [];
}
removeGroup(i: number) {
const control = <FormArray>this.myForm.controls['times'];
control.removeAt(i);
} }
ngOnInit(): void { ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => { this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = 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 //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); this.createForm(res);
console.debug('**************CounterMap****************');
console.debug(this.counterMap);
}); });
} }
fillFacetSelect(myMap:Map<string,IFacetComposer>):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 { onOptionsSelected(value:string): void {
this.selectedOption = value; this.selectedOption = value;
//console.debug('******onOptionsSelected?...'+value); //console.debug('******onOptionsSelected?...'+value);
@ -135,15 +74,67 @@ export class FacetComposerComponent implements OnInit {
createForm(fData:ITypeSpecification):void{ createForm(fData:ITypeSpecification):void{
for(let i=0; i<fData.facetSpecs.length; i++){ for(let i=0; i<fData.facetSpecs.length; i++){
const facetSpec = fData.facetSpecs[i]; const facetSpec = fData.facetSpecs[i];
this.createFacetGroup(facetSpec); this.createFacetArrayEntry(facetSpec);
} }
} }
createPropertyArray(prop: IFacetProps, propFa: FormArray):void{
let fc;
//const propFa: FormArray = this.fb.array([]);
const fg: FormGroup = this.fb.group({}); createFacetArrayEntry(item: IFacetComposer):void{
//const fc = new FormControl([prop.name]) const nameplus:string = item.name+'_'+item.relation;
const singleFacetArray: FormArray = this.fb.array([]);
singleFacetArray.push(this.createFacetGroup(item,false));
this.myForm.addControl(nameplus,singleFacetArray);
}
addFacet(deno:string): void {
const icf: IFacetComposer = <IFacetComposer>this.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; i<props.length; i++){
const prop=props[i];
if(prop.type==="date"){ if(prop.type==="date"){
fc = this.fb.control(new Date()) fc = this.fb.control(new Date())
} }
@ -166,61 +157,22 @@ export class FacetComposerComponent implements OnInit {
} }
} }
} }
fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl); facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
propFa.push(fg); }
//return propFa; return facetFg;
} }
getSingleFacetArray(nameplus:string): FormArray {
return this.myForm.controls[nameplus] as FormArray;
createFacetGroup(item: IFacetComposer):void{
const facetFg: FormGroup = this.fb.group({});
//const relationFc = new FormControl('relation',Validators.required);
const nameFc = this.fb.control(item.name);
facetFg.addControl('name', 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('description', descriptionFc);
const relationFc = this.fb.control(item.relation,Validators.required);
facetFg.addControl('relation', relationFc);
const counterFc = this.fb.control(1);
// alert(this.counterMap.get('counter_'+nameFc.value+'_'+relationFc.value));
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
facetFg.addControl('counter_'+nameFc.value+'_'+relationFc.value, counterFc);
//1. creo formArray con le properties
const propertiesFa = this.fb.array([]);
for(let j=0; j<item.guiProps.length; j++){
this.createPropertyArray(item.guiProps[j],propertiesFa);
}
//2. aggiungo formarray delle properties ai controls per la facet
facetFg.addControl('properties',propertiesFa);
this.facetArray.push(facetFg);
} }
get facetArray(): FormArray {
return <FormArray>this.myForm.get('facets');
}
getPropertiesArray(index: number): FormArray{
return <FormArray>(<FormArray>this.facetArray.at(index)).get('properties');
}
onSubmit() { onSubmit() {
if (this.myForm.valid) { if (this.myForm.valid) {
const formData = this.myForm.value; const formData = this.myForm.value;
console.log("***** FORMDATA *****"); // console.log("***** FORMDATA *****");
console.log(formData); //console.log(formData);
// Process formData //TODO Process formData
} }
} }
@ -228,98 +180,13 @@ export class FacetComposerComponent implements OnInit {
this.myForm.reset(); this.myForm.reset();
} }
/*
private addFacetGroup(): FormGroup {
return this.fb.group({ removeFacet(deno:string, index: number): void {
relation: {}, this.getSingleFacetArray(deno).removeAt(index);
properties: this.fb.array([])
});
}
*/
addFacet(nameplus:string): void {
nameplus.replace(' (','_').replace(')','');
alert('replaced...'+nameplus);
//ATTENZIONE: nameplus contiene SPAZIO E PARENTESI
const icf: IFacetComposer = <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; j<icf.guiProps.length; j++){
this.createPropertyArray(icf.guiProps[j],propertiesFa);
}
//2. aggiungo formarray delle properties ai controls per la facet
facetFg.addControl('properties',propertiesFa);
//Aggiunge in ultima posizione nel'array
this.facetArray.push(facetFg);
}
removeFacet(index: number): void {
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
const nameplus = this.facetArray.at(index).get('name')?.value+'_'+this.facetArray.at(index).get('relation')?.value;
const newCounter = this.counterMap.get(nameplus)!-1;
this.counterMap.set(nameplus,newCounter);
//modifico il formcontrol
console.log("*********WHEN REMOVING...")
console.debug(nameplus);
console.log("*********")
this.facetArray.get('counter_'+nameplus)?.setValue(newCounter);
this.facetArray.at(index).get('counter_'+nameplus)?.patchValue;
const controls: FormArray = <FormArray>this.myForm.controls['facets'];
controls.removeAt(index);
this.facetArray.removeAt(index);
this.typeSpec.facetSpecs.splice(index,1); 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 { close():void {
this.resetForm(); this.resetForm();
this.dialogRef.close({event:'cancel'}); this.dialogRef.close({event:'cancel'});