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 -->
<mat-dialog-content>
@ -6,7 +6,7 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{typeSpec.name}}
<h2>{{typeSpec.name}}</h2>
</mat-panel-title>
<mat-panel-description>
<!--la descrizione è lunga e non posso metterla qua-->
@ -22,47 +22,39 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{typeSpec.facetSpecs[ind].name}}
<b>{{typeSpec.facetSpecs[ind].name}}</b>
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
</mat-panel-title>
</mat-expansion-panel-header>
<div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
<p>{{typeSpec.facetSpecs[ind].description}}</p>
</div>
<mat-form-field>
<!--TODO: trasforma in una select-->
<mat-label for="relation">relation</mat-label>
<input matInput formControlName="relation" id="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}"/>
<mat-select formControlName="relation">
<mat-form-field style="padding-top: 24px; padding-bottom: 24px;">
<mat-label for="relation" >relation</mat-label>
<mat-select formControlName="relation" value="typeSpec.facetSpecs[ind].relation" >
<mat-option *ngFor="let item of typeSpec.facetSpecs[ind].relationOptions" [value]="item">
{{item}}
</mat-option>
</mat-select>
</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 -->
<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;">
<mat-form-field>
<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}}"/>
</mat-form-field>
<button (click)="deleteProperty(ind,i)">Remove property</button>
</div>
</div>
<button (click)="addNewProperty(ind)">Add Property</button>
</mat-expansion-panel>
<!--TODO: che tipo di facet aggiungo??-->
<button (click)="addFacet()">Add Facet</button>
</div>
</div>
</div>
@ -70,9 +62,15 @@
<!-- <button mat-button (click)="doAction()">Save Form</button> -->
<!--</form>-->
<!--fine form esterna-->
<b>Form's Value:</b>
{{ myForm.value | json }}
<br />
<b>Form is Valid ? :</b>
{{ myForm.valid }}
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button type="submit">Submit</button>
<button mat-button (click)="close()">Cancel</button>
</mat-dialog-actions>
<!--fine form esterna-->

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

@ -38,6 +38,31 @@ export class FacetComposerComponent implements OnInit {
typeSpec: ITypeSpecification;
// 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
constructor(private guiService: FacetComposerService, private fb: FormBuilder,
@ -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
//crea propertyArray
createPropertyArray(item: IFacetProps[]):FormArray{
createPropertyArray(item: IFacetProps[]):FormArray{
let fc;
const propFa: FormArray = this.fb.array([]);
const fg: FormGroup = this.fb.group({});
@ -123,14 +177,14 @@ export class FacetComposerComponent implements OnInit {
}
}
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;
}
createFacetGroup(item: IFacetComposer):void{
const facetFg: FormGroup = this.fb.group({});
//const relationFc = new FormControl('relation',Validators.required);
@ -138,13 +192,15 @@ export class FacetComposerComponent implements OnInit {
facetFg.addControl('relation', relationFc);
//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
facetFg.addControl('properties',propertiesFa);
//TODO
this.facetArray.push(facetFg);
// console.debug('************ FACET-ARRAY Controls:')
// console.debug(this.facetArray.controls);
}
get facetArray(): FormArray {
@ -180,6 +236,9 @@ export class FacetComposerComponent implements OnInit {
properties: this.fb.array([])
});
}
//TODO: ADD DEFAULT FACET (usa json: defaultFacet)
addFacet(): void {
this.facetArray.push(this.addFacetGroup());
}
@ -190,11 +249,26 @@ export class FacetComposerComponent implements OnInit {
}
/*
addProperty(index:number): void {
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 {
/*
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 {
this.resetForm();
@ -203,29 +277,4 @@ export class FacetComposerComponent implements OnInit {
//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)
}
*/