Solved problems with autocomplete and form validation (reactive forms)

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

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row py-4">
-  <div id="btn-group" class="col-md-3 mt-2">
+  <div id="btn-group" class="col-md-3 mt-3">
     <button mat-raised-button color="primary"><mat-icon>source</mat-icon> <span>File</span></button>
     <button mat-raised-button color="primary"><mat-icon>edit</mat-icon> <span>Edit</span></button>
     <button mat-raised-button color="primary"><mat-icon>explore</mat-icon> <span>View</span></button>
@@ -9,17 +9,8 @@
 
   <div class="col-md-9 mt-2">
     <form [formGroup]="chooseContextForm">
-      <!--	
-	  <label for="first-name">First Name: </label>
-	  <input id="first-name" type="text" formControlName="firstName">
-	
-	  <label for="last-name">Last Name: </label>
-	  <input id="last-name" type="text" formControlName="lastName">
-  -->
-
       <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
@@ -27,70 +18,53 @@
           [matAutocomplete]="auto"
           placeholder="Name"
           type="text"
-          [formControlName]="namefield"
+          [formControl]="namefield"
           required
         />
-
-        <mat-autocomplete #auto="matAutocomplete">
-          <mat-option
-            (onSelectionChange)="(contextInput.value != undefined)"
-            *ngFor="let ctx of filteredContexts | async"
-            [value]="ctx.name"
-            >{{ ctx.name }}</mat-option
-          >
+        <mat-error>Please enter context!</mat-error>
+        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+          <mat-option *ngFor="let ctx of filteredContexts | async" [value]="ctx.name">
+            <span>{{ ctx.name }}</span>
+            <small> | ID: {{ ctx.id }}</small>
+          </mat-option>
         </mat-autocomplete>
       </mat-form-field>
-
       <mat-form-field appearance="outline" class="form-field">
         <mat-label for="uidfield">Context UUID</mat-label>
         <input matInput id="uidfield" type="text" placeholder="UUID" formControlName="uidfield" readonly />
       </mat-form-field>
-
-      <!--
-      <div class="form-group">
-		  <mat-form-field appearance="outline" class="form-field">
-        <mat-label class="ml-4 flex-grow-1">UUID</mat-label>
-        <input type="text" [formControl]="idCtrl"  >
-        </mat-form-field>
-     </div>
-     -->
+      <button mat-button color="primary"><mat-icon class="icon-wide2">content_copy</mat-icon></button>
     </form>
-    <!--
-      <mat-form-field>
-        <mat-label class="ml-4 flex-grow-1">UUID</mat-label>
-        <input #uuidInput  placeholder="UUID"  [formControl]="contextCtrl" contenteditable="false" />
-      </mat-form-field>
-      -->
-    <div class="row">
-      <h3>Resource tree</h3>
-      <div class="d-flex flex-row col-md-3">
-        <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
-          <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-            <button mat-button (click)="treeNode.emit(node)">
-              {{ node.name }}
-            </button>
-          </mat-tree-node>
-          <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
-            <div class="mat-tree-node">
-              <button mat-icon-button matTreeNodeToggle>
-                <mat-icon class="mat-icon-rtl-mirror">
-                  {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
-                </mat-icon>
-              </button>
-              <!--<button mat-button (click)="loadTable(node)">-->
-              <button mat-button (click)="treeNode.emit(node)">
-                {{ node.name }}
-              </button>
-            </div>
-            <div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
-              <ng-container matTreeNodeOutlet></ng-container>
-            </div>
-          </mat-nested-tree-node>
-        </mat-tree>
-      </div>
-      <div class="col-md-9">
-        <jhi-table-screen> </jhi-table-screen>
-      </div>
-    </div>
+  </div>
+</div>
+<div class="d-flex flex-row">
+  <div class="col-md-3">
+    <h3>Resource tree</h3>
+    <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="resources-tree">
+      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+        <button mat-button (click)="treeNode.emit(node)">
+          {{ node.name }}
+        </button>
+      </mat-tree-node>
+      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
+        <div class="mat-tree-node">
+          <button mat-icon-button matTreeNodeToggle>
+            <mat-icon class="mat-icon-rtl-mirror">
+              {{ nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
+            </mat-icon>
+          </button>
+          <!--<button mat-button (click)="loadTable(node)">-->
+          <button mat-button (click)="treeNode.emit(node)">
+            {{ node.name }}
+          </button>
+        </div>
+        <div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
+          <ng-container matTreeNodeOutlet></ng-container>
+        </div>
+      </mat-nested-tree-node>
+    </mat-tree>
+  </div>
+  <div class="col-md-9">
+    <jhi-table-screen> </jhi-table-screen>
   </div>
 </div>

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

@@ -47,3 +47,7 @@
   font-size: 14px;
   width: 40%;
 }
+
+.icon-wide2 {
+  transform: scale(2);
+}

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

@@ -5,9 +5,9 @@ import { NestedTreeControl } from '@angular/cdk/tree';
 import { ResourcesLoaderService } from 'app/services/resources-loader.service';
 import { IResource } from 'app/services/i-resource';
 import { ContextsLoaderService } from 'app/services/contexts-loader.service';
-import { IContextNode } from 'app/services/i-context-node';
+import { ContextNode, IContextNode } from 'app/services/i-context-node';
 import { Observable, map, startWith } from 'rxjs';
-import { FormControl, FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'jhi-rsc-tree',
@@ -20,58 +20,63 @@ export class RscTreeComponent implements OnInit {
   nestedDataSource = new MatTreeNestedDataSource<IResource>();
   @Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
 
-  allContexts: IContextNode[];
-  filteredContexts: Observable<IContextNode[]> | any;
+  contexts: ContextNode[];
+  filteredContexts: Observable<ContextNode[]> | any;
+  chooseContextForm: FormGroup | any;
 
-  chooseContextForm = new FormGroup({
-    namefield: new FormControl(''),
-    uidfield: new FormControl(''),
-  });
-
-  constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService, private formBuilder: FormBuilder) {
-    this.allContexts = {} as IContextNode[];
+  constructor(private fb: FormBuilder, private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) {
+    this.contexts = [];
   }
 
-  //MT: per chiamare le direttive formControlName
   get namefield(): any {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this.chooseContextForm.get('namefield');
   }
   get uidfield(): any {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return this.chooseContextForm.get('uidfield');
   }
 
-  /*
-    onSubmit(): void {
-      console.log(this.chooseContextForm.value); 
-    }*/
-
   ngOnInit(): void {
-    /*
-	  this.myForm = this.formBuilder.group({
-      context: [],});
-      */
-
     this.resLoader.getResourcesByContext().subscribe(res => {
       this.nestedDataSource.data = res;
     });
+
+    this.chooseContextForm = this.fb.group({
+      namefield: null,
+      uidfield: null,
+    });
+
     // per la form dei contesti
     this.ctxLoader.getData().subscribe(res => {
-      this.allContexts = res;
+      this.contexts = res;
       console.log('*******numero contesti...', res.length);
     });
-    this.filteredContexts = this.chooseContextForm.get('namefield')?.valueChanges.pipe(
+
+    this.filteredContexts = this.chooseContextForm.get('namefield').valueChanges.pipe(
       startWith(''),
-      map(name => (name ? this.doFilter(name) : this.allContexts.slice()))
+      map(ctx => (ctx ? this.filterContexts(ctx) : this.contexts.slice()))
     );
+  } //fine oninit
 
-    /*
-          this.myForm = this.formBuilder.group({
-      context: [],
-    });
-
-    */
+  //mettere ANY come tipo dell'argomento per evitare errore TypeScript nella map!!
+  filterContexts(name: any): IContextNode[] {
+    return this.contexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
   }
 
+  displayFn(name: string): string {
+    return name ? name : '';
+  }
+
+  /*
+//mettendo ID come value da passare	   
+displayFn(name: string): string {
+ 	if (!id) return '';
+  let index = this.states.findIndex(state => state.id === id);
+  return this.states[index].name;
+  }
+  */
+
   hasNestedChild(_: number, node: IResource): boolean {
     if (node.children == null) {
       return false;
@@ -79,24 +84,4 @@ export class RscTreeComponent implements OnInit {
       return node.children.length > 0;
     }
   }
-
-  private doFilter(name: string): IContextNode[] {
-    //return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
-    return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(name.toLowerCase()));
-  }
-
-  /*
-    onEnter(evt: any){
-    if (evt.source.selected) {
-    alert("hello ");
-    }
-  }*/
-
-  /*
-  //TODO: modificare per gestire eventuali eventi sulla onselect
-	private onSelectedContext(uid:string):void {
-		   this.resLoader.getResourcesByContext().subscribe(res => {
-      this.nestedDataSource.data = res;
-    });
-	}*/
 }

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, map, tap } from 'rxjs';
 import { appProperties } from 'app/config/app-properties';
 import { IContextNode } from './i-context-node';
 
@@ -16,10 +16,9 @@ export class ContextsLoaderService {
 
   getData(): Observable<IContextNode[]> {
     //TODO: pipe per gestione errori
-    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-    // return this.http.get<IContextNode[]>(appProperties.BASEURL_API + 'is/allcontext');
     return this.http.get<IContextNode[]>(appProperties.MOCK_BASEURL_API + '/allcontext');
   }
+
   getRawData(): Observable<string> {
     //TODO: pipe per gestione errori
     return this.http.get<string>(appProperties.BASEURL_API + 'is/allcontext');

src/main/webapp/app/services/i-context-node.ts

@@ -4,3 +4,17 @@ export interface IContextNode {
   id: string;
   children?: IContextNode[];
 }
+
+export class ContextNode implements IContextNode {
+  parent: string;
+  name: string;
+  id: string;
+  children?: IContextNode[];
+
+  constructor(id: string, name: string, parent: string, children: ContextNode[]) {
+    this.name = name;
+    this.parent = id;
+    this.id = id;
+    this.children = children;
+  }
+}