debugging functions to add new facets dynamically

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

@@ -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>
+									<p><b>facet {{ind}}</b></p>
-							<mat-expansion-panel-header>
-								<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;" />
+										<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>
   

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

@@ -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,19 +93,21 @@ 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;
+					//attenzione allo spazio prima della parentesi
-					
+					this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+' ('+obj.relation+')', obj]));
-					//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]));
+					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);
 					});
 					
@@ -110,15 +115,26 @@ export class FacetComposerComponent implements OnInit {
 			}
 		
 		
-		/*
+			fillFacetSelect(myMap:Map<string,IFacetComposer>):string[]{
-		relationOptions(relationName:string): string[]{
+				const res:string[]  = [];
-			let options: string[]=[];
+				myMap.forEach(function(value,key){
-				this.guiService.getRelationOptions(this.titlePath, relationName).subscribe(res => {
+					const fComp : IFacetComposer = myMap.get(key)!; //'!' significa che assicuriamo che non si undefined (altrimenti segnala errore) 
-				options = JSONPath({path: '$[*].name', json: res});
+					// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-			})
+					if(fComp.max==='many'){
-			return options;
+						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{
@@ -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++){

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

@@ -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>