You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
<div class="quote">
|
|
|
|
<mat-input-container>
|
|
|
|
<input matInput placeholder="Search quotes" #input>
|
|
|
|
</mat-input-container>
|
|
|
|
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
|
|
|
|
<mat-spinner></mat-spinner>
|
|
|
|
</div>
|
|
|
|
<mat-table class="quotes-table mat-elevation-z8" [dataSource]="dataSource"
|
|
matSort matSortActive="date" matSortDirection="desc" matSortDisableClear>
|
|
|
|
<ng-container matColumnDef="id">
|
|
|
|
<mat-header-cell fxFlex="10%" *matHeaderCellDef mat-sort-header>#</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="10%" *matCellDef="let quote">{{quote.id}}</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="text">
|
|
|
|
<mat-header-cell fxFlex="50%" *matHeaderCellDef mat-sort-header>Quote</mat-header-cell>
|
|
|
|
<mat-cell fxFlex="50%" *matCellDef="let quote">{{quote.text}}</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="game">
|
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Game</mat-header-cell>
|
|
|
|
<mat-cell *matCellDef="let quote">{{quote.game}}</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="date">
|
|
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
|
|
|
|
<mat-cell *matCellDef="let quote">{{quote.date}}</mat-cell>
|
|
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
|
|
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
|
|
|
</mat-table>
|
|
|
|
<mat-paginator [length]="dataSource?.count$ | async" [pageSize]="10"
|
|
[pageSizeOptions]="[10, 20, 50, 100]"></mat-paginator>
|
|
|
|
</div>
|