318 lines
10 KiB
TypeScript
318 lines
10 KiB
TypeScript
/* 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 { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { MAT_DIALOG_DATA, MatDialogActions, 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;
|
|
|
|
myForm: FormGroup; //form complessiva
|
|
|
|
// facetData: IFacetComposer[];
|
|
typeSpec: ITypeSpecification;
|
|
fieldsMap: Map<string, IFacetComposer>;
|
|
addableFacets: string[];
|
|
|
|
defaultProperty = {
|
|
"type": "text",
|
|
"label": "Custom property",
|
|
"name": "customProperty",
|
|
"value": "",
|
|
"validations": [],
|
|
"pattern": null,
|
|
"propDescription": "A custom property"
|
|
}
|
|
|
|
|
|
defaultFacet = {
|
|
"name": "nuova facet",
|
|
"relation": "ConsistsOf",
|
|
"properties": [
|
|
{
|
|
"value": "simpleproperty"
|
|
},
|
|
{
|
|
"name": ""
|
|
}
|
|
]
|
|
}
|
|
|
|
|
|
|
|
// 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.facetData = [];
|
|
this.typeSpec = {} as ITypeSpecification;
|
|
this.fieldsMap = new Map<string,IFacetComposer>();
|
|
this.myForm = this.fb.group({
|
|
facets: new FormArray([
|
|
])
|
|
});
|
|
this.addableFacets = [];
|
|
/*
|
|
this.propertyGroup = new FormGroup({
|
|
properties: new FormArray([]),
|
|
});
|
|
*/
|
|
}
|
|
|
|
removeGroup(i: number) {
|
|
// remove address from the list
|
|
const control = <FormArray>this.myForm.controls['times'];
|
|
control.removeAt(i);
|
|
}
|
|
|
|
|
|
ngOnInit(): void {
|
|
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
|
this.typeSpec = res;
|
|
//attenzione allo spazio prima della parentesi
|
|
this.fieldsMap = new Map(res.facetSpecs.map((obj) => [obj.name+' ('+obj.relation+')', obj]));
|
|
/*
|
|
this.fieldsMap.forEach(function(value,key){
|
|
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
|
|
console.debug(`Map key is:${key} and value is:${value}`);
|
|
console.debug('************************');
|
|
});
|
|
*/
|
|
this.addableFacets = this.fillFacetSelect(this.fieldsMap);
|
|
this.createForm(res);
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
fillFacetSelect(myMap:Map<string,IFacetComposer>):string[]{
|
|
const res:string[] = [];
|
|
myMap.forEach(function(value,key){
|
|
const fComp : IFacetComposer = myMap.get(key)!; //'!' significa che assicuriamo che non si undefined (altrimenti segnala errore)
|
|
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
|
|
if(fComp.max==='many'){
|
|
res.push(fComp.name+" ("+fComp.relation+")");
|
|
}
|
|
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
|
|
//console.debug(`Map key is:${key} and value is:${value}`);
|
|
//console.debug('************************');
|
|
});
|
|
return res;
|
|
}
|
|
|
|
selectedFacet = '';
|
|
onSelectNewFacet(value:string): void {
|
|
this.selectedFacet = value;
|
|
alert('Cosa?...'+this.selectedFacet);
|
|
}
|
|
|
|
//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.createFacetGroup(facetSpec);
|
|
}
|
|
}
|
|
|
|
createPropertyArray(prop: IFacetProps, propFa: FormArray):void{
|
|
let fc;
|
|
//const propFa: FormArray = this.fb.array([]);
|
|
const fg: FormGroup = this.fb.group({});
|
|
//const fc = new FormControl([prop.name])
|
|
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))
|
|
}
|
|
}
|
|
}
|
|
fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
|
|
propFa.push(fg);
|
|
//return propFa;
|
|
}
|
|
|
|
|
|
|
|
|
|
createFacetGroup(item: IFacetComposer):void{
|
|
const facetFg: FormGroup = this.fb.group({});
|
|
//const relationFc = new FormControl('relation',Validators.required);
|
|
const nameFc = this.fb.control(item.name);
|
|
facetFg.addControl('name', 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('description', descriptionFc);
|
|
|
|
const relationFc = this.fb.control(item.relation,Validators.required);
|
|
facetFg.addControl('relation', relationFc);
|
|
|
|
//1. creo formArray con le properties
|
|
//const propertiesFa = this.createPropertyArray(item.guiProps);
|
|
const propertiesFa = this.fb.array([]);
|
|
for(let j=0; j<item.guiProps.length; j++){
|
|
this.createPropertyArray(item.guiProps[j],propertiesFa);
|
|
}
|
|
//2. aggiungo formarray delle properties ai controls per la facet
|
|
facetFg.addControl('properties',propertiesFa);
|
|
//TODO
|
|
this.facetArray.push(facetFg);
|
|
}
|
|
|
|
get facetArray(): FormArray {
|
|
return <FormArray>this.myForm.get('facets');
|
|
}
|
|
|
|
getPropertiesArray(index: number): FormArray{
|
|
return <FormArray>(<FormArray>this.facetArray.at(index)).get('properties');
|
|
}
|
|
|
|
onSubmit() {
|
|
if (this.myForm.valid) {
|
|
const formData = this.myForm.value;
|
|
console.log("***** FORMDATA *****");
|
|
console.log(formData);
|
|
// Process formData
|
|
}
|
|
}
|
|
|
|
resetForm() {
|
|
this.myForm.reset();
|
|
}
|
|
|
|
/*To update form values programmatically, use the patchValue() or setValue() methods:*/
|
|
updateFormValues() {
|
|
this.myForm.patchValue({ name: 'John' });
|
|
}
|
|
///////////////////////////////
|
|
|
|
private addFacetGroup(): FormGroup {
|
|
|
|
return this.fb.group({
|
|
relation: {},
|
|
properties: this.fb.array([])
|
|
});
|
|
}
|
|
|
|
|
|
//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
|
|
addFacet(nameplus:string): void {
|
|
// this.facetArray.push(this.addFacetGroup());
|
|
//this.createFacetGroup(this.facetData[ind]);
|
|
|
|
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(nameplus);
|
|
|
|
const facetFg: FormGroup = this.fb.group({});
|
|
const nameFc = this.fb.control(icf.name);
|
|
facetFg.addControl('name', nameFc);
|
|
|
|
const maxFc = this.fb.control(icf.max);
|
|
facetFg.addControl('max', maxFc);
|
|
|
|
const minFc = this.fb.control(icf.min);
|
|
facetFg.addControl('min', minFc);
|
|
|
|
const descriptionFc = this.fb.control(icf.description);
|
|
facetFg.addControl('description', descriptionFc);
|
|
|
|
const relationFc = this.fb.control(icf.relation,Validators.required);
|
|
facetFg.addControl('relation', relationFc);
|
|
|
|
//1. creo formArray con le properties
|
|
//const propertiesFa = this.createPropertyArray(item.guiProps);
|
|
const propertiesFa = this.fb.array([]);
|
|
for(let j=0; j<icf.guiProps.length; j++){
|
|
this.createPropertyArray(icf.guiProps[j],propertiesFa);
|
|
}
|
|
//2. aggiungo formarray delle properties ai controls per la facet
|
|
facetFg.addControl('properties',propertiesFa);
|
|
//Aggiunge in ultima posizione nel'array
|
|
this.facetArray.push(facetFg);
|
|
}
|
|
|
|
removeFacet(index: number): void {
|
|
const controls: FormArray = <FormArray>this.myForm.controls['facets'];
|
|
controls.removeAt(index);
|
|
this.facetArray.removeAt(index)
|
|
|
|
/*
|
|
for(let j=0; j<this.facetData[index].guiProps.length; j++){
|
|
this.deleteProperty(index,j);
|
|
}
|
|
this.facetArray.removeAt(index);
|
|
console.debug('*** rimosso indice: '+String(index));
|
|
*/
|
|
}
|
|
|
|
|
|
deleteProperty(ind:number,i:number): void {
|
|
this.getPropertiesArray(ind).removeAt(i);
|
|
/*
|
|
(<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
|
|
*/
|
|
}
|
|
|
|
|
|
addNewProperty(ind:number): void {
|
|
// alert('add prop!');
|
|
}
|
|
|
|
close():void {
|
|
this.resetForm();
|
|
this.dialogRef.close({event:'cancel'});
|
|
}
|
|
//chiude e basta
|
|
}
|
|
|
|
|