From 447b4cdb987bf0246351886d59b369ed90844843 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 21 Nov 2024 18:50:52 -0800
Subject: [PATCH] Refactor: fix unnecessary use of filterable dropdown sorting
 (#8328)

---
 .../filterable-dropdown.component.html           |  6 +++---
 .../filterable-dropdown.component.spec.ts        |  2 +-
 .../filterable-dropdown.component.ts             | 16 ++++++++++++----
 3 files changed, 16 insertions(+), 8 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 2ef970801..a3b49cf62 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,7 +35,7 @@
       </div>
       @if (selectionModel.items) {
         <div class="items" #buttonItems>
-          @for (item of selectionModel.itemsSorted | filter: filterText:'name'; track item; let i = $index) {
+          @for (item of selectionModel.items | filter: filterText:'name'; track item; let i = $index) {
             @if (allowSelectNone || item.id) {
               <pngx-toggleable-dropdown-button
                 [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggled)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
@@ -45,13 +45,13 @@
         </div>
       }
       @if (editing) {
-        @if ((selectionModel.itemsSorted | filter: filterText:'name').length === 0 && createRef !== undefined) {
+        @if ((selectionModel.items | filter: filterText:'name').length === 0 && createRef !== undefined) {
           <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
             <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
             <i-bs width="1.5em" height="1em" name="plus"></i-bs>
           </button>
         }
-        @if ((selectionModel.itemsSorted | filter: filterText:'name').length > 0) {
+        @if ((selectionModel.items | filter: filterText:'name').length > 0) {
           <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
             <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
             <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
index d1c37bc8b..0e2999742 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
@@ -501,7 +501,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     component.selectionModel = selectionModel
     selectionModel.toggle(items[1].id)
     selectionModel.apply()
-    expect(selectionModel.itemsSorted).toEqual([
+    expect(selectionModel.items).toEqual([
       nullItem,
       { id: null, name: 'Null B' },
       items[1],
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 5e39b1d2d..a23d413d7 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
@@ -43,11 +43,18 @@ export class FilterableDropdownSelectionModel {
   private _intersection: Intersection = Intersection.Include
   temporaryIntersection: Intersection = this._intersection
 
-  items: MatchingModel[] = []
+  private _items: MatchingModel[] = []
+  get items(): MatchingModel[] {
+    return this._items
+  }
 
-  get itemsSorted(): MatchingModel[] {
-    // TODO: this is getting called very often
-    return this.items.sort((a, b) => {
+  set items(items: MatchingModel[]) {
+    this._items = items
+    this.sortItems()
+  }
+
+  private sortItems() {
+    this._items.sort((a, b) => {
       if (a.id == null && b.id != null) {
         return -1
       } else if (a.id != null && b.id == null) {
@@ -291,6 +298,7 @@ export class FilterableDropdownSelectionModel {
     })
     this._logicalOperator = this.temporaryLogicalOperator
     this._intersection = this.temporaryIntersection
+    this.sortItems()
   }
 
   reset(complete: boolean = false) {