From 46f778111c5e555a81f189a84a740f0c190af904 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 22:54:37 -0800
Subject: [PATCH] Live filter badges when editing & hide badges when active
 filter items in dropdown

---
 .../filterable-dropdown.component.html              |  2 +-
 .../filterable-dropdown.component.ts                | 13 ++++++++-----
 .../toggleable-dropdown-button.component.html       |  2 +-
 .../toggleable-dropdown-button.component.ts         |  6 +++++-
 .../bulk-editor/bulk-editor.component.ts            |  6 +++---
 5 files changed, 18 insertions(+), 11 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 9bc525684..5a05e66b4 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
@@ -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>
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 dc1139783..a5dadc603 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
@@ -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 {
diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
index 75dadba53..32f9c58ad 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
index 7c9c02a49..4d58023ad 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
+++ b/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()
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
index 21355fe4c..af6934e32 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/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
   }