open-learning-exchange/planet

<ng-container *ngIf="tableData.data.length === 0">
  <p i18n>There are no items to select</p>
  <mat-dialog-actions>
    <button mat-button mat-dialog-close i18n>OK</button>
  </mat-dialog-actions>
</ng-container>
<ng-container *ngIf="tableData.data.length > 0">
  <div class="search-bar">
    <button mat-raised-button (click)="masterToggle()" i18n color="primary" class="margin-lr-3" *ngIf="data.allowMulti && isAllSelected()!=='hidden'">
      {isAllSelected(), select, yes {Deselect} no {Select}} all
    </button>
    <mat-form-field *ngIf="dropdownField && dropdownOptions.length > 1" class="font-size-1 margin-lr-3">
      <mat-select [placeholder]="dropdownField" [value]="data.dropdownSettings.startingValue.value" (selectionChange)="onFilterChange($event.value, dropdownField)">
        <mat-option *ngFor="let option of dropdownOptions" value={{option.value}}>{{option.text}}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-icon>search</mat-icon>
    <mat-form-field class="font-size-1">
      <input matInput (keyup)="applyFilter($event.target.value)" i18n-placeholder placeholder="Search">
    </mat-form-field>
  </div>
  <mat-table #table [dataSource]="tableData">
    <ng-container *ngFor="let column of tableColumns" [matColumnDef]="column">
      <mat-header-cell *matHeaderCellDef>{{column}}</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element[column]}}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
    <mat-row
      *matRowDef="let row; columns: tableColumns"
      (click)="rowClick(row)"
      [ngClass]="{highlight:selection.isSelected(selectIdentifier(row))}"
      class="cursor-pointer">
    </mat-row>
  </mat-table>
  <mat-paginator #paginator
    [pageSize]="5"
    [pageSizeOptions]="[5, 10, 20, 50, 100, 200]">
  </mat-paginator>
  <mat-dialog-actions>
    <span class="mat-caption margin-lr-3" [matTooltip]="tooltipText" *ngIf="data.allowMulti">
      {{selection.selected.length + ' '}}
      <span i18n>{data.itemDescription, select,
          members {{selection.selected.length, plural, =0 {members} =1 {member} other {members}}}
          resources {{selection.selected.length, plural, =0 {resources} =1 {resource} other {resources}}}
          courses {{selection.selected.length, plural, =0 {courses} =1 {course} other {courses}}}
          meetups {{selection.selected.length, plural, =0 {meetups} =1 {meetup} other {meetups}}}
          other {{selection.selected.length, plural, =0 {items} =1 {item} other {items}}}
        } selected
      </span>
    </span>
    <button mat-button mat-dialog-close i18n>Cancel</button>
    <button color="primary" mat-button (click)="ok()" [disabled]="!allowSubmit()" i18n>OK</button>
  </mat-dialog-actions>
</ng-container>