261 lines
8.1 KiB
TypeScript
261 lines
8.1 KiB
TypeScript
/* eslint-disable no-console */
|
|
/* eslint-disable guard-for-in */
|
|
/* eslint-disable @typescript-eslint/restrict-plus-operands */
|
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
|
import { CommonModule } from '@angular/common';
|
|
import { Component, Inject, OnInit } from '@angular/core';
|
|
import { FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { FacetComposerService, ITypeSpecification } from 'app/facet-composer/facet-composer.service';
|
|
import { IFacetComposer, IFacetProps } from 'app/facet-composer/i-facet-composer';
|
|
import { IContextNode } from 'app/services/i-context-node';
|
|
import { IResource } from 'app/services/i-resource';
|
|
import { ResourcesImplService } from 'app/services/resources-impl.service';
|
|
import { SharedModule } from 'app/shared/shared.module';
|
|
import { MatSelectFilterModule } from 'mat-select-filter';
|
|
|
|
@Component({
|
|
standalone: true,
|
|
selector: 'jhi-facet-editor',
|
|
templateUrl: './facet-editor.component.html',
|
|
styleUrls: ['./facet-editor.component.scss'],
|
|
imports:[CommonModule,MatFormFieldModule,SharedModule,
|
|
ReactiveFormsModule,MatButtonModule,
|
|
MatDialogModule,MatInputModule,MatExpansionModule,MatSelectFilterModule],
|
|
providers: [ResourcesImplService]
|
|
|
|
})
|
|
|
|
//TODO: a regime usare lo stesso html di facet-composer
|
|
export class FacetEditorComponent implements OnInit {
|
|
|
|
titleType: string;
|
|
titlePath: string;
|
|
selectedOption: string;
|
|
uid:string;
|
|
|
|
myForm: FormGroup; //form complessiva
|
|
// relSelect: FormGroup<any>;
|
|
// facetData: IFacetComposer[];
|
|
typeSpec: ITypeSpecification;
|
|
fieldsMap: Map<string, IFacetComposer>;
|
|
rawjson: string|any;
|
|
|
|
optionTypes = [
|
|
{ value: 'Boolean'},
|
|
{ value: 'Integer'},
|
|
{ value: 'Short'},
|
|
{ value: 'Long'},
|
|
{ value: 'Float'},
|
|
{ value: 'Double'},
|
|
{ value: 'Date'},
|
|
{ value: 'String'},
|
|
{ value: 'Binary'},
|
|
{ value: 'Byte'}
|
|
];
|
|
|
|
|
|
//TODO: PASSARE UID COME STRINGA
|
|
constructor(private dataService: ResourcesImplService, private guiService: FacetComposerService, private fb: FormBuilder,
|
|
private dialogRef:MatDialogRef<FacetEditorComponent>,
|
|
@Inject(MAT_DIALOG_DATA) data: {type: IResource ,context:IContextNode, uid:string}){
|
|
this.titleType = data.type.name;
|
|
this.titlePath = data.context.path;
|
|
this.uid = data.uid;
|
|
this.selectedOption = '';
|
|
this.typeSpec = {} as ITypeSpecification;
|
|
this.fieldsMap = new Map<string,IFacetComposer>();
|
|
this.myForm = this.fb.group({});
|
|
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
|
|
//TODO: al posto di '' metti titlePath (sembra dare errore)
|
|
this.dataService.getJsonDetails('',this.titleType,this.uid).subscribe(res => {
|
|
console.debug("*******RAW OBJECT*********");
|
|
this.lookoutObject(res);
|
|
console.debug("****************");
|
|
});
|
|
|
|
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]));
|
|
});
|
|
|
|
this.createAndFillForm(this.rawjson,this.typeSpec);
|
|
}
|
|
|
|
|
|
lookoutObject(obj:any){
|
|
for(const key in obj){
|
|
console.debug("key: " + key + ", value: " + obj[key]);
|
|
if(obj[key] instanceof Object){
|
|
this.lookoutObject(obj[key]);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
createAndFillForm(rawSource:string, fData:ITypeSpecification):void{
|
|
/*
|
|
console.debug("*******RAW STRING*********");
|
|
console.debug(rawSource);
|
|
console.debug("****************");
|
|
*/
|
|
//const formDataObj = JSON.parse(rawSource);
|
|
// this.lookoutObject(formDataObj);
|
|
|
|
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));
|
|
this.myForm.addControl(nameplus,singleFacetArray);
|
|
}
|
|
|
|
get extraProps():FormArray {
|
|
return this.fb.array([
|
|
this.extraProp
|
|
])
|
|
}
|
|
|
|
get extraProp():FormGroup{
|
|
return this.fb.group({
|
|
deno: ['',Validators.required],
|
|
value: ['',Validators.required],
|
|
tipo:['String']
|
|
})
|
|
}
|
|
|
|
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 relFg: FormGroup = this.fb.group({});
|
|
|
|
/*
|
|
console.debug(item.relationOptions);
|
|
console.debug('+++++++++++++++++')
|
|
*/
|
|
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
|
|
// facetFg.addControl('properties',this.createPropertyControls(item.guiProps));
|
|
return this.addPropertyControls(facetFg,item.guiProps);
|
|
}
|
|
|
|
addPropertyControls(facetFg:FormGroup, props: IFacetProps[]){
|
|
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
|
|
}
|
|
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))
|
|
}
|
|
}
|
|
}
|
|
facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
|
|
}
|
|
return facetFg;
|
|
}
|
|
|
|
onSubmit() {
|
|
if (this.myForm.valid) {
|
|
const formData = this.myForm.value;
|
|
// console.log("***** FORMDATA *****");
|
|
//console.log(formData);
|
|
//TODO Process formData
|
|
}
|
|
}
|
|
|
|
getSingleFacetArray(nameplus:string): FormArray {
|
|
return this.myForm.controls[nameplus] as FormArray;
|
|
}
|
|
|
|
|
|
removeFacet(deno:string, index: number): void {
|
|
this.getSingleFacetArray(deno).removeAt(index);
|
|
this.typeSpec.facetSpecs.splice(index,1);
|
|
}
|
|
|
|
|
|
|
|
|
|
resetForm():void {
|
|
this.myForm.reset();
|
|
}
|
|
|
|
close():void {
|
|
this.resetForm();
|
|
this.dialogRef.close({event:'cancel'});
|
|
}
|
|
|
|
|
|
}
|