feat(operators): add searchbar

src/app/operators/operators.component.html

@@ -5,12 +5,18 @@
                [fixedInViewport]="true"
                class="operator-list-sidenav"
                #operatorSidenav>
+    <form>
+      <mat-form-field class="full-width-form">
+        <mat-label>Search</mat-label>
+        <input matInput value="" [formControl]="searchInput">
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+    </form>
     <mat-nav-list *ngFor="let category of categories"
                   class="operator-list">
-      <h3 mat-subheader
-          class="category-subheader">{{ category }}</h3>
+      <h3 mat-subheader class="category-subheader" *ngIf="(groupedOperators[category] | filter: searchInput.value).length > 0">{{ category }}</h3>
       <a mat-list-item
-         *ngFor="let operator of groupedOperators[category]"
+         *ngFor="let operator of groupedOperators[category] | filter: searchInput.value"
          [routerLink]="['/operators', operator.name]"
          routerLinkActive="active">
         {{ operator.name }}

src/app/operators/operators.component.scss

@@ -27,3 +27,9 @@ $subheader-color: #333;
   bottom: 10px;
   z-index: 4;
 }
+
+.full-width-form{
+  width: 95%;
+  height: 48px;
+  padding: 6px;
+}

src/app/operators/operators.component.ts

@@ -15,15 +15,33 @@ import {
   animate,
   transition
 } from '@angular/animations';
-import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { MatSidenav } from '@angular/material';
-import { Subscription } from 'rxjs/Subscription';
 import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
-import { filter, takeUntil } from 'rxjs/operators';
+import {
+  filter,
+  takeUntil,
+  withLatestFrom,
+  flatMap,
+  map,
+  merge,
+  switchAll,
+  toArray,
+  concatAll,
+  reduce,
+  concat,
+  tap,
+  mergeAll,
+  scan,
+  debounce,
+  debounceTime,
+  distinct
+} from 'rxjs/operators';
 import { OperatorDoc } from '../../operator-docs/operator.model';
 import { OperatorMenuService } from '../core/services/operator-menu.service';
+import { FormControl } from '@angular/forms';
+import { of } from 'rxjs/observable/of';
+import { from } from 'rxjs/observable/from';
 
 const OPERATOR_MENU_GAP_LARGE = 64;
 const OPERATOR_MENU_GAP_SMALL = 54;
@@ -66,13 +84,16 @@ export class OperatorsComponent implements OnInit, AfterContentInit, OnDestroy {
   public categories: string[];
   private _onDestroy = new Subject();
 
+  public searchInput: FormControl;
+
   constructor(
     private _breakpointObserver: BreakpointObserver,
     private _operatorMenuService: OperatorMenuService,
     @Inject(OPERATORS_TOKEN) public operators: OperatorDoc[]
   ) {}
 
   ngOnInit() {
+    this.searchInput = new FormControl();
     this.groupedOperators = groupOperatorsByType(this.operators);
     this.categories = Object.keys(this.groupedOperators);
   }

src/app/operators/operators.module.ts

@@ -21,6 +21,8 @@ import { WalkthroughComponent } from './components/walkthrough/walkthrough.compo
 import { HighlightJsDirective } from './directives/highlight-js.directive';
 import { SafeUrlPipe } from './pipes/safe-url.pipe';
 import { MaterialModule } from '../material/material.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FilterPipe } from './pipes/filter.pipe';
 
 @NgModule({
   declarations: [
@@ -35,13 +37,16 @@ import { MaterialModule } from '../material/material.module';
     WalkthroughComponent,
     MarbleDiagramComponent,
     HighlightJsDirective,
-    SafeUrlPipe
+    SafeUrlPipe,
+    FilterPipe
   ],
   imports: [
     CommonModule,
     MaterialModule,
     OperatorsRoutingModule,
     LayoutModule,
+    FormsModule,
+    ReactiveFormsModule,
     TranslateModule
   ],
   providers: [

src/app/operators/pipes/filter.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+  transform(items: any[], filter: string): any {
+    if (!items || !filter) {
+      return items;
+    }
+    return items.filter(item => item.name.indexOf(filter) !== -1);
+  }
+}

src/app/operators/specs/operators.spec.ts

@@ -11,6 +11,7 @@ import {
 } from '../operators.component';
 import { OperatorDoc } from '../../../operator-docs';
 import { OperatorMenuService } from '../../core/services/operator-menu.service';
+import { FilterPipe } from '../pipes/filter.pipe';
 
 const mockActivatedRoute = {
   snapshot: {},
@@ -40,7 +41,7 @@ describe('Operators', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [RouterTestingModule, LayoutModule],
-        declarations: [OperatorsComponent],
+        declarations: [OperatorsComponent, FilterPipe],
         providers: [
           OperatorMenuService,
           { provide: OPERATORS_TOKEN, useValue: mockOperators },