start of list filtering

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
+import { MatInputModule } from '@angular/material/input';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCardModule } from '@angular/material/card';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -15,7 +16,6 @@ import { AppComponent } from './app.component';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StatusListComponent } from './lists/status-list/status-list.component';
-import { FolderListComponent } from './lists/folder-list/folder-list.component';
 import { DeviceListComponent } from './lists/device-list/device-list.component';
 import { DonutChartComponent } from './charts/donut-chart/donut-chart.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
@@ -28,23 +28,25 @@ import { deviceID } from './api-utils';
 import { environment } from '../environments/environment';
 import { ChartItemComponent } from './charts/chart-item/chart-item.component';
 import { ChartComponent } from './charts/chart/chart.component';
+import { FolderListComponent } from './lists/folder-list/folder-list.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     StatusListComponent,
-    FolderListComponent,
     DeviceListComponent,
     ListToggleComponent,
     DashboardComponent,
     DonutChartComponent,
     ChartComponent,
     ChartItemComponent,
+    FolderListComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
+    MatInputModule,
     MatTableModule,
     MatPaginatorModule,
     MatSortModule,

src/app/lists/device-list/device-list.component.html

@@ -1,22 +1,20 @@
-<div class="{{elevation}}">
-  <table mat-table class="full-width-table" matSort aria-label="Elements">
-    <!-- Id Column -->
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
-      <td mat-cell *matCellDef="let row">{{row.deviceID}}</td>
-    </ng-container>
+<table mat-table class="full-width-table" matSort aria-label="Elements">
+  <!-- Id Column -->
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
+    <td mat-cell *matCellDef="let row">{{row.deviceID}}</td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
-      <td mat-cell *matCellDef="let row">{{row.name}}</td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+    <td mat-cell *matCellDef="let row">{{row.name}}</td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
 
-  <mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
-    [pageSizeOptions]="[25, 50, 100, 250]">
-  </mat-paginator>
-</div>
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
+  [pageSizeOptions]="[25, 50, 100, 250]">
+</mat-paginator>

src/app/lists/device-list/device-list.component.ts

@@ -1,13 +1,10 @@
 import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTable } from '@angular/material/table';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 
-import { DeviceListDataSource } from './device-list-datasource';
 import Device from '../../device';
 import { SystemConfigService } from '../../services/system-config.service';
-import { dataTableElevation } from '../../style';
-import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-device-list',
@@ -18,8 +15,7 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Device>;
-  dataSource: DeviceListDataSource;
-  elevation: string = dataTableElevation;
+  dataSource: MatTableDataSource<Device>;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'name'];
@@ -27,14 +23,12 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
   constructor(private systemConfigService: SystemConfigService) { };
 
   ngOnInit() {
-    this.dataSource = new DeviceListDataSource(this.systemConfigService);
-    this.dataSource.dataSubject = new Subject<Device[]>()
+    this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];
 
     this.systemConfigService.getDevices().subscribe(
       data => {
         this.dataSource.data = data;
-        this.dataSource.dataSubject.next(data);
       }
     );
   }

src/app/lists/folder-list/folder-list-datasource.ts

@@ -1,82 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-
-import { map } from 'rxjs/operators';
-import { Observable, of as observableOf, merge, Subject } from 'rxjs';
-import Folder from '../../folder';
-import { SystemConfigService } from '../../services/system-config.service';
-
-/**
- * Data source for the FolderList view. This class should
- * encapsulate all logic for fetching and manipulating the displayed data
- * (including sorting, pagination, and filtering).
- */
-export class FolderListDataSource extends DataSource<Folder>  {
-  data: Folder[];
-  dataSubject: Subject<Folder[]>;
-  paginator: MatPaginator;
-  sort: MatSort;
-
-  constructor(private systemConfigService: SystemConfigService) {
-    super();
-  }
-
-  /**
-   * Connect this data source to the table. The table will only update when
-   * the returned stream emits new items.
-   * @returns A stream of the items to be rendered.
-   */
-  connect(): Observable<Folder[]> {
-    // Combine everything that affects the rendered data into one update
-    // st
-    const dataMutations = [
-      this.dataSubject,
-      observableOf(this.data),
-      this.paginator.page,
-      this.sort.sortChange
-    ];
-
-    return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData([...this.data]));
-    }));
-  }
-
-  /**
-   *  Called when the table is being destroyed. Use this function, to clean up
-   * any open connections or free any held resources that were set up during connect.
-   */
-  disconnect() { }
-
-  /**
-   * Paginate the data (client-side). If you're using server-side pagination,
-   * this would be replaced by requesting the appropriate data from the server.
-   */
-  private getPagedData(data: Folder[]) {
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  /**
-   * Sort the data (client-side). If you're using server-side sorting,
-   * this would be replaced by requesting the appropriate data from the server.
-   */
-  private getSortedData(data: Folder[]) {
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    return data.sort((a, b) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
-        case 'label': return compare(a.label, b.label, isAsc);
-        case 'id': return compare(+a.id, +b.id, isAsc);
-        default: return 0;
-      }
-    });
-  }
-}
-
-function compare(a: string | number, b: string | number, isAsc: boolean) {
-  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}

src/app/lists/folder-list/folder-list.component.html

@@ -1,22 +1,24 @@
-<div class="{{elevation}}">
-  <table mat-table class="full-width-table" matSort aria-label="Elements">
+<mat-form-field>
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
+</mat-form-field>
+<table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
     <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
-      <td mat-cell *matCellDef="let row">{{row.id}}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
+        <td mat-cell *matCellDef="let row">{{row.id}}</td>
     </ng-container>
 
-    <!-- Label Column -->
+    <!-- Name Column -->
     <ng-container matColumnDef="label">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Label</th>
-      <td mat-cell *matCellDef="let row">{{row.label}}</td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let row">{{row.label}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+</table>
 
-  <mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
     [pageSizeOptions]="[25, 50, 100, 250]">
-  </mat-paginator>
-</div>
+</mat-paginator>

src/app/lists/folder-list/folder-list.component.scss

@@ -1,3 +1,3 @@
 .full-width-table {
-  width: 100%;
-}
+    width: 100%;
+}

src/app/lists/folder-list/folder-list.component.spec.ts

@@ -1,8 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
 
 import { FolderListComponent } from './folder-list.component';
 
@@ -12,14 +8,9 @@ describe('FolderListComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [FolderListComponent],
-      imports: [
-        NoopAnimationsModule,
-        MatPaginatorModule,
-        MatSortModule,
-        MatTableModule,
-      ]
-    }).compileComponents();
+      declarations: [ FolderListComponent ]
+    })
+    .compileComponents();
   }));
 
   beforeEach(() => {
@@ -28,7 +19,7 @@ describe('FolderListComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should compile', () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/lists/folder-list/folder-list.component.ts

@@ -1,13 +1,10 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, Input } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTable } from '@angular/material/table';
+import { MatTable, MatTableDataSource } from '@angular/material/table';
 
-import { FolderListDataSource } from './folder-list-datasource';
 import Folder from '../../folder';
 import { SystemConfigService } from '../../services/system-config.service';
-import { dataTableElevation } from '../../style';
-import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-folder-list',
@@ -18,8 +15,12 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Folder>;
-  dataSource: FolderListDataSource;
-  elevation: string = dataTableElevation;
+  dataSource: MatTableDataSource<Folder>;
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'label'];
@@ -27,14 +28,12 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   constructor(private systemConfigService: SystemConfigService) { };
 
   ngOnInit() {
-    this.dataSource = new FolderListDataSource(this.systemConfigService);
-    this.dataSource.dataSubject = new Subject<Folder[]>();
+    this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];
 
     this.systemConfigService.getFolders().subscribe(
       data => {
         this.dataSource.data = data;
-        this.dataSource.dataSubject.next(data);
       }
     );
   }
@@ -44,4 +43,4 @@ export class FolderListComponent implements AfterViewInit, OnInit {
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
   }
-}
+}