copy to clipboard implementation and other changes

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

@@ -25,7 +25,6 @@ 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: [
     BrowserModule,

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

@@ -5,25 +5,17 @@
     <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>
-  <!--IMPORTANTE: BINDING FATTO SU CONTEXT_ID -->
+  <!--IMPORTANTE: BINDING FATTO SU CONTEXT_NAME -->
 
   <div class="col-md-9 mt-2">
     <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"
-          required
-        />
-        <mat-error>Please enter context!</mat-error>
-        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-          <mat-option *ngFor="let ctx of filteredContexts | async" [value]="ctx.name">
+        <input matInput #contextInput (keyup)="(0)" [matAutocomplete]="auto" placeholder="Name" type="text" [formControl]="namefield" />
+        <mat-error>{{ checkForErrorsIn(namefield) }}</mat-error>
+        <!--(optionSelected)="assignUid($event.option.value)"-->
+        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)">
+          <mat-option *ngFor="let ctx of filteredContexts | async" [value]="ctx">
             <span>{{ ctx.name }}</span>
             <small> | ID: {{ ctx.id }}</small>
           </mat-option>
@@ -31,12 +23,13 @@
       </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 />
+        <input matInput id="uidfield" type="text" placeholder="UUID" formControlName="uidfield" readonly [value]="namefield.value.id" />
       </mat-form-field>
-      <button mat-button color="primary"><mat-icon class="icon-wide2">content_copy</mat-icon></button>
+      <button mat-button (click)="copyUid()" color="primary"><mat-icon class="icon-wide2">content_copy</mat-icon></button>
     </form>
   </div>
 </div>
+
 <div class="d-flex flex-row">
   <div class="col-md-3">
     <h3>Resource tree</h3>

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

@@ -5,9 +5,10 @@ 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 { ContextNode, IContextNode } from 'app/services/i-context-node';
+import { IContextNode } from 'app/services/i-context-node';
 import { Observable, map, startWith } from 'rxjs';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Component({
   selector: 'jhi-rsc-tree',
@@ -20,12 +21,21 @@ export class RscTreeComponent implements OnInit {
   nestedDataSource = new MatTreeNestedDataSource<IResource>();
   @Output() treeNode = new EventEmitter<IResource>(); //emitting event to parent
 
-  contexts: ContextNode[];
-  filteredContexts: Observable<ContextNode[]> | any;
+  contexts: IContextNode[];
+  public filteredContexts: Observable<IContextNode[]> | undefined;
   chooseContextForm: FormGroup | any;
 
-  constructor(private fb: FormBuilder, private resLoader: ResourcesLoaderService, private ctxLoader: ContextsLoaderService) {
+  constructor(
+    private fb: FormBuilder,
+    private resLoader: ResourcesLoaderService,
+    private ctxLoader: ContextsLoaderService,
+    private clipboard: Clipboard
+  ) {
     this.contexts = [];
+    this.chooseContextForm = this.fb.group({
+      namefield: ['', [Validators.required]],
+      uidfield: [''],
+    });
   }
 
   get namefield(): any {
@@ -42,11 +52,6 @@ export class RscTreeComponent implements OnInit {
       this.nestedDataSource.data = res;
     });
 
-    this.chooseContextForm = this.fb.group({
-      namefield: null,
-      uidfield: null,
-    });
-
     // per la form dei contesti
     this.ctxLoader.getData().subscribe(res => {
       this.contexts = res;
@@ -59,23 +64,29 @@ export class RscTreeComponent implements OnInit {
     );
   } //fine oninit
 
+  //TODO: questo metodo va inserito in una classe di utility common
+  checkForErrorsIn(formControl: AbstractControl): string {
+    if (formControl.hasError('required')) {
+      return 'Value is required!';
+    }
+    return '';
+  }
+
   //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 : '';
+  displayFn(ctx: IContextNode): string {
+    return ctx.name ? ctx.name + ' | ' + ctx.id : '';
   }
 
-  /*
-//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;
+  onSelFn(ctx: IContextNode): void {
+    console.log('-----------' + ctx.id);
+    this.uidfield.value = ctx.id;
   }
-  */
+
+  // (onSelectionChange)="onSelFn(ctx)"
 
   hasNestedChild(_: number, node: IResource): boolean {
     if (node.children == null) {
@@ -84,4 +95,16 @@ displayFn(name: string): string {
       return node.children.length > 0;
     }
   }
+
+  copyUid(): void {
+    //const res = this.uidfield ? this.uidfield.value : '';
+    const res = this.uidfield.value;
+    this.clipboard.copy(res);
+    alert(this.uidfield.value);
+  }
+
+  //TODO: modificare per gestire eventuali eventi sulla onselect
+  assignUid(uid: string): void {
+    console.debug('------------UUID:.....' + uid);
+  }
 }

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

@@ -9,6 +9,7 @@ import { MatInputModule } from '@angular/material/input';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { TableScreenComponent } from 'app/table-screen/table-screen.component';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 @NgModule({
   declarations: [],