Ombi/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html

<div class="mat-elevation-z8">

  <grid-spinner [loading]="isLoadingResults"></grid-spinner>

  <mat-form-field>
    <mat-select placeholder="Requests to Display" [(value)]="gridCount" (selectionChange)="ngAfterViewInit()">
      <mat-option value="10">10</mat-option>
      <mat-option value="15">15</mat-option>
      <mat-option value="30">30</mat-option>
      <mat-option value="100">100</mat-option>
    </mat-select>
  </mat-form-field>

  <table mat-table [dataSource]="dataSource" class="table" matSort [matSortActive]="defaultSort" matSortDisableClear
  [matSortDirection]="defaultOrder">


    <ng-container matColumnDef="series">
      <th mat-header-cell *matHeaderCellDef> Series </th>
      <td mat-cell *matCellDef="let element"> {{element.parentRequest.title}} </td>
    </ng-container>

    <ng-container matColumnDef="requestedBy">
      <th mat-header-cell *matHeaderCellDef> Requested By </th>
      <td mat-cell *matCellDef="let element"> {{element.requestedUser.userAlias}} </td>
    </ng-container>



    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef> Status </th>
      <td mat-cell *matCellDef="let element">
        {{element.parentRequest.status}}
      </td>
    </ng-container>

    <ng-container matColumnDef="requestedDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Requested Date </th>
      <td mat-cell *matCellDef="let element">
        {{element.requestedDate  | amLocal | amDateFormat: 'LL'}}
      </td>
    </ng-container>

    <ng-container matColumnDef="requestStatus">
      <th mat-header-cell *matHeaderCellDef> Request Status </th>
      <td mat-cell *matCellDef="let element">
        <div *ngIf="element.approved && !element.available">{{'Common.ProcessingRequest' | translate}}</div>
        <div *ngIf="!element.approved && !element.available">{{'Common.PendingApproval' |translate}}</div>
        <div *ngIf="element.available">{{'Common.Available' | translate}}</div>

      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> </th>
      <td mat-cell *matCellDef="let element">
        <button mat-raised-button color="accent"
          [routerLink]="'/details/tv/' + element.parentRequest.tvDbId">Details</button>
        <button mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin">Options</button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [length]="resultsLength" [pageSize]="gridCount"></mat-paginator>
</div>