Added Simple Search

src/app/workflow-spec-list/workflow-spec-list.component.html

@@ -9,6 +9,14 @@
       <mat-icon>post_add</mat-icon>
       Add category
     </button>
+    <form class="form-inline">
+      <div class="form-group">
+        <input type="search"
+               class="form-control"
+               placeholder="Enter search string"
+               [formControl]="searchField">
+      </div>
+    </form>
   </div>
   <mat-drawer-container class="example-container" autosize>
     <mat-drawer #drawer class="example-sidenav" mode="side" opened="true">
@@ -25,6 +33,8 @@
       <mat-divider></mat-divider>
 
       <ng-container *ngFor="let cat of workflowSpecsByCategory">
+
+        <div *ngIf="!(searchField.value && cat.workflow_specs.length === 0)">
         <ng-container *ngIf="!(cat.id === null && cat.workflow_specs.length === 0)">
           <div class="category" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center">
             <h4>{{cat.display_name}} ({{cat.name}})</h4>
@@ -87,6 +97,7 @@
 
           <div *ngIf="cat.workflow_specs.length === 0">No workflow specs in this category</div>
         </ng-container>
+        </div>
       </ng-container>
     </mat-drawer>
 

src/app/workflow-spec-list/workflow-spec-list.component.ts

@@ -23,9 +23,10 @@ import {
 } from '../_interfaces/dialog-data';
 import {ApiErrorsComponent} from 'sartography-workflow-lib';
 import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, map, switchMap, tap} from 'rxjs/operators';
 import {Location} from '@angular/common';
 import {environment} from '../../environments/environment.runtime';
+import { FormControl } from '@angular/forms';
 
 
 export interface WorkflowSpecCategoryGroup {
@@ -50,6 +51,7 @@ export class WorkflowSpecListComponent implements OnInit {
   categories: WorkflowSpecCategory[];
   moveUp = moveArrayElementUp;
   moveDown = moveArrayElementDown;
+  private searchField: FormControl;
 
   constructor(
     private api: ApiService,
@@ -69,6 +71,11 @@ export class WorkflowSpecListComponent implements OnInit {
         this._loadWorkflowSpecCategories();
       }
     });
+    this.searchField = new FormControl();
+    this.searchField.valueChanges.subscribe(value => {
+      this._loadWorkflowSpecs(null,value);
+      console.log(value);
+    });
   }
 
   validateWorkflowSpec(wfs: WorkflowSpec) {
@@ -196,9 +203,9 @@ export class WorkflowSpecListComponent implements OnInit {
 
       this._loadWorkflowSpecs(selectedSpecName);
     });
-  }
+  } 
 
-  private _loadWorkflowSpecs(selectedSpecName: String = null) {
+  private _loadWorkflowSpecs(selectedSpecName: String = null, searchSpecName: String = null) {
 
     this.api.getWorkflowSpecList().subscribe(wfs => {
       this.workflowSpecs = wfs;
@@ -209,7 +216,12 @@ export class WorkflowSpecListComponent implements OnInit {
             if (wf.is_master_spec) {
               this.masterStatusSpec = wf;
             } else {
-              return wf.category_id === cat.id;
+              if (searchSpecName){
+                return (wf.category_id === cat.id) && wf.display_name.toLowerCase().includes(searchSpecName.toLowerCase());
+              }
+              else {
+                return wf.category_id === cat.id;
+              } 
             }
           })
           .sort(this.sortByDisplayOrder);