Form field and error binding + autocompletion and css debugging

src/main/webapp/app/app.module.ts

@@ -24,6 +24,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { MatIconModule } from '@angular/material/icon';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
+import { TableScreenComponent } from './table-screen/table-screen.component';
 
 @NgModule({
   imports: [
@@ -38,6 +39,7 @@ import { RscTreeComponent } from './rsc-tree/rsc-tree.component';
     MatIconModule,
     BrowserModule,
     BrowserAnimationsModule,
+    TableScreenComponent,
     TabsModule.forRoot(),
   ],
   providers: [

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

@@ -1,50 +1,62 @@
-<div class="d-flex py-4">
-  <div id="btn-group" class="m-2">
+<div class="d-flex flex-row py-4">
+  <div id="btn-group" class="col-md-3 mt-2">
     <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>
     <button mat-raised-button color="primary"><mat-icon>help</mat-icon><span>Help</span></button>
   </div>
-  <div id="form-container" class="ml-4 px-4 flex-grow-1">
-    <form>
+
+  <div id="form-container" class="col-md-9 mt-2">
+    VALUE:...{{ contextInput.value }}
+    <form [formGroup]="myForm">
       <mat-form-field>
-        <mat-label class="ml-4 px-4 flex-grow-1">Select a context</mat-label>
-        <input matInput [matAutocomplete]="auto" [formControl]="contextCtrl" />
+        <mat-label class="ml-4 flex-grow-1">Select Context</mat-label>
+        <input #contextInput (keyup)="(0)" matInput placeholder="Context" [matAutocomplete]="auto" [formControl]="contextCtrl" required />
+        <!--<div *ngIf="contextCtrl.errors?.['required']">
+			    Context is required.
+			  </div>-->
         <mat-autocomplete #auto="matAutocomplete">
-          <mat-option *ngFor="let item of filteredContexts | async" [value]="item.name">
-            <span>{{ item.name }}</span> |
-            <small>UUID: {{ item.id }}</small>
+          <mat-option
+            (onSelectionChange)="(contextInput.value != undefined)"
+            *ngFor="let ctx of filteredContexts | async"
+            [value]="ctx.name"
+          >
+            <span>{{ ctx.name }}</span> |
+            <small>UUID: {{ ctx.id }}</small>
           </mat-option>
         </mat-autocomplete>
       </mat-form-field>
     </form>
   </div>
 </div>
-
-<h3>Resource tree</h3>
-<div class="d-flex flex-row">
-  <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)">-->
+<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>
-      </div>
-      <div [class.resources-tree-invisible]="!nestedTreeControl.isExpanded(node)" role="group">
-        <ng-container matTreeNodeOutlet></ng-container>
-      </div>
-    </mat-nested-tree-node>
-  </mat-tree>
+      </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

@@ -37,3 +37,8 @@
   /* Do you changes here */
   min-width: 450px;
 }
+
+.mat-mdc-form-field {
+  font-size: 14px;
+  width: 100%;
+}

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

@@ -6,8 +6,8 @@ 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 { FormControl } from '@angular/forms';
 import { Observable, map, startWith } from 'rxjs';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'jhi-rsc-tree',
@@ -19,32 +19,34 @@ export class RscTreeComponent implements OnInit {
   nestedTreeControl = new NestedTreeControl<IResource>(node => node.children);
   nestedDataSource = new MatTreeNestedDataSource<IResource>();
   @Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
+
   allContexts: IContextNode[];
-  rootName: string;
+  filteredContexts: Observable<IContextNode[]> | any;
+  myForm: FormGroup | any;
 
-  filteredContexts: Observable<IContextNode[]>;
-  contextCtrl: FormControl = new FormControl();
+  contextCtrl: FormControl;
 
-  constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) {
-    // this.selected = "option2";
+  constructor(private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService, private formBuilder: FormBuilder) {
     this.allContexts = {} as IContextNode[];
-    this.rootName = '';
-    this.filteredContexts = {} as Observable<IContextNode[]>;
+    this.contextCtrl = new FormControl();
   }
 
   ngOnInit(): void {
     this.resLoader.getResourcesByContext().subscribe(res => {
       this.nestedDataSource.data = res;
     });
+    // per la form dei contesti
     this.ctxLoader.getData().subscribe(res => {
       this.allContexts = res;
       console.log('*******numero contesti...', res.length);
-      this.rootName = this.allContexts[0].name;
-      console.log('*******contesto root...', this.rootName);
     });
+    this.myForm = this.formBuilder.group({
+      context: [],
+    });
+
     this.filteredContexts = this.contextCtrl.valueChanges.pipe(
       startWith(''),
-      map(ctx => (ctx ? this._filterContexts(ctx) : Array.from(this.allContexts).slice()))
+      map(val => (val ? this.filterContexts(val) : Array.from(this.allContexts).slice()))
     );
   }
 
@@ -56,11 +58,10 @@ export class RscTreeComponent implements OnInit {
     }
   }
 
-  private _filterContexts(value: string): IContextNode[] {
+  private filterContexts(value: string): IContextNode[] {
     const filterValue = value.toLowerCase();
-    return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(filterValue));
+    return this.allContexts.filter(ctx => ctx.name.toLowerCase().includes(value.toLowerCase()));
   }
-
   /* TODO: modificare per gestire eventuali eventi sulla onselect
 	onSelectedContext(uid:string):void {
 		   this.resLoader.getResourcesByContext().subscribe(res => {

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

@@ -6,8 +6,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { TableScreenComponent } from 'app/table-screen/table-screen.component';
 
 @NgModule({
   declarations: [],
@@ -20,9 +21,9 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
     MatIconModule,
     MatInputModule,
     FormsModule,
-    FormsModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
+    TableScreenComponent,
   ],
 })
 export class RscTreeModule {}