Live filter badges when editing & hide badges when active filter items in dropdown

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

@@ -21,7 +21,7 @@
       </div>
       <div *ngIf="toggleableItems" class="items">
         <ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
-          <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
+          <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
     </div>

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

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
-import { ObjectWithId } from 'src/app/data/object-with-id';
 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';
@@ -25,10 +24,10 @@ export class FilterableDropdownComponent {
   filterText: string
 
   @Input()
-  set items(items: ObjectWithId[]) {
+  set items(items: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) {
     if (items) {
       this._toggleableItems = items.map(i => {
-        return {item: i, state: ToggleableItemState.NotSelected}
+        return {item: i, state: ToggleableItemState.NotSelected, count: i.document_count}
       })
     }
   }
@@ -46,13 +45,13 @@ export class FilterableDropdownComponent {
   }
 
   @Input()
-  set itemsSelected(itemsSelected: ObjectWithId[]) {
+  set itemsSelected(itemsSelected: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) {
     this.toggleableItems.forEach(i => {
       i.state = (itemsSelected.find(is => is.id == i.item.id)) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
     })
   }
 
-  get itemsSelected() :ObjectWithId[] {
+  get itemsSelected() :(PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[] {
     return this.toggleableItems.filter(si => si.state == ToggleableItemState.Selected).map(si => si.item)
   }
 
@@ -79,6 +78,10 @@ export class FilterableDropdownComponent {
   @Output()
   editingComplete = new EventEmitter()
 
+  get showCounts(): boolean {
+    return this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0)
+  }
+
   constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(toggleableItem: ToggleableItem): void {

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

@@ -8,5 +8,5 @@
     <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>
   </div>
-  <div class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.item.document_count}}</div>
+  <div *ngIf="showCounts" class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.count}}</div>
 </button>

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

@@ -5,7 +5,8 @@ import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 
 export interface ToggleableItem {
   item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
-  state: ToggleableItemState
+  state: ToggleableItemState,
+  count: number
 }
 
 export enum ToggleableItemState {
@@ -24,6 +25,9 @@ export class ToggleableDropdownButtonComponent {
   @Input()
   toggleableItem: ToggleableItem
 
+  @Input()
+  showCounts: boolean = true
+
   @Output()
   toggle = new EventEmitter()
 

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -63,7 +63,7 @@ export class BulkEditorComponent {
       let state = ToggleableItemState.NotSelected
       if (selectedDocumentsWithTag.length == selectedDocuments.length) state = ToggleableItemState.Selected
       else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
-      tagsToggleableItems.push( { item: t, state: state } )
+      tagsToggleableItems.push( { item: t, state: state, count: selectedDocumentsWithTag.length } )
     })
     return tagsToggleableItems
   }
@@ -77,7 +77,7 @@ export class BulkEditorComponent {
       let state = ToggleableItemState.NotSelected
       if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = ToggleableItemState.Selected
       else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
-      correspondentsToggleableItems.push( { item: c, state: state } )
+      correspondentsToggleableItems.push( { item: c, state: state, count: selectedDocumentsWithCorrespondent.length } )
     })
     return correspondentsToggleableItems
   }
@@ -91,7 +91,7 @@ export class BulkEditorComponent {
       let state = ToggleableItemState.NotSelected
       if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = ToggleableItemState.Selected
       else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
-      documentTypesToggleableItems.push( { item: dt, state: state } )
+      documentTypesToggleableItems.push( { item: dt, state: state, count: selectedDocumentsWithDocumentType.length } )
     })
     return documentTypesToggleableItems
   }