fixed bugs on adding/removing new facet dynamically
This commit is contained in:
parent
c49a558f05
commit
bb3cab0fcc
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
<!-- myForm inizio form globale -->
|
<!-- myForm inizio form globale -->
|
||||||
<mat-dialog-content>
|
<mat-dialog-content>
|
||||||
|
|
||||||
<mat-expansion-panel>
|
<mat-expansion-panel>
|
||||||
<mat-expansion-panel-header>
|
<mat-expansion-panel-header>
|
||||||
<mat-panel-title>
|
<mat-panel-title>
|
||||||
|
|
@ -17,80 +16,58 @@
|
||||||
|
|
||||||
<div [formGroup]="myForm">
|
<div [formGroup]="myForm">
|
||||||
|
|
||||||
<div formArrayName="facets">
|
<div formArrayName="{{facetTemplate.key}}" *ngFor="let facetTemplate of fieldsMap|keyvalue;" >
|
||||||
<div [formGroupName] ="ind" *ngFor="let fct of facetArray.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="name" [style.width.px]="350" id="{{typeSpec.facetSpecs[ind].name}}" type="text" [readonly]="true" style="font-size: large; font-weight: 700;" />
|
<input matInput formControlName="facetName" [style.width.px]="350" 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="relation" >occurr. min</mat-label>
|
<mat-label for="min" >occurr. min</mat-label>
|
||||||
<input matInput formControlName="min" id="min" type="text" readonly="true"/>
|
<input matInput formControlName="min" id="min" type="text" readonly="true"/>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<mat-label for="relation" >occurr. max</mat-label>
|
<mat-label for="max" >occurr. max</mat-label>
|
||||||
<input matInput formControlName="max" id="max" type="text" readonly="true"/>
|
<input matInput formControlName="max" id="max" type="text" readonly="true"/>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field>
|
|
||||||
<mat-label for="'counter_'+typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation" >counter (hide)</mat-label>
|
|
||||||
<input matInput formControlName="{{'counter_'+typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation}}"
|
|
||||||
id="{{'counter_'+typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation}}" type="number"
|
|
||||||
readonly="true"/>
|
|
||||||
</mat-form-field>
|
|
||||||
<div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
|
<div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
|
||||||
<textarea matInput formControlName="description" [readonly]="true">{{typeSpec.facetSpecs[ind].description}}</textarea>
|
<textarea matInput formControlName="facetDescription" [readonly]="true">{{facetTemplate.value.description}}</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label for="relationFacet" >relationFacet</mat-label>
|
||||||
<mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
|
<mat-select formControlName="relationFacet" id="relationFacet">
|
||||||
<mat-label for="relation" >relation</mat-label>
|
<mat-option *ngFor="let opt of facetTemplate.value.relationOptions" [value]="opt">
|
||||||
<mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" >
|
{{opt}}
|
||||||
<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item" >
|
</mat-option>
|
||||||
{{item}}
|
</mat-select>
|
||||||
</mat-option>
|
</mat-form-field>
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<!-- OK SO FAR -->
|
<!-- PROPERTIES -->
|
||||||
<div formArrayName="properties" style="border: 1px solid rgb(159, 204, 217); padding: 10px; margin: 5px;">
|
<div *ngFor="let prop of facetTemplate.value.guiProps">
|
||||||
<div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;">
|
<mat-form-field>
|
||||||
<mat-form-field>
|
<mat-label>{{prop.label}}</mat-label>
|
||||||
<mat-label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label>
|
<input matInput formControlName="{{prop.name}}" id="{{prop.name}}"
|
||||||
<input matInput formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}"
|
type="{{prop.type}}"/>
|
||||||
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
|
</mat-form-field>
|
||||||
</mat-form-field>
|
</div>
|
||||||
</div>
|
<input matInput formControlName="isAdded" style="display: none;"/>
|
||||||
</div>
|
|
||||||
<!--(counterMap.get(typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation)!)-->
|
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
|
||||||
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
|
|
||||||
<button mat-icon-button color="primary"
|
<button mat-icon-button color="primary"
|
||||||
[disabled]="typeSpec.facetSpecs[ind].min==='1' && ((counterMap.get(typeSpec.facetSpecs[ind].name+'_'+typeSpec.facetSpecs[ind].relation)!)==1)"
|
|
||||||
(click)="removeFacet(ind)" matTooltip="remove" matTooltipClass="tableTooltip"
|
[disabled]="facetTemplate.value.min==='1' && !myForm.get([facetTemplate.key,ind,'isAdded'])!.value"
|
||||||
|
(click)="removeFacet(facetTemplate.key,ind)" matTooltip="remove {{facetTemplate.key}}" matTooltipClass="tableTooltip"
|
||||||
matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
|
matTooltipPosition="above"><mat-icon>delete_outline</mat-icon></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
</div>
|
||||||
<div style="padding-top: 20px; padding-bottom: 8px; margin: 5px;">
|
<button mat-icon-button color="primary" matTooltip="add new {{facetTemplate.key}}"
|
||||||
<h3>Add new Facet:</h3>
|
|
||||||
<div style="padding-top: 24px; padding-bottom: 24px;">
|
|
||||||
<mat-form-field appearance="outline" [style.width.px]="250">
|
|
||||||
<mat-label for="selFacet" >Available Facet Types</mat-label>
|
|
||||||
<!--<select #teams (change)="onSelected(teams.value)">
|
|
||||||
(change)='onOptionsSelected(mySelect.value)'-->
|
|
||||||
<mat-select #selFacet (valueChange)="onOptionsSelected($event)">
|
|
||||||
<mat-option *ngFor="let item of addableFacets" [value]="item">
|
|
||||||
{{item}}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
<button mat-icon-button color="primary" matTooltip="add new facet"
|
|
||||||
matTooltipClass="tableTooltip" [matTooltipPosition]="'right'"
|
matTooltipClass="tableTooltip" [matTooltipPosition]="'right'"
|
||||||
(click)="addFacet(selectedOption)">
|
(click)="addFacet(facetTemplate.key)" [disabled]="facetTemplate.value.max==='1'">
|
||||||
<mat-icon>add</mat-icon></button>
|
<mat-icon>add</mat-icon></button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
</div> <!-- chiude la form -->
|
||||||
|
|
||||||
<b>Form's Value:</b>
|
<b>Form's Value:</b>
|
||||||
{{ myForm.value | json }}
|
{{ myForm.value | json }}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||||
/* eslint-disable no-console */
|
/* eslint-disable no-console */
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { Component, Inject, OnInit } from '@angular/core';
|
import { Component, Inject, Input, OnInit } from '@angular/core';
|
||||||
import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
import { AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||||
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
||||||
import { IContextNode } from 'app/services/i-context-node';
|
import { IContextNode } from 'app/services/i-context-node';
|
||||||
|
|
@ -16,6 +16,7 @@ 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 { faAssistiveListeningSystems } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -37,39 +38,11 @@ export class FacetComposerComponent implements OnInit {
|
||||||
selectedOption: string;
|
selectedOption: string;
|
||||||
|
|
||||||
myForm: FormGroup; //form complessiva
|
myForm: FormGroup; //form complessiva
|
||||||
|
// relSelect: FormGroup<any>;
|
||||||
// facetData: IFacetComposer[];
|
// facetData: IFacetComposer[];
|
||||||
typeSpec: ITypeSpecification;
|
typeSpec: ITypeSpecification;
|
||||||
fieldsMap: Map<string, IFacetComposer>;
|
fieldsMap: Map<string, IFacetComposer>;
|
||||||
counterMap: Map<string, number>;
|
|
||||||
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
|
// eslint-disable-next-line @typescript-eslint/member-ordering
|
||||||
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
|
||||||
private dialogRef:MatDialogRef<FacetComposerComponent>,
|
private dialogRef:MatDialogRef<FacetComposerComponent>,
|
||||||
|
|
@ -79,53 +52,19 @@ export class FacetComposerComponent implements OnInit {
|
||||||
this.selectedOption = '';
|
this.selectedOption = '';
|
||||||
this.typeSpec = {} as ITypeSpecification;
|
this.typeSpec = {} as ITypeSpecification;
|
||||||
this.fieldsMap = new Map<string,IFacetComposer>();
|
this.fieldsMap = new Map<string,IFacetComposer>();
|
||||||
this.counterMap = new Map<string,number>();
|
this.myForm = this.fb.group({});
|
||||||
this.myForm = this.fb.group({
|
|
||||||
facets: new FormArray([
|
|
||||||
])
|
|
||||||
});
|
|
||||||
this.addableFacets = [];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
removeGroup(i: number) {
|
|
||||||
const control = <FormArray>this.myForm.controls['times'];
|
|
||||||
control.removeAt(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
|
||||||
this.typeSpec = 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 = new Map(res.facetSpecs.map((obj) => [obj.name+' ('+obj.relation+')', obj]));
|
|
||||||
//parto con una facet per tipo
|
//parto con una facet per tipo
|
||||||
this.counterMap = new Map(res.facetSpecs.map((obj) => [obj.name+'_'+obj.relation, 1]));
|
|
||||||
this.addableFacets = this.fillFacetSelect(this.fieldsMap);
|
|
||||||
this.createForm(res);
|
this.createForm(res);
|
||||||
console.debug('**************CounterMap****************');
|
|
||||||
console.debug(this.counterMap);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
onOptionsSelected(value:string): void {
|
onOptionsSelected(value:string): void {
|
||||||
this.selectedOption = value;
|
this.selectedOption = value;
|
||||||
//console.debug('******onOptionsSelected?...'+value);
|
//console.debug('******onOptionsSelected?...'+value);
|
||||||
|
|
@ -135,16 +74,68 @@ export class FacetComposerComponent implements OnInit {
|
||||||
createForm(fData:ITypeSpecification):void{
|
createForm(fData:ITypeSpecification):void{
|
||||||
for(let i=0; i<fData.facetSpecs.length; i++){
|
for(let i=0; i<fData.facetSpecs.length; i++){
|
||||||
const facetSpec = fData.facetSpecs[i];
|
const facetSpec = fData.facetSpecs[i];
|
||||||
this.createFacetGroup(facetSpec);
|
this.createFacetArrayEntry(facetSpec);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
createPropertyArray(prop: IFacetProps, propFa: FormArray):void{
|
|
||||||
let fc;
|
|
||||||
//const propFa: FormArray = this.fb.array([]);
|
|
||||||
const fg: FormGroup = this.fb.group({});
|
createFacetArrayEntry(item: IFacetComposer):void{
|
||||||
//const fc = new FormControl([prop.name])
|
const nameplus:string = item.name+'_'+item.relation;
|
||||||
if(prop.type==="date"){
|
const singleFacetArray: FormArray = this.fb.array([]);
|
||||||
|
singleFacetArray.push(this.createFacetGroup(item,false));
|
||||||
|
this.myForm.addControl(nameplus,singleFacetArray);
|
||||||
|
}
|
||||||
|
|
||||||
|
addFacet(deno:string): void {
|
||||||
|
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(deno);
|
||||||
|
//TODO CHECK THIS
|
||||||
|
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);
|
||||||
|
|
||||||
|
//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())
|
fc = this.fb.control(new Date())
|
||||||
}
|
}
|
||||||
if(prop.type==="number"){
|
if(prop.type==="number"){
|
||||||
|
|
@ -166,159 +157,35 @@ export class FacetComposerComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
|
facetFg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
|
||||||
propFa.push(fg);
|
}
|
||||||
//return propFa;
|
return facetFg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getSingleFacetArray(nameplus:string): FormArray {
|
||||||
|
return this.myForm.controls[nameplus] as FormArray;
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
const counterFc = this.fb.control(1);
|
|
||||||
// alert(this.counterMap.get('counter_'+nameFc.value+'_'+relationFc.value));
|
|
||||||
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
|
|
||||||
facetFg.addControl('counter_'+nameFc.value+'_'+relationFc.value, counterFc);
|
|
||||||
|
|
||||||
//1. creo formArray con le properties
|
|
||||||
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);
|
|
||||||
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() {
|
onSubmit() {
|
||||||
if (this.myForm.valid) {
|
if (this.myForm.valid) {
|
||||||
const formData = this.myForm.value;
|
const formData = this.myForm.value;
|
||||||
console.log("***** FORMDATA *****");
|
// console.log("***** FORMDATA *****");
|
||||||
console.log(formData);
|
//console.log(formData);
|
||||||
// Process formData
|
//TODO Process formData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
resetForm() {
|
resetForm() {
|
||||||
this.myForm.reset();
|
this.myForm.reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
private addFacetGroup(): FormGroup {
|
|
||||||
|
|
||||||
return this.fb.group({
|
|
||||||
relation: {},
|
|
||||||
properties: this.fb.array([])
|
|
||||||
});
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
addFacet(nameplus:string): void {
|
|
||||||
nameplus.replace(' (','_').replace(')','');
|
|
||||||
alert('replaced...'+nameplus);
|
|
||||||
//ATTENZIONE: nameplus contiene SPAZIO E PARENTESI
|
|
||||||
const icf: IFacetComposer = <IFacetComposer>this.fieldsMap.get(nameplus);
|
|
||||||
//TODO CHECK THIS
|
|
||||||
this.typeSpec.facetSpecs.push(icf);
|
|
||||||
|
|
||||||
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 newCounter = (this.counterMap.get(nameplus)!)+1;
|
|
||||||
//alert('addFacet...nameplus...'+nameplus);
|
|
||||||
// alert('addFacet...'+this.counterMap.get(nameplus));
|
|
||||||
this.counterMap.set(icf.name+'_'+icf.relation,newCounter);
|
|
||||||
const counterFc = this.fb.control(this.counterMap.get(nameplus));
|
|
||||||
facetFg.addControl('counter_'+icf.name+'_'+icf.relation,counterFc);
|
|
||||||
facetFg.patchValue;
|
|
||||||
|
|
||||||
const descriptionFc = this.fb.control(icf.description);
|
|
||||||
facetFg.addControl('description', descriptionFc);
|
|
||||||
|
|
||||||
//aggiorno il counter
|
|
||||||
let oldCounter = this.counterMap.get(icf.name+'_'+icf.relation)!;
|
|
||||||
this.counterMap.set(icf.name+'_'+icf.relation,oldCounter++);
|
|
||||||
|
|
||||||
const relationFc = this.fb.control(icf.relation,Validators.required);
|
|
||||||
facetFg.addControl('relation', relationFc);
|
|
||||||
|
|
||||||
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 {
|
removeFacet(deno:string, index: number): void {
|
||||||
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
|
this.getSingleFacetArray(deno).removeAt(index);
|
||||||
const nameplus = this.facetArray.at(index).get('name')?.value+'_'+this.facetArray.at(index).get('relation')?.value;
|
|
||||||
const newCounter = this.counterMap.get(nameplus)!-1;
|
|
||||||
this.counterMap.set(nameplus,newCounter);
|
|
||||||
//modifico il formcontrol
|
|
||||||
console.log("*********WHEN REMOVING...")
|
|
||||||
console.debug(nameplus);
|
|
||||||
console.log("*********")
|
|
||||||
|
|
||||||
this.facetArray.get('counter_'+nameplus)?.setValue(newCounter);
|
|
||||||
this.facetArray.at(index).get('counter_'+nameplus)?.patchValue;
|
|
||||||
|
|
||||||
const controls: FormArray = <FormArray>this.myForm.controls['facets'];
|
|
||||||
|
|
||||||
controls.removeAt(index);
|
|
||||||
this.facetArray.removeAt(index);
|
|
||||||
this.typeSpec.facetSpecs.splice(index,1);
|
this.typeSpec.facetSpecs.splice(index,1);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
deleteProperty(ind:number,i:number): void {
|
|
||||||
this.getPropertiesArray(ind).removeAt(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
addNewProperty(ind:number): void {
|
|
||||||
// alert('add prop!');
|
|
||||||
}
|
|
||||||
|
|
||||||
close():void {
|
close():void {
|
||||||
this.resetForm();
|
this.resetForm();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue