work in progress
This commit is contained in:
parent
49bcaee077
commit
c33b9ba58f
|
|
@ -11,6 +11,7 @@ import { CommonModule } from '@angular/common';
|
|||
import { AddResourceComponent } from './add-resource/add-resource.component';
|
||||
import { FormComposerComponent } from './form-composer/form-composer.component';
|
||||
import { FacetComposerComponent } from './facet-composer/facet-composer.component';
|
||||
import { DynamicFormComponent } from './dynamic-form/dynamic-form.component';
|
||||
|
||||
//const routes: Routes =[{path:'addResource', component: AddResourceComponent}];
|
||||
|
||||
|
|
@ -40,6 +41,10 @@ import { FacetComposerComponent } from './facet-composer/facet-composer.componen
|
|||
path: 'facetComposer',
|
||||
component: FacetComposerComponent
|
||||
},
|
||||
{
|
||||
path: 'dynamicFormComponent',
|
||||
component: DynamicFormComponent
|
||||
},
|
||||
|
||||
navbarRoute,
|
||||
...errorRoute,
|
||||
|
|
|
|||
|
|
@ -1,40 +1,59 @@
|
|||
<h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
|
||||
<mat-dialog-content [formGroup]="myForm" (ngSubmit)="onSubmit()">
|
||||
<h3>{{itemName}}</h3>
|
||||
<h3>{{itemDesc}}</h3>
|
||||
<!--
|
||||
*ngFor="let x of itemsArray.controls; let i = index; ngForTrackBy: track"
|
||||
[formGroupName]="i"
|
||||
-->
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
Resource Description
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{itemName}}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p>{{itemDesc}}</p>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<!-- inizio -->
|
||||
<div *ngFor="let fct of itemFacets; let ind=index;">
|
||||
|
||||
<div style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
|
||||
<div style="border: 1px solid blue; padding: 10px; margin: 5px;">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{fct.name}} - {{ind}}
|
||||
{{fct.relation}}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
relation: {{fct.relation}}
|
||||
</mat-panel-description>
|
||||
{{fct.name}}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p>{{fct.description}}</p>
|
||||
</mat-expansion-panel>
|
||||
<
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div >
|
||||
{{itemFacets[1].relation}}
|
||||
</div>
|
||||
-->
|
||||
<div formArrayName="facets">
|
||||
<div *ngFor="let facet of facets().controls; let fctIdx=index">
|
||||
<div formGroupName="fctIdx" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
|
||||
{{itemFacets[fctIdx].relation}} : <br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- qui andranno le varie properties della facet come form
|
||||
<div *ngFor="let prop of fct.properties; let fi=index;">-->
|
||||
<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>
|
||||
|
||||
<!--
|
||||
{{fi}} name: {{prop.name}}<br/>
|
||||
{{fi}} description: {{prop.description}}<br/>
|
||||
{{fi}} mandatory: {{prop.mandatory}}<br/>
|
||||
{{fi}} notnull: {{prop.notnull}}<br/>
|
||||
{{fi}} regexp: {{prop.regexp}}<br/>
|
||||
{{fi}} propertyType: {{prop.propertyType}}<br/>
|
||||
-->
|
||||
|
||||
</div>
|
||||
<!-- qui va il bottone per aggiungere/rimuovere una facet -->
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
/* 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 { FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { 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';
|
||||
import { IResource } from 'app/services/i-resource';
|
||||
|
|
@ -11,6 +12,7 @@ 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 { IFacetProperty } from './i-facet-property';
|
||||
|
||||
|
||||
|
||||
|
|
@ -26,42 +28,80 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|||
})
|
||||
|
||||
export class FacetComposerComponent implements OnInit {
|
||||
|
||||
myForm: FormGroup | any;
|
||||
|
||||
//NEW
|
||||
myForm: FormGroup | any; //form complessiva
|
||||
//form delle facet properties (CPU, Capacity, IPAddress, ecc.)
|
||||
//è un formGroup perché aggiungo campi man mano che li leggo dalla specifica dinamica
|
||||
facetPropsForm: FormGroup | any;
|
||||
|
||||
facetPropsList: IFacetProperty[] = [];
|
||||
//Form delle facet è un formArray percé prevede possibilità di aggiungere/rimuovere form
|
||||
//facetTypes = new FormArray<FormGroup>([]);
|
||||
|
||||
titleType: string;
|
||||
titlePath: string;
|
||||
typeSpecification: any; //array con le specifiche delle facet per tipo risorsa
|
||||
// facetBlocks: IFacetComposer[]|any; //array con le specifiche delle facet per tipo risorsa
|
||||
|
||||
////campi GUI
|
||||
itemName: string|any;
|
||||
itemDesc: string|any;
|
||||
itemFacets: IFacetComposer[]|any;
|
||||
|
||||
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
||||
private dialogRef:MatDialogRef<FacetComposerComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){
|
||||
this.titleType = data.type.name;
|
||||
this.titlePath = data.context.path;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
facetPropsArray() {
|
||||
return <FormArray>this.facetPropsForm.get('facetProps');
|
||||
} */
|
||||
|
||||
ngOnInit(): void {
|
||||
this.myForm = this.fb.group({
|
||||
facets:this.fb.array([])// Initialize an empty FormArray
|
||||
this.myForm = this.fb.group({
|
||||
facetTypes : this.fb.array([])// Initialize an empty FormArray
|
||||
});
|
||||
//alert('before fetching');
|
||||
this.guiService.fetchFacetConfiguration(this.titlePath,this.titleType).subscribe(res => {
|
||||
|
||||
this.facetPropsForm = this.fb.group({
|
||||
facetPropsArray : this.fb.array([]),
|
||||
});
|
||||
|
||||
this.guiService.fetchFacetConfiguration(this.titlePath,this.titleType).subscribe(res => {
|
||||
this.itemName=res.name;
|
||||
this.itemDesc=res.description;
|
||||
this.itemFacets = res.facetSpecs;
|
||||
|
||||
this.displayItems();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
displayItems() {
|
||||
const transformedItems = this.facetPropsList.map((prop: any) =>
|
||||
this.createItem(prop)
|
||||
);
|
||||
console.log("******transformedItems******");
|
||||
console.log(transformedItems);
|
||||
this.facetPropsForm.setControl('facetPropsList', this.fb.array(transformedItems));
|
||||
}
|
||||
|
||||
createItem(item: IFacetProperty) {
|
||||
return this.fb.group({
|
||||
//TODO: INSERIRE QUA DENTRO REGOLE VALIDAZIONE DESUNTE DA PRIPRITY/NOTNULL/ETC
|
||||
title: [item.description, [Validators.required]],
|
||||
completed: [item.name, [Validators.required]],
|
||||
priority: [item.mandatory, [Validators.required]],
|
||||
notnull: [item.notnull, [Validators.required]],
|
||||
propertyType: [item.propertyType, [Validators.required]],
|
||||
regexp: [item.regexp, [Validators.required]],
|
||||
});
|
||||
}
|
||||
|
||||
//TODO: questo per aggiungere una nuova facet
|
||||
|
||||
newFacet(): FormGroup {
|
||||
/*
|
||||
newFacetProperty( ): FormGroup {
|
||||
return this.fb.group({
|
||||
//TODO: TUTTO QUESTO VA PARAMETRIZZATO
|
||||
name: ['', Validators.required],
|
||||
|
|
@ -72,43 +112,7 @@ export class FacetComposerComponent implements OnInit {
|
|||
properties: this.fb.array([])
|
||||
});
|
||||
}
|
||||
|
||||
addFacet():void{
|
||||
this.facets().push(this.newFacet());
|
||||
}
|
||||
|
||||
removeFacet(fctIndex: number):void {
|
||||
this.facets().removeAt(fctIndex);
|
||||
}
|
||||
|
||||
facetProperties(fctIndex: number): FormArray {
|
||||
return this.itemFacets()
|
||||
.at(fctIndex)
|
||||
.get('properties') as FormArray;
|
||||
}
|
||||
|
||||
newProperty(): FormGroup { //la property per una facet è una coppia key/value (stringhe)
|
||||
return this.fb.group({ //questi corrispondono ai nomi dei control nell'html!
|
||||
name: '', //label
|
||||
description: '', //sub-label
|
||||
mandatory: false,
|
||||
notnull: false,
|
||||
regexp:''
|
||||
});
|
||||
}
|
||||
|
||||
addFacetProperty(fctIndex: number):void {
|
||||
this.facetProperties(fctIndex).push(this.newProperty());
|
||||
}
|
||||
|
||||
removeFacetProperty(fctIndex: number, propIndex: number):void {
|
||||
this.facetProperties(fctIndex).removeAt(propIndex);
|
||||
}
|
||||
|
||||
// Helper method to get the 'facets' FormArray
|
||||
facets():FormArray {
|
||||
return this.myForm.get('facets') as FormArray;
|
||||
}
|
||||
*/
|
||||
|
||||
////////////////
|
||||
|
||||
|
|
@ -126,5 +130,26 @@ export class FacetComposerComponent implements OnInit {
|
|||
console.log(this.myForm.value);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
addFacetType(){
|
||||
this.facetTypes.push(this.newFacetType())
|
||||
}
|
||||
|
||||
removeFacetType(fctIndex: number):void {
|
||||
this.facetTypes.removeAt(fctIndex);
|
||||
}
|
||||
newFacetType( ): FormGroup {
|
||||
return this.fb.group({
|
||||
//TODO: TUTTO QUESTO VA PARAMETRIZZATO
|
||||
name: ['', Validators.required],
|
||||
min: [1, Validators.required],
|
||||
max: [1, Validators.required],
|
||||
relation: ['', Validators.required],
|
||||
description: [''],
|
||||
properties: this.fb.array([])
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,16 @@
|
|||
import { IFacetProp } from "./i-facet-prop";
|
||||
|
||||
export interface IFacet {
|
||||
name: string;
|
||||
description: string;
|
||||
properties: IFacetProp[];
|
||||
}
|
||||
|
||||
export interface IFacetProp {
|
||||
type: string;
|
||||
name: string;
|
||||
description: string;
|
||||
mandatory:boolean;
|
||||
notnull:boolean;
|
||||
regexp:string;
|
||||
propertyType:string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,8 +19,11 @@
|
|||
<!--
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue