Appliances filtering

src/app/appliance/appliance-list-dialog/appliance-list-dialog.component.html

@@ -17,5 +17,5 @@
     </mat-table>
 </div>
 <div mat-dialog-actions align="end">
-  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
+  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
 </div>

src/app/appliance/appliance-list-dialog/appliance-list-dialog.component.ts

@@ -22,6 +22,7 @@ import 'rxjs/add/observable/fromEvent';
 })
 export class ApplianceListDialogComponent implements OnInit {
   server: Server;
+  applianceDatabase: ApplianceDatabase;
   dataSource: ApplianceDataSource;
   displayedColumns = ['name'];
 
@@ -35,7 +36,8 @@ export class ApplianceListDialogComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.dataSource = new ApplianceDataSource(this.server, this.applianceService);
+    this.applianceDatabase = new ApplianceDatabase(this.server, this.applianceService);
+    this.dataSource = new ApplianceDataSource(this.applianceDatabase);
 
     Observable.fromEvent(this.filter.nativeElement, 'keyup')
       .debounceTime(150)
@@ -51,27 +53,53 @@ export class ApplianceListDialogComponent implements OnInit {
     this.dialogRef.close();
   }
 
-  applyFilter(filterValue: string) {
+  //
-    filterValue = filterValue.trim(); // Remove whitespace
+  // applyFilter(filterValue: string) {
-    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+  //   filterValue = filterValue.trim(); // Remove whitespace
-    this.dataSource.filter = filterValue;
+  //   filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
-  }
+  //   this.dataSource.filter = filterValue;
+  // }
 
 }
 
 
+export class ApplianceDatabase {
+  dataChange: BehaviorSubject<Appliance[]> = new BehaviorSubject<Appliance[]>([]);
+
+  get data(): Appliance[] {
+    return this.dataChange.value;
+  }
+
+  constructor(private server: Server, private applianceService: ApplianceService) {
+    this.applianceService.list(this.server).subscribe((appliances: Appliance[]) => {
+      this.dataChange.next(appliances);
+    });
+  }
+
+};
+
 export class ApplianceDataSource extends DataSource<Appliance> {
   filterChange = new BehaviorSubject('');
 
   get filter(): string { return this.filterChange.value; }
   set filter(filter: string) { this.filterChange.next(filter); }
 
-  constructor(private server: Server, private applianceService: ApplianceService) {
+  constructor(private applianceDatabase: ApplianceDatabase) {
     super();
   }
 
   connect(): Observable<Appliance[]> {
-    return this.applianceService.list(this.server);
+    const displayDataChanges = [
+      this.applianceDatabase.dataChange,
+      this.filterChange,
+    ];
+
+    return Observable.merge(...displayDataChanges).map(() => {
+      return this.applianceDatabase.data.slice().filter((item: Appliance) => {
+        const searchStr = (item.name).toLowerCase();
+        return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
+      });
+    });
   }
 
   disconnect() {}

src/app/appliance/appliance.component.ts

@@ -20,6 +20,7 @@ export class ApplianceComponent implements OnInit {
   listAppliancesModal() {
     const dialogRef = this.dialog.open(ApplianceListDialogComponent, {
       width: '600px',
+      height: '560px',
       data: {
         'server': this.server
       }