added type selection for custom fields

This commit is contained in:
Maria Teresa Paratore 2024-04-04 17:03:17 +02:00
parent 897f5ee1bf
commit 910d7ce8bd
2 changed files with 34 additions and 17 deletions

View File

@ -51,25 +51,32 @@
</mat-form-field> </mat-form-field>
</div> </div>
<!-- ADDITIONAL PROPERTIES --> <!-- ADDITIONAL PROPERTIES -->
<!--TODO: AGGIUSTA QUESTO --> <div formArrayName ="extraProps" style="border: 2px solid rgb(176, 206, 230); padding: 10px; margin: 5px;">
<div formArrayName ="extraProps" style="border: 3px solid rgb(202, 198, 57); padding: 10px; margin: 5px;"> <span [style.width.px]="350" [style.font-weight]="900">Custom Properties</span>
<div [formGroupName] ="i" *ngFor="let x of getExtraPropsArray(facetTemplate.key,ind).controls; let i=index;"> <div [formGroupName] ="i" *ngFor="let x of getExtraPropsArray(facetTemplate.key,ind).controls; let i=index;">
<mat-form-field> <mat-form-field>
<mat-label for="deno">name</mat-label> <mat-label for="deno">name</mat-label>
<input matInput formControlName="deno" type="text"/> <input matInput formControlName="deno" type="text"/>
</mat-form-field> </mat-form-field>
<br/>
<mat-form-field> <mat-form-field>
<mat-label for="tipo">type</mat-label> <mat-label for="value">value</mat-label>
<input matInput formControlName="tipo" type="text"/> <input matInput formControlName="value" type="text"/>
</mat-form-field> </mat-form-field>
<mat-form-field>
<button mat-flat-button color="accent" <mat-label for="tipo" >type</mat-label>
<mat-select formControlName="tipo" id="tipo">
<mat-option *ngFor="let tp of optionTypes" [value]="tp.value">
{{tp.value}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-stroked-button color="primary" style="margin-left: 12px;"
(click)="removeExtraProp(facetTemplate.key,ind,i)" > (click)="removeExtraProp(facetTemplate.key,ind,i)" >
Remove custom property</button> Remove custom property</button>
</div> </div>
</div> </div>
<button mat-flat-button color="accent" <button mat-stroked-button color="primary" style="margin-left: 12px; margin-top: 18px;"
(click)="addExtraProp(facetTemplate.key,ind)" > (click)="addExtraProp(facetTemplate.key,ind)" >
Add custom property</button> Add custom property</button>
<!--</div> --> <!--</div> -->

View File

@ -63,18 +63,27 @@ export class FacetComposerComponent implements OnInit {
}); });
} }
optionTypes = [
{ value: 'boolean'},
{ value: 'number'},
{ value: 'text'}
];
onOptionsSelected(value:string): void { onOptionsSelected(value:string): void {
this.selectedOption = value; this.selectedOption = value;
//console.debug('******onOptionsSelected?...'+value); //console.debug('******onOptionsSelected?...'+value);
} }
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!! //TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
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.createFacetArrayEntry(facetSpec); this.createFacetArrayEntry(facetSpec);
} }
} }
createFacetArrayEntry(item: IFacetComposer):void{ createFacetArrayEntry(item: IFacetComposer):void{
const nameplus:string = item.name+'_'+item.relation; const nameplus:string = item.name+'_'+item.relation;
@ -92,8 +101,9 @@ export class FacetComposerComponent implements OnInit {
get extraProp():FormGroup{ get extraProp():FormGroup{
return this.fb.group({ return this.fb.group({
deno: ['',null], deno: ['',Validators.required],
tipo: ['',Validators.required] value: ['',Validators.required],
tipo:['text']
}) })
} }