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

Debugging Angular's material table default filtering (work in
progress...)
This commit is contained in:
Maria Teresa Paratore 2023-12-08 18:53:08 +01:00
parent 664699e25a
commit b8e4c74e81
8 changed files with 50 additions and 21 deletions

View File

@ -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/";
}

View File

@ -1,7 +1,6 @@
<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>
@ -13,7 +12,8 @@
{{ 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>

View File

@ -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;
}
*/

View File

@ -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';
}
}

View File

@ -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>

View File

@ -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,9 +98,19 @@ 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)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB