Linked form with autocompletion to JHipster REST for fetching Contexts.

Consequently fixed Angular Material CSS.

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

@@ -34,32 +34,36 @@
 
 						</div>
 					<div>
-						<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" ></div>
-							
-					<div class="col-md-9 mt-2">
+					<div class="d-inline-block my-3" ngbDropdown #myDrop="ngbDropdown" ></div>
+						
+						
 						 <form [formGroup]="chooseContextForm">
 						    <mat-form-field appearance="outline" class="form-field">
-						      <mat-label for="namefield" class="ml-4 flex-grow-1">Context name</mat-label>
-						      <input matInput #contextInput (keyup)="(0)" [matAutocomplete]="auto" placeholder="Name" type="text" [formControl]="namefield" />
+						      <mat-label for="namefield" class="ml-4 ">Context name</mat-label>
+						      <input matInput  panel
+						      #contextInput (keyup)="(0)" 
+						      [matAutocomplete]="auto"  
+						      placeholder="Name" type="text"
+						      [formControl]="namefield" />
 						       <mat-error>{{ checkForErrorsIn(namefield) }}</mat-error>
-						        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
+						        <mat-autocomplete #auto="matAutocomplete" [panelWidth]=400
+						        [displayWith]="displayFn.bind(this)">
 						          <mat-option *ngFor="let fctx of filteredContexts | async" [value]="fctx">
-									  <!--<span>{{fctx}}</span> -->
 						            <span>{{ fctx.name }}</span>
 						            <small> | ID: {{ fctx.id }}</small>
-						           
 						          </mat-option>
 						        </mat-autocomplete>
 						      </mat-form-field>
-						      <mat-form-field appearance="outline" class="form-field">
+						      <mat-form-field id="uidfield" [style.width.px]=327 appearance="outline" class="form-field">
 						        <mat-label for="uidfield">Context UUID</mat-label>
-						        <input matInput id="uidfield" type="text" placeholder="UUID" formControlName="uidfield" readonly [value]="namefield.value.id" />
+						        <input matInput class="uid-input" type="text" placeholder="UUID" formControlName="uidfield" readonly [value]="namefield.value.id" />
 						      </mat-form-field>
 						      <button mat-button (click)="copyUid(namefield)" color="primary" matTooltip="copy UUID" matTooltipPosition="below">
 						        <mat-icon class="icon-wide2">content_copy</mat-icon>
 						      </button>
 						 </form>
-		  			</div>	
+						 
+						 
 		  			<div [ngSwitch]="resType">
 						  <div *ngSwitchCase = "'HostingNode'">
 							  <jhi-table-screen></jhi-table-screen>

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

@@ -21,3 +21,5 @@ Main page styles
     background-size: contain;
   }
 }
+
+

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

@@ -63,35 +63,26 @@ export class HomeComponent implements OnInit {
 	ngOnInit(): void {
 		//questo identifica l'utente e riempie il campo account
 		this.accountService.identity().subscribe(account => (this.account = account));
-		//contexts fetched from User
-		//this.stringCtxs = this.getContexts(); 
-		//console.debug("***stringCtxs..."+this.stringCtxs);
-		//contexts fetched from Service
-		this.ctxLoaderService.fetchContexts().subscribe(res => this.allCtxs = res);
-		console.debug("+++++allCtxs..."+this.allCtxs);
+		
+		  // per la form dei contesti
+	this.ctxLoaderService.fetchAll().subscribe(res => {
+      this.allCtxs = res;
+     // console.log('*******numero contesti...', this.allCtxs);
+    });
+		console.debug("+++++allCtxs..."+this.allCtxs.toString);
 		this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe(  
 			startWith(''),
       		map(ctx => (ctx ? this.filterContexts(ctx) : this.allCtxs.slice()))
     	);
 	}
 	
-  //mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!!
-  filterContexts(name: any): IContextNode[] {
-    return this.allCtxs.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
+	//mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!!
+	filterContexts(name: any): IContextNode[] {
+		//console.log("in filterContext...(name)..."+name);
+    	return this.allCtxs.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
   }
   
-  //TEMPORANEO: CTX E' TEMPORANEAMENTE UNA STRINGA (NON A REGIME)
-  /*
-    filterContexts(name: any): string[] {
-    return this.stringCtxs.filter(ctx => ctx.toLowerCase().includes(name.toLowerCase()));
-  }
-*/
-		/*
-    this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe(
-      startWith(''),
-      map(ctx => (ctx ? this.filterContexts(ctx) : this.contexts.slice()))
-    );*/
-    
+   
 	//PER VALIDAZIONE FORM
 	  checkForErrorsIn(formControl: AbstractControl): string {
 	    if (formControl.hasError('required')) {
@@ -100,18 +91,20 @@ export class HomeComponent implements OnInit {
 	    return '';
 	  }
 	
-	/*  
+	
   displayFn(ctx: IContextNode): string {
-    return ctx.name ? ctx.name + ' | ' + ctx.id : '';
+    //return ctx.name ? ctx.name + ' | ' + ctx.id : '';
+    return ctx.name;
   }
-*/
-
+  
+  
+/*
   displayFn(ctx: string): string {
     const tmp = ctx ? ctx + ' (poi ci va id) ': '';
     console.log("***"+tmp);
     return tmp;
   }
-
+*/
 	getContexts(): string[] {
 		if (this.account != null && this.account.resourceAccessDTO != null) {
 			// eslint-disable-next-line no-console

src/main/webapp/app/services/contexts-loader.service.ts

@@ -15,7 +15,7 @@ export class ContextsLoaderService {
 
   constructor(private http: HttpClient) {}
 
-  fetchContexts(): Observable<IContextNode[]> {
+  fetchAll(): Observable<IContextNode[]> {
 	   return this.http.get<IContextNode[]>(appProperties.BASEURL_API + 'is/allcontexts');
   }
   

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

@@ -19,10 +19,11 @@
 */
 
 
-.mat-mdc-form-field {
+mat-option {
   font-size: 14px;
   width: 100%;
-}
+  display:block
+  }
 
 th.mat-header-cell, td.mat-cell, td.mat-footer-cell{
 	padding:18px;