Add headline to tables
Max Ehrlicher-Schmidt
4 years ago
parent
5b2ae731c4
commit
f18da19bcc
@ -1,234 +1,244 @@
|
||||
<div class="table-page-wrapper">
|
||||
<div class="table-control">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="table-control-button"
|
||||
disabled
|
||||
i18n
|
||||
>
|
||||
Alle ausgewählten Fahrräder bearbeiten
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="table-control-button"
|
||||
matTooltip="Tabllendaten aktualisieren. Achtung! Alle ungespeicherten Änderungen gehen verloren."
|
||||
(click)="reloadTable()"
|
||||
[disabled]="reloadingTable"
|
||||
>
|
||||
<mat-icon class="spin">sync</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="table-control-button"
|
||||
(click)="addNewObject()"
|
||||
[disabled]="reloadingTable"
|
||||
>
|
||||
<mat-icon class="spin">add</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="filter">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="filter.includesString"
|
||||
(input)="applyFilter()"
|
||||
placeholder="Suchbegriff eingeben..."
|
||||
/>
|
||||
</mat-form-field>
|
||||
<button
|
||||
*ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="table-control-button"
|
||||
(click)="showOnlyUnsavedElements(true)"
|
||||
[disabled]="reloadingTable"
|
||||
i18n
|
||||
>
|
||||
{{ countUnsavedRows() }} ungespeicherte(s) Element(e) anzeigen
|
||||
</button>
|
||||
<mat-checkbox
|
||||
*ngIf="filter.onlyUnsaved"
|
||||
(change)="showOnlyUnsavedElements(false)"
|
||||
[(ngModel)]="filter.onlyUnsaved"
|
||||
>
|
||||
nur ungespeicherte Elemente anzeigen
|
||||
</mat-checkbox>
|
||||
<mat-paginator
|
||||
[pageSizeOptions]="[15, 25, 30, 50, 100]"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table
|
||||
mat-table
|
||||
class="mat-elevation-z8"
|
||||
matSort
|
||||
cdkDropList
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)"
|
||||
[dataSource]="data"
|
||||
>
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
<h1 class="headline">
|
||||
{{ headline }}
|
||||
</h1>
|
||||
<div class="table-control">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="table-control-button"
|
||||
disabled
|
||||
i18n
|
||||
>
|
||||
Alle ausgewählten Fahrräder bearbeiten
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="table-control-button"
|
||||
matTooltip="Tabllendaten aktualisieren. Achtung! Alle ungespeicherten Änderungen gehen verloren."
|
||||
(click)="reloadTable()"
|
||||
[disabled]="reloadingTable"
|
||||
>
|
||||
<mat-icon class="spin">sync</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
class="table-control-button"
|
||||
(click)="addNewObject()"
|
||||
[disabled]="reloadingTable"
|
||||
>
|
||||
<mat-icon class="spin">add</mat-icon>
|
||||
</button>
|
||||
<mat-form-field class="filter">
|
||||
<mat-label>Filter</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[(ngModel)]="filter.includesString"
|
||||
(input)="applyFilter()"
|
||||
placeholder="Suchbegriff eingeben..."
|
||||
/>
|
||||
</mat-form-field>
|
||||
<button
|
||||
*ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="table-control-button"
|
||||
(click)="showOnlyUnsavedElements(true)"
|
||||
[disabled]="reloadingTable"
|
||||
i18n
|
||||
>
|
||||
{{ countUnsavedRows() }} ungespeicherte(s) Element(e) anzeigen
|
||||
</button>
|
||||
<mat-checkbox
|
||||
*ngIf="filter.onlyUnsaved"
|
||||
(change)="showOnlyUnsavedElements(false)"
|
||||
[(ngModel)]="filter.onlyUnsaved"
|
||||
>
|
||||
nur ungespeicherte Elemente anzeigen
|
||||
</mat-checkbox>
|
||||
<mat-paginator
|
||||
[pageSizeOptions]="[15, 25, 30, 50, 100]"
|
||||
showFirstLastButtons
|
||||
></mat-paginator>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table
|
||||
mat-table
|
||||
class="mat-elevation-z8"
|
||||
matSort
|
||||
cdkDropList
|
||||
cdkDropListOrientation="horizontal"
|
||||
(cdkDropListDropped)="drop($event)"
|
||||
[dataSource]="data"
|
||||
>
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container matColumnDef="select" sticky>
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
(change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-checkbox
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container matColumnDef="select" sticky>
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
(change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<mat-checkbox
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Other Columns -->
|
||||
<ng-container
|
||||
*ngFor="let column of columnInfo"
|
||||
[matColumnDef]="column.name"
|
||||
[sticky]="isStickyColumn(column.name)"
|
||||
>
|
||||
<!-- add cdkDrag to make columns draggable-->
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ getTranslation(column.name) }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<app-cell
|
||||
*ngIf="
|
||||
column.type === 'Boolean' ||
|
||||
element.newObject ||
|
||||
(!column.readonly && element.isLockedByMe);
|
||||
else stringValue
|
||||
"
|
||||
[editable]="
|
||||
(element.newObject && column.acceptedForCreation) ||
|
||||
(!column.readonly && element.isLockedByMe)
|
||||
"
|
||||
[required]="element.newObject && column.requiredForCreation"
|
||||
(validityChange)="validityChange(element, column.name, $event)"
|
||||
[(value)]="element[column.name]"
|
||||
[inputType]="column.type"
|
||||
[link]="column.link ? column.link(element) : null"
|
||||
></app-cell>
|
||||
<ng-template #stringValue>
|
||||
<span *ngIf="!column.link">{{ element[column.name] }}</span>
|
||||
<a
|
||||
mat-button
|
||||
color="primary"
|
||||
*ngIf="column.link"
|
||||
[routerLink]="column.link(element)"
|
||||
>{{ element[column.name] }}</a
|
||||
>
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Other Columns -->
|
||||
<ng-container
|
||||
*ngFor="let column of columnInfo"
|
||||
[matColumnDef]="column.name"
|
||||
[sticky]="isStickyColumn(column.name)"
|
||||
>
|
||||
<!-- add cdkDrag to make columns draggable-->
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>
|
||||
{{ getTranslation(column.name) }}
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<app-cell
|
||||
</ng-template>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Buttons Column -->
|
||||
<ng-container matColumnDef="buttons" stickyEnd>
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="button-wrapper" *ngIf="!element.newObject">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="lock(element)"
|
||||
*ngIf="
|
||||
column.type === 'Boolean' ||
|
||||
element.newObject ||
|
||||
(!column.readonly && element.isLockedByMe);
|
||||
else stringValue
|
||||
!element.isLockedByMe &&
|
||||
!element.isLocked &&
|
||||
!isLoading(element.id)
|
||||
"
|
||||
[editable]="
|
||||
(element.newObject && column.acceptedForCreation) ||
|
||||
(!column.readonly && element.isLockedByMe)
|
||||
>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="menu"
|
||||
*ngIf="
|
||||
!element.isLockedByMe &&
|
||||
!isLoading(element.id) &&
|
||||
!element.isLocked
|
||||
"
|
||||
[required]="element.newObject && column.requiredForCreation"
|
||||
(validityChange)="validityChange(element, column.name, $event)"
|
||||
[(value)]="element[column.name]"
|
||||
[inputType]="column.type"
|
||||
[link]="column.link ? column.link(element) : null"
|
||||
></app-cell>
|
||||
<ng-template #stringValue>
|
||||
<span *ngIf="!column.link">{{ element[column.name] }}</span>
|
||||
<a mat-button color="primary" *ngIf="column.link" [routerLink]="column.link(element)">{{
|
||||
element[column.name]
|
||||
}}</a>
|
||||
</ng-template>
|
||||
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Buttons Column -->
|
||||
<ng-container matColumnDef="buttons" stickyEnd>
|
||||
<th mat-header-cell *matHeaderCellDef></th>
|
||||
<td mat-cell *matCellDef="let element">
|
||||
<div class="button-wrapper" *ngIf="!element.newObject">
|
||||
<button
|
||||
mat-icon-button
|
||||
(click)="lock(element)"
|
||||
*ngIf="
|
||||
!element.isLockedByMe &&
|
||||
!element.isLocked &&
|
||||
!isLoading(element.id)
|
||||
"
|
||||
>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="menu"
|
||||
*ngIf="
|
||||
!element.isLockedByMe &&
|
||||
!isLoading(element.id) &&
|
||||
!element.isLocked
|
||||
"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="openDeleteConfirmationDialog(element)"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>Löschen
|
||||
</button>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>content_copy</mat-icon>Duplizieren
|
||||
</button>
|
||||
</mat-menu>
|
||||
|
||||
<mat-spinner
|
||||
[diameter]="32"
|
||||
*ngIf="isLoading(element.id)"
|
||||
></mat-spinner>
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
*ngIf="element.isLockedByMe && !isLoading(element.id)"
|
||||
(click)="save(element)"
|
||||
>
|
||||
<mat-icon>save</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Alle ungespeicherten Änderungen verwerfen."
|
||||
*ngIf="element.isLockedByMe && !isLoading(element.id)"
|
||||
(click)="cancel(element)"
|
||||
>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="element.isLocked"
|
||||
matTooltip="Dieser Eintrag wird gerade von einem anderen Bearbeiter editiert. Aktualisieren Sie die Tabelle, um den neuen Status abzurufen."
|
||||
>locked</mat-icon
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="button-wrapper"
|
||||
*ngIf="element.newObject"
|
||||
[matTooltip]="(countUnvalidFields(element) > 0) ? ('Nicht ausgefüllte Pflichtfelder (rot): ' + countUnvalidFields(element)) : 'Erstellen'"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button
|
||||
mat-icon-button
|
||||
[disabled]="countUnvalidFields(element) > 0"
|
||||
(click)="create(element)"
|
||||
mat-menu-item
|
||||
(click)="openDeleteConfirmationDialog(element)"
|
||||
>
|
||||
<mat-icon>save</mat-icon>
|
||||
<mat-icon>delete</mat-icon>Löschen
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Verwerfen"
|
||||
(click)="deleteNewObject(element)"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<button mat-menu-item>
|
||||
<mat-icon>content_copy</mat-icon>Duplizieren
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Table Definition -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
|
||||
<mat-card
|
||||
*ngIf="!isLoaded"
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<mat-spinner [diameter]="32"></mat-spinner>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-menu>
|
||||
|
||||
<mat-spinner
|
||||
[diameter]="32"
|
||||
*ngIf="isLoading(element.id)"
|
||||
></mat-spinner>
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
*ngIf="element.isLockedByMe && !isLoading(element.id)"
|
||||
(click)="save(element)"
|
||||
>
|
||||
<mat-icon>save</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Alle ungespeicherten Änderungen verwerfen."
|
||||
*ngIf="element.isLockedByMe && !isLoading(element.id)"
|
||||
(click)="cancel(element)"
|
||||
>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-icon
|
||||
*ngIf="element.isLocked"
|
||||
matTooltip="Dieser Eintrag wird gerade von einem anderen Bearbeiter editiert. Aktualisieren Sie die Tabelle, um den neuen Status abzurufen."
|
||||
>locked</mat-icon
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="button-wrapper"
|
||||
*ngIf="element.newObject"
|
||||
[matTooltip]="
|
||||
countUnvalidFields(element) > 0
|
||||
? 'Nicht ausgefüllte Pflichtfelder (rot): ' +
|
||||
countUnvalidFields(element)
|
||||
: 'Erstellen'
|
||||
"
|
||||
>
|
||||
<button
|
||||
mat-icon-button
|
||||
[disabled]="countUnvalidFields(element) > 0"
|
||||
(click)="create(element)"
|
||||
>
|
||||
<mat-icon>save</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Verwerfen"
|
||||
(click)="deleteNewObject(element)"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Table Definition -->
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
|
||||
<mat-card
|
||||
*ngIf="!isLoaded"
|
||||
style="display: flex; justify-content: center; align-items: center"
|
||||
>
|
||||
<mat-spinner [diameter]="32"></mat-spinner>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue