gCubeSystem
/
information-system-gui
16
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 formArrayName="facets">
<div [formGroupName] ="ind" *ngFor="let fct of facetArray.controls; let ind=index;" >
<mat-expansion-panel>
<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-header>
<mat-panel-title>
<b>{{typeSpec.facetSpecs[ind].name}}</b>
<mat-panel-title>-->
<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-->
</mat-panel-title>
</mat-expansion-panel-header>
<!-- </mat-panel-title>
</mat-expansion-panel-header> -->
<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>
<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-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}}
</mat-option>
</mat-select>
</mat-form-field>
</mat-form-field>
<!-- 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;">
<mat-form-field>
<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}}"
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
</mat-form-field>
<!--
<button (click)="deleteProperty(ind,i)">Remove property</button>
-->
</div>
</div>
<button (click)="addNewProperty(ind)">Add Property</button>
</mat-expansion-panel>
<!--TODO: che tipo di facet aggiungo??-->
<button (click)="addFacet()">Add Facet</button>
<!--<button (click)="addNewProperty(ind)">Add Property</button>-->
<!-- </mat-expansion-panel>-->
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
<!--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>

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
facetData: IFacetComposer[];
typeSpec: ITypeSpecification;
// relationOptions: string[]|undefined;
defaultProperty = {
"type": "text",
@ -51,6 +51,7 @@ export class FacetComposerComponent implements OnInit {
defaultFacet = {
"name": "nuova facet",
"relation": "ConsistsOf",
"properties": [
{
@ -70,7 +71,8 @@ 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.typeSpec = {} as ITypeSpecification;
this.facetData = [];
this.typeSpec = {} as ITypeSpecification;
this.myForm = this.fb.group({
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] 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 {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.facetData = res.facetSpecs;
this.createForm(res);
});
}
@ -107,14 +114,14 @@ export class FacetComposerComponent implements OnInit {
//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];
createForm(fData:ITypeSpecification):void{
for(let i=0; i<fData.facetSpecs.length; i++){
const facetSpec = fData.facetSpecs[i];
this.createFacetGroup(facetSpec);
}
}
createPropertyArray2(prop: IFacetProps, propFa: FormArray):void{
createPropertyArray(prop: IFacetProps, propFa: FormArray):void{
let fc;
//const propFa: FormArray = this.fb.array([]);
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{
const facetFg: FormGroup = this.fb.group({});
//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);
facetFg.addControl('relation', relationFc);
//1. creo formArray con le properties
//const propertiesFa = this.createPropertyArray2(item.guiProps);
//const propertiesFa = this.createPropertyArray(item.guiProps);
const propertiesFa = this.fb.array([]);
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
facetFg.addControl('properties',propertiesFa);
@ -231,6 +208,7 @@ export class FacetComposerComponent implements OnInit {
///////////////////////////////
private addFacetGroup(): FormGroup {
return this.fb.group({
relation: {},
properties: this.fb.array([])
@ -239,15 +217,47 @@ export class FacetComposerComponent implements OnInit {
//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
addFacet(): void {
this.facetArray.push(this.addFacetGroup());
addFacet(ind:number): void {
// 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);
}
console.debug('*** rimosso indice: '+String(index));
*/
}
deleteProperty(ind:number,i:number): void {
this.getPropertiesArray(ind).removeAt(i);
@ -258,17 +268,8 @@ export class FacetComposerComponent implements OnInit {
addNewProperty(ind:number): void {
/*
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);
*/
}
// alert('add prop!');
}
close():void {
this.resetForm();