nycJSorg/angular-presentation

<div no-padding>
  <div>
    <mat-form-field>
      <mat-label>Feedback</mat-label>
      <mat-select
        [value]="filter$ | async"
        (selectionChange)="this.filter$.next($event.value)"
      >
        <mat-option value="all">All</mat-option>
        <mat-option value="done">Done</mat-option>
        <mat-option value="notDone">Undone</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Group by</mat-label>
      <mat-select
        [value]="group$ | async"
        (selectionChange)="group$.next($event.value)"
      >
        <mat-option value="nothing">Do not group</mat-option>
        <mat-option value="href">Slide URL</mat-option>
        <mat-option value="name">Name</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <input
        matInput
        [matDatepicker]="picker"
        placeholder="From"
        [(ngModel)]="datesForFilter.dateFrom"
        (dateChange)="changeDate()"
      />
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-form-field>
      <input
        matInput
        [matDatepicker]="picker2"
        placeholder="To"
        [(ngModel)]="datesForFilter.dateTo"
        (dateChange)="changeDate()"
      />
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
    </mat-form-field>
    <button mat-button (click)="clearDate()">Clear</button>
  </div>

  <div>
    <div *ngFor="let item of this.messages$ | async" class="panel">
      <mat-expansion-panel [expanded]="true" [hideToggle]="true">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <h3>{{ item.key }}</h3>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <codelab-feedback-message-table
          [dataSource]="item.value"
        ></codelab-feedback-message-table>
      </mat-expansion-panel>
    </div>
  </div>
</div>