information-system-gui/src/main/webapp/app/facet-composer/facet-composer.component.ts

277 lines
8.5 KiB
TypeScript

/* 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 { Component, Inject, OnInit } from '@angular/core';
import { 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';
import { FacetComposerService, ITypeSpecification } from './facet-composer.service';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatExpansionModule } from '@angular/material/expansion';
import { IFacetComposer, IFacetProps } from './i-facet-composer';
import { SharedModule } from 'app/shared/shared.module';
import { MatSelectFilterModule } from 'mat-select-filter';
@Component({
standalone: true,
selector: 'jhi-facet-composer',
templateUrl: './facet-composer.component.html',
styleUrls: ['./facet-composer.component.scss'],
imports:[CommonModule,MatFormFieldModule,SharedModule,
ReactiveFormsModule,MatButtonModule,
MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
providers: [FacetComposerService]
})
export class FacetComposerComponent implements OnInit {
titleType: string;
titlePath: string;
selectedOption: string;
myForm: FormGroup; //form complessiva
typeSpec: ITypeSpecification;
fieldsMap: Map<string, IFacetComposer>;
// eslint-disable-next-line @typescript-eslint/member-ordering
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
private dialogRef:MatDialogRef<FacetComposerComponent>,
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode}){
this.titleType = data.type.name;
this.titlePath = data.context.path;
this.selectedOption = '';
this.typeSpec = {} as ITypeSpecification;
this.fieldsMap = new Map<string,IFacetComposer>();
this.myForm = this.fb.group({});
}
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, obj]));
//parto con una facet per tipo
this.createForm(res);
});
}
/*
//TODO: A REGIME LA TENDINA DOVRA' NESSERE RIEMPITA SECONDO QUESTO CRITERIO
//(LATO JAVA, VIA CHIAMATA A SERVIZIO)
if( PropertyTypeName.BaseType.BOOLEAN.ordinal()
BaseType.PROPERTY.ordinal()) {
// Tipi Base
}
PropertyTypeName ptn = new PropertyTypeName("ValueSchema");
ptn.getBaseType();
if(ptn.isGenericType()){
ptn.getGenericBaseType();
ptn.getGenericClassName();
}
*/
optionTypes = [
{ value: 'Boolean'},
{ value: 'Integer'},
{ value: 'Short'},
{ value: 'Long'},
{ value: 'Float'},
{ value: 'Double'},
{ value: 'Password'},//Password implica salvare criptato
{ value: 'Date'},
{ value: 'String'},
{ value: 'Binary'},
{ value: 'Byte'}
];
onOptionsSelected(value:string): void {
this.selectedOption = value;
//console.debug('******onOptionsSelected?...'+value);
}
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
createForm(fData:ITypeSpecification):void{
for(let i=0; i<fData.facetSpecs.length; i++){
const facetSpec = fData.facetSpecs[i];
this.createFacetArrayEntry(facetSpec);
}
}
createFacetArrayEntry(item: IFacetComposer):void{
const nameplus:string = item.name+'_'+item.relation;
const singleFacetArray: FormArray = this.fb.array([]);
singleFacetArray.push(this.createFacetGroup(item,false));
//singleFacetArray.push(this.createExtraPropGroup());
this.myForm.addControl(nameplus,singleFacetArray);
}
get extraProps():FormArray {
return this.fb.array([
this.extraProp
])
}
get extraProp():FormGroup{
return this.fb.group({
deno: ['',Validators.required],
val: ['',Validators.required],
tipo:['String']
})
}
get props():FormGroup{
return this.fb.group({
})
}
getPropsGroup(denoFacet:string, index:number):FormGroup{
return (this.getSingleFacetArray(denoFacet).controls[index]).get('props') as FormGroup;
}
getExtraPropsArray(denoFacet:string, index:number):FormArray{
return (this.getSingleFacetArray(denoFacet).controls[index]).get('extraProps') as FormArray;
}
addExtraProp(denoFacet:string, index:number):void{
this.getExtraPropsArray(denoFacet, index).push(this.extraProp);
}
removeExtraProp(denoFacet:string, indexFct:number, index:number):void{
this.getExtraPropsArray(denoFacet, indexFct).removeAt(index);
}
addFacet(deno:string): void {
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno);
const singleFacetArray = this.myForm.controls[deno] as FormArray;
singleFacetArray.push(this.createFacetGroup(icf,true));
}
createFacetGroup(item: IFacetComposer,isAdded: boolean):FormGroup{
const facetFg: FormGroup = this.fb.group({});
const nameFc = this.fb.control(item.name);
facetFg.addControl('facetName', nameFc);
const maxFc = this.fb.control(item.max);
facetFg.addControl('max', maxFc);
const minFc = this.fb.control(item.min);
facetFg.addControl('min', minFc);
const descriptionFc = this.fb.control(item.description);
facetFg.addControl('facetDescription', descriptionFc);
const relationFc = this.fb.control(item.relation);
facetFg.addControl('relationFacet', relationFc);
//this.itemRelations = item.relationOptions;
const addedFc = this.fb.control(isAdded);
facetFg.addControl('isAdded', addedFc);
facetFg.addControl('extraProps', this.extraProps);
//1. creo group con le properties
//2. aggiungo formgroup delle properties ai controls per la facet
return this.addPropertyControls(facetFg,item.guiProps);
}
addPropertyControls(facetFg:FormGroup, props: IFacetProps[]):FormGroup{
const propsFg = this.fb.group({});
let fc:FormControl;
for(let i=0; i<props.length; i++){
const prop=props[i];
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 or typeprop
}
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))
}
}
}
if(prop.type==="typeprop"){ //TODO: forse va messo il controllo anche sul tipo di facet
let fc2:FormControl;
propsFg.addControl("schema",fc);
// eslint-disable-next-line prefer-const
fc2 = this.fb.control('') //text or typeprop
propsFg.addControl("value",fc2);
}else{
propsFg.addControl(prop.name,fc); //formGroup.addControl(prop_'controlName', formControl);
}
}
facetFg.addControl('props',propsFg);
return facetFg;
}
getSingleFacetArray(nameplus:string): FormArray {
return this.myForm.controls[nameplus] as FormArray;
}
onSubmit() {
if(this.myForm.valid){
this.guiService.createResource(this.titleType, JSON.stringify(this.myForm.value)).subscribe(res => {
this.dialogRef.close(res);
}, error => {
console.log(JSON.stringify(error));
this.dialogRef.close('error');
});
}else{
alert("Data provided is not valid!");
}
}
resetForm() {
this.myForm.reset();
}
removeFacet(deno:string, index: number): void {
this.getSingleFacetArray(deno).removeAt(index);
this.typeSpec.facetSpecs.splice(index,1);
}
close():void {
this.resetForm();
this.dialogRef.close({event:'cancel'});
}
}