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

work in progress...

This commit is contained in:
Maria Teresa Paratore 2024-03-13 18:01:47 +01:00
parent 4b415d63c4
commit 835a116b5e
10 changed files with 122 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular.json
View File

@ -37,7 +37,7 @@
"src/main/webapp/assets"
],
"styles": ["src/main/webapp/content/scss/vendor.scss", "src/main/webapp/content/scss/global.scss"],
"scripts": []
"scripts": [ "node_modules/jsonpath-plus/src/jsonpath.js"]
},
"configurations": {
"production": {

30
package-lock.json generated
View File

@ -33,6 +33,7 @@
"bootstrap-icons": "^1.11.1",
"cytoscape": "3.25.0",
"dayjs": "1.11.5",
"jsonpath-plus": "^8.1.0",
"mat-select-filter": "^2.4.1",
"material-icons-font": "^2.1.0",
"mdb-angular-ui-kit": "^3.0.1",
@ -14504,9 +14505,9 @@
}
},
"node_modules/ip": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
"integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
"dev": true
},
"node_modules/ipaddr.js": {
@ -17023,6 +17024,18 @@
"node >= 0.2.0"
]
},
"node_modules/jsonpath-plus": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-8.1.0.tgz",
"integrity": "sha512-qVTiuKztFGw0dGhYi3WNqvddx3/SHtyDT0xJaeyz4uP0d1tkpG+0y5uYQ4OcIo1TLAz3PE/qDOW9F0uDt3+CTw==",
"bin": {
"jsonpath": "bin/jsonpath-cli.js",
"jsonpath-plus": "bin/jsonpath-cli.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/jsprim": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
@ -36746,9 +36759,9 @@
"dev": true
},
"ip": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
"integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
"integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
"dev": true
},
"ipaddr.js": {
@ -38632,6 +38645,11 @@
"integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
"dev": true
},
"jsonpath-plus": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-8.1.0.tgz",
"integrity": "sha512-qVTiuKztFGw0dGhYi3WNqvddx3/SHtyDT0xJaeyz4uP0d1tkpG+0y5uYQ4OcIo1TLAz3PE/qDOW9F0uDt3+CTw=="
},
"jsprim": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",

1
package.json
View File

@ -97,6 +97,7 @@
"bootstrap-icons": "^1.11.1",
"cytoscape": "3.25.0",
"dayjs": "1.11.5",
"jsonpath-plus": "^8.1.0",
"mat-select-filter": "^2.4.1",
"material-icons-font": "^2.1.0",
"mdb-angular-ui-kit": "^3.0.1",

6
src/main/java/org/gcube/informationsystem/service/InformationSystemService.java
View File

@ -168,7 +168,11 @@ public class InformationSystemService {
return dto;
}
/*
//questa ritorna anche le facet figlie che possono essere usate nella select per il campo relation
//in caso si parta da zero si sceglie ConsistsOf
//String jsonResult = resourceRegistryClient.getType("IsIdentifiedBy", true);
*/
public String getResourceTypeJson(String typeName) throws Exception {
String currentCtx = SecretManagerProvider.instance.get().getContext();
ResourceRegistryClient resourceRegistryClient= ResourceRegistryClientFactory.create(currentCtx);

1
src/main/java/org/gcube/informationsystem/service/dto/FacetPropertyDTO.java
View File

@ -79,6 +79,7 @@ public class FacetPropertyDTO {
prop.setName(this.getName());
prop.setLabel(StringUtils.capitalize(this.getName()));
prop.setValue("");
prop.setPattern(this.getRegexp());
String tmp = "text";
switch(this.getPropertyType()) {

19
src/main/java/org/gcube/informationsystem/web/rest/InformationSystemResource.java
View File

@ -164,26 +164,7 @@ public class InformationSystemResource {
}
}
/*
@GetMapping("/facetspecification")
// e.g. http://localhost:8081/api/is/resourcetype?typeName=HostingNode
public ResponseEntity<String> facetSpecification(@RequestParam String facetName,@RequestParam @Nullable String currentContext) {
try {
informationSystemService.setUma(createUmaToken(currentContext));
FacetSpecDTO dto = informationSystemService.getFacetSpecification(facetName);
ObjectMapper objectMapper = new ObjectMapper();
String sc = objectMapper.writeValueAsString(dto);
return ResponseEntity.ok().body(sc);
} catch (Exception e) {
e.printStackTrace();
log.error("****ERROR*************");
log.error(e.getMessage(), e);
return ResponseEntity.noContent()
.headers(HeaderUtil.createAlert(applicationName, e.getMessage(), "ERRORE")).build();
}
}
*/
@GetMapping("/resourcetypejson")

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

@ -22,36 +22,56 @@
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{typeSpec.facetSpecs[ind].name}}
<!--TODO: vedi quando si possono rendere editabili le relazioni-->
<input formControlName="relation" type="text" value="{{typeSpec.facetSpecs[ind].relation}}" />
</mat-panel-title>
<mat-panel-description>
{{typeSpec.facetSpecs[ind].name}}
</mat-panel-description>
</mat-expansion-panel-header>
<p>{{typeSpec.facetSpecs[ind].description}}</p>
</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 placeholder="relation" formControlName="relation">
<mat-option *ngFor="let item of relationOptions(typeSpec.facetSpecs[ind].relation)" [value]="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 [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;" style="border: 1px solid rgb(255, 167, 248); padding: 5px; margin: 2px;">
<div>{{ind}}-{{i}} ({{typeSpec.facetSpecs[ind].guiProps[i].type}})</div>
<label for="{{typeSpec.facetSpecs[ind].guiProps[i].name}}">{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
<input formControlName="{{typeSpec.facetSpecs[ind].guiProps[i].name}}" id="{{typeSpec.facetSpecs[ind].guiProps[i].name}}"
<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}}"
type="{{typeSpec.facetSpecs[ind].guiProps[i].type}}"/>
</mat-form-field>
</div>
</div>
</mat-expansion-panel>
</div>
</div>
</div>
</mat-expansion-panel>
</div>
</div>
</div>
<!-- <button mat-button (click)="doAction()">Save Form</button> -->
<!--</form>-->
<!--fine form esterna-->
</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-->

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

@ -13,6 +13,7 @@ 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 {JSONPath} from 'jsonpath-plus'
@ -55,14 +56,34 @@ export class FacetComposerComponent implements OnInit {
*/
}
/*
[INFO] An unhandled exception occurred: Script file node_modules/jsonpath-plus/dist/index-umd.js does not exist.
[INFO] See "/private/var/folders/sx/pzmn6csj17n2l3d_f1m5jmdr0000gn/T/ng-8XFcFL/angular-errors.log" for further details.
*/
ngOnInit(): void {
this.guiService.getFormStructure(this.titlePath,this.titleType).subscribe(res => {
this.typeSpec = res;
this.createForm(res);
});
this.relationOptions('ConsistsOf');
}
relationOptions(relationName:string): void{
let options : string[];
this.guiService.getRelationOptions(this.titlePath, relationName).subscribe(res => {
/*
this.City = values.json() as string[];
this.var1 = this.City[0];
this.var2 = this.City[1];
*/
const result = JSONPath({path: '$[*].name', json: res});
console.debug('******* OGGETTI *******');
console.debug(result);
console.debug('******* ******* *******');
})
}
//TODO: NOTA BENE--> FormGroup->access by NAME, FormArray->access by INDEX!!
createForm(facetData:ITypeSpecification):void{
@ -137,7 +158,23 @@ export class FacetComposerComponent implements OnInit {
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 {
@ -163,6 +200,7 @@ export class FacetComposerComponent implements OnInit {
*/
close():void {
this.resetForm();
this.dialogRef.close({event:'cancel'});
}
//chiude e basta

8
src/main/webapp/app/facet-composer/facet-composer.service.ts
View File

@ -4,7 +4,6 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { ApplicationConfigService } from 'app/core/config/application-config.service';
import { IFacetComposer } from './i-facet-composer';
export interface ITypeSpecification{
name:string, //nome tipo
description:string; //descrizione tipo
@ -32,4 +31,11 @@ export class FacetComposerService {
return this.http.get<ITypeSpecification>(serviceUrl,{params:queryParams});
}
getRelationOptions(ctxPath:string, type:string): Observable<string> {
const serviceUrl = this.applicationConfigService.getEndpointFor('api/is/resourcetypejson');
let queryParams = new HttpParams();
queryParams = queryParams.append("typeName",type).append("currentContext",ctxPath);
return this.http.get<string>(serviceUrl,{params:queryParams});
}
}

8
src/main/webapp/app/form-composer/form-composer.component.ts
View File

@ -33,13 +33,14 @@ export class FormComposerComponent implements OnInit{
priority: null,
};
get itemsArray() {
return <FormArray>this.toDoListForm.get('items');
}
ngOnInit(): void {
this.toDoListForm = this.fb.group({
items: this.fb.array([]),
items: this.fb.array([]), //array di formControls
});
this.itemsList = this.serv.getMyData();
this.displayItems();
@ -60,11 +61,12 @@ export class FormComposerComponent implements OnInit{
displayItems() {
const transformedItems = this.itemsList.map((item: any) =>
this.createItem(item)
this.createItem(item) // per ogni item JSON costruisce un FormGroup
);
console.log(transformedItems);
this.toDoListForm.setControl('items', this.fb.array(transformedItems));
this.toDoListForm.setControl('items', this.fb.array(transformedItems)) //assegno un formArray di FormGroup;
}
deleteItem(i: number) {
this.itemsArray.removeAt(i);
}