added validation messages and upated types

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

@@ -80,6 +80,7 @@
 													    <mat-label>{{prop.label}}</mat-label>
 														<input matInput formControlName="{{prop.name}}" id="{{prop.name}}" 
 															type="{{prop.type}}"/>
+														<mat-error>{{checkForPropErrors(facetTemplate.key,ind,prop)}}</mat-error>
 												</mat-form-field>
 												</ng-template>
 										</div>
@@ -90,7 +91,7 @@
 										<div [formGroupName] ="i" *ngFor="let x of getExtraPropsArray(facetTemplate.key,ind).controls; let i=index;">
 											<mat-form-field>
 											<mat-label for="tipo" >type</mat-label>
-								   				<mat-select formControlName="tipo" id="tipo"(selectionChange)="updateExtraPropType(facetTemplate.key,ind,i,$event.value)">
+								   				<mat-select formControlName="tipo" id="tipo" (selectionChange)="updateExtraPropType(facetTemplate.key,ind,i,$event.value)">
 													<mat-option *ngFor="let tp of optionTypes"  [value]="tp.value" >
 														{{tp.value}}
 													</mat-option>
@@ -100,11 +101,51 @@
 											 		<mat-label for="deno">name</mat-label>
 													<input matInput formControlName="deno"/>
 												</mat-form-field>
-												<mat-form-field>
+											<mat-form-field *ngIf="x.get('tipo')?.value === 'number'">
 											 		<mat-label for="val">value</mat-label>
-													<input matInput formControlName="val" type="{{x.get('tipo')?.value}}"/>
+													<input matInput formControlName="val" type="number"/>
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'number')}}</mat-error>
 											</mat-form-field>
-								  			
+												<mat-form-field  *ngIf="x.get('tipo')?.value === 'boolean'">
+											 		<mat-label for="val">value</mat-label>
+													<input matInput formControlName="val" type="boolean"/>
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'boolean')}}</mat-error>
+												</mat-form-field >
+												<mat-form-field  *ngIf="x.get('tipo')?.value === 'password'">
+											 		<mat-label for="val">value</mat-label>
+													<input matInput formControlName="val" type="password"/>
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'password')}}</mat-error>
+												</mat-form-field >
+												<mat-form-field  *ngIf="x.get('tipo')?.value === 'datetime'">
+											 		<mat-label for="val">value</mat-label>
+													<input style="width: 350px;" matInput formControlName="val" type="text" />
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'datetime')}}</mat-error>
+												</mat-form-field >
+												<mat-form-field  *ngIf="x.get('tipo')?.value === 'date'">
+											 		<mat-label for="val">value</mat-label>
+													<input matInput formControlName="val" type="date"/>
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'date')}}</mat-error>
+												</mat-form-field >
+												<mat-form-field  *ngIf="x.get('tipo')?.value === 'text'">
+											 		<mat-label for="val">value</mat-label>
+													<input matInput formControlName="val" type="text"/>
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'text')}}</mat-error>
+												</mat-form-field >
+												<mat-form-field  *ngIf="x.get('tipo')?.value === 'float'">
+											 		<mat-label for="val">value</mat-label>
+													<input matInput formControlName="val" type="text"/>
+													<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'float')}}</mat-error>
+												</mat-form-field >
+												
+											
+											<!--
+												    <div *ngIf="input.type === 'number' ">
+													    <input type="number">
+													</div>
+													<div *ngIf="inpyt.type === 'text' ">
+													    <input type="text">
+													</div>
+												-->
 												<button mat-stroked-button color="primary" style="margin-left: 12px;"
 												(click)="removeExtraProp(facetTemplate.key,ind,i)" >
 												Remove custom property</button>

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

@@ -1,10 +1,12 @@
+/* eslint-disable no-labels */
+/* eslint-disable no-useless-escape */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/member-ordering */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable no-console */
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 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';
@@ -42,6 +44,7 @@ export class FacetComposerComponent implements OnInit {
     fieldsMap: Map<string, IFacetComposer>;
     
     showPassword:boolean;
+    datePipe:DatePipe;
    	
   // eslint-disable-next-line @typescript-eslint/member-ordering
   constructor(private guiService: FacetComposerService, private fb: FormBuilder,
@@ -55,6 +58,7 @@ export class FacetComposerComponent implements OnInit {
 		    this.fieldsMap = new Map<string,IFacetComposer>();
 			this.myForm = this.fb.group({});
 			this.showPassword = false;
+			this.datePipe = new DatePipe('en-US');
 		}
 
 
@@ -73,7 +77,8 @@ export class FacetComposerComponent implements OnInit {
 		
 		optionTypes = [
     		{ value: 'boolean'},
-    		{ value: 'datetime-local'},//text
+    		{ value: 'date'},//text
+    		{ value: 'datetime'},//text
     		{ value: 'password'},
     		{ value: 'float'},//text
     		{ value: 'number'},
@@ -81,6 +86,18 @@ export class FacetComposerComponent implements OnInit {
   		];
   		
 
+
+/* <TextField
+   variant="standard"
+   style={{width:"50%"}}
+ //type='datetime'
+ type='datetime'
+ InputLabelProps={{
+  shrink: true                                              
+  }}
+defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().indexOf("T")|0) + 6|0)}
+/>
+*/
   		credentialTypes: string[] = ['username/password', 'clientId/secret', 'token/secret'];
 
 		
@@ -109,11 +126,16 @@ export class FacetComposerComponent implements OnInit {
 			return this.fb.group({
 				deno: ['',Validators.required],
 				val: ['',Validators.required],
-				tipo:['text']
+				tipo:['']
 				
 				})
 			}	
 		
+		get val():FormControl{
+				return this.fb.control({
+				})
+		}
+		
 		get props():FormGroup{
 			return this.fb.group({
 				})
@@ -129,7 +151,6 @@ export class FacetComposerComponent implements OnInit {
 			return (this.getSingleFacetArray(denoFacet).controls[index]).get('extraProps') as FormArray;
 		}
 		
-		
 		addExtraProp(denoFacet:string, index:number):void{
 			this.getExtraPropsArray(denoFacet, index).push(this.extraProp);
 		}
@@ -139,17 +160,29 @@ export class FacetComposerComponent implements OnInit {
 		}
 		
 		updateExtraPropType(denoFacet:string, indexFct:number, index:number, newValue:string):void{
-			console.debug('--------');
-			console.debug(this.getExtraPropsArray(denoFacet, indexFct).controls[index].get('tipo')?.value);
-			console.debug(newValue);
-			console.debug('--------');
 			this.getExtraPropsArray(denoFacet, indexFct).controls[index].get('tipo')?.setValue(newValue);
-			console.debug('++++DOPO+++');
+			const valFc:AbstractControl = this.getExtraPropsArray(denoFacet, indexFct).controls[index].get('val')!;
 			if(newValue==='boolean'){
+				valFc.setValue('');
+				//valFc.addValidators(Validators.pattern('^\s*(true|false)\s*$'))
+				valFc.setValue('false');
 				// eslint-disable-next-line no-useless-escape
-				this.getExtraPropsArray(denoFacet, indexFct).controls[index].get('val')?.addValidators(Validators.pattern('^\s*(true|false)\s*$'))
+				valFc.setValidators([Validators.required,Validators.pattern('^\s*(true|false)\s*$')]);
+			}
+			if(newValue==='datetime'){
+				valFc.setValue('');
+				valFc.setValue(new Date().toISOString());
+				const patt = '\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z)';
+				valFc.setValidators([Validators.required,Validators.pattern(patt)]);
+			}
+			if(newValue==='password'||newValue==='text'||newValue==='number'){
+				valFc.setValue('');
+				valFc.setValidators([Validators.required]);
+			}
+			if(newValue==='float'){
+				valFc.setValue('');
+				valFc.setValidators([Validators.required,Validators.pattern('^[-+]?[0-9]+\.[0-9]+$')]);
 			}
-			console.debug(this.getExtraPropsArray(denoFacet, indexFct).controls[index].get('tipo')?.value);
 		}
 		
 		  	  addFacet(deno:string): void {
@@ -158,6 +191,61 @@ export class FacetComposerComponent implements OnInit {
 				singleFacetArray.push(this.createFacetGroup(icf,true));
 		  }
 		  
+		 
+		
+		  
+		  checkForErrors(valFc:AbstractControl, inputType:string): string{
+			  let errorMsg: string;
+			  errorMsg='';
+			   
+			  if(valFc.hasError('required')){
+				  errorMsg = 'The field must not be empty';
+			  }
+			  if(valFc.hasError('pattern')){
+				  errorMsg = ''+ valFc.value+'is not a correct value';
+				 if(!this.checkIfEmpty(valFc.value)&& inputType==='float'){
+					  errorMsg = 'input is not a decimal number (use . as a separator)';
+				 }
+				 if(!this.checkIfEmpty(valFc.value)&& inputType==='boolean'){
+					  errorMsg = 'please enter true or false';
+				 }
+				 if(!this.checkIfEmpty(valFc.value)&& inputType==='datetime'){
+					  errorMsg = 'datetime provided is not in ISO format';
+				 }
+				 if(!this.checkIfEmpty(valFc.value)&& inputType==='date'){
+					  errorMsg = 'date or date format is not correct';
+				 }
+				 
+			  }
+			  return errorMsg;
+		  }
+		  
+		 checkForPropErrors(denoFacet:string, indexFct:number, prop:IFacetProps):string{
+			 const abstractControl = this.getPropsGroup(denoFacet,indexFct).get(prop.name)!;
+			 //TODO: usare questi campi per costruire la validazione:
+			 //prop.validations
+			 for(let i=0; i<prop.validations.length; i++){ 
+				const valObj = prop.validations[i];
+				 valObj.message;
+				 valObj.validator;
+				 }
+				 
+				 
+			 return this.checkForErrors(abstractControl,prop.type);
+		  }
+		  
+		  checkForErrorsIn(denoFacet:string, indexFct:number, index:number, inputType:string):string{
+			  const valFc:AbstractControl = this.getExtraPropsArray(denoFacet, indexFct).controls[index].get('val')!;
+			  return this.checkForErrors(valFc,inputType);
+			  }
+			  
+		  
+		  checkIfEmpty(value:any) {
+			  return (value == null || (typeof value === "string" && value.trim().length === 0));
+			}
+
+
+
 			createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{
 				 const facetFg: FormGroup = this.fb.group({});
 				 
@@ -206,8 +294,9 @@ export class FacetComposerComponent implements OnInit {
 			 
 			  for(let i=0; i<props.length; i++){
 				  const prop=props[i];
-				  	if(prop.type==="datetime-local"){
+				  	if(prop.type==="datetime"){
-						 fc = this.fb.control(new Date())
+						const date = new Date();
+						fc = this.fb.control(date);
 					 }
 					 if(prop.type==="number"){
 						 fc = this.fb.control(0)
@@ -225,6 +314,7 @@ export class FacetComposerComponent implements OnInit {
 							 }
 							 if(prop.validations[k].name==='pattern'){
 								 fc.addValidators(Validators.pattern(prop.pattern))
+								 //validations":[{"name":"required","validator":"required","message":"The field is required"}]
 							 }
 						 }
 					 }