building dynamic FormControls for facets' specifications
This commit is contained in:
parent
eb1ad82cd1
commit
4ea75241b4
|
|
@ -143,7 +143,6 @@ public class InformationSystemResource {
|
|||
informationSystemService.setUma(createUmaToken(currentContext));
|
||||
ResourceTypeDTO dto = informationSystemService.getResourceType(typeName);
|
||||
ResourceBuilderDTO builderDto = new ResourceBuilderDTO(dto.getName(), dto.getDescription(), dto.isAstratto());
|
||||
ArrayList<ResourceBuilderDTO> result = new ArrayList<ResourceBuilderDTO>();
|
||||
|
||||
for(FacetTypeDTO ft : dto.getFacetTypes()) {
|
||||
FacetSpecDTO fs = informationSystemService.getFacetSpecification(ft.getTarget());
|
||||
|
|
@ -153,10 +152,8 @@ public class InformationSystemResource {
|
|||
facetSpecs.add(fs);
|
||||
}
|
||||
builderDto.setFacetSpecs(facetSpecs);
|
||||
result.add(builderDto);
|
||||
ObjectMapper objectMapper = new ObjectMapper();
|
||||
//devo ritornare un array con un elemento per costruire la GUI correttamente
|
||||
String sc = objectMapper.writeValueAsString(result);
|
||||
String sc = objectMapper.writeValueAsString(builderDto);
|
||||
return ResponseEntity.ok().body(sc);
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
|
|
|
|||
|
|
@ -1,55 +1,41 @@
|
|||
<h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
|
||||
<!--
|
||||
<mat-dialog-content [formGroup]="composerForm" (ngSubmit)="onSubmit()">
|
||||
|
||||
<mat-dialog-content>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Resource Description
|
||||
{{typeSpec.name}}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{titleType}}
|
||||
<!--la descrizione è lunga e non posso metterla qua-->
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p>{{itemDesc}}</p>
|
||||
<p> {{typeSpec.description}} </p>
|
||||
</mat-expansion-panel>
|
||||
-->
|
||||
<!-- inizio -->
|
||||
<!--
|
||||
<div *ngFor="let fct of itemFacets; let ind=index;">
|
||||
<div style="border: 1px solid blue; padding: 10px; margin: 5px;">
|
||||
<mat-expansion-panel>
|
||||
<!--inizio form esterna (elenco facet)-->
|
||||
<div *ngFor="let fct of typeSpec.facetSpecs; let ind=index;">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{fct.relation}}
|
||||
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
|
||||
<input type="text" value="{{fct.relation}}" disabled="true"/>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{fct.name}}
|
||||
</mat-panel-description>
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p>{{fct.description}}</p>
|
||||
<div style="border: 1px solid blue; padding: 10px; margin: 5px;">
|
||||
formGroup per la facet {{ind}}
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
-->
|
||||
<!-- qui andranno le varie properties della facet come form
|
||||
<div formGroupName="facetPropsForm">
|
||||
<div *ngFor="let prop of facetPropsList; let i = index;"
|
||||
[formGroupName]="i">
|
||||
<label></label>
|
||||
<input formControlName="{{prop.name}}"
|
||||
name="{{prop.name}}"
|
||||
type="text"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--fine form esterna-->
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="close()">Cancel</button>
|
||||
<button mat-button (click)="doAction()">Save</button>
|
||||
<!-- <button mat-button (click)="doAction()">Save</button> -->
|
||||
</mat-dialog-actions>
|
||||
-->
|
||||
|
|
@ -6,12 +6,13 @@ 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 } from './i-facet-composer';
|
||||
import { IFacetComposer, IFacetGui } 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 { IFacetProp } from 'app/services/i-facet';
|
||||
|
||||
|
||||
|
||||
|
|
@ -32,7 +33,19 @@ export class FacetComposerComponent implements OnInit {
|
|||
titlePath: string;
|
||||
|
||||
composerForm: FormGroup | any; //form complessiva
|
||||
composerFields: ITypeSpecification[];
|
||||
typeSpec: ITypeSpecification;
|
||||
facetItem: IFacetProp[] = [];
|
||||
|
||||
facetPropsForm: FormGroup[] =[]; //form per le props di una singola facet
|
||||
|
||||
defaultFacetItem = {
|
||||
name: '',
|
||||
description: '',
|
||||
mandatory:false,
|
||||
notnull:false,
|
||||
regexp:'',
|
||||
propertyType:''
|
||||
};
|
||||
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||
|
|
@ -41,38 +54,85 @@ export class FacetComposerComponent implements OnInit {
|
|||
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){
|
||||
this.titleType = data.type.name;
|
||||
this.titlePath = data.context.path;
|
||||
this.composerFields = {} as ITypeSpecification[];
|
||||
this.typeSpec = {} as ITypeSpecification;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
||||
this.composerFields = res;
|
||||
//this.composerForm = this.gener
|
||||
this.typeSpec = res;
|
||||
});
|
||||
this.composerForm = this.generateFacetsForm();
|
||||
//this.composerForm = this.generateFacetsForm();
|
||||
|
||||
}
|
||||
|
||||
generateFacetsForm(): FormGroup {
|
||||
const baseForm = this.fb.group({});
|
||||
this.composerFields.forEach((field) => {
|
||||
baseForm.addControl(field.name, this.generateFormGroup(baseForm, field));
|
||||
});
|
||||
console.log(baseForm);
|
||||
return baseForm;
|
||||
}
|
||||
/*
|
||||
export interface IFacetGui {
|
||||
type: string;
|
||||
label: string;
|
||||
name: string;
|
||||
value: string;
|
||||
pattern: string;
|
||||
propDescription: string;
|
||||
validations: IValidation[]
|
||||
}
|
||||
*/
|
||||
|
||||
private createFacetForm(props: IFacetProp,i:number){
|
||||
this.facetPropsForm[i] = this.fb.group(
|
||||
{
|
||||
name : ['',props.],
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
generateFormGroup(baseForm: FormGroup, field: ITypeSpecification): FormGroup | FormControl {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
if (field.facetSpecs) {
|
||||
const formGroup = this.fb.group({});
|
||||
field.facetSpecs.forEach((item) => {
|
||||
formGroup.addControl(item.name, this.generateFormGroup(formGroup, item.controls));
|
||||
});
|
||||
return formGroup;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
get itemsArray() {
|
||||
return <FormArray>this.toDoListForm.get('facetItems');
|
||||
}*/
|
||||
|
||||
//TODO: vedi qua
|
||||
//https://copyprogramming.com/howto/typescript-angular-9-programmatically-add-control-to-form
|
||||
/*
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Unit",
|
||||
"name": "unit",
|
||||
"value": "",
|
||||
"validations": [
|
||||
{
|
||||
"name": "pattern",
|
||||
"validator": "pattern",
|
||||
"message": "Wrong field format, required is: ^(Byte|kB|MB|GB|TB|PB|EB|ZB|YB)$"
|
||||
}
|
||||
],
|
||||
"pattern": null,
|
||||
"propDescription": ""
|
||||
}
|
||||
*/
|
||||
|
||||
//chiude e basta
|
||||
close():void {
|
||||
this.dialogRef.close({event:'cancel'});
|
||||
}
|
||||
return new FormControl('');
|
||||
}
|
||||
/*
|
||||
//chiude e passa i dati al component chiamante
|
||||
doAction():void {
|
||||
this.dialogRef.close({event:'add',data:this.composerForm.value});
|
||||
}
|
||||
|
||||
|
||||
onSubmit():void {
|
||||
console.log(this.composerForm.value);
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -25,13 +25,11 @@ export class FacetComposerService {
|
|||
|
||||
//TODO: paginate (when pagination APIs will be ready)
|
||||
//resourcespecification
|
||||
getFormStructure(ctxPath:string, type:string): Observable<ITypeSpecification[] > {
|
||||
getFormStructure(ctxPath:string, type:string): Observable<ITypeSpecification> {
|
||||
const serviceUrl = this.applicationConfigService.getEndpointFor('api/is/facetspecifications');
|
||||
let queryParams = new HttpParams();
|
||||
queryParams = queryParams.append("typeName",type).append("currentContext",ctxPath);
|
||||
return this.http.get<ITypeSpecification[]>(serviceUrl,{params:queryParams});
|
||||
return this.http.get<ITypeSpecification>(serviceUrl,{params:queryParams});
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,10 +19,9 @@
|
|||
<!--
|
||||
<button mat-raised-button color="primary" routerLink="/addResource">New Resource</button>
|
||||
<button mat-raised-button color="primary" routerLink="/facetComposer">Facet Composer</button>
|
||||
|
||||
<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
|
||||
-->
|
||||
<button mat-raised-button color="primary" routerLink="/dynamicFormComponent">Form Dinamica</button>
|
||||
-->
|
||||
<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue