gCubeSystem
/
information-system-gui
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added json-validated textfield for complexType

This commit is contained in:
Maria Teresa Paratore 2024-06-20 13:08:48 +02:00
parent 05a1d916bf
commit 8518810d34
2 changed files with 64 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/webapp/app/facet-composer/facet-composer.component.html
View File

@ -19,7 +19,7 @@
<div formArrayName="{{facetTemplate.key}}" *ngFor="let facetTemplate of fieldsMap|keyvalue;" > <div formArrayName="{{facetTemplate.key}}" *ngFor="let facetTemplate of fieldsMap|keyvalue;" >
<div [formGroupName] ="ind" *ngFor="let fct of (getSingleFacetArray(facetTemplate.key)).controls; let ind=index;" style="border: 3px solid rgb(72, 157, 202); padding: 10px; margin: 5px;"> <div [formGroupName] ="ind" *ngFor="let fct of (getSingleFacetArray(facetTemplate.key)).controls; let ind=index;" style="border: 3px solid rgb(72, 157, 202); padding: 10px; margin: 5px;">
<mat-form-field appearance="outline" > <mat-form-field appearance="outline" >
<input matInput formControlName="facetName" [style.width.px]="350" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" /> <input matInput formControlName="facetName" style="width: 350px" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" />
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label for="min" >occurr. min</mat-label> <mat-label for="min" >occurr. min</mat-label>
@ -105,6 +105,11 @@
<input matInput formControlName="val" type="number"/> <input matInput formControlName="val" type="number"/>
<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'number')}}</mat-error> <mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'number')}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="x.get('tipo')?.value === 'complexType'">
<mat-label for="val">value</mat-label>
<textarea matInput style="width: 400px" formControlName="val"></textarea>
<mat-error>{{checkForErrorsIn(facetTemplate.key,ind,i,'complexType')}}</mat-error>
</mat-form-field >
<mat-form-field *ngIf="x.get('tipo')?.value === 'boolean'"> <mat-form-field *ngIf="x.get('tipo')?.value === 'boolean'">
<mat-label for="val">value</mat-label> <mat-label for="val">value</mat-label>
<input matInput formControlName="val" type="boolean"/> <input matInput formControlName="val" type="boolean"/>

77
src/main/webapp/app/facet-composer/facet-composer.component.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
/* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-labels */ /* eslint-disable no-labels */
/* eslint-disable no-useless-escape */ /* eslint-disable no-useless-escape */
@ -20,7 +21,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
import { IFacetComposer, IFacetProps } from './i-facet-composer'; import { IFacetComposer, IFacetProps } from './i-facet-composer';
import { SharedModule } from 'app/shared/shared.module'; import { SharedModule } from 'app/shared/shared.module';
import { MatSelectFilterModule } from 'mat-select-filter'; import { MatSelectFilterModule } from 'mat-select-filter';
import { isEmpty } from 'rxjs';
@Component({ @Component({
standalone: true, standalone: true,
@ -79,6 +79,7 @@ export class FacetComposerComponent implements OnInit {
optionTypes = [ optionTypes = [
{ value: 'boolean'}, { value: 'boolean'},
{ value: 'complexType'},
{ value: 'date'},//text { value: 'date'},//text
{ value: 'datetime'},//text { value: 'datetime'},//text
{ value: 'password'}, { value: 'password'},
@ -174,6 +175,11 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
// eslint-disable-next-line no-useless-escape // eslint-disable-next-line no-useless-escape
valFc.setValidators([Validators.required,Validators.pattern('^\s*(true|false)\s*$')]); valFc.setValidators([Validators.required,Validators.pattern('^\s*(true|false)\s*$')]);
} }
if(newValue==='complexType'){
valFc.setValue('{}');
// eslint-disable-next-line no-useless-escape
valFc.setValidators([Validators.required, this.validateJsonString()]);
}
if(newValue==='datetime'){ if(newValue==='datetime'){
valFc.setValue(''); valFc.setValue('');
valFc.setValue(new Date().toISOString()); valFc.setValue(new Date().toISOString());
@ -206,10 +212,19 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
const value = control.value; const value = control.value;
const isFormallyCorrect = /^(19|20)\d{2}-(0[1-9]|1[0,1,2])-(0[1-9]|[12][0-9]|3[01])T(0[0-9]|1[0-9]|2[0-4]):(0[0-9]|[1-5][0-9]):(0[0-9]|[1-5][0-9])\.[0-9]{3}Z$/.test(value); const isFormallyCorrect = /^(19|20)\d{2}-(0[1-9]|1[0,1,2])-(0[1-9]|[12][0-9]|3[01])T(0[0-9]|1[0-9]|2[0-4]):(0[0-9]|[1-5][0-9]):(0[0-9]|[1-5][0-9])\.[0-9]{3}Z$/.test(value);
const datetimeValid = isFormallyCorrect && this.isIsoDate(control.value); const datetimeValid = isFormallyCorrect && this.isIsoDate(control.value);
alert('datetimeValid?...'+datetimeValid); //alert('datetimeValid?...'+datetimeValid);
return !datetimeValid ? {datetimeIso:true}: null; return !datetimeValid ? {datetimeIso:true}: null;
} }
} }
private validateJsonString():ValidatorFn {
// alert('prova!');
return (control: AbstractControl): ValidationErrors |null => {
const jsonValid = this.isJsonString(control.value);
//alert('datetimeValid?...'+datetimeValid);
return !jsonValid ? {validJson:true}: null;
}
}
checkForErrors(valFc:AbstractControl, inputType:string): string{ checkForErrors(valFc:AbstractControl, inputType:string): string{
let errorMsg: string; let errorMsg: string;
@ -222,24 +237,41 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
if(!this.isIsoDate(valFc.value)){ if(!this.isIsoDate(valFc.value)){
errorMsg = 'Date is not in correct ISO format'; errorMsg = 'Date is not in correct ISO format';
} }
}else{
if(valFc.hasError('pattern')){ }else if(!this.checkIfEmpty(valFc.value)&& inputType==='complexType'){
errorMsg = ''+ valFc.value+'is not a correct value'; if(!this.isJsonString(valFc.value)){
if(!this.checkIfEmpty(valFc.value)&& inputType==='float'){ errorMsg = 'Please insert a valid JSON string';
errorMsg = 'input is not a decimal number (use . as a separator)'; }
} }else
if(!this.checkIfEmpty(valFc.value)&& inputType==='boolean'){ {
errorMsg = 'please enter true or false'; if(valFc.hasError('pattern')){
} errorMsg = ''+ valFc.value+'is not a correct value';
if(!this.checkIfEmpty(valFc.value)&& inputType==='date'){ if(!this.checkIfEmpty(valFc.value)&& inputType==='float'){
errorMsg = 'date or date format is not correct'; 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==='date'){
errorMsg = 'date or date format is not correct';
}
}
}
return errorMsg; return errorMsg;
} }
isJsonString(newValue:string):boolean {
let isOk = true;
try {
JSON.parse(newValue);
isOk = true;
} catch (ex) {
// set parse error if it fails
isOk = false;
}
console.debug('>>>>>>>>JSON OK?.........'+isOk);
return isOk;
}
checkDatetime(denoFacet:string, indexFct:number, prop:IFacetProps):string{ checkDatetime(denoFacet:string, indexFct:number, prop:IFacetProps):string{
let errorMsg: string; let errorMsg: string;
@ -263,14 +295,21 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
let errorMsg: string; let errorMsg: string;
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
errorMsg=''; errorMsg='';
console.debug('************');
const valFc = this.getPropsGroup(denoFacet,indexFct).get(prop.name)!; const valFc = this.getPropsGroup(denoFacet,indexFct).get(prop.name)!;
/*
if(prop.validations.length>1){
console.debug('------>>>Validator deno 1...'+prop.validations[0].validator)
console.debug('------>>>Validator deno 2...'+prop.validations[1].validator)
}*/
for(let i=0; i<prop.validations.length; i++){ for(let i=0; i<prop.validations.length; i++){
const valObj = prop.validations[i]; const valObj = prop.validations[i];
//console.debug('Validator index...'+i)
if(valFc.hasError(valObj.validator)){ if(valFc.hasError(valObj.validator)){
console.debug()
errorMsg = valObj.message; errorMsg = valObj.message;
} }
} }
//console.debug('************');
return errorMsg; return errorMsg;
} }
@ -383,7 +422,7 @@ defaultValue={new Date().toISOString().substring(0, (new Date().toISOString().in
this.dialogRef.close('error'); this.dialogRef.close('error');
}); });
}else{ }else{
alert("Data provided is not valid!"); // alert("Data provided is not valid!");
} }
} }