From 3f93e339feea459c164f7c250f7bda88c76ea4ec Mon Sep 17 00:00:00 2001
From: mariateresa <mariateresa.paratore@isti.cnr.it>
Date: Mon, 18 Mar 2024 17:55:25 +0100
Subject: [PATCH] work in progres...

---
 .../facet-composer.component.html             |  40 +++---
 .../facet-composer.component.scss             |  12 ++
 .../facet-composer.component.ts               | 125 +++++++++---------
 3 files changed, 99 insertions(+), 78 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 2f90da0..b4ad2bb 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.html
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.html
@@ -18,43 +18,51 @@
 	    <div [formGroup]="myForm">
 			
 	  		  <div formArrayName="facets">
-						<div [formGroupName] ="ind" *ngFor="let fct of facetArray.controls; let ind=index;" >
-						<mat-expansion-panel>
+						<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>
 							<mat-expansion-panel-header>
-								<mat-panel-title>
-									<b>{{typeSpec.facetSpecs[ind].name}}</b>
+								<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;" />
+									</mat-form-field>
 								<!--TODO: vedi quando si possono rendere editabili le relazioni-->
-								</mat-panel-title>
-							</mat-expansion-panel-header>
+						<!--		</mat-panel-title>
+							</mat-expansion-panel-header> -->
 								  <div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
-									 <p>{{typeSpec.facetSpecs[ind].description}}</p> 
+									 <textarea matInput formControlName="description" [readonly]="true">{{typeSpec.facetSpecs[ind].description}}</textarea>
 								  </div>
-								  <mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
+								  
+								  
+								 <mat-form-field style="padding-top: 24px; padding-bottom: 24px;">				
 									  <mat-label for="relation" >relation</mat-label>
 								   	<mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" >
-											<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item">
+											<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item" >
 												{{item}}
 											</mat-option>
 									</mat-select>
-								
-								   </mat-form-field>
+								</mat-form-field>
 								    
 								    <!-- OK SO FAR -->	
-									 <div  formArrayName="properties" style="border: 1px solid rgb(140, 113, 181); padding: 10px; margin: 5px;">
+									 <div  formArrayName="properties" style="border: 1px solid rgb(159, 204, 217); padding: 10px; margin: 5px;">
 										<div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;">
 											<mat-form-field>
 											    <mat-label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label>
 											<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>
-  			      <!--TODO: che tipo di facet aggiungo??-->
-  			      <button (click)="addFacet()">Add Facet</button>
+									 <!--<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" (click)="addFacet(ind)" matTooltip="add new {{typeSpec.facetSpecs[ind].name}}" matTooltipClass="tableTooltip"  matTooltipPosition="above"><mat-icon>add</mat-icon></button>
+  			      		<button mat-icon-button color="primary" (click)="removeFacet(ind)" matTooltip="remove {{typeSpec.facetSpecs[ind].name}}" matTooltipClass="tableTooltip"  matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
+  			  		</div>
   			   </div>
   			   </div>
   			   </div>
diff --git a/src/main/webapp/app/facet-composer/facet-composer.component.scss b/src/main/webapp/app/facet-composer/facet-composer.component.scss
index e69de29..838e961 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.scss
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.scss
@@ -0,0 +1,12 @@
+.tableTooltip{
+    transform: scale(1.5)!important;
+    background-color: bisque!important;
+    position: relative !important; 
+    font-size: 10px; 
+    color: black!important;
+    font-weight: bold;
+}
+
+.mat-icon {
+  font-size: 32px;
+}
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 705271d..7ac17eb 100644
--- a/src/main/webapp/app/facet-composer/facet-composer.component.ts
+++ b/src/main/webapp/app/facet-composer/facet-composer.component.ts
@@ -36,8 +36,8 @@ export class FacetComposerComponent implements OnInit {
 	
     myForm: FormGroup;	//form complessiva 
    
+    facetData: IFacetComposer[];
     typeSpec: ITypeSpecification;
-  //  relationOptions: string[]|undefined;
   
     defaultProperty = {
           "type": "text",
@@ -51,6 +51,7 @@ export class FacetComposerComponent implements OnInit {
         
         
      defaultFacet = {
+		 "name": "nuova facet",
 	      "relation": "ConsistsOf",
 	      "properties": [
 	        {
@@ -70,7 +71,8 @@ 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.typeSpec = {} as ITypeSpecification;
+			this.facetData = [];
+		    this.typeSpec = {} as ITypeSpecification;
 			this.myForm = this.fb.group({
 				facets: new FormArray([
 					
@@ -83,7 +85,11 @@ export class FacetComposerComponent implements OnInit {
 				  */
 			}
 			
-			
+	  removeGroup(i: number) {
+    // remove address from the list
+    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.
@@ -91,6 +97,7 @@ export class FacetComposerComponent implements OnInit {
 		ngOnInit(): void {
 			this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
 					this.typeSpec = res;
+					this.facetData = res.facetSpecs;
 					this.createForm(res);
 					});
 			}
@@ -107,14 +114,14 @@ export class FacetComposerComponent implements OnInit {
 		
 		
 		//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
-	    createForm(facetData:ITypeSpecification):void{
-			for(let i=0; i<facetData.facetSpecs.length; i++){
-					const facetSpec = facetData.facetSpecs[i];
+	    createForm(fData:ITypeSpecification):void{
+			for(let i=0; i<fData.facetSpecs.length; i++){
+					const facetSpec = fData.facetSpecs[i];
 					this.createFacetGroup(facetSpec);
 				}
 		}
 		
-		createPropertyArray2(prop: IFacetProps, propFa: FormArray):void{
+		createPropertyArray(prop: IFacetProps, propFa: FormArray):void{
 			  let fc;
 			  //const propFa: FormArray = this.fb.array([]);
 			  const fg: FormGroup = this.fb.group({});
@@ -147,55 +154,25 @@ export class FacetComposerComponent implements OnInit {
 		  }
 		  
 		
-		createPropertyArray(item: IFacetProps[]):FormArray{
-			  let fc;
-			  const propFa: FormArray = this.fb.array([]);
-			  const fg: FormGroup = this.fb.group({});
-				for (let i=0; i<item.length; i++){
-					 const prop = item[i];
-					 //const fc = new FormControl([prop.name])
-					 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))
-							 }
-						 }
-					 }
-					 fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
-					 propFa.push(fg); 
-					 console.debug('***	propFa ***');
-					 console.debug(propFa);
-					 console.debug('****************');
-					}
-				return propFa;
-		  }
+		
 		  
 			createFacetGroup(item: IFacetComposer):void{
 				 const facetFg: FormGroup = this.fb.group({});
 				 //const relationFc = new FormControl('relation',Validators.required); 
+				 const nameFc = this.fb.control(item.name); 
+				 facetFg.addControl('name', nameFc);
+				 
+				 const descriptionFc = this.fb.control(item.description); 
+				 facetFg.addControl('description', descriptionFc);
+				 
 				 const relationFc = this.fb.control(item.relation,Validators.required); 
 				 facetFg.addControl('relation', relationFc);
 				 
 				  //1. creo formArray con le properties
-				 //const propertiesFa = this.createPropertyArray2(item.guiProps);
+				 //const propertiesFa = this.createPropertyArray(item.guiProps);
 				 const propertiesFa = this.fb.array([]);
 				 for(let j=0; j<item.guiProps.length; j++){
-					 this.createPropertyArray2(item.guiProps[j],propertiesFa);
+					 this.createPropertyArray(item.guiProps[j],propertiesFa);
 					 }
 				 //2. aggiungo formarray delle properties ai controls per la facet
 				 facetFg.addControl('properties',propertiesFa);
@@ -231,6 +208,7 @@ export class FacetComposerComponent implements OnInit {
 	///////////////////////////////		
 			
 		private addFacetGroup(): FormGroup {
+			
 		    return this.fb.group({
 		      relation: {},
 		      properties: this.fb.array([])
@@ -239,15 +217,47 @@ export class FacetComposerComponent implements OnInit {
 		  
 		  
 	//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
-	  addFacet(): void {
-				 this.facetArray.push(this.addFacetGroup());
+	  addFacet(ind:number): void {
+				// this.facetArray.push(this.addFacetGroup());
+				//this.createFacetGroup(this.facetData[ind]);
+				 const icf: IFacetComposer = this.facetData[ind];
+				
+				 const facetFg: FormGroup = this.fb.group({});
+				 const nameFc = this.fb.control(icf.name); 
+				 facetFg.addControl('name', nameFc);
+				 
+				 const descriptionFc = this.fb.control(icf.description); 
+				 facetFg.addControl('description', descriptionFc);
+				 
+				 const relationFc = this.fb.control(icf.relation,Validators.required); 
+				 facetFg.addControl('relation', relationFc);
+				 
+				  //1. creo formArray con le properties
+				 //const propertiesFa = this.createPropertyArray(item.guiProps);
+				 const propertiesFa = this.fb.array([]);
+				 for(let j=0; j<icf.guiProps.length; j++){
+					 this.createPropertyArray(icf.guiProps[j],propertiesFa);
+					 }
+				 //2. aggiungo formarray delle properties ai controls per la facet
+				 facetFg.addControl('properties',propertiesFa);
+				//Aggiunge in ultima posizione nel'array
+				 this.facetArray.push(facetFg);
 		  }
 		  
+	  removeFacet(index: number): void {
+		  const controls: FormArray = <FormArray>this.myForm.controls['facets'];
+		  controls.removeAt(index);
 		  
-	    removeFacet(index: number): void {
+		  
+		  /*
+				for(let j=0; j<this.facetData[index].guiProps.length; j++){
+					this.deleteProperty(index,j);
+					}
 			    this.facetArray.removeAt(index);
-		   }
-			
+			    console.debug('***	rimosso indice: '+String(index));
+			    */
+		}
+		
 
 	    deleteProperty(ind:number,i:number): void {
 			this.getPropertiesArray(ind).removeAt(i);
@@ -258,17 +268,8 @@ export class FacetComposerComponent implements OnInit {
 			  
 			  
 	    addNewProperty(ind:number): void {
-			/*
-			 const formGroup = this.createItem(this.defaultItem);
-    		 this.itemsArray.push(formGroup);
-			*/
-			//this.getPropertiesArray(ind).push();
-			
-			alert('add prop!');
-			/*
-			    (<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
-			  */
-			  }
+		//	alert('add prop!');
+			}
 			
 		 close():void {
 			 		this.resetForm();