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

debugging functions to add new facets dynamically

This commit is contained in:
Maria Teresa Paratore 2024-03-20 15:58:09 +01:00
parent c148bb73c9
commit d84328823b
3 changed files with 73 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,11 +19,9 @@
<div formArrayName="facets">
<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>-->
<p><b>facet {{ind}}</b></p>
<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;" />
<input matInput formControlName="name" [style.width.px]="300" id="{{typeSpec.facetSpecs[ind].name}}" type="text" [readonly]="true" style="font-size: larger; font-weight: 700;" />
</mat-form-field>
<mat-form-field>
<mat-label for="relation" >occurr. min</mat-label>
@ -33,9 +31,6 @@
<mat-label for="relation" >occurr. max</mat-label>
<input matInput formControlName="max" id="max" type="text" readonly="true"/>
</mat-form-field>
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
<!-- </mat-panel-title>
</mat-expansion-panel-header> -->
<div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
<textarea matInput formControlName="description" [readonly]="true">{{typeSpec.facetSpecs[ind].description}}</textarea>
</div>
@ -58,25 +53,43 @@
<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>-->
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
<!--TODO: AGGIUNGI NUOVA SOLO SE IN ULTIMA POSIZIONE -->
<button mat-icon-button color="primary" [disabled]="typeSpec.facetSpecs[ind].max==='1'"
(click)="addFacet(ind)" matTooltip="add new" matTooltipClass="tableTooltip"
matTooltipPosition="above"><mat-icon>add</mat-icon></button>
<button mat-icon-button color="primary" [disabled]="typeSpec.facetSpecs[ind].min==='1'"
(click)="removeFacet(ind)" matTooltip="remove" matTooltipClass="tableTooltip"
matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
</div>
</div>
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
<!--
<button mat-icon-button color="primary"
(click)="addFacet(typeSpec.facetSpecs[0].name+'_'+typeSpec.facetSpecs[0].relation)" matTooltip="add new" matTooltipClass="tableTooltip"
matTooltipPosition="above"><mat-icon>add</mat-icon>add new facet</button>
-->
<!--
<button style="padding: 5px; margin-left:5px;" mat-raised-button color="primary" (click)="addFacet(typeSpec.facetSpecs[0].name+'_'+typeSpec.facetSpecs[0].relation)">
<mat-icon>add</mat-icon><span> Add Facet </span>
</button>
-->
<h3>Add new Facet:</h3>
<div style="padding-top: 24px; padding-bottom: 24px;">
<mat-form-field appearance="outline" [style.width.px]="250">
<mat-label for="selFacet" >Available Facet Types</mat-label>
<!--<select #teams (change)="onSelected(teams.value)">-->
<mat-select #selFacet (change)="onSelectNewFacet(selFacet.value)">
<mat-option *ngFor="let item of addableFacets" [value]="item">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-icon-button color="primary" matTooltip="add new facet"
matTooltipClass="tableTooltip" [matTooltipPosition]="'right'" (click)="addFacet(selectedFacet)">
<mat-icon>add</mat-icon></button>
</div>
</div>
</div>
</div>

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

@ -36,8 +36,10 @@ export class FacetComposerComponent implements OnInit {
myForm: FormGroup; //form complessiva
facetData: IFacetComposer[];
// facetData: IFacetComposer[];
typeSpec: ITypeSpecification;
fieldsMap: Map<string, IFacetComposer>;
addableFacets: string[];
defaultProperty = {
"type": "text",
@ -71,13 +73,14 @@ 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.facetData = [];
// this.facetData = [];
this.typeSpec = {} as ITypeSpecification;
this.fieldsMap = new Map<string,IFacetComposer>();
this.myForm = this.fb.group({
facets: new FormArray([
])
});
this.addableFacets = [];
/*
this.propertyGroup = new FormGroup({
properties: new FormArray([]),
@ -90,36 +93,49 @@ export class FacetComposerComponent implements OnInit {
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.
*/
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.facetData = res.facetSpecs;
//TODO: MAPPARE SUL NAME DELLA FACET TUTTO IN MODO DA USARE LA MAPPA INVECE DELL'ARRAY NELL'HTML
const mapRelazioni = new Map(res.facetSpecs.map((obj) => [obj.name, obj.relationOptions]));
//attenzione allo spazio prima della parentesi
this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+' ('+obj.relation+')', obj]));
/*
this.fieldsMap.forEach(function(value,key){
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
console.debug(`Map key is:${key} and value is:${value}`);
console.debug('************************');
});
*/
this.addableFacets = this.fillFacetSelect(this.fieldsMap);
this.createForm(res);
});
}
/*
relationOptions(relationName:string): string[]{
let options: string[]=[];
this.guiService.getRelationOptions(this.titlePath, relationName).subscribe(res => {
options = JSONPath({path: '$[*].name', json: res});
})
return options;
}*/
fillFacetSelect(myMap:Map<string,IFacetComposer>):string[]{
const res:string[] = [];
myMap.forEach(function(value,key){
const fComp : IFacetComposer = myMap.get(key)!; //'!' significa che assicuriamo che non si undefined (altrimenti segnala errore)
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
if(fComp.max==='many'){
res.push(fComp.name+" ("+fComp.relation+")");
}
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
//console.debug(`Map key is:${key} and value is:${value}`);
//console.debug('************************');
});
return res;
}
selectedFacet = '';
onSelectNewFacet(value:string): void {
this.selectedFacet = value;
alert('Cosa?...'+this.selectedFacet);
}
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
createForm(fData:ITypeSpecification):void{
for(let i=0; i<fData.facetSpecs.length; i++){
@ -230,11 +246,11 @@ export class FacetComposerComponent implements OnInit {
//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
addFacet(ind:number): void {
addFacet(nameplus:string): void {
// this.facetArray.push(this.addFacetGroup());
//this.createFacetGroup(this.facetData[ind]);
const icf: IFacetComposer = this.facetData[ind];
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(nameplus);
const facetFg: FormGroup = this.fb.group({});
const nameFc = this.fb.control(icf.name);
@ -267,7 +283,7 @@ export class FacetComposerComponent implements OnInit {
removeFacet(index: number): void {
const controls: FormArray = <FormArray>this.myForm.controls['facets'];
controls.removeAt(index);
this.facetArray.removeAt(index)
/*
for(let j=0; j<this.facetData[index].guiProps.length; j++){

2
src/main/webapp/app/table-screen/table-screen.component.html
View File

@ -14,7 +14,7 @@
</button>
-->
<button mat-raised-button color="primary" (click)="openFacetComposer()">
<mat-icon>add</mat-icon><span>Add new (fct)</span>
<mat-icon>add</mat-icon><span>Add new</span>
</button>
<!--
<button mat-raised-button color="primary" routerLink="/addResource">New Resource</button>