From 79059b9aa76b7078b652ebd3d5adffe9c490a2fe Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Wed, 20 Jan 2021 16:21:12 -0800
Subject: [PATCH] changed event for toggling operator

---
 .../filterable-dropdown.component.html         |  2 +-
 .../filterable-dropdown.component.ts           | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index df9aa9a5a..46fcf2164 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -13,7 +13,7 @@
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <div *ngIf="!editing && multiple" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator">
+        <div class="btn-group btn-group-xs btn-group-toggle flex-fill" ngbRadioGroup [(ngModel)]="selectionModel.logicalOperator" (change)="selectionModel.toggleOperator()">
           <label ngbButtonLabel class="btn btn-outline-primary">
             <input ngbButton type="radio" name="logicalOperator" value="and"> All
           </label>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
index 55526ae7b..a0a3ba459 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -15,7 +15,8 @@ export class FilterableDropdownSelectionModel {
   changed = new Subject<FilterableDropdownSelectionModel>()
 
   multiple = false
-  logicalOperator = 'and'
+  private _logicalOperator = 'and'
+  temporaryLogicalOperator = this._logicalOperator
 
   items: MatchingModel[] = []
 
@@ -91,6 +92,18 @@ export class FilterableDropdownSelectionModel {
     return this.selectionStates.get(id) || ToggleableItemState.NotSelected
   }
 
+  get logicalOperator(): string {
+    return this.temporaryLogicalOperator
+  }
+
+  set logicalOperator(operator: string) {
+    this.temporaryLogicalOperator = operator
+  }
+
+  toggleOperator() {
+    this.changed.next(this)
+  }
+
   get(id: number) {
     return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
   }
@@ -111,6 +124,8 @@ export class FilterableDropdownSelectionModel {
       return true
     } else if (!Array.from(this.selectionStates.keys()).every(id => this.selectionStates.get(id) == this.temporarySelectionStates.get(id))) {
       return true
+    } else if (this.temporaryLogicalOperator !== this._logicalOperator) {
+      return true
     } else {
       return false
     }
@@ -130,6 +145,7 @@ export class FilterableDropdownSelectionModel {
     this.temporarySelectionStates.forEach((value, key) => {
       this.selectionStates.set(key, value)
     })
+    this._logicalOperator = this.temporaryLogicalOperator
   }
 
   reset() {