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

debugging...

This commit is contained in:
Maria Teresa Paratore 2024-03-11 17:26:07 +01:00
parent a5784ae14f
commit 9894e6434e
2 changed files with 131 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,25 +17,25 @@
<div [formGroup]="myForm">
<div formArrayName="facetArray">
<div [formGroupName] ="ind" *ngFor="let fct of typeSpec.facetSpecs; let ind=index;" >
<div formArrayName="facets">
<div [formGroupName] ="ind" *ngFor="let fct of facetArray.controls; let ind=index;" >
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
<input formControlName="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}" />
</mat-panel-title>
<mat-panel-description>
<mat-panel-description>
{{typeSpec.facetSpecs[ind].name}}
</mat-panel-description>
</mat-expansion-panel-header>
<p>{{typeSpec.facetSpecs[ind].description}}</p>
<!-- OK SO FAR -->
<div formArrayName="propertyArray" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
<div [formGroupName] ="i" *ngFor="let prop of typeSpec.facetSpecs[ind].guiProps; let i=index" >
<label for="{{prop.name}}">{{i}}.{{prop.label}}</label>
<input formControlName="{{prop.name}}" id="{{prop.name}}" type="{{prop.type}}"/>
<div formArrayName="properties" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
<!--<div [formGroupName] ="i" *ngFor="let prop of typeSpec.facetSpecs[ind].guiProps; let i=index" >-->
<div [formGroupName] ="i" *ngFor="let prop of propertyArray.controls; let i=index;" >
<label for="{{typeSpec.facetSpecs[ind].guiProps[i].name}}">{{i}}.{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
<input formControlName="{{prop.name}}" id="{{prop.name}}" type="{{prop.type}}"/>
</div>
</div>

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

@ -7,12 +7,12 @@ import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Va
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { IContextNode } from 'app/services/i-context-node';
import { IResource } from 'app/services/i-resource';
import { IFacetComposer, IFacetProps } from './i-facet-composer';
import { FacetComposerService, ITypeSpecification } from './facet-composer.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';
import { IFacetComposer, IFacetProps } from './i-facet-composer';
@ -32,8 +32,9 @@ export class FacetComposerComponent implements OnInit {
titleType: string;
titlePath: string;
myForm: FormGroup ; //form complessiva
propertyGroup: FormGroup; //form complessiva
myForm: FormGroup; //form complessiva
//TODO: a regime sarà possibile aggiungere properties?
propertyGroup: FormGroup ; //form complessiva
typeSpec: ITypeSpecification;
@ -44,22 +45,103 @@ export class FacetComposerComponent implements OnInit {
this.titleType = data.type.name;
this.titlePath = data.context.path;
this.typeSpec = {} as ITypeSpecification;
this.myForm = this.fb.group({
facetArray: this.fb.array([this.addFacetGroup()])
});
this.propertyGroup = this.fb.group({
propertyGroup: [],
});
this.propertyGroup = this.fb.group({});
this.myForm = new FormGroup({
facets: new FormArray([]),
});
this.propertyGroup = new FormGroup({
properties: new FormArray([]),
});
}
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.createForm(res);
});
}
addNewExtraProperty(control:FormArray) {
control.push(
this.fb.group({
extraProp: ['']
}))
}
deleteExtraProperty(control:FormArray, index:number) {
control.removeAt(index)
}
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
createForm(facetData:ITypeSpecification):void{
for(let i=0; i<facetData.facetSpecs.length; i++){
const facetSpec = facetData.facetSpecs[i];
this.createFacetGroup(facetSpec);
}
}
//https://stackoverflow.com/questions/74543979/is-it-possible-to-declare-an-empty-form-group-then-add-form-controls-afterwards
createPropertyArray(item: IFacetProps[]):FormArray {
const fg: FormGroup = this.fb.group({});
for (let i=0; i<item.length; i++){
const prop = item[i];
const fc = new FormControl([prop.name])
if (prop.validations.length>0){
for (let k=0; k<prop.validations.length; k++){
if(prop.validations[k].name==='required'){
fc.addValidators(Validators.required)
}
if(prop.validations[k].name==='pattern'){
fc.addValidators(Validators.pattern(prop.pattern))
}
}
}
fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
this.propertyArray.push(fg);
}
console.debug('************ PROPERTIES: fg.controls:')
console.debug(fg.controls);
return propArr;
}
createFacetGroup(item: IFacetComposer):void{
const fg: FormGroup = this.fb.group({});
//const propsFg = this.createPropertyGroup(item.guiProps);
const propsFa = this.createPropertyArray(item.guiProps);
const fc = new FormControl('relation',Validators.required);
fg.addControl(item.relation, fc);
fg.addControl('properties',propsFa);
/*
console.debug('************ FACET: fg.controls:')
console.debug(fg.controls);
*/
this.facetArray.push(fg);
console.debug('************ FACETARRAY:')
console.debug(this.facetArray.length);
}
get facetArray(): FormArray {
return <FormArray>this.myForm.get('facets');
}
get propertyArray(): FormArray {
return <FormArray>this.myForm.get('properties');
}
///////////////////////////////
private addFacetGroup(): FormGroup {
return this.fb.group({
relation: [],
propertyArray: this.fb.array([])
relation: {},
properties: this.fb.array([])
});
}
}
addFacet(): void {
this.facetArray.push(this.addFacetGroup());
}
@ -69,65 +151,42 @@ export class FacetComposerComponent implements OnInit {
this.facetArray.removeAt(index);
}
get facetArray(): FormArray {
return <FormArray>this.myForm.get('facetArray');
}
addProperty(index:number): void {
(<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
}
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.prepareControls(res);
});
}
prepareControls(spec:ITypeSpecification){
for (let i=0; i<spec.facetSpecs.length; i++){
this.facetArray.push(this.fb.group({
'relation': [spec.facetSpecs[i].relation,Validators.required]
}));
for(let j=0; j<spec.facetSpecs[i].guiProps.length; j++){
const props = spec.facetSpecs[i].guiProps[j];
//const name = props.name;
//this.myForm.addControl('new', new FormControl('', Validators.required));
const propGroup = this.facetArray.at(i).get('propertyArray')?.get('propertyGroup');
if(props.validations.length===0 && propGroup!=null){
// this.testForm.addControl('new', new FormControl('', Validators.required));
this.propertyGroup.addControl(String(j),
this.fb.control({
j : ['',null]
})
);
}else{
this.propertyGroup.addControl(String(j),
this.fb.control({
j : ['',null]
})
);
}
}
}
}
close():void {
this.dialogRef.close({event:'cancel'});
}
//chiude e basta
}
}
/*
addNewCompany() {
this.companiesFormArr.push(
this.fb.group({
company: [''],
projects: this.fb.array([])
})
);
}
deleteCompany(index: number) {
this.companiesFormArr.removeAt(index);
}
addNewProject(control) {
control.push(
this.fb.group({
projectName: ['']
}))
}
deleteProject(control, index) {
control.removeAt(index)
}
*/