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

added validation messages and upated types

This commit is contained in:
Maria Teresa Paratore 2024-06-12 17:36:25 +02:00
parent aaf716b3cc
commit e6ccb6b646
2 changed files with 149 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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"){
fc = this.fb.control(new Date())
if(prop.type==="datetime"){
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"}]
}
}
}