adding/removing facets and properties

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

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2>
+<h3 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h3>
 
 <!-- myForm inizio form globale -->
 <mat-dialog-content>
@@ -6,7 +6,7 @@
         <mat-expansion-panel>
 				    <mat-expansion-panel-header>
 				      <mat-panel-title>
-				       {{typeSpec.name}}
+				      <h2>{{typeSpec.name}}</h2>
 				      </mat-panel-title>
 				      <mat-panel-description>
 						  <!--la descrizione è lunga e non posso metterla qua-->
@@ -22,47 +22,39 @@
 						<mat-expansion-panel>
 							<mat-expansion-panel-header>
 								<mat-panel-title>
-									{{typeSpec.facetSpecs[ind].name}}
+									<b>{{typeSpec.facetSpecs[ind].name}}</b>
 								<!--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;">
 									 <p>{{typeSpec.facetSpecs[ind].description}}</p> 
 								  </div>
-								  <mat-form-field>
+								  <mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
-									  <!--TODO: trasforma in una select-->
+									  <mat-label for="relation" >relation</mat-label>
-									  <mat-label for="relation">relation</mat-label>
+								   	<mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" >
-									  <input matInput  formControlName="relation" id="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}"/>
-									  
-								   	<mat-select formControlName="relation">
 											<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item">
 												{{item}}
 											</mat-option>
 									</mat-select>
 								
 								   </mat-form-field>
-								    <!--
-						<mat-form-field id="pathfield"  [style.width.px]="200" class="form-field">
-						<mat-select  [(value)]="selected" placeholder="Contexts" formControlName="pathfield" (valueChange)="setNewContext($event)">
-							<mat-select-filter [placeholder]="'filter by name'" [displayMember]="'path'" [array]="allCtxs" (filteredReturn)="filteredContexts =$event"></mat-select-filter>
-								<mat-option *ngFor="let item of filteredContexts" [value]="item">
-									{{item.path}}
-								</mat-option>
-						</mat-select>
-						</mat-form-field>
-										-->
 								    
 								    <!-- OK SO FAR -->	
-									 <div  formArrayName="properties" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;">
+									 <div  formArrayName="properties" style="border: 1px solid rgb(140, 113, 181); 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>
   			   </div>
   			   </div>
   			   </div>
@@ -70,9 +62,15 @@
 		 <!-- <button mat-button (click)="doAction()">Save Form</button> -->
  <!--</form>-->
 	    <!--fine form esterna-->
+	    
+	    <b>Form's Value:</b>
+{{ myForm.value | json }}
+<br />
+<b>Form is Valid ? :</b>
+{{ myForm.valid }}
+
 </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>
-	    <!--fine form esterna-->

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

@@ -39,6 +39,31 @@ export class FacetComposerComponent implements OnInit {
     typeSpec: ITypeSpecification;
   //  relationOptions: string[]|undefined;
   
+    defaultProperty = {
+          "type": "text",
+          "label": "Custom property",
+          "name": "customProperty",
+          "value": "",
+          "validations": [],
+          "pattern": null,
+          "propDescription": "A custom property"
+        }
+        
+        
+     defaultFacet = {
+	      "relation": "ConsistsOf",
+	      "properties": [
+	        {
+	          "value": "simpleproperty"
+	        },
+	        {
+	          "name": ""
+	        }
+	      ]
+	    }
+        
+        
+
   // eslint-disable-next-line @typescript-eslint/member-ordering
   constructor(private guiService: FacetComposerService, private fb: FormBuilder,
         private dialogRef:MatDialogRef<FacetComposerComponent>,
@@ -89,10 +114,39 @@ export class FacetComposerComponent implements OnInit {
 				}
 		}
 		
+		createPropertyArray2(prop: IFacetProps, propFa: FormArray):void{
+			  let fc;
+			  //const propFa: FormArray = this.fb.array([]);
+			  const fg: FormGroup = this.fb.group({});
+					 //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); 
+				//return propFa;
+		  }
 		  
 		
-		//https://stackoverflow.com/questions/74543979/is-it-possible-to-declare-an-empty-form-group-then-add-form-controls-afterwards
-		//crea propertyArray 
 		createPropertyArray(item: IFacetProps[]):FormArray{
 			  let fc;
 			  const propFa: FormArray = this.fb.array([]);
@@ -123,14 +177,14 @@ export class FacetComposerComponent implements OnInit {
 						 }
 					 }
 					 fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
-					 propFa.push(fg); //
+					 propFa.push(fg); 
+					 console.debug('***	propFa ***');
+					 console.debug(propFa);
+					 console.debug('****************');
 					}
-			//	console.debug('************ PROPERTIES-ARRAY: fg.controls:')	
-			//	console.debug(propFa.controls);
 				return propFa;
 		  }
 		  
-
 			createFacetGroup(item: IFacetComposer):void{
 				 const facetFg: FormGroup = this.fb.group({});
 				 //const relationFc = new FormControl('relation',Validators.required); 
@@ -138,13 +192,15 @@ export class FacetComposerComponent implements OnInit {
 				 facetFg.addControl('relation', relationFc);
 				 
 				  //1. creo formArray con le properties
-				 const propertiesFa = this.createPropertyArray(item.guiProps);
+				 //const propertiesFa = this.createPropertyArray2(item.guiProps);
+				 const propertiesFa = this.fb.array([]);
+				 for(let j=0; j<item.guiProps.length; j++){
+					 this.createPropertyArray2(item.guiProps[j],propertiesFa);
+					 }
 				 //2. aggiungo formarray delle properties ai controls per la facet
 				 facetFg.addControl('properties',propertiesFa);
 				//TODO
 				 this.facetArray.push(facetFg);
-			//	 console.debug('************ FACET-ARRAY Controls:')	
-			//	 console.debug(this.facetArray.controls);
 			}
 			
 			   get facetArray(): FormArray {
@@ -180,6 +236,9 @@ export class FacetComposerComponent implements OnInit {
 		      properties: this.fb.array([])
 		    });
 		  }	
+		  
+		  
+	//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
 	  addFacet(): void {
 				 this.facetArray.push(this.addFacetGroup());
 		  }
@@ -190,11 +249,26 @@ export class FacetComposerComponent implements OnInit {
 		   }
 			
 
+	    deleteProperty(ind:number,i:number): void {
+			this.getPropertiesArray(ind).removeAt(i);
 			/*
-	    addProperty(index:number): void {
 			    (<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
-			  }
 			  */
+			  }
+			  
+			  
+	    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);
+			  */
+			  }
 			
 		 close():void {
 			 		this.resetForm();
@@ -203,29 +277,4 @@ export class FacetComposerComponent implements OnInit {
 		//chiude e basta
 	}				
 
-/*
-addNewCompany() {
-  this.companiesFormArr.push(
-    this.fb.group({
-      company: [''],
-      projects: this.fb.array([])
-    })
-  );
-}
-
-deleteCompany(index: number) {
-  this.companiesFormArr.removeAt(index);
-}
-
-  addNewProject(control) {
-  control.push(
-    this.fb.group({
-      projectName: ['']
-  }))
-}
-
-deleteProject(control, index) {
-  control.removeAt(index)
-}
-*/