From 441e1a7530e0898321d20d235fe7484a96ee4619 Mon Sep 17 00:00:00 2001 From: mariateresa Date: Tue, 2 Apr 2024 17:46:26 +0200 Subject: [PATCH] adding support for editing and FormArrays to manage custom properties --- src/main/webapp/app/app-routing.module.ts | 17 -- .../facet-composer.component.html | 23 +- .../facet-composer.component.ts | 42 ++-- .../facet-editor/facet-editor.component.html | 22 ++ .../facet-editor/facet-editor.component.scss | 0 .../facet-editor.component.spec.ts | 23 ++ .../facet-editor/facet-editor.component.ts | 219 ++++++++++++++++++ .../app/services/resources-impl.service.ts | 1 - .../table-screen-es.component.html | 4 +- .../table-screen-es.component.ts | 42 ++-- .../table-screen/table-screen.component.html | 27 +-- .../table-screen/table-screen.component.ts | 61 ++--- .../app/table-screen/table-screen.module.ts | 3 +- 13 files changed, 357 insertions(+), 127 deletions(-) create mode 100644 src/main/webapp/app/facet-editor/facet-editor.component.html create mode 100644 src/main/webapp/app/facet-editor/facet-editor.component.scss create mode 100644 src/main/webapp/app/facet-editor/facet-editor.component.spec.ts create mode 100644 src/main/webapp/app/facet-editor/facet-editor.component.ts diff --git a/src/main/webapp/app/app-routing.module.ts b/src/main/webapp/app/app-routing.module.ts index d2808b8..fdddd15 100644 --- a/src/main/webapp/app/app-routing.module.ts +++ b/src/main/webapp/app/app-routing.module.ts @@ -8,10 +8,7 @@ import { Authority } from 'app/config/authority.constants'; import { UserRouteAccessService } from 'app/core/auth/user-route-access.service'; 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}]; @@ -28,24 +25,10 @@ import { DynamicFormComponent } from './dynamic-form/dynamic-form.component'; canActivate: [UserRouteAccessService], loadChildren: () => import('./admin/admin-routing.module').then(m => m.AdminRoutingModule), }, - - { - path: 'addResource', - component: AddResourceComponent - }, - { - path: 'formComposer', - component: FormComposerComponent - }, { path: 'facetComposer', component: FacetComposerComponent }, - { - path: 'dynamicFormComponent', - component: DynamicFormComponent - }, - navbarRoute, ...errorRoute, ], diff --git a/src/main/webapp/app/facet-composer/facet-composer.component.html b/src/main/webapp/app/facet-composer/facet-composer.component.html index 9d0d83f..9282523 100644 --- a/src/main/webapp/app/facet-composer/facet-composer.component.html +++ b/src/main/webapp/app/facet-composer/facet-composer.component.html @@ -49,12 +49,31 @@ - + + + + +
diff --git a/src/main/webapp/app/facet-composer/facet-composer.component.ts b/src/main/webapp/app/facet-composer/facet-composer.component.ts index 2365dc3..db4455f 100644 --- a/src/main/webapp/app/facet-composer/facet-composer.component.ts +++ b/src/main/webapp/app/facet-composer/facet-composer.component.ts @@ -3,9 +3,9 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable no-console */ import { CommonModule } from '@angular/common'; -import { Component, Inject, Input, OnInit } from '@angular/core'; -import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; -import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { Component, Inject, OnInit } from '@angular/core'; +import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { IContextNode } from 'app/services/i-context-node'; import { IResource } from 'app/services/i-resource'; import { FacetComposerService, ITypeSpecification } from './facet-composer.service'; @@ -16,7 +16,6 @@ import { MatExpansionModule } from '@angular/material/expansion'; import { IFacetComposer, IFacetProps } from './i-facet-composer'; import { SharedModule } from 'app/shared/shared.module'; import { MatSelectFilterModule } from 'mat-select-filter'; -import { faAssistiveListeningSystems } from '@fortawesome/free-solid-svg-icons'; @@ -38,11 +37,10 @@ export class FacetComposerComponent implements OnInit { selectedOption: string; myForm: FormGroup; //form complessiva - // relSelect: FormGroup; - // facetData: IFacetComposer[]; typeSpec: ITypeSpecification; fieldsMap: Map; + // eslint-disable-next-line @typescript-eslint/member-ordering constructor(private guiService: FacetComposerService, private fb: FormBuilder, private dialogRef:MatDialogRef, @@ -78,24 +76,29 @@ export class FacetComposerComponent implements OnInit { } } - - - createFacetArrayEntry(item: IFacetComposer):void{ const nameplus:string = item.name+'_'+item.relation; const singleFacetArray: FormArray = this.fb.array([]); singleFacetArray.push(this.createFacetGroup(item,false)); this.myForm.addControl(nameplus,singleFacetArray); } + + addFacet(deno:string): void { const icf: IFacetComposer = this.fieldsMap.get(deno); - //TODO CHECK THIS const singleFacetArray = this.myForm.controls[deno] as FormArray; singleFacetArray.push(this.createFacetGroup(icf,true)); - } + + + createExtraPropGroup(): FormGroup{ + const extraFg: FormGroup = this.fb.group({}); + extraFg.addControl('deno', ''); + return extraFg; + } + createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{ const facetFg: FormGroup = this.fb.group({}); const nameFc = this.fb.control(item.name); @@ -110,19 +113,13 @@ export class FacetComposerComponent implements OnInit { const descriptionFc = this.fb.control(item.description); facetFg.addControl('facetDescription', descriptionFc); - // const relFg: FormGroup = this.fb.group({}); - - /* - console.debug(item.relationOptions); - console.debug('+++++++++++++++++') - */ const relationFc = this.fb.control(item.relation); facetFg.addControl('relationFacet', relationFc); //this.itemRelations = item.relationOptions; const addedFc = this.fb.control(isAdded); facetFg.addControl('isAdded', addedFc); - + //1. creo group con le properties //2. aggiungo formgroup delle properties ai controls per la facet // facetFg.addControl('properties',this.createPropertyControls(item.guiProps)); @@ -159,8 +156,17 @@ export class FacetComposerComponent implements OnInit { } facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl); } + console.debug("----------- facetFg -------"); + console.debug(facetFg) + console.debug("-----------------"); + return facetFg; } + /* + getExtraPropsArray(nameplus:string): FormArray { + const fa = this.getSingleFacetArray(nameplus); + return fa.controls['extraPropsArray'] as FormArray + }*/ getSingleFacetArray(nameplus:string): FormArray { return this.myForm.controls[nameplus] as FormArray; diff --git a/src/main/webapp/app/facet-editor/facet-editor.component.html b/src/main/webapp/app/facet-editor/facet-editor.component.html new file mode 100644 index 0000000..9733ec8 --- /dev/null +++ b/src/main/webapp/app/facet-editor/facet-editor.component.html @@ -0,0 +1,22 @@ +

Edit Component: {{titleType}} ({{titlePath}}) - {{uid}}

+ + + + + + +

{{typeSpec.name}}

+ + + + + +

{{typeSpec.description}}

+ + + + + + + + diff --git a/src/main/webapp/app/facet-editor/facet-editor.component.scss b/src/main/webapp/app/facet-editor/facet-editor.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/main/webapp/app/facet-editor/facet-editor.component.spec.ts b/src/main/webapp/app/facet-editor/facet-editor.component.spec.ts new file mode 100644 index 0000000..27c1bb8 --- /dev/null +++ b/src/main/webapp/app/facet-editor/facet-editor.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FacetEditorComponent } from './facet-editor.component'; + +describe('FacetEditorComponent', () => { + let component: FacetEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FacetEditorComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FacetEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/main/webapp/app/facet-editor/facet-editor.component.ts b/src/main/webapp/app/facet-editor/facet-editor.component.ts new file mode 100644 index 0000000..86fa511 --- /dev/null +++ b/src/main/webapp/app/facet-editor/facet-editor.component.ts @@ -0,0 +1,219 @@ +/* eslint-disable no-console */ +/* eslint-disable guard-for-in */ +/* eslint-disable @typescript-eslint/restrict-plus-operands */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { CommonModule } from '@angular/common'; +import { Component, Inject, OnInit } from '@angular/core'; +import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { FacetComposerService, ITypeSpecification } from 'app/facet-composer/facet-composer.service'; +import { IFacetComposer, IFacetProps } from 'app/facet-composer/i-facet-composer'; +import { IContextNode } from 'app/services/i-context-node'; +import { IResource } from 'app/services/i-resource'; +import { ResourcesImplService } from 'app/services/resources-impl.service'; +import { SharedModule } from 'app/shared/shared.module'; +import { MatSelectFilterModule } from 'mat-select-filter'; + +@Component({ + standalone: true, + selector: 'jhi-facet-editor', + templateUrl: './facet-editor.component.html', + styleUrls: ['./facet-editor.component.scss'], + imports:[CommonModule,MatFormFieldModule,SharedModule, + ReactiveFormsModule,MatButtonModule, + MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule], + providers: [ResourcesImplService] + +}) + +//TODO: a regime usare lo stesso html di facet-composer +export class FacetEditorComponent implements OnInit { + + titleType: string; + titlePath: string; + selectedOption: string; + uid:string; + + myForm: FormGroup; //form complessiva + // relSelect: FormGroup; + // facetData: IFacetComposer[]; + typeSpec: ITypeSpecification; + fieldsMap: Map; + rawjson: string|any; + + //TODO: PASSARE UID COME STRINGA + constructor(private dataService: ResourcesImplService, private guiService: FacetComposerService, private fb: FormBuilder, + private dialogRef:MatDialogRef, + @Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode, uid:string}){ + this.titleType = data.type.name; + this.titlePath = data.context.path; + this.uid = data.uid; + this.selectedOption = ''; + this.typeSpec = {} as ITypeSpecification; + this.fieldsMap = new Map(); + this.myForm = this.fb.group({}); + + } + + ngOnInit(): void { + /* + if(this.resourceTypeName===''){ + paramType = 'HostingNode'; + }else{ + paramType = this.resourceTypeName; + } + this.service.getJsonDetails('',paramType,this.chosenId).subscribe(res => { + this.fetchedRawData = res; + }); + */ + + //TODO: al posto di '' metti titlePath (sembra dare errore) + this.dataService.getJsonDetails('',this.titleType,this.uid).subscribe(res => { + console.debug("*******RAW OBJECT*********"); + this.lookoutObject(res); + console.debug("****************"); + }); + + this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => { + this.typeSpec = res; + this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj])); + }); + + this.createAndFillForm(this.rawjson,this.typeSpec); + } + + + lookoutObject(obj:any){ + for(const key in obj){ + console.debug("key: " + key + ", value: " + obj[key]); + if(obj[key] instanceof Object){ + this.lookoutObject(obj[key]); + } + } + + } + + createAndFillForm(rawSource:string, fData:ITypeSpecification):void{ + /* + console.debug("*******RAW STRING*********"); + console.debug(rawSource); + console.debug("****************"); + */ + //const formDataObj = JSON.parse(rawSource); + // this.lookoutObject(formDataObj); + + for(let i=0; i0){ + for (let k=0; k { const resourceUrl = this.applicationConfigService.getEndpointFor('api/is/resourcejson'); - // const SERVICE_URL = appProperties.BASEURL_API+'is/resourcejson'; let queryParams = new HttpParams(); queryParams = queryParams.append("currentContext",ctx).append("resourceType",type).append("uid",uid); return this.http.get(resourceUrl,{params:queryParams}); diff --git a/src/main/webapp/app/table-screen-es/table-screen-es.component.html b/src/main/webapp/app/table-screen-es/table-screen-es.component.html index cf041df..d3ffb68 100644 --- a/src/main/webapp/app/table-screen-es/table-screen-es.component.html +++ b/src/main/webapp/app/table-screen-es/table-screen-es.component.html @@ -9,7 +9,7 @@ -
@@ -49,7 +49,7 @@
- +
diff --git a/src/main/webapp/app/table-screen-es/table-screen-es.component.ts b/src/main/webapp/app/table-screen-es/table-screen-es.component.ts index 2a3750c..436fc36 100644 --- a/src/main/webapp/app/table-screen-es/table-screen-es.component.ts +++ b/src/main/webapp/app/table-screen-es/table-screen-es.component.ts @@ -19,7 +19,7 @@ import { MatSort} from '@angular/material/sort'; import { IContextNode } from 'app/services/i-context-node'; import { MatPaginator} from '@angular/material/paginator'; import { MatTab, MatTabGroup } from '@angular/material/tabs'; -import { MatDialogRef, MatDialog } from '@angular/material/dialog'; +import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { ITabbedEntity } from 'app/i-tabbed-entity'; import { IEService } from 'app/services/i-e-service'; import { ResourcesImplService } from 'app/services/resources-impl.service'; @@ -27,6 +27,8 @@ import { ResourceAddComponent } from 'app/resource-add/resource-add.component'; import { GenericInfoComponent } from 'app/generic-info/generic-info.component'; import { IResource } from 'app/services/i-resource'; import { IResourceType } from 'app/services/i-resource-type'; +import { FacetComposerComponent } from 'app/facet-composer/facet-composer.component'; +import { FacetEditorComponent } from 'app/facet-editor/facet-editor.component'; @Component({ selector: 'jhi-table-screen-es', @@ -66,7 +68,7 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges{ - constructor(private myDataService: ResourcesImplService, private myDialog: MatDialog) { + constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) { this.currentCtx = {} as IContextNode; this.tableDetail = {} as IEService; this.dataFromService = []; @@ -166,25 +168,29 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges{ //this.chosenIds.indexOf(); this.tabs.splice(index, 1); } - - openDialogAdd(): void { - // alert('contesto...'+this.currentCtx.name); - this.dialogAddRef = this.myDialog.open(ResourceAddComponent, { - //TODO: passare tipo e contesto - data: {type: this.typeObject, context: this.currentCtx}, - }); - - this.dialogAddRef.afterClosed().subscribe(result => { - console.log('The dialog was closed'); - this.dummyRes = result; - }); - } - - openDialogDescription(): void { - this.dialogInfoRef = this.myDialog.open(GenericInfoComponent, { + openDialogDescription(): void { + this.dialogInfoRef = this.createDialog.open(GenericInfoComponent, { data: {description: this.typeObject.description} }); } + openFacetComposer(): void { + const dialogConfig = new MatDialogConfig(); + dialogConfig.disableClose = true; + dialogConfig.autoFocus = true; + dialogConfig.data= {type: this.typeObject, context: this.currentCtx}; + this.createDialog.open(FacetComposerComponent,dialogConfig); + } + + openFacetEditor(uid: string): void { + const dialogConfig = new MatDialogConfig(); + dialogConfig.disableClose = true; + dialogConfig.autoFocus = true; + dialogConfig.data= {type: this.typeObject, context: this.currentCtx, uid}; + this.editDialog.open(FacetEditorComponent,dialogConfig); + } + + + } diff --git a/src/main/webapp/app/table-screen/table-screen.component.html b/src/main/webapp/app/table-screen/table-screen.component.html index 1548972..3a2bf25 100644 --- a/src/main/webapp/app/table-screen/table-screen.component.html +++ b/src/main/webapp/app/table-screen/table-screen.component.html @@ -8,37 +8,12 @@ - - - - - -------- -

Form da dialog:

- -------- - - -
@@ -77,7 +52,7 @@
- +
diff --git a/src/main/webapp/app/table-screen/table-screen.component.ts b/src/main/webapp/app/table-screen/table-screen.component.ts index a44e9cd..b3bdd80 100644 --- a/src/main/webapp/app/table-screen/table-screen.component.ts +++ b/src/main/webapp/app/table-screen/table-screen.component.ts @@ -30,9 +30,8 @@ import { IResourceType } from 'app/services/i-resource-type'; import { DummyService } from 'app/services/dummy.service'; import { MatFormFieldControl } from '@angular/material/form-field'; -import { Router } from '@angular/router'; -import { IDummy } from 'app/services/i-dummy'; import { FacetComposerComponent } from 'app/facet-composer/facet-composer.component'; +import { FacetEditorComponent } from 'app/facet-editor/facet-editor.component'; @Component({ selector: 'jhi-table-screen', @@ -74,13 +73,10 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { rawJson: string; ////////// fine tabbed view //TODO: a regime questa sarà la nuova resource creata (visualizzerò il titolo) - dummyResource :IDummy; - dummies : IDummy[]; + // dummyResource :IDummy; + // dummies : IDummy[]; - constructor(private myDataService: ResourcesImplService, - private myDialog: MatDialog, - private router:Router - ) { + constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) { this.currentCtx = {} as IContextNode; this.tableDetail = {} as IHostingNode; this.dataFromService = []; @@ -90,8 +86,8 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { this.typeObject = {} as IResourceType; this.currentCtxPath = ''; this.rawJson = ''; - this.dummyResource = {} as IDummy; - this.dummies = []; + // this.dummyResource = {} as IDummy; + // this.dummies = []; } ngAfterViewInit(): void { @@ -194,37 +190,23 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { const dialogConfig = new MatDialogConfig(); dialogConfig.disableClose = true; dialogConfig.autoFocus = true; - dialogConfig.data= {type: this.typeObject, myObject: this.dummyResource, context: this.currentCtx}; - //questa qua sotto serve? - this.myDialog.open(FacetComposerComponent,dialogConfig); - - const dialogRef = this.myDialog.open(FacetComposerComponent,dialogConfig); + dialogConfig.data= {type: this.typeObject, context: this.currentCtx}; + this.createDialog.open(FacetComposerComponent,dialogConfig); - dialogRef.afterClosed().subscribe(result => { - if(result.event === 'add'){ - this.addNewData(result.data); - }else if(result.event ==='update'){ - //TODO - //this.updateRowData(result.data); - }else if(result.event === 'delete'){ - //TODO - // this.deleteRowData(result.data); - } - }); - } - - - /* - openDialogAdd(): void { +} + + openFacetEditor(uid: string): void { const dialogConfig = new MatDialogConfig(); dialogConfig.disableClose = true; dialogConfig.autoFocus = true; - dialogConfig.data= {type: this.typeObject, myObject: this.dummyResource, context: this.currentCtx}; - //questa qua sotto serve? - this.myDialog.open(ResourceAddComponent,dialogConfig); - - const dialogRef = this.myDialog.open(ResourceAddComponent,dialogConfig); - + dialogConfig.data= {type: this.typeObject, context: this.currentCtx, uid}; + this.editDialog.open(FacetEditorComponent,dialogConfig); + } + + +/* +//TODO: GUARDA QUESTI METODI PER GESTIRE IL DOPO CREAZIONE/AGGIORNAMENTO + dialogRef.afterClosed().subscribe(result => { if(result.event === 'add'){ this.addNewData(result.data); @@ -237,10 +219,6 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { } }); } - */ - - - showNewData(data: any):void{ const rsc = {} as IDummy; rsc.type = this.typeObject.name; @@ -269,5 +247,6 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges { removeData(uid: string):void{ //TODO: chiama il metodo delle API per fare la remove } + */ } diff --git a/src/main/webapp/app/table-screen/table-screen.module.ts b/src/main/webapp/app/table-screen/table-screen.module.ts index 58463f5..4b8265d 100644 --- a/src/main/webapp/app/table-screen/table-screen.module.ts +++ b/src/main/webapp/app/table-screen/table-screen.module.ts @@ -10,14 +10,13 @@ import { MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/d import { ResourceAddComponent } from 'app/resource-add/resource-add.component'; import { TypeHeadlineModule } from 'app/type-headline/type-headline.module'; import { AsyncPipe } from '@angular/common'; -import { DynamicFormComponent } from 'app/dynamic-form/dynamic-form.component'; import { RouterModule } from '@angular/router'; @NgModule({ imports: [ SharedModule,MatTableModule,MatIconModule,MatSortModule, MatPaginatorModule, MatDialogModule, RawjsonPaneComponent, - TypeHeadlineModule, AsyncPipe, RouterModule, DynamicFormComponent + TypeHeadlineModule, AsyncPipe, RouterModule ], declarations:[TableScreenComponent], exports: [TableScreenComponent],