nycJSorg/angular-presentation

<mat-card>
  <table
    mat-table
    [dataSource]="sessionsService.sessions$ | async"
    class="mat-elevation-z8"
  >
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let session">{{ session.config.name }}</td>
    </ng-container>

    <ng-container matColumnDef="key">
      <th mat-header-cell *matHeaderCellDef>Key</th>
      <td mat-cell *matCellDef="let session">{{ session.key }}</td>
    </ng-container>

    <ng-container matColumnDef="owner">
      <th mat-header-cell *matHeaderCellDef>Owner</th>
      <td mat-cell *matCellDef="let session">{{ session.config.owner }}</td>
    </ng-container>

    <ng-container matColumnDef="active">
      <th mat-header-cell *matHeaderCellDef>active</th>
      <td mat-cell *matCellDef="let session">
        <button mat-button (click)="sessionsService.flipActive(session.key)">
          {{ session.config.active ? '✅' : '' }}
        </button>
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let session">
        <button mat-button (click)="remove(session.key)">ⓧ</button>
      </td>
    </ng-container>

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

  <mat-card-actions>
    <label for="session-name">Session Name</label>
    <input
      id="session-name"
      type="text"
      matInput
      #sessionName
      value="default"
      required
    />
    <button
      mat-raised-button
      (click)="sessionsService.create(sessionName.value)"
    >
      New session
    </button>
  </mat-card-actions>
</mat-card>