work in progress...

angular.json

@@ -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": {

package-lock.json

@@ -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",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "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",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "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",

package.json

@@ -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",

src/main/java/org/gcube/informationsystem/service/InformationSystemService.java

@@ -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);

src/main/java/org/gcube/informationsystem/service/dto/FacetPropertyDTO.java

@@ -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()) {

src/main/java/org/gcube/informationsystem/web/rest/InformationSystemResource.java

@@ -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")

src/main/webapp/app/facet-composer/facet-composer.component.html

@@ -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-title>
+							</mat-expansion-panel-header>
-								   	 <mat-panel-description>
+								  <div style="border: 1px solid rgb(202, 202, 202); padding: 10px; margin: 5px;">
-								        {{typeSpec.facetSpecs[ind].name}}
+									 <p>{{typeSpec.facetSpecs[ind].description}}</p> 
-								      </mat-panel-description>
+								  </div>
-								  </mat-expansion-panel-header>
+								  <mat-form-field>
-								  <p>{{typeSpec.facetSpecs[ind].description}}</p>
+									  <!--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 [formGroupName] ="i" *ngFor="let y of getPropertiesArray(ind).controls; let i=index;">
-											<div>{{ind}}-{{i}} ({{typeSpec.facetSpecs[ind].guiProps[i].type}})</div>
+											<mat-form-field>
-											    <label for="{{typeSpec.facetSpecs[ind].guiProps[i].name}}">{{typeSpec.facetSpecs[ind].guiProps[i].label}}</label>
+											    <mat-label>{{typeSpec.facetSpecs[ind].guiProps[i].label}}</mat-label>
-												<input 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>
 										</div>
 									</div>
-									
+  			      </mat-expansion-panel>
-					</mat-expansion-panel>
+  			   </div>
-				 </div>
+  			   </div>
-  			</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-->

src/main/webapp/app/facet-composer/facet-composer.component.ts

@@ -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

src/main/webapp/app/facet-composer/facet-composer.service.ts

@@ -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});
+	  }
+	   
 }

src/main/webapp/app/form-composer/form-composer.component.ts

@@ -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);
   }