From 910d7ce8bd1218e4e04a47fc209a5aed72321106 Mon Sep 17 00:00:00 2001
From: mariateresa <mariateresa.paratore@isti.cnr.it>
Date: Thu, 4 Apr 2024 17:03:17 +0200
Subject: [PATCH] added type selection for custom fields

---
 .../facet-composer.component.html             | 23 +++++++++------
 .../facet-composer.component.ts               | 28 +++++++++++++------
 2 files changed, 34 insertions(+), 17 deletions(-)

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 2397e08..8cb0648 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.html
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.html
@@ -51,25 +51,32 @@
 												</mat-form-field>
 										</div>
 									<!-- ADDITIONAL PROPERTIES -->
-									<!--TODO: AGGIUSTA QUESTO -->
-									<div formArrayName ="extraProps"  style="border: 3px solid rgb(202, 198, 57); padding: 10px; margin: 5px;">
+									<div formArrayName ="extraProps"  style="border: 2px solid rgb(176, 206, 230); padding: 10px; margin: 5px;">
+										<span [style.width.px]="350" [style.font-weight]="900">Custom Properties</span>
 										<div [formGroupName] ="i" *ngFor="let x of getExtraPropsArray(facetTemplate.key,ind).controls; let i=index;">
 											<mat-form-field>
 										 		<mat-label for="deno">name</mat-label>
 												<input matInput formControlName="deno" type="text"/>
 											</mat-form-field>
-											<br/>
 											<mat-form-field>
-										 		<mat-label for="tipo">type</mat-label>
-												<input matInput formControlName="tipo" type="text"/>
+										 		<mat-label for="value">value</mat-label>
+												<input matInput formControlName="value" type="text"/>
 											</mat-form-field>
-											
-												<button mat-flat-button color="accent" 
+											<mat-form-field>
+											<mat-label for="tipo" >type</mat-label>
+								   				<mat-select formControlName="tipo" id="tipo">
+													<mat-option *ngFor="let tp of optionTypes"  [value]="tp.value">
+														{{tp.value}}
+													</mat-option>
+								  				</mat-select>
+								  			</mat-form-field>
+								  
+												<button mat-stroked-button color="primary" style="margin-left: 12px;"
 												(click)="removeExtraProp(facetTemplate.key,ind,i)" >
 												Remove custom property</button>
   			      							</div>
 										</div>
-											<button mat-flat-button color="accent" 
+											<button mat-stroked-button color="primary" style="margin-left: 12px; margin-top: 18px;"
 												(click)="addExtraProp(facetTemplate.key,ind)" >
 												Add custom property</button>
 										<!--</div>		-->
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 1c78af8..5f08376 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.ts
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.ts
@@ -63,18 +63,27 @@ export class FacetComposerComponent implements OnInit {
 					});
 			}
 		
+		
+		optionTypes = [
+    		{ value: 'boolean'},
+    		{ value: 'number'},
+    		{ value: 'text'}
+  		];
+
+		
+		
 			onOptionsSelected(value:string): void {
 				this.selectedOption = value;
 				//console.debug('******onOptionsSelected?...'+value);
 			}
 		
-		//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
-	    createForm(fData:ITypeSpecification):void{
-			for(let i=0; i<fData.facetSpecs.length; i++){
-					const facetSpec = fData.facetSpecs[i];
-					this.createFacetArrayEntry(facetSpec); 
-				}
-		}
+			//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
+		    createForm(fData:ITypeSpecification):void{
+				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;
@@ -92,8 +101,9 @@ export class FacetComposerComponent implements OnInit {
 			
 		get extraProp():FormGroup{
 			return this.fb.group({
-				deno: ['',null],
-				tipo: ['',Validators.required]
+				deno: ['',Validators.required],
+				value: ['',Validators.required],
+				tipo:['text']
 				})
 			}