Refactor SlectableItem to ToggleableItem

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

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { SelectableItem, SelectableItemState } from '../filterable-dropdown.component';
+import { ToggleableItem, ToggleableItemState } from '../filterable-dropdown.component';
 
 @Component({
   selector: 'app-filterable-dropdown-button',
@@ -12,10 +12,10 @@ import { SelectableItem, SelectableItemState } from '../filterable-dropdown.comp
 export class FilterableDropdownButtonComponent implements OnInit {
 
   @Input()
-  selectableItem: SelectableItem
+  toggleableItem: ToggleableItem
 
   get item(): PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent {
-    return this.selectableItem?.item
+    return this.toggleableItem?.item
   }
 
   @Output()
@@ -28,14 +28,14 @@ export class FilterableDropdownButtonComponent implements OnInit {
   }
 
   toggleItem(): void {
-    this.selectableItem.state = (this.selectableItem.state == SelectableItemState.NotSelected || this.selectableItem.state == SelectableItemState.PartiallySelected) ? SelectableItemState.Selected : SelectableItemState.NotSelected
-    this.toggle.emit(this.selectableItem)
+    this.toggleableItem.state = (this.toggleableItem.state == ToggleableItemState.NotSelected || this.toggleableItem.state == ToggleableItemState.PartiallySelected) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
+    this.toggle.emit(this.toggleableItem)
   }
 
   getSelectedIconName() {
     let iconName = ''
-    if (this.selectableItem?.state == SelectableItemState.Selected) iconName = 'check'
-    else if (this.selectableItem?.state == SelectableItemState.PartiallySelected) iconName = 'dash'
+    if (this.toggleableItem?.state == ToggleableItemState.Selected) iconName = 'check'
+    else if (this.toggleableItem?.state == ToggleableItemState.PartiallySelected) iconName = 'dash'
     return iconName
   }
 }

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

@@ -19,9 +19,9 @@
           <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
         </div>
       </div>
-      <div *ngIf="selectableItems" class="items">
-        <ng-container *ngFor="let selectableItem of selectableItems | filter: filterText">
-          <app-filterable-dropdown-button [selectableItem]="selectableItem" (toggle)="toggleItem($event)"></app-filterable-dropdown-button>
+      <div *ngIf="toggleableItems" class="items">
+        <ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
+          <app-filterable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></app-filterable-dropdown-button>
         </ng-container>
       </div>
     </div>

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

@@ -6,12 +6,12 @@ import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { FilterPipe } from  'src/app/pipes/filter.pipe';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 
-export interface SelectableItem {
+export interface ToggleableItem {
   item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
-  state: SelectableItemState
+  state: ToggleableItemState
 }
 
-export enum SelectableItemState {
+export enum ToggleableItemState {
   NotSelected = 0,
   Selected = 1,
   PartiallySelected = 2
@@ -37,33 +37,33 @@ export class FilterableDropdownComponent {
   @Input()
   set items(items: ObjectWithId[]) {
     if (items) {
-      this._selectableItems = items.map(i => {
-        return {item: i, state: SelectableItemState.NotSelected}
+      this._toggleableItems = items.map(i => {
+        return {item: i, state: ToggleableItemState.NotSelected}
       })
     }
   }
 
-  _selectableItems: SelectableItem[] = []
+  _toggleableItems: ToggleableItem[] = []
 
   @Input()
-  set selectableItems (selectableItems: SelectableItem[]) {
+  set toggleableItems (toggleableItems: ToggleableItem[]) {
     if (this.type == FilterableDropdownType.Editing && this.dropdown?.isOpen()) return
-    else this._selectableItems = selectableItems
+    else this._toggleableItems = toggleableItems
   }
 
-  get selectableItems(): SelectableItem[] {
-    return this._selectableItems
+  get toggleableItems(): ToggleableItem[] {
+    return this._toggleableItems
   }
 
   @Input()
   set itemsSelected(itemsSelected: ObjectWithId[]) {
-    this.selectableItems.forEach(i => {
-      i.state = (itemsSelected.find(is => is.id == i.item.id)) ? SelectableItemState.Selected : SelectableItemState.NotSelected
+    this.toggleableItems.forEach(i => {
+      i.state = (itemsSelected.find(is => is.id == i.item.id)) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
     })
   }
 
   get itemsSelected() :ObjectWithId[] {
-    return this.selectableItems.filter(si => si.state == SelectableItemState.Selected).map(si => si.item)
+    return this.toggleableItems.filter(si => si.state == ToggleableItemState.Selected).map(si => si.item)
   }
 
   @Input()
@@ -91,11 +91,11 @@ export class FilterableDropdownComponent {
 
   constructor(private filterPipe: FilterPipe) { }
 
-  toggleItem(selectableItem: SelectableItem): void {
-    if (this.singular && selectableItem.state == SelectableItemState.Selected) {
-      this._selectableItems.filter(si => si.item.id !== selectableItem.item.id).forEach(si => si.state = SelectableItemState.NotSelected)
+  toggleItem(toggleableItem: ToggleableItem): void {
+    if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
+      this._toggleableItems.filter(si => si.item.id !== toggleableItem.item.id).forEach(si => si.state = ToggleableItemState.NotSelected)
     }
-    this.toggle.emit(selectableItem.item)
+    this.toggle.emit(toggleableItem.item)
   }
 
   dropdownOpenChange(open: boolean): void {
@@ -111,7 +111,7 @@ export class FilterableDropdownComponent {
   }
 
   listFilterEnter(): void {
-    let filtered = this.filterPipe.transform(this.selectableItems, this.filterText)
+    let filtered = this.filterPipe.transform(this.toggleableItems, this.filterText)
     if (filtered.length == 1) this.toggleItem(filtered.shift())
     this.dropdown.close()
   }