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

adding/removing facets and properties

This commit is contained in:
Maria Teresa Paratore 2024-03-15 16:55:29 +01:00
parent 21a2e40495
commit 4445c493e9
2 changed files with 109 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<h2 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h2> <h3 mat-dialog-title>FacetComposer: New {{titleType}} ({{titlePath}})</h3>
<!-- myForm inizio form globale --> <!-- myForm inizio form globale -->
<mat-dialog-content> <mat-dialog-content>
@ -6,7 +6,7 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
{{typeSpec.name}} <h2>{{typeSpec.name}}</h2>
</mat-panel-title> </mat-panel-title>
<mat-panel-description> <mat-panel-description>
<!--la descrizione è lunga e non posso metterla qua--> <!--la descrizione è lunga e non posso metterla qua-->
@ -22,47 +22,39 @@
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
{{typeSpec.facetSpecs[ind].name}} <b>{{typeSpec.facetSpecs[ind].name}}</b>
<!--TODO: vedi quando si possono rendere editabili le relazioni--> <!--TODO: vedi quando si possono rendere editabili le relazioni-->
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<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;">
<p>{{typeSpec.facetSpecs[ind].description}}</p> <p>{{typeSpec.facetSpecs[ind].description}}</p>
</div> </div>
<mat-form-field> <mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
<!--TODO: trasforma in una select--> <mat-label for="relation" >relation</mat-label>
<mat-label for="relation">relation</mat-label> <mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" >
<input matInput formControlName="relation" id="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}"/>
<mat-select formControlName="relation">
<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item"> <mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item">
{{item}} {{item}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<!--
<mat-form-field id="pathfield" [style.width.px]="200" class="form-field">
<mat-select [(value)]="selected" placeholder="Contexts" formControlName="pathfield" (valueChange)="setNewContext($event)">
<mat-select-filter [placeholder]="'filter by name'" [displayMember]="'path'" [array]="allCtxs" (filteredReturn)="filteredContexts =$event"></mat-select-filter>
<mat-option *ngFor="let item of filteredContexts" [value]="item">
{{item.path}}
</mat-option>
</mat-select>
</mat-form-field>
-->
<!-- OK SO FAR --> <!-- OK SO FAR -->
<div formArrayName="properties" style="border: 1px solid rgb(84, 193, 255); padding: 10px; margin: 5px;"> <div formArrayName="properties" style="border: 1px solid rgb(140, 113, 181); padding: 10px; margin: 5px;">
<div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;"> <div [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;">
<mat-form-field> <mat-form-field>
<mat-label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label> <mat-label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label>
<input matInput formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" <input matInput formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}"
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/> type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
</mat-form-field> </mat-form-field>
<button (click)="deleteProperty(ind,i)">Remove property</button>
</div> </div>
</div> </div>
<button (click)="addNewProperty(ind)">Add Property</button>
</mat-expansion-panel> </mat-expansion-panel>
<!--TODO: che tipo di facet aggiungo??-->
<button (click)="addFacet()">Add Facet</button>
</div> </div>
</div> </div>
</div> </div>
@ -70,9 +62,15 @@
<!-- <button mat-button (click)="doAction()">Save Form</button> --> <!-- <button mat-button (click)="doAction()">Save Form</button> -->
<!--</form>--> <!--</form>-->
<!--fine form esterna--> <!--fine form esterna-->
<b>Form's Value:</b>
{{ myForm.value | json }}
<br />
<b>Form is Valid ? :</b>
{{ myForm.valid }}
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button type="submit">Submit</button> <button mat-button type="submit">Submit</button>
<button mat-button (click)="close()">Cancel</button> <button mat-button (click)="close()">Cancel</button>
</mat-dialog-actions> </mat-dialog-actions>
<!--fine form esterna-->

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

@ -39,6 +39,31 @@ export class FacetComposerComponent implements OnInit {
typeSpec: ITypeSpecification; typeSpec: ITypeSpecification;
// relationOptions: string[]|undefined; // relationOptions: string[]|undefined;
defaultProperty = {
"type": "text",
"label": "Custom property",
"name": "customProperty",
"value": "",
"validations": [],
"pattern": null,
"propDescription": "A custom property"
}
defaultFacet = {
"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>,
@ -89,11 +114,40 @@ export class FacetComposerComponent implements OnInit {
} }
} }
createPropertyArray2(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;
}
//https://stackoverflow.com/questions/74543979/is-it-possible-to-declare-an-empty-form-group-then-add-form-controls-afterwards createPropertyArray(item: IFacetProps[]):FormArray{
//crea propertyArray
createPropertyArray(item: IFacetProps[]):FormArray{
let fc; let fc;
const propFa: FormArray = this.fb.array([]); const propFa: FormArray = this.fb.array([]);
const fg: FormGroup = this.fb.group({}); const fg: FormGroup = this.fb.group({});
@ -123,14 +177,14 @@ export class FacetComposerComponent implements OnInit {
} }
} }
fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl); fg.addControl(prop.name,fc); //formGroup.addControl('controlName', formControl);
propFa.push(fg); // propFa.push(fg);
console.debug('*** propFa ***');
console.debug(propFa);
console.debug('****************');
} }
// console.debug('************ PROPERTIES-ARRAY: fg.controls:')
// console.debug(propFa.controls);
return propFa; return propFa;
} }
createFacetGroup(item: IFacetComposer):void{ createFacetGroup(item: IFacetComposer):void{
const facetFg: FormGroup = this.fb.group({}); const facetFg: FormGroup = this.fb.group({});
//const relationFc = new FormControl('relation',Validators.required); //const relationFc = new FormControl('relation',Validators.required);
@ -138,13 +192,15 @@ export class FacetComposerComponent implements OnInit {
facetFg.addControl('relation', relationFc); facetFg.addControl('relation', relationFc);
//1. creo formArray con le properties //1. creo formArray con le properties
const propertiesFa = this.createPropertyArray(item.guiProps); //const propertiesFa = this.createPropertyArray2(item.guiProps);
const propertiesFa = this.fb.array([]);
for(let j=0; j<item.guiProps.length; j++){
this.createPropertyArray2(item.guiProps[j],propertiesFa);
}
//2. aggiungo formarray delle properties ai controls per la facet //2. aggiungo formarray delle properties ai controls per la facet
facetFg.addControl('properties',propertiesFa); facetFg.addControl('properties',propertiesFa);
//TODO //TODO
this.facetArray.push(facetFg); this.facetArray.push(facetFg);
// console.debug('************ FACET-ARRAY Controls:')
// console.debug(this.facetArray.controls);
} }
get facetArray(): FormArray { get facetArray(): FormArray {
@ -180,6 +236,9 @@ export class FacetComposerComponent implements OnInit {
properties: this.fb.array([]) properties: this.fb.array([])
}); });
} }
//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
addFacet(): void { addFacet(): void {
this.facetArray.push(this.addFacetGroup()); this.facetArray.push(this.addFacetGroup());
} }
@ -190,11 +249,26 @@ export class FacetComposerComponent implements OnInit {
} }
/* deleteProperty(ind:number,i:number): void {
addProperty(index:number): void { this.getPropertiesArray(ind).removeAt(i);
/*
(<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup); (<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
*/
} }
addNewProperty(ind:number): void {
/*
const formGroup = this.createItem(this.defaultItem);
this.itemsArray.push(formGroup);
*/ */
//this.getPropertiesArray(ind).push();
alert('add prop!');
/*
(<FormArray>(<FormGroup>this.facetArray.controls[index]).controls.propertyArray).push(this.propertyGroup);
*/
}
close():void { close():void {
this.resetForm(); this.resetForm();
@ -203,29 +277,4 @@ export class FacetComposerComponent implements OnInit {
//chiude e basta //chiude e basta
} }
/*
addNewCompany() {
this.companiesFormArr.push(
this.fb.group({
company: [''],
projects: this.fb.array([])
})
);
}
deleteCompany(index: number) {
this.companiesFormArr.removeAt(index);
}
addNewProject(control) {
control.push(
this.fb.group({
projectName: ['']
}))
}
deleteProject(control, index) {
control.removeAt(index)
}
*/