updated favicon.ico and logos. Adjusted tree's behavior on hover.

Debugging Angular's material table default filtering (work in
progress...)

src/main/webapp/app/config/app-properties.ts

@@ -1,4 +1,5 @@
 export class appProperties {
-    public static BASEURL_API = "http://localhost:8080/api/";
+    public static BASEURL_API = "http://localhost:8081/api/";
+    //public static BASEURL_API = "http://localhost:8080/api/";
     
 }

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

@@ -1,19 +1,19 @@
   <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
-    <mat-tree-node *matTreeNodeDef="let node" 
-     [ngClass]="{ 'background-highlight': activeNode === node }" matTreeNodeToggle>
-		<button mat-button (click)="activeNode=node; onClickNodeTree(node)">
+    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
+		<button mat-button (click)="onClickNodeTree(node)">
      		 {{ node.name }}
         </button>
     </mat-tree-node>
 
     <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
-      <div class="mat-tree-node">
+      <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)="onClickNodeTree(node)">
+        
+        <button mat-button  (click)="onClickNodeTree(node)">
      		 {{ node.name }}
         </button>
       </div>

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

@@ -1,12 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
-@import '~@angular/material/theming';
-
-
-#tree-title {
-	  text-align: left;
-  	  color: teal;
-  	  padding-bottom: 3%;
-}
 
 .example-tree-invisible {
   display: none;
@@ -19,6 +10,15 @@
   list-style-type: none;
 }
 
+.example-tree .mat-tree-node {
+	width: 300px;
+}
+
+
+.example-tree .mat-tree-node :hover {
+	background-color: bisque;
+}
+
 /*
  * This padding sets alignment of the nested nodes.
  */
@@ -26,6 +26,7 @@
   padding-left: 25px;
 }
 
+
 /*
  * Padding for leaf nodes.
  * Leaf nodes need to have padding so as to align with other non-leaf nodes
@@ -34,3 +35,14 @@
 .example-tree div[role='group'] > .mat-tree-node {
   padding-left: 25px;
 }
+
+/*
+.active{
+  background-color: bisque;
+}
+*/
+/*
+.not-active{
+	background-color: transparent;
+}
+*/

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

@@ -16,8 +16,7 @@ import { IResource } from 'app/services/i-resource';
 export class RscTreeComponent implements OnInit{
   nestedTreeControl = new NestedTreeControl<IResource>(node => node.children);
   nestedDataSource = new MatTreeNestedDataSource<IResource>();
-  
-  activeNode:any;
+  statusClass = 'not-active';
   
  @Output() public resourceTypeEm = new EventEmitter<string>();
 
@@ -43,9 +42,12 @@ hasNestedChild(_: number, node: IResource): boolean {
 
   //TODO: InformationSystemResourceClient shoud pass a code, not a name! 
 	onClickNodeTree(node:IResource):void{
+		//this.setActiveClass();
 		this.resourceTypeEm.emit(node.name);
-		
 	}
 	
+ setActiveClass():void{
+    this.statusClass = 'active';
+  }
 	
 }

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

@@ -28,6 +28,7 @@
         <td mat-cell *matCellDef="let item">{{ item.lastMod }}</td>
       </ng-container>
 
+<!--
       <ng-container matColumnDef="artifact">
         <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Artifact</th>
         <td mat-cell *matCellDef="let item">{{ item.artifact }}</td>
@@ -42,6 +43,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Version</th>
         <td mat-cell *matCellDef="let item">{{ item.version }}</td>
       </ng-container>
+      -->
       
       <ng-container matColumnDef="endpoint">
         <th mat-header-cell *matHeaderCellDef mat-sort-header disabled>Endpoint</th>

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable no-console */
 import {
   Component,
@@ -31,7 +32,8 @@ import { ResourcesImplService } from 'app/services/resources-impl.service';
 
 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', 'artifact', 'group', 'version', 'endpoint','actions'];
+  displayedColumns: string[] = ['name', 'id', 'status', 'lastMod',  'endpoint','actions'];
   dataFromService: IEService[];
   dataSource = new MatTableDataSource();
   tableDetail: IEService;
@@ -96,10 +98,20 @@ export class TableScreenEsComponent implements OnInit, AfterViewInit, OnChanges
   
    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)
 
   removeTab(index: number): void {