open-learning-exchange/planet

<div class="space-container">
  <mat-toolbar class="primary-color font-size-1">
    <span i18n>Your Notifications</span>
    <button mat-stroked-button [disabled]="!anyUnread" (click)="readAllNotification()" i18n class="margin-lr">Mark all as Read</button>
    <span class="toolbar-fill"></span>
    <mat-form-field class="font-size-1 margin-lr-3">
      <mat-select i18n-placeholder placeholder="Notification Status" value="all" (selectionChange)="onFilterChange($event.value)">
        <mat-option *ngFor="let option of notificationStatus" value={{option.toLowerCase()}}>{{option}}</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-toolbar>
  <ng-container *ngIf="!emptyData; else notFoundMessage">
    <mat-table #table [dataSource]="notifications">
      <ng-container matColumnDef="message">
        <mat-cell *matCellDef="let element" (click)="readNotification(element)">
          <p [ngClass]="{'primary-text-color':element.status==='unread'}">
            <ng-container *ngIf="element.link; else noLink">
              <a [routerLink]="element.link === '/' ? '/' : [ element.link, element.linkParams || {} ]">
                <span [innerHTML]="element.message"></span>
                <span *ngIf="element.time > 0" class="mat-caption margin-lr-8">{{element.time | date: 'medium'}}</span>
              </a>
            </ng-container>
            <ng-template #noLink>
              <span [innerHTML]="element.message"></span>
              <span *ngIf="element.time > 0" class="mat-caption margin-lr-8">{{element.time | date: 'medium'}}</span>
            </ng-template>
          </p>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="read">
        <mat-cell *matCellDef="let element" >
          <button mat-stroked-button *ngIf="element.status==='unread'" (click)="readNotification(element)" i18n>Mark as Read</button>
        </mat-cell>
      </ng-container>
      <mat-row *matRowDef="let row; columns: displayedColumns;" ></mat-row>
    </mat-table>
    <mat-paginator #paginator
      [pageSize]="50"
      [pageSizeOptions]="[5, 10, 20, 50, 100, 200]">
    </mat-paginator>
  </ng-container>
  <ng-template #notFoundMessage>
    <div class="view-container" i18n>No Notification Found</div>
  </ng-template>
</div>