From 7049d04d71283f3bdab862257d95f65d27858513 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 20 Feb 2022 01:08:42 -0800
Subject: [PATCH] Reduce calls to isDirty for filterable dropdowns

And make disabled more visually obvious
---
 .../filterable-dropdown/filterable-dropdown.component.html   | 4 ++--
 .../filterable-dropdown/filterable-dropdown.component.scss   | 4 ++++
 .../filterable-dropdown/filterable-dropdown.component.ts     | 5 +++++
 3 files changed, 11 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 bff646ce8..babf25588 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
@@ -35,8 +35,8 @@
           <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
-      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
-        <small class="ms-2" [ngClass]="{'fw-bold': selectionModel.isDirty()}" i18n>Apply</small>
+      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty">
+        <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
         <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
         </svg>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
index e728ca16b..23f39fad3 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
@@ -13,6 +13,10 @@
     max-height: 400px;
     overflow-y: scroll;
   }
+
+  button:disabled {
+    opacity: 0.2;
+  }
 }
 
 .btn-group-xs {
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 413f2fdb6..c3b4c890b 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
@@ -275,8 +275,13 @@ export class FilterableDropdownComponent {
     return this.selectionModel.selectionSize() > 1 && this.selectionModel.getExcludedItems().length == 0
   }
 
+  modelIsDirty: boolean = false
+
   constructor(private filterPipe: FilterPipe) {
     this.selectionModel = new FilterableDropdownSelectionModel()
+    this.selectionModelChange.subscribe(updatedModel => {
+      this.modelIsDirty = updatedModel.isDirty()
+    })
   }
 
   applyClicked() {