From fa7b90a5846fdc94ecdbc51380a50f7589c8c28a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 20 Dec 2020 01:04:54 -0800
Subject: [PATCH] Add apply button to dropdowns

---
 .../filterable-dropdown/filterable-dropdown.component.html  | 6 ++++++
 .../filterable-dropdown/filterable-dropdown.component.ts    | 4 ++++
 2 files changed, 10 insertions(+)

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 5a05e66b4..58c831456 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
@@ -24,6 +24,12 @@
           <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
+      <button *ngIf="type == types.Editing" class="list-group-item list-group-item-action bg-light" (click)="dropdown.close()" [disabled]="!hasBeenToggled || (toggleableItems | filter: filterText).length == 0">
+        <small class="ml-1" [ngClass]="{'font-weight-bold': hasBeenToggled && (toggleableItems | filter: filterText).length > 0}">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>
+      </button>
     </div>
   </div>
 </div>
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 bec6e1bef..05c77cd10 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
@@ -89,12 +89,15 @@ export class FilterableDropdownComponent {
     return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected.length == 0))
   }
 
+  hasBeenToggled:boolean = false
+
   constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(toggleableItem: ToggleableItem): void {
     if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
       this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
     }
+    this.hasBeenToggled = true
     this.toggle.emit(toggleableItem.item)
   }
 
@@ -103,6 +106,7 @@ export class FilterableDropdownComponent {
       setTimeout(() => {
         this.listFilterTextInput.nativeElement.focus();
       }, 0)
+      this.hasBeenToggled = false
       this.open.next()
     } else {
       this.filterText = ''