Initial filter button, the logic needs to use the execution status name added by the sorting task

apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.html

@@ -50,7 +50,7 @@
 <br />
 
 <div>
-  <app-filter-menu *ngIf="showFilterMenu" [state]="statesToFilter" [daStaff]="qaStaff['DA']" [aodStaff]="qaStaff['AOD']" [srdpStatus]="srdpOptions" [filters]="filters" (filterMenuEventEmitter)="emitFilterEvent($event)"></app-filter-menu>
+  <app-filter-menu *ngIf="showFilterMenu" [state]="statesToFilter" [exec_status]="execStatusToFilter" [daStaff]="qaStaff['DA']" [aodStaff]="qaStaff['AOD']" [srdpStatus]="srdpOptions" [filters]="filters" (filterMenuEventEmitter)="emitFilterEvent($event)"></app-filter-menu>
   <mat-paginator #requestPaginator
     [length]="(sortedActiveRequests$ | async)?.length"
     [pageSize]="pageSize"
@@ -82,6 +82,9 @@
           ><i class="text-dark small fas fa-arrow-up"></i
           ></span>
         </button>
+        <button class="btn bg-transparent border-0 btn-light btn-sm" (click)="toggleFilterMenu()">
+          <span><i class="text-dark small fas fa-filter"></i></span>
+        </button>
       </th>
       <th>SDM ID</th>
       <th>Bands</th>

apps/web/src/app/workspaces/components/active-capability-requests/active-capability-requests.component.ts

@@ -88,6 +88,7 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
 
   // Filter sets
   public statesSet = new Set<string>();
+  public execStatusSet = new Set<string>();
   public daSet = new Set<string>();
   public aodSet = new Set<string>();
   public srdpSet = new Set<string>();
@@ -123,6 +124,12 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
     {"name":"Cancelled"},
     {"name":"Failed"},
   ]
+  public execStatusToFilter = [
+    {"name":"Queued", "filter_val":"Queued"},
+    {"name":"Executing", "filter_val":"Executing"},
+    {"name":"Error", "filter_val":"Error"},
+    {"name":"latest version has not been submitted", "filter_val":"latest version has not been submitted"},
+  ]
   public srdpOptions = [
     {"name":"true"},
     {"name":"false"},
@@ -274,6 +281,7 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
   private setupAvailableFilters() {
     this.availableFilters = {
       'state': this.statesToFilter,
+      'exec_status': this.execStatusToFilter,
       'is_srdp': this.srdpOptions,
       'obs_min': this.obsDateOptions,
       'obs_max': this.obsDateOptions
@@ -595,6 +603,8 @@ export class ActiveCapabilityRequestsComponent implements OnInit, OnDestroy {
     switch(s) {
       case "state":
         return this.statesSet
+      case "exec_status":
+        return this.execStatusSet
       case "assigned_da":
         return this.daSet
       case "assigned_aod":

apps/web/src/app/workspaces/components/active-capability-requests/components/filter-menu/filter-menu.component.html

@@ -8,6 +8,14 @@
     </div>
   </div>
 
+  <div class="bg-light p-2">
+    <p>Execution Status</p>
+    <div *ngFor="let s of exec_status" class="form-check">
+      <input class="form-check-input" type="checkbox" [id]="s.name" [value]="s.filter_val" (change)="addFilter(s.filter_val, 'exec_status', $event.target.checked)" [checked]="s.isChecked" />
+      <label class="form-check-label" [for]="s.name">{{s.name}}</label>
+    </div>
+  </div>
+
   <div class="bg-light p-2">
     <p>DA staff</p>
     <div *ngFor="let da of daStaff" class="form-check">

apps/web/src/app/workspaces/components/active-capability-requests/components/filter-menu/filter-menu.component.ts

@@ -34,6 +34,7 @@ export interface Filter {
 
 export class FilterMenuComponent implements OnInit {
   @Input() state: any;
+  @Input() exec_status: any;
   @Input() daStaff: any;
   @Input() aodStaff: any;
   @Input() srdpStatus: any;