Filtering for projects added

src/app/app.module.ts

@@ -207,6 +207,7 @@ import { ConsoleDeviceActionBrowserComponent } from './components/project-map/co
 import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component';
 import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
 import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
+import { ProjectsFilter } from './filters/projectsFilter.pipe';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -320,6 +321,7 @@ if (environment.production) {
     SearchFilter,
     DateFilter,
     NameFilter,
+    ProjectsFilter,
     ListOfSnapshotsComponent,
     CustomAdaptersComponent,
     NodesMenuComponent,

src/app/components/projects/projects.component.css

@@ -7,3 +7,9 @@
     height: 40px;
     margin: 20px;
 }
+
+.full-width {
+    width: 940px;
+    margin-left: -470px;
+    left: 50%;
+}

src/app/components/projects/projects.component.html

@@ -24,9 +24,19 @@
       </button>
     </div>
   </div>
+
+  <form>
+      <mat-form-field class="full-width">
+          <input matInput
+              placeholder="Search by name"
+              [(ngModel)]="searchText"
+              [ngModelOptions]="{standalone: true}">
+      </mat-form-field>
+  </form>
+
   <div class="default-content">
     <div class="mat-elevation-z8">
-      <mat-table #table [dataSource]="dataSource" matSort>
+      <mat-table #table [dataSource]="dataSource | projectsfilter: searchText" matSort>
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
           <mat-cell *matCellDef="let row">

src/app/components/projects/projects.component.ts

@@ -29,6 +29,8 @@ export class ProjectsComponent implements OnInit {
   displayedColumns = ['name', 'actions'];
   settings: Settings;
 
+  searchText: string = '';
+
   @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   constructor(
@@ -157,7 +159,7 @@ export class ProjectDatabase {
 }
 
 export class ProjectDataSource extends DataSource<any> {
-  constructor(private projectDatabase: ProjectDatabase, private sort: MatSort) {
+  constructor(public projectDatabase: ProjectDatabase, private sort: MatSort) {
     super();
   }
 

src/app/filters/projectsFilter.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ProjectDataSource } from '../components/projects/projects.component';
+
+
+@Pipe({
+  name: 'projectsfilter'
+})
+export class ProjectsFilter implements PipeTransform {
+    transform(items: ProjectDataSource, searchText: string) {
+        if(!items) return [];
+        if(!searchText) return items;
+        
+        searchText = searchText.toLowerCase();
+            return items.projectDatabase.data.filter( item => {
+              return item.filename.toLowerCase().includes(searchText);
+            });
+    } 
+}