adjust filter style and add filter to device list

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

@@ -1,3 +1,7 @@
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
+</mat-form-field>
 <table mat-table class="full-width-table" matSort aria-label="Elements">
   <!-- Id Column -->
   <ng-container matColumnDef="id">
@@ -21,6 +25,6 @@
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"
   [pageSizeOptions]="[25, 50, 100, 250]">
 </mat-paginator>

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

@@ -1,3 +1,8 @@
 .full-width-table {
   width: 100%;
 }
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}

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

@@ -22,6 +22,11 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
 
   constructor(private systemConfigService: SystemConfigService) { };
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
   ngOnInit() {
     this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];

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

@@ -1,6 +1,6 @@
 <mat-form-field>
     <mat-label>Filter</mat-label>
-    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
 </mat-form-field>
 <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
@@ -31,6 +31,6 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"
     [pageSizeOptions]="[25, 50, 100, 250]">
 </mat-paginator>

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

@@ -1,3 +1,8 @@
 .full-width-table {
     width: 100%;
+}
+  
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
 }

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

@@ -17,16 +17,16 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatTable) table: MatTable<Folder>;
   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', 'path', 'state'];
 
   constructor(private systemConfigService: SystemConfigService) { };
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
   ngOnInit() {
     this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];

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

@@ -13,7 +13,6 @@ export class StatusListComponent implements OnInit {
   listType = Type; // used in html
   elevation: string = cardElevation;
   title: string = 'Status';
-  folderList: Type = Type.Folder;
 
   constructor() { }
 

src/app/style.ts

@@ -8,4 +8,4 @@ export const colors: Map<string, string> = new Map([
     ["green", "#56C568"],
     ["grey", "#DDDDDD"],
     ["red", "#EB5757"]
-]); 
+]);