add filter service and enable chart states to filter lists

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

@@ -1,10 +1,12 @@
-import { AfterViewInit, Component, OnInit, ViewChild, Input } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 
 import Folder from '../../folder';
 import { SystemConfigService } from '../../services/system-config.service';
+import { FilterService } from 'src/app/services/filter.service';
+import { StType } from 'src/app/type';
 
 @Component({
   selector: 'app-folder-list',
@@ -16,11 +18,17 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatTable) table: MatTable<Folder>;
   dataSource: MatTableDataSource<Folder>;
+  filterValue: string = "";
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'label', 'path', 'state'];
 
-  constructor(private systemConfigService: SystemConfigService) { };
+  constructor(
+    private systemConfigService: SystemConfigService,
+    private filterService: FilterService,
+    private cdr: ChangeDetectorRef,
+  ) {
+  };
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
@@ -42,5 +50,16 @@ export class FolderListComponent implements AfterViewInit, OnInit {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
+
+    // Listen for filter changes from other components
+    this.filterService.filterChanged$
+      .subscribe(
+        input => {
+          if (input.type === StType.Folder) {
+            this.dataSource.filter = input.text.trim().toLowerCase();
+            this.filterValue = input.text;
+            this.cdr.detectChanges();
+          }
+        });
   }
 }