selection model

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -20,8 +20,8 @@
         </div>
       </div>
       <div *ngIf="selectionModel.items" class="items">
-        <ng-container *ngFor="let toggleableItem of selectionModel.items | filter: filterText">
-          <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="selectionModel.toggle(toggleableItem.item)"></app-toggleable-dropdown-button>
+        <ng-container *ngFor="let item of selectionModel.items | filter: filterText">
+          <app-toggleable-dropdown-button [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></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">

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -4,6 +4,7 @@ import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { ToggleableItem, ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
 import { MatchingModel } from 'src/app/data/matching-model';
 import { Subject } from 'rxjs';
+import { ThrowStmt } from '@angular/compiler';
 
 export enum FilterableDropdownType {
   Filtering = 'filtering',
@@ -16,39 +17,56 @@ export class FilterableDropdownSelectionModel {
 
   multiple = false
 
-  items: ToggleableItem[] = []
+  items: MatchingModel[] = []
 
-  getSelected() {
-    return this.items.filter(i => i.state == ToggleableItemState.Selected).map(i => i.item)
+  selection = new Map<number, ToggleableItemState>()
+
+  getSelectedItems() {
+    return this.items.filter(i => this.selection.get(i.id) == ToggleableItemState.Selected)
   }
 
-
-
-  toggle(item: MatchingModel, fireEvent = true) {
-    console.log("TOGGLE TAG")
-    let toggleableItem = this.items.find(i => i.item == item)
-    console.log(toggleableItem)
-
-    if (toggleableItem) {
-      if (toggleableItem.state == ToggleableItemState.Selected) {
-        toggleableItem.state = ToggleableItemState.NotSelected
-      } else {
-        this.items.forEach(i => {
-          if (i.item == item) {
-            i.state = ToggleableItemState.Selected
-          } else if (!this.multiple) {
-            i.state = ToggleableItemState.NotSelected
-          }
-        })
-      }
-      if (fireEvent) {
-        this.changed.next(this)
-      }
+  set(id: number, state: ToggleableItemState, fireEvent = true) {
+    this.selection.set(id, state)
+    if (fireEvent) {
+      this.changed.next(this)
     }
   }
 
+  toggle(id: number, fireEvent = true) {
+    let state = this.selection.get(id)
+    if (state == null || state != ToggleableItemState.Selected) {
+      this.selection.set(id, ToggleableItemState.Selected)
+    } else if (state == ToggleableItemState.Selected) {
+      this.selection.set(id, ToggleableItemState.NotSelected)
+    }
+
+    if (!this.multiple) {
+      for (let key of this.selection.keys()) {
+        if (key != id) {
+          this.selection.set(key, ToggleableItemState.NotSelected)
+        }
+      }
+    }
+
+    if (fireEvent) {
+      this.changed.next(this)
+    }
+    
+  }
+
+  get(id: number) {
+    return this.selection.get(id) || ToggleableItemState.NotSelected
+  }
+
   selectionSize() {
-    return this.getSelected().length
+    return this.getSelectedItems().length
+  }
+
+  clear(fireEvent = true) {
+    this.selection.clear()
+    if (fireEvent) {
+      this.changed.next(this)
+    }
   }
 }
 
@@ -67,14 +85,12 @@ export class FilterableDropdownComponent {
   @Input()
   set items(items: MatchingModel[]) {
     if (items) {
-      this._selectionModel.items = items.map(i => {
-        return {item: i, state: ToggleableItemState.NotSelected, count: i.document_count}
-      })
+      this._selectionModel.items = items
     }
   }
 
   get items(): MatchingModel[] {
-    return this._selectionModel.items.map(i => i.item)
+    return this._selectionModel.items
   }
 
   _selectionModel = new FilterableDropdownSelectionModel()

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html

@@ -5,8 +5,8 @@
     </svg>
   </div>
   <div class="mr-1">
-    <app-tag *ngIf="isTag; else displayName" [tag]="toggleableItem?.item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
-    <ng-template #displayName><small>{{toggleableItem?.item.name}}</small></ng-template>
+    <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
+    <ng-template #displayName><small>{{item.name}}</small></ng-template>
   </div>
-  <div class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.count}}</div>
+  <div class="badge badge-light rounded-pill ml-auto mr-1">{{item.document_count}}</div>
 </button>

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts

@@ -21,13 +21,19 @@ export enum ToggleableItemState {
 export class ToggleableDropdownButtonComponent {
 
   @Input()
-  toggleableItem: ToggleableItem
+  item: MatchingModel
+
+  @Input()
+  state: ToggleableItemState
+
+  @Input()
+  count: number
 
   @Output()
   toggle = new EventEmitter()
 
   get isTag(): boolean {
-    return 'is_inbox_tag' in this.toggleableItem?.item // ~ this.item instanceof PaperlessTag
+    return 'is_inbox_tag' in this.item
   }
 
   toggleItem(): void {
@@ -35,9 +41,9 @@ export class ToggleableDropdownButtonComponent {
   }
 
   getSelectedIconName() {
-    if (this.toggleableItem?.state == ToggleableItemState.Selected) {
+    if (this.state == ToggleableItemState.Selected) {
       return "check"
-    } else if (this.toggleableItem?.state == ToggleableItemState.PartiallySelected) {
+    } else if (this.state == ToggleableItemState.PartiallySelected) {
       return "dash"
     } else {
       return ""