fixing html and javascript features

src/main/webapp/app/home/home.component.html

@@ -25,7 +25,7 @@
 		  </div>
 			
 			<div class="col-md-9">
-				<h2 #titleRoot *ngIf="allCtxs && allCtxs.length!==0" class="pt-3">Root Context: {{[allCtxs[0].path]}} - UUID: {{allCtxs[0].id}}</h2>
+				<!-- <h2 #titleRoot *ngIf="allCtxs && allCtxs.length!==0" class="pt-3">Root Context: {{[allCtxs[0].path]}} - UUID: {{allCtxs[0].id}}</h2> -->
 			<div>
 				<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" ></div>
 				 <form [formGroup]="chooseContextForm">
@@ -33,13 +33,16 @@
 						 
 					<mat-form-field id="pathfield"  [style.width.px]="400" class="form-field">
 						
-						<mat-select placeholder="Available Contexts" formControlName="pathfield">
+						<mat-select placeholder="Available 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>
+						<button mat-button (click)="copyPath(pathfield)" color="primary" matTooltip="copy path" matTooltipPosition="below">
+							<mat-icon class="icon-wide2">content_copy</mat-icon>
+						</button>
 					 </div>
 					 
 						<mat-form-field id="namefield" [style.width.px]=400 appearance="outline" class="form-field">
@@ -53,25 +56,22 @@
 							<input matInput type="text" placeholder="UUID" 
 							formControlName="uidfield" readonly [value]="pathfield.value.id" />
 						</mat-form-field>
-						
-						
 						<button mat-button (click)="copyUid(pathfield)" color="primary" matTooltip="copy UUID" matTooltipPosition="below">
 							<mat-icon class="icon-wide2">content_copy</mat-icon>
 						</button>
 						<button mat-button  color="primary" matTooltip="locate" matTooltipPosition="below">
 								<mat-icon class="icon-wide2">location_searching</mat-icon>
 						</button>
-				</form>
+						
-								 
+					</form>
-								 
+						  <div [ngSwitch]="resType" class="mt-3">
-						  <div [ngSwitch]="resType">
 							<div *ngSwitchCase = "'HostingNode'">
-								<jhi-table-screen [resourceType]="resType"></jhi-table-screen>
+								<jhi-table-screen [resourceType]="resType" [currentCtx]="myContext"></jhi-table-screen>
 							</div>
 							<div *ngSwitchCase = "'EService'">
-								<jhi-table-screen-es [resourceType]="resType"></jhi-table-screen-es>
+								<jhi-table-screen-es [resourceType]="resType" [currentCtx]="myContext"></jhi-table-screen-es>
 							</div>
-						  	<div *ngSwitchDefault>Please navigate the resource type tree and select one</div>
+						  	<div *ngSwitchDefault>Qui mettere Tipo e bottone per aggiungere</div>
 						  </div>
 					</div>
 				</div>

src/main/webapp/app/home/home.component.ts

@@ -5,17 +5,16 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-import { Component, OnDestroy, OnInit, ViewChild,ElementRef, AfterContentInit, AfterViewInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
-
 import { LoginService } from 'app/login/login.service';
 import { AccountService } from 'app/core/auth/account.service';
 import { Account } from 'app/core/auth/account.model';
-import { FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Observable, Subject, Subscription, delay, map, startWith, takeUntil } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { ContextsLoaderService } from 'app/services/contexts-loader.service';
 import { IContextNode } from 'app/services/i-context-node';
-import { AutofillValidator, instanceOfContext } from './autofill-validator';
+import { AutofillValidator } from './autofill-validator';
 import { SpinnerLoadingService } from 'app/services/spinner-loading.service';
 
 
@@ -27,21 +26,19 @@ import { SpinnerLoadingService } from 'app/services/spinner-loading.service';
 })
 
 export class HomeComponent implements OnInit, OnDestroy {
+
 	account: Account | null = null;
-	myContext: IContextNode | null = null;
+	myContext: IContextNode;
-	//stringCtxs: string[];
 	allCtxs: IContextNode[] | null = null;
 	filteredContexts: IContextNode[] | null = null;
-  	//public filteredContexts: Observable<IContextNode[]> | null = null;
-  //public filteredContextsStr: Observable<string[]>| undefined;
   	chooseContextForm: FormGroup | any;
   	resType: string;
   	isLoading: boolean = false;
   	subscriptions: Subscription[] = [];
   	
+  	//@Output() public contextPathEm = new EventEmitter<string>();
+  	
   	
- 	//@ViewChild('leftTree') leftTree: ElementRef | undefined;
-	
 	constructor(
 		private accountService: AccountService, 
 		private loginService: LoginService,
@@ -52,6 +49,8 @@ export class HomeComponent implements OnInit, OnDestroy {
 			//initialise on HostingNodes
 		this.resType="HostingNode";
 		this.allCtxs = [];
+		this.myContext = {} as IContextNode;
+		
   		}
   		
   	  get pathfield(): any {
@@ -78,13 +77,14 @@ export class HomeComponent implements OnInit, OnDestroy {
 			});
 				
 				
-		    // per la form dei contesti
+		    //for the contexts form
 			this.ctxLoaderService.fetchAll().subscribe(res => {
 		      this.allCtxs = res;
 		      this.filteredContexts = this.allCtxs.slice();
+		      //initialize to root
+		      this.myContext = this.allCtxs[0];
 		    });
 		    
-				
 		   	this.subscriptions.push(this.progressService.getState()
 			.pipe()
 		      .subscribe(res => {
@@ -93,37 +93,15 @@ export class HomeComponent implements OnInit, OnDestroy {
 		      
 	}
 	/*
-	ngAfterViewInit(): void {
+	reloadResourceTable():void {
-		
+		//alert('reloading');
-	
+		this.contextPathEm.emit(this.myContext.path);
-		
+	}*/
-	    this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe(  
-						startWith(''),
-			      		map(ctx => (ctx ? this.filterContexts(ctx) : this.allCtxs.slice()))
-			    	);
-	}
-	*/
-	
 	
 		ngOnDestroy(): void {
 			//alert(this.subscriptions.length);
  			this.subscriptions.forEach(sub => sub.unsubscribe());
 	}
- 
-	//mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!!
-	/*
-	filterContexts( item: any): IContextNode[] {
-		alert('filtering!');
-		if(!instanceOfContext(item)){
-			return this.allCtxs.filter(ctx => ctx.name.toLowerCase().includes(item.toLowerCase()));
-		}else{
-			return [];
-		}
-  }*/
-
-  displayFn(ctx: IContextNode): string {
-    return ctx.path;
-  }
 
 
   copyUid(val: any): void {
@@ -135,12 +113,26 @@ export class HomeComponent implements OnInit, OnDestroy {
     }
   }
   
+  copyPath(val: any): void {
+    if (val instanceof FormControl) {
+      this.clipboard.copy(val.getRawValue().path);
+    } else {
+      //this.clipboard.copy('invalid value');
+      this.clipboard.copy('invalid value');
+    }
+  }
+  
 	login(): void {
 		this.loginService.login();
 	}
 	
 	buildTableData(newType:string):void{
 		this.resType = newType;
-		console.log("++++++resType..."+this.resType);
+	}
+	
+	
+	setNewContext(newCtx: IContextNode): void {
+		//this.contextEm.emit(ctx);
+		this.myContext = newCtx
 	}
 }

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -142,8 +142,12 @@
 						data-cy="accountMenu">
 						<span *ngIf="!account?.imageUrl">
 							<fa-icon icon="user"></fa-icon>
-							<span jhiTranslate="global.menu.account.main">Account</span>
+							<span>Account bla</span>
 						</span>
+					<!--	
+						<div [ngSwitch]="account !== null">
+		<div *ngSwitchCase="true">
+			-->
 						<span *ngIf="account?.imageUrl">
 							<img [src]="account!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
 						</span>
@@ -152,7 +156,7 @@
 						<li *ngSwitchCase="true">
 							<a class="dropdown-item" (click)="logout()" id="logout" data-cy="logout">
 								<fa-icon icon="sign-out-alt" [fixedWidth]="true"></fa-icon>
-								<span jhiTranslate="global.menu.account.logout">Sign out</span>
+								<span>Sign out</span>
 							</a>
 						</li>
 						<li *ngSwitchCase="false">

src/main/webapp/app/rsc-tree/rsc-tree.component.html

@@ -12,7 +12,6 @@
             {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
           </mat-icon>
         </button>
-        
         <button mat-button  (click)="onClickNodeTree(node)">
      		 {{ node.name }}
         </button>

src/main/webapp/app/rsc-tree/rsc-tree.component.ts

@@ -40,12 +40,13 @@ hasNestedChild(_: number, node: IResource): boolean {
     }
   }
 
-  //TODO: InformationSystemResourceClient shoud pass a code, not a name! 
+  //TODO: InformationSystemResourceClient should pass a code, not a name (API feature request)! 
 	onClickNodeTree(node:IResource):void{
-		//this.setActiveClass();
 		this.resourceTypeEm.emit(node.name);
 	}
 	
+	
+	
  setActiveClass():void{
     this.statusClass = 'active';
   }

src/main/webapp/app/services/resources-impl.service.ts

@@ -25,10 +25,10 @@ export class ResourcesImplService {
 	 }
   
   //TODO: paginate when APIs are ready
-	fetchResourceImpls(ctx:string, type:string): Observable<any[]> {
+	fetchResourceImpls(ctxPath:string, type:string): Observable<any[]> {
 			const resourceUrl = this.applicationConfigService.getEndpointFor('api/is/resourceinstances');
 			let queryParams = new HttpParams();
-			queryParams = queryParams.append("currentContext",ctx).append("resourceType",type);
+			queryParams = queryParams.append("currentContext",ctxPath).append("resourceType",type);
 			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 			if(type==='HostingNode'){
 				//console.debug("******GETTING HOSTING NODE*****");

src/main/webapp/app/table-screen-es/table-screen-es.component.html

@@ -1,7 +1,10 @@
 <div class="p-3">
 	<div class="d-flex flex-row">
-		<h1>Type: {{resourceType}}</h1>
+		<h4 class="my-3 font-weight-bold">Type: {{resourceType}}</h4>
 		 <div id="btn-group" class="col-md-3 mx-5 mt-2">
+		 	<button mat-raised-button color="primary" (click)="reloadTable()" >
+				<mat-icon>replay</mat-icon><span>Reload</span>
+			</button>
 			<button mat-raised-button color="primary" (click)="openDialogAdd()"><mat-icon>add</mat-icon><span>Add new</span></button>
 		</div>
 	</div>

src/main/webapp/app/table-screen-es/table-screen-es.component.ts

@@ -32,7 +32,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
   providers: [ResourcesImplService],
 })
 
-export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges {
+export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges{
   //NB 'actions' CI DEVE ESSERE, altrimenti la tabella non viene visualizzata
   //displayedColumns: string[] = ['name', 'id', 'status', 'lastMod', 'artifact', 'group', 'version', 'endpoint','actions'];
   displayedColumns: string[] = ['name', 'id', 'status', 'lastMod',  'endpoint','actions'];
@@ -41,7 +41,7 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges
   tableDetail: IEService;
   dialogRef: MatDialogRef<ResourceAddComponent> |undefined;
 
-  @Input() myCtx: IContextNode; //fetching event from parent
+  @Input() currentCtx: IContextNode; //fetching event from parent
   @Input() resourceType: string; 
   @Output() jsonEmitter = new EventEmitter<IEService>();
   @ViewChild(MatSort) sort: MatSort;
@@ -60,7 +60,7 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges
   
   
   constructor(private myDataService: ResourcesImplService, private myDialog: MatDialog) {
-    this.myCtx = {} as IContextNode;
+    this.currentCtx = {} as IContextNode;
     this.tableDetail = {} as IEService;
     this.dataFromService = [];
     this.sort = new MatSort();
@@ -75,51 +75,27 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges
   }
   
   ngOnInit(): void {
-    this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => {
+	  
+	    let ctxPath = '';
+	  	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+	  	if(this.currentCtx.path !== undefined){
+			  ctxPath = this.currentCtx.path;
+			  }
+			  
+	this.myDataService.fetchResourceImpls(ctxPath,this.resourceType).subscribe(res => {
       this.dataFromService = res;
       this.dataSource.data = res;
-      //this is to filter only on the 'name' property
-      this.dataSource.filterPredicate = function (record:any,filter:string) {
-       		return record.name.indexOf(filter)!==-1;
-  		}
-      //console.debug(res);
     });
   }
   
-    ngOnChanges(changes: SimpleChanges): void {
+ 
-    //  console.log('---NELLA ONCHANGES...' + this.myCtx.name);
-    for (const propName in changes) {
-      if (propName === 'myCtx') {
-        const param = changes[propName];
-        //TODO: questo è un tipo
-        this.myCtx = <IContextNode>param.currentValue;
-        //controllo che l'oggetto non sia vuoto
-        if (Object.keys(this.myCtx).length !== 0) {
-          //mt qui va passato il parametro ResourceType (preso dall'albero) al rest
-          this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => {
-            this.dataFromService = res;
-            this.dataSource.data = res;
-          });
-        }
-      }
-    }
-  }
-  
    applyFilter(event: Event): void {
     const filterValue = (event.target as HTMLInputElement).value;
     console.debug("++++++DATASOURCE:");
     console.debug(this.dataSource);
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
-  /*
+ 
- filterTable(): void {
-    this.dataSource.filterPredicate = (data: IEService, filter: string): boolean => {
-      return (
-        data.name.toLocaleLowerCase().includes(filter)
-      )
-    }
-  }
-  */
 
  // per tabbed pane (versione con aggiunta dinamica)
 
@@ -161,16 +137,41 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges
   }
   
     openDialogAdd(): void {
-	// alert('contesto...'+this.myCtx.name);
+	// alert('contesto...'+this.currentCtx.name);
     this.dialogRef = this.myDialog.open(ResourceAddComponent, {
 		//TODO: passare tipo e contesto
-      data: {type: this.resourceType, context: this.myCtx},
+      data: {type: this.resourceType, context: this.currentCtx},
     });
 
+
     this.dialogRef.afterClosed().subscribe(result => {
       console.log('The dialog was closed');
       this.dummyRes = result;
     });
   }
   
+  	reloadTable():void{
+		this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => {
+            this.dataFromService = res;
+            this.dataSource.data = res;
+          })
+	}
+	
+	
+   ngOnChanges(changes: SimpleChanges): void {
+    for (const propName in changes) {
+      if (propName === 'currentCtx') {
+        const param = changes[propName];
+        this.currentCtx = <IContextNode>param.currentValue;
+        //controllo che l'oggetto non sia vuoto
+        if (Object.keys(this.currentCtx).length !== 0) {
+          this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => {
+            this.dataFromService = res;
+            this.dataSource.data = res;
+          });
+        }
+      }
+    }
+  }
+  
 }

src/main/webapp/app/table-screen/table-screen.component.html

@@ -1,16 +1,20 @@
 <div class="p-3">
-	<div class="d-flex flex-row">
+	
-	<h1>Type: {{resourceType}}</h1>
+	<!--<h4>Type: {{resourceType}} ({{currentCtx.name}})</h4>-->
-	 <div id="btn-group" class="col-md-3 mx-5 mt-2">
+	<h4 class="my-3 font-weight-bold" >Type: {{resourceType}}</h4>
-		<button mat-raised-button color="primary" (click)="openDialogAdd()"><mat-icon>add</mat-icon><span>Add new</span></button>
+	
-	</div>
+ <div class="d-flex flex-row my-2">
-	</div>
+  <mat-form-field>
- 
-  <mat-form-field class="my-3">
 	   <mat-label>Search by Name</mat-label>
     	<input matInput (keyup)="applyFilter($event)" placeholder="type in..." #input />
   </mat-form-field>
-  
+  <div id="btn-group" class="col-md-3 mx-5 mt-2">
+		 <button mat-raised-button color="primary" (click)="reloadTable()" >
+			<mat-icon>replay</mat-icon><span>Reload</span>
+		</button>
+		<button mat-raised-button color="primary" (click)="openDialogAdd()"><mat-icon>add</mat-icon><span>Add new</span></button>
+	</div>
+</div>
 
   <div class="mat-elevation-z4">
     <table mat-table [dataSource]="dataSource" matSort>

src/main/webapp/app/table-screen/table-screen.component.ts

@@ -1,4 +1,7 @@
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable no-console */
+
 import {
   Component,
   Output,
@@ -6,10 +9,10 @@ import {
   OnInit,
   ViewChild,
   AfterViewInit,
-  OnChanges,
-  SimpleChanges,
   Input,
   QueryList,
+  OnChanges,
+  SimpleChanges,
 } from '@angular/core';
 
 import { MatTableDataSource } from '@angular/material/table';
@@ -40,7 +43,8 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   tableDetail: IHostingNode;
   dialogRef: MatDialogRef<ResourceAddComponent> |undefined;
   
-  @Input() myCtx: IContextNode; //fetching event from parent
+  @Input() currentCtx: IContextNode; //fetching event from parent
+  @Input() currentCtxPath: string; //fetching event from parent
   @Input() resourceType: string; 
   @Output() jsonEmitter = new EventEmitter<IHostingNode>();
   @ViewChild(MatSort) sort: MatSort;
@@ -60,12 +64,13 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   ////////// fine tabbed view
 
   constructor(private myDataService: ResourcesImplService, private myDialog: MatDialog) {
-    this.myCtx = {} as IContextNode;
+    this.currentCtx = {} as IContextNode;
     this.tableDetail = {} as IHostingNode;
     this.dataFromService = [];
     this.sort = new MatSort();
     this.paginator = {} as MatPaginator;
     this.resourceType = '';
+    this.currentCtxPath = '';
     this.dummyRes = '';
   }
 
@@ -75,29 +80,35 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
   }
 
   ngOnInit(): void {
-    this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => {
+	  
+	  let ctxPath = '';
+	  	if(this.currentCtx.path !== undefined){
+			  ctxPath = this.currentCtx.path;
+			  }else if(this.currentCtxPath !== undefined){
+				   ctxPath = this.currentCtxPath
+			  }
+
+    this.myDataService.fetchResourceImpls(ctxPath,this.resourceType).subscribe(res => {
+	
       this.dataFromService = res;
       this.dataSource.data = res;
       //this is to filter only on the 'name' property
       this.dataSource.filterPredicate = function (record:any,filter:string) {
        		return record.name.indexOf(filter)!==-1;
   		}
-  		/*
-  		this.dataSource.filterPredicate =
-      		(data: IHostingNode, filter: string) => !filter || data.level == filter;
-      		*/
     });
   }
 
+
   ngOnChanges(changes: SimpleChanges): void {
-    //  console.log('---NELLA ONCHANGES...' + this.myCtx.name);
+      
     for (const propName in changes) {
-      if (propName === 'myCtx') {
+      if (propName === 'currentCtx') {
         const param = changes[propName];
-        this.myCtx = <IContextNode>param.currentValue;
+        this.currentCtx = <IContextNode>param.currentValue;
         //controllo che l'oggetto non sia vuoto
-        if (Object.keys(this.myCtx).length !== 0) {
+        if (Object.keys(this.currentCtx).length !== 0) {
-          this.myDataService.fetchResourceImpls('',this.resourceType).subscribe(res => {
+          this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => {
             this.dataFromService = res;
             this.dataSource.data = res;
           });
@@ -105,6 +116,7 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
       }
     }
   }
+  
 
   applyFilter(event: Event): void {
     const filterValue = (event.target as HTMLInputElement).value;
@@ -132,6 +144,13 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
     }
   }
 
+	reloadTable():void{
+		this.myDataService.fetchResourceImpls(this.currentCtx.path,this.resourceType).subscribe(res => {
+            this.dataFromService = res;
+            this.dataSource.data = res;
+          })
+	}
+	
   closeTab(index: number): void {
 	  /*
     console.debug('---------');
@@ -166,7 +185,7 @@ export class TableScreenComponent implements OnInit, AfterViewInit, OnChanges {
 	// alert('contesto...'+this.myCtx.name);
     this.dialogRef = this.myDialog.open(ResourceAddComponent, {
 		//TODO: passare tipo e contesto
-      data: {type: this.resourceType, context: this.myCtx},
+      data: {type: this.resourceType, context: this.currentCtx},
     });
 
     this.dialogRef.afterClosed().subscribe(result => {