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

debugging editor...

This commit is contained in:
Maria Teresa Paratore 2024-05-21 17:24:11 +02:00
parent c3fba0e781
commit 51ed9e7ea0
1 changed files with 164 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

257
src/main/webapp/app/facet-editor/facet-editor.component.ts
View File

@ -2,7 +2,7 @@
/* eslint-disable guard-for-in */ /* eslint-disable guard-for-in */
/* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable @typescript-eslint/explicit-function-return-type */
import { CommonModule } from '@angular/common'; import { CommonModule, KeyValuePipe } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
@ -10,7 +10,7 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { FacetComposerService, IFacetFields, ITypeSpecification } from 'app/facet-composer/facet-composer.service'; import { FacetComposerService, IEditFacetObject,IEditFieldObject, ITypeSpecification } from 'app/facet-composer/facet-composer.service';
import { IFacetComposer, IFacetProps } from 'app/facet-composer/i-facet-composer'; import { IFacetComposer, IFacetProps } from 'app/facet-composer/i-facet-composer';
import { IContextNode } from 'app/services/i-context-node'; import { IContextNode } from 'app/services/i-context-node';
import { IResource } from 'app/services/i-resource'; import { IResource } from 'app/services/i-resource';
@ -26,7 +26,7 @@ import { MatSelectFilterModule } from 'mat-select-filter';
imports:[CommonModule,MatFormFieldModule,SharedModule, imports:[CommonModule,MatFormFieldModule,SharedModule,
ReactiveFormsModule,MatButtonModule, ReactiveFormsModule,MatButtonModule,
MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule], MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
providers: [FacetComposerService] providers: [FacetComposerService],
}) })
@ -39,32 +39,27 @@ export class FacetEditorComponent implements OnInit {
uid:string; uid:string;
myForm: FormGroup; //form complessiva myForm: FormGroup; //form complessiva
// relSelect: FormGroup<any>;
// facetData: IFacetComposer[];
typeSpec: ITypeSpecification; typeSpec: ITypeSpecification;
fieldsMap: Map<string, IFacetComposer>; fieldsMap: Map<string, IFacetComposer>;
guiFacetMaps: Map<string, any>; editMap: Map<string,IEditFieldObject[][]>;
guiFacetFields: IFacetFields[];
rawjson: string|any; rawjson: string|any;
optionTypes = [ optionTypes = [
{ value: 'String'}, //per ora solo tipo String { value: 'String'}, //per ora solo tipo String
/* /*
{ value: 'Boolean'}, { value: 'Boolean'},
{ value: 'Integer'}, { value: 'Integer'},
{ value: 'Short'}, { value: 'Short'},
{ value: 'Long'}, { value: 'Long'},
{ value: 'Float'}, { value: 'Float'},
{ value: 'Double'}, { value: 'Double'},
{ value: 'Password'},//Password implica salvare criptato { value: 'Password'},//Password implica salvare criptato
{ value: 'Date'}, { value: 'Date'},
{ value: 'Binary'},
{ value: 'Binary'}, { value: 'Byte'}
{ value: 'Byte'} */
*/ ]
]
constructor(private dataService: ResourcesImplService, private guiService: FacetComposerService, private fb: FormBuilder, constructor(private dataService: ResourcesImplService, private guiService: FacetComposerService, private fb: FormBuilder,
private dialogRef:MatDialogRef<FacetEditorComponent>, private dialogRef:MatDialogRef<FacetEditorComponent>,
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode, uid:string}){ @Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode, uid:string}){
@ -74,46 +69,50 @@ export class FacetEditorComponent implements OnInit {
this.selectedOption = ''; this.selectedOption = '';
this.typeSpec = {} as ITypeSpecification; this.typeSpec = {} as ITypeSpecification;
this.fieldsMap = new Map<string,IFacetComposer>(); this.fieldsMap = new Map<string,IFacetComposer>();
this.guiFacetFields = {} as IFacetFields[]; this.editMap = new Map<string,IEditFieldObject[][]>();
this.guiFacetMaps = new Map<string,any>();
this.myForm = this.fb.group({}); this.myForm = this.fb.group({});
} }
ngOnInit(): void {
/*
this.dataService.getJsonDetails('',this.titleType,this.uid).subscribe(data => {
this.lookoutObject(data);
*/
//getGuiFields(ctxPath:string,type:string,uid:string
this.guiService.getGuiFields(this.titlePath,this.titleType,this.uid).subscribe(res => {
this.guiFacetFields = res;
this.guiFacetMaps = new Map(res.map((obj) => [obj.name,obj.facetSpecs]))
});
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => { ngOnInit(): void {
this.typeSpec = res; this.guiService.getGuiFields(this.titlePath,this.titleType,this.uid).subscribe(editobjs=> {
//this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj]));
this.editMap = new Map(editobjs.map((eo) => [eo.facetCompleteName, eo.fieldsArrays]));
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj])); this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj]));
this.createAndFillForm(this.rawjson,this.typeSpec); this.createFillForm(res,this.editMap);
}); })
} });
}
createAndFillForm(rawSource:string, fData:ITypeSpecification):void{
//TODO: VA PASSATO RAWSOURCE (O MAPPA) PER RIEMPIRE LA FORM
for(let i=0; i<fData.facetSpecs.length; i++){ createFillForm(fData:ITypeSpecification,fValues: Map<string,IEditFieldObject[][]>):void{
const facetSpec = fData.facetSpecs[i];
this.createFacetArrayEntry(facetSpec); fValues.forEach((val,key) =>{
const fieldsArrays:IEditFieldObject[][] = fValues.get(key)!;
const facetCount = fieldsArrays.length; //num di facet dello stesso tipo
if(facetCount===1){
this.createFacetArrayEntry(<IFacetComposer>this.fieldsMap.get(key),fieldsArrays[0]);
}else{
for(let i=0; i<facetCount; i++){
this.addAndFillFacet(key,fieldsArrays[i]); //aggiungo elemento
} }
}
});
} }
createFacetArrayEntry(item: IFacetComposer):void{
this.guiFacetFields; createFacetArrayEntry(item: IFacetComposer, fieldValues:IEditFieldObject[]):void{
const nameplus:string = item.name+'_'+item.relation; const nameplus:string = item.name+'_'+item.relation;
const singleFacetArray: FormArray = this.fb.array([]); const singleFacetArray: FormArray = this.fb.array([]);
singleFacetArray.push(this.createFacetGroup(item,false,this.fieldsMap.get(nameplus)!)); singleFacetArray.push(this.createFacetGroup(item,false,fieldValues));
this.myForm.addControl(nameplus,singleFacetArray); this.myForm.addControl(nameplus,singleFacetArray);
} }
get extraProps():FormArray { get extraProps():FormArray {
return this.fb.array([ return this.fb.array([
this.extraProp this.extraProp
@ -133,7 +132,7 @@ export class FacetEditorComponent implements OnInit {
}) })
} }
getPropsGroup(denoFacet:string, index:number):FormGroup{ getPropsGroup(denoFacet:string, index:number):FormGroup{
return (this.getSingleFacetArray(denoFacet).controls[index]).get('props') as FormGroup; return (this.getSingleFacetArray(denoFacet).controls[index]).get('props') as FormGroup;
} }
getExtraPropsArray(denoFacet:string, index:number):FormArray{ getExtraPropsArray(denoFacet:string, index:number):FormArray{
@ -148,15 +147,19 @@ export class FacetEditorComponent implements OnInit {
this.getExtraPropsArray(denoFacet, indexFct).removeAt(index); this.getExtraPropsArray(denoFacet, indexFct).removeAt(index);
} }
addFacet(deno:string): void { addFacet(deno:string): void {
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno); const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno);
const singleFacetArray = this.myForm.controls[deno] as FormArray; const singleFacetArray = this.myForm.controls[deno] as FormArray;
singleFacetArray.push(this.createFacetGroup(icf,true,this.guiFacetMaps.get(deno))); singleFacetArray.push(this.createFacetGroup(icf,true,null));
} }
addAndFillFacet(deno:string,fieldValues:IEditFieldObject[]): void {
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno);
createFacetGroup(item: IFacetComposer,isAdded: boolean,facetFields: IFacetComposer):FormGroup{ const singleFacetArray = this.myForm.controls[deno] as FormArray;
singleFacetArray.push(this.createFacetGroup(icf,true,fieldValues));
}
createFacetGroup(item: IFacetComposer,isAdded: boolean,fieldValues:IEditFieldObject[]|null):FormGroup{
const facetFg: FormGroup = this.fb.group({}); const facetFg: FormGroup = this.fb.group({});
const nameFc = this.fb.control(item.name); const nameFc = this.fb.control(item.name);
facetFg.addControl('facetName', nameFc); facetFg.addControl('facetName', nameFc);
@ -172,63 +175,130 @@ export class FacetEditorComponent implements OnInit {
const relationFc = this.fb.control(item.relation); const relationFc = this.fb.control(item.relation);
facetFg.addControl('relationFacet', relationFc); facetFg.addControl('relationFacet', relationFc);
//this.itemRelations = item.relationOptions;
const addedFc = this.fb.control(isAdded); const addedFc = this.fb.control(isAdded);
facetFg.addControl('isAdded', addedFc); facetFg.addControl('isAdded', addedFc);
facetFg.addControl('extraProps', this.extraProps); facetFg.addControl('extraProps', this.extraProps);
//TODO: PASSARE I VALORI
//1. creo group con le properties return this.addPropertyControls(facetFg,item.guiProps,fieldValues);
//2. aggiungo formgroup delle properties ai controls per la facet
// facetFg.addControl('properties',this.createPropertyControls(item.guiProps));
return this.addPropertyControls(facetFg,item.guiProps,this.guiFacetMaps.get(nameFc+"_"+relationFc)!);
} }
addPropertyControls(facetFg:FormGroup, props: IFacetProps[], values: IFacetProps[]):FormGroup{
addPropertyControls(facetFg:FormGroup, props: IFacetProps[],fieldValues:IEditFieldObject[]|null):FormGroup{
const propsFg = this.fb.group({}); const propsFg = this.fb.group({});
let fc:FormControl; let fc:FormControl;
for(let i=0; i<values.length; i++){ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
const prop=props[i]; if(fieldValues===null){
const propName = prop.name; for(let i=0; i<props.length; i++){
const propValue = prop.value; const prop=props[i];
if(prop.type==="date"){ if(prop.type==="date"){
fc = this.fb.control(new Date()); fc = this.fb.control(new Date())
} }
if(prop.type==="number"){ if(prop.type==="number"){
fc = this.fb.control(0) fc = this.fb.control(0)
} }
if(prop.type==="boolean"){ if(prop.type==="boolean"){
fc = this.fb.control(true) fc = this.fb.control(true)
} }
else{ else{
fc = this.fb.control('') //text fc = this.fb.control('') //text or typeprop
} }
if (prop.validations.length>0){ if (prop.validations.length>0){
for (let k=0; k<prop.validations.length; k++){ for (let k=0; k<prop.validations.length; k++){
if(prop.validations[k].name==='required'){ if(prop.validations[k].name==='required'){
fc.addValidators(Validators.required) fc.addValidators(Validators.required)
} }
if(prop.validations[k].name==='pattern'){ if(prop.validations[k].name==='pattern'){
fc.addValidators(Validators.pattern(prop.pattern)) fc.addValidators(Validators.pattern(prop.pattern))
}
} }
} }
} if(prop.type==="typeprop"){ //TODO: forse va messo il controllo anche sul tipo di facet
propsFg.addControl(prop.name,fc); //formGroup.addControl(prop_'controlName', formControl); let fc2:FormControl;
propsFg.addControl("schema",fc);
// eslint-disable-next-line prefer-const
fc2 = this.fb.control('') //text or typeprop
propsFg.addControl("value",fc2);
}else{
propsFg.addControl(prop.name,fc); //formGroup.addControl(prop_'controlName', formControl);
}
}
}else{
for(let i=0; i<props.length; i++){
const prop=props[i];
for(let j=0; j<fieldValues.length; j++){
console.debug('+++++++++++++ fieldValues[j].fieldKey...'+fieldValues[j].fieldKey);
console.debug('+++++++++++++ fieldValues[j].fieldValue...'+fieldValues[j].fieldValue);
if(prop.name === fieldValues[j].fieldKey){
if(prop.type==="date"){
if(fieldValues[j].fieldValue){
fc = this.fb.control(fieldValues[j].fieldValue)
}else{
fc = this.fb.control(new Date())
}
}
if(prop.type==="number"){
if(fieldValues[j].fieldValue){
fc = this.fb.control(fieldValues[j].fieldValue)
}else{
fc = this.fb.control(0)
}
}
if(prop.type==="boolean"){
if(fieldValues[j].fieldValue){
fc = this.fb.control(fieldValues[j].fieldValue)
}else{
fc = this.fb.control(true)
}
}
else{
fc = this.fb.control('') //text or typeprop
}
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))
}
}
}
if(prop.type==="typeprop"){ //TODO: forse va messo il controllo anche sul tipo di facet
let fc2:FormControl;
propsFg.addControl("schema",fc);
// eslint-disable-next-line prefer-const
fc2 = this.fb.control('') //text or typeprop
propsFg.addControl("value",fc2);
}else{
propsFg.addControl(prop.name,fc); //formGroup.addControl(prop_'controlName', formControl);
}
}
}
}
} }
facetFg.addControl('props',propsFg); facetFg.addControl('props',propsFg);
return facetFg; return facetFg;
} }
stringToBoolean(str: string): boolean {
return str.toLowerCase() as unknown as boolean;
}
onSubmit() { onSubmit() {
if(this.myForm.valid){ if(this.myForm.valid){
this.guiService.createResource(this.titleType, JSON.stringify(this.myForm.value)).subscribe(res => { this.guiService.createResource(this.titleType, JSON.stringify(this.myForm.value)).subscribe(res => {
this.dialogRef.close(res); this.dialogRef.close(res);
}, error => { }, error => {
console.log(JSON.stringify(error)); console.debug(JSON.stringify(error));
this.dialogRef.close('error'); this.dialogRef.close('error');
}); });
}else{ }else{
@ -237,6 +307,7 @@ export class FacetEditorComponent implements OnInit {
} }
getSingleFacetArray(nameplus:string): FormArray { getSingleFacetArray(nameplus:string): FormArray {
console.debug('...........'+nameplus);
return this.myForm.controls[nameplus] as FormArray; return this.myForm.controls[nameplus] as FormArray;
} }
@ -255,5 +326,5 @@ export class FacetEditorComponent implements OnInit {
this.dialogRef.close({event:'cancel'}); this.dialogRef.close({event:'cancel'});
} }
} }