File
Description
Table that displays a list of graphs.
Has options to export, open and delete graphs.
The latter two have to be handled by the containing component.
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
Public
constructor(bottomSheet: MatBottomSheet)
|
|
|
Parameters :
| Name |
Type |
Optional |
| bottomSheet |
MatBottomSheet
|
No
|
|
Outputs
|
graphDeletionRequested
|
Type : EventEmitter
|
|
|
|
graphSelected
|
Type : EventEmitter
|
|
|
Methods
|
Public
exportGraph
|
exportGraph(graph: FOLGraph)
|
|
|
|
|
|
Public
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
|
Public
ngOnChanges
|
ngOnChanges(_: SimpleChanges)
|
|
|
Parameters :
| Name |
Type |
Optional |
| _ |
SimpleChanges
|
No
|
|
|
Public
Readonly
columns
|
Type : string[]
|
Default value : ['name', 'description', 'lastEdit', 'actions']
|
|
|
|
Public
Readonly
dataSource
|
Default value : new MatTableDataSource<FOLGraph>([])
|
|
|
|
Private
sort
|
Type : MatSort
|
Decorators :
@ViewChild(MatSort, {static: false})
|
|
|
import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
import { MatSort } from '@angular/material/sort';
import { ExportGraphBottomSheet } from 'src/app/bottom-sheets/export-graph/export-graph.bottom-sheet';
import { FOLGraph } from 'src/app/model/domain/fol.graph';
/**
* Table that displays a list of graphs.
* Has options to export, open and delete graphs.
* The latter two have to be handled by the containing component.
*/
@Component({
selector: 'apollo-graph-list[graphs]',
templateUrl: './graph-list.component.html',
styleUrls: ['./graph-list.component.scss'],
})
export class GraphListComponent implements OnChanges, AfterViewInit {
@Input() public graphs!: FOLGraph[] | null;
@Output() public readonly graphSelected = new EventEmitter<FOLGraph>();
@Output() public readonly graphDeletionRequested = new EventEmitter<FOLGraph>();
@ViewChild(MatSort, { static: false }) private sort!: MatSort;
public readonly columns: string[] = ['name', 'description', 'lastEdit', 'actions'];
public readonly dataSource = new MatTableDataSource<FOLGraph>([]);
public constructor(private readonly bottomSheet: MatBottomSheet) {}
public ngOnChanges(_: SimpleChanges): void {
if (this.graphs !== null) {
this.dataSource.data = this.graphs;
}
}
public ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
}
public exportGraph(graph: FOLGraph): void {
this.bottomSheet.open(ExportGraphBottomSheet, {
data: graph,
});
}
}
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z4">
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "misc.name" | translate }}</th>
<td mat-cell *matCellDef="let graph">{{ graph.name }}</td>
</ng-container>
<!-- Description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "misc.description" | translate }}</th>
<td mat-cell *matCellDef="let graph">{{ graph.description }}</td>
</ng-container>
<!-- LastEdit Column -->
<ng-container matColumnDef="lastEdit">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ "misc.last-edit" | translate }}</th>
<td mat-cell *matCellDef="let graph">{{ graph.lastEdit | date: "dd.MM.yyyy hh:mm" }}</td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>{{ "actions.title" | translate }}</th>
<td mat-cell *matCellDef="let graph">
<button mat-icon-button (click)="graphSelected.emit(graph)" color="primary" class="action-button" matTooltip="{{ 'actions.open' | translate }}">
<mat-icon>launch</mat-icon>
</button>
<button mat-icon-button (click)="exportGraph(graph)" color="primary" class="action-button" matTooltip="{{ 'actions.export' | translate }}">
<mat-icon>get_app</mat-icon>
</button>
<button mat-icon-button (click)="graphDeletionRequested.emit(graph)" color="warn" class="action-button" matTooltip="{{ 'actions.delete' | translate }}">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns"></tr>
<tr mat-row *matRowDef="let row; columns: columns"></tr>
</table>
:host {
display: block;
width: 100%;
height: 100%;
}
table {
width: 100%;
}
th.mat-sort-header-sorted {
color: black;
}
:is(.mat-column-name, .mat-column-description) {
word-break: break-all;
}
:is(.mat-column-description, .mat-column-lastEdit) {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.mat-header-cell {
word-break: keep-all !important;
}
Legend
Html element with directive