adding support for editing and FormArrays to manage custom properties

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,
 			],

src/main/webapp/app/facet-composer/facet-composer.component.html

@@ -50,11 +50,30 @@
 													type="{{prop.type}}"/>
 												</mat-form-field>
 										</div>
+									<!-- ADDITIONAL PROPERTIES -->
+									<!--
+										<div formArrayName="extrapropsArray" style="border: 3px solid rgb(202, 198, 57); padding: 10px; margin: 5px;">
+											<div [formGroupName] ="i" *ngFor="let extraCtrl of myForm.get([facetTemplate.key,ind,'additionalProps']).controls; let i=index;">
+											<mat-form-field>
+										 		<mat-label for="deno">name</mat-label>
+												<input matInput formControlName="deno" type="text"/>
+											</mat-form-field>
+												<button mat-flat-button color="accent" 
+												(click)="addFacet(facetTemplate.key)" >
+												Remove custom prop</button>
+  			      							</div>
+										</div>
+											<button mat-flat-button color="accent" 
+												(click)="addFacet(facetTemplate.key)" >
+												Add new custom prop</button>
+										</div>		
+										-->
+									<!-- FINE ADDITIONAL PROPERTIES -->
+																	
 							  <input matInput formControlName="isAdded" style="display: none;"/>
 								  
 						 	<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
   			      		<button mat-icon-button  color="primary" 
-  			      		 
   			      		 [disabled]="facetTemplate.value.min==='1' && !myForm.get([facetTemplate.key,ind,'isAdded'])!.value"
   			      		(click)="removeFacet(facetTemplate.key,ind)" matTooltip="remove {{facetTemplate.key}}" matTooltipClass="tableTooltip"  
   			      		matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>

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 { Component, Inject, OnInit } from '@angular/core';
-import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+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<any>;
-   // facetData: IFacetComposer[];
     typeSpec: ITypeSpecification;
     fieldsMap: Map<string, IFacetComposer>;
     
+    
   // eslint-disable-next-line @typescript-eslint/member-ordering
   constructor(private guiService: FacetComposerService, private fb: FormBuilder,
         private dialogRef:MatDialogRef<FacetComposerComponent>,
@@ -78,9 +76,6 @@ export class FacetComposerComponent implements OnInit {
 				}
 		}
 		
-		
-		  
-		
 		createFacetArrayEntry(item: IFacetComposer):void{
 			const nameplus:string = item.name+'_'+item.relation;
 			const singleFacetArray: FormArray = this.fb.array([]);
@@ -88,12 +83,20 @@ export class FacetComposerComponent implements OnInit {
 			this.myForm.addControl(nameplus,singleFacetArray);
 			}
 			
+	
+		  
 		  	  addFacet(deno:string): void {
 				const icf: IFacetComposer = <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{
@@ -110,12 +113,6 @@ 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;			
@@ -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;

src/main/webapp/app/facet-editor/facet-editor.component.html

@@ -0,0 +1,22 @@
+<h3 mat-dialog-title>Edit Component: {{titleType}} ({{titlePath}}) - {{uid}}</h3>
+
+<!-- myForm inizio form globale -->
+<mat-dialog-content>
+        <mat-expansion-panel>
+				    <mat-expansion-panel-header>
+				      <mat-panel-title>
+				      <h2>{{typeSpec.name}}</h2>
+				      </mat-panel-title>
+				      <mat-panel-description>
+						  <!--la descrizione è lunga e non posso metterla qua-->
+				      </mat-panel-description>
+				    </mat-expansion-panel-header>
+				    <p> {{typeSpec.description}} </p>
+	    </mat-expansion-panel>
+	    
+
+</mat-dialog-content>    
+<mat-dialog-actions align="end">
+   <button mat-button type="submit">Submit</button>
+   <button mat-button (click)="close()">Cancel</button>
+</mat-dialog-actions>

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<FacetEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FacetEditorComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FacetEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<any>;
+   // facetData: IFacetComposer[];
+    typeSpec: ITypeSpecification;
+    fieldsMap: Map<string, IFacetComposer>;
+    rawjson: string|any;
+    
+    //TODO: PASSARE UID COME STRINGA 
+  constructor(private dataService: ResourcesImplService, private guiService: FacetComposerService, private fb: FormBuilder,
+        private dialogRef:MatDialogRef<FacetEditorComponent>,
+    	@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<string,IFacetComposer>();
+			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; i<fData.facetSpecs.length; i++){
+					const facetSpec = fData.facetSpecs[i];
+					this.createFacetArrayEntry(facetSpec); 
+				}
+		}
+		
+			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);
+			}	
+			
+			
+			createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{
+				 const facetFg: FormGroup = this.fb.group({});
+				 const nameFc = this.fb.control(item.name); 
+				 facetFg.addControl('facetName', nameFc);
+				 
+				 const maxFc = this.fb.control(item.max); 
+				 facetFg.addControl('max', maxFc);
+				 
+				 const minFc = this.fb.control(item.min); 
+				 facetFg.addControl('min', minFc);
+				 				 
+				 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));
+				return this.addPropertyControls(facetFg,item.guiProps);
+			}
+			
+		  addPropertyControls(facetFg:FormGroup, props: IFacetProps[]){
+			  let fc:FormControl;
+			  for(let i=0; i<props.length; i++){
+				  const prop=props[i];
+				  	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))
+							 }
+						 }
+					 }
+					 facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
+			  }
+			return facetFg;
+		  }
+			
+		onSubmit() {
+			  if (this.myForm.valid) {
+			    const formData = this.myForm.value;
+			  //  console.log("*****		FORMDATA	*****");
+			    //console.log(formData);
+			    //TODO Process formData
+			  }
+			}	
+			
+	    getSingleFacetArray(nameplus:string): FormArray {
+				    return this.myForm.controls[nameplus] as FormArray;
+			  }
+			 		  
+	 
+		   removeFacet(deno:string, index: number): void {
+			  this.getSingleFacetArray(deno).removeAt(index);
+			  this.typeSpec.facetSpecs.splice(index,1);
+			}
+		
+				
+			
+			
+	resetForm():void {
+			  	this.myForm.reset();
+		       }
+			
+  	close():void {
+			this.resetForm();
+			this.dialogRef.close({event:'cancel'});
+			} 
+			    
+
+}

src/main/webapp/app/services/resources-impl.service.ts

@@ -45,7 +45,6 @@ export class ResourcesImplService {
 
 	  getJsonDetails(ctx:string, type:string, uid: string): Observable<string> {
 		  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<string>(resourceUrl,{params:queryParams});

src/main/webapp/app/table-screen-es/table-screen-es.component.html

@@ -9,7 +9,7 @@
 		 <button  mat-raised-button color="primary" (click)="reloadTable()" >
 			<mat-icon>replay</mat-icon><span>Reload</span>
 		</button>
-		<button mat-raised-button color="primary" (click)="openDialogAdd()">
+		<button mat-raised-button color="primary" (click)="openFacetComposer()">
 			<mat-icon>add</mat-icon><span>Add new</span>
 		</button>
 	</div>
@@ -49,7 +49,7 @@
 		<!--<div class="d-flex flex-row py-4">-->
 		<div class="d-flex flex-row">
 	        <button mat-button class="action-btn" color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
-	        <button mat-button class="action-btn" color="primary" ><mat-icon>edit</mat-icon></button>
+	        <button mat-button class="action-btn" color="primary" (click)="openFacetEditor(this.item.id)"><mat-icon>edit</mat-icon></button>
 	        <button mat-button class="action-btn" color="primary"><mat-icon>delete</mat-icon></button>
 		</div>
         </td>

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, {
+    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);
+  }
+  
+
+  
 }

src/main/webapp/app/table-screen/table-screen.component.html

@@ -8,37 +8,12 @@
 		 <button  mat-raised-button color="primary" (click)="reloadTable()" >
 			<mat-icon>replay</mat-icon><span>Reload</span>
 		</button>
-		<!--
-		<button mat-raised-button color="primary" (click)="openDialogAdd()">
-			<mat-icon>add</mat-icon><span>Add new</span>
-		</button>
-		-->
 		<button mat-raised-button color="primary" (click)="openFacetComposer()">
 			<mat-icon>add</mat-icon><span>Add new</span>
 		</button>
-		<!--
-		<button mat-raised-button color="primary" routerLink="/addResource">New Resource</button>
-		<button mat-raised-button color="primary" routerLink="/facetComposer">Facet Composer</button>
-		<button mat-raised-button color="primary" routerLink="/dynamicFormComponent">Form Dinamica</button>
-		<button mat-raised-button color="primary" routerLink="/formComposer">Form Composer</button>
-		-->
 </div>
-	
 </div>
 
-<!-- TEST-CRUD begin -->
-
--------
-<h2>Form da dialog: </h2>
-<ul>
-	<li *ngFor="let dm of dummies">
-		Id: {{dm.uid}}, Name: {{dm.name}}, Type: {{dm.type}}
-	</li>
-</ul>
--------
-
-<!-- TEST-CRUD end -->
-
   <div class="mat-elevation-z4">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="name">
@@ -77,7 +52,7 @@
 		<!--<div class="d-flex flex-row py-4">-->
 		<div class="d-flex flex-row">
 	        <button mat-button class="action-btn" color="primary" (click)="addTab(this.item.id)" ><mat-icon>visibility</mat-icon></button>
-	        <button mat-button class="action-btn" color="primary" ><mat-icon>edit</mat-icon></button>
+	         <button mat-button class="action-btn" color="primary" (click)="openFacetEditor(this.item.id)"><mat-icon>edit</mat-icon></button>
 	        <button mat-button class="action-btn" color="primary"><mat-icon>delete</mat-icon></button>
 		</div>
         </td>

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;
+ // dummyResource :IDummy;
-  dummies : IDummy[];
+ // dummies : IDummy[];
 
-  constructor(private myDataService: ResourcesImplService, 
+  constructor(private myDataService: ResourcesImplService, private createDialog: MatDialog, private editDialog: MatDialog) {
-  private myDialog: MatDialog,
-  private router:Router
-  ) {
     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.dummyResource = {} as IDummy;
-    this.dummies = [];
+  //  this.dummies = [];
   }
 
   ngAfterViewInit(): void {
@@ -194,36 +190,22 @@ 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};
+	dialogConfig.data= {type: this.typeObject, context: this.currentCtx};
-	//questa qua sotto serve?
+	this.createDialog.open(FacetComposerComponent,dialogConfig);
-	this.myDialog.open(FacetComposerComponent,dialogConfig);
    
-	const dialogRef = this.myDialog.open(FacetComposerComponent,dialogConfig);
+}
 
-    dialogRef.afterClosed().subscribe(result => {
+ openFacetEditor(uid: string): void {
-		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 {
 	const dialogConfig = new MatDialogConfig();
 	dialogConfig.disableClose = true;
 	dialogConfig.autoFocus = true;
-	dialogConfig.data= {type: this.typeObject,  myObject: this.dummyResource, context: this.currentCtx};
+	dialogConfig.data= {type: this.typeObject, context: this.currentCtx, uid};
-	//questa qua sotto serve?
+	this.editDialog.open(FacetEditorComponent,dialogConfig);
-	this.myDialog.open(ResourceAddComponent,dialogConfig);
+  }
   
-	const dialogRef = this.myDialog.open(ResourceAddComponent,dialogConfig);
+  
+/*  
+//TODO: GUARDA QUESTI METODI PER GESTIRE IL DOPO CREAZIONE/AGGIORNAMENTO
 
     dialogRef.afterClosed().subscribe(result => {
 		if(result.event === 'add'){
@@ -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
 		  }
+		  */
 
   }

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],