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

work in progres...

This commit is contained in:
Maria Teresa Paratore 2024-03-18 17:55:25 +01:00
parent 4445c493e9
commit 3f93e339fe
3 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,43 +18,51 @@
<div [formGroup]="myForm"> <div [formGroup]="myForm">
<div formArrayName="facets"> <div formArrayName="facets">
<div [formGroupName] ="ind" *ngFor="let fct of facetArray.controls; let ind=index;" > <div [formGroupName] ="ind" *ngFor="let fct of facetArray.controls; let ind=index;" style="border: 3px solid rgb(72, 157, 202); padding: 10px; margin: 5px;">
<mat-expansion-panel> <!--<mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>-->
<b>{{typeSpec.facetSpecs[ind].name}}</b> <mat-form-field appearance="outline" >
<input matInput formControlName="name" id="{{typeSpec.facetSpecs[ind].name}}" type="text" [readonly]="true" style="font-size: larger; font-weight: 700;" />
</mat-form-field>
<!--TODO: vedi quando si possono rendere editabili le relazioni--> <!--TODO: vedi quando si possono rendere editabili le relazioni-->
</mat-panel-title> <!-- </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header> -->
<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;">
<p>{{typeSpec.facetSpecs[ind].description}}</p> <textarea matInput formControlName="description" [readonly]="true">{{typeSpec.facetSpecs[ind].description}}</textarea>
</div> </div>
<mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
<mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
<mat-label for="relation" >relation</mat-label> <mat-label for="relation" >relation</mat-label>
<mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" > <mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" >
<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item"> <mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item" >
{{item}} {{item}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field>
</mat-form-field>
<!-- OK SO FAR --> <!-- OK SO FAR -->
<div formArrayName="properties" style="border: 1px solid rgb(140, 113, 181); padding: 10px; margin: 5px;"> <div formArrayName="properties" style="border: 1px solid rgb(159, 204, 217); padding: 10px; margin: 5px;">
<div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;"> <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>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label>
<input matInput formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" <input matInput formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}"
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/> type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
</mat-form-field> </mat-form-field>
<!--
<button (click)="deleteProperty(ind,i)">Remove property</button> <button (click)="deleteProperty(ind,i)">Remove property</button>
-->
</div> </div>
</div> </div>
<button (click)="addNewProperty(ind)">Add Property</button> <!--<button (click)="addNewProperty(ind)">Add Property</button>-->
</mat-expansion-panel> <!-- </mat-expansion-panel>-->
<!--TODO: che tipo di facet aggiungo??--> <div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
<button (click)="addFacet()">Add Facet</button> <!--TODO: AGGIUNGI NUOVA SOLO SE IN ULTIMA POSIZIONE -->
<button mat-icon-button color="primary" (click)="addFacet(ind)" matTooltip="add new {{typeSpec.facetSpecs[ind].name}}" matTooltipClass="tableTooltip" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
<button mat-icon-button color="primary" (click)="removeFacet(ind)" matTooltip="remove {{typeSpec.facetSpecs[ind].name}}" matTooltipClass="tableTooltip" matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
</div>
</div> </div>
</div> </div>
</div> </div>

12
src/main/webapp/app/facet-composer/facet-composer.component.scss
View File

@ -0,0 +1,12 @@
.tableTooltip{
transform: scale(1.5)!important;
background-color: bisque!important;
position: relative !important;
font-size: 10px;
color: black!important;
font-weight: bold;
}
.mat-icon {
font-size: 32px;
}

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

@ -36,8 +36,8 @@ export class FacetComposerComponent implements OnInit {
myForm: FormGroup; //form complessiva myForm: FormGroup; //form complessiva
facetData: IFacetComposer[];
typeSpec: ITypeSpecification; typeSpec: ITypeSpecification;
// relationOptions: string[]|undefined;
defaultProperty = { defaultProperty = {
"type": "text", "type": "text",
@ -51,6 +51,7 @@ export class FacetComposerComponent implements OnInit {
defaultFacet = { defaultFacet = {
"name": "nuova facet",
"relation": "ConsistsOf", "relation": "ConsistsOf",
"properties": [ "properties": [
{ {
@ -70,7 +71,8 @@ export class FacetComposerComponent implements OnInit {
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){ @Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){
this.titleType = data.type.name; this.titleType = data.type.name;
this.titlePath = data.context.path; this.titlePath = data.context.path;
this.typeSpec = {} as ITypeSpecification; this.facetData = [];
this.typeSpec = {} as ITypeSpecification;
this.myForm = this.fb.group({ this.myForm = this.fb.group({
facets: new FormArray([ facets: new FormArray([
@ -83,7 +85,11 @@ export class FacetComposerComponent implements OnInit {
*/ */
} }
removeGroup(i: number) {
// remove address from the list
const control = <FormArray>this.myForm.controls['times'];
control.removeAt(i);
}
/* /*
[INFO] An unhandled exception occurred: Script file node_modules/jsonpath-plus/dist/index-umd.js does not exist. [INFO] An unhandled exception occurred: Script file node_modules/jsonpath-plus/dist/index-umd.js does not exist.
[INFO] See "/private/var/folders/sx/pzmn6csj17n2l3d_f1m5jmdr0000gn/T/ng-8XFcFL/angular-errors.log" for further details. [INFO] See "/private/var/folders/sx/pzmn6csj17n2l3d_f1m5jmdr0000gn/T/ng-8XFcFL/angular-errors.log" for further details.
@ -91,6 +97,7 @@ export class FacetComposerComponent implements OnInit {
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;
this.facetData = res.facetSpecs;
this.createForm(res); this.createForm(res);
}); });
} }
@ -107,14 +114,14 @@ export class FacetComposerComponent implements OnInit {
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!! //TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
createForm(facetData:ITypeSpecification):void{ createForm(fData:ITypeSpecification):void{
for(let i=0; i<facetData.facetSpecs.length; i++){ for(let i=0; i<fData.facetSpecs.length; i++){
const facetSpec = facetData.facetSpecs[i]; const facetSpec = fData.facetSpecs[i];
this.createFacetGroup(facetSpec); this.createFacetGroup(facetSpec);
} }
} }
createPropertyArray2(prop: IFacetProps, propFa: FormArray):void{ createPropertyArray(prop: IFacetProps, propFa: FormArray):void{
let fc; let fc;
//const propFa: FormArray = this.fb.array([]); //const propFa: FormArray = this.fb.array([]);
const fg: FormGroup = this.fb.group({}); const fg: FormGroup = this.fb.group({});
@ -147,55 +154,25 @@ export class FacetComposerComponent implements OnInit {
} }
createPropertyArray(item: IFacetProps[]):FormArray{
let fc;
const propFa: FormArray = this.fb.array([]);
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.type==="date"){
fc = this.fb.control(new Date())
}
if(prop.type==="number"){
fc = this.fb.control(0)
}
if(prop.type==="boolean"){
fc = this.fb.control(true)
}
else{
fc = this.fb.control('') //text
}
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);
propFa.push(fg);
console.debug('*** propFa ***');
console.debug(propFa);
console.debug('****************');
}
return propFa;
}
createFacetGroup(item: IFacetComposer):void{ createFacetGroup(item: IFacetComposer):void{
const facetFg: FormGroup = this.fb.group({}); const facetFg: FormGroup = this.fb.group({});
//const relationFc = new FormControl('relation',Validators.required); //const relationFc = new FormControl('relation',Validators.required);
const nameFc = this.fb.control(item.name);
facetFg.addControl('name', nameFc);
const descriptionFc = this.fb.control(item.description);
facetFg.addControl('description', descriptionFc);
const relationFc = this.fb.control(item.relation,Validators.required); const relationFc = this.fb.control(item.relation,Validators.required);
facetFg.addControl('relation', relationFc); facetFg.addControl('relation', relationFc);
//1. creo formArray con le properties //1. creo formArray con le properties
//const propertiesFa = this.createPropertyArray2(item.guiProps); //const propertiesFa = this.createPropertyArray(item.guiProps);
const propertiesFa = this.fb.array([]); const propertiesFa = this.fb.array([]);
for(let j=0; j<item.guiProps.length; j++){ for(let j=0; j<item.guiProps.length; j++){
this.createPropertyArray2(item.guiProps[j],propertiesFa); this.createPropertyArray(item.guiProps[j],propertiesFa);
} }
//2. aggiungo formarray delle properties ai controls per la facet //2. aggiungo formarray delle properties ai controls per la facet
facetFg.addControl('properties',propertiesFa); facetFg.addControl('properties',propertiesFa);
@ -231,6 +208,7 @@ export class FacetComposerComponent implements OnInit {
/////////////////////////////// ///////////////////////////////
private addFacetGroup(): FormGroup { private addFacetGroup(): FormGroup {
return this.fb.group({ return this.fb.group({
relation: {}, relation: {},
properties: this.fb.array([]) properties: this.fb.array([])
@ -239,15 +217,47 @@ export class FacetComposerComponent implements OnInit {
//TODO: ADD DEFAULT FACET (usa json: defaultFacet) //TODO: ADD DEFAULT FACET (usa json: defaultFacet)
addFacet(): void { addFacet(ind:number): void {
this.facetArray.push(this.addFacetGroup()); // this.facetArray.push(this.addFacetGroup());
//this.createFacetGroup(this.facetData[ind]);
const icf: IFacetComposer = this.facetData[ind];
const facetFg: FormGroup = this.fb.group({});
const nameFc = this.fb.control(icf.name);
facetFg.addControl('name', nameFc);
const descriptionFc = this.fb.control(icf.description);
facetFg.addControl('description', descriptionFc);
const relationFc = this.fb.control(icf.relation,Validators.required);
facetFg.addControl('relation', relationFc);
//1. creo formArray con le properties
//const propertiesFa = this.createPropertyArray(item.guiProps);
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 {
const controls: FormArray = <FormArray>this.myForm.controls['facets'];
controls.removeAt(index);
removeFacet(index: number): void {
/*
for(let j=0; j<this.facetData[index].guiProps.length; j++){
this.deleteProperty(index,j);
}
this.facetArray.removeAt(index); this.facetArray.removeAt(index);
} console.debug('*** rimosso indice: '+String(index));
*/
}
deleteProperty(ind:number,i:number): void { deleteProperty(ind:number,i:number): void {
this.getPropertiesArray(ind).removeAt(i); this.getPropertiesArray(ind).removeAt(i);
@ -258,17 +268,8 @@ export class FacetComposerComponent implements OnInit {
addNewProperty(ind:number): void { addNewProperty(ind:number): void {
/* // alert('add prop!');
const formGroup = this.createItem(this.defaultItem); }
this.itemsArray.push(formGroup);
*/
//this.getPropertiesArray(ind).push();
alert('add prop!');
/*
(<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
*/
}
close():void { close():void {
this.resetForm(); this.resetForm();