From 3b2bc292d80708332f32c903af9a01104ff8a34e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:14:04 -0800
Subject: [PATCH 01/73] Tweak checkbox

---
 .../document-card-small.component.html           |  2 +-
 .../document-card-small.component.scss           | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 4ced42bdd..378047602 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -3,7 +3,7 @@
     <div class="border-bottom" [class.doc-img-background-selected]="selected">
       <img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected">
 
-      <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
+      <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 36db2203c..a4af1bb11 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -8,7 +8,15 @@
 }
 
 .document-card-check {
-  display: none
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  .custom-control {
+    margin-left: 4px;
+    margin-right: -3px;
+  }
 }
 
 .document-card:hover .document-card-check {
@@ -17,8 +25,12 @@
 
 .card-selected {
   border-color: $primary;
+
+  .document-card-check {
+    display: block;
+  }
 }
 
 .doc-img-background-selected {
   background-color: $primaryFaded;
-}
\ No newline at end of file
+}

From b45bd665736879afcc776d876a5eacad35000b66 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:14:19 -0800
Subject: [PATCH 02/73] Basic bulk editor component

---
 src-ui/src/app/app.module.ts                  |  2 +
 .../bulk-editor/bulk-editor.component.html    | 16 +++++++
 .../bulk-editor/bulk-editor.component.scss    |  0
 .../bulk-editor/bulk-editor.component.spec.ts | 25 ++++++++++
 .../bulk-editor/bulk-editor.component.ts      | 46 +++++++++++++++++++
 .../document-list.component.html              | 30 +++++++-----
 .../document-list/document-list.component.ts  |  4 ++
 7 files changed, 111 insertions(+), 12 deletions(-)
 create mode 100644 src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
 create mode 100644 src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
 create mode 100644 src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts
 create mode 100644 src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 914854892..627d4f6cf 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { FilterDropdownButtonComponent } from './components/filter-editor/filter
 import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.component';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
+import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { TextComponent } from './components/common/input/text/text.component';
 import { SelectComponent } from './components/common/input/select/select.component';
@@ -84,6 +85,7 @@ import { SelectDialogComponent } from './components/common/select-dialog/select-
     FilterDropdownDateComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
+    BulkEditorComponent,
     TextComponent,
     SelectComponent,
     CheckComponent,
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
new file mode 100644
index 000000000..a1574f6f7
--- /dev/null
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -0,0 +1,16 @@
+<div class="btn-group mr-lg-2" role="group" aria-label="Select">
+  <button class="btn btn-sm btn-outline-primary" (click)="this.selectPage.next()">Select page</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.selectAll.next()">Select all</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.selectNone.next()">Select none</button>
+</div>
+<div class="btn-group mr-lg-2" role="group" aria-label="Actions">
+  <button class="btn btn-sm btn-outline-primary" (click)="this.setCorrespondent.next()">Set correspondent</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.removeCorrespondent.next()">Remove correspondent</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.setDocumentType.next()">Set document type</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.removeDocumentType.next()">Remove document type</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.addTag.next()">Add tag</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.removeTag.next()">Remove tag</button>
+</div>
+<div class="btn-group mr-lg-2" role="group" aria-label="Delete">
+  <button class="btn btn-sm btn-outline-primary" (click)="this.delete.next()">Delete</button>
+</div>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts
new file mode 100644
index 000000000..140d73301
--- /dev/null
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BulkEditorComponent } from './bulk-editor.component';
+
+describe('BulkEditorComponent', () => {
+  let component: BulkEditorComponent;
+  let fixture: ComponentFixture<BulkEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BulkEditorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BulkEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 000000000..7459d62dc
--- /dev/null
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
+
+@Component({
+  selector: 'app-bulk-editor',
+  templateUrl: './bulk-editor.component.html',
+  styleUrls: ['./bulk-editor.component.scss']
+})
+export class BulkEditorComponent {
+
+  @Input()
+  list: DocumentListViewService
+
+  @Output()
+  selectPage = new EventEmitter()
+
+  @Output()
+  selectAll = new EventEmitter()
+
+  @Output()
+  selectNone = new EventEmitter()
+
+  @Output()
+  setCorrespondent = new EventEmitter()
+
+  @Output()
+  removeCorresponden = new EventEmitter()
+
+  @Output()
+  setDocumentType = new EventEmitter()
+
+  @Output()
+  removeDocumentType = new EventEmitter()
+
+  @Output()
+  addTag = new EventEmitter()
+
+  @Output()
+  removeTag = new EventEmitter()
+
+  @Output()
+  delete = new EventEmitter()
+
+  constructor( ) { }
+
+}
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index be2ed4847..36e9ff8fd 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -1,25 +1,16 @@
 <app-page-header [title]="getTitle()">
 
   <div ngbDropdown class="d-inline-block mr-2">
-    <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
+    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
       </svg>
-      Bulk edit
+      Select
     </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
+    <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
       <button ngbDropdownItem (click)="list.selectPage()">Select page</button>
       <button ngbDropdownItem (click)="list.selectAll()">Select all</button>
       <button ngbDropdownItem (click)="list.selectNone()">Select none</button>
-      <div class="dropdown-divider"></div>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkSetCorrespondent()">Set correspondent</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveCorrespondent()">Remove correspondent</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkSetDocumentType()">Set document type</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveDocumentType()">Remove document type</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkAddTag()">Add tag</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveTag()">Remove tag</button>
-      <div class="dropdown-divider"></div>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkDelete()">Delete</button>
     </div>
   </div>
 
@@ -96,6 +87,21 @@
   [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
+<div class="w-100 mb-2" [ngbCollapse]="!isBulkEditing">
+  <app-bulk-editor
+    (selectPage)="list.selectPage()"
+    (selectAll)="list.selectAll()"
+    (selectNone)="list.selectNone()"
+    (setCorrespondent)="bulkSetCorrespondent()"
+    (removeCorrespondent)="bulkRemoveCorrespondent()"
+    (setDocumentType)="bulkSetDocumentType()"
+    (removeDocumentType)="bulkRemoveDocumentType()"
+    (addTag)="bulkAddTag()"
+    (removeTag)="bulkRemoveTag()"
+    (delete)="bulkDelete()">
+  </app-bulk-editor>
+</div>
+
 <div *ngIf="displayMode == 'largeCards'">
   <app-document-card-large *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
   </app-document-card-large>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 1bd1e5c7f..0a6fa4352 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -52,6 +52,10 @@ export class DocumentListComponent implements OnInit {
     return DOCUMENT_SORT_FIELDS
   }
 
+  get isBulkEditing(): boolean {
+    return this.list.selected.size > 0
+  }
+
   saveDisplayMode() {
     localStorage.setItem('document-list:displayMode', this.displayMode)
   }

From 34c42c4339a9ef8b7f5d03d76be1eddb6a84d865 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:39:10 -0800
Subject: [PATCH 03/73] Better svgs

---
 .../filter-dropdown-button.component.html                     | 4 ++--
 .../app/components/filter-editor/filter-editor.component.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
index 8dff12a33..0ea870533 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
@@ -1,7 +1,7 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
   <div class="selected-icon mr-1">
-    <svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+    <svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+      <use xlink:href="assets/bootstrap-icons.svg#check" />
     </svg>
   </div>
   <div class="mr-1">
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/filter-editor/filter-editor.component.html
index 80f10407c..e07edba14 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.html
@@ -14,8 +14,8 @@
   <app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
 
   <button class="btn btn-link btn-sm" [disabled]="!hasFilters()" (click)="clearSelected()">
-    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+      <use xlink:href="assets/bootstrap-icons.svg#x" />
     </svg>
     Clear all filters
   </button>

From 03f071fd27c2e7e003655d534a8affe28d48b871 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 15 Dec 2020 00:57:31 -0800
Subject: [PATCH 04/73] Styled, organized button UI

---
 .../bulk-editor/bulk-editor.component.html    | 101 +++++++++++++++---
 .../bulk-editor/bulk-editor.component.scss    |   6 ++
 .../bulk-editor/bulk-editor.component.ts      |   2 +-
 .../document-list.component.html              |   2 +-
 4 files changed, 95 insertions(+), 16 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index a1574f6f7..54212923a 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,16 +1,89 @@
-<div class="btn-group mr-lg-2" role="group" aria-label="Select">
-  <button class="btn btn-sm btn-outline-primary" (click)="this.selectPage.next()">Select page</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.selectAll.next()">Select all</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.selectNone.next()">Select none</button>
+<div class="card bg-light">
+<div class="card-body px-2 py-2 d-flex justify-content-between flex-wrap align-items-end">
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Select">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Select:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
+        </svg>
+        Page
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#check-all" />
+        </svg>
+        All
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="selectNone.next()">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
+        </svg>
+        None
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Tags">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Tags:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="addTag.next()">
+        <ng-container *ngTemplateOutlet="add"></ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="removeTag.next()">
+        <ng-container *ngTemplateOutlet="remove"></ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Correspondent">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Correspondent:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="setCorrespondent.next()">
+        <ng-container *ngTemplateOutlet="edit"></ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="removeCorrespondent.next()">
+        <ng-container *ngTemplateOutlet="remove"></ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Document Type">
+    <label class="d-flex mt-1 mr-auto mr-lg-2">Document Type:</label>
+    <div class="btn-group d-flex">
+      <button class="btn btn-sm btn-outline-primary" (click)="setDocumentType.next()">
+        <ng-container *ngTemplateOutlet="edit"></ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="removeDocumentType.next()">
+        <ng-container *ngTemplateOutlet="remove"></ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Delete">
+    <button class="btn btn-sm btn-outline-danger ml-auto" (click)="delete.next()">
+      <svg viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#trash" />
+      </svg>
+      Delete
+    </button>
+  </div>
 </div>
-<div class="btn-group mr-lg-2" role="group" aria-label="Actions">
-  <button class="btn btn-sm btn-outline-primary" (click)="this.setCorrespondent.next()">Set correspondent</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.removeCorrespondent.next()">Remove correspondent</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.setDocumentType.next()">Set document type</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.removeDocumentType.next()">Remove document type</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.addTag.next()">Add tag</button>
-  <button class="btn btn-sm btn-outline-primary" (click)="this.removeTag.next()">Remove tag</button>
-</div>
-<div class="btn-group mr-lg-2" role="group" aria-label="Delete">
-  <button class="btn btn-sm btn-outline-primary" (click)="this.delete.next()">Delete</button>
 </div>
+
+<ng-template #add>
+  <svg viewBox="0 0 16 16" fill="currentColor">
+    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+  </svg>
+  Add
+</ng-template>
+
+<ng-template #edit>
+  <svg viewBox="0 0 16 16" fill="currentColor">
+    <use xlink:href="assets/bootstrap-icons.svg#pencil" />
+  </svg>
+  Edit
+</ng-template>
+
+<ng-template #remove>
+  <svg viewBox="0 0 16 16" fill="currentColor">
+    <use xlink:href="assets/bootstrap-icons.svg#x-circle" />
+  </svg>
+  Remove
+</ng-template>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
index e69de29bb..3868e7a02 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
@@ -0,0 +1,6 @@
+.btn svg {
+  width: 0.9em;
+  height: 0.9em;
+  margin-right: 2px;
+  margin-top: -1px;
+}
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 7459d62dc..5c1ad01ae 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
@@ -24,7 +24,7 @@ export class BulkEditorComponent {
   setCorrespondent = new EventEmitter()
 
   @Output()
-  removeCorresponden = new EventEmitter()
+  removeCorrespondent = new EventEmitter()
 
   @Output()
   setDocumentType = new EventEmitter()
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 36e9ff8fd..a88ad65b7 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -87,7 +87,7 @@
   [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
-<div class="w-100 mb-2" [ngbCollapse]="!isBulkEditing">
+<div class="w-100 mb-3" [ngbCollapse]="!isBulkEditing">
   <app-bulk-editor
     (selectPage)="list.selectPage()"
     (selectAll)="list.selectAll()"

From b8469946a82b5ddf5253c6cdf9343d45c566a73a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 15 Dec 2020 11:09:25 -0800
Subject: [PATCH 05/73] Smaller editor, cleaned up responsive flow

---
 .../bulk-editor/bulk-editor.component.html    | 54 +++++++++----------
 .../bulk-editor/bulk-editor.component.scss    |  6 ++-
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 54212923a..22724db17 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,67 +1,67 @@
 <div class="card bg-light">
-<div class="card-body px-2 py-2 d-flex justify-content-between flex-wrap align-items-end">
-  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Select">
-    <label class="d-flex mt-1 mr-auto mr-lg-2">Select:</label>
+<div class="card-body small px-2 py-2 d-flex flex-column flex-xl-row justify-content-between justify-content-xl-start">
+  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Select">
+    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Select:</label>
     <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="selectPage.next()">
         <svg viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
         </svg>
-        Page
+        <small>Page</small>
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="selectAll.next()">
         <svg viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#check-all" />
         </svg>
-        All
+        <small>All</small>
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="selectNone.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="selectNone.next()">
         <svg viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
         </svg>
-        None
+        <small>None</small>
       </button>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Tags">
-    <label class="d-flex mt-1 mr-auto mr-lg-2">Tags:</label>
+  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Tags">
+    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Tags:</label>
     <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary" (click)="addTag.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="addTag.next()">
         <ng-container *ngTemplateOutlet="add"></ng-container>
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="removeTag.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="removeTag.next()">
         <ng-container *ngTemplateOutlet="remove"></ng-container>
       </button>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Correspondent">
-    <label class="d-flex mt-1 mr-auto mr-lg-2">Correspondent:</label>
+  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Correspondent">
+    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Correspondent:</label>
     <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary" (click)="setCorrespondent.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="setCorrespondent.next()">
         <ng-container *ngTemplateOutlet="edit"></ng-container>
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="removeCorrespondent.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="removeCorrespondent.next()">
         <ng-container *ngTemplateOutlet="remove"></ng-container>
       </button>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Document Type">
-    <label class="d-flex mt-1 mr-auto mr-lg-2">Document Type:</label>
+  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Document Type">
+    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Document Type:</label>
     <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary" (click)="setDocumentType.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="setDocumentType.next()">
         <ng-container *ngTemplateOutlet="edit"></ng-container>
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="removeDocumentType.next()">
+      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="removeDocumentType.next()">
         <ng-container *ngTemplateOutlet="remove"></ng-container>
       </button>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 mb-2 mb-lg-0" role="group" aria-label="Delete">
-    <button class="btn btn-sm btn-outline-danger ml-auto" (click)="delete.next()">
+  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-lg-0 ml-auto ml-lg-0" role="group" aria-label="Delete">
+    <button class="btn btn-sm btn-outline-danger" (click)="delete.next()">
       <svg viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />
       </svg>
-      Delete
+      <small>Delete</small>
     </button>
   </div>
 </div>
@@ -71,19 +71,19 @@
   <svg viewBox="0 0 16 16" fill="currentColor">
     <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
   </svg>
-  Add
+  <small>Add</small>
 </ng-template>
 
 <ng-template #edit>
   <svg viewBox="0 0 16 16" fill="currentColor">
     <use xlink:href="assets/bootstrap-icons.svg#pencil" />
   </svg>
-  Edit
+  <small>Edit</small>
 </ng-template>
 
 <ng-template #remove>
   <svg viewBox="0 0 16 16" fill="currentColor">
     <use xlink:href="assets/bootstrap-icons.svg#x-circle" />
   </svg>
-  Remove
+  <small>Remove</small>
 </ng-template>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
index 3868e7a02..5afd86545 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
@@ -1,6 +1,10 @@
 .btn svg {
   width: 0.9em;
   height: 0.9em;
-  margin-right: 2px;
+  margin-right: 3px;
   margin-top: -1px;
 }
+
+.btn-sm {
+  line-height: 1;
+}

From fb9d750684092f40b4d5f5cee565d12ecd15f2f5 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 15 Dec 2020 14:19:40 -0800
Subject: [PATCH 06/73] Delete button margin-left

---
 .../document-list/bulk-editor/bulk-editor.component.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 22724db17..d330ba228 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -56,7 +56,7 @@
       </button>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-lg-0 ml-auto ml-lg-0" role="group" aria-label="Delete">
+  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-lg-0 ml-auto ml-lg-0 ml-xl-auto" role="group" aria-label="Delete">
     <button class="btn btn-sm btn-outline-danger" (click)="delete.next()">
       <svg viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />

From fbb2da42dc92cabe2379b890e8c3ea0a1fb7d591 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 18 Dec 2020 14:55:21 -0800
Subject: [PATCH 07/73] Merge branch 'dev' into feature-bulk-editor

---
 README.md                                     |  25 ++-
 docker/hub/docker-compose.postgres.yml        |   2 +-
 docker/hub/docker-compose.sqlite.yml          |   2 +-
 docs/advanced_usage.rst                       |  36 ++--
 docs/changelog.rst                            |  54 +++++
 docs/usage_overview.rst                       |  14 +-
 scripts/make-release.sh                       |   1 +
 src-ui/package-lock.json                      |   8 +
 src-ui/package.json                           |   1 +
 src-ui/src/app/app.module.ts                  |   7 +-
 .../app-frame/app-frame.component.html        |   7 +-
 .../app-frame/app-frame.component.ts          |   3 +
 .../common/input/select/select.component.html |  18 +-
 .../common/input/select/select.component.scss |   1 +
 .../common/input/tags/tags.component.html     |  45 ++--
 .../common/input/tags/tags.component.scss     |  16 +-
 .../common/input/tags/tags.component.ts       |  23 +-
 .../saved-view-widget.component.html          |   2 +-
 .../document-detail.component.html            |   8 +-
 .../document-detail.component.ts              |   6 +-
 .../document-card-large.component.scss        |   1 +
 .../document-card-small.component.html        |   4 +-
 .../document-list.component.html              |   6 +-
 .../document-list.component.scss              |  24 ++-
 .../document-list/document-list.component.ts  |   1 +
 .../save-view-config-dialog.component.ts      |  15 +-
 .../filter-dropdown-date.component.html       |  51 ++---
 .../filter-dropdown-date.component.ts         | 136 ++++++------
 .../filter-dropdown.component.html            |  12 +-
 .../filter-dropdown.component.scss            |   6 +
 .../filter-dropdown.component.ts              |   2 +-
 .../filter-editor.component.html              |  45 ++--
 .../filter-editor/filter-editor.component.ts  |  64 +++---
 .../correspondent-list.component.html         |  23 +-
 .../correspondent-list.component.ts           |  14 +-
 .../document-type-list.component.html         |  21 +-
 .../document-type-list.component.ts           |  14 +-
 .../generic-list/generic-list.component.ts    |   2 +-
 .../manage/settings/settings.component.ts     |  20 +-
 .../manage/tag-list/tag-list.component.html   |  23 +-
 .../manage/tag-list/tag-list.component.ts     |  15 +-
 .../src/app/interceptors/csrf.interceptor.ts  |   9 +-
 src-ui/src/app/pipes/document-title.pipe.ts   |   2 +-
 .../services/document-list-view.service.ts    |   6 +-
 src-ui/src/assets/save-filter.png             | Bin 8267 -> 8263 bytes
 src-ui/src/environments/environment.prod.ts   |   3 +-
 src-ui/src/styles.scss                        |  42 +++-
 src/documents/admin.py                        |   2 +-
 src/documents/checks.py                       |   3 +-
 src/documents/file_handling.py                |   7 +-
 .../management/commands/decrypt_documents.py  |  13 +-
 src/documents/migrations/1003_mime_types.py   |  17 +-
 .../migrations/1008_auto_20201216_1736.py     |  34 +++
 .../migrations/1009_auto_20201216_2005.py     |  29 +++
 src/documents/models.py                       |  15 +-
 src/documents/parsers.py                      |   6 +-
 src/documents/serialisers.py                  |   8 +-
 src/documents/templates/index.html            |   1 +
 src/documents/tests/test_api.py               | 203 ++++++++----------
 src/documents/tests/test_file_handling.py     |  11 +-
 src/documents/tests/test_index.py             |  21 ++
 src/documents/tests/test_sanity_check.py      |  10 +-
 src/documents/tests/utils.py                  |   3 +-
 src/documents/views.py                        |  19 +-
 src/paperless/version.py                      |   2 +-
 src/paperless_mail/mail.py                    |  10 +-
 src/paperless_mail/tests/test_mail.py         |   4 +-
 src/paperless_text/parsers.py                 |  62 +-----
 src/paperless_text/tests/samples/test.txt     |   1 +
 src/paperless_text/tests/test_parser.py       |  26 +++
 70 files changed, 874 insertions(+), 473 deletions(-)
 create mode 100644 src/documents/migrations/1008_auto_20201216_1736.py
 create mode 100644 src/documents/migrations/1009_auto_20201216_2005.py
 create mode 100644 src/paperless_text/tests/samples/test.txt
 create mode 100644 src/paperless_text/tests/test_parser.py

diff --git a/README.md b/README.md
index 41f85af19..e8ae8feb2 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 [Paperless](https://github.com/the-paperless-project/paperless) is an application by Daniel Quinn and others that indexes your scanned documents and allows you to easily search for documents and store metadata alongside your documents.
 
-Paperless-ng is a fork of the original project, adding a new interface and many other changes under the hood. For a detailed list of changes, see below.
+Paperless-ng is a fork of the original project, adding a new interface and many other changes under the hood. For a detailed list of changes, have a look at the changelog in the documentation.
 
 This project is still in development and some things may not work as expected.
 
@@ -15,11 +15,13 @@ This project is still in development and some things may not work as expected.
 
 Paperless does not control your scanner, it only helps you deal with what your scanner produces.
 
-1. Buy a document scanner that can write to a place on your network.  If you need some inspiration, have a look at the [scanner recommendations](https://paperless-ng.readthedocs.io/en/latest/scanners.html) page.
-2. Set it up to "scan to FTP" or something similar. It should be able to push scanned images to a server without you having to do anything.  Of course if your scanner doesn't know how to automatically upload the file somewhere, you can always do that manually. Paperless doesn't care how the documents get into its local consumption directory.
-3. Have the target server run the Paperless consumption script to OCR the file and index it into a local database.
-4. Use the web frontend to sift through the database and find what you want.
-5. Download the PDF you need/want via the web interface and do whatever you like with it.  You can even print it and send it as if it's the original. In most cases, no one will care or notice.
+1. Buy a document scanner that can write to a place on your network.  If you need some inspiration, have a look at the [scanner recommendations](https://paperless-ng.readthedocs.io/en/latest/scanners.html) page. Set it up to "scan to FTP" or something similar. It should be able to push scanned images to a server without you having to do anything.  Of course if your scanner doesn't know how to automatically upload the file somewhere, you can always do that manually. Paperless doesn't care how the documents get into its local consumption directory.
+
+	- Alternatively, you can use any of the mobile scanning apps out there. We have an app that allows you to share documents with paperless, if you're on Android. See the section on affiliated projects.
+
+2. Wait for paperless to process your files. OCR is expensive, and depending on the power of your machine, this might take a bit of time.
+3. Use the web frontend to sift through the database and find what you want.
+4. Download the PDF you need/want via the web interface and do whatever you like with it.  You can even print it and send it as if it's the original. In most cases, no one will care or notice.
 
 Here's what you get:
 
@@ -39,7 +41,6 @@ Here's what you get:
 	* When adding documents from mails, paperless can move these mails to a new folder, mark them as read, flag them or delete them.
 * Machine learning powered document matching.
 	* Paperless learns from your documents and will be able to automatically assign tags, correspondents and types to documents once you've stored a few documents in paperless.
-* We have a mobile app that offers a 'Share with paperless' option over at https://github.com/qcasey/paperless_share. You can use that in combination with any of the mobile scanning apps out there. It's still a little rough around the edges, but it works!
 * A task processor that processes documents in parallel and also tells you when something goes wrong. On modern multi core systems, consumption is blazing fast.
 * Code cleanup in many, MANY areas. Some of the code from OG paperless was just overly complicated.
 * More tests, more stability.
@@ -78,7 +79,7 @@ The recommended way to deploy paperless is docker-compose. Don't clone the repos
 
 Read the [documentation](https://paperless-ng.readthedocs.io/en/latest/setup.html#installation) on how to get started.
 
-Alternatively, you can install the dependencies and setup apache and a database server yourself. The documenation has information about the individual components of paperless that you need to take care of.
+Alternatively, you can install the dependencies and setup apache and a database server yourself. The documenation has a step by step guide on how to do it.
 
 # Migrating to paperless-ng
 
@@ -102,13 +103,15 @@ If you want to implement something big: Please start a discussion about that in
 
 Paperless has been around a while now, and people are starting to build stuff on top of it.  If you're one of those people, we can add your project to this list:
 
-* [Paperless App](https://github.com/bauerj/paperless_app): An Android/iOS app for Paperless. We're working on making this compatible.
+* [Paperless App](https://github.com/bauerj/paperless_app): An Android/iOS app for Paperless. Updated to work with paperless-ng.
+* [Paperless Share](https://github.com/qcasey/paperless_share). Share any files from your Android application with paperless. Very simple, but works with all of the mobile scanning apps out there that allow you to share scanned documents.
+
+These projects also exist, but their status and compatibility with paperless-ng is unknown.
+
 * [Paperless Desktop](https://github.com/thomasbrueggemann/paperless-desktop): A desktop UI for your Paperless installation.  Runs on Mac, Linux, and Windows.
 * [ansible-role-paperless](https://github.com/ovv/ansible-role-paperless): An easy way to get Paperless running via Ansible.
 * [paperless-cli](https://github.com/stgarf/paperless-cli): A golang command line binary to interact with a Paperless instance.
 
-Compatibility with Paperless-ng is unknown.
-
 # Important Note
 
 Document scanners are typically used to scan sensitive documents.  Things like your social insurance number, tax records, invoices, etc.  Everything is stored in the clear without encryption by default (it needs to be searchable, so if someone has ideas on how to do that on encrypted data, I'm all ears).  This means that Paperless should never be run on an untrusted host.  Instead, I recommend that if you do want to use it, run it locally on a server in your own home.
diff --git a/docker/hub/docker-compose.postgres.yml b/docker/hub/docker-compose.postgres.yml
index 24f0e118f..d33e4c38d 100644
--- a/docker/hub/docker-compose.postgres.yml
+++ b/docker/hub/docker-compose.postgres.yml
@@ -15,7 +15,7 @@ services:
       POSTGRES_PASSWORD: paperless
 
   webserver:
-    image: jonaswinkler/paperless-ng:0.9.6
+    image: jonaswinkler/paperless-ng:0.9.8
     restart: always
     depends_on:
       - db
diff --git a/docker/hub/docker-compose.sqlite.yml b/docker/hub/docker-compose.sqlite.yml
index 6ae619fd6..c130dfef6 100644
--- a/docker/hub/docker-compose.sqlite.yml
+++ b/docker/hub/docker-compose.sqlite.yml
@@ -5,7 +5,7 @@ services:
     restart: always
 
   webserver:
-    image: jonaswinkler/paperless-ng:0.9.6
+    image: jonaswinkler/paperless-ng:0.9.8
     restart: always
     depends_on:
       - broker
diff --git a/docs/advanced_usage.rst b/docs/advanced_usage.rst
index b5ae254b3..48a86384c 100644
--- a/docs/advanced_usage.rst
+++ b/docs/advanced_usage.rst
@@ -263,10 +263,10 @@ using the identifier which it has assigned to each document. You will end up get
 files like ``0000123.pdf`` in your media directory. This isn't necessarily a bad
 thing, because you normally don't have to access these files manually. However, if
 you wish to name your files differently, you can do that by adjusting the
-``PAPERLESS_FILENAME_FORMAT`` settings variable.
+``PAPERLESS_FILENAME_FORMAT`` configuration option.
 
-This variable allows you to configure the filename (folders are allowed!) using
-placeholders. For example, setting
+This variable allows you to configure the filename (folders are allowed) using
+placeholders. For example, configuring this to
 
 .. code:: bash
 
@@ -277,17 +277,16 @@ will create a directory structure as follows:
 .. code::
 
     2019/
-      my_bank/
-        statement-january-0000001.pdf
-        statement-february-0000002.pdf
+      My bank/
+        Statement January.pdf
+        Statement February.pdf
     2020/
-      my_bank/
-        statement-january-0000003.pdf
-      shoe_store/
-        my_new_shoes-0000004.pdf
-
-Paperless appends the unique identifier of each document to the filename. This
-avoids filename clashes.
+      My bank/
+        Statement January.pdf
+        Letter.pdf
+        Letter_01.pdf
+      Shoe store/
+        My new shoes.pdf
 
 .. danger::
 
@@ -299,6 +298,7 @@ Paperless provides the following placeholders withing filenames:
 
 * ``{correspondent}``: The name of the correspondent, or "none".
 * ``{document_type}``: The name of the document type, or "none".
+* ``{tag_list}``: A comma separated list of all tags assigned to the document.
 * ``{title}``: The title of the document.
 * ``{created}``: The full date and time the document was created.
 * ``{created_year}``: Year created only.
@@ -309,8 +309,14 @@ Paperless provides the following placeholders withing filenames:
 * ``{added_month}``: Month added only (number 1-12).
 * ``{added_day}``: Day added only (number 1-31).
 
-Paperless will convert all values for the placeholders into values which are safe
-for use in filenames.
+
+Paperless will try to conserve the information from your database as much as possible.
+However, some characters that you can use in document titles and correspondent names (such
+as ``: \ /`` and a couple more) are not allowed in filenames and will be replaced with dashes.
+
+If paperless detects that two documents share the same filename, paperless will automatically
+append ``_01``, ``_02``, etc to the filename. This happens if all the placeholders in a filename
+evaluate to the same value.
 
 .. hint::
 
diff --git a/docs/changelog.rst b/docs/changelog.rst
index a50fc31d5..a993eb530 100644
--- a/docs/changelog.rst
+++ b/docs/changelog.rst
@@ -5,6 +5,58 @@
 Changelog
 *********
 
+
+paperless-ng 0.9.8
+##################
+
+This release addresses two severe issues with the previous release.
+
+* The delete buttons for document types, correspondents and tags were not working.
+* The document section in the admin was causing internal server errors (500).
+
+
+paperless-ng 0.9.7
+##################
+
+
+* Front end
+
+  * Thanks to the hard work of `Michael Shamoon`_, paperless now comes with a much more streamlined UI for
+    filtering documents.
+  
+  * `Michael Shamoon`_ replaced the document preview with another component. This should fix compatibility with Safari browsers.
+
+  * Added buttons to the management pages to quickly show all documents with one specific tag, correspondent, or title.
+  
+  * Paperless now stores your saved views on the server and associates them with your user account. 
+    This means that you can access your views on multiple devices and have separate views for different users.
+    You will have to recreate your views.
+
+  * The GitHub and documentation links now open in new tabs/windows. Thanks to `rYR79435`_.
+
+  * Paperless now generates default saved view names when saving views with certain filter rules.
+
+  * Added a small version indicator to the front end.
+
+* Other additions and changes
+
+  * The new filename format field ``{tag_list}`` inserts a list of tags into the filename, separated by comma.
+  * The ``document_retagger`` no longer removes inbox tags or tags without matching rules.
+  * The new configuration option ``PAPERLESS_COOKIE_PREFIX`` allows you to run multiple instances of paperless on different ports.
+    This option enables you to be logged in into multiple instances by specifying different cookie names for each instance.
+
+* Fixes
+  
+  * Sometimes paperless would assign dates in the future to newly consumed documents.
+  * The filename format fields ``{created_month}`` and ``{created_day}`` now use a leading zero for single digit values.
+  * The filename format field ``{tags}`` can no longer be used without arguments.
+  * Paperless was not able to consume many images (especially images from mobile scanners) due to missing DPI information.
+    Paperless now assumes A4 paper size for PDF generation if no DPI information is present.
+  * Documents with empty titles could not be opened from the table view due to the link being empty.
+  * Fixed an issue with filenames containing special characters such as ``:`` not being accepted for upload.
+  * Fixed issues with thumbnail generation for plain text files.
+
+
 paperless-ng 0.9.6
 ##################
 
@@ -841,6 +893,8 @@ bulk of the work on this big change.
 
 * Initial release
 
+.. _rYR79435: https://github.com/rYR79435
+.. _Michael Shamoon: https://github.com/shamoon
 .. _jayme-github: http://github.com/jayme-github
 .. _Brian Conn: https://github.com/TheConnMan
 .. _Christopher Luu: https://github.com/nuudles
diff --git a/docs/usage_overview.rst b/docs/usage_overview.rst
index bb9ecd452..7a4fd7740 100644
--- a/docs/usage_overview.rst
+++ b/docs/usage_overview.rst
@@ -57,9 +57,6 @@ Adding documents to paperless
 #############################
 
 Once you've got Paperless setup, you need to start feeding documents into it.
-Currently, there are four options: the consumption directory, the dashboard, IMAP (email), and
-HTTP POST.
-
 When adding documents to paperless, it will perform the following operations on
 your documents:
 
@@ -112,6 +109,17 @@ Dashboard upload
 The dashboard has a file drop field to upload documents to paperless. Simply drag a file
 onto this field or select a file with the file dialog. Multiple files are supported.
 
+
+Mobile upload
+=============
+
+The mobile app over at `<https://github.com/qcasey/paperless_share>`_ allows Android users
+to share any documents with paperless. This can be combined with any of the mobile
+scanning apps out there, such as Office Lens.
+
+Furthermore, there is the  `Paperless App <https://github.com/bauerj/paperless_app>`_ as well,
+which no only has document upload, but also document editing and browsing.
+
 .. _usage-email:
 
 IMAP (Email)
diff --git a/scripts/make-release.sh b/scripts/make-release.sh
index 0a7bc7a9b..f5c9028fa 100755
--- a/scripts/make-release.sh
+++ b/scripts/make-release.sh
@@ -5,6 +5,7 @@
 # adjust src/paperless/version.py
 # changelog in the documentation
 # adjust versions in docker/hub/*
+# adjust version in src-ui/src/environments/prod
 # If docker-compose was modified: all compose files are the same.
 
 # Steps:
diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json
index 5eca0b3c0..10215a32d 100644
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
@@ -2056,6 +2056,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ng-select/ng-select": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-5.0.9.tgz",
+      "integrity": "sha512-YZeSAiS8/Nx/eHZJPmOOYL8YmcvSq+dr1P8WIrsKmRA7mueorBpPc5xlUj+nLQbpLtsiQvdWDQspf/ykOvD/lA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.2.0.tgz",
diff --git a/src-ui/package.json b/src-ui/package.json
index 6293f2672..14d828483 100644
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "~10.1.5",
     "@angular/router": "~10.1.5",
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
+    "@ng-select/ng-select": "^5.0.9",
     "bootstrap": "^4.5.0",
     "ng-bootstrap": "^1.6.3",
     "ng2-pdf-viewer": "^6.3.2",
diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 627d4f6cf..6c4cabe92 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -56,6 +56,7 @@ import { FilterPipe } from './pipes/filter.pipe';
 import { DocumentTitlePipe } from './pipes/document-title.pipe';
 import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component';
 import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @NgModule({
   declarations: [
@@ -114,7 +115,8 @@ import { SelectDialogComponent } from './components/common/select-dialog/select-
     ReactiveFormsModule,
     NgxFileDropModule,
     InfiniteScrollModule,
-    PdfViewerModule
+    PdfViewerModule,
+    NgSelectModule
   ],
   providers: [
     DatePipe,
@@ -123,7 +125,8 @@ import { SelectDialogComponent } from './components/common/select-dialog/select-
       useClass: CsrfInterceptor,
       multi: true
     },
-    FilterPipe
+    FilterPipe,
+    DocumentTitlePipe
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 7876150af..2458005f4 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -17,6 +17,11 @@
 <div class="container-fluid">
   <div class="row">
     <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse" [ngbCollapse]="isMenuCollapsed">
+
+      <div style="position: absolute; bottom: 0; left: 0;" class="text-muted p-1">
+        {{versionString}}
+      </div>
+
       <div class="sidebar-sticky pt-3">
         <ul class="nav flex-column">
           <li class="nav-item">
@@ -60,7 +65,7 @@
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
               </svg>
-              {{d.title}}
+              {{d.title | documentTitle}}
             </a>
           </li>
           <li class="nav-item w-100" *ngIf="openDocuments.length > 1">
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts
index ef859bf35..c4c00843d 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -7,6 +7,7 @@ import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { SearchService } from 'src/app/services/rest/search.service';
+import { environment } from 'src/environments/environment';
 import { DocumentDetailComponent } from '../document-detail/document-detail.component';
   
 @Component({
@@ -25,6 +26,8 @@ export class AppFrameComponent implements OnInit, OnDestroy {
     ) {
   }
 
+  versionString = `${environment.appTitle} ${environment.version}`
+
   isMenuCollapsed: boolean = true
 
   closeMenu() {
diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 717aa7964..655adbe74 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -1,11 +1,15 @@
-<div class="form-group">
+<div class="form-group paperless-input-select">
   <label [for]="inputId">{{title}}</label>
   <div [class.input-group]="showPlusButton()">
-    <select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()"
-      [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
-      <option *ngIf="allowNull" [ngValue]="null" class="form-control">---</option>
-      <option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
-    </select>
+    <ng-select name="correspondent" [(ngModel)]="value"
+      [disabled]="disabled"
+      [style.color]="textColor"
+      [style.background]="backgroundColor"
+      (change)="onChange(value)"
+      (blur)="onTouched()">
+      <ng-option *ngFor="let i of items" [value]="i.id">{{i.name}}</ng-option>
+    </ng-select>
+
     <div *ngIf="showPlusButton()" class="input-group-append">
       <button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()">
         <svg class="buttonicon" fill="currentColor">
@@ -15,4 +19,4 @@
     </div>
   </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-</div>
\ No newline at end of file
+</div>
diff --git a/src-ui/src/app/components/common/input/select/select.component.scss b/src-ui/src/app/components/common/input/select/select.component.scss
index e69de29bb..8faec3bc0 100644
--- a/src-ui/src/app/components/common/input/select/select.component.scss
+++ b/src-ui/src/app/components/common/input/select/select.component.scss
@@ -0,0 +1 @@
+// styles for ng-select child are in styles.scss
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 8029dd860..8a5dbc4f2 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -1,30 +1,41 @@
-<div class="form-group">
-  <label for="exampleFormControlTextarea1">Tags</label>
+<div class="form-group paperless-input-select paperless-input-tags">
+  <label for="tags">Tags</label>
 
-  <div class="input-group">
-    <div class="form-control tags-form-control" id="tags">
-      <app-tag class="mr-2" *ngFor="let id of displayValue" [tag]="getTag(id)" (click)="removeTag(id)"></app-tag>
-    </div>
+  <div class="input-group flex-nowrap">
+    <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
+      [multiple]="true"
+      [closeOnSelect]="false"
+      [disabled]="disabled"
+      (change)="ngSelectChange()">
 
-    <div class="input-group-append" ngbDropdown placement="top-right">
-      <button class="btn btn-outline-secondary" type="button" ngbDropdownToggle></button>
-      <div ngbDropdownMenu class="scrollable-menu shadow">
-        <button type="button" *ngFor="let tag of tags" ngbDropdownItem (click)="addTag(tag.id)">
-          <app-tag [tag]="tag"></app-tag>
-        </button>
-      </div>
-    </div>
+      <ng-template ng-label-tmp let-item="item">
+        <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
+          <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+          </svg>
+          <app-tag style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
+        </span>
+      </ng-template>
+      <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+        <div class="tag-wrap">
+          <div class="selected-icon d-inline-block mr-1">
+            <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+            </svg>
+          </div>
+          <app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
+        </div>
+      </ng-template>
+    </ng-select>
 
     <div class="input-group-append">
-
       <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
         <svg class="buttonicon" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#plus" />
         </svg>
       </button>
     </div>
-
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.scss b/src-ui/src/app/components/common/input/tags/tags.component.scss
index f2635b7f2..2eaaa4f6d 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.scss
+++ b/src-ui/src/app/components/common/input/tags/tags.component.scss
@@ -1,10 +1,12 @@
-.tags-form-control {
-  height: auto;
+.selected-icon {
+  min-width: 1em;
+  min-height: 1em;
 }
 
+.tag-wrap {
+  font-size: 1rem;
+}
 
-.scrollable-menu {
-  height: auto;
-  max-height: 300px;
-  overflow-x: hidden;
-}
\ No newline at end of file
+.tag-wrap-delete {
+  cursor: pointer;
+}
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index cca99cc55..5501ac5a6 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -21,7 +21,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
 
   onChange = (newValue: number[]) => {};
-  
+
   onTouched = () => {};
 
   writeValue(newValue: number[]): void {
@@ -66,29 +66,28 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   removeTag(id) {
     let index = this.displayValue.indexOf(id)
     if (index > -1) {
-      this.displayValue.splice(index, 1)
+      let oldValue = this.displayValue
+      oldValue.splice(index, 1)
+      this.displayValue = [...oldValue]
       this.onChange(this.displayValue)
     }
   }
 
-  addTag(id) {
-    let index = this.displayValue.indexOf(id)
-    if (index == -1) {
-      this.displayValue.push(id)
-      this.onChange(this.displayValue)
-    }
-  }
-
-
   createTag() {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
-        this.addTag(newTag.id)
+        this.displayValue = [...this.displayValue, newTag.id]
+        this.onChange(this.displayValue)
       })
     })
   }
 
+  ngSelectChange() {
+    this.value = this.displayValue
+    this.onChange(this.displayValue)
+  }
+
 }
diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
index 194497d39..f50708af3 100644
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -13,7 +13,7 @@
     <tbody>
       <tr *ngFor="let doc of documents" routerLink="/documents/{{doc.id}}">
         <td>{{doc.created | date}}</td>
-        <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ml-1"></app-tag>
+        <td>{{doc.title | documentTitle}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ml-1"></app-tag>
       </tr>
     </tbody>
   </table>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index c0114f709..a3bc7e1e6 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -52,9 +52,9 @@
                         </div>
                         <app-input-date-time titleDate="Date created" formControlName="created"></app-input-date-time>
                         <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent"
-                            allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
+                            (createNew)="createCorrespondent()"></app-input-select>
                         <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type"
-                            allowNull="true" (createNew)="createDocumentType()"></app-input-select>
+                            (createNew)="createDocumentType()"></app-input-select>
                         <app-input-tags formControlName="tags" title="Tags"></app-input-tags>
 
                     </ng-template>
@@ -110,8 +110,8 @@
                             </tbody>
                         </table>
 
-                        <app-metadata-collapse title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata.length > 0"></app-metadata-collapse>
-                        <app-metadata-collapse title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata.length > 0"></app-metadata-collapse>
+                        <app-metadata-collapse title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></app-metadata-collapse>
+                        <app-metadata-collapse title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></app-metadata-collapse>
 
                     </ng-template>
                 </li>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 5fe9f9250..b4005b920 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -6,6 +6,7 @@ import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
@@ -54,7 +55,8 @@ export class DocumentDetailComponent implements OnInit {
     private router: Router,
     private modalService: NgbModal,
     private openDocumentService: OpenDocumentsService,
-    private documentListViewService: DocumentListViewService) { }
+    private documentListViewService: DocumentListViewService,
+    private documentTitlePipe: DocumentTitlePipe) { }
 
   getContentType() {
     return this.metadata?.has_archive_version ? 'application/pdf' : this.metadata?.original_mime_type
@@ -90,7 +92,7 @@ export class DocumentDetailComponent implements OnInit {
     this.documentsService.getMetadata(doc.id).subscribe(result => {
       this.metadata = result
     })
-    this.title = doc.title
+    this.title = this.documentTitlePipe.transform(doc.title)
     this.documentForm.patchValue(doc)
   }
 
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index d6be8837e..11fb10562 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -1,5 +1,6 @@
 .result-content {
   color: darkgray;
+  overflow-wrap: anywhere;
 }
 
 .doc-img {
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 378047602..948d585f4 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -31,7 +31,7 @@
     </div>
     <div class="card-footer">
 
-      <div class="d-flex justify-content-between align-items-center ml-n2">
+      <div class="d-flex justify-content-between align-items-center mx-n2">
         <div class="btn-group">
           <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit">
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@@ -51,7 +51,7 @@
             </svg>
           </a>
         </div>
-        <small class="text-muted">{{document.created | date}}</small>
+        <small class="text-muted pl-1">{{document.created | date}}</small>
       </div>
 
     </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index a88ad65b7..5b4511866 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -77,7 +77,7 @@
 
 </app-page-header>
 
-<div class="w-100 mb-4">
+<div class="w-100 mb-2 mb-sm-4">
   <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 </div>
 
@@ -135,7 +135,7 @@
       </td>
       <td>
         <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t)"></app-tag>
+        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t.id)"></app-tag>
       </td>
       <td class="d-none d-xl-table-cell">
         <ng-container *ngIf="d.document_type">
@@ -154,5 +154,5 @@
 
 
 <div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
+  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index b9553930b..d7c08abec 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -2,4 +2,26 @@
 
 .table-row-selected {
   background-color: $primaryFaded;
-}
\ No newline at end of file
+}
+
+$paperless-card-breakpoints: (
+  0: 2, // xs
+  768px: 3, //md
+  992px: 4, //lg
+  1200px: 5, //xl
+  1400px: 6, // xxl
+  1600px: 7,
+  1800px: 8,
+  2000px: 9
+);
+
+.row-cols-paperless-cards {
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: 100% / $n_cols;
+      }
+    }
+  }
+}
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 0a6fa4352..a8bdf89d3 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -98,6 +98,7 @@ export class DocumentListComponent implements OnInit {
 
   saveViewConfigAs() {
     let modal = this.modalService.open(SaveViewConfigDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
     modal.componentInstance.saveClicked.subscribe(formValue => {
       let savedView = {
         name: formValue.name,
diff --git a/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts b/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts
index 284be49f6..8f0eb26f2 100644
--- a/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts
+++ b/src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -14,6 +14,19 @@ export class SaveViewConfigDialogComponent implements OnInit {
   @Output()
   public saveClicked = new EventEmitter()
 
+  _defaultName = ""
+
+  get defaultName() {
+    return this._defaultName
+  }
+
+  @Input()
+  set defaultName(value: string) {
+    this._defaultName = value
+    this.saveViewConfigForm.patchValue({name: value})
+  }
+  
+
   saveViewConfigForm = new FormGroup({
     name: new FormControl(''),
     showInSideBar: new FormControl(false),
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
index 6f6a42fe2..aca6e836c 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
@@ -4,38 +4,39 @@
   </button>
   <div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-        <button class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" (click)="clear()">Clear</button>
-        <button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)">
-          <ng-container *ngIf="isStringRange(range)">This </ng-container>
-          {{ range }}
-          <ng-container *ngIf="!isStringRange(range)"> days</ng-container>
+        <button *ngFor="let qf of quickFilters" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(qf.id)">
+          {{qf.name}}
         </button>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
-          <div>Before</div>
+
+          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+            <div>After</div>
+            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
+              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+              </svg>
+              <small>Clear</small>
+            </a>
+          </div>
+
           <div class="input-group input-group-sm">
-            <input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onBeforeSelected($event)" #dpBefore="ngbDatepicker">
-            <div class="input-group-append">
-              <button class="btn btn-outline-secondary btn-sm" (click)="dpBefore.toggle()" type="button">
-                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-                  <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
-                </svg>
-              </button>
-            </div>
+            <input type="date" class="form-control" id="date_after" [(ngModel)]="dateAfter" (change)="onChangeDebounce()">
           </div>
         </div>
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
-          <div>After</div>
+
+          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+            <div>Before</div>
+            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
+              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+              </svg>
+              <small>Clear</small>
+            </a>
+          </div>
+
           <div class="input-group input-group-sm">
-            <input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onAfterSelected($event)" #dpAfter="ngbDatepicker">
-            <div class="input-group-append">
-              <button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">
-                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-                  <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
-                </svg>
-              </button>
-            </div>
+            <input type="date" class="form-control" id="date_before" [(ngModel)]="dateBefore" (change)="onChangeDebounce()">
           </div>
         </div>
     </div>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
index 806027f9c..e570862cd 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
@@ -1,25 +1,37 @@
-import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, SimpleChange } from '@angular/core';
-import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
-
+import { formatDate } from '@angular/common';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 export interface DateSelection {
-  before?: NgbDateStruct
-  after?: NgbDateStruct
+  before?: string
+  after?: string
 }
 
+const FILTER_LAST_7_DAYS = 0
+const FILTER_LAST_MONTH = 1
+const FILTER_LAST_3_MONTHS = 2
+const FILTER_LAST_YEAR = 3
 
 @Component({
   selector: 'app-filter-dropdown-date',
   templateUrl: './filter-dropdown-date.component.html',
   styleUrls: ['./filter-dropdown-date.component.scss']
 })
-export class FilterDropdownDateComponent {
+export class FilterDropdownDateComponent implements OnInit, OnDestroy {
+
+  quickFilters = [
+    {id: FILTER_LAST_7_DAYS, name: "Last 7 days"}, 
+    {id: FILTER_LAST_MONTH, name: "Last month"},
+    {id: FILTER_LAST_3_MONTHS, name: "Last 3 months"},
+    {id: FILTER_LAST_YEAR, name: "Last year"}
+  ]
 
   @Input()
-  dateBefore: NgbDateStruct
+  dateBefore: string
 
   @Input()
-  dateAfter: NgbDateStruct
+  dateAfter: string
 
   @Input()
   title: string
@@ -27,83 +39,65 @@ export class FilterDropdownDateComponent {
   @Output()
   datesSet = new EventEmitter<DateSelection>()
 
-  @ViewChild('dpAfter') dpAfter: NgbDatepicker
-  @ViewChild('dpBefore') dpBefore: NgbDatepicker
+  private datesSetDebounce$ = new Subject()
 
-  _dateBefore: NgbDateStruct
-  _dateAfter: NgbDateStruct
-
-  get _maxDate(): NgbDate {
-    let date = new Date()
-    return NgbDate.from({year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate()})
+  private sub: Subscription
+  
+  ngOnInit() {
+    this.sub = this.datesSetDebounce$.pipe(
+      debounceTime(400)
+    ).subscribe(() => {
+      this.onChange()
+    })
   }
 
-  isStringRange(range: any) {
-    return typeof range == 'string'
-  }
-
-  ngOnChanges(changes: SimpleChange) {
-    // this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
-    let dateString: string = ''
-    let dateAfterChange: SimpleChange
-    let dateBeforeChange: SimpleChange
-    if (changes) {
-      dateAfterChange = changes['dateAfter']
-      dateBeforeChange = changes['dateBefore']
+  ngOnDestroy() {
+    if (this.sub) {
+      this.sub.unsubscribe()
     }
+  }
 
-    if (this.dpBefore && this.dpAfter) {
-      let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
-      let dpBeforeElRef: ElementRef = this.dpBefore['_elRef']
+  setDateQuickFilter(qf: number) {
+    this.dateBefore = null
+    let date = new Date()
+    switch (qf) {
+      case FILTER_LAST_7_DAYS:
+        date.setDate(date.getDate() - 7)
+        break;
 
-      if (dateAfterChange && dateAfterChange.currentValue) {
-        let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
-        dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
-        dpAfterElRef.nativeElement.value = dateString
-      } else if (dateBeforeChange && dateBeforeChange.currentValue) {
-        let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
-        dateString = `${dateBeforeDate.year}-${dateBeforeDate.month.toString().padStart(2,'0')}-${dateBeforeDate.day.toString().padStart(2,'0')}`
-        dpBeforeElRef.nativeElement.value = dateString
-      } else {
-        dpAfterElRef.nativeElement.value = dateString
-        dpBeforeElRef.nativeElement.value = dateString
+      case FILTER_LAST_MONTH:
+        date.setMonth(date.getMonth() - 1)
+        break;
+
+      case FILTER_LAST_3_MONTHS:
+        date.setMonth(date.getMonth() - 3)
+        break
+
+      case FILTER_LAST_YEAR:
+        date.setFullYear(date.getFullYear() - 1)
+        break
+  
       }
-    }
+    this.dateAfter = formatDate(date, 'yyyy-MM-dd', "en-us", "UTC")
+    this.onChange()
   }
 
-  setDateQuickFilter(range: any) {
-    this._dateAfter = this._dateBefore = undefined
-    let date = new Date()
-    let newDate: NgbDateStruct = { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
-    switch (typeof range) {
-      case 'number':
-        date.setDate(date.getDate() - range)
-        newDate.year = date.getFullYear()
-        newDate.month = date.getMonth() + 1
-        newDate.day = date.getDate()
-        break
-
-      case 'string':
-        newDate.day = 1
-        if (range == 'year') newDate.month = 1
-        break
-
-      default:
-        break
-    }
-    this._dateAfter = newDate
-    this.datesSet.emit({after: newDate, before: null})
+  onChange() {
+    this.datesSet.emit({after: this.dateAfter, before: this.dateBefore})
   }
 
-  onBeforeSelected(date: NgbDateStruct) {
-    this.datesSet.emit({after: this._dateAfter, before: date})
+  onChangeDebounce() {
+    this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
   }
 
-  onAfterSelected(date: NgbDateStruct) {
-    this.datesSet.emit({after: date, before: this._dateBefore})
+  clearBefore() {
+    this.dateBefore = null;
+    this.onChange()
   }
 
-  clear() {
-    this.datesSet.emit({after: null, before: null})
+  clearAfter() {
+    this.dateAfter = null;
+    this.onChange()
   }
+
 }
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
index 5de9228bd..d0cbfc3c9 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
@@ -1,6 +1,16 @@
 <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #filterDropdown="ngbDropdown">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
-    {{title}}
+    <div class="d-none d-md-inline">{{title}}</div>
+    <div class="d-inline-block d-md-none">
+      <svg class="toolbaricon" fill="currentColor">
+        <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
+      </svg>
+    </div>
+    <ng-container *ngIf="itemsSelected?.length > 0">
+      <div class="badge bg-secondary text-light rounded-pill badge-corner">
+        {{itemsSelected?.length}}
+      </div>
+    </ng-container>
   </button>
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
index d34729eee..40c93838f 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
@@ -1,3 +1,9 @@
+.badge-corner {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+}
+
 .dropdown-menu {
   min-width: 250px;
 
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
index d675e14f1..b9d3fca6f 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
@@ -22,7 +22,7 @@ export class FilterDropdownComponent {
   title: string
 
   @Input()
-  display: string
+  icon: string
 
   @Output()
   toggle = new EventEmitter()
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/filter-editor/filter-editor.component.html
index e07edba14..6847a2902 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.html
@@ -1,22 +1,27 @@
-<div class="form-row form-group mb-0">
-  <div class="col-auto">
-    <div class="text-muted mt-1">Filter by:</div>
+<div class="row">
+   <div class="col mb-2 mb-xl-0">
+     <div class="form-inline d-flex">
+         <label class="text-muted mr-2">Filter by:</label>
+         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title">
+     </div>
   </div>
-  <div class="col">
-    <input class="form-control form-control-sm" type="text" [(ngModel)]="titleFilter" placeholder="Title">
-  </div>
-
-  <app-filter-dropdown class="col-auto" [items]="tags" [itemsSelected]="selectedTags" title="Tags" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
-  <app-filter-dropdown class="col-auto" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
-  <app-filter-dropdown class="col-auto" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
-
-  <app-filter-dropdown-date class="col-auto" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
-  <app-filter-dropdown-date class="col-auto" [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
-
-  <button class="btn btn-link btn-sm" [disabled]="!hasFilters()" (click)="clearSelected()">
-    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#x" />
-    </svg>
-    Clear all filters
-  </button>
+  <div class="w-100 d-xl-none"></div>
+   <div class="col col-xl-auto mb-2 mb-xl-0">
+     <div class="d-flex">
+       <app-filter-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
+       <app-filter-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
+       <app-filter-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
+       <app-filter-dropdown-date class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
+       <app-filter-dropdown-date [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
+     </div>
+   </div>
+   <div class="w-100 d-xl-none"></div>
+   <div class="col col-xl-auto mb-2 mb-xl-0">
+     <button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
+       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+       </svg>
+       Clear all filters
+     </button>
+   </div>
 </div>
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
index f98b9517f..913c738a5 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
@@ -19,6 +19,26 @@ import { DateSelection } from './filter-dropdown-date/filter-dropdown-date.compo
 })
 export class FilterEditorComponent implements OnInit, OnDestroy {
 
+  generateFilterName() {
+    if (this.filterRules.length == 1) {
+      let rule = this.filterRules[0]
+      switch(this.filterRules[0].rule_type) {
+        
+        case FILTER_CORRESPONDENT:
+          return `Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
+
+        case FILTER_DOCUMENT_TYPE:
+          return `Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
+
+        case FILTER_HAS_TAG:
+          return `Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
+
+      }
+    }
+
+    return ""
+  }
+
   constructor(
     private documentTypeService: DocumentTypeService,
     private tagService: TagService,
@@ -159,65 +179,61 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     this.applyFilters()
   }
 
-  get dateCreatedBefore(): NgbDateStruct {
+  get dateCreatedBefore(): string {
     let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE)
-    return createdBeforeRule ? this.dateParser.parse(createdBeforeRule.value) : null
+    return createdBeforeRule ? createdBeforeRule.value : null
   }
 
-  get dateCreatedAfter(): NgbDateStruct {
+  get dateCreatedAfter(): string {
     let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER)
-    return createdAfterRule ? this.dateParser.parse(createdAfterRule.value) : null
+    return createdAfterRule ? createdAfterRule.value : null
   }
 
-  get dateAddedBefore(): NgbDateStruct {
+  get dateAddedBefore(): string {
     let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE)
-    return addedBeforeRule ? this.dateParser.parse(addedBeforeRule.value) : null
+    return addedBeforeRule ? addedBeforeRule.value : null
   }
 
-  get dateAddedAfter(): NgbDateStruct {
+  get dateAddedAfter(): string {
     let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER)
-    return addedAfterRule ? this.dateParser.parse(addedAfterRule.value) : null
+    return addedAfterRule ? addedAfterRule.value : null
   }
 
-  setDateCreatedBefore(date?: NgbDateStruct) {
+  setDateCreatedBefore(date?: string) {
     if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
     else this.clearDateFilter(FILTER_CREATED_BEFORE)
   }
 
-  setDateCreatedAfter(date?: NgbDateStruct) {
+  setDateCreatedAfter(date?: string) {
     if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
     else this.clearDateFilter(FILTER_CREATED_AFTER)
   }
 
-  setDateAddedBefore(date?: NgbDateStruct) {
+  setDateAddedBefore(date?: string) {
     if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
     else this.clearDateFilter(FILTER_ADDED_BEFORE)
   }
 
-  setDateAddedAfter(date?: NgbDateStruct) {
+  setDateAddedAfter(date?: string) {
     if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
     else this.clearDateFilter(FILTER_ADDED_AFTER)
   }
 
-  setDateFilter(date: NgbDateStruct, dateRuleTypeID: number) {
-    let filterRules = this.filterRules
-    let existingRule = filterRules.find(rule => rule.rule_type == dateRuleTypeID)
-    let newValue = this.dateParser.format(date)
+  setDateFilter(date: string, dateRuleTypeID: number) {
+    let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID)
 
     if (existingRule) {
-      existingRule.value = newValue
+      existingRule.value = date
     } else {
-      filterRules.push({rule_type: dateRuleTypeID, value: newValue})
+      this.filterRules.push({rule_type: dateRuleTypeID, value: date})
     }
-
-    this.filterRules = filterRules
   }
 
   clearDateFilter(dateRuleTypeID: number) {
-    let filterRules = this.filterRules
-    let existingRule = filterRules.find(rule => rule.rule_type == dateRuleTypeID)
-    filterRules.splice(filterRules.indexOf(existingRule), 1)
-    this.filterRules = filterRules
+    let ruleIndex = this.filterRules.findIndex(rule => rule.rule_type == dateRuleTypeID)
+    if (ruleIndex != -1) {
+      this.filterRules.splice(ruleIndex, 1)
+    }
   }
 
 }
diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
index 27aa4d366..2efd1c58d 100644
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
@@ -26,9 +26,26 @@
       <td scope="row">{{ correspondent.last_correspondence | date }}</td>
         <td scope="row">
           <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">Edit</button>
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">Delete</button>
-        </div>
+            <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(correspondent)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+              </svg>
+              Documents
+            </button>
+            <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+              </svg>
+              Edit
+            </button>
+            <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+              </svg>
+              Delete
+            </button>
+          </div>
         </td>
     </tr>
     </tbody>
diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
index effae2826..a128340b9 100644
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { GenericListComponent } from '../generic-list/generic-list.component';
 import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/correspondent-edit-dialog.component';
@@ -12,7 +15,10 @@ import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/co
 })
 export class CorrespondentListComponent extends GenericListComponent<PaperlessCorrespondent> {
 
-  constructor(correspondentsService: CorrespondentService, modalService: NgbModal,) { 
+  constructor(correspondentsService: CorrespondentService, modalService: NgbModal,
+    private router: Router,
+    private list: DocumentListViewService
+  ) { 
     super(correspondentsService,modalService,CorrespondentEditDialogComponent)
   }
 
@@ -20,4 +26,10 @@ export class CorrespondentListComponent extends GenericListComponent<PaperlessCo
     return `correspondent '${object.name}'`
   }
 
+  filterDocuments(object: PaperlessCorrespondent) {
+    this.list.documentListView.filter_rules = [
+      {rule_type: FILTER_CORRESPONDENT, value: object.id.toString()}
+    ]
+    this.router.navigate(["documents"])
+  }
 }
diff --git a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
index 78c86daf3..d2ffab400 100644
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
@@ -25,8 +25,25 @@
       <td scope="row">{{ document_type.document_count }}</td>
       <td scope="row">
         <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(document_type)">Edit</button>
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(document_type)">Delete</button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(document_type)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+            </svg>
+            Documents
+          </button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(document_type)">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+            Edit
+          </button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(document_type)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete
+          </button>
         </div>
       </td>
     </tr>
diff --git a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
index 16cdd88a9..d18a19226 100644
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts
@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_DOCUMENT_TYPE } from 'src/app/data/filter-rule-type';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { GenericListComponent } from '../generic-list/generic-list.component';
 import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/document-type-edit-dialog.component';
@@ -12,7 +15,10 @@ import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/doc
 })
 export class DocumentTypeListComponent extends GenericListComponent<PaperlessDocumentType> {
 
-  constructor(service: DocumentTypeService, modalService: NgbModal) {
+  constructor(service: DocumentTypeService, modalService: NgbModal,
+    private router: Router,
+    private list: DocumentListViewService
+  ) {
     super(service, modalService, DocumentTypeEditDialogComponent)
   }
 
@@ -20,4 +26,10 @@ export class DocumentTypeListComponent extends GenericListComponent<PaperlessDoc
     return `document type '${object.name}'`
   }
 
+  filterDocuments(object: PaperlessDocumentType) {
+    this.list.documentListView.filter_rules = [
+      {rule_type: FILTER_DOCUMENT_TYPE, value: object.id.toString()}
+    ]
+    this.router.navigate(["documents"])
+  }
 }
diff --git a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
index 76a92e4e9..783c22b36 100644
--- a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
+++ b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts
@@ -95,7 +95,7 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
     activeModal.componentInstance.message = "Associated documents will not be deleted."
     activeModal.componentInstance.btnClass = "btn-danger"
     activeModal.componentInstance.btnCaption = "Delete"
-    activeModal.componentInstance.confirmPressed.subscribe(() => {
+    activeModal.componentInstance.confirmClicked.subscribe(() => {
       this.service.delete(object).subscribe(_ => {
         activeModal.close()
         this.reloadData()
diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts
index 41bb21156..f839010b1 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -50,16 +50,26 @@ export class SettingsComponent implements OnInit {
     })
   }
 
+  private saveLocalSettings() {
+    localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    this.documentListViewService.updatePageSize()
+    this.toastService.showToast(Toast.make("Information", "Settings saved successfully."))
+  }
+
   saveSettings() {
     let x = []
     for (let id in this.savedViewGroup.value) {
       x.push(this.savedViewGroup.value[id])
     }
-    this.savedViewService.patchMany(x).subscribe(s => {
-      this.toastService.showToast(Toast.make("Information", "Settings saved successfully."))
-      localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
-      this.documentListViewService.updatePageSize()
-    })
+    if (x.length > 0) {
+      this.savedViewService.patchMany(x).subscribe(s => {
+        this.saveLocalSettings()
+      }, error => {
+        this.toastService.showToast(Toast.makeError(`Error while storing settings on server: ${JSON.stringify(error.error)}`))
+      })
+    } else {
+      this.saveLocalSettings()
+    }
 
   }
 }
diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.html b/src-ui/src/app/components/manage/tag-list/tag-list.component.html
index e68b997d1..bbe2c6dd2 100644
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.html
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.html
@@ -9,7 +9,7 @@
     aria-label="Default pagination"></ngb-pagination>
 </div>
 
-<table class="table table-striped border shadow">
+<table class="table table-striped border shadow-sm">
   <thead>
     <tr>
       <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
@@ -28,8 +28,25 @@
       <td scope="row">{{ tag.document_count }}</td>
       <td scope="row">
         <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">Edit</button>
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">Delete</button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(tag)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+            </svg>
+            Documents
+          </button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+            Edit
+          </button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete
+          </button>
         </div>
       </td>
     </tr>
diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
index 32093e0a8..e3f151550 100644
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts
@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_HAS_TAG } from 'src/app/data/filter-rule-type';
 import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { GenericListComponent } from '../generic-list/generic-list.component';
 import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.component';
@@ -12,7 +15,10 @@ import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.compon
 })
 export class TagListComponent extends GenericListComponent<PaperlessTag> {
 
-  constructor(tagService: TagService, modalService: NgbModal) {
+  constructor(tagService: TagService, modalService: NgbModal,
+    private router: Router,
+    private list: DocumentListViewService
+  ) {
     super(tagService, modalService, TagEditDialogComponent)
   }
 
@@ -23,4 +29,11 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> {
   getObjectName(object: PaperlessTag) {
     return `tag '${object.name}'`
   }
+
+  filterDocuments(object: PaperlessTag) {
+    this.list.documentListView.filter_rules = [
+      {rule_type: FILTER_HAS_TAG, value: object.id.toString()}
+    ]
+    this.router.navigate(["documents"])
+  }
 }
diff --git a/src-ui/src/app/interceptors/csrf.interceptor.ts b/src-ui/src/app/interceptors/csrf.interceptor.ts
index 32f3e99dc..2c654aa36 100644
--- a/src-ui/src/app/interceptors/csrf.interceptor.ts
+++ b/src-ui/src/app/interceptors/csrf.interceptor.ts
@@ -7,16 +7,21 @@ import {
 } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { CookieService } from 'ngx-cookie-service';
+import { Meta } from '@angular/platform-browser';
 
 @Injectable()
 export class CsrfInterceptor implements HttpInterceptor {
 
-  constructor(private cookieService: CookieService) {
+  constructor(private cookieService: CookieService, private meta: Meta) {
 
   }
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-    let csrfToken = this.cookieService.get('csrftoken')
+    let prefix = ""
+    if (this.meta.getTag('name=cookie_prefix')) {
+      prefix = this.meta.getTag('name=cookie_prefix').content
+    }    
+    let csrfToken = this.cookieService.get(`${prefix?prefix:''}csrftoken`)
     if (csrfToken) {
      request = request.clone({
         setHeaders: {
diff --git a/src-ui/src/app/pipes/document-title.pipe.ts b/src-ui/src/app/pipes/document-title.pipe.ts
index 09445f595..621562d39 100644
--- a/src-ui/src/app/pipes/document-title.pipe.ts
+++ b/src-ui/src/app/pipes/document-title.pipe.ts
@@ -5,7 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 })
 export class DocumentTitlePipe implements PipeTransform {
 
-  transform(value: string): unknown {
+  transform(value: string): string {
     if (value) {
       return value
     } else {
diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 05c46750d..00f84048b 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -116,14 +116,14 @@ export class DocumentListViewService {
   set filterRules(filterRules: FilterRule[]) {
     //we're going to clone the filterRules object, since we don't
     //want changes in the filter editor to propagate into here right away.
-    this.view.filter_rules = cloneFilterRules(filterRules)
+    this.view.filter_rules = filterRules
     this.reload()
     this.reduceSelectionToFilter()
     this.saveDocumentListView()
   }
 
   get filterRules(): FilterRule[] {
-    return cloneFilterRules(this.view.filter_rules)
+    return this.view.filter_rules
   }
 
   set sortField(field: string) {
@@ -245,7 +245,7 @@ export class DocumentListViewService {
         this.documentListView = null
       }
     }
-    if (!this.documentListView) {
+    if (!this.documentListView || !this.documentListView.filter_rules || !this.documentListView.sort_reverse || !this.documentListView.sort_field) {
       this.documentListView = {
         filter_rules: [],
         sort_reverse: true,
diff --git a/src-ui/src/assets/save-filter.png b/src-ui/src/assets/save-filter.png
index dcaa41714c78a70b8568e162a0e8afac86fe8168..0f011f8127280d88db5970d30e23570765fa5cc9 100644
GIT binary patch
literal 8263
zcmc&)Wl&t*vc-eDGe~d-m*7rtg1c+*K=5D_f&_PWcPF?64emZT!C`O)hsSs8)vb4{
z-uwMd)$YCO{MfZmpX%PdR_`!XWmybVQdAfi7z}y2kLqvp&fAznhI_N{D#V^|6N<B(
zo+}Itmf1f8wp6Ud76yj$UjCzmrk61!3&j`DYJJc;e(%6<<K0v;96@aIqv2OQ0_=~{
z#_rOK@VZGxo+d<2($E`dLt7U`d+4I~b_65E=71lK+$aVjcxGlMkk@vW$1(l$I*5DN
zjq8>+fnFn<9Xosf^(n_<?|ygqYD_766G6h%A3m5Lg+a#jTp`5AI7=Ds_<qvrJ^2uA
zih)YKkP>)UICkI=HGbC%^}SsCVA}cI_T^3WfJW%bDO=jumIu{G`@Hy}S0j2Ap*5`=
zLP;UJdIg3n2Y#Oj^Ir+K4*X2k7arbrW&m3!R)BS&M|s*V<NGl2TpU+%DoI3I?I1gG
zbLmo~e*iL`Yb<K?76PV*2l_i?0HM*j*hfyo*@SI3I}Qwf8`Ec)u=Dc6uL1I6X&9c8
zY@xC2q%H(`0f^uKH1bTfEWnc9&g6OGNbr|gVfgupBMs4E`rU|oQVFAx=6fRUH3^|i
zJ_Oq4Em&0(%>)?!jbmEJ?DRO3Mkk>&kTco6rU+TtkT-DomcGT-(Y%{F_))sdb$cFH
zg>1Eg$D6GL@2WChzFpVpmg!Tm4A*y=|GDvhf5HDB7~sY8aEv%c#jcLBFZ*r{(m(Q)
zo2qG?S_$*7k`}bF{BIZkdxPCcS)XPVEfQG(1Rk+kiDGIjayJivBzJz70zawAnujU4
zmUmGyQi!W&Rx1q76w8EqYHB~brAY{_$U=shgmblA1rab63a%L^q)kGT$O+uBZ>$Ys
z;d2H+Kf7S}N%WYC)N29=D%1%lWWx92&2ijSN2rge*2aIv7wO(b`oS30xDC%(!}Z`)
zxE0_ls;)kW7JTFjBN2!i0ZI_IY;J-*&379Vg#+O{!v2Ud&rXIHTBn>2+a@M;I$;x3
zkPT!o9vcq1B-^L#vW&7h&%iC>>P`51=uP+`8B`LNSi(;$P);C^Q1i+6umntf|Hzm&
zQ}F)1_7*Kj-EV?16MRb&tnm*ZMaGc(s9Q-aRS#=dYEu{Bfj!PPFsSlw`b6FLsj?UJ
zv%5zXxF)FsBtTBrm6u%j6pj^!ufim%YtxR1{LLG~&|o(ip!(V^V8Qil_21_586H8Z
z-l5YxfRH&%Z1*v9aX&JZ@|#v7&K0}UW^P5YMJOag=FtQV7(k1!ph^f;g88fAsG3gE
zq5!YM6@q#uB`H^lFHzQc#teBRt)tQ^$Ion7qKZgLz;?iuAL2zvgEZZvYt$c!$lWv<
z5~d89p-Po&*VUNQV59bS9!WYG9_G3d7)}k9dzT+olpj|Zfc1^einE&&9_I;)dI2Dg
zk-i&x+Eu+E;1!Ors303VGrJhG$yh>4SNjB547t%25wiT%Ms_|JI94@lT!))@UCJTD
z;me^=$@2AG=+ntl8lJTskNR(oH4ve0D0z`k`B8a?<$jgor0O!WDtjHSF&qTG&YZ1t
zB3syCEP~9c7&gd0hPGxcYbYv-<3|@7!QL`<xQ{18uRT2d4{J|`vCe6Hy*awNMJ;tn
z1#k6*oG&j8Y9%ET0>0OQ>hCuXPQhAj4X5T+4ecwBaz6Gbr^Y%Q;-3pYn}}SH8l}D{
z-K25vPu}rTs>)POk+N0?e<z#`zYjq$`SN1^5{YPT+;u)C#N2OaIlH9kbZi6iyAexa
z^$q39cH&n-@*oG#FB#Uf^x`9cJ@U4mVto8tJdO-QvqeA)e02(0B2+&jimDomyVAed
zHtG+FTWFA@#~P+dBHNf%l|0i&=q;sT(Q406O&Oj!I%5^(2^Y`gHO>wq(bQ3E!s9Ya
zexUlFAdqWO?~#%|f=N^``)$3Z>{5PF|2u>(7Tn=cCVszDe1h@uiAh%@x1fQ`5b}-7
zeW@Vm5ZJ~p=(o8stl7qN=goRbxWcFcW>V6_a`xO#r1TZx#s?>ywa~x19(KypvD96L
zsOD2YL03me1?!A^#NmwW+9k8LXZ4;-LSP|qJHW{N^b6R*F$=29S!1fMrXgBn1Fj3V
zFpusiq_bZAuz!m7iAa50<4f1xZDC!<!&no%0j>p}=pEE=>!f~Yoayf5{sU=8GbjRW
zu&d!IP`MqFZG9TFjx$77&nS#R#gV^qI2C+2v~N{tQiEhA8!Q|4ElgF<Kuyg+;y0Nn
zBe$nB)U?ibJ8?0w4_S9s)wL_{A$*&;f3-C%CJc18;%WUU`xz2Y^AiJDc*0#W#>UEA
z<#^sEvCFWlWwpoaI$b;cF8Y*))wOuSsM(Pmfi#_%kLbyK_>&@K%ROw{ZsUASmEjdq
z&TlbBk@~j&;k!S4rpLc}GHZ&eisr%FZXSV%G8++l5#v?k7~?nR;N|7%xf#vL4*5WV
z%;@qq*OCgAoN8d8r0G(Kf1}WeCD7)ecK|K%syk8wo*PMhdbLtmIuSK-F&T@T-(e}&
z%sZ>AXO3!bVmz#2@QBR*{nWD6tM{=^A<kYUUWf`yg<x6=H~%Uzo9=hvg)>93*(+ZS
z%a3zQW)^&qN1Waj9SD6CO$dIK?`7w$w(qaYFi-B8`k#9y(0fIbczLXio4Z#QzW{V6
z{Z<hm*WO-QvmdmV$lmzjh`sqa${6hccTQd!zC=^$B97o}`BrOXdA@AkrtjBj@0QfN
zkfqci;;|}yMMF10P&)v+bB8}OJ`MRE_o0`#hp~3tE?^qRSNtG}2>25Nfb>_xRnb-7
zoD@B)cwsN|hnm}~1W7ALzV=+^`1r{9)uAnla=dv$u3g|dN7Wr)xQY%h<&tJBH@@h*
z^s!Ic8CqjTKm+Kj@9nA&HFbU^B$))S8mwJE{<%S|tgh~2lu*=d<4RFq{}WzBv8cyB
zo??zkJT`d_cFK}vn{KL)p0B0~WseKCa{KJz-EkF`a;v?ej!sHXcjj6AQP9PQT!jIA
zB4!w_;4<9M$%SdmPBgGPKVU8u=L>Q(7(8?+p_>|w%R|YjR#&Lvpvi(>r|RHhsBYy*
z7dr32IpD2+xbu0h*QC1F*E(^ZH7+Zj^@NEiwIRC<SU`cJiEZERepV+kJNN=^cRa4n
z;@aQEGRZ9=#3D~fj)j8j`8NBoMPG9lb2WI$SGf)^%StA)gtfGii4#)!a!qH3hBKf}
zzucFUwJA)#p1D#w-A!I_%PzYI$iM?NaCZm7TmR^|fWc;GZWzf^D1eREe3jSx+(&T}
zJDzl83tDtZ4t*0IzG8;Y$U9oGcu5S(nt-1$a&|9Cd||Dl7I&L*v$7`lXN^wF4iNLM
zOWogBE7DiV03jdzUtZ;xv?3@hbXG;9#^1ibpdTlj@J_UEhg8m0M)`mgJ}G5z*@63U
z@Ls#@1PWia%2wzJKKa~5%f=*8`W!y*djZi|wq4>7?_t;p+(Ci7N{fej{vK`~2ff!P
zXKdTV6Ze@0Waxd>VH_+()V(xv5c&bSzLTceFEP=PpRG|4INr6GJw%ZVr>Qok);Q2d
zrdl4K5DP5Xixwcuj$jVR46bwDR=ck(a>l=<t4I=FdcG2CWhb7XJ}OjL-KeNBN)%||
zAQU3p;;ujatEF@a{BU(XO-WABe!SVV%bb%gx~CAG{(!J6t9@5UPuVf(U429{q;m%d
zkZ0H<WfCADB)~zWDQfIXPmfh-?kjn^f4JIdxD~J!DCFeiJ#^NSmr)>W2fPaCct-oS
zy9=~=P_8591QvEquj;C4_&;Bh1#^uK+HlYh(7tT^nV%h;Sn~90PHh)9-F$O$yVzLQ
z)xd4G8SMw&`5N8Er`AW~?{t-Y(>LHF(2u(I_Q#=R8t2XE(=Qr|+`hn5mk%g&PcN5P
z?OAJ6t&{cPN8I>?%mT2cq@0<ZE<dc?%^j!-f?FLt>@fQn1hRdIXL~>Dk|pD(^rsy$
z)J{D5FCtB0GZHL-68-*m<yc2PW=-EfHDb2{*?*!uH)`yEF0zyo??EISKEj{`HEk7S
zPxtlxl1>=vhQenwztqQFXeIwNer6`<+Ks!ngdsHJ6Xt)1#*3-~{}6(t0lz<^fV0WU
z<9f*w(fEO$>+{3GVPV~`%3oD$^#yK^L>Y@bJbc(s$VAa~)gm!tzn}VUC_A9TVy1fB
zk`DCUl@YOD>Dno=V_z^CYZs<By^NE&h*Sk&J9`CbM2l~izpsuN5)a8+#V&68?zNL|
z%$Zac<Qst2e48H75f&Vtp5oQBu}W1cYZq`_)nMAxIa9>9YN*ZauDb#>Pt}2@cDCyI
zcd<yyRQp}xxN5sRFnPwb%E|m{8$&>}^()+#Ws3KZBns1@Lqf2<x@5R#hRE%&;Vgwa
zyRBd6B!^|;;$$+m7Ue$n1g!-QuK+!t6smAZIq^z#%4xEwRuW^+m;##oArZ}ZT#c{8
zWS7?;C~oX|(jzr*$A5b*j(eadh!`_+*W*@?QtC3E3~jrqKgPuxE4RgzINMx-KiLaY
zDE~>ORi31vqi9cHA#rWaYxZKe8FaM?pb~gbC-C0!0z>iO&sgGEI2aXKiB#a*ZC=(5
z5j#Su$7=u%539gcIf_ogbVsEyFf5ik0>a>9G%Sd!HxZ7VOX`_;T3TJ<Vbs%$JlPWS
zt^BILQ~hw-n37A0S%RcPS}vSRj2X1BqX%f_pp$D73)Q;A#upYxj4=NzwZ$=VCfHHY
z)|IaLo=%$mJ(5ag%VK2XesEVrE|#~}XHskyVrxRd$&=nM%^LFPl!!t!_;S4TE0MfY
z75032RFtGSU}wVw;uMY!Q!h2MNgYq*MOm?BoP4;Vg6+7ZwadM|&k4hc+1V5%Zvl>o
z!&0ez9E?V^{r9hhg~iv&nA$jbw@y@hK24oCQCNlXv9XT|7!tV}x%Rn%9N@%srF<;G
zUMcI}xc1i8)?O{~8|V^@$Zi;Jv5PEv#m0{@Z|oI71qW+XjNYjrQDtrgD8!PDKJX##
z19mPJqF37yFq0oG#p+4{ejr)lOi0QmneX}%&8Waq^Sswp^@uDnIJ{0cuGGw(Wpl?O
z{;0aCnb%)Ybws9z7^1>cAHp9An-mumc9YvCtBsWRDukWFKd13Ak+ICN_-%28@Fa&|
z&$;Iqp@R!LoA-Ydol=1r=MNh<qV5}z>N2Me2mTObz1+a-EwvVzzu?xA{dtVN_^R8i
zDv4zhbVOz*?RwxD;~!t>A2I&@%|ttHb+}7Eogj7bce|Fwwl?NPiiEDr$vPZI84X;y
zpvqhU`_R5q7AUS>E}j;<c2Jus7PGG+8}GAh<xC6-4hu4trsh(P#48T7q|uNTa6zp9
zsLzb%N9c7=QXH7FUm-8lj*OJ_rRgMZ+TzddE>UC-hwWsxh`9i^`h{zG@lH`i*I*9K
ze*ZG$>DdvDK{@sAIpho->2DYwLw>=djn23twj{U{2DLF<>uXy4-27sepceE(ma?eu
z`h=3-tk<g!fDDRbTlW8eah@|bm$<XDqgAnfc<M0)Dc;+AJTpOc4U8)YKkK~hf<mG3
zfpk(ojgVkxwz>o03&IDNAV#qlAQO<^$eiuw)8<C9Uey>Y%d)gtb?e~vfMPel`A%t!
z*b72C!ns+CT7s@Lmdcz2eig67{0IniHO|LvZS**+BBlXN)*g-Ac>c0D0eOU;lvh<e
z?#!x0ghz03aWUpJn)o-GzW8<;-~P#Pa$Ie(UDL6@Jz1ar(%5x9Ga3n8k`DMf5dOQw
z+7htz`z*!Jhh8~7^hTppfZ0R^<u*6HANc*1tB8@psKaq3xz%<5<u(v&-ET5~Vj_Fv
zGYP+Q_sv!HaqY5cd~8x0N{y*ut?A362?!pRSaq>x!+DgIPwH;%R@Cb<Y%n1{{>Hm6
zejtL+_f@38cOt*nt?lUOD0yMw{QSJbFc{QHGk4zF@DQe(goxj8{qor4u&%47cK>kf
z^ka8ux?piE^8=^{)cFiuX>25FI}s7<cmIpAcn0oVao}<UceK{lI#1;W5Jn*8N2ILk
z2zvvbI<HQpwe5vizz4yugg4i-qj(9pCCbm^^*<@Ue6icM!-oq?%GudT6mb2Vl9(uY
zS5}gp&3D!oCH8u~VBn;j$sgd7D*Wy80b>Ky>H(>0UWZFQI5-#@8k*Drd7m$uY&s41
zJP*c@Pup}Vb6KlheErJ)`))g$d<Cq}ipAzbEajXxHV*?w<1C<})ALS3F{8D!PiBhO
z0dF}q3d|LC4laoT$72|udRcA_Q;rS*iSp|&SDQEdeAZTv-$W=N5V+a*+;+V8qqCua
zhQ7_Z&z=}+DkId^l6q}YyIG7S_Eg%@@ifl2LCZ?jzn|^%k_76=j7`<m(lRnI7;P!+
z)|*SNG8l{@BO)Rb^6d}J67me#oyzMoGJ<ki{HcXsDhlT^huoV{^)l^xR>|pCRgp&V
ziZB^%e?Y^1F#IX1Qc?`5FuD7|Uh~mBzW{oAZ?!wp?AR0?8F`)YCH?o?Kk9keNr(}<
z*twistd#$x`~peRNgw|_1NxJsBl@uPmv7CBhNVhw6fZ^$`h>=A>^{!og=b}DEeai?
zi3IXTfZME&b6&5%D?1T$6>i?|XCtDGg|KR)$t93?vuWY4hz=c|AU%hDYqhnhR*6=L
zE7DZ@p^HT!%wJxb$}U8GkeCbr2z%B3A$!oMB0i4O_SQYpWejH-#*6<=6C$q4NUx1R
zJ@p?f@?X628m}(j9u3&LKcT)?EWYu*oj2d9v1#GMJjMj{0is=dCQ?86oeaZ!&&h>G
z^4-ILrsz9mA$i8=O6`oslhrb1pORD>$$>kLu8@4)amT&TbGd{8+ReXxdDN14hejkW
zvoNyFeP7PTlt;@-nN-45-oL4chi(hJ3%`~tNdZ`VGO82q<L(%rZr<E2i0h}J;3t>D
zBtI0^SX70WNK}jgua>@|k83DaWV~T`)*t#FK195wzA66Ff#-v9vJe0P12gq0Q1+TL
z^6|w5rOFnjGJ$1bA$3R>c~E8`opro$ZDu_kH${oU+SftYmd9X><JzuKzm{Q;E>OB;
zHc2b_A~6b?3j%>mNu)Mg1~-n%VX)Tq&Y+53*pu3i*pHB<ADcy4K@RSFvu5S5MQ3)u
zK}Y2I8!2d7`92#Ou7bLrR0i%*qw{ejir$|3dR)QK`a6#PkOiLH0dPEi4giltN`_1c
zqd0j_&cf2ti?*`O6o6PTyzQUNBS_s=R>Z_qZJjatMkUWl$;dKN5}MERf=AEvFk4B}
z$#`0jWDZ{aZ)y~YSjZFO-e}o<|8I&MK|63}nX6YiRhUo;yDw-!*4$WR$$|V)Q6WMG
zJtjK3UKgwo4Inq*0Sd1UL0Lq6JK9&&_}%2ZT43|52o;swuG21ENm;XnsP^y5X4lpx
zw)#+WW5)LuT3S+PXa+SB5@u%A!7GmK&=)SNZ7)WTzsV5pVik*ImV@C5moBJeMNyUW
zkf}G2fZzA}qq@4Jj6N{P6S5{o#lXx=L+<K_!^OsnL|Qp-=kjh(TnGYXD@BGY`Wa(o
zZH4*Uf%yLF2kuWT-uJZHJ}I3QqnNmbEGV2PB^4v4!%5kx##$!x3+qU;8i5lq*|F)w
zDagrxcL&jtEQ0Fxbr1{k^9hZcokvocFp9n57-sTkLNEcSFULBL{O+fT#w9UxGF>m%
zWH=$At4g;imrF5M^*QNQvafE7@Y2%KzGc^pj1F_9YDj_Ek<k=J0760}4WcGjGcz;y
zPmWSj1@oVODn~}B0Q6%iaR>tK&ojp&djj93WR=zGvVb{0xjC#(<slv(l9Wtjy7OP8
zw%n-|uu*a$Xnv_IuVQ9oG)>G*%yc=~VPae$#z86j_U#)E&KAR@=Fa}U)X_zKgK1tf
z$>NdHUb5lhEultqjyXavO#v3U=!|7kBx@HyfsIK--M<=X(G=dL{_4_2s4dgXjFgci
z$m{ZYd3IMz&`8%qd7@=oO|Uas9cWZM!%!bC;=2YpSy1r5BVCXxLn$*i1~>!5t|S~L
z7){>y)>~MA^IR)$-)G&vN+B4~4Svi7@&N||u$np!fc>3$*|ndYXjnSZI0}-nN%e}p
z|5e{G;)i&qpn$U}HB-5h@Iv6-_3xiZqAX=Oo%E*24<MG0v&_4{kUw&sDHQR`1p$Nn
zKRaU?uhcbcvi!tK3QNMAh^G-zxb4w9>bIfp)+49)UhwX6+haA6;p1je2ModF*d5Mu
zvWQytcwx@+)tMW5TZt<qpLP!og=7_)*SY+d4T|t#PQvN-5>%p&jBMc%Kt<EcC+m}R
zLRtACzfeSN9hfJFYv*hgQ=gb2zJ-5;$2=j1*NvDoLJ_;PFX#PJ{%e7qwJv{D<`*|1
zA@%|c+?Y^}sZ>w+9ZB}6JW1s{g-xY=Ri(;pBU$(q8Z=nv1zE8PvEp#*>Dg(>l(*>I
zf$Dr6BvU4YyHniEkGq_(sUa$Jknv(kz|6AHQWjS2kXr{9ACH;7RiQhVPan)WjWaz%
zrtr>sTwxhjSx5`6!08T&tf{1LYYAlj+C662mHc<6P`<e#Vac&icl>XI#nVqb<RbHR
z0yQ&*;1;TDLw+3rH!m@Dt7#&kdaowap4G=1>>Ur5Y7u>oNo7_M0g>e_gihU=oO7>l
zb{Cd3tj@sIM%6826&+&IoCHzlHwxyRWxP3ulB1RLFDV+BsYcvXelSviKg^`z{asBH
zW`Go*n6*T9xb{1Ij<nvtHR*S1#J&0X=xHt?hhKaVq2OmH`&w-5oKiOF82z~b$?y_<
zN|s-1K{!*)QgN9IR*BB?p-E==?weBKSmb&y^_iS$|CsxiUT4&3l}ZOnk5mZ|VZ}AA
zAnw{yDI?9EiLu$z$X`6R95G5DA@g1W&$ECr=raB~2KUZXE{at)0EWI;Qwd^Dha-xB
zh^5+-zf{`nEQ;_MkvN5i9i`5kOGqlYf%@7nN;ei*)W<hfpTN)R@KzDY!}+lUux(IE
zHaMz(WRfnX9a-x^g)QyF9M3)m$t{xPlw9N1`t#P;AHI_<Ig-NGTN_maE}RXNvm6*Q
z1skTtUsu?|P+wnsDyEgI429W_;aPq=74c>C0%jy!|7jmpk?Ub2!^Z03l*5J*<dOad
zkQhF$6j|)HA?ig2i=E~UrsM__vm2ur4_KV6<RBDys36H?c#WFQEgz3mXYFGX55C8@
zY8;1bOF@LA%z`@di5s|PcFJg2l#ZR<EEKT6@Ypy<8P`NagyCKhNXXYg4bh4rY!a{g
z3|SuS5;a6u@lgX{3UUIbJ-Q5f4Mla|%G4D0xdoFkxlg!P>fghUz;9f_+*rMCS#Ug=
z7x}JChi)KT+*$HV47yZcY5}s%MEC)kc#Q~I;@vx3=KPpi_q#`CU%5);`S1PVsu=$}
zz|IuXeLLLy*0<a|EchuX$tjDq>Pg;|PC5oqmi9GSmU4j5uc^67|GOodP-ol;XQ{hS
z+=QXK$XrgK8|d^U4X=TZwjET;Qy5T<#Q=GXKJ{_Dsc;f`s%bg!+QOA2q|>6#a<=fY
z^qTy1uWesZw1!)=dU)*Np);4rT<Y(oQAA%fnI@<+#!2fen1u+BN@((%xOWnCz6y@A
zcgk=l3p(@Lib*Te`&1lZju^xf?q1Hq<2895NQL}XYUFZ<wvOgjma{N8b`Ou>nMbR`
z){))-exm`>ZFtg|!)vJe5Csq$iR_2Z#a=EIf;i1R4wct4?Wp)&wTWNZ(%Iiip8&fp
z+VEDzUEjWM#2N{I69xcQo6h{C>BnM^7qd0ZH5Im%IIdU(4jwC5KK@UTB@#=`o&+WH
zvm^b7%jY7iqMVoO<qZ3EY*(F-%}}k1={Lcvh^}~xA5%k#(^H-&ophW~!(Y2AwLloD
z5bN%FEV$Xw@Ax3E0JPNEvtWxiisSp%3Zd}(8@FP;Va#8uI<_c#Ex5)F@`dik7z0fB
zG5=(#_&;f~{DecWCKZQMhzbuacPhtoP5ihUte{&55o(HY7HkK2Amd{&(Odrsk4=il
zP)sOJF0M>u;oLB-zgeu>IMaJQprp8hcn%i9H_!yG+kD|Jp)KTPoD1tkkgYU|W;05~
zgyT>>ycrqO8zhV_>J?IGiuvu(p{@hJ$&J6RL#3gMNk0HQKjBtdFwkfHTF05?A*94j
zO+(F+%v&&BI(xrDjxmmr<NJDH5c6a}wCAMO+s(5Xp!4GUSh=F2lM`~d8a}|>@4_f<
ziWP>X*p66SMI6wB&;4FdVoW4eb5SQH^Fga(-u6R!1-+po4`c0;9dBCm8QAAJGtGKJ
zJ9TW232*Rh1?1fQy|U+9tGS*uzn*(}U910egC|b)MnT}fv5-m!bMi2eDQWHHbn`$5
zzRW!&5c$>LAT9yMzlu(ME9u?dgT5m5gFYJC>nQpJ99qCR?0>Y9|J~<&1J^iPGN7}U
zw_Nc6moZ*EZ!^&G@$EH2CN#UV8hqowp`?9@nQTuZG+lMN#B|bm>TS}2+Yvr!ld=A_
z|B!^(aho-;aW;F$?@74zf6WW{sYVEmq*2Nx-E2P;!U+P98Er_v|6f7+f5h)AmM>Bm
W9G(85(c8@c7<p;skJXZ<KmH4vU+PT&

literal 8267
zcmch6RZv`Aux_y65JCtV^e4dw2@FAl6D$OGcXyZI8VJGNZD4SBCpZCyA-FTR4=~uB
z|2~|$x9XmA?$deLySjRJ?Y-7s-Tn2~9i^-!gO5Xj^Wwz|{4cVSDlcB30Fm+>7Ao@Y
zv3L21R5)5oNGMyIn!b3!l;EBqD32!gCahaBq<{z)LyApBvR3vVrpV%<zW1_`I9(Y>
z84*8+>)OSF!A7QZT9JHRIL|>%!Qfz8rr^l1?jB7B<IY6%*Z-uO!vnI?UDH3Ioyba0
z>452e@7nS3QNr2Tt8W)q&o}eqzah5T%oSt`i8A7HW%NKI=<3zG_Y`rH*P+EB75ZM{
zKm}bdIsQ6p%4p9p-)lEN{aZ<XqfwMF$K)#YTSaG3pJDVw*aBXQ`d33xT%*AJtc8Y`
z<U;Pmo2vuwImM2s<;{*cl=Kj-fi%Wg!XK!VW;NJy6JIQT_~+L-#&vkP-BG^b8cd*P
zU;SQ&v7hlX<Bc$#VR*slV_=Ski(lo;3gyeGiY-3^u_citIMv?GoU@$e^aU!kHA58e
zNiiU%OLO*Nc)Alm709b7_`TvCERb*0qJypRx7&xrGiMb2v1wPrcNNK%pu;TD-o6x}
zKkulhduxtP4errygsomm-yEtUPXOCVR@?Q(3qs?6FO)LTQtKBlsDr;qim7=S9Is%0
zCboRWJo|~>x9W?9_4}0+krdI*D%j(1myW;g{bJi9qPkJT{<vY$cx`cUUg=)PHrrhj
z>|3LTPW0CoK=;q9-?z`dLKuEAV5apjJctx~d7pTu;*Q+p?ER8A$x~+H$D#{%{)_WU
zd<9Q6`qe&XF;)V>|F3Xshk<oXUz}WQ$C#b3%oK|;q_L}E7dDQ3iLlYszA#d4Y;CcB
zd_b~JzHWEgr?Es4=S6gY!&{KCWR0D=2`Jqwu7xy(`!kE{mzH(FKt-#|1052=AP!ZK
za#vv%VlaVqdm6R7obPt{g%kfvy{aDNJab0z+L~{ROv!!EKR}E-qmW)u5;4_*39b!f
z)M5wnhm>SAFtbW0f045>X7m}tr_e~-*c)Afp{~2?Ck#qfW!-4dv(o`IQv1lmGApfC
zQ&L)S8dG+ciuojzQXAhiEmx&bt~T^eEPY5EOZp+lP5!9+=OfB99}x7U{yUR0nRI_B
zWq)_j{H%IWZat8P2baH+V!`nYQ(ko1<;K73zTWq*=cU|*D-L&KlJILUA&%vMCKeCW
zpxW}<sO%qGq4|mHoBqb?HU>7$#cIhCJAvOZpRK<O>dw#x(F75>D%%b=s-(Y>KJ&}r
z0LG$=(%d<pXOaE|QO{@CSJx-IsVGi7-b0cZcNlBF-k$Bmli7+aJzDD+EVd0EcItJK
z<Nnsv(Uzl04QO_3hi`iPl0Dcctuk=AhVLZM73MKAh`J7ZPY8d2i~MfCYDu!qJCZeS
zUeO3ro3}Ey`EyCXXc{@tck2rzvlNTZ{FU9|v9TxvEbvhW5bcrfsmwaX>S*idcN*xY
zmb`Il)e9?__=b*7#vs=+n!z&U(PC+w7efRoP*RckS`qiWSW%%m`t8_lDT6V&@$Uq^
zxLR|9$~0P>)HTjfryb*X8(lG0K0$91y`+Ewvv^Vee+a3<)F__@Kh5vXX9vh&RM4&&
zk-KaB63<C{J*Bbw1#^;Sp~jzGH+klM3^+vzj0b~A|Cr0^Dut<L_e|$&hAv9X(3V%0
zm!;12heS<nwF`QmwcuIuyQ^JgTLpd%w8gb;67L-27>(;9zP>85oTF5AomDar-rd>|
z<Z;o^#r60d!737T51X*B*iS*}LfgTSiZsMp_ODRYu-1kfZ>Me(65uR7ii`;=<t%a1
zu<$NDKRy+d-Bw%;W>W@IlfV9Czmo)f+x1Dr?m^eEd&h3C<AB`X-tT5+Cz8|zdn0ta
z$C3R5nR}cX3wsq4HxJj1+xdmdc~fKEmXkmY=__bVBKK*HdIA$WfS3LsZebv}tG>Fa
zT$kIES>`%I7cuA3=6qVd7O%&@ZFksl4V|zDAZpkq*kVR;Dr{{V=6dwXg5-u;D@ehL
z3z-U!l6X|u?6#!UxYvaC>P_eE_z?hV3!UCVxm15<{7umGwPq^>I4AM6e?QeXC+_Rd
zs*>K2Uz-31b^fYPJT+&u&9Ntx7)B96TSz%ci|zQ>E%L}V0am$G!9)<4u|h2dXm`F8
zaed*c>5SuxE9@UKjQk`&u~@Ucg0^>)s-9$}-z%XlWb5n#UkN)EYPOwqV08_r5|=b~
z(0VpjF8`ETc%;(ufH~#=j>jw3LR&h(N48rm<2ZKP<x}cXde?#IR}Sb=Tld43yngm$
zMHSD|uw1?mCZ4YPFc~?8*o@7gBzTdIngl{(?QMNim$>1XT(du(HkvUyx17}RtK)V~
z_mkA8@=we^e*9W!=So-D8<wSDJTE^_buj42aRL{q+{sR`j7PT-OOf^@Y&3?ZY-r?Z
z8hzLNT#*c8D2O7DIukr`z<W^KcwduT-$EVez1QnlzW**Tz@7PoidWcloa(lp`cq)p
zv6Q>%STy*_0A;L+%{;5!Xse!+)P`)2JL7iL>$)8~)`0s0-kEtC_&hm{5rR90lfUD3
zm9AZ_NYiBn3--(jF~x~HI5ri#e26m;5rB&pBIBBQHu|p^1zq9+yH7NeOfz%ws%Eht
zwKyGggs4zJmO0jCj72_r6nEoAvO{%?p@F{c@%|C{Itgrd{iSEDGFy=a1OiQ`$Rs!b
zw#2*U2IM@2hX?12^&{G@A$r~p&Q;YBr?6?RF6sc!8Dc4SdaYz-HMA`=5N-EAgyDY=
zV$gjs?|d<5NJ9_@A_cVUKwcB0?RwRmOyI^Bn3_8`402U%jhkin4p@!2N`#77R`_eZ
z64%6R<~0OcL%Mb=fT$g4f^WV_r+OIRV`HtH&6F&xIkXD2^z|5T#ktb})?6O<(wvQn
zH5~Mn;xAs$5>Fnt+#WnkcE`vHmmy-1J7zGr_N>}R!}FwbpZ+3FXl-j<DDY7|=izu4
z_L4l@I?dM791~;CD{Xk|Z@G<@podmSYt$zN{ssO8t;HnuWS>?a!9@X*B$8Y2TgW^_
zT#t9{71{PXbWd*=3zfXD&+A>i3akNIu9>+94cyH>u73oM2ebJCkBP7D<^S5auOAOm
z<}HQhIcV30*#t%Q5e+0v#akPm9d<4S@E1|xl96Li2Ks*S<uZpx8Iq2Bi7d!?pR#4t
z!YYIfKYQBPnc<O=PI~23^feLK!^{o<1ym~~4Y+6Ce*AfL9~;L36Tr7=J-NCZiRIm3
zs!g2yf)e~YY5U3&Ug98ZVRlY#ho3C*M#5P_d4^$0eM%@LtqR{x*P2BiteOsSsD7ks
zl#2l5Q7GR#)w!GK79<L-Ao^sPc$)iZ;D4~4lo3n5-4e=yA_yL;;J(v^B3OTJo#Y#~
zj7R!wbpAt!)R!T7X#<Ddxeq_ues8&qfkxL?L#;J^HNi1WsRox{kQw#*Q4ViH%gB!H
z)!dgPG@S)fzK?v<r=B6!g}Y8o&j@py)4}q@Nbq>_N(s1_eHk5=j`V72yhtlwYvJHp
ze}``z59*G~KkzTGbErhp?W2@@JV)N&b{ajR0Z{h|(cSxMzVOoTTy~yO4)w%NeP}eX
zFd+ze*95{uo?l;YU$8aq9OXt!QlU?UJ|!-ZOe!S^s%c_0uFYCiEb>`W4G<gwfS~AT
zYo)5a0fKx)%aA$0rnw2KM`gm6%qwTEGITT1`#Z&^y0WT_Bqqx)yWE4YRK%0#RHsaO
zF+<)Rg$yQ55FN_#M*1ERQ&yVk=_4lXY+jq%PN;j#&@;L$P(iDDS1zQopT!mb=(0Wh
z214uzX@ry(PSvn0((A*EKl*pPM)U1rF(#qn5+Cl{qZC*aP#p<EacULw)-ZlMF#dBY
zLXYb`4uw6N-KMI;r$qs{Gu)0By4WW`_sC~P76*zzC&(8)K#kK>txJ4FGz3T~?Qvi5
z6eJdezr+vOFB&frB#*jk#XnmRAoYbi`{%^)aQUe?dndG(-)$4Adb*9|X;#0T(0LeY
zg2o#lY}a-}co-}-)KUR!7tzR27Q71MNjKc0%Q8>_#cP_ZznYuqRjhwkg(WSPfksDG
z-52i@QyoDQ@x{xD{{cQ1$su$7&01O-b%Drga)zD8GdDIkwxYTE_fDNW5YR*WBgY-~
z(3=n<y?+|{rpK$RrGV_c_=C8|(PK2Y!}p<KgLGo3e(hst+SPeo{Qi)!SU*QVU|84f
zL#)(UVOLU2=hzBb{LG|mDuY31*X!BA^`@Sm*wS+TEB<a>!^Y@nI%L*RC{#jn|51E-
zrR4%NBe);c{`K+H?aKPt7Dn||(=kEoYCdo+Z<7294r>zwP+9q%&E5y<^TT#wlNw7E
z`*i@w4J(&EHuY!Dd3R?g(<9SsGo6734R&KO<FkIPW$VCf!MvwRF(u=95O}O?KkRUC
zZ1JgsGCM{wnnKiV6Atu5_r|P+z-`(TtiNuaz)s=>z5I2q$3ZzhE*+EmE(0;IW-$LP
zRu03HY`l5Xr+gc7T@Uap+3XiHc1GOdJ{Dl35B*!(2o$@tF8Ab3u<kf}Bk>g68j0Sd
zLD<nH72-SJKO)@D8RN`>YGG5oeYx~_O`OG{RDR)WLcyqGP_%K07iL2DGFgjHqe;xZ
zqxwa-?2|!Irl<W-9yd2Hmuro!K<UKfqSC!*Mq|NPVyMpK*5Ik$Vbofyg}uW&5vPGR
zDM#DZ`+uuKIS=lDy$k_}XH~ku;-~m`+&MPna{x01m=+jU_;V_=6zp5+Q?{+orqv-o
zi&;{;DyG5S;S3Q#ypu}uV@IG@1pR1lJp~qep?|H`^7M31e)wNP8;H1J(R=DA6JHyj
zn&^Y*x&rPd5CQi(8FsADvJj%p_rB%M<6{98)%mZN^ek_16crWm@$qT$fuHHwDJUsV
zq00bv_Um&v7vITv3|E>;-Dk-kv9ajE1VSj0)Y#%An$StV&*&%M5mYpNnABg;bRp)D
z4E?vmuRV4j6qvP*tU}OMsH29r+<lg#39&+DBbcQk-O^P4UqWf>rB^wRh;H-8DI*)Z
zLz*~oaE^m!nW2@wWUl9^_s?DFZ(zd8TJQm;qe6wfo%Z+ggpKzNs{xG_pmLJGOFVvj
zq6a7!F>?6oh7|KktJI1gSoRr<N2d^eXFPWJa~4+f3>lTRJMuK&2)9l)WihKIoRI$U
zpHL_zK=lBvIMbWxz)AfUw>y__-)a@!*Vi}ewjPlX#uEgd5F8k!&Ey=#citBinC?#a
zkI&Akvb`-WDdCelCmx{@PMe{|6_}Avtsc+3zlD8EP?I<M-VK*}m44RJFwD)#$q57k
zn3$%sFi@UcpMx}0s(l`!N^=b#HlIQw_(Ac2EMCji+<Ss)^O2Do@d$#ciHVSXSlYse
zTyGA3v)?UIs$Hw+*$Rsn!h;P(?IZFj9JujhyiRA+7%>LFzp-Pnu(Gasxvta@C5WND
zoJzkh+6|T!L<R}`O7*K=r-%Q2oFgu7%-qtB%V4K3GXS7}aY?wwuG8SOM<~j;`epO-
zj`%~Ys4JYN?dWzyRU#a3e|C6F!|!2iOhf2yVENMWdA07YP&n}D(HqL~!*)wjN=hb{
ztjqGIig=g+$j4Wu+nr!z*lA%eB{dl2ADH!cKM=f^1JQd`t4#YVDLJ_|*-gR21O6d5
zpv&nzX6@*<tF0}gcDFb+^|{Lupiop)A{|Gbo0>{E`{Tz<lxj)t!~I8v?z5ShuT25c
z(C4eMs*za>?y6{ygVWh**HQJgK(rNrT?ibpO3TO?1`Z{sPK7(=<mA|Dbf;vbzz-eU
z*ZdBTZ-AY)j*gheBR48l`Z1%UBODwo;W;UYSEB&|0si-hth>GC%{@}dVM&RB_py|?
z$Jp4O4yzrFj?ZH02TM75xn><430i*Z>-m&Ghn?-<4g>-b9{w`ubB)d5MdRUoX=&;6
z;orMLdKn6`bwLh+mogolr~{5$OOD7q6A@1p7DLKm;A1&^FOAwiY%#HXHTg2I(K6XW
zA=70y)@9mvb6}0fQlU_UYGL|k_f;`t1mTnS_SuuE48fEC1#CZYSVuohl0N-@V0Jhz
zmx|YBTaa?~2^OMwRr#sjGDpyrrDyHA5n`LC>BzcW#=ejW*TR8hYV611B0gG@mfox1
z7$Y7A<%x&liwTLw#>V!GOB8Z$uYqf;(cS+0qmbuE1Oo)?ot=#iLS9ES^<A9Z>@1H-
zVb#JSOLw@}bCAS=tG-^AVW9iYLuoFBu)}8YnCAOf8t9PCE40ocwO;r;$#*t(mgJ_U
zf@5Tq?z%$@Wq;}4;J9CNIDL`mPkmky;im6fSyALj?Jc`jGMO1A88b?0Om_EBatJ93
za{T>ldfEj7vG_2vvQ|V!60P~&`ztHc#-@}HF#_0py#LAp08`pLma@e^NC5`n#+OIh
zJdo<i$@#Z%tn+5%t|&7TGn+4mb79)LqDy@C2WFNZN<#-ETVUHTETG@xkfLg-LNLnN
zbs4O1SgGUYM4CEY9_aFu0=f3f9yCI!#V?@tdIG$=a1IWR;jdXt?5rWyKp<386O2Xq
z8mIoP5b(L8+Oy+qM#YpkafJ8-`b+dO0KX|>?pe3~t#qH;7&6Xj0&4c#PXj|8-kJ!R
z{ayze1cD(DZ(rZe`t#!-r(Kw$1_lPt23JClRE_}wPkmB=o}UX)sONoPHx|JO;ViVU
zz|Y^G_9r=cIw!mJ&oghKwuD*YZ)=56>|1*!v!LG6Dujw;#v!yio{TFP9E~F48>&ni
zM1-!3&4UCw{i4||jsKgS{|8O~Zv|~UJUk?g(<Sk_`fXOH)ICO_D)*Lwf#E?bkNOMS
z+sw4I8g;JOF-zV&r4T_CrZ+B0G*}kDcQ!>DKKzs`e)Z?#!o}9swn@hV2@_{`ez>@}
zEvn^}bpdLx{Sz|0Zexzi#oi%df`^AkQxm$mY4X1<H$N-0v$OvNDFcE{S^i(J@LwRt
z|Ky`#OI8?XnD||VwT^4uU4ahIgNoA}M^i(?xK-Qqyi}ODz0xcRGZ_HnI2l61u4!Xr
zWMpP$#m2c=Gs4Qm#>{SOWffYyJ;$#3RKh1im)fiVY-B2%&|unD1W!B*)zk!Y*xEQ~
zvqMlbq0ox2&!3<9nk%)BCT@$i)e>acBEa7az`tB{u5+{66dIK$)U;<E)k)N8ZL7S_
zzOE>}eY?vL5uunX6a@b1x_Kq4S-2V6r_<EO0eL!xVunmU{_*AWVw;D^dkN*h^L9z!
zK%ylLa;S$;gHpKt%SfUeKfKr0)wUtDSq3ld>?9Ly7^kGX)fsL3>@Bs^%kW`&MXy10
zny%nXGh5KNtuq^(Qdb3?Jce=z3NDR}#UQ;f&Wjw`Um`XYlaL63*Zr!yaEM~!1oGgM
zPm40J%J^!#$oUMMoy0SJpA&=UCC(YV#6Xu$nmsv&5-TwCV1csilm09$EU*(5e^zFE
z9R<&5Yx9whLE2+b!z#D5m}of*lHhjTIYx3s^zTaE(9IbCCxY6k!?N6W8g>k8^7N=L
zBN@l$J0zA<hVypNe4nW8hvEuBk0->RQbYTdrmY+Qh`d^9t@fwRuM2OF`P|*zE7lg>
zuC}e4#O+Tsp_P87Xu2fKZh_RN4Ebd(1AlsRhPVE(bC*|^6%DLRsE?^+)4qj%p`h4y
zX_eKpw6N*ZSS_}ZDp(1ma`SLWyI;W5wY9C)%1W4U;U>o3+$3J_iiwKJ<ua#FU1DuZ
zH*jXqW#(WGN-8Na|82$%!l2K{`lX|+oMxz8=KnX2g@f6>rrEWoIgHi3;@GBCDc94}
zHJ!&5lo-;PPq#KY%Kg#o#gh1O0W`7S)WlIS{iBkRnHzvN1l$w>`{7?6(&-O*JP>f!
zm(ywM&IL3q%PSH`4VILYa40F+$$P#K(u$EE3l2fu#<|OGXZG(D!pFla)Bd>{TS*mF
z)H~BRKCqBxP$bQy(3Xj6s>BeKkXg?GEFo!$9?x1X2C&T;XlNP+Zr|?DT`4SFL~i77
z$;1Z_WpxC1$7LgzzU6{19Y-c$KjRg5Fad-XI(oIV4=qO;az01V28tfro@D)+xu}aC
zUH|<2>(>lyfl>@b5n5-tMn_D%)z*fnyO1O6#-n<LrHiqoV6Xl?_p6S@+vUMHIQ;8G
zroGJ!ciG)uUvj9Rr=jlCYxi><H!7-}N-czA_~D62Cs#4&^zq&yntyqV65d_t+cZvI
zUhIpTy>s269zsGmhM&mPOdnN=_siwz(R;WD9|(Rw!n_|M5ex>i<-b4C2(B*_mT@<6
zQahUX9?;dlqPG!AB!Hj7>V;Ljv$MNvG1p{WdmoR+*QDVHHbB|hsP29qoSf(QhhO%e
z*HdYHf7;_QsaEWt{Cu5^UW5`yU*g7uM-bk5&3`1zv@*0W6^j&?2;Qg`aQmG{*zAWL
z^wC}<E;260@a_VaLn-bj#D49lp|**Fiw$qF-o?eZB1KUTPjF)GhFZw!mj6f+MiL$o
zM*Vzm=PkwP{^aC#G{IF!PgdPVc|Ak~h`<5m#z#eAFHfAI5evjK$v}(+J_#t#PEHbV
zj+c~NUc?A3>(dr+;uF5tw3GpL*0c=tjd#SiQ@Wu}_aYEpJXIPW%v3&IQ){y4ZH<nw
zW(nJaTntUEiA3y_#W(e>BB;lQ$LiapwY1&W7H8_pijqJPA~squ+O+9A!(XToH?=?q
z2@&JP`Ju(JSq7zJ>sB$eVC45uvTX*=YL>7)%RK}sDQzm&s|6hFwvPwe4-P*9f%xRF
z(DjjA_I>HaDCp-?5LMsRP*)PFSl9*!B=zO(-Tp%mW3n783rKEkl&9XMoPpOX>9eD?
zm6evJ<{r#QMw5b^d>+cWwt{+(3tO98BA>5d(9n3xi5iLmMtHR+M}t_(6%glpOXW9V
z{l*>b6+AMZS`_&`E*g@HF_xplhooDI)r60n7j=@AdV-jaD7qH95*>nwhG7XCa}5Z}
zD}`9a^?9yF%Kn#VaTy8y5yy9zuVQ~9qmF=v0(2?U*MHc_yi*oTF+CNZVN`L<Nv6`b
zg$AE>!=*awF$P6svZAZsofAyJfO%qq=n)RpmcFKo{Z1~(=0{x{^*dmIf|)KaCv|wl
zeK>CgtlxTidiv}>7t>I`X<)V=pCh35(bp%%CtYM<U?oe$`(f_OR$0v1jkoWt1=;r&
z5W%{wt&|%hp6=0c<|>LNtBo~)jU`AB<7v`qKoN+5UvFNtr2lQL1v>U0Z~iPzjq|b=
zB549mGBGok(lEXG@Bz~+sVB6sP{Kfru2F_`J~~={tQ^%+CZg^lI)j2v#yvJ8IlH1(
zBRfb^G5aHY_gIj$O0R+lCqFloVY{p)^MLmZ*38Kx?0-_w@C|3h+QUJ_E=M8kAgJE;
z(&f_qq0&p&=*6!zH%Dbz&J`23SLm3C{)B(r&xgR0{ODm(u}4|9f1DE-G7ws1lX`6w
z_)CPqvxN~J<ZrgA5~BB8c<Pr~(aScb1%GN@x<2Sq3p8S4t_0g(JAat=FD^3w%(kMJ
z_0KOv8fEjXP*-_5c4&}~B35`i9oqexob0AEzER-m$!^97+!~J%jo>?}(B;6+;UCe5
zI++<-E*{=%-!s{?u^o;FsH#j{u8-pw-$H7yljq6Nz7w9P<K)$8z_Piu@y71%(Gs*C
ze0@0o<5tkagKu(T_%3O>m(KU*nb&vGER9;=pY1DA(tP>Q{99F5%X=@Ny_O+hDtdI(
zJ(G`;oPq!!KV8T;c6YSD|K+3m!}iq(F|Q?&SkR)fx_)8jy3aWNF$My@*UPYo+jYMm
zxQN@f5dEzC{1d}INbELh_Svebzv^tvF<{!xkx`h(cMDV3*s#2_ayC<DWOUSo)fhRF
zJAfc@NOI;3TB}Mt98V8dc&~ue6__|ui+HdI**R^W8QV3kyi|?$3BLO(GPxk~(QR58
z5>sp+g+&;G1k8VE8)9Uz{`?;U#qobz`o{_s5)u-fIn+h^U|BY!`*8<kil)d{_Ek(}
zt}bgZ5^SZx$y4xE^t7IWA7Ymzp<D}dNlUY>?QU-y<z^>B*~N;xK7<Esbg>6LbwLX@
z%M#PuNUw!i86xV1zM^3$OB*RKwLbb3+&jAVo$A@HQawyIzCC`PtfPL&w#|Ox`>;~_
zhHjv2mU$4_=lDNnPXBE&`#)i<FUFBdNk)dOijl*xIg*0`_xJDL+o}IMP~A^eV5tCu
z!EJ`-=H`PMW8<Imm1`hwX}bdC)y3IAj@eA@{v}F<4oIT3q>Us>tKwe|J;X0ruFkFY
z&yDhMJDDWaXkXPpxM$_%h{Od#84Ui*;`rt{Pg<=-o~9K8Iih~?MM_DsO57;;e*we=
BL(BjG

diff --git a/src-ui/src/environments/environment.prod.ts b/src-ui/src/environments/environment.prod.ts
index 09154dfca..f12c6a7cb 100644
--- a/src-ui/src/environments/environment.prod.ts
+++ b/src-ui/src/environments/environment.prod.ts
@@ -1,5 +1,6 @@
 export const environment = {
   production: true,
   apiBaseUrl: "/api/",
-  appTitle: "Paperless-ng"
+  appTitle: "Paperless-ng",
+  version: "0.9.8"
 };
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index b0b66b7f9..6e09db630 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -1,7 +1,6 @@
 @import "theme";
-
 @import "node_modules/bootstrap/scss/bootstrap";
-
+@import "~@ng-select/ng-select/themes/default.theme.css";
 
 .toolbaricon {
   width: 1.2em;
@@ -20,7 +19,7 @@
 }
 
 body {
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 .form-control-dark {
@@ -65,4 +64,39 @@ body {
   display: block;
   background-size: 1rem;
   float: right;
-}
\ No newline at end of file
+}
+
+.paperless-input-select {
+  .ng-select {
+    position: relative;
+    flex: 1 1 auto;
+    margin-bottom: 0;
+    min-height: calc(1.5em + 0.75rem + 5px);
+    line-height: 1.5;
+
+    .ng-select-container {
+      height: 100%;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      .ng-value-container .ng-input {
+        top: 10px;
+      }
+    }
+
+    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
+    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+      background: none;
+    }
+  }
+}
+
+.paperless-input-tags {
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    background-color: transparent;
+  }
+
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
+    padding-top: 1px;
+  }
+}
diff --git a/src/documents/admin.py b/src/documents/admin.py
index 6ec3b736e..78437f91c 100755
--- a/src/documents/admin.py
+++ b/src/documents/admin.py
@@ -69,7 +69,7 @@ class DocumentAdmin(admin.ModelAdmin):
 
     filter_horizontal = ("tags",)
 
-    ordering = ["-created", "correspondent"]
+    ordering = ["-created"]
 
     date_hierarchy = "created"
 
diff --git a/src/documents/checks.py b/src/documents/checks.py
index 3e3ddb1fb..b6da5bfc9 100644
--- a/src/documents/checks.py
+++ b/src/documents/checks.py
@@ -2,6 +2,7 @@ import textwrap
 
 from django.conf import settings
 from django.core.checks import Error, register
+from django.core.exceptions import FieldError
 from django.db.utils import OperationalError, ProgrammingError
 
 from documents.signals import document_consumer_declaration
@@ -16,7 +17,7 @@ def changed_password_check(app_configs, **kwargs):
     try:
         encrypted_doc = Document.objects.filter(
             storage_type=Document.STORAGE_TYPE_GPG).first()
-    except (OperationalError, ProgrammingError):
+    except (OperationalError, ProgrammingError, FieldError):
         return []  # No documents table yet
 
     if encrypted_doc:
diff --git a/src/documents/file_handling.py b/src/documents/file_handling.py
index c49493991..5643756ac 100644
--- a/src/documents/file_handling.py
+++ b/src/documents/file_handling.py
@@ -99,6 +99,11 @@ def generate_filename(doc, counter=0):
             tags = defaultdictNoStr(lambda: slugify(None),
                                     many_to_dictionary(doc.tags))
 
+            tag_list = pathvalidate.sanitize_filename(
+                ",".join([tag.name for tag in doc.tags.all()]),
+                replacement_text="-"
+            )
+
             if doc.correspondent:
                 correspondent = pathvalidate.sanitize_filename(
                     doc.correspondent.name, replacement_text="-"
@@ -127,7 +132,7 @@ def generate_filename(doc, counter=0):
                 added_month=f"{doc.added.month:02}" if doc.added else "none",
                 added_day=f"{doc.added.day:02}" if doc.added else "none",
                 tags=tags,
-                tag_list=",".join([tag.name for tag in doc.tags.all()])
+                tag_list=tag_list
             ).strip()
 
             path = path.strip(os.sep)
diff --git a/src/documents/management/commands/decrypt_documents.py b/src/documents/management/commands/decrypt_documents.py
index 918f1a175..8f5c2e123 100644
--- a/src/documents/management/commands/decrypt_documents.py
+++ b/src/documents/management/commands/decrypt_documents.py
@@ -2,7 +2,6 @@ import os
 
 from django.conf import settings
 from django.core.management.base import BaseCommand, CommandError
-from termcolor import colored as coloured
 
 from documents.models import Document
 from paperless.db import GnuPG
@@ -26,16 +25,14 @@ class Command(BaseCommand):
     def handle(self, *args, **options):
 
         try:
-            print(coloured(
+            print(
                 "\n\nWARNING: This script is going to work directly on your "
                 "document originals, so\nWARNING: you probably shouldn't run "
                 "this unless you've got a recent backup\nWARNING: handy.  It "
                 "*should* work without a hitch, but be safe and backup your\n"
                 "WARNING: stuff first.\n\nHit Ctrl+C to exit now, or Enter to "
-                "continue.\n\n",
-                "yellow",
-                attrs=("bold",)
-            ))
+                "continue.\n\n"
+            )
             __ = input()
         except KeyboardInterrupt:
             return
@@ -57,8 +54,8 @@ class Command(BaseCommand):
 
         for document in encrypted_files:
 
-            print(coloured("Decrypting {}".format(
-                document).encode('utf-8'), "green"))
+            print("Decrypting {}".format(
+                document).encode('utf-8'))
 
             old_paths = [document.source_path, document.thumbnail_path]
 
diff --git a/src/documents/migrations/1003_mime_types.py b/src/documents/migrations/1003_mime_types.py
index 1038d57b3..78ecced2b 100644
--- a/src/documents/migrations/1003_mime_types.py
+++ b/src/documents/migrations/1003_mime_types.py
@@ -6,13 +6,17 @@ import magic
 from django.conf import settings
 from django.db import migrations, models
 
+from paperless.db import GnuPG
+
+STORAGE_TYPE_UNENCRYPTED = "unencrypted"
+STORAGE_TYPE_GPG = "gpg"
 
 def source_path(self):
     if self.filename:
         fname = str(self.filename)
     else:
         fname = "{:07}.{}".format(self.pk, self.file_type)
-        if self.storage_type == self.STORAGE_TYPE_GPG:
+        if self.storage_type == STORAGE_TYPE_GPG:
             fname += ".gpg"
 
     return os.path.join(
@@ -26,9 +30,18 @@ def add_mime_types(apps, schema_editor):
     documents = Document.objects.all()
 
     for d in documents:
-        d.mime_type = magic.from_file(source_path(d), mime=True)
+        f = open(source_path(d), "rb")
+        if d.storage_type == STORAGE_TYPE_GPG:
+
+            data = GnuPG.decrypted(f)
+        else:
+            data = f.read(1024)
+
+        d.mime_type = magic.from_buffer(data, mime=True)
         d.save()
 
+        f.close()
+
 
 def add_file_extensions(apps, schema_editor):
     Document = apps.get_model("documents", "Document")
diff --git a/src/documents/migrations/1008_auto_20201216_1736.py b/src/documents/migrations/1008_auto_20201216_1736.py
new file mode 100644
index 000000000..d94f4767f
--- /dev/null
+++ b/src/documents/migrations/1008_auto_20201216_1736.py
@@ -0,0 +1,34 @@
+# Generated by Django 3.1.4 on 2020-12-16 17:36
+
+from django.db import migrations
+import django.db.models.functions.text
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('documents', '1007_savedview_savedviewfilterrule'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='correspondent',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+        migrations.AlterModelOptions(
+            name='document',
+            options={'ordering': ('-created',)},
+        ),
+        migrations.AlterModelOptions(
+            name='documenttype',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+        migrations.AlterModelOptions(
+            name='savedview',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+        migrations.AlterModelOptions(
+            name='tag',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+    ]
diff --git a/src/documents/migrations/1009_auto_20201216_2005.py b/src/documents/migrations/1009_auto_20201216_2005.py
new file mode 100644
index 000000000..5e8302bb0
--- /dev/null
+++ b/src/documents/migrations/1009_auto_20201216_2005.py
@@ -0,0 +1,29 @@
+# Generated by Django 3.1.4 on 2020-12-16 20:05
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('documents', '1008_auto_20201216_1736'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='correspondent',
+            options={'ordering': ('name',)},
+        ),
+        migrations.AlterModelOptions(
+            name='documenttype',
+            options={'ordering': ('name',)},
+        ),
+        migrations.AlterModelOptions(
+            name='savedview',
+            options={'ordering': ('name',)},
+        ),
+        migrations.AlterModelOptions(
+            name='tag',
+            options={'ordering': ('name',)},
+        ),
+    ]
diff --git a/src/documents/models.py b/src/documents/models.py
index 1b1f697bc..3a6d155ed 100755
--- a/src/documents/models.py
+++ b/src/documents/models.py
@@ -12,7 +12,6 @@ from django.conf import settings
 from django.contrib.auth.models import User
 from django.db import models
 from django.utils import timezone
-from django.utils.text import slugify
 
 from documents.file_handling import archive_name_from_filename
 from documents.parsers import get_default_file_extension
@@ -205,7 +204,7 @@ class Document(models.Model):
     )
 
     class Meta:
-        ordering = ("correspondent", "title")
+        ordering = ("-created",)
 
     def __str__(self):
         created = datetime.date.isoformat(self.created)
@@ -221,7 +220,7 @@ class Document(models.Model):
         else:
             fname = "{:07}{}".format(self.pk, self.file_type)
             if self.storage_type == self.STORAGE_TYPE_GPG:
-                fname += ".gpg"
+                fname += ".gpg"  # pragma: no cover
 
         return os.path.join(
             settings.ORIGINALS_DIR,
@@ -308,6 +307,10 @@ class Log(models.Model):
 
 class SavedView(models.Model):
 
+    class Meta:
+
+        ordering = ("name",)
+
     user = models.ForeignKey(User, on_delete=models.CASCADE)
     name = models.CharField(max_length=128)
 
@@ -340,7 +343,11 @@ class SavedViewFilterRule(models.Model):
         (17, "Does not have tag"),
     ]
 
-    saved_view = models.ForeignKey(SavedView, on_delete=models.CASCADE, related_name="filter_rules")
+    saved_view = models.ForeignKey(
+        SavedView,
+        on_delete=models.CASCADE,
+        related_name="filter_rules"
+    )
 
     rule_type = models.PositiveIntegerField(choices=RULE_TYPES)
 
diff --git a/src/documents/parsers.py b/src/documents/parsers.py
index 228e2c86e..cbbb912de 100644
--- a/src/documents/parsers.py
+++ b/src/documents/parsers.py
@@ -163,8 +163,6 @@ def parse_date(filename, text):
 
     date = None
 
-    next_year = timezone.now().year + 5  # Arbitrary 5 year future limit
-
     # if filename date parsing is enabled, search there first:
     if settings.FILENAME_DATE_ORDER:
         for m in re.finditer(DATE_REGEX, filename):
@@ -176,7 +174,7 @@ def parse_date(filename, text):
                 # Skip all matches that do not parse to a proper date
                 continue
 
-            if date is not None and next_year > date.year > 1900:
+            if date and date.year > 1900 and date <= timezone.now():
                 return date
 
     # Iterate through all regex matches in text and try to parse the date
@@ -189,7 +187,7 @@ def parse_date(filename, text):
             # Skip all matches that do not parse to a proper date
             continue
 
-        if date is not None and next_year > date.year > 1900:
+        if date and date.year > 1900 and date <= timezone.now():
             break
         else:
             date = None
diff --git a/src/documents/serialisers.py b/src/documents/serialisers.py
index e34279b1a..f9fde9ac8 100644
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@@ -187,17 +187,19 @@ class SavedViewSerializer(serializers.ModelSerializer):
         else:
             rules_data = None
         super(SavedViewSerializer, self).update(instance, validated_data)
-        if rules_data:
+        if rules_data is not None:
             SavedViewFilterRule.objects.filter(saved_view=instance).delete()
             for rule_data in rules_data:
-                SavedViewFilterRule.objects.create(saved_view=instance, **rule_data)
+                SavedViewFilterRule.objects.create(
+                    saved_view=instance, **rule_data)
         return instance
 
     def create(self, validated_data):
         rules_data = validated_data.pop('filter_rules')
         saved_view = SavedView.objects.create(**validated_data)
         for rule_data in rules_data:
-            SavedViewFilterRule.objects.create(saved_view=saved_view, **rule_data)
+            SavedViewFilterRule.objects.create(
+                saved_view=saved_view, **rule_data)
         return saved_view
 
 
diff --git a/src/documents/templates/index.html b/src/documents/templates/index.html
index 728f3a0e7..06dbb678e 100644
--- a/src/documents/templates/index.html
+++ b/src/documents/templates/index.html
@@ -8,6 +8,7 @@
   <title>PaperlessUi</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="cookie_prefix" content="{{cookie_prefix}}">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link rel="stylesheet" href="{% static 'frontend/styles.css' %}"></head>
 <body>
diff --git a/src/documents/tests/test_api.py b/src/documents/tests/test_api.py
index bd0d9a421..43da9c058 100644
--- a/src/documents/tests/test_api.py
+++ b/src/documents/tests/test_api.py
@@ -5,13 +5,11 @@ import tempfile
 from unittest import mock
 
 from django.contrib.auth.models import User
-from django.test import client
-from pathvalidate import ValidationError
 from rest_framework.test import APITestCase
 from whoosh.writing import AsyncWriter
 
-from documents import index, bulk_edit
-from documents.models import Document, Correspondent, DocumentType, Tag
+from documents import index
+from documents.models import Document, Correspondent, DocumentType, Tag, SavedView
 from documents.tests.utils import DirectoriesMixin
 
 
@@ -20,8 +18,8 @@ class TestDocumentApi(DirectoriesMixin, APITestCase):
     def setUp(self):
         super(TestDocumentApi, self).setUp()
 
-        user = User.objects.create_superuser(username="temp_admin")
-        self.client.force_login(user=user)
+        self.user = User.objects.create_superuser(username="temp_admin")
+        self.client.force_login(user=self.user)
 
     def testDocuments(self):
 
@@ -172,15 +170,13 @@ class TestDocumentApi(DirectoriesMixin, APITestCase):
         self.assertEqual(response.status_code, 200)
         results = response.data['results']
         self.assertEqual(len(results), 2)
-        self.assertEqual(results[0]['id'], doc2.id)
-        self.assertEqual(results[1]['id'], doc3.id)
+        self.assertCountEqual([results[0]['id'], results[1]['id']], [doc2.id, doc3.id])
 
         response = self.client.get("/api/documents/?tags__id__in={},{}".format(tag_inbox.id, tag_3.id))
         self.assertEqual(response.status_code, 200)
         results = response.data['results']
         self.assertEqual(len(results), 2)
-        self.assertEqual(results[0]['id'], doc1.id)
-        self.assertEqual(results[1]['id'], doc3.id)
+        self.assertCountEqual([results[0]['id'], results[1]['id']], [doc1.id, doc3.id])
 
         response = self.client.get("/api/documents/?tags__id__all={},{}".format(tag_2.id, tag_3.id))
         self.assertEqual(response.status_code, 200)
@@ -202,8 +198,7 @@ class TestDocumentApi(DirectoriesMixin, APITestCase):
         self.assertEqual(response.status_code, 200)
         results = response.data['results']
         self.assertEqual(len(results), 2)
-        self.assertEqual(results[0]['id'], doc1.id)
-        self.assertEqual(results[1]['id'], doc2.id)
+        self.assertCountEqual([results[0]['id'], results[1]['id']], [doc1.id, doc2.id])
 
         response = self.client.get("/api/documents/?tags__id__none={},{}".format(tag_3.id, tag_2.id))
         self.assertEqual(response.status_code, 200)
@@ -518,114 +513,86 @@ class TestDocumentApi(DirectoriesMixin, APITestCase):
         self.assertGreater(len(meta['original_metadata']), 0)
         self.assertIsNone(meta['archive_metadata'])
 
+    def test_saved_views(self):
+        u1 = User.objects.create_user("user1")
+        u2 = User.objects.create_user("user2")
 
-class TestBulkEdit(DirectoriesMixin, APITestCase):
+        v1 = SavedView.objects.create(user=u1, name="test1", sort_field="", show_on_dashboard=False, show_in_sidebar=False)
+        v2 = SavedView.objects.create(user=u2, name="test2", sort_field="", show_on_dashboard=False, show_in_sidebar=False)
+        v3 = SavedView.objects.create(user=u2, name="test3", sort_field="", show_on_dashboard=False, show_in_sidebar=False)
 
-    def setUp(self):
-        super(TestBulkEdit, self).setUp()
-
-        user = User.objects.create_superuser(username="temp_admin")
-        self.client.force_login(user=user)
-
-        patcher = mock.patch('documents.bulk_edit.async_task')
-        self.async_task = patcher.start()
-        self.addCleanup(patcher.stop)
-        self.c1 = Correspondent.objects.create(name="c1")
-        self.c2 = Correspondent.objects.create(name="c2")
-        self.dt1 = DocumentType.objects.create(name="dt1")
-        self.dt2 = DocumentType.objects.create(name="dt2")
-        self.t1 = Tag.objects.create(name="t1")
-        self.t2 = Tag.objects.create(name="t2")
-        self.doc1 = Document.objects.create(checksum="A", title="A")
-        self.doc2 = Document.objects.create(checksum="B", title="B", correspondent=self.c1, document_type=self.dt1)
-        self.doc3 = Document.objects.create(checksum="C", title="C", correspondent=self.c2, document_type=self.dt2)
-        self.doc4 = Document.objects.create(checksum="D", title="D")
-        self.doc5 = Document.objects.create(checksum="E", title="E")
-        self.doc2.tags.add(self.t1)
-        self.doc3.tags.add(self.t2)
-        self.doc4.tags.add(self.t1, self.t2)
-
-    def test_set_correspondent(self):
-        self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 1)
-        bulk_edit.set_correspondent([self.doc1.id, self.doc2.id, self.doc3.id], self.c2.id)
-        self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 3)
-        self.async_task.assert_called_once()
-        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(kwargs['document_ids'], [self.doc1.id, self.doc2.id])
-
-    def test_unset_correspondent(self):
-        self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 1)
-        bulk_edit.set_correspondent([self.doc1.id, self.doc2.id, self.doc3.id], None)
-        self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 0)
-        self.async_task.assert_called_once()
-        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(kwargs['document_ids'], [self.doc2.id, self.doc3.id])
-
-    def test_set_document_type(self):
-        self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 1)
-        bulk_edit.set_document_type([self.doc1.id, self.doc2.id, self.doc3.id], self.dt2.id)
-        self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 3)
-        self.async_task.assert_called_once()
-        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(kwargs['document_ids'], [self.doc1.id, self.doc2.id])
-
-    def test_unset_document_type(self):
-        self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 1)
-        bulk_edit.set_document_type([self.doc1.id, self.doc2.id, self.doc3.id], None)
-        self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 0)
-        self.async_task.assert_called_once()
-        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(kwargs['document_ids'], [self.doc2.id, self.doc3.id])
-
-    def test_add_tag(self):
-        self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 2)
-        bulk_edit.add_tag([self.doc1.id, self.doc2.id, self.doc3.id, self.doc4.id], self.t1.id)
-        self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 4)
-        self.async_task.assert_called_once()
-        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(kwargs['document_ids'], [self.doc1.id, self.doc3.id])
-
-
-    def test_remove_tag(self):
-        self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 2)
-        bulk_edit.remove_tag([self.doc1.id, self.doc3.id, self.doc4.id], self.t1.id)
-        self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 1)
-        self.async_task.assert_called_once()
-        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(kwargs['document_ids'], [self.doc4.id])
-
-    def test_delete(self):
-        self.assertEqual(Document.objects.count(), 5)
-        bulk_edit.delete([self.doc1.id, self.doc2.id])
-        self.assertEqual(Document.objects.count(), 3)
-        self.assertCountEqual([doc.id for doc in Document.objects.all()], [self.doc3.id, self.doc4.id, self.doc5.id])
-
-    def test_api(self):
-        self.assertEqual(Document.objects.count(), 5)
-        response = self.client.post("/api/documents/bulk_edit/", json.dumps({
-            "documents": [self.doc1.id],
-            "method": "delete",
-            "parameters": {}
-        }), content_type='application/json')
+        response = self.client.get("/api/saved_views/")
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(Document.objects.count(), 4)
+        self.assertEqual(response.data['count'], 0)
 
-    def test_api_invalid_doc(self):
-        self.assertEqual(Document.objects.count(), 5)
-        response = self.client.post("/api/documents/bulk_edit/", json.dumps({
-            "documents": [-235],
-            "method": "delete",
-            "parameters": {}
-        }), content_type='application/json')
-        self.assertEqual(response.status_code, 400)
-        self.assertEqual(Document.objects.count(), 5)
+        self.assertEqual(self.client.get(f"/api/saved_views/{v1.id}/").status_code, 404)
 
-    def test_api_invalid_method(self):
-        self.assertEqual(Document.objects.count(), 5)
-        response = self.client.post("/api/documents/bulk_edit/", json.dumps({
-            "documents": [self.doc2.id],
-            "method": "exterminate",
-            "parameters": {}
-        }), content_type='application/json')
-        self.assertEqual(response.status_code, 400)
-        self.assertEqual(Document.objects.count(), 5)
+        self.client.force_login(user=u1)
+
+        response = self.client.get("/api/saved_views/")
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.data['count'], 1)
+
+        self.assertEqual(self.client.get(f"/api/saved_views/{v1.id}/").status_code, 200)
+
+        self.client.force_login(user=u2)
+
+        response = self.client.get("/api/saved_views/")
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.data['count'], 2)
+
+        self.assertEqual(self.client.get(f"/api/saved_views/{v1.id}/").status_code, 404)
+
+    def test_create_update_patch(self):
+
+        u1 = User.objects.create_user("user1")
+
+        view = {
+            "name": "test",
+            "show_on_dashboard": True,
+            "show_in_sidebar": True,
+            "sort_field": "created2",
+            "filter_rules": [
+                {
+                    "rule_type": 4,
+                    "value": "test"
+                }
+            ]
+        }
+
+        response = self.client.post("/api/saved_views/", view, format='json')
+        self.assertEqual(response.status_code, 201)
+
+        v1 = SavedView.objects.get(name="test")
+        self.assertEqual(v1.sort_field, "created2")
+        self.assertEqual(v1.filter_rules.count(), 1)
+        self.assertEqual(v1.user, self.user)
+
+        response = self.client.patch(f"/api/saved_views/{v1.id}/", {
+            "show_in_sidebar": False
+        }, format='json')
+
+        v1 = SavedView.objects.get(id=v1.id)
+        self.assertEqual(response.status_code, 200)
+        self.assertFalse(v1.show_in_sidebar)
+        self.assertEqual(v1.filter_rules.count(), 1)
+
+        view['filter_rules'] = [{
+            "rule_type": 12,
+            "value": "secret"
+        }]
+
+        response = self.client.put(f"/api/saved_views/{v1.id}/", view, format='json')
+        self.assertEqual(response.status_code, 200)
+
+        v1 = SavedView.objects.get(id=v1.id)
+        self.assertEqual(v1.filter_rules.count(), 1)
+        self.assertEqual(v1.filter_rules.first().value, "secret")
+
+        view['filter_rules'] = []
+
+        response = self.client.put(f"/api/saved_views/{v1.id}/", view, format='json')
+        self.assertEqual(response.status_code, 200)
+
+        v1 = SavedView.objects.get(id=v1.id)
+        self.assertEqual(v1.filter_rules.count(), 0)
diff --git a/src/documents/tests/test_file_handling.py b/src/documents/tests/test_file_handling.py
index dec89c45b..2e60065f1 100644
--- a/src/documents/tests/test_file_handling.py
+++ b/src/documents/tests/test_file_handling.py
@@ -9,6 +9,7 @@ from unittest import mock
 from django.conf import settings
 from django.db import DatabaseError
 from django.test import TestCase, override_settings
+from django.utils import timezone
 
 from .utils import DirectoriesMixin
 from ..file_handling import generate_filename, create_source_path_directory, delete_empty_directories, \
@@ -298,23 +299,23 @@ class TestFileHandling(DirectoriesMixin, TestCase):
 
     @override_settings(PAPERLESS_FILENAME_FORMAT="{created_year}-{created_month}-{created_day}")
     def test_created_year_month_day(self):
-        d1 = datetime.datetime(2020, 3, 6, 1, 1, 1)
+        d1 = timezone.make_aware(datetime.datetime(2020, 3, 6, 1, 1, 1))
         doc1 = Document.objects.create(title="doc1", mime_type="application/pdf", created=d1)
 
         self.assertEqual(generate_filename(doc1), "2020-03-06.pdf")
 
-        doc1.created = datetime.datetime(2020, 11, 16, 1, 1, 1)
+        doc1.created = timezone.make_aware(datetime.datetime(2020, 11, 16, 1, 1, 1))
 
         self.assertEqual(generate_filename(doc1), "2020-11-16.pdf")
 
     @override_settings(PAPERLESS_FILENAME_FORMAT="{added_year}-{added_month}-{added_day}")
     def test_added_year_month_day(self):
-        d1 = datetime.datetime(232, 1, 9, 1, 1, 1)
+        d1 = timezone.make_aware(datetime.datetime(232, 1, 9, 1, 1, 1))
         doc1 = Document.objects.create(title="doc1", mime_type="application/pdf", added=d1)
 
         self.assertEqual(generate_filename(doc1), "232-01-09.pdf")
 
-        doc1.added = datetime.datetime(2020, 11, 16, 1, 1, 1)
+        doc1.added = timezone.make_aware(datetime.datetime(2020, 11, 16, 1, 1, 1))
 
         self.assertEqual(generate_filename(doc1), "2020-11-16.pdf")
 
@@ -599,7 +600,7 @@ class TestFilenameGeneration(TestCase):
         PAPERLESS_FILENAME_FORMAT="{created}"
     )
     def test_date(self):
-        doc = Document.objects.create(title="does not matter", created=datetime.datetime(2020,5,21, 7,36,51, 153), mime_type="application/pdf", pk=2, checksum="2")
+        doc = Document.objects.create(title="does not matter", created=timezone.make_aware(datetime.datetime(2020,5,21, 7,36,51, 153)), mime_type="application/pdf", pk=2, checksum="2")
         self.assertEqual(generate_filename(doc), "2020-05-21.pdf")
 
 
diff --git a/src/documents/tests/test_index.py b/src/documents/tests/test_index.py
index 830fca0e0..2baa9621d 100644
--- a/src/documents/tests/test_index.py
+++ b/src/documents/tests/test_index.py
@@ -1,6 +1,9 @@
 from django.test import TestCase
 
+from documents import index
 from documents.index import JsonFormatter
+from documents.models import Document
+from documents.tests.utils import DirectoriesMixin
 
 
 class JsonFormatterTest(TestCase):
@@ -12,3 +15,21 @@ class JsonFormatterTest(TestCase):
         self.assertListEqual(self.formatter.format([]), [])
 
 
+class TestAutoComplete(DirectoriesMixin, TestCase):
+
+    def test_auto_complete(self):
+
+        doc1 = Document.objects.create(title="doc1", checksum="A", content="test test2 test3")
+        doc2 = Document.objects.create(title="doc2", checksum="B", content="test test2")
+        doc3 = Document.objects.create(title="doc3", checksum="C", content="test2")
+
+        index.add_or_update_document(doc1)
+        index.add_or_update_document(doc2)
+        index.add_or_update_document(doc3)
+
+        ix = index.open_index()
+
+        self.assertListEqual(index.autocomplete(ix, "tes"), [b"test3", b"test", b"test2"])
+        self.assertListEqual(index.autocomplete(ix, "tes", limit=3), [b"test3", b"test", b"test2"])
+        self.assertListEqual(index.autocomplete(ix, "tes", limit=1), [b"test3"])
+        self.assertListEqual(index.autocomplete(ix, "tes", limit=0), [])
diff --git a/src/documents/tests/test_sanity_check.py b/src/documents/tests/test_sanity_check.py
index 725e87617..0554cd7cd 100644
--- a/src/documents/tests/test_sanity_check.py
+++ b/src/documents/tests/test_sanity_check.py
@@ -2,6 +2,8 @@ import os
 import shutil
 from pathlib import Path
 
+import filelock
+from django.conf import settings
 from django.test import TestCase
 
 from documents.models import Document
@@ -13,9 +15,11 @@ class TestSanityCheck(DirectoriesMixin, TestCase):
 
     def make_test_data(self):
 
-        shutil.copy(os.path.join(os.path.dirname(__file__), "samples", "documents", "originals", "0000001.pdf"), os.path.join(self.dirs.originals_dir, "0000001.pdf"))
-        shutil.copy(os.path.join(os.path.dirname(__file__), "samples", "documents", "archive", "0000001.pdf"), os.path.join(self.dirs.archive_dir, "0000001.pdf"))
-        shutil.copy(os.path.join(os.path.dirname(__file__), "samples", "documents", "thumbnails", "0000001.png"), os.path.join(self.dirs.thumbnail_dir, "0000001.png"))
+        with filelock.FileLock(settings.MEDIA_LOCK):
+            # just make sure that the lockfile is present.
+            shutil.copy(os.path.join(os.path.dirname(__file__), "samples", "documents", "originals", "0000001.pdf"), os.path.join(self.dirs.originals_dir, "0000001.pdf"))
+            shutil.copy(os.path.join(os.path.dirname(__file__), "samples", "documents", "archive", "0000001.pdf"), os.path.join(self.dirs.archive_dir, "0000001.pdf"))
+            shutil.copy(os.path.join(os.path.dirname(__file__), "samples", "documents", "thumbnails", "0000001.png"), os.path.join(self.dirs.thumbnail_dir, "0000001.png"))
 
         return Document.objects.create(title="test", checksum="42995833e01aea9b3edee44bbfdd7ce1", archive_checksum="62acb0bcbfbcaa62ca6ad3668e4e404b", content="test", pk=1, filename="0000001.pdf", mime_type="application/pdf")
 
diff --git a/src/documents/tests/utils.py b/src/documents/tests/utils.py
index 7f9d50ed5..dfefc4061 100644
--- a/src/documents/tests/utils.py
+++ b/src/documents/tests/utils.py
@@ -34,7 +34,8 @@ def setup_directories():
         ARCHIVE_DIR=dirs.archive_dir,
         CONSUMPTION_DIR=dirs.consumption_dir,
         INDEX_DIR=dirs.index_dir,
-        MODEL_FILE=os.path.join(dirs.data_dir, "classification_model.pickle")
+        MODEL_FILE=os.path.join(dirs.data_dir, "classification_model.pickle"),
+        MEDIA_LOCK=os.path.join(dirs.media_dir, "media.lock")
 
     )
     dirs.settings_override.enable()
diff --git a/src/documents/views.py b/src/documents/views.py
index 3924f3d1a..ebe41c9d1 100755
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -55,6 +55,11 @@ from .serialisers import (
 class IndexView(TemplateView):
     template_name = "index.html"
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context['cookie_prefix'] = settings.COOKIE_PREFIX
+        return context
+
 
 class CorrespondentViewSet(ModelViewSet):
     model = Correspondent
@@ -185,7 +190,12 @@ class DocumentViewSet(RetrieveModelMixin,
         parser_class = get_parser_class_for_mime_type(mime_type)
         if parser_class:
             parser = parser_class(logging_group=None)
-            return parser.extract_metadata(file, mime_type)
+
+            try:
+                return parser.extract_metadata(file, mime_type)
+            except Exception as e:
+                # TODO: cover GPG errors, remove later.
+                return []
         else:
             return []
 
@@ -231,7 +241,12 @@ class DocumentViewSet(RetrieveModelMixin,
     @cache_control(public=False, max_age=315360000)
     def thumb(self, request, pk=None):
         try:
-            return HttpResponse(Document.objects.get(id=pk).thumbnail_file,
+            doc = Document.objects.get(id=pk)
+            if doc.storage_type == Document.STORAGE_TYPE_GPG:
+                handle = GnuPG.decrypted(doc.thumbnail_file)
+            else:
+                handle = doc.thumbnail_file
+            return HttpResponse(handle,
                                 content_type='image/png')
         except (FileNotFoundError, Document.DoesNotExist):
             raise Http404()
diff --git a/src/paperless/version.py b/src/paperless/version.py
index 527e0668d..10283c145 100644
--- a/src/paperless/version.py
+++ b/src/paperless/version.py
@@ -1 +1 @@
-__version__ = (0, 9, 6)
+__version__ = (0, 9, 8)
diff --git a/src/paperless_mail/mail.py b/src/paperless_mail/mail.py
index a82c34f15..3c200362d 100644
--- a/src/paperless_mail/mail.py
+++ b/src/paperless_mail/mail.py
@@ -26,7 +26,7 @@ class BaseMailAction:
         return {}
 
     def post_consume(self, M, message_uids, parameter):
-        pass
+        pass  # pragma: nocover
 
 
 class DeleteMailAction(BaseMailAction):
@@ -69,7 +69,7 @@ def get_rule_action(rule):
     elif rule.action == MailRule.ACTION_MARK_READ:
         return MarkReadMailAction()
     else:
-        raise ValueError("Unknown action.")
+        raise NotImplementedError("Unknown action.")  # pragma: nocover
 
 
 def make_criterias(rule):
@@ -95,7 +95,7 @@ def get_mailbox(server, port, security):
     elif security == MailAccount.IMAP_SECURITY_SSL:
         mailbox = MailBox(server, port)
     else:
-        raise ValueError("Unknown IMAP security")
+        raise NotImplementedError("Unknown IMAP security")  # pragma: nocover
     return mailbox
 
 
@@ -119,7 +119,7 @@ class MailAccountHandler(LoggingMixin):
             return os.path.splitext(os.path.basename(att.filename))[0]
 
         else:
-            raise ValueError("Unknown title selector.")
+            raise NotImplementedError("Unknown title selector.")  # pragma: nocover  # NOQA: E501
 
     def get_correspondent(self, message, rule):
         c_from = rule.assign_correspondent_from
@@ -141,7 +141,7 @@ class MailAccountHandler(LoggingMixin):
             return rule.assign_correspondent
 
         else:
-            raise ValueError("Unknwown correspondent selector")
+            raise NotImplementedError("Unknwown correspondent selector")  # pragma: nocover  # NOQA: E501
 
     def handle_mail_account(self, account):
 
diff --git a/src/paperless_mail/tests/test_mail.py b/src/paperless_mail/tests/test_mail.py
index 2a391a268..9c0f52c53 100644
--- a/src/paperless_mail/tests/test_mail.py
+++ b/src/paperless_mail/tests/test_mail.py
@@ -399,7 +399,7 @@ class TestMail(TestCase):
 
         c = Correspondent.objects.get(name="amazon@amazon.de")
         # should work
-        self.assertEquals(kwargs['override_correspondent_id'], c.id)
+        self.assertEqual(kwargs['override_correspondent_id'], c.id)
 
         self.async_task.reset_mock()
         self.reset_bogus_mailbox()
@@ -411,7 +411,7 @@ class TestMail(TestCase):
 
         args, kwargs = self.async_task.call_args
         self.async_task.assert_called_once()
-        self.assertEquals(kwargs['override_correspondent_id'], None)
+        self.assertEqual(kwargs['override_correspondent_id'], None)
 
 
     def test_filters(self):
diff --git a/src/paperless_text/parsers.py b/src/paperless_text/parsers.py
index f8f369ab0..7e488ca37 100644
--- a/src/paperless_text/parsers.py
+++ b/src/paperless_text/parsers.py
@@ -1,6 +1,7 @@
 import os
 import subprocess
 
+from PIL import ImageDraw, ImageFont, Image
 from django.conf import settings
 
 from documents.parsers import DocumentParser, ParseError
@@ -12,63 +13,22 @@ class TextDocumentParser(DocumentParser):
     """
 
     def get_thumbnail(self, document_path, mime_type):
-        """
-        The thumbnail of a text file is just a 500px wide image of the text
-        rendered onto a letter-sized page.
-        """
-        # The below is heavily cribbed from https://askubuntu.com/a/590951
-
-        bg_color = "white"  # bg color
-        text_color = "black"  # text color
-        psize = [500, 647]  # icon size
-        n_lines = 50  # number of lines to show
-        out_path = os.path.join(self.tempdir, "convert.png")
-
-        temp_bg = os.path.join(self.tempdir, "bg.png")
-        temp_txlayer = os.path.join(self.tempdir, "tx.png")
-        picsize = "x".join([str(n) for n in psize])
-        txsize = "x".join([str(n - 8) for n in psize])
-
-        def create_bg():
-            work_size = ",".join([str(n - 1) for n in psize])
-            r = str(round(psize[0] / 10))
-            rounded = ",".join([r, r])
-            run_command(
-                settings.CONVERT_BINARY,
-                "-size ", picsize,
-                ' xc:none -draw ',
-                '"fill ', bg_color, ' roundrectangle 0,0,', work_size, ",", rounded, '" ',  # NOQA: E501
-                temp_bg
-            )
 
         def read_text():
             with open(document_path, 'r') as src:
                 lines = [line.strip() for line in src.readlines()]
-                text = "\n".join([line for line in lines[:n_lines]])
-                return text.replace('"', "'")
+                text = "\n".join(lines[:50])
+                return text
 
-        def create_txlayer():
-            run_command(
-                settings.CONVERT_BINARY,
-                "-background none",
-                "-fill",
-                text_color,
-                "-pointsize", "12",
-                "-border 4 -bordercolor none",
-                "-size ", txsize,
-                ' caption:"', read_text(), '" ',
-                temp_txlayer
-            )
+        img = Image.new("RGB", (500, 700), color="white")
+        draw = ImageDraw.Draw(img)
+        font = ImageFont.truetype(
+            "/usr/share/fonts/liberation/LiberationSerif-Regular.ttf", 20,
+            layout_engine=ImageFont.LAYOUT_BASIC)
+        draw.text((5, 5), read_text(), font=font, fill="black")
 
-        create_txlayer()
-        create_bg()
-        run_command(
-            settings.CONVERT_BINARY,
-            temp_bg,
-            temp_txlayer,
-            "-background None -layers merge ",
-            out_path
-        )
+        out_path = os.path.join(self.tempdir, "thumb.png")
+        img.save(out_path)
 
         return out_path
 
diff --git a/src/paperless_text/tests/samples/test.txt b/src/paperless_text/tests/samples/test.txt
new file mode 100644
index 000000000..6de7b8c69
--- /dev/null
+++ b/src/paperless_text/tests/samples/test.txt
@@ -0,0 +1 @@
+This is a test file.
diff --git a/src/paperless_text/tests/test_parser.py b/src/paperless_text/tests/test_parser.py
new file mode 100644
index 000000000..413aa91cf
--- /dev/null
+++ b/src/paperless_text/tests/test_parser.py
@@ -0,0 +1,26 @@
+import os
+
+from django.test import TestCase
+
+from documents.tests.utils import DirectoriesMixin
+from paperless_text.parsers import TextDocumentParser
+
+
+class TestTextParser(DirectoriesMixin, TestCase):
+
+    def test_thumbnail(self):
+
+        parser = TextDocumentParser(None)
+
+        # just make sure that it does not crash
+        f = parser.get_thumbnail(os.path.join(os.path.dirname(__file__), "samples", "test.txt"), "text/plain")
+        self.assertTrue(os.path.isfile(f))
+
+    def test_parse(self):
+
+        parser = TextDocumentParser(None)
+
+        parser.parse(os.path.join(os.path.dirname(__file__), "samples", "test.txt"), "text/plain")
+
+        self.assertEqual(parser.get_text(), "This is a test file.\n")
+        self.assertIsNone(parser.get_archive_path())

From 55a6dca373660a88931e03b7f80f9b9c10f48404 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 18 Dec 2020 16:03:52 -0800
Subject: [PATCH 08/73] Refactor editor and filterable dropdowns to be common
 components in anticipation of bulk editor

---
 src-ui/src/app/app.module.ts                  | 14 ++++----
 .../date-dropdown.component.html}             |  2 +-
 .../date-dropdown.component.scss}             |  2 +-
 .../date-dropdown.component.spec.ts}          | 12 +++----
 .../date-dropdown/date-dropdown.component.ts} | 36 +++++++++----------
 ...filterable-dropdown-button.component.html} |  0
 ...filterable-dropdown-button.component.scss} |  0
 ...lterable-dropdown-button.component.spec.ts | 25 +++++++++++++
 .../filterable-dropdown-button.component.ts}  |  8 ++---
 .../filterable-dropdown.component.html}       |  4 +--
 .../filterable-dropdown.component.scss}       |  0
 .../filterable-dropdown.component.spec.ts     | 25 +++++++++++++
 .../filterable-dropdown.component.ts}         | 12 +++----
 .../document-list/document-list.component.ts  |  2 +-
 .../filter-editor.component.html              | 10 +++---
 .../filter-editor.component.scss              |  0
 .../filter-editor.component.spec.ts           |  0
 .../filter-editor/filter-editor.component.ts  |  8 ++---
 .../filter-dropdown-date.component.spec.ts    | 25 -------------
 .../filter-dropdown-button.component.spec.ts  | 25 -------------
 20 files changed, 105 insertions(+), 105 deletions(-)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown-date/filter-dropdown-date.component.html => common/date-dropdown/date-dropdown.component.html} (95%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss => common/date-dropdown/date-dropdown.component.scss} (78%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown.component.spec.ts => common/date-dropdown/date-dropdown.component.spec.ts} (51%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts => common/date-dropdown/date-dropdown.component.ts} (70%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html => common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html} (100%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.scss => common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss} (100%)
 create mode 100644 src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts => common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts} (74%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown.component.html => common/filterable-dropdown/filterable-dropdown.component.html} (86%)
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown.component.scss => common/filterable-dropdown/filterable-dropdown.component.scss} (100%)
 create mode 100644 src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
 rename src-ui/src/app/components/{filter-editor/filter-dropdown/filter-dropdown.component.ts => common/filterable-dropdown/filterable-dropdown.component.ts} (81%)
 rename src-ui/src/app/components/{ => document-list}/filter-editor/filter-editor.component.html (51%)
 rename src-ui/src/app/components/{ => document-list}/filter-editor/filter-editor.component.scss (100%)
 rename src-ui/src/app/components/{ => document-list}/filter-editor/filter-editor.component.spec.ts (100%)
 rename src-ui/src/app/components/{ => document-list}/filter-editor/filter-editor.component.ts (98%)
 delete mode 100644 src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts
 delete mode 100644 src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 6c4cabe92..97c547038 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -26,10 +26,10 @@ import { ResultHighlightComponent } from './components/search/result-highlight/r
 import { PageHeaderComponent } from './components/common/page-header/page-header.component';
 import { AppFrameComponent } from './components/app-frame/app-frame.component';
 import { ToastsComponent } from './components/common/toasts/toasts.component';
-import { FilterEditorComponent } from './components/filter-editor/filter-editor.component';
-import { FilterDropdownComponent } from './components/filter-editor/filter-dropdown/filter-dropdown.component';
-import { FilterDropdownButtonComponent } from './components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component';
-import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.component';
+import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component';
+import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component';
+import { FilterableDropdownButtonComponent } from './components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component';
+import { DateDropdownComponent } from './components/common/date-dropdown/date-dropdown.component';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
 import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component';
@@ -81,9 +81,9 @@ import { NgSelectModule } from '@ng-select/ng-select';
     AppFrameComponent,
     ToastsComponent,
     FilterEditorComponent,
-    FilterDropdownComponent,
-    FilterDropdownButtonComponent,
-    FilterDropdownDateComponent,
+    FilterableDropdownComponent,
+    FilterableDropdownButtonComponent,
+    DateDropdownComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
     BulkEditorComponent,
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
similarity index 95%
rename from src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
rename to src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index aca6e836c..ba9f1fafb 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -2,7 +2,7 @@
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
     {{title}}
   </button>
-  <div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
         <button *ngFor="let qf of quickFilters" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(qf.id)">
           {{qf.name}}
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
similarity index 78%
rename from src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss
rename to src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
index 3bdedd8a0..e6045629b 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
@@ -1,4 +1,4 @@
-.date-filter {
+.date-dropdown {
   min-width: 250px;
 
   .btn-link {
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.spec.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts
similarity index 51%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.spec.ts
rename to src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts
index 29edd7c45..8355db1c4 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FilterDropodownComponent } from './filter-dropdown.component';
+import { DateDropdownComponent } from './date-dropdown.component';
 
-describe('FilterDropodownComponent', () => {
-  let component: FilterDropodownComponent;
-  let fixture: ComponentFixture<FilterDropodownComponent>;
+describe('DateDropdownComponent', () => {
+  let component: DateDropdownComponent;
+  let fixture: ComponentFixture<DateDropdownComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FilterDropodownComponent ]
+      declarations: [ DateDropdownComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FilterDropodownComponent);
+    fixture = TestBed.createComponent(DateDropdownComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
similarity index 70%
rename from src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
rename to src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index e570862cd..e787ce11e 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -8,23 +8,23 @@ export interface DateSelection {
   after?: string
 }
 
-const FILTER_LAST_7_DAYS = 0
-const FILTER_LAST_MONTH = 1
-const FILTER_LAST_3_MONTHS = 2
-const FILTER_LAST_YEAR = 3
+const LAST_7_DAYS = 0
+const LAST_MONTH = 1
+const LAST_3_MONTHS = 2
+const LAST_YEAR = 3
 
 @Component({
-  selector: 'app-filter-dropdown-date',
-  templateUrl: './filter-dropdown-date.component.html',
-  styleUrls: ['./filter-dropdown-date.component.scss']
+  selector: 'app-date-dropdown',
+  templateUrl: './date-dropdown.component.html',
+  styleUrls: ['./date-dropdown.component.scss']
 })
-export class FilterDropdownDateComponent implements OnInit, OnDestroy {
+export class DateDropdownComponent implements OnInit, OnDestroy {
 
   quickFilters = [
-    {id: FILTER_LAST_7_DAYS, name: "Last 7 days"}, 
-    {id: FILTER_LAST_MONTH, name: "Last month"},
-    {id: FILTER_LAST_3_MONTHS, name: "Last 3 months"},
-    {id: FILTER_LAST_YEAR, name: "Last year"}
+    {id: LAST_7_DAYS, name: "Last 7 days"},
+    {id: LAST_MONTH, name: "Last month"},
+    {id: LAST_3_MONTHS, name: "Last 3 months"},
+    {id: LAST_YEAR, name: "Last year"}
   ]
 
   @Input()
@@ -42,7 +42,7 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
   private datesSetDebounce$ = new Subject()
 
   private sub: Subscription
-  
+
   ngOnInit() {
     this.sub = this.datesSetDebounce$.pipe(
       debounceTime(400)
@@ -61,22 +61,22 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
     this.dateBefore = null
     let date = new Date()
     switch (qf) {
-      case FILTER_LAST_7_DAYS:
+      case LAST_7_DAYS:
         date.setDate(date.getDate() - 7)
         break;
 
-      case FILTER_LAST_MONTH:
+      case LAST_MONTH:
         date.setMonth(date.getMonth() - 1)
         break;
 
-      case FILTER_LAST_3_MONTHS:
+      case LAST_3_MONTHS:
         date.setMonth(date.getMonth() - 3)
         break
 
-      case FILTER_LAST_YEAR:
+      case LAST_YEAR:
         date.setFullYear(date.getFullYear() - 1)
         break
-  
+
       }
     this.dateAfter = formatDate(date, 'yyyy-MM-dd', "en-us", "UTC")
     this.onChange()
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
similarity index 100%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss
similarity index 100%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.scss
rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
new file mode 100644
index 000000000..c7f0b3293
--- /dev/null
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterableDropodownButtonComponent } from './filterable-dropdown-button.component';
+
+describe('FilterableDropodownButtonComponent', () => {
+  let component: FilterableDropodownButtonComponent;
+  let fixture: ComponentFixture<FilterableDropodownButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterableDropodownButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterableDropodownButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
similarity index 74%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts
rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
index d3ddd3cbf..b85088191 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
@@ -4,11 +4,11 @@ import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 
 @Component({
-  selector: 'app-filter-dropdown-button',
-  templateUrl: './filter-dropdown-button.component.html',
-  styleUrls: ['./filter-dropdown-button.component.scss']
+  selector: 'app-filterable-dropdown-button',
+  templateUrl: './filterable-dropdown-button.component.html',
+  styleUrls: ['./filterable-dropdown-button.component.scss']
 })
-export class FilterDropdownButtonComponent implements OnInit {
+export class FilterableDropdownButtonComponent implements OnInit {
 
   @Input()
   item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
similarity index 86%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index d0cbfc3c9..6553c97a7 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -1,4 +1,4 @@
-<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #filterDropdown="ngbDropdown">
+<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
@@ -21,7 +21,7 @@
       </div>
       <div *ngIf="items" class="items">
         <ng-container *ngFor="let item of items | filter: filterText; let i = index">
-          <app-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button>
+          <app-filterable-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filterable-dropdown-button>
         </ng-container>
       </div>
     </div>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
similarity index 100%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss
rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
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
new file mode 100644
index 000000000..3eef95c16
--- /dev/null
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterableDropodownComponent } from './filterable-dropdown.component';
+
+describe('FilterableDropodownComponent', () => {
+  let component: FilterableDropodownComponent;
+  let fixture: ComponentFixture<FilterableDropodownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterableDropodownComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterableDropodownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
similarity index 81%
rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
index b9d3fca6f..0f7f937aa 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -4,11 +4,11 @@ import { FilterPipe } from  'src/app/pipes/filter.pipe';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 
 @Component({
-  selector: 'app-filter-dropdown',
-  templateUrl: './filter-dropdown.component.html',
-  styleUrls: ['./filter-dropdown.component.scss']
+  selector: 'app-filterable-dropdown',
+  templateUrl: './filterable-dropdown.component.html',
+  styleUrls: ['./filterable-dropdown.component.scss']
 })
-export class FilterDropdownComponent {
+export class FilterableDropdownComponent {
 
   constructor(private filterPipe: FilterPipe) { }
 
@@ -28,7 +28,7 @@ export class FilterDropdownComponent {
   toggle = new EventEmitter()
 
   @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
-  @ViewChild('filterDropdown') filterDropdown: NgbDropdown
+  @ViewChild('dropdown') dropdown: NgbDropdown
 
   filterText: string
 
@@ -53,6 +53,6 @@ export class FilterDropdownComponent {
   listFilterEnter(): void {
     let filtered = this.filterPipe.transform(this.items, this.filterText)
     if (filtered.length == 1) this.toggleItem(filtered.shift())
-    this.filterDropdown.close()
+    this.dropdown.close()
   }
 }
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index a8bdf89d3..fd0b7ab31 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -11,7 +11,7 @@ import { DocumentService, DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/doc
 import { TagService } from 'src/app/services/rest/tag.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
-import { FilterEditorComponent } from '../filter-editor/filter-editor.component';
+import { FilterEditorComponent } from './filter-editor/filter-editor.component';
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component';
 import { SelectDialogComponent } from '../common/select-dialog/select-dialog.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
similarity index 51%
rename from src-ui/src/app/components/filter-editor/filter-editor.component.html
rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 6847a2902..2d480bfed 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -8,11 +8,11 @@
   <div class="w-100 d-xl-none"></div>
    <div class="col col-xl-auto mb-2 mb-xl-0">
      <div class="d-flex">
-       <app-filter-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
-       <app-filter-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
-       <app-filter-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
-       <app-filter-dropdown-date class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
-       <app-filter-dropdown-date [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filterable-dropdown>
+       <app-date-dropdown class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-date-dropdown>
+       <app-date-dropdown [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-date-dropdown>
      </div>
    </div>
    <div class="w-100 d-xl-none"></div>
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.scss b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
similarity index 100%
rename from src-ui/src/app/components/filter-editor/filter-editor.component.scss
rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.spec.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
similarity index 100%
rename from src-ui/src/app/components/filter-editor/filter-editor.component.spec.ts
rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
similarity index 98%
rename from src-ui/src/app/components/filter-editor/filter-editor.component.ts
rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index 913c738a5..2d88579f9 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -10,7 +10,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { FilterRule } from 'src/app/data/filter-rule';
 import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type';
-import { DateSelection } from './filter-dropdown-date/filter-dropdown-date.component';
+import { DateSelection } from 'src/app/components/common/date-dropdown/date-dropdown.component';
 
 @Component({
   selector: 'app-filter-editor',
@@ -23,7 +23,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     if (this.filterRules.length == 1) {
       let rule = this.filterRules[0]
       switch(this.filterRules[0].rule_type) {
-        
+
         case FILTER_CORRESPONDENT:
           return `Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
 
@@ -55,7 +55,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
 
   @Output()
   filterRulesChange = new EventEmitter<FilterRule[]>()
-  
+
   hasFilters() {
     return this.filterRules.length > 0
   }
@@ -123,7 +123,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
 
     let existingRule = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID && rule.value == value?.toString())
     let existingRuleOfSameType = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID)
-    
+
     if (existingRule) {
       // if this exact rule already exists, remove it in all cases.
       this.filterRules.splice(this.filterRules.indexOf(existingRule), 1)
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts
deleted file mode 100644
index 6bf59e2e7..000000000
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FilterDropdownDateComponent } from './filter-dropdown-date.component';
-
-describe('FilterDropdownDateComponent', () => {
-  let component: FilterDropdownDateComponent;
-  let fixture: ComponentFixture<FilterDropdownDateComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FilterDropdownDateComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FilterDropdownDateComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts
deleted file mode 100644
index 5cf1fefa2..000000000
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FilterDropodownButtonComponent } from './filter-dropdown-button.component';
-
-describe('FilterDropodownButtonComponent', () => {
-  let component: FilterDropodownButtonComponent;
-  let fixture: ComponentFixture<FilterDropodownButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FilterDropodownButtonComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FilterDropodownButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

From 01d448ecde9dffba833d89bb4c50f59593c8027b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 18 Dec 2020 21:19:49 -0800
Subject: [PATCH 09/73] Bulk editor component skeleton

---
 .../filterable-dropdown.component.ts          |  4 +
 .../bulk-editor/bulk-editor.component.html    | 95 ++++---------------
 .../bulk-editor/bulk-editor.component.scss    | 10 --
 .../bulk-editor/bulk-editor.component.ts      | 75 ++++++++++++++-
 .../document-list.component.html              | 22 ++---
 5 files changed, 107 insertions(+), 99 deletions(-)

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 0f7f937aa..cecbdf9fa 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
@@ -27,6 +27,9 @@ export class FilterableDropdownComponent {
   @Output()
   toggle = new EventEmitter()
 
+  @Output()
+  close = new EventEmitter()
+
   @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
   @ViewChild('dropdown') dropdown: NgbDropdown
 
@@ -47,6 +50,7 @@ export class FilterableDropdownComponent {
       }, 0);
     } else {
       this.filterText = ''
+      this.close.emit(this.itemsSelected)
     }
   }
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index d330ba228..bf8f7b732 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,89 +1,34 @@
-<div class="card bg-light">
-<div class="card-body small px-2 py-2 d-flex flex-column flex-xl-row justify-content-between justify-content-xl-start">
-  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Select">
-    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Select:</label>
-    <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="selectPage.next()">
-        <svg viewBox="0 0 16 16" fill="currentColor">
+<div class="row">
+  <div class="col mb-2 mb-xl-0" role="group" aria-label="Select">
+    <label class="mr-lg-2">Select:</label>
+    <div class="btn-group">
+      <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
         </svg>
-        <small>Page</small>
+        Page
       </button>
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="selectAll.next()">
-        <svg viewBox="0 0 16 16" fill="currentColor">
+      <button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#check-all" />
         </svg>
-        <small>All</small>
+        All
       </button>
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="selectNone.next()">
-        <svg viewBox="0 0 16 16" fill="currentColor">
+      <button class="btn btn-sm btn-outline-primary" (click)="selectNone.next()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
         </svg>
-        <small>None</small>
+        None
       </button>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Tags">
-    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Tags:</label>
-    <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="addTag.next()">
-        <ng-container *ngTemplateOutlet="add"></ng-container>
-      </button>
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="removeTag.next()">
-        <ng-container *ngTemplateOutlet="remove"></ng-container>
-      </button>
+  <div class="w-100 d-xl-none"></div>
+  <div class="col mb-2 mb-xl-0">
+    <div class="d-flex">
+      <label class="ml-auto mt-1 mr-2">Apply:</label>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Apply Tags" icon="tag-fill" [items]="tags" [itemsSelected]="selectedTags" (close)="applyTags($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Set Correspondent" icon="person-fill" [items]="correspondents" [itemsSelected]="selectedCorrespondents" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Set Document Type" icon="file-earmark-fill" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" (close)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
-  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Correspondent">
-    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Correspondent:</label>
-    <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="setCorrespondent.next()">
-        <ng-container *ngTemplateOutlet="edit"></ng-container>
-      </button>
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="removeCorrespondent.next()">
-        <ng-container *ngTemplateOutlet="remove"></ng-container>
-      </button>
-    </div>
-  </div>
-  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-xl-0 mr-xl-5" role="group" aria-label="Document Type">
-    <label class="d-flex align-self-center my-0 mr-auto mr-lg-2">Document Type:</label>
-    <div class="btn-group d-flex">
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="setDocumentType.next()">
-        <ng-container *ngTemplateOutlet="edit"></ng-container>
-      </button>
-      <button class="btn btn-sm btn-outline-primary py-1 px-2" (click)="removeDocumentType.next()">
-        <ng-container *ngTemplateOutlet="remove"></ng-container>
-      </button>
-    </div>
-  </div>
-  <div class="d-flex flex-grow-1 flex-xl-grow-0 mb-2 mb-lg-0 ml-auto ml-lg-0 ml-xl-auto" role="group" aria-label="Delete">
-    <button class="btn btn-sm btn-outline-danger" (click)="delete.next()">
-      <svg viewBox="0 0 16 16" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#trash" />
-      </svg>
-      <small>Delete</small>
-    </button>
-  </div>
 </div>
-</div>
-
-<ng-template #add>
-  <svg viewBox="0 0 16 16" fill="currentColor">
-    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-  </svg>
-  <small>Add</small>
-</ng-template>
-
-<ng-template #edit>
-  <svg viewBox="0 0 16 16" fill="currentColor">
-    <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-  </svg>
-  <small>Edit</small>
-</ng-template>
-
-<ng-template #remove>
-  <svg viewBox="0 0 16 16" fill="currentColor">
-    <use xlink:href="assets/bootstrap-icons.svg#x-circle" />
-  </svg>
-  <small>Remove</small>
-</ng-template>
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
index 5afd86545..e69de29bb 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss
@@ -1,10 +0,0 @@
-.btn svg {
-  width: 0.9em;
-  height: 0.9em;
-  margin-right: 3px;
-  margin-top: -1px;
-}
-
-.btn-sm {
-  line-height: 1;
-}
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 5c1ad01ae..e5f722dc7 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
@@ -1,5 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DocumentListViewService } from 'src/app/services/document-list-view.service';
+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 { PaperlessDocument } from 'src/app/data/paperless-document';
+import { TagService } from 'src/app/services/rest/tag.service';
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { DocumentService } from 'src/app/services/rest/document.service';
 
 @Component({
   selector: 'app-bulk-editor',
@@ -9,7 +16,10 @@ import { DocumentListViewService } from 'src/app/services/document-list-view.ser
 export class BulkEditorComponent {
 
   @Input()
-  list: DocumentListViewService
+  documentsSelected: Set<number>
+
+  @Input()
+  allDocuments: PaperlessDocument[]
 
   @Output()
   selectPage = new EventEmitter()
@@ -41,6 +51,65 @@ export class BulkEditorComponent {
   @Output()
   delete = new EventEmitter()
 
-  constructor( ) { }
+  tags: PaperlessTag[]
+  correspondents: PaperlessCorrespondent[]
+  documentTypes: PaperlessDocumentType[]
 
+  get selectedTags(): PaperlessTag[] {
+    let selectedTags = []
+    this.allDocuments.forEach(d => {
+      if (this.documentsSelected.has(d.id)) {
+        if (d.tags && !d.tags.every(t => selectedTags.find(st => st.id == t) !== undefined)) d.tags$.subscribe(t => selectedTags = selectedTags.concat(t))
+      }
+    })
+    return selectedTags
+  }
+
+  get selectedCorrespondents(): PaperlessCorrespondent[]  {
+    let selectedCorrespondents = []
+    this.allDocuments.forEach(d => {
+      if (this.documentsSelected.has(d.id)) {
+        if (d.correspondent && selectedCorrespondents.find(sc => sc.id == d.correspondent) == undefined) d.correspondent$.subscribe(c => selectedCorrespondents.push(c))
+      }
+    })
+    return selectedCorrespondents
+  }
+
+  get selectedDocumentTypes(): PaperlessDocumentType[] {
+    let selectedDocumentTypes = []
+    this.allDocuments.forEach(d => {
+      if (this.documentsSelected.has(d.id)) {
+        if (d.document_type && selectedDocumentTypes.find(sdt => sdt.id == d.document_type) == undefined) d.document_type$.subscribe(dt => selectedDocumentTypes.push(dt))
+      }
+    })
+    return selectedDocumentTypes
+  }
+
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService,
+    private documentService: DocumentService
+  ) { }
+
+  ngOnInit() {
+    this.tagService.listAll().subscribe(result => this.tags = result.results)
+    this.correspondentService.listAll().subscribe(result => this.correspondents = result.results)
+    this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
+  }
+
+  applyTags(tags) {
+    console.log(tags);
+
+  }
+
+  applyCorrespondent(correspondent) {
+    console.log(correspondent);
+
+  }
+
+  applyDocumentType(documentType) {
+    console.log(documentType);
+
+  }
 }
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 5b4511866..beb779636 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -78,17 +78,11 @@
 </app-page-header>
 
 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
-</div>
+  <app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 
-<div class="d-flex justify-content-between align-items-center">
-  <p><span *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of </span>{{list.collectionSize || 0}} document(s) <span *ngIf="isFiltered">(filtered)</span></p>
-  <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
-  [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
-</div>
-
-<div class="w-100 mb-3" [ngbCollapse]="!isBulkEditing">
-  <app-bulk-editor
+  <app-bulk-editor *ngIf="isBulkEditing"
+    [allDocuments]="list.documents"
+    [(documentsSelected)]="list.selected"
     (selectPage)="list.selectPage()"
     (selectAll)="list.selectAll()"
     (selectNone)="list.selectNone()"
@@ -99,7 +93,13 @@
     (addTag)="bulkAddTag()"
     (removeTag)="bulkRemoveTag()"
     (delete)="bulkDelete()">
-  </app-bulk-editor>
+</app-bulk-editor>
+</div>
+
+<div class="d-flex justify-content-between align-items-center">
+  <p><span *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of </span>{{list.collectionSize || 0}} document(s) <span *ngIf="isFiltered">(filtered)</span></p>
+  <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
+  [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">

From 275bd96ba85778769a787c6da3562df610c13529 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 00:13:08 -0800
Subject: [PATCH 10/73] Refactor filterable dropdowns to allow intermediate
 state

---
 .../filterable-dropdown-button.component.html |  4 +-
 .../filterable-dropdown-button.component.ts   | 19 ++++++--
 .../filterable-dropdown.component.html        |  6 +--
 .../filterable-dropdown.component.ts          | 46 +++++++++++++++----
 src-ui/src/app/pipes/filter.pipe.ts           | 13 +++---
 5 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
index 0ea870533..5b58025d1 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
@@ -1,7 +1,7 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
   <div class="selected-icon mr-1">
-    <svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-      <use xlink:href="assets/bootstrap-icons.svg#check" />
+    <svg *ngIf="getSelectedIconName() !== ''" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+      <use attr.xlink:href="assets/bootstrap-icons.svg#{{getSelectedIconName()}}" />
     </svg>
   </div>
   <div class="mr-1">
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
index b85088191..366bd19b4 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
@@ -2,6 +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';
 
 @Component({
   selector: 'app-filterable-dropdown-button',
@@ -11,10 +12,11 @@ import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 export class FilterableDropdownButtonComponent implements OnInit {
 
   @Input()
-  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent
+  selectableItem: SelectableItem
 
-  @Input()
-  selected: boolean
+  get item(): PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent {
+    return this.selectableItem?.item
+  }
 
   @Output()
   toggle = new EventEmitter()
@@ -26,7 +28,14 @@ export class FilterableDropdownButtonComponent implements OnInit {
   }
 
   toggleItem(): void {
-    this.selected = !this.selected
-    this.toggle.emit(this.item)
+    this.selectableItem.state = (this.selectableItem.state == SelectableItemState.NotSelected || this.selectableItem.state == SelectableItemState.PartiallySelected) ? SelectableItemState.Selected : SelectableItemState.NotSelected
+    this.toggle.emit(this.selectableItem)
+  }
+
+  getSelectedIconName() {
+    let iconName = ''
+    if (this.selectableItem?.state == SelectableItemState.Selected) iconName = 'check'
+    else if (this.selectableItem?.state == SelectableItemState.PartiallySelected) iconName = 'minus'
+    return iconName
   }
 }
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 6553c97a7..257cec1e5 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
@@ -19,9 +19,9 @@
           <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
         </div>
       </div>
-      <div *ngIf="items" class="items">
-        <ng-container *ngFor="let item of items | filter: filterText; let i = index">
-          <app-filterable-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filterable-dropdown-button>
+      <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>
         </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 cecbdf9fa..8a6ed7c8b 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,8 +1,22 @@
 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';
 import { FilterPipe } from  'src/app/pipes/filter.pipe';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 
+export interface SelectableItem {
+  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
+  state: SelectableItemState
+}
+
+export enum SelectableItemState {
+  NotSelected = 0,
+  Selected = 1,
+  PartiallySelected = 2
+}
+
 @Component({
   selector: 'app-filterable-dropdown',
   templateUrl: './filterable-dropdown.component.html',
@@ -13,10 +27,26 @@ export class FilterableDropdownComponent {
   constructor(private filterPipe: FilterPipe) { }
 
   @Input()
-  items: ObjectWithId[]
+  set items(items: ObjectWithId[]) {
+    if (items) {
+      this.selectableItems = items.map(i => {
+        return {item: i, state: SelectableItemState.NotSelected}
+      })
+    }
+  }
+
+  selectableItems: SelectableItem[] = []
 
   @Input()
-  itemsSelected: ObjectWithId[]
+  set itemsSelected(itemsSelected: ObjectWithId[]) {
+    this.selectableItems.forEach(i => {
+      i.state = (itemsSelected.find(is => is.id == i.item.id)) ? SelectableItemState.Selected : SelectableItemState.NotSelected
+    })
+  }
+
+  get itemsSelected() :ObjectWithId[] {
+    return this.selectableItems.filter(si => si.state == SelectableItemState.Selected).map(si => si.item)
+  }
 
   @Input()
   title: string
@@ -35,12 +65,8 @@ export class FilterableDropdownComponent {
 
   filterText: string
 
-  toggleItem(item: ObjectWithId): void {
-    this.toggle.emit(item)
-  }
-
-  isItemSelected(item: ObjectWithId): boolean {
-    return this.itemsSelected?.find(i => i.id == item.id) !== undefined
+  toggleItem(selectableItem: SelectableItem): void {
+    this.toggle.emit(selectableItem.item)
   }
 
   dropdownOpenChange(open: boolean): void {
@@ -50,12 +76,12 @@ export class FilterableDropdownComponent {
       }, 0);
     } else {
       this.filterText = ''
-      this.close.emit(this.itemsSelected)
+      this.close.next()
     }
   }
 
   listFilterEnter(): void {
-    let filtered = this.filterPipe.transform(this.items, this.filterText)
+    let filtered = this.filterPipe.transform(this.selectableItems, this.filterText)
     if (filtered.length == 1) this.toggleItem(filtered.shift())
     this.dropdown.close()
   }
diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts
index f799f40cc..51d1924b8 100644
--- a/src-ui/src/app/pipes/filter.pipe.ts
+++ b/src-ui/src/app/pipes/filter.pipe.ts
@@ -1,16 +1,17 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { SelectableItem } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 
 @Pipe({
   name: 'filter'
 })
 export class FilterPipe implements PipeTransform {
-  transform(items: any[], searchText: string): any[] {
-    if (!items) return [];
-    if (!searchText) return items;
+  transform(selectableItems: SelectableItem[], searchText: string): any[] {
+    if (!selectableItems) return [];
+    if (!searchText) return selectableItems;
 
-    return items.filter(item => {
-      return Object.keys(item).some(key => {
-        return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
+    return selectableItems.filter(selectableItem => {
+      return Object.keys(selectableItem.item).some(key => {
+        return String(selectableItem.item[key]).toLowerCase().includes(searchText.toLowerCase());
       });
     });
    }

From 24c53e78a74234fa281958a64e6f85cd25f49789 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 02:08:33 -0800
Subject: [PATCH 11/73] Working bulk editor component

---
 .../filterable-dropdown-button.component.ts   |  2 +-
 .../filterable-dropdown.component.html        |  4 +-
 .../filterable-dropdown.component.ts          | 40 +++++++--
 .../bulk-editor/bulk-editor.component.html    | 15 +++-
 .../bulk-editor/bulk-editor.component.ts      | 86 ++++++++++---------
 .../document-list.component.html              | 11 +--
 .../document-list/document-list.component.ts  | 13 ++-
 7 files changed, 109 insertions(+), 62 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
index 366bd19b4..a928d715e 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
@@ -35,7 +35,7 @@ export class FilterableDropdownButtonComponent implements OnInit {
   getSelectedIconName() {
     let iconName = ''
     if (this.selectableItem?.state == SelectableItemState.Selected) iconName = 'check'
-    else if (this.selectableItem?.state == SelectableItemState.PartiallySelected) iconName = 'minus'
+    else if (this.selectableItem?.state == SelectableItemState.PartiallySelected) iconName = 'dash'
     return iconName
   }
 }
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 257cec1e5..870ea41e4 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
@@ -1,12 +1,12 @@
 <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== 'actions' && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
       <svg class="toolbaricon" fill="currentColor">
         <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
       </svg>
     </div>
-    <ng-container *ngIf="itemsSelected?.length > 0">
+    <ng-container *ngIf="type !== 'actions' && itemsSelected?.length > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
         {{itemsSelected?.length}}
       </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 8a6ed7c8b..4f694ed49 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
@@ -17,6 +17,11 @@ export enum SelectableItemState {
   PartiallySelected = 2
 }
 
+export enum FilterableDropdownType {
+  Filtering = 'filtering',
+  Actions = 'actions'
+}
+
 @Component({
   selector: 'app-filterable-dropdown',
   templateUrl: './filterable-dropdown.component.html',
@@ -24,7 +29,10 @@ export enum SelectableItemState {
 })
 export class FilterableDropdownComponent {
 
-  constructor(private filterPipe: FilterPipe) { }
+  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  filterText: string
 
   @Input()
   set items(items: ObjectWithId[]) {
@@ -35,7 +43,17 @@ export class FilterableDropdownComponent {
     }
   }
 
-  selectableItems: SelectableItem[] = []
+  _selectableItems: SelectableItem[] = []
+
+  @Input()
+  set selectableItems (selectableItems: SelectableItem[]) {
+    if (this.type == FilterableDropdownType.Actions && this.dropdown?.isOpen()) return
+    else this._selectableItems = selectableItems
+  }
+
+  get selectableItems(): SelectableItem[] {
+    return this._selectableItems
+  }
 
   @Input()
   set itemsSelected(itemsSelected: ObjectWithId[]) {
@@ -54,18 +72,26 @@ export class FilterableDropdownComponent {
   @Input()
   icon: string
 
+  @Input()
+  type: FilterableDropdownType = FilterableDropdownType.Filtering
+
+  @Input()
+  singular: boolean = false
+
   @Output()
   toggle = new EventEmitter()
 
   @Output()
   close = new EventEmitter()
 
-  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
-  @ViewChild('dropdown') dropdown: NgbDropdown
-
-  filterText: string
+  constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(selectableItem: SelectableItem): void {
+    if (this.singular && selectableItem.state == SelectableItemState.Selected) {
+      this._selectableItems.forEach(si => {
+        if (si.state == SelectableItemState.Selected && si.item.id !== selectableItem.item.id) si.state = SelectableItemState.NotSelected
+      })
+    }
     this.toggle.emit(selectableItem.item)
   }
 
@@ -76,7 +102,7 @@ export class FilterableDropdownComponent {
       }, 0);
     } else {
       this.filterText = ''
-      this.close.next()
+      this.close.emit(this.itemsSelected)
     }
   }
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index bf8f7b732..e7db0b284 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -26,9 +26,18 @@
   <div class="col mb-2 mb-xl-0">
     <div class="d-flex">
       <label class="ml-auto mt-1 mr-2">Apply:</label>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Apply Tags" icon="tag-fill" [items]="tags" [itemsSelected]="selectedTags" (close)="applyTags($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Set Correspondent" icon="person-fill" [items]="correspondents" [itemsSelected]="selectedCorrespondents" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Set Document Type" icon="file-earmark-fill" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" (close)="applyDocumentType($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" type="actions" (close)="applyTags($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" type="actions" singular="true" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" type="actions" singular="true" (close)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
+  <div class="w-100 d-xl-none"></div>
+  <div class="col-auto mb-2 mb-xl-0">
+    <button type="button" class="btn btn-sm btn-outline-danger " (click)="applyDelete()">
+      <svg class="buttonicon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#trash" />
+      </svg>
+      <span class="d-none d-lg-inline"> Delete</span>
+    </button>
+  </div>
 </div>
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 e5f722dc7..ae3d75aff 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
@@ -7,6 +7,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
+import { SelectableItem, SelectableItemState } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 
 @Component({
   selector: 'app-bulk-editor',
@@ -16,7 +17,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
 export class BulkEditorComponent {
 
   @Input()
-  documentsSelected: Set<number>
+  selectedDocuments: Set<number>
 
   @Input()
   allDocuments: PaperlessDocument[]
@@ -33,20 +34,11 @@ export class BulkEditorComponent {
   @Output()
   setCorrespondent = new EventEmitter()
 
-  @Output()
-  removeCorrespondent = new EventEmitter()
-
   @Output()
   setDocumentType = new EventEmitter()
 
   @Output()
-  removeDocumentType = new EventEmitter()
-
-  @Output()
-  addTag = new EventEmitter()
-
-  @Output()
-  removeTag = new EventEmitter()
+  setTags = new EventEmitter()
 
   @Output()
   delete = new EventEmitter()
@@ -55,34 +47,47 @@ export class BulkEditorComponent {
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
-  get selectedTags(): PaperlessTag[] {
-    let selectedTags = []
-    this.allDocuments.forEach(d => {
-      if (this.documentsSelected.has(d.id)) {
-        if (d.tags && !d.tags.every(t => selectedTags.find(st => st.id == t) !== undefined)) d.tags$.subscribe(t => selectedTags = selectedTags.concat(t))
-      }
+  get tagsSelectableItems(): SelectableItem[] {
+    let tagsSelectableItems = []
+    let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
+    this.tags.forEach(t => {
+      let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
+      let state = SelectableItemState.NotSelected
+      if (selectedDocumentsWithTag.length == selectedDocuments.length) state = SelectableItemState.Selected
+      else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
+      tagsSelectableItems.push( { item: t, state: state } )
     })
-    return selectedTags
+    return tagsSelectableItems
   }
 
-  get selectedCorrespondents(): PaperlessCorrespondent[]  {
-    let selectedCorrespondents = []
-    this.allDocuments.forEach(d => {
-      if (this.documentsSelected.has(d.id)) {
-        if (d.correspondent && selectedCorrespondents.find(sc => sc.id == d.correspondent) == undefined) d.correspondent$.subscribe(c => selectedCorrespondents.push(c))
-      }
+  get correspondentsSelectableItems(): SelectableItem[] {
+    let correspondentsSelectableItems = []
+    let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
+
+    this.correspondents.forEach(c => {
+      let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
+      let state = SelectableItemState.NotSelected
+      if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = SelectableItemState.Selected
+      else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
+      correspondentsSelectableItems.push( { item: c, state: state } )
     })
-    return selectedCorrespondents
+
+    return correspondentsSelectableItems
   }
 
-  get selectedDocumentTypes(): PaperlessDocumentType[] {
-    let selectedDocumentTypes = []
-    this.allDocuments.forEach(d => {
-      if (this.documentsSelected.has(d.id)) {
-        if (d.document_type && selectedDocumentTypes.find(sdt => sdt.id == d.document_type) == undefined) d.document_type$.subscribe(dt => selectedDocumentTypes.push(dt))
-      }
+  get documentTypesSelectableItems(): SelectableItem[] {
+    let documentTypesSelectableItems = []
+    let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
+
+    this.documentTypes.forEach(dt => {
+      let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)
+      let state = SelectableItemState.NotSelected
+      if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = SelectableItemState.Selected
+      else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
+      documentTypesSelectableItems.push( { item: dt, state: state } )
     })
-    return selectedDocumentTypes
+
+    return documentTypesSelectableItems
   }
 
   constructor(
@@ -98,18 +103,19 @@ export class BulkEditorComponent {
     this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
   }
 
-  applyTags(tags) {
-    console.log(tags);
-
+  applyTags(tags: PaperlessTag[]) {
+    this.setTags.emit(tags)
   }
 
-  applyCorrespondent(correspondent) {
-    console.log(correspondent);
-
+  applyCorrespondent(selectedCorrespondent: ObjectWithId[]) {
+    this.setCorrespondent.emit(selectedCorrespondent)
   }
 
-  applyDocumentType(documentType) {
-    console.log(documentType);
+  applyDocumentType(selectedDocumentType: ObjectWithId[]) {
+    this.setDocumentType.emit(selectedDocumentType)
+  }
 
+  applyDelete() {
+    this.delete.next()
   }
 }
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index beb779636..b32ff52f7 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -82,16 +82,13 @@
 
   <app-bulk-editor *ngIf="isBulkEditing"
     [allDocuments]="list.documents"
-    [(documentsSelected)]="list.selected"
+    [(selectedDocuments)]="list.selected"
     (selectPage)="list.selectPage()"
     (selectAll)="list.selectAll()"
     (selectNone)="list.selectNone()"
-    (setCorrespondent)="bulkSetCorrespondent()"
-    (removeCorrespondent)="bulkRemoveCorrespondent()"
-    (setDocumentType)="bulkSetDocumentType()"
-    (removeDocumentType)="bulkRemoveDocumentType()"
-    (addTag)="bulkAddTag()"
-    (removeTag)="bulkRemoveTag()"
+    (setTags)="bulkSetTags($event)"
+    (setCorrespondent)="bulkSetCorrespondent($event)"
+    (setDocumentType)="bulkSetDocumentType($event)"
     (delete)="bulkDelete()">
 </app-bulk-editor>
 </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index fd0b7ab31..a3f7f1e12 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -139,7 +139,9 @@ export class DocumentListComponent implements OnInit {
     )
   }
 
-  bulkSetCorrespondent() {
+  bulkSetCorrespondent(correspondent) {
+    console.log(correspondent);
+
     let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Select correspondent"
     modal.componentInstance.message = `Select the correspondent you wish to assign to ${this.list.selected.size} selected document(s):`
@@ -166,7 +168,9 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkSetDocumentType() {
+  bulkSetDocumentType(documentType) {
+    console.log();
+
     let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Select document type"
     modal.componentInstance.message = `Select the document type you wish to assign to ${this.list.selected.size} selected document(s):`
@@ -193,6 +197,11 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
+  bulkSetTags(tags) {
+    console.log('bulkSetTags', tags);
+
+  }
+
   bulkAddTag() {
     let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Select tag"

From da3695e3a4f7c93b10d88aaa713e9f48e2e6ae8c Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 02:26:41 -0800
Subject: [PATCH 12/73] Working to backend except tags

---
 .../bulk-editor/bulk-editor.component.ts      |  4 +-
 .../document-list/document-list.component.ts  | 67 +++++++------------
 2 files changed, 27 insertions(+), 44 deletions(-)

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 ae3d75aff..8e6197e56 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
@@ -107,11 +107,11 @@ export class BulkEditorComponent {
     this.setTags.emit(tags)
   }
 
-  applyCorrespondent(selectedCorrespondent: ObjectWithId[]) {
+  applyCorrespondent(selectedCorrespondent: PaperlessCorrespondent[]) {
     this.setCorrespondent.emit(selectedCorrespondent)
   }
 
-  applyDocumentType(selectedDocumentType: ObjectWithId[]) {
+  applyDocumentType(selectedDocumentType: PaperlessDocumentType[]) {
     this.setDocumentType.emit(selectedDocumentType)
   }
 
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index a3f7f1e12..15e7987fe 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -15,6 +15,9 @@ import { FilterEditorComponent } from './filter-editor/filter-editor.component';
 import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component';
 import { SelectDialogComponent } from '../common/select-dialog/select-dialog.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
+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';
 
 @Component({
   selector: 'app-document-list',
@@ -139,17 +142,18 @@ export class DocumentListComponent implements OnInit {
     )
   }
 
-  bulkSetCorrespondent(correspondent) {
-    console.log(correspondent);
+  bulkSetCorrespondent(correspondent: PaperlessCorrespondent[]) {
+    if (correspondent.length > 0) correspondent = correspondent.shift()
+    else correspondent = undefined
 
-    let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Select correspondent"
-    modal.componentInstance.message = `Select the correspondent you wish to assign to ${this.list.selected.size} selected document(s):`
-    this.correspondentService.listAll().subscribe(response => {
-      modal.componentInstance.objects = response.results
-    })
-    modal.componentInstance.selectClicked.subscribe(selectedId => {
-      this.executeBulkOperation('set_correspondent', {"correspondent": selectedId}).subscribe(
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm correspondent assignment"
+    let messageFragment = correspondent ? `assign the correspondent ${correspondent.name} to` : `remove all correspondents from`
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
         response => {
           modal.close()
         }
@@ -157,28 +161,18 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkRemoveCorrespondent() {
+  bulkSetDocumentType(documentType: PaperlessDocumentType[]) {
+    if (documentType.length > 0) documentType = documentType.shift()
+    else documentType = undefined
+
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Remove correspondent"
-    modal.componentInstance.message = `This operation will remove the correspondent from all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.title = "Confirm Document Type assignment"
+    let messageFragment = documentType ? `assign the document type ${documentType.name} to` : `remove all document types from`
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_correspondent', {"correspondent": null}).subscribe(r => {
-        modal.close()
-      })
-    })
-  }
-
-  bulkSetDocumentType(documentType) {
-    console.log();
-
-    let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Select document type"
-    modal.componentInstance.message = `Select the document type you wish to assign to ${this.list.selected.size} selected document(s):`
-    this.documentTypeService.listAll().subscribe(response => {
-      modal.componentInstance.objects = response.results
-    })
-    modal.componentInstance.selectClicked.subscribe(selectedId => {
-      this.executeBulkOperation('set_document_type', {"document_type": selectedId}).subscribe(
+      this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
         response => {
           modal.close()
         }
@@ -186,20 +180,9 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkRemoveDocumentType() {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Remove document type"
-    modal.componentInstance.message = `This operation will remove the document type from all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_document_type', {"document_type": null}).subscribe(r => {
-        modal.close()
-      })
-    })
-  }
-
   bulkSetTags(tags) {
     console.log('bulkSetTags', tags);
-
+    // TODO: 
   }
 
   bulkAddTag() {

From 400da7bbc5f6175b27ec2a629379b6e4c4d56384 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 07:49:32 -0800
Subject: [PATCH 13/73] Minor refactoring

---
 .../bulk-editor/bulk-editor.component.ts             |  4 ++--
 .../document-list/document-list.component.ts         | 12 +++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

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 8e6197e56..b1858e0f7 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
@@ -108,11 +108,11 @@ export class BulkEditorComponent {
   }
 
   applyCorrespondent(selectedCorrespondent: PaperlessCorrespondent[]) {
-    this.setCorrespondent.emit(selectedCorrespondent)
+    this.setCorrespondent.emit(selectedCorrespondent.length > 0 ? selectedCorrespondent.shift() : null)
   }
 
   applyDocumentType(selectedDocumentType: PaperlessDocumentType[]) {
-    this.setDocumentType.emit(selectedDocumentType)
+    this.setDocumentType.emit(selectedDocumentType.length > 0 ? selectedDocumentType.shift() : null)
   }
 
   applyDelete() {
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 15e7987fe..a08cb1fad 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -142,10 +142,7 @@ export class DocumentListComponent implements OnInit {
     )
   }
 
-  bulkSetCorrespondent(correspondent: PaperlessCorrespondent[]) {
-    if (correspondent.length > 0) correspondent = correspondent.shift()
-    else correspondent = undefined
-
+  bulkSetCorrespondent(correspondent: PaperlessCorrespondent) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm correspondent assignment"
     let messageFragment = correspondent ? `assign the correspondent ${correspondent.name} to` : `remove all correspondents from`
@@ -161,10 +158,7 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkSetDocumentType(documentType: PaperlessDocumentType[]) {
-    if (documentType.length > 0) documentType = documentType.shift()
-    else documentType = undefined
-
+  bulkSetDocumentType(documentType: PaperlessDocumentType) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Document Type assignment"
     let messageFragment = documentType ? `assign the document type ${documentType.name} to` : `remove all document types from`
@@ -182,7 +176,7 @@ export class DocumentListComponent implements OnInit {
 
   bulkSetTags(tags) {
     console.log('bulkSetTags', tags);
-    // TODO: 
+    // TODO:
   }
 
   bulkAddTag() {

From d91fa99e779366c3c892be80cb0213070787525a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 14:26:26 -0800
Subject: [PATCH 14/73] Handler for bulk set tags (awaiting API endpoint)

---
 .../document-list/document-list.component.ts   | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index a08cb1fad..3bdbc3eb8 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -174,9 +174,21 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkSetTags(tags) {
-    console.log('bulkSetTags', tags);
-    // TODO:
+  bulkSetTags(tags: PaperlessTag[]) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Tags assignment"
+    let messageFragment = tags ? `assign the tag(s) ${tags.map(t => t.name).join(', ')} to` : `remove all tags from`
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      // TODO: API endpoint for set multiple tags
+      this.executeBulkOperation('set_tags', {"document_type": tags ? tags.map(t => t.id) : null}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
   }
 
   bulkAddTag() {

From 561db8607a91099a85d690f5572af9b5f48beef5 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 15:20:07 -0800
Subject: [PATCH 15/73] Unused bulk tag functions

---
 .../document-list/document-list.component.ts  | 32 -------------------
 1 file changed, 32 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 3bdbc3eb8..7e9ce8f66 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -191,38 +191,6 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkAddTag() {
-    let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Select tag"
-    modal.componentInstance.message = `Select the tag you wish to assign to ${this.list.selected.size} selected document(s):`
-    this.tagService.listAll().subscribe(response => {
-      modal.componentInstance.objects = response.results
-    })
-    modal.componentInstance.selectClicked.subscribe(selectedId => {
-      this.executeBulkOperation('add_tag', {"tag": selectedId}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkRemoveTag() {
-    let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Select tag"
-    modal.componentInstance.message = `Select the tag you wish to remove from ${this.list.selected.size} selected document(s):`
-    this.tagService.listAll().subscribe(response => {
-      modal.componentInstance.objects = response.results
-    })
-    modal.componentInstance.selectClicked.subscribe(selectedId => {
-      this.executeBulkOperation('remove_tag', {"tag": selectedId}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
   bulkDelete() {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.delayConfirm(5)

From 9a4190bedfd8fc7747c13aa988fecbd323ac2ab0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 20:19:37 -0800
Subject: [PATCH 16/73] Rename dropdown type enum & add pass as variable to use
 like an Enum

---
 .../filterable-dropdown/filterable-dropdown.component.html  | 4 ++--
 .../filterable-dropdown/filterable-dropdown.component.ts    | 6 ++++--
 .../document-list/bulk-editor/bulk-editor.component.html    | 6 +++---
 .../document-list/bulk-editor/bulk-editor.component.ts      | 3 ++-
 4 files changed, 11 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 870ea41e4..425a290a5 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
@@ -1,12 +1,12 @@
 <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== 'actions' && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== types.Editing && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
       <svg class="toolbaricon" fill="currentColor">
         <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
       </svg>
     </div>
-    <ng-container *ngIf="type !== 'actions' && itemsSelected?.length > 0">
+    <ng-container *ngIf="type !== types.Editing && itemsSelected?.length > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
         {{itemsSelected?.length}}
       </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 4f694ed49..7463e7b19 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
@@ -19,7 +19,7 @@ export enum SelectableItemState {
 
 export enum FilterableDropdownType {
   Filtering = 'filtering',
-  Actions = 'actions'
+  Editing = 'editing'
 }
 
 @Component({
@@ -47,7 +47,7 @@ export class FilterableDropdownComponent {
 
   @Input()
   set selectableItems (selectableItems: SelectableItem[]) {
-    if (this.type == FilterableDropdownType.Actions && this.dropdown?.isOpen()) return
+    if (this.type == FilterableDropdownType.Editing && this.dropdown?.isOpen()) return
     else this._selectableItems = selectableItems
   }
 
@@ -75,6 +75,8 @@ export class FilterableDropdownComponent {
   @Input()
   type: FilterableDropdownType = FilterableDropdownType.Filtering
 
+  types = FilterableDropdownType
+
   @Input()
   singular: boolean = false
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index e7db0b284..859876a67 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -26,9 +26,9 @@
   <div class="col mb-2 mb-xl-0">
     <div class="d-flex">
       <label class="ml-auto mt-1 mr-2">Apply:</label>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" type="actions" (close)="applyTags($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" type="actions" singular="true" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" type="actions" singular="true" (close)="applyDocumentType($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" [type]="dropdownTypes.Editing" (close)="applyTags($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" [type]="dropdownTypes.Editing" singular="true" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" [type]="dropdownTypes.Editing" singular="true" (close)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
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 b1858e0f7..d6f0fc1c7 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
@@ -7,7 +7,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { SelectableItem, SelectableItemState } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { SelectableItem, SelectableItemState, FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 
 @Component({
   selector: 'app-bulk-editor',
@@ -47,6 +47,7 @@ export class BulkEditorComponent {
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
+  dropdownTypes = FilterableDropdownType
   get tagsSelectableItems(): SelectableItem[] {
     let tagsSelectableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))

From 1da652ba4d50b562d3e69fd4f48ddd467d204a3f Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 21:42:19 -0800
Subject: [PATCH 17/73] Only apply edits when something has changed

---
 .../filterable-dropdown.component.ts          | 16 ++++---
 .../bulk-editor/bulk-editor.component.html    |  6 +--
 .../bulk-editor/bulk-editor.component.ts      | 47 +++++++++++++++----
 3 files changed, 51 insertions(+), 18 deletions(-)

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 7463e7b19..2d224567f 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
@@ -37,7 +37,7 @@ export class FilterableDropdownComponent {
   @Input()
   set items(items: ObjectWithId[]) {
     if (items) {
-      this.selectableItems = items.map(i => {
+      this._selectableItems = items.map(i => {
         return {item: i, state: SelectableItemState.NotSelected}
       })
     }
@@ -84,15 +84,16 @@ export class FilterableDropdownComponent {
   toggle = new EventEmitter()
 
   @Output()
-  close = new EventEmitter()
+  open = new EventEmitter()
+
+  @Output()
+  editingComplete = new EventEmitter()
 
   constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(selectableItem: SelectableItem): void {
     if (this.singular && selectableItem.state == SelectableItemState.Selected) {
-      this._selectableItems.forEach(si => {
-        if (si.state == SelectableItemState.Selected && si.item.id !== selectableItem.item.id) si.state = SelectableItemState.NotSelected
-      })
+      this._selectableItems.filter(si => si.item.id !== selectableItem.item.id).forEach(si => si.state = SelectableItemState.NotSelected)
     }
     this.toggle.emit(selectableItem.item)
   }
@@ -101,10 +102,11 @@ export class FilterableDropdownComponent {
     if (open) {
       setTimeout(() => {
         this.listFilterTextInput.nativeElement.focus();
-      }, 0);
+      }, 0)
+      this.open.next()
     } else {
       this.filterText = ''
-      this.close.emit(this.itemsSelected)
+      if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.itemsSelected)
     }
   }
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 859876a67..4f79a6c3e 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -26,9 +26,9 @@
   <div class="col mb-2 mb-xl-0">
     <div class="d-flex">
       <label class="ml-auto mt-1 mr-2">Apply:</label>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" [type]="dropdownTypes.Editing" (close)="applyTags($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" [type]="dropdownTypes.Editing" singular="true" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" [type]="dropdownTypes.Editing" singular="true" (close)="applyDocumentType($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" [type]="dropdownTypes.Editing" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" [type]="dropdownTypes.Editing" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" [type]="dropdownTypes.Editing" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
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 d6f0fc1c7..54ecb6d0a 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
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } 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';
@@ -47,7 +48,12 @@ export class BulkEditorComponent {
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
+  private _initialTagsSelectableItems: SelectableItem[]
+  private _initialCorrespondentsSelectableItems: SelectableItem[]
+  private _initialDocumentTypesSelectableItems: SelectableItem[]
+
   dropdownTypes = FilterableDropdownType
+
   get tagsSelectableItems(): SelectableItem[] {
     let tagsSelectableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
@@ -72,7 +78,6 @@ export class BulkEditorComponent {
       else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
       correspondentsSelectableItems.push( { item: c, state: state } )
     })
-
     return correspondentsSelectableItems
   }
 
@@ -87,7 +92,6 @@ export class BulkEditorComponent {
       else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
       documentTypesSelectableItems.push( { item: dt, state: state } )
     })
-
     return documentTypesSelectableItems
   }
 
@@ -104,16 +108,43 @@ export class BulkEditorComponent {
     this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
   }
 
-  applyTags(tags: PaperlessTag[]) {
-    this.setTags.emit(tags)
+  tagsDropdownOpen() {
+    this._initialTagsSelectableItems = this.tagsSelectableItems
   }
 
-  applyCorrespondent(selectedCorrespondent: PaperlessCorrespondent[]) {
-    this.setCorrespondent.emit(selectedCorrespondent.length > 0 ? selectedCorrespondent.shift() : null)
+  correspondentsDropdownOpen() {
+    this._initialCorrespondentsSelectableItems = this.correspondentsSelectableItems
   }
 
-  applyDocumentType(selectedDocumentType: PaperlessDocumentType[]) {
-    this.setDocumentType.emit(selectedDocumentType.length > 0 ? selectedDocumentType.shift() : null)
+  documentTypesDropdownOpen() {
+    this._initialDocumentTypesSelectableItems = this.documentTypesSelectableItems
+  }
+
+  applyTags(selectedTags: PaperlessTag[]) {
+    let initiallySelectedSelectableTags = this._initialTagsSelectableItems.filter(tsi => tsi.state == SelectableItemState.Selected)
+    let unchanged = this.equateItemsToSelectableItems(selectedTags, initiallySelectedSelectableTags)
+    if (!unchanged) this.setTags.emit(selectedTags)
+    this._initialTagsSelectableItems = null
+  }
+
+  applyCorrespondent(selectedCorrespondents: PaperlessCorrespondent[]) {
+    let initiallySelectedSelectableCorrespondents = this._initialCorrespondentsSelectableItems.filter(csi => csi.state == SelectableItemState.Selected)
+    let unchanged = this.equateItemsToSelectableItems(selectedCorrespondents, initiallySelectedSelectableCorrespondents)
+    if (!unchanged) this.setCorrespondent.emit(selectedCorrespondents?.length > 0 ? selectedCorrespondents.shift() : null)
+    this._initialCorrespondentsSelectableItems = null
+  }
+
+  applyDocumentType(selectedDocumentTypes: PaperlessDocumentType[]) {
+    let initiallySelectedSelectableDocumentTypes = this._initialDocumentTypesSelectableItems.filter(dtsi => dtsi.state == SelectableItemState.Selected)
+    let unchanged = this.equateItemsToSelectableItems(selectedDocumentTypes, initiallySelectedSelectableDocumentTypes)
+    if (!unchanged) this.setDocumentType.emit(selectedDocumentTypes.length > 0 ? selectedDocumentTypes.shift() : null)
+    this._initialDocumentTypesSelectableItems = null
+  }
+
+  equateItemsToSelectableItems(items: ObjectWithId[], selectableItems: SelectableItem[]): boolean {
+    // either both empty or all items must in selectableItems and vice-versa
+    return (selectableItems.length == 0 && items.length == 0) ||
+           (items.every(i => selectableItems.find(si => si.item.id == i.id) !== undefined) && selectableItems.every(si => items.find(i => i.id == si.item.id) !== undefined))
   }
 
   applyDelete() {

From fd6bfd02ce92f8a060c4b2239dd943a4e0a60994 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 21:45:53 -0800
Subject: [PATCH 18/73] SelectableItem dropdowns refactoring

---
 .../bulk-editor/bulk-editor.component.ts      | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

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 54ecb6d0a..7ba134e15 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
@@ -48,9 +48,9 @@ export class BulkEditorComponent {
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
-  private _initialTagsSelectableItems: SelectableItem[]
-  private _initialCorrespondentsSelectableItems: SelectableItem[]
-  private _initialDocumentTypesSelectableItems: SelectableItem[]
+  private initiallySelectedTagsSelectableItems: SelectableItem[]
+  private initiallySelectedCorrespondentsSelectableItems: SelectableItem[]
+  private initiallySelectedDocumentTypesSelectableItems: SelectableItem[]
 
   dropdownTypes = FilterableDropdownType
 
@@ -109,36 +109,33 @@ export class BulkEditorComponent {
   }
 
   tagsDropdownOpen() {
-    this._initialTagsSelectableItems = this.tagsSelectableItems
+    this.initiallySelectedTagsSelectableItems = this.tagsSelectableItems.filter(tsi => tsi.state == SelectableItemState.Selected)
   }
 
   correspondentsDropdownOpen() {
-    this._initialCorrespondentsSelectableItems = this.correspondentsSelectableItems
+    this.initiallySelectedCorrespondentsSelectableItems = this.correspondentsSelectableItems.filter(csi => csi.state == SelectableItemState.Selected)
   }
 
   documentTypesDropdownOpen() {
-    this._initialDocumentTypesSelectableItems = this.documentTypesSelectableItems
+    this.initiallySelectedDocumentTypesSelectableItems = this.documentTypesSelectableItems.filter(dtsi => dtsi.state == SelectableItemState.Selected)
   }
 
   applyTags(selectedTags: PaperlessTag[]) {
-    let initiallySelectedSelectableTags = this._initialTagsSelectableItems.filter(tsi => tsi.state == SelectableItemState.Selected)
-    let unchanged = this.equateItemsToSelectableItems(selectedTags, initiallySelectedSelectableTags)
+    let unchanged = this.equateItemsToSelectableItems(selectedTags, this.initiallySelectedTagsSelectableItems)
     if (!unchanged) this.setTags.emit(selectedTags)
-    this._initialTagsSelectableItems = null
+    this.initiallySelectedTagsSelectableItems = null
   }
 
   applyCorrespondent(selectedCorrespondents: PaperlessCorrespondent[]) {
-    let initiallySelectedSelectableCorrespondents = this._initialCorrespondentsSelectableItems.filter(csi => csi.state == SelectableItemState.Selected)
-    let unchanged = this.equateItemsToSelectableItems(selectedCorrespondents, initiallySelectedSelectableCorrespondents)
+    let unchanged = this.equateItemsToSelectableItems(selectedCorrespondents, this.initiallySelectedCorrespondentsSelectableItems)
     if (!unchanged) this.setCorrespondent.emit(selectedCorrespondents?.length > 0 ? selectedCorrespondents.shift() : null)
-    this._initialCorrespondentsSelectableItems = null
+    this.initiallySelectedCorrespondentsSelectableItems = null
   }
 
   applyDocumentType(selectedDocumentTypes: PaperlessDocumentType[]) {
-    let initiallySelectedSelectableDocumentTypes = this._initialDocumentTypesSelectableItems.filter(dtsi => dtsi.state == SelectableItemState.Selected)
-    let unchanged = this.equateItemsToSelectableItems(selectedDocumentTypes, initiallySelectedSelectableDocumentTypes)
+    let unchanged = this.equateItemsToSelectableItems(selectedDocumentTypes, this.initiallySelectedDocumentTypesSelectableItems)
     if (!unchanged) this.setDocumentType.emit(selectedDocumentTypes.length > 0 ? selectedDocumentTypes.shift() : null)
-    this._initialDocumentTypesSelectableItems = null
+    this.initiallySelectedDocumentTypesSelectableItems = null
   }
 
   equateItemsToSelectableItems(items: ObjectWithId[], selectableItems: SelectableItem[]): boolean {

From 638109338689931207e2aa9d623b30f5a0773779 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 21:52:45 -0800
Subject: [PATCH 19/73] Refactor SlectableItem to ToggleableItem

---
 .../filterable-dropdown-button.component.ts   | 14 ++--
 .../filterable-dropdown.component.html        |  6 +-
 .../filterable-dropdown.component.ts          | 36 ++++-----
 .../bulk-editor/bulk-editor.component.html    |  6 +-
 .../bulk-editor/bulk-editor.component.ts      | 76 +++++++++----------
 src-ui/src/app/pipes/filter.pipe.ts           | 14 ++--
 6 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
index a928d715e..b0ced21cc 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
+++ b/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
   }
 }
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 425a290a5..052bca03d 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
@@ -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>
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 2d224567f..76b588be5 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
@@ -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()
   }
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 4f79a6c3e..58ca5e5a7 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -26,9 +26,9 @@
   <div class="col mb-2 mb-xl-0">
     <div class="d-flex">
       <label class="ml-auto mt-1 mr-2">Apply:</label>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" [type]="dropdownTypes.Editing" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" [type]="dropdownTypes.Editing" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" [type]="dropdownTypes.Editing" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
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 7ba134e15..2e6edbb71 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
@@ -8,7 +8,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { SelectableItem, SelectableItemState, FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItem, ToggleableItemState, FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 
 @Component({
   selector: 'app-bulk-editor',
@@ -48,51 +48,51 @@ export class BulkEditorComponent {
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
-  private initiallySelectedTagsSelectableItems: SelectableItem[]
-  private initiallySelectedCorrespondentsSelectableItems: SelectableItem[]
-  private initiallySelectedDocumentTypesSelectableItems: SelectableItem[]
+  private initiallySelectedTagsToggleableItems: ToggleableItem[]
+  private initiallySelectedCorrespondentsToggleableItems: ToggleableItem[]
+  private initiallySelectedDocumentTypesToggleableItems: ToggleableItem[]
 
   dropdownTypes = FilterableDropdownType
 
-  get tagsSelectableItems(): SelectableItem[] {
-    let tagsSelectableItems = []
+  get tagsToggleableItems(): ToggleableItem[] {
+    let tagsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
     this.tags.forEach(t => {
       let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
-      let state = SelectableItemState.NotSelected
-      if (selectedDocumentsWithTag.length == selectedDocuments.length) state = SelectableItemState.Selected
-      else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
-      tagsSelectableItems.push( { item: t, state: state } )
+      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 } )
     })
-    return tagsSelectableItems
+    return tagsToggleableItems
   }
 
-  get correspondentsSelectableItems(): SelectableItem[] {
-    let correspondentsSelectableItems = []
+  get correspondentsToggleableItems(): ToggleableItem[] {
+    let correspondentsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
 
     this.correspondents.forEach(c => {
       let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
-      let state = SelectableItemState.NotSelected
-      if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = SelectableItemState.Selected
-      else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
-      correspondentsSelectableItems.push( { item: c, state: state } )
+      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 } )
     })
-    return correspondentsSelectableItems
+    return correspondentsToggleableItems
   }
 
-  get documentTypesSelectableItems(): SelectableItem[] {
-    let documentTypesSelectableItems = []
+  get documentTypesToggleableItems(): ToggleableItem[] {
+    let documentTypesToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
 
     this.documentTypes.forEach(dt => {
       let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)
-      let state = SelectableItemState.NotSelected
-      if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = SelectableItemState.Selected
-      else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = SelectableItemState.PartiallySelected
-      documentTypesSelectableItems.push( { item: dt, state: state } )
+      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 } )
     })
-    return documentTypesSelectableItems
+    return documentTypesToggleableItems
   }
 
   constructor(
@@ -109,39 +109,39 @@ export class BulkEditorComponent {
   }
 
   tagsDropdownOpen() {
-    this.initiallySelectedTagsSelectableItems = this.tagsSelectableItems.filter(tsi => tsi.state == SelectableItemState.Selected)
+    this.initiallySelectedTagsToggleableItems = this.tagsToggleableItems.filter(tsi => tsi.state == ToggleableItemState.Selected)
   }
 
   correspondentsDropdownOpen() {
-    this.initiallySelectedCorrespondentsSelectableItems = this.correspondentsSelectableItems.filter(csi => csi.state == SelectableItemState.Selected)
+    this.initiallySelectedCorrespondentsToggleableItems = this.correspondentsToggleableItems.filter(csi => csi.state == ToggleableItemState.Selected)
   }
 
   documentTypesDropdownOpen() {
-    this.initiallySelectedDocumentTypesSelectableItems = this.documentTypesSelectableItems.filter(dtsi => dtsi.state == SelectableItemState.Selected)
+    this.initiallySelectedDocumentTypesToggleableItems = this.documentTypesToggleableItems.filter(dtsi => dtsi.state == ToggleableItemState.Selected)
   }
 
   applyTags(selectedTags: PaperlessTag[]) {
-    let unchanged = this.equateItemsToSelectableItems(selectedTags, this.initiallySelectedTagsSelectableItems)
+    let unchanged = this.equateItemsToToggleableItems(selectedTags, this.initiallySelectedTagsToggleableItems)
     if (!unchanged) this.setTags.emit(selectedTags)
-    this.initiallySelectedTagsSelectableItems = null
+    this.initiallySelectedTagsToggleableItems = null
   }
 
   applyCorrespondent(selectedCorrespondents: PaperlessCorrespondent[]) {
-    let unchanged = this.equateItemsToSelectableItems(selectedCorrespondents, this.initiallySelectedCorrespondentsSelectableItems)
+    let unchanged = this.equateItemsToToggleableItems(selectedCorrespondents, this.initiallySelectedCorrespondentsToggleableItems)
     if (!unchanged) this.setCorrespondent.emit(selectedCorrespondents?.length > 0 ? selectedCorrespondents.shift() : null)
-    this.initiallySelectedCorrespondentsSelectableItems = null
+    this.initiallySelectedCorrespondentsToggleableItems = null
   }
 
   applyDocumentType(selectedDocumentTypes: PaperlessDocumentType[]) {
-    let unchanged = this.equateItemsToSelectableItems(selectedDocumentTypes, this.initiallySelectedDocumentTypesSelectableItems)
+    let unchanged = this.equateItemsToToggleableItems(selectedDocumentTypes, this.initiallySelectedDocumentTypesToggleableItems)
     if (!unchanged) this.setDocumentType.emit(selectedDocumentTypes.length > 0 ? selectedDocumentTypes.shift() : null)
-    this.initiallySelectedDocumentTypesSelectableItems = null
+    this.initiallySelectedDocumentTypesToggleableItems = null
   }
 
-  equateItemsToSelectableItems(items: ObjectWithId[], selectableItems: SelectableItem[]): boolean {
-    // either both empty or all items must in selectableItems and vice-versa
-    return (selectableItems.length == 0 && items.length == 0) ||
-           (items.every(i => selectableItems.find(si => si.item.id == i.id) !== undefined) && selectableItems.every(si => items.find(i => i.id == si.item.id) !== undefined))
+  equateItemsToToggleableItems(items: ObjectWithId[], toggleableItems: ToggleableItem[]): boolean {
+    // either both empty or all items must in toggleableItems and vice-versa
+    return (toggleableItems.length == 0 && items.length == 0) ||
+           (items.every(i => toggleableItems.find(si => si.item.id == i.id) !== undefined) && toggleableItems.every(si => items.find(i => i.id == si.item.id) !== undefined))
   }
 
   applyDelete() {
diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts
index 51d1924b8..1ea10c56e 100644
--- a/src-ui/src/app/pipes/filter.pipe.ts
+++ b/src-ui/src/app/pipes/filter.pipe.ts
@@ -1,17 +1,17 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { SelectableItem } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 
 @Pipe({
   name: 'filter'
 })
 export class FilterPipe implements PipeTransform {
-  transform(selectableItems: SelectableItem[], searchText: string): any[] {
-    if (!selectableItems) return [];
-    if (!searchText) return selectableItems;
+  transform(toggleableItems: ToggleableItem[], searchText: string): any[] {
+    if (!toggleableItems) return [];
+    if (!searchText) return toggleableItems;
 
-    return selectableItems.filter(selectableItem => {
-      return Object.keys(selectableItem.item).some(key => {
-        return String(selectableItem.item[key]).toLowerCase().includes(searchText.toLowerCase());
+    return toggleableItems.filter(toggleableItem => {
+      return Object.keys(toggleableItem.item).some(key => {
+        return String(toggleableItem.item[key]).toLowerCase().includes(searchText.toLowerCase());
       });
     });
    }

From de6ba3489a929408c1fae41fd2a6a44547299979 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 21:56:31 -0800
Subject: [PATCH 20/73] Cleanup dropdown button component

---
 .../filterable-dropdown-button.component.html        |  6 +++---
 .../filterable-dropdown-button.component.ts          | 12 +++---------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
index 5b58025d1..75dadba53 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
@@ -5,8 +5,8 @@
     </svg>
   </div>
   <div class="mr-1">
-    <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>
+    <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">{{item.document_count}}</div>
+  <div class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.item.document_count}}</div>
 </button>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
index b0ced21cc..3486bdb46 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
@@ -9,22 +9,16 @@ import { ToggleableItem, ToggleableItemState } from '../filterable-dropdown.comp
   templateUrl: './filterable-dropdown-button.component.html',
   styleUrls: ['./filterable-dropdown-button.component.scss']
 })
-export class FilterableDropdownButtonComponent implements OnInit {
+export class FilterableDropdownButtonComponent {
 
   @Input()
   toggleableItem: ToggleableItem
 
-  get item(): PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent {
-    return this.toggleableItem?.item
-  }
-
   @Output()
   toggle = new EventEmitter()
 
-  isTag: boolean
-
-  ngOnInit() {
-    this.isTag = 'is_inbox_tag' in this.item // ~ this.item instanceof PaperlessTag
+  get isTag(): boolean {
+    return 'is_inbox_tag' in this.toggleableItem?.item // ~ this.item instanceof PaperlessTag
   }
 
   toggleItem(): void {

From ee4e026ba2c882c5b4d5f3b3985c25d0f7fd7277 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 22:06:17 -0800
Subject: [PATCH 21/73] rework toolbar

---
 .../bulk-editor/bulk-editor.component.html    | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 58ca5e5a7..746dd9569 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,5 +1,13 @@
 <div class="row">
-  <div class="col mb-2 mb-xl-0" role="group" aria-label="Select">
+  <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
+    <button class="btn btn-sm btn-outline-danger" (click)="selectNone.next()">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
+      </svg>
+      Cancel
+    </button>
+  </div>
+  <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
     <label class="mr-lg-2">Select:</label>
     <div class="btn-group">
       <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
@@ -14,26 +22,20 @@
         </svg>
         All
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="selectNone.next()">
-        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
-        </svg>
-        None
-      </button>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
-  <div class="col mb-2 mb-xl-0">
+  <div class="col-auto mb-2 mb-xl-0">
     <div class="d-flex">
-      <label class="ml-auto mt-1 mr-2">Apply:</label>
+      <label class="ml-auto mt-1 mr-2">Edit:</label>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
-  <div class="col-auto mb-2 mb-xl-0">
-    <button type="button" class="btn btn-sm btn-outline-danger " (click)="applyDelete()">
+  <div class="col mb-2 mb-xl-0 d-flex">
+    <button type="button" class="btn btn-sm btn-outline-danger ml-auto" (click)="applyDelete()">
       <svg class="buttonicon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />
       </svg>

From 39b35c090b4e88e714059c0918e4741a6c55a3a2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 22:14:52 -0800
Subject: [PATCH 22/73] Hide filter / bulk editor for better switching

---
 .../document-list/bulk-editor/bulk-editor.component.ts      | 6 +++---
 .../components/document-list/document-list.component.html   | 4 ++--
 .../app/components/document-list/document-list.component.ts | 3 +++
 3 files changed, 8 insertions(+), 5 deletions(-)

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 2e6edbb71..5b9a4ff38 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
@@ -57,7 +57,7 @@ export class BulkEditorComponent {
   get tagsToggleableItems(): ToggleableItem[] {
     let tagsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
-    this.tags.forEach(t => {
+    this.tags?.forEach(t => {
       let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
       let state = ToggleableItemState.NotSelected
       if (selectedDocumentsWithTag.length == selectedDocuments.length) state = ToggleableItemState.Selected
@@ -71,7 +71,7 @@ export class BulkEditorComponent {
     let correspondentsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
 
-    this.correspondents.forEach(c => {
+    this.correspondents?.forEach(c => {
       let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
       let state = ToggleableItemState.NotSelected
       if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = ToggleableItemState.Selected
@@ -85,7 +85,7 @@ export class BulkEditorComponent {
     let documentTypesToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
 
-    this.documentTypes.forEach(dt => {
+    this.documentTypes?.forEach(dt => {
       let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)
       let state = ToggleableItemState.NotSelected
       if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = ToggleableItemState.Selected
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index b32ff52f7..7032325e4 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -78,9 +78,9 @@
 </app-page-header>
 
 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 
-  <app-bulk-editor *ngIf="isBulkEditing"
+  <app-bulk-editor [hidden]="!isBulkEditing"
     [allDocuments]="list.documents"
     [(selectedDocuments)]="list.selected"
     (selectPage)="list.selectPage()"
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 7e9ce8f66..4ed6946e3 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -119,14 +119,17 @@ export class DocumentListComponent implements OnInit {
   }
 
   clickTag(tagID: number) {
+    this.list.selectNone()
     this.filterEditor.toggleTag(tagID)
   }
 
   clickCorrespondent(correspondentID: number) {
+    this.list.selectNone()
     this.filterEditor.toggleCorrespondent(correspondentID)
   }
 
   clickDocumentType(documentTypeID: number) {
+    this.list.selectNone()
     this.filterEditor.toggleDocumentType(documentTypeID)
   }
 

From 7dfcc7f47bc5204c20dd51120ee06a2ce564733a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 22:31:14 -0800
Subject: [PATCH 23/73] Refactor dropdown button component

---
 src-ui/src/app/app.module.ts                  |  4 +--
 ...lterable-dropdown-button.component.spec.ts | 25 -------------------
 .../filterable-dropdown.component.html        |  2 +-
 .../filterable-dropdown.component.ts          | 12 +--------
 ...toggleable-dropdown-button.component.html} |  0
 ...toggleable-dropdown-button.component.scss} |  0
 ...ggleable-dropdown-button.component.spec.ts | 25 +++++++++++++++++++
 .../toggleable-dropdown-button.component.ts}  | 20 +++++++++++----
 .../bulk-editor/bulk-editor.component.ts      |  3 ++-
 src-ui/src/app/pipes/filter.pipe.ts           |  2 +-
 10 files changed, 47 insertions(+), 46 deletions(-)
 delete mode 100644 src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
 rename src-ui/src/app/components/common/filterable-dropdown/{filterable-dropdown-button/filterable-dropdown-button.component.html => toggleable-dropdown-button/toggleable-dropdown-button.component.html} (100%)
 rename src-ui/src/app/components/common/filterable-dropdown/{filterable-dropdown-button/filterable-dropdown-button.component.scss => toggleable-dropdown-button/toggleable-dropdown-button.component.scss} (100%)
 create mode 100644 src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
 rename src-ui/src/app/components/common/filterable-dropdown/{filterable-dropdown-button/filterable-dropdown-button.component.ts => toggleable-dropdown-button/toggleable-dropdown-button.component.ts} (70%)

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 97c547038..c78dc3cfe 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -28,7 +28,7 @@ import { AppFrameComponent } from './components/app-frame/app-frame.component';
 import { ToastsComponent } from './components/common/toasts/toasts.component';
 import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component';
 import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component';
-import { FilterableDropdownButtonComponent } from './components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component';
+import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 import { DateDropdownComponent } from './components/common/date-dropdown/date-dropdown.component';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
@@ -82,7 +82,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
     ToastsComponent,
     FilterEditorComponent,
     FilterableDropdownComponent,
-    FilterableDropdownButtonComponent,
+    ToggleableDropdownButtonComponent,
     DateDropdownComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
deleted file mode 100644
index c7f0b3293..000000000
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FilterableDropodownButtonComponent } from './filterable-dropdown-button.component';
-
-describe('FilterableDropodownButtonComponent', () => {
-  let component: FilterableDropodownButtonComponent;
-  let fixture: ComponentFixture<FilterableDropodownButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FilterableDropodownButtonComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FilterableDropodownButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
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 052bca03d..9bc525684 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-filterable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></app-filterable-dropdown-button>
+          <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" (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 76b588be5..dc1139783 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
@@ -5,17 +5,7 @@ import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 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 ToggleableItem {
-  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
-  state: ToggleableItemState
-}
-
-export enum ToggleableItemState {
-  NotSelected = 0,
-  Selected = 1,
-  PartiallySelected = 2
-}
+import { ToggleableItem, ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 export enum FilterableDropdownType {
   Filtering = 'filtering',
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
similarity index 100%
rename from src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
similarity index 100%
rename from src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss
rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
new file mode 100644
index 000000000..ec2868d7c
--- /dev/null
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToggleableDropdownButtonComponent } from './toggleable-dropdown-button.component';
+
+describe('ToggleableDropdownButtonComponent', () => {
+  let component: ToggleableDropdownButtonComponent;
+  let fixture: ComponentFixture<ToggleableDropdownButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ToggleableDropdownButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToggleableDropdownButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
similarity index 70%
rename from src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
index 3486bdb46..7c9c02a49 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
@@ -2,14 +2,24 @@ 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 { ToggleableItem, ToggleableItemState } from '../filterable-dropdown.component';
+
+export interface ToggleableItem {
+  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
+  state: ToggleableItemState
+}
+
+export enum ToggleableItemState {
+  NotSelected = 0,
+  Selected = 1,
+  PartiallySelected = 2
+}
 
 @Component({
-  selector: 'app-filterable-dropdown-button',
-  templateUrl: './filterable-dropdown-button.component.html',
-  styleUrls: ['./filterable-dropdown-button.component.scss']
+  selector: 'app-toggleable-dropdown-button',
+  templateUrl: './toggleable-dropdown-button.component.html',
+  styleUrls: ['./toggleable-dropdown-button.component.scss']
 })
-export class FilterableDropdownButtonComponent {
+export class ToggleableDropdownButtonComponent {
 
   @Input()
   toggleableItem: ToggleableItem
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 5b9a4ff38..21355fe4c 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
@@ -8,7 +8,8 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { ToggleableItem, ToggleableItemState, FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 @Component({
   selector: 'app-bulk-editor',
diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts
index 1ea10c56e..a982e9019 100644
--- a/src-ui/src/app/pipes/filter.pipe.ts
+++ b/src-ui/src/app/pipes/filter.pipe.ts
@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 @Pipe({
   name: 'filter'

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 24/73] 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
   }

From 86da578774b62d638dd55e32e8b88dc954d83346 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 23:42:08 -0800
Subject: [PATCH 25/73] Hide toggled state & counts when selection spans
 documents not in view

---
 .../filterable-dropdown.component.ts          |  9 ++++-
 .../bulk-editor/bulk-editor.component.html    |  6 ++--
 .../bulk-editor/bulk-editor.component.ts      | 36 +++++++++++--------
 .../document-list.component.html              |  2 +-
 4 files changed, 34 insertions(+), 19 deletions(-)

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 a5dadc603..9a2c3cfc0 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
@@ -78,8 +78,15 @@ export class FilterableDropdownComponent {
   @Output()
   editingComplete = new EventEmitter()
 
+  _showCounts: boolean = true
+
+  @Input
+  set showCounts(show: boolean) {
+    this._showCounts = show
+  }
+
   get showCounts(): boolean {
-    return this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0)
+    return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0))
   }
 
   constructor(private filterPipe: FilterPipe) { }
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 746dd9569..77d171656 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -28,9 +28,9 @@
   <div class="col-auto mb-2 mb-xl-0">
     <div class="d-flex">
       <label class="ml-auto mt-1 mr-2">Edit:</label>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
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 af6934e32..c8c05a327 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
@@ -22,7 +22,7 @@ export class BulkEditorComponent {
   selectedDocuments: Set<number>
 
   @Input()
-  allDocuments: PaperlessDocument[]
+  viewDocuments: PaperlessDocument[]
 
   @Output()
   selectPage = new EventEmitter()
@@ -45,53 +45,61 @@ export class BulkEditorComponent {
   @Output()
   delete = new EventEmitter()
 
-  tags: PaperlessTag[]
-  correspondents: PaperlessCorrespondent[]
-  documentTypes: PaperlessDocumentType[]
+  private tags: PaperlessTag[]
+  private correspondents: PaperlessCorrespondent[]
+  private documentTypes: PaperlessDocumentType[]
 
   private initiallySelectedTagsToggleableItems: ToggleableItem[]
   private initiallySelectedCorrespondentsToggleableItems: ToggleableItem[]
   private initiallySelectedDocumentTypesToggleableItems: ToggleableItem[]
 
-  dropdownTypes = FilterableDropdownType
+  private dropdownTypes = FilterableDropdownType
+
+  get selectionSpansPages(): boolean {
+    return this.selectedDocuments.length > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd))
+  }
 
   get tagsToggleableItems(): ToggleableItem[] {
     let tagsToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
+    let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
+    if (this.selectionSpansPages) selectedDocuments = []
+
     this.tags?.forEach(t => {
       let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
       let state = ToggleableItemState.NotSelected
-      if (selectedDocumentsWithTag.length == selectedDocuments.length) state = ToggleableItemState.Selected
+      if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithTag.length } )
+      tagsToggleableItems.push({item: t, state: state, count: selectedDocumentsWithTag.length})
     })
     return tagsToggleableItems
   }
 
   get correspondentsToggleableItems(): ToggleableItem[] {
     let correspondentsToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
+    let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
+    if (this.selectionSpansPages) selectedDocuments = []
 
     this.correspondents?.forEach(c => {
       let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
       let state = ToggleableItemState.NotSelected
-      if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = ToggleableItemState.Selected
+      if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithCorrespondent.length } )
+      correspondentsToggleableItems.push({item: c, state: state, count: selectedDocumentsWithCorrespondent.length})
     })
     return correspondentsToggleableItems
   }
 
   get documentTypesToggleableItems(): ToggleableItem[] {
     let documentTypesToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))
+    let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
+    if (this.selectionSpansPages) selectedDocuments = []
 
     this.documentTypes?.forEach(dt => {
       let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)
       let state = ToggleableItemState.NotSelected
-      if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = ToggleableItemState.Selected
+      if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithDocumentType.length } )
+      documentTypesToggleableItems.push({item: dt, state: state, count: selectedDocumentsWithDocumentType.length})
     })
     return documentTypesToggleableItems
   }
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 7032325e4..dc1902a24 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -81,7 +81,7 @@
   <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 
   <app-bulk-editor [hidden]="!isBulkEditing"
-    [allDocuments]="list.documents"
+    [viewDocuments]="list.documents"
     [(selectedDocuments)]="list.selected"
     (selectPage)="list.selectPage()"
     (selectAll)="list.selectAll()"

From 2e44c18cdb17fb75d3588249a8c573bd406b914b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 23:44:33 -0800
Subject: [PATCH 26/73] Show 's' when needed instead of (s) on document list

---
 .../app/components/document-list/document-list.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index dc1902a24..699f13840 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -94,7 +94,7 @@
 </div>
 
 <div class="d-flex justify-content-between align-items-center">
-  <p><span *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of </span>{{list.collectionSize || 0}} document(s) <span *ngIf="isFiltered">(filtered)</span></p>
+  <p><span *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of </span>{{list.collectionSize || 0}} document{{list.collectionSize > 1 ? 's' : ''}} <span *ngIf="isFiltered">(filtered)</span></p>
   <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
   [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>

From 7669679fb17555e3dd5785a52ef10bcd28e75e4d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 23:49:20 -0800
Subject: [PATCH 27/73] Mobile fixes

---
 .../document-list/bulk-editor/bulk-editor.component.html   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 77d171656..d15b45d0f 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -7,8 +7,9 @@
       Cancel
     </button>
   </div>
+  <div class="w-100 d-xl-none"></div>
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
-    <label class="mr-lg-2">Select:</label>
+    <label class="mr-2">Select:</label>
     <div class="btn-group">
       <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
@@ -35,11 +36,11 @@
   </div>
   <div class="w-100 d-xl-none"></div>
   <div class="col mb-2 mb-xl-0 d-flex">
-    <button type="button" class="btn btn-sm btn-outline-danger ml-auto" (click)="applyDelete()">
+    <button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
       <svg class="buttonicon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />
       </svg>
-      <span class="d-none d-lg-inline"> Delete</span>
+      Delete
     </button>
   </div>
 </div>

From 3561935e1b8d5906f2a477bbf08d2a47f1dffc48 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 20 Dec 2020 00:12:40 -0800
Subject: [PATCH 28/73] Fix some TS syntax errors

---
 .../filterable-dropdown.component.ts          | 20 +++++++++++--------
 .../bulk-editor/bulk-editor.component.ts      | 10 +++++-----
 2 files changed, 17 insertions(+), 13 deletions(-)

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 9a2c3cfc0..10713cc00 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
@@ -52,7 +52,7 @@ export class FilterableDropdownComponent {
   }
 
   get itemsSelected() :(PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[] {
-    return this.toggleableItems.filter(si => si.state == ToggleableItemState.Selected).map(si => si.item)
+    return this.toggleableItems.filter(ti => ti.state == ToggleableItemState.Selected).map(ti => ti.item)
   }
 
   @Input()
@@ -67,7 +67,7 @@ export class FilterableDropdownComponent {
   types = FilterableDropdownType
 
   @Input()
-  singular: boolean = false
+  tingular: boolean = false
 
   @Output()
   toggle = new EventEmitter()
@@ -80,20 +80,20 @@ export class FilterableDropdownComponent {
 
   _showCounts: boolean = true
 
-  @Input
+  @Input()
   set showCounts(show: boolean) {
     this._showCounts = show
   }
 
   get showCounts(): boolean {
-    return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0))
+    return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected.length == 0))
   }
 
   constructor(private filterPipe: FilterPipe) { }
 
   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)
+    if (this.tingular && toggleableItem.state == ToggleableItemState.Selected) {
+      this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
     }
     this.toggle.emit(toggleableItem.item)
   }
@@ -112,7 +112,11 @@ export class FilterableDropdownComponent {
 
   listFilterEnter(): void {
     let filtered = this.filterPipe.transform(this.toggleableItems, this.filterText)
-    if (filtered.length == 1) this.toggleItem(filtered.shift())
-    this.dropdown.close()
+    if (filtered.length == 1) {
+      let toggleableItem = this.toggleableItems.find(ti => ti.item.id == filtered[0].item.id)
+      if (toggleableItem) toggleableItem.state = ToggleableItemState.Selected
+      this.toggleItem(filtered[0])
+      this.dropdown.close()
+    }
   }
 }
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 c8c05a327..66ad265de 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
@@ -45,18 +45,18 @@ export class BulkEditorComponent {
   @Output()
   delete = new EventEmitter()
 
-  private tags: PaperlessTag[]
-  private correspondents: PaperlessCorrespondent[]
-  private documentTypes: PaperlessDocumentType[]
+  tags: PaperlessTag[]
+  correspondents: PaperlessCorrespondent[]
+  documentTypes: PaperlessDocumentType[]
 
   private initiallySelectedTagsToggleableItems: ToggleableItem[]
   private initiallySelectedCorrespondentsToggleableItems: ToggleableItem[]
   private initiallySelectedDocumentTypesToggleableItems: ToggleableItem[]
 
-  private dropdownTypes = FilterableDropdownType
+  dropdownTypes = FilterableDropdownType
 
   get selectionSpansPages(): boolean {
-    return this.selectedDocuments.length > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd))
+    return this.selectedDocuments.size > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd))
   }
 
   get tagsToggleableItems(): ToggleableItem[] {

From 37c2051e01d9e171e253c9086e9171b4392f1a0d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 20 Dec 2020 00:37:37 -0800
Subject: [PATCH 29/73] Typos & code fixes

---
 .../filterable-dropdown.component.ts               |  4 ++--
 .../bulk-editor/bulk-editor.component.ts           | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

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 10713cc00..bec6e1bef 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
@@ -67,7 +67,7 @@ export class FilterableDropdownComponent {
   types = FilterableDropdownType
 
   @Input()
-  tingular: boolean = false
+  singular: boolean = false
 
   @Output()
   toggle = new EventEmitter()
@@ -92,7 +92,7 @@ export class FilterableDropdownComponent {
   constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(toggleableItem: ToggleableItem): void {
-    if (this.tingular && toggleableItem.state == ToggleableItemState.Selected) {
+    if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
       this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
     }
     this.toggle.emit(toggleableItem.item)
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 66ad265de..053af8157 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
@@ -118,39 +118,39 @@ export class BulkEditorComponent {
   }
 
   tagsDropdownOpen() {
-    this.initiallySelectedTagsToggleableItems = this.tagsToggleableItems.filter(tsi => tsi.state == ToggleableItemState.Selected)
+    this.initiallySelectedTagsToggleableItems = this.tagsToggleableItems.filter(tti => tti.state == ToggleableItemState.Selected)
   }
 
   correspondentsDropdownOpen() {
-    this.initiallySelectedCorrespondentsToggleableItems = this.correspondentsToggleableItems.filter(csi => csi.state == ToggleableItemState.Selected)
+    this.initiallySelectedCorrespondentsToggleableItems = this.correspondentsToggleableItems.filter(cti => cti.state == ToggleableItemState.Selected)
   }
 
   documentTypesDropdownOpen() {
-    this.initiallySelectedDocumentTypesToggleableItems = this.documentTypesToggleableItems.filter(dtsi => dtsi.state == ToggleableItemState.Selected)
+    this.initiallySelectedDocumentTypesToggleableItems = this.documentTypesToggleableItems.filter(dtti => dtti.state == ToggleableItemState.Selected)
   }
 
   applyTags(selectedTags: PaperlessTag[]) {
     let unchanged = this.equateItemsToToggleableItems(selectedTags, this.initiallySelectedTagsToggleableItems)
     if (!unchanged) this.setTags.emit(selectedTags)
-    this.initiallySelectedTagsToggleableItems = null
+    this.initiallySelectedTagsToggleableItems = []
   }
 
   applyCorrespondent(selectedCorrespondents: PaperlessCorrespondent[]) {
     let unchanged = this.equateItemsToToggleableItems(selectedCorrespondents, this.initiallySelectedCorrespondentsToggleableItems)
     if (!unchanged) this.setCorrespondent.emit(selectedCorrespondents?.length > 0 ? selectedCorrespondents.shift() : null)
-    this.initiallySelectedCorrespondentsToggleableItems = null
+    this.initiallySelectedCorrespondentsToggleableItems = []
   }
 
   applyDocumentType(selectedDocumentTypes: PaperlessDocumentType[]) {
     let unchanged = this.equateItemsToToggleableItems(selectedDocumentTypes, this.initiallySelectedDocumentTypesToggleableItems)
     if (!unchanged) this.setDocumentType.emit(selectedDocumentTypes.length > 0 ? selectedDocumentTypes.shift() : null)
-    this.initiallySelectedDocumentTypesToggleableItems = null
+    this.initiallySelectedDocumentTypesToggleableItems = []
   }
 
   equateItemsToToggleableItems(items: ObjectWithId[], toggleableItems: ToggleableItem[]): boolean {
     // either both empty or all items must in toggleableItems and vice-versa
     return (toggleableItems.length == 0 && items.length == 0) ||
-           (items.every(i => toggleableItems.find(si => si.item.id == i.id) !== undefined) && toggleableItems.every(si => items.find(i => i.id == si.item.id) !== undefined))
+           (items.every(i => toggleableItems.find(ti => ti.item.id == i.id) !== undefined) && toggleableItems.every(ti => items.find(i => i.id == ti.item.id) !== undefined))
   }
 
   applyDelete() {

From fa7b90a5846fdc94ecdbc51380a50f7589c8c28a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 20 Dec 2020 01:04:54 -0800
Subject: [PATCH 30/73] Add apply button to dropdowns

---
 .../filterable-dropdown/filterable-dropdown.component.html  | 6 ++++++
 .../filterable-dropdown/filterable-dropdown.component.ts    | 4 ++++
 2 files changed, 10 insertions(+)

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 5a05e66b4..58c831456 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
@@ -24,6 +24,12 @@
           <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></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">
+        <small class="ml-1" [ngClass]="{'font-weight-bold': hasBeenToggled && (toggleableItems | filter: filterText).length > 0}">Apply</small>
+        <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
+        </svg>
+      </button>
     </div>
   </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 bec6e1bef..05c77cd10 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
@@ -89,12 +89,15 @@ export class FilterableDropdownComponent {
     return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected.length == 0))
   }
 
+  hasBeenToggled:boolean = false
+
   constructor(private filterPipe: FilterPipe) { }
 
   toggleItem(toggleableItem: ToggleableItem): void {
     if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
       this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
     }
+    this.hasBeenToggled = true
     this.toggle.emit(toggleableItem.item)
   }
 
@@ -103,6 +106,7 @@ export class FilterableDropdownComponent {
       setTimeout(() => {
         this.listFilterTextInput.nativeElement.focus();
       }, 0)
+      this.hasBeenToggled = false
       this.open.next()
     } else {
       this.filterText = ''

From d9e3895f3470c2da1c56e2711e3767a8e2451d6d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 20 Dec 2020 08:07:19 -0800
Subject: [PATCH 31/73] Fix 2px difference between two editors =)

---
 .../document-list/bulk-editor/bulk-editor.component.html    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index d15b45d0f..35b6d5197 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -9,7 +9,7 @@
   </div>
   <div class="w-100 d-xl-none"></div>
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
-    <label class="mr-2">Select:</label>
+    <label class="mr-2 mb-0">Select:</label>
     <div class="btn-group">
       <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
@@ -28,7 +28,7 @@
   <div class="w-100 d-xl-none"></div>
   <div class="col-auto mb-2 mb-xl-0">
     <div class="d-flex">
-      <label class="ml-auto mt-1 mr-2">Edit:</label>
+      <label class="ml-auto mt-1 mb-0 mr-2">Edit:</label>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
@@ -37,7 +37,7 @@
   <div class="w-100 d-xl-none"></div>
   <div class="col mb-2 mb-xl-0 d-flex">
     <button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
-      <svg class="buttonicon" fill="currentColor">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />
       </svg>
       Delete

From 0e93f7eba577815ea251262dba6be5ac43558b4b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 21 Dec 2020 08:14:06 -0800
Subject: [PATCH 32/73] Fix list small card layout

Some changes from #141 were lost
---
 src-ui/angular.json                           | 259 +++++++++---------
 .../document-list.component.html              |   2 +-
 src-ui/src/environments/environment.ts        |   2 +-
 3 files changed, 133 insertions(+), 130 deletions(-)

diff --git a/src-ui/angular.json b/src-ui/angular.json
index 2ff1bb3b0..179053958 100644
--- a/src-ui/angular.json
+++ b/src-ui/angular.json
@@ -1,130 +1,133 @@
 {
-	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-	"version": 1,
-	"newProjectRoot": "projects",
-	"projects": {
-		"paperless-ui": {
-			"projectType": "application",
-			"schematics": {
-				"@schematics/angular:component": {
-					"style": "scss"
-				}
-			},
-			"root": "",
-			"sourceRoot": "src",
-			"prefix": "app",
-			"architect": {
-				"build": {
-					"builder": "@angular-devkit/build-angular:browser",
-					"options": {
-						"outputPath": "dist/paperless-ui",
-						"outputHashing": "none",
-						"index": "src/index.html",
-						"main": "src/main.ts",
-						"polyfills": "src/polyfills.ts",
-						"tsConfig": "tsconfig.app.json",
-						"aot": true,
-						"assets": [
-							"src/favicon.ico",
-							"src/assets"
-						],
-						"styles": [
-							"src/styles.scss"
-						],
-						"scripts": []
-					},
-					"configurations": {
-						"production": {
-							"fileReplacements": [
-								{
-									"replace": "src/environments/environment.ts",
-									"with": "src/environments/environment.prod.ts"
-								}
-							],
-							"optimization": true,
-							"outputHashing": "none",
-							"sourceMap": false,
-							"extractCss": true,
-							"namedChunks": false,
-							"extractLicenses": true,
-							"vendorChunk": false,
-							"buildOptimizer": true,
-							"budgets": [
-								{
-									"type": "initial",
-									"maximumWarning": "2mb",
-									"maximumError": "5mb"
-								},
-								{
-									"type": "anyComponentStyle",
-									"maximumWarning": "6kb",
-									"maximumError": "10kb"
-								}
-							]
-						}
-					}
-				},
-				"serve": {
-					"builder": "@angular-devkit/build-angular:dev-server",
-					"options": {
-						"browserTarget": "paperless-ui:build"
-					},
-					"configurations": {
-						"production": {
-							"browserTarget": "paperless-ui:build:production"
-						}
-					}
-				},
-				"extract-i18n": {
-					"builder": "@angular-devkit/build-angular:extract-i18n",
-					"options": {
-						"browserTarget": "paperless-ui:build"
-					}
-				},
-				"test": {
-					"builder": "@angular-devkit/build-angular:karma",
-					"options": {
-						"main": "src/test.ts",
-						"polyfills": "src/polyfills.ts",
-						"tsConfig": "tsconfig.spec.json",
-						"karmaConfig": "karma.conf.js",
-						"assets": [
-							"src/favicon.ico",
-							"src/assets"
-						],
-						"styles": [
-							"src/styles.scss"
-						],
-						"scripts": []
-					}
-				},
-				"lint": {
-					"builder": "@angular-devkit/build-angular:tslint",
-					"options": {
-						"tsConfig": [
-							"tsconfig.app.json",
-							"tsconfig.spec.json",
-							"e2e/tsconfig.json"
-						],
-						"exclude": [
-							"**/node_modules/**"
-						]
-					}
-				},
-				"e2e": {
-					"builder": "@angular-devkit/build-angular:protractor",
-					"options": {
-						"protractorConfig": "e2e/protractor.conf.js",
-						"devServerTarget": "paperless-ui:serve"
-					},
-					"configurations": {
-						"production": {
-							"devServerTarget": "paperless-ui:serve:production"
-						}
-					}
-				}
-			}
-		}
-	},
-	"defaultProject": "paperless-ui"
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "paperless-ui": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/paperless-ui",
+            "outputHashing": "none",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "none",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "paperless-ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "paperless-ui:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "paperless-ui:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "paperless-ui:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "paperless-ui:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "paperless-ui",
+  "cli": {
+    "analytics": "3204bb5c-281f-49a7-aa58-6656b6967b23"
+  }
 }
\ No newline at end of file
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 5ce4efd2a..31a2efd0d 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -150,6 +150,6 @@
 </table>
 
 
-<div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
+<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
   <app-document-card-small [document]="d" [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>
diff --git a/src-ui/src/environments/environment.ts b/src-ui/src/environments/environment.ts
index 29a8f3af6..19f8b27f9 100644
--- a/src-ui/src/environments/environment.ts
+++ b/src-ui/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiBaseUrl: "http://localhost:8000/api/",
+  apiBaseUrl: "http://10.0.1.28:8000/api/",
   appTitle: "Paperless-ng",
   version: "DEVELOPMENT"
 };

From dcbc0ea2e5d360001e02b2a1f1f0fccb703f237e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 21 Dec 2020 09:52:55 -0800
Subject: [PATCH 33/73] Revert "Fix list small card layout"

This reverts commit 0e93f7eba577815ea251262dba6be5ac43558b4b.
---
 src-ui/angular.json                           | 259 +++++++++---------
 .../document-list.component.html              |   2 +-
 src-ui/src/environments/environment.ts        |   2 +-
 3 files changed, 130 insertions(+), 133 deletions(-)

diff --git a/src-ui/angular.json b/src-ui/angular.json
index 179053958..2ff1bb3b0 100644
--- a/src-ui/angular.json
+++ b/src-ui/angular.json
@@ -1,133 +1,130 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "paperless-ui": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/paperless-ui",
-            "outputHashing": "none",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "none",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "paperless-ui:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "paperless-ui:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "paperless-ui:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "paperless-ui:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "paperless-ui:serve:production"
-            }
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "paperless-ui",
-  "cli": {
-    "analytics": "3204bb5c-281f-49a7-aa58-6656b6967b23"
-  }
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+		"paperless-ui": {
+			"projectType": "application",
+			"schematics": {
+				"@schematics/angular:component": {
+					"style": "scss"
+				}
+			},
+			"root": "",
+			"sourceRoot": "src",
+			"prefix": "app",
+			"architect": {
+				"build": {
+					"builder": "@angular-devkit/build-angular:browser",
+					"options": {
+						"outputPath": "dist/paperless-ui",
+						"outputHashing": "none",
+						"index": "src/index.html",
+						"main": "src/main.ts",
+						"polyfills": "src/polyfills.ts",
+						"tsConfig": "tsconfig.app.json",
+						"aot": true,
+						"assets": [
+							"src/favicon.ico",
+							"src/assets"
+						],
+						"styles": [
+							"src/styles.scss"
+						],
+						"scripts": []
+					},
+					"configurations": {
+						"production": {
+							"fileReplacements": [
+								{
+									"replace": "src/environments/environment.ts",
+									"with": "src/environments/environment.prod.ts"
+								}
+							],
+							"optimization": true,
+							"outputHashing": "none",
+							"sourceMap": false,
+							"extractCss": true,
+							"namedChunks": false,
+							"extractLicenses": true,
+							"vendorChunk": false,
+							"buildOptimizer": true,
+							"budgets": [
+								{
+									"type": "initial",
+									"maximumWarning": "2mb",
+									"maximumError": "5mb"
+								},
+								{
+									"type": "anyComponentStyle",
+									"maximumWarning": "6kb",
+									"maximumError": "10kb"
+								}
+							]
+						}
+					}
+				},
+				"serve": {
+					"builder": "@angular-devkit/build-angular:dev-server",
+					"options": {
+						"browserTarget": "paperless-ui:build"
+					},
+					"configurations": {
+						"production": {
+							"browserTarget": "paperless-ui:build:production"
+						}
+					}
+				},
+				"extract-i18n": {
+					"builder": "@angular-devkit/build-angular:extract-i18n",
+					"options": {
+						"browserTarget": "paperless-ui:build"
+					}
+				},
+				"test": {
+					"builder": "@angular-devkit/build-angular:karma",
+					"options": {
+						"main": "src/test.ts",
+						"polyfills": "src/polyfills.ts",
+						"tsConfig": "tsconfig.spec.json",
+						"karmaConfig": "karma.conf.js",
+						"assets": [
+							"src/favicon.ico",
+							"src/assets"
+						],
+						"styles": [
+							"src/styles.scss"
+						],
+						"scripts": []
+					}
+				},
+				"lint": {
+					"builder": "@angular-devkit/build-angular:tslint",
+					"options": {
+						"tsConfig": [
+							"tsconfig.app.json",
+							"tsconfig.spec.json",
+							"e2e/tsconfig.json"
+						],
+						"exclude": [
+							"**/node_modules/**"
+						]
+					}
+				},
+				"e2e": {
+					"builder": "@angular-devkit/build-angular:protractor",
+					"options": {
+						"protractorConfig": "e2e/protractor.conf.js",
+						"devServerTarget": "paperless-ui:serve"
+					},
+					"configurations": {
+						"production": {
+							"devServerTarget": "paperless-ui:serve:production"
+						}
+					}
+				}
+			}
+		}
+	},
+	"defaultProject": "paperless-ui"
 }
\ No newline at end of file
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 31a2efd0d..5ce4efd2a 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -150,6 +150,6 @@
 </table>
 
 
-<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
+<div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
   <app-document-card-small [document]="d" [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>
diff --git a/src-ui/src/environments/environment.ts b/src-ui/src/environments/environment.ts
index 19f8b27f9..29a8f3af6 100644
--- a/src-ui/src/environments/environment.ts
+++ b/src-ui/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiBaseUrl: "http://10.0.1.28:8000/api/",
+  apiBaseUrl: "http://localhost:8000/api/",
   appTitle: "Paperless-ng",
   version: "DEVELOPMENT"
 };

From 29e9d7d79364e4ebb11daa63b59ce616a1d00796 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 21 Dec 2020 09:53:43 -0800
Subject: [PATCH 34/73] Some changes from #141 were lost

---
 .../app/components/document-list/document-list.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 5ce4efd2a..1898a4849 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -150,6 +150,6 @@
 </table>
 
 
-<div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
+<div class="m-n2 row m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
   <app-document-card-small [document]="d" [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

From 48d83e166b2924856e441349b126402053d0dcff Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 21 Dec 2020 11:12:48 -0800
Subject: [PATCH 35/73] use ngIf for editor components to maybe help
 performance

---
 .../document-list/document-list.component.html       |  4 ++--
 .../document-list/document-list.component.ts         | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 1898a4849..970d41ec4 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -78,9 +78,9 @@
 </app-page-header>
 
 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 
-  <app-bulk-editor [hidden]="!isBulkEditing"
+  <app-bulk-editor *ngIf="isBulkEditing"
     [viewDocuments]="list.documents"
     [(selectedDocuments)]="list.selected"
     (selectPage)="list.selectPage()"
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 4ed6946e3..cfce55a0d 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -120,17 +120,23 @@ export class DocumentListComponent implements OnInit {
 
   clickTag(tagID: number) {
     this.list.selectNone()
-    this.filterEditor.toggleTag(tagID)
+    setTimeout(() => {
+      this.filterEditor.toggleTag(tagID)
+    })
   }
 
   clickCorrespondent(correspondentID: number) {
     this.list.selectNone()
-    this.filterEditor.toggleCorrespondent(correspondentID)
+    setTimeout(() => {
+      this.filterEditor.toggleCorrespondent(correspondentID)
+    })
   }
 
   clickDocumentType(documentTypeID: number) {
     this.list.selectNone()
-    this.filterEditor.toggleDocumentType(documentTypeID)
+    setTimeout(() => {
+      this.filterEditor.toggleDocumentType(documentTypeID)
+    })
   }
 
   private executeBulkOperation(method: string, args): Observable<any> {

From 360fc081bb8ba36f6d81cc6e9f2ec110644d6ca3 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 22 Dec 2020 02:08:36 -0800
Subject: [PATCH 36/73] Completely rewrite change detection, add back remove
 operations

---
 .../filterable-dropdown.component.html        |  6 ++
 .../filterable-dropdown.component.ts          |  8 +-
 .../bulk-editor/bulk-editor.component.html    | 30 +++++++-
 .../bulk-editor/bulk-editor.component.ts      | 74 +++++++++++++------
 .../document-list.component.html              |  3 +
 .../document-list/document-list.component.ts  | 52 ++++++++++++-
 6 files changed, 143 insertions(+), 30 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 58c831456..f9bf78b6c 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
@@ -19,6 +19,12 @@
           <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
         </div>
       </div>
+      <button *ngIf="showRemoveAll" role="menuitem" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" (click)="removeAll.next()">
+        <svg class="toolbaricon text-danger" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#x" />
+        </svg>
+        <small class="my-1">Remove All</small>
+      </button>
       <div *ngIf="toggleableItems" class="items">
         <ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
           <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
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 05c77cd10..3f0b3c3ad 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
@@ -69,12 +69,18 @@ export class FilterableDropdownComponent {
   @Input()
   singular: boolean = false
 
+  @Input()
+  showRemoveAll: boolean = false
+
   @Output()
   toggle = new EventEmitter()
 
   @Output()
   open = new EventEmitter()
 
+  @Output()
+  removeAll = new EventEmitter()
+
   @Output()
   editingComplete = new EventEmitter()
 
@@ -110,7 +116,7 @@ export class FilterableDropdownComponent {
       this.open.next()
     } else {
       this.filterText = ''
-      if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.itemsSelected)
+      if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.toggleableItems)
     }
   }
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 35b6d5197..589739d78 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -29,9 +29,33 @@
   <div class="col-auto mb-2 mb-xl-0">
     <div class="d-flex">
       <label class="ml-auto mt-1 mb-0 mr-2">Edit:</label>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
+        [toggleableItems]="tagsToggleableItems"
+        [type]="dropdownTypes.Editing"
+        [showCounts]="!this.selectionSpansPages"
+        [showRemoveAll]="this.selectionSpansPages"
+        (open)="tagsDropdownOpen()"
+        (removeAll)="applyTags([], true)"
+        (editingComplete)="applyTags($event)">
+      </app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
+        [toggleableItems]="correspondentsToggleableItems"
+        [type]="dropdownTypes.Editing"
+        [showCounts]="!this.selectionSpansPages"
+        [showRemoveAll]="this.selectionSpansPages"
+        (open)="correspondentsDropdownOpen()"
+        (removeAll)="applyCorrespondent([], true)"
+        (editingComplete)="applyCorrespondent($event)">
+      </app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
+        [toggleableItems]="documentTypesToggleableItems"
+        [type]="dropdownTypes.Editing"
+        [showCounts]="!this.selectionSpansPages"
+        [showRemoveAll]="this.selectionSpansPages"
+        (open)="documentTypesDropdownOpen()"
+        (removeAll)="applyDocumentType([], true)"
+        (editingComplete)="applyDocumentType($event)">
+      </app-filterable-dropdown>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
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 053af8157..31f7b5566 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
@@ -11,6 +11,11 @@ import { DocumentService } from 'src/app/services/rest/document.service';
 import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
+interface ChangedItems {
+  itemsToAdd: any[],
+  itemsToRemove: any[]
+}
+
 @Component({
   selector: 'app-bulk-editor',
   templateUrl: './bulk-editor.component.html',
@@ -33,6 +38,9 @@ export class BulkEditorComponent {
   @Output()
   selectNone = new EventEmitter()
 
+  @Output()
+  setTags = new EventEmitter()
+
   @Output()
   setCorrespondent = new EventEmitter()
 
@@ -40,18 +48,24 @@ export class BulkEditorComponent {
   setDocumentType = new EventEmitter()
 
   @Output()
-  setTags = new EventEmitter()
+  delete = new EventEmitter()
 
   @Output()
-  delete = new EventEmitter()
+  removeTags = new EventEmitter()
+
+  @Output()
+  removeCorrespondents = new EventEmitter()
+
+  @Output()
+  removeDocumentTypes = new EventEmitter()
 
   tags: PaperlessTag[]
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
-  private initiallySelectedTagsToggleableItems: ToggleableItem[]
-  private initiallySelectedCorrespondentsToggleableItems: ToggleableItem[]
-  private initiallySelectedDocumentTypesToggleableItems: ToggleableItem[]
+  private initialTagsToggleableItems: ToggleableItem[]
+  private initialCorrespondentsToggleableItems: ToggleableItem[]
+  private initialDocumentTypesToggleableItems: ToggleableItem[]
 
   dropdownTypes = FilterableDropdownType
 
@@ -59,6 +73,7 @@ export class BulkEditorComponent {
     return this.selectedDocuments.size > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd))
   }
 
+  private _tagsToggleableItems: ToggleableItem[]
   get tagsToggleableItems(): ToggleableItem[] {
     let tagsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
@@ -71,9 +86,11 @@ export class BulkEditorComponent {
       else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
       tagsToggleableItems.push({item: t, state: state, count: selectedDocumentsWithTag.length})
     })
+    this._tagsToggleableItems = tagsToggleableItems
     return tagsToggleableItems
   }
 
+  private _correspondentsToggleableItems: ToggleableItem[]
   get correspondentsToggleableItems(): ToggleableItem[] {
     let correspondentsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
@@ -86,9 +103,11 @@ export class BulkEditorComponent {
       else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
       correspondentsToggleableItems.push({item: c, state: state, count: selectedDocumentsWithCorrespondent.length})
     })
+    this._correspondentsToggleableItems = correspondentsToggleableItems
     return correspondentsToggleableItems
   }
 
+  private _documentTypesToggleableItems: ToggleableItem[]
   get documentTypesToggleableItems(): ToggleableItem[] {
     let documentTypesToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
@@ -101,6 +120,7 @@ export class BulkEditorComponent {
       else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
       documentTypesToggleableItems.push({item: dt, state: state, count: selectedDocumentsWithDocumentType.length})
     })
+    this._documentTypesToggleableItems = documentTypesToggleableItems
     return documentTypesToggleableItems
   }
 
@@ -118,39 +138,45 @@ export class BulkEditorComponent {
   }
 
   tagsDropdownOpen() {
-    this.initiallySelectedTagsToggleableItems = this.tagsToggleableItems.filter(tti => tti.state == ToggleableItemState.Selected)
+    this.initialTagsToggleableItems = this._tagsToggleableItems
   }
 
   correspondentsDropdownOpen() {
-    this.initiallySelectedCorrespondentsToggleableItems = this.correspondentsToggleableItems.filter(cti => cti.state == ToggleableItemState.Selected)
+    this.initialCorrespondentsToggleableItems = this._correspondentsToggleableItems
   }
 
   documentTypesDropdownOpen() {
-    this.initiallySelectedDocumentTypesToggleableItems = this.documentTypesToggleableItems.filter(dtti => dtti.state == ToggleableItemState.Selected)
+    this.initialDocumentTypesToggleableItems = this._documentTypesToggleableItems
   }
 
-  applyTags(selectedTags: PaperlessTag[]) {
-    let unchanged = this.equateItemsToToggleableItems(selectedTags, this.initiallySelectedTagsToggleableItems)
-    if (!unchanged) this.setTags.emit(selectedTags)
-    this.initiallySelectedTagsToggleableItems = []
+  applyTags(newTagsToggleableItems: ToggleableItem[], forceApply:boolean = false) {
+    let changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
+    if (changedTags.itemsToAdd.length > 0) this.setTags.emit(changedTags.itemsToAdd)
+    if (changedTags.itemsToRemove.length > 0) this.removeTags.emit(changedTags.itemsToRemove)
   }
 
-  applyCorrespondent(selectedCorrespondents: PaperlessCorrespondent[]) {
-    let unchanged = this.equateItemsToToggleableItems(selectedCorrespondents, this.initiallySelectedCorrespondentsToggleableItems)
-    if (!unchanged) this.setCorrespondent.emit(selectedCorrespondents?.length > 0 ? selectedCorrespondents.shift() : null)
-    this.initiallySelectedCorrespondentsToggleableItems = []
+  applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[], forceApply:boolean = false) {
+    let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
+    if (changedCorrespondents.itemsToAdd.length > 0) this.setCorrespondent.emit(changedCorrespondents.itemsToAdd)
+    else if (changedCorrespondents.itemsToRemove.length > 0) this.removeCorrespondents.emit(changedCorrespondents.itemsToRemove)
   }
 
-  applyDocumentType(selectedDocumentTypes: PaperlessDocumentType[]) {
-    let unchanged = this.equateItemsToToggleableItems(selectedDocumentTypes, this.initiallySelectedDocumentTypesToggleableItems)
-    if (!unchanged) this.setDocumentType.emit(selectedDocumentTypes.length > 0 ? selectedDocumentTypes.shift() : null)
-    this.initiallySelectedDocumentTypesToggleableItems = []
+  applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[], forceApply:boolean = false) {
+    let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
+    if (changedDocumentTypes.itemsToAdd.length > 0) this.setDocumentType.emit(changedDocumentTypes.itemsToAdd)
+    else if (changedDocumentTypes.itemsToRemove.length > 0) this.removeDocumentTypes.emit(changedDocumentTypes.itemsToRemove)
   }
 
-  equateItemsToToggleableItems(items: ObjectWithId[], toggleableItems: ToggleableItem[]): boolean {
-    // either both empty or all items must in toggleableItems and vice-versa
-    return (toggleableItems.length == 0 && items.length == 0) ||
-           (items.every(i => toggleableItems.find(ti => ti.item.id == i.id) !== undefined) && toggleableItems.every(ti => items.find(i => i.id == ti.item.id) !== undefined))
+  checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
+    let itemsToAdd: any[] = []
+    let itemsToRemove: any[] = []
+    toggleableItemsA.forEach(oldItem => {
+      let newItem = toggleableItemsB.find(nTTI => nTTI.item.id == oldItem.item.id)
+
+      if (newItem.state == ToggleableItemState.Selected && (oldItem.state == ToggleableItemState.PartiallySelected || oldItem.state == ToggleableItemState.NotSelected)) itemsToAdd.push(newItem.item)
+      else if (newItem.state == ToggleableItemState.NotSelected && (oldItem.state == ToggleableItemState.Selected || oldItem.state == ToggleableItemState.PartiallySelected)) itemsToRemove.push(newItem.item)
+    })
+    return { itemsToAdd: itemsToAdd, itemsToRemove: itemsToRemove }
   }
 
   applyDelete() {
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 36c6daa5b..d685e6770 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -87,8 +87,11 @@
     (selectAll)="list.selectAll()"
     (selectNone)="list.selectNone()"
     (setTags)="bulkSetTags($event)"
+    (removeTags)="bulkRemoveTags($event)"
     (setCorrespondent)="bulkSetCorrespondent($event)"
+    (removeCorrespondents)="bulkRemoveCorrespondents($event)"
     (setDocumentType)="bulkSetDocumentType($event)"
+    (removeDocumentTypes)="bulkRemoveDocumentTypes($event)"
     (delete)="bulkDelete()">
 </app-bulk-editor>
 </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 2575e4b49..60d763f13 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -158,7 +158,7 @@ export class DocumentListComponent implements OnInit {
 
   bulkSetCorrespondent(correspondent: PaperlessCorrespondent) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm correspondent assignment"
+    modal.componentInstance.title = "Confirm Correspondent assignment"
     let messageFragment = correspondent ? `assign the correspondent ${correspondent.name} to` : `remove all correspondents from`
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
@@ -172,6 +172,22 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
+  bulkRemoveCorrespondents(correspondents: PaperlessCorrespondent[]) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Correspondent Removal"
+    modal.componentInstance.message = `This operation will remove the correspondent(s) ${correspondents.map(t => t.name).join(', ')} from all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      // TODO: API endpoint for remove multiple correspondents
+      this.executeBulkOperation('remove_correspondents', {"correspondents": correspondents.map(t => t.id)}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
+  }
+
   bulkSetDocumentType(documentType: PaperlessDocumentType) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Document Type assignment"
@@ -188,6 +204,22 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
+  bulkRemoveDocumentTypes(documentTypes: PaperlessDocumentType[]) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Document Type Removal"
+    modal.componentInstance.message = `This operation will remove the document type(s) ${documentTypes.map(t => t.name).join(', ')} all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      // TODO: API endpoint for remove multiple document types
+      this.executeBulkOperation('remove_document_types', {"document_types": documentTypes.map(t => t.id)}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
+  }
+
   bulkSetTags(tags: PaperlessTag[]) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Tags assignment"
@@ -197,7 +229,23 @@ export class DocumentListComponent implements OnInit {
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
       // TODO: API endpoint for set multiple tags
-      this.executeBulkOperation('set_tags', {"document_type": tags ? tags.map(t => t.id) : null}).subscribe(
+      this.executeBulkOperation('set_tags', {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
+  }
+
+  bulkRemoveTags(tags: PaperlessTag[]) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Tags Removal"
+    modal.componentInstance.message = `This operation will remove the tags ${tags.map(t => t.name).join(', ')} from all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      // TODO: API endpoint for remove multiple tags
+      this.executeBulkOperation('remove_tags', {"tags": tags.map(t => t.id)}).subscribe(
         response => {
           modal.close()
         }

From 2f26d0748045571575c7716dfaed48f31f675f2f Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 22 Dec 2020 02:14:37 -0800
Subject: [PATCH 37/73] Only pass one item to bulk methods for
 correspondents/doctypes

---
 .../document-list/bulk-editor/bulk-editor.component.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 31f7b5566..56ccfae53 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
@@ -157,13 +157,13 @@ export class BulkEditorComponent {
 
   applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[], forceApply:boolean = false) {
     let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
-    if (changedCorrespondents.itemsToAdd.length > 0) this.setCorrespondent.emit(changedCorrespondents.itemsToAdd)
+    if (changedCorrespondents.itemsToAdd.length > 0) this.setCorrespondent.emit(changedCorrespondents.itemsToAdd[0])
     else if (changedCorrespondents.itemsToRemove.length > 0) this.removeCorrespondents.emit(changedCorrespondents.itemsToRemove)
   }
 
   applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[], forceApply:boolean = false) {
     let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
-    if (changedDocumentTypes.itemsToAdd.length > 0) this.setDocumentType.emit(changedDocumentTypes.itemsToAdd)
+    if (changedDocumentTypes.itemsToAdd.length > 0) this.setDocumentType.emit(changedDocumentTypes.itemsToAdd[0])
     else if (changedDocumentTypes.itemsToRemove.length > 0) this.removeDocumentTypes.emit(changedDocumentTypes.itemsToRemove)
   }
 

From 1fb331643614b5811ad3c3435777e06f5172dbb4 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 22 Dec 2020 02:18:05 -0800
Subject: [PATCH 38/73] Fix remove all operations

---
 .../bulk-editor/bulk-editor.component.html     |  6 +++---
 .../bulk-editor/bulk-editor.component.ts       | 18 +++++++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 589739d78..b547b8505 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -35,7 +35,7 @@
         [showCounts]="!this.selectionSpansPages"
         [showRemoveAll]="this.selectionSpansPages"
         (open)="tagsDropdownOpen()"
-        (removeAll)="applyTags([], true)"
+        (removeAll)="removeAllTags()"
         (editingComplete)="applyTags($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
@@ -44,7 +44,7 @@
         [showCounts]="!this.selectionSpansPages"
         [showRemoveAll]="this.selectionSpansPages"
         (open)="correspondentsDropdownOpen()"
-        (removeAll)="applyCorrespondent([], true)"
+        (removeAll)="removeAllCorrespondents()"
         (editingComplete)="applyCorrespondent($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
@@ -53,7 +53,7 @@
         [showCounts]="!this.selectionSpansPages"
         [showRemoveAll]="this.selectionSpansPages"
         (open)="documentTypesDropdownOpen()"
-        (removeAll)="applyDocumentType([], true)"
+        (removeAll)="removeAllDocumentTypes()"
         (editingComplete)="applyDocumentType($event)">
       </app-filterable-dropdown>
     </div>
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 56ccfae53..c88a44e25 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
@@ -149,24 +149,36 @@ export class BulkEditorComponent {
     this.initialDocumentTypesToggleableItems = this._documentTypesToggleableItems
   }
 
-  applyTags(newTagsToggleableItems: ToggleableItem[], forceApply:boolean = false) {
+  applyTags(newTagsToggleableItems: ToggleableItem[]) {
     let changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
     if (changedTags.itemsToAdd.length > 0) this.setTags.emit(changedTags.itemsToAdd)
     if (changedTags.itemsToRemove.length > 0) this.removeTags.emit(changedTags.itemsToRemove)
   }
 
-  applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[], forceApply:boolean = false) {
+  removeAllTags() {
+    this.setTags.emit(null)
+  }
+
+  applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[]) {
     let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
     if (changedCorrespondents.itemsToAdd.length > 0) this.setCorrespondent.emit(changedCorrespondents.itemsToAdd[0])
     else if (changedCorrespondents.itemsToRemove.length > 0) this.removeCorrespondents.emit(changedCorrespondents.itemsToRemove)
   }
 
-  applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[], forceApply:boolean = false) {
+  removeAllCorrespondents() {
+    this.setDocumentType.emit(null)
+  }
+
+  applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[]) {
     let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
     if (changedDocumentTypes.itemsToAdd.length > 0) this.setDocumentType.emit(changedDocumentTypes.itemsToAdd[0])
     else if (changedDocumentTypes.itemsToRemove.length > 0) this.removeDocumentTypes.emit(changedDocumentTypes.itemsToRemove)
   }
 
+  removeAllDocumentTypes() {
+    this.setDocumentType.emit(null)
+  }
+
   checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
     let itemsToAdd: any[] = []
     let itemsToRemove: any[] = []

From 41e842a9e66739dd80898063e46cbdefa9d02666 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 22 Dec 2020 02:58:20 -0800
Subject: [PATCH 39/73] Unify bulk operations logic, working tags assignment
 and removal

---
 .../bulk-editor/bulk-editor.component.ts      |  28 ++--
 .../document-list.component.html              |   7 +-
 .../document-list/document-list.component.ts  | 126 +++++++++---------
 3 files changed, 75 insertions(+), 86 deletions(-)

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 c88a44e25..bbf5494f0 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
@@ -11,7 +11,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
 import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
-interface ChangedItems {
+export interface ChangedItems {
   itemsToAdd: any[],
   itemsToRemove: any[]
 }
@@ -42,23 +42,14 @@ export class BulkEditorComponent {
   setTags = new EventEmitter()
 
   @Output()
-  setCorrespondent = new EventEmitter()
+  setCorrespondents = new EventEmitter()
 
   @Output()
-  setDocumentType = new EventEmitter()
+  setDocumentTypes = new EventEmitter()
 
   @Output()
   delete = new EventEmitter()
 
-  @Output()
-  removeTags = new EventEmitter()
-
-  @Output()
-  removeCorrespondents = new EventEmitter()
-
-  @Output()
-  removeDocumentTypes = new EventEmitter()
-
   tags: PaperlessTag[]
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
@@ -151,8 +142,7 @@ export class BulkEditorComponent {
 
   applyTags(newTagsToggleableItems: ToggleableItem[]) {
     let changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
-    if (changedTags.itemsToAdd.length > 0) this.setTags.emit(changedTags.itemsToAdd)
-    if (changedTags.itemsToRemove.length > 0) this.removeTags.emit(changedTags.itemsToRemove)
+    if (changedTags.itemsToAdd.length > 0 || changedTags.itemsToRemove.length > 0) this.setTags.emit(changedTags)
   }
 
   removeAllTags() {
@@ -161,22 +151,20 @@ export class BulkEditorComponent {
 
   applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[]) {
     let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
-    if (changedCorrespondents.itemsToAdd.length > 0) this.setCorrespondent.emit(changedCorrespondents.itemsToAdd[0])
-    else if (changedCorrespondents.itemsToRemove.length > 0) this.removeCorrespondents.emit(changedCorrespondents.itemsToRemove)
+    if (changedCorrespondents.itemsToAdd.length > 0 || changedCorrespondents.itemsToRemove.length > 0) this.setCorrespondents.emit(changedCorrespondents)
   }
 
   removeAllCorrespondents() {
-    this.setDocumentType.emit(null)
+    this.setDocumentTypes.emit(null)
   }
 
   applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[]) {
     let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
-    if (changedDocumentTypes.itemsToAdd.length > 0) this.setDocumentType.emit(changedDocumentTypes.itemsToAdd[0])
-    else if (changedDocumentTypes.itemsToRemove.length > 0) this.removeDocumentTypes.emit(changedDocumentTypes.itemsToRemove)
+    if (changedDocumentTypes.itemsToAdd.length > 0 || changedDocumentTypes.itemsToRemove.length > 0) this.setDocumentTypes.emit(changedDocumentTypes)
   }
 
   removeAllDocumentTypes() {
-    this.setDocumentType.emit(null)
+    this.setDocumentTypes.emit(null)
   }
 
   checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index d685e6770..816b9b3b6 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -87,11 +87,8 @@
     (selectAll)="list.selectAll()"
     (selectNone)="list.selectNone()"
     (setTags)="bulkSetTags($event)"
-    (removeTags)="bulkRemoveTags($event)"
-    (setCorrespondent)="bulkSetCorrespondent($event)"
-    (removeCorrespondents)="bulkRemoveCorrespondents($event)"
-    (setDocumentType)="bulkSetDocumentType($event)"
-    (removeDocumentTypes)="bulkRemoveDocumentTypes($event)"
+    (setCorrespondents)="bulkSetCorrespondents($event)"
+    (setDocumentTypes)="bulkSetDocumentTypes($event)"
     (delete)="bulkDelete()">
 </app-bulk-editor>
 </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 60d763f13..db955020e 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -19,6 +19,7 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
 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 { ChangedItems } from './bulk-editor/bulk-editor.component';
 
 @Component({
   selector: 'app-document-list',
@@ -156,47 +157,71 @@ export class DocumentListComponent implements OnInit {
     )
   }
 
-  bulkSetCorrespondent(correspondent: PaperlessCorrespondent) {
+  bulkSetTags(changedTags: ChangedItems) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Correspondent assignment"
-    let messageFragment = correspondent ? `assign the correspondent ${correspondent.name} to` : `remove all correspondents from`
+    modal.componentInstance.title = "Confirm Tags Assignment"
+    let action = 'set_tags'
+    let tags
+    let messageFragment = ''
+    let both = changedTags && changedTags.itemsToAdd.length > 0 && changedTags.itemsToRemove.length > 0
+    if (!changedTags) {
+      messageFragment = `remove all tags from`
+    } else {
+      if (changedTags.itemsToAdd.length > 0) {
+        tags = changedTags.itemsToAdd
+        messageFragment = `assign the tag(s) ${changedTags.itemsToAdd.map(t => t.name).join(', ')} to`
+      }
+      if (changedTags.itemsToRemove.length > 0) {
+        if (!both) {
+          // TODO: API endpoint for remove multiple tags
+          action = 'remove_tags'
+          tags = changedTags.itemsToRemove
+        } else {
+          messageFragment += ' and '
+        }
+        messageFragment += `remove the correspondent(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from`
+      }
+    }
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
+      this.executeBulkOperation(action, {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
         response => {
-          modal.close()
+          if (!both) modal.close()
+          else {
+            this.executeBulkOperation('remove_tags', {"tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
+              response => {
+                modal.close()
+              })
+          }
         }
       )
     })
   }
 
-  bulkRemoveCorrespondents(correspondents: PaperlessCorrespondent[]) {
+  bulkSetCorrespondents(changedCorrespondents: ChangedItems) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Correspondent Removal"
-    modal.componentInstance.message = `This operation will remove the correspondent(s) ${correspondents.map(t => t.name).join(', ')} from all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
+    modal.componentInstance.title = "Confirm Correspondent Assignment"
+    let action = 'set_correspondent'
+    let correspondents
+    let messageFragment
+    if (!changedCorrespondents) {
+      messageFragment = `remove all correspondents from`
+    } else if (changedCorrespondents.itemsToAdd.length > 0) {
+      correspondents = changedCorrespondents.itemsToAdd[0]
+      messageFragment = `assign the correspondent ${correspondents.name} to`
+    } else {
       // TODO: API endpoint for remove multiple correspondents
-      this.executeBulkOperation('remove_correspondents', {"correspondents": correspondents.map(t => t.id)}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkSetDocumentType(documentType: PaperlessDocumentType) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Document Type assignment"
-    let messageFragment = documentType ? `assign the document type ${documentType.name} to` : `remove all document types from`
+      action = 'remove_correspondents'
+      correspondents = changedCorrespondents.itemsToRemove
+      messageFragment = `remove the correspondent(s) ${correspondents.map(c => c.name).join(', ')} from`
+    }
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
+      this.executeBulkOperation(action, {"correspondents": correspondents ? correspondents.map(c => c.id) : null}).subscribe(
         response => {
           modal.close()
         }
@@ -204,48 +229,27 @@ export class DocumentListComponent implements OnInit {
     })
   }
 
-  bulkRemoveDocumentTypes(documentTypes: PaperlessDocumentType[]) {
+  bulkSetDocumentTypes(changedDocumentTypes: ChangedItems) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Document Type Removal"
-    modal.componentInstance.message = `This operation will remove the document type(s) ${documentTypes.map(t => t.name).join(', ')} all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      // TODO: API endpoint for remove multiple document types
-      this.executeBulkOperation('remove_document_types', {"document_types": documentTypes.map(t => t.id)}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkSetTags(tags: PaperlessTag[]) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Tags assignment"
-    let messageFragment = tags ? `assign the tag(s) ${tags.map(t => t.name).join(', ')} to` : `remove all tags from`
+    let action = 'set_document_type'
+    let documentTypes
+    let messageFragment
+    if (!changedDocumentTypes) {
+      messageFragment = `remove all document types from`
+    } else if (changedDocumentTypes.itemsToAdd.length > 0) {
+      documentTypes = changedDocumentTypes.itemsToAdd[0]
+      messageFragment = `assign the document type ${documentTypes.name} to`
+    } else {
+      // TODO: API endpoint for remove multiple doc types
+      action = 'remove_document_types'
+      documentTypes = changedDocumentTypes.itemsToRemove
+      messageFragment = `remove the document type(s) ${documentTypes.map(dt => dt.name).join(', ')} from`
+    }
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
-      // TODO: API endpoint for set multiple tags
-      this.executeBulkOperation('set_tags', {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkRemoveTags(tags: PaperlessTag[]) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Tags Removal"
-    modal.componentInstance.message = `This operation will remove the tags ${tags.map(t => t.name).join(', ')} from all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      // TODO: API endpoint for remove multiple tags
-      this.executeBulkOperation('remove_tags', {"tags": tags.map(t => t.id)}).subscribe(
+      this.executeBulkOperation(action, {"document_types": documentTypes ? documentTypes.map(dt => dt.id) : null}).subscribe(
         response => {
           modal.close()
         }

From 0a4a06b99157f8dddf22d85e88fd9e3ac103e0db Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 22 Dec 2020 03:13:57 -0800
Subject: [PATCH 40/73] Singular items dont need removal logic since dropdowns
 dont support this (yet?)

---
 .../document-list/document-list.component.ts  | 43 ++++++-------------
 1 file changed, 14 insertions(+), 29 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index db955020e..9e2652ceb 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -179,7 +179,7 @@ export class DocumentListComponent implements OnInit {
         } else {
           messageFragment += ' and '
         }
-        messageFragment += `remove the correspondent(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from`
+        messageFragment += `remove the tag(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from`
       }
     }
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
@@ -203,25 +203,17 @@ export class DocumentListComponent implements OnInit {
   bulkSetCorrespondents(changedCorrespondents: ChangedItems) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Correspondent Assignment"
-    let action = 'set_correspondent'
-    let correspondents
-    let messageFragment
-    if (!changedCorrespondents) {
-      messageFragment = `remove all correspondents from`
-    } else if (changedCorrespondents.itemsToAdd.length > 0) {
-      correspondents = changedCorrespondents.itemsToAdd[0]
-      messageFragment = `assign the correspondent ${correspondents.name} to`
-    } else {
-      // TODO: API endpoint for remove multiple correspondents
-      action = 'remove_correspondents'
-      correspondents = changedCorrespondents.itemsToRemove
-      messageFragment = `remove the correspondent(s) ${correspondents.map(c => c.name).join(', ')} from`
+    let correspondent
+    let messageFragment = 'remove all correspondents from'
+    if (changedCorrespondents && changedCorrespondents.itemsToAdd.length > 0) {
+      correspondent = changedCorrespondents.itemsToAdd[0]
+      messageFragment = `assign the correspondent ${correspondent.name} to`
     }
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation(action, {"correspondents": correspondents ? correspondents.map(c => c.id) : null}).subscribe(
+      this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
         response => {
           modal.close()
         }
@@ -231,25 +223,18 @@ export class DocumentListComponent implements OnInit {
 
   bulkSetDocumentTypes(changedDocumentTypes: ChangedItems) {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    let action = 'set_document_type'
-    let documentTypes
-    let messageFragment
-    if (!changedDocumentTypes) {
-      messageFragment = `remove all document types from`
-    } else if (changedDocumentTypes.itemsToAdd.length > 0) {
-      documentTypes = changedDocumentTypes.itemsToAdd[0]
-      messageFragment = `assign the document type ${documentTypes.name} to`
-    } else {
-      // TODO: API endpoint for remove multiple doc types
-      action = 'remove_document_types'
-      documentTypes = changedDocumentTypes.itemsToRemove
-      messageFragment = `remove the document type(s) ${documentTypes.map(dt => dt.name).join(', ')} from`
+    modal.componentInstance.title = "Confirm Document Type Assignment"
+    let documentType
+    let messageFragment = 'remove all document types from'
+    if (changedDocumentTypes && changedDocumentTypes.itemsToAdd.length > 0) {
+      documentType = changedDocumentTypes.itemsToAdd[0]
+      messageFragment = `assign the document type ${documentType.name} to`
     }
     modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation(action, {"document_types": documentTypes ? documentTypes.map(dt => dt.id) : null}).subscribe(
+      this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
         response => {
           modal.close()
         }

From 406f8daa1273e93db1ea4ea4110d30e1428a9b95 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Tue, 22 Dec 2020 03:32:51 -0800
Subject: [PATCH 41/73] TODO comment

---
 .../src/app/components/document-list/document-list.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 9e2652ceb..91fd0cd40 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -173,7 +173,6 @@ export class DocumentListComponent implements OnInit {
       }
       if (changedTags.itemsToRemove.length > 0) {
         if (!both) {
-          // TODO: API endpoint for remove multiple tags
           action = 'remove_tags'
           tags = changedTags.itemsToRemove
         } else {
@@ -186,6 +185,7 @@ export class DocumentListComponent implements OnInit {
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
+      // TODO: API endpoints for add/remove multiple tags
       this.executeBulkOperation(action, {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
         response => {
           if (!both) modal.close()

From 929b25a96983af002c4f7cddaa1937d2b4485943 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Wed, 23 Dec 2020 15:13:55 +0100
Subject: [PATCH 42/73] add api support for adding and removing many tags
 simultaneously

---
 src/documents/bulk_edit.py      | 23 +++++++++++++++++++++++
 src/documents/serialisers.py    | 28 ++++++++++++++++++++++++++--
 src/documents/tests/test_api.py |  9 +++++++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/src/documents/bulk_edit.py b/src/documents/bulk_edit.py
index aa5b8ea3f..132547704 100644
--- a/src/documents/bulk_edit.py
+++ b/src/documents/bulk_edit.py
@@ -1,3 +1,5 @@
+import itertools
+
 from django.db.models import Q
 from django_q.tasks import async_task
 
@@ -66,6 +68,27 @@ def remove_tag(doc_ids, tag):
     return "OK"
 
 
+def modify_tags(doc_ids, add_tags, remove_tags):
+    qs = Document.objects.filter(id__in=doc_ids)
+    affected_docs = [doc.id for doc in qs]
+
+    DocumentTagRelationship = Document.tags.through
+
+    DocumentTagRelationship.objects.filter(
+        document_id__in=affected_docs,
+        tag_id__in=remove_tags,
+    ).delete()
+
+    DocumentTagRelationship.objects.bulk_create([
+        DocumentTagRelationship(
+            document_id=doc, tag_id=tag) for (doc,tag) in itertools.product(affected_docs, add_tags)
+    ], ignore_conflicts=True)
+
+    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+
+    return "OK"
+
+
 def delete(doc_ids):
     Document.objects.filter(id__in=doc_ids).delete()
 
diff --git a/src/documents/serialisers.py b/src/documents/serialisers.py
index d9f1833bf..f34176d8a 100644
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@@ -217,6 +217,7 @@ class BulkEditSerializer(serializers.Serializer):
             "set_document_type",
             "add_tag",
             "remove_tag",
+            "modify_tags",
             "delete"
         ],
         label="Method",
@@ -225,11 +226,19 @@ class BulkEditSerializer(serializers.Serializer):
 
     parameters = serializers.DictField(allow_empty=True)
 
-    def validate_documents(self, documents):
+    def _validate_document_id_list(self, documents, name="documents"):
+        if not type(documents) == list:
+            raise serializers.ValidationError(f"{name} must be a list")
+        if not all([type(i) == int for i in documents]):
+            raise serializers.ValidationError(f"{name} must be a list of integers")
         count = Document.objects.filter(id__in=documents).count()
         if not count == len(documents):
             raise serializers.ValidationError(
-                "Some documents don't exist or were specified twice.")
+                f"Some documents in {name} don't exist or were specified twice.")
+
+
+    def validate_documents(self, documents):
+        self._validate_document_id_list(documents)
         return documents
 
     def validate_method(self, method):
@@ -241,6 +250,8 @@ class BulkEditSerializer(serializers.Serializer):
             return bulk_edit.add_tag
         elif method == "remove_tag":
             return bulk_edit.remove_tag
+        elif method == "modify_tags":
+            return bulk_edit.modify_tags
         elif method == "delete":
             return bulk_edit.delete
         else:
@@ -283,6 +294,17 @@ class BulkEditSerializer(serializers.Serializer):
         else:
             raise serializers.ValidationError("correspondent not specified")
 
+    def _validate_parameters_modify_tags(self, parameters):
+        if "add_tags" in parameters:
+            self._validate_document_id_list(parameters['add_tags'], "add_tags")
+        else:
+            raise serializers.ValidationError("add_tags not specified")
+
+        if "remove_tags" in parameters:
+            self._validate_document_id_list(parameters['remove_tags'], "remove_tags")
+        else:
+            raise serializers.ValidationError("remove_tags not specified")
+
     def validate(self, attrs):
 
         method = attrs['method']
@@ -294,6 +316,8 @@ class BulkEditSerializer(serializers.Serializer):
             self._validate_parameters_document_type(parameters)
         elif method == bulk_edit.add_tag or method == bulk_edit.remove_tag:
             self._validate_parameters_tags(parameters)
+        elif method == bulk_edit.modify_tags:
+            self._validate_parameters_modify_tags(parameters)
 
         return attrs
 
diff --git a/src/documents/tests/test_api.py b/src/documents/tests/test_api.py
index 0262b6d6a..030de652d 100644
--- a/src/documents/tests/test_api.py
+++ b/src/documents/tests/test_api.py
@@ -743,6 +743,15 @@ class TestBulkEdit(DirectoriesMixin, APITestCase):
         args, kwargs = self.async_task.call_args
         self.assertCountEqual(kwargs['document_ids'], [self.doc4.id])
 
+    def test_modify_tags(self):
+        tag_unrelated = Tag.objects.create(name="unrelated")
+        self.doc2.tags.add(tag_unrelated)
+        self.doc3.tags.add(tag_unrelated)
+        bulk_edit.modify_tags([self.doc2.id, self.doc3.id], add_tags=[self.t2.id], remove_tags=[self.t1.id])
+
+        self.assertCountEqual(list(self.doc2.tags.all()), [self.t2, tag_unrelated])
+        self.assertCountEqual(list(self.doc3.tags.all()), [self.t2, tag_unrelated])
+
     def test_delete(self):
         self.assertEqual(Document.objects.count(), 5)
         bulk_edit.delete([self.doc1.id, self.doc2.id])

From 6e79b771ece557cfe5792d4152019069934542dc Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 25 Dec 2020 00:58:17 -0800
Subject: [PATCH 43/73] Refactor bulk editor to be self-contained

See https://github.com/jonaswinkler/paperless-ng/pull/162#issuecomment-750425915
---
 .../bulk-editor/bulk-editor.component.html    |   6 +-
 .../bulk-editor/bulk-editor.component.ts      | 182 ++++++++++++++----
 .../document-list.component.html              |  13 +-
 .../document-list/document-list.component.ts  | 126 +-----------
 4 files changed, 148 insertions(+), 179 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index b547b8505..11d3603b2 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
-    <button class="btn btn-sm btn-outline-danger" (click)="selectNone.next()">
+    <button class="btn btn-sm btn-outline-danger" (click)="documentList.selectNone()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
       </svg>
@@ -11,13 +11,13 @@
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
     <label class="mr-2 mb-0">Select:</label>
     <div class="btn-group">
-      <button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
+      <button class="btn btn-sm btn-outline-primary" (click)="documentList.selectPage()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
         </svg>
         Page
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
+      <button class="btn btn-sm btn-outline-primary" (click)="documentList.selectAll()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#check-all" />
         </svg>
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 bbf5494f0..19b913af0 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
@@ -1,4 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
 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';
@@ -7,8 +9,12 @@ import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentService } from 'src/app/services/rest/document.service';
+import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component';
 import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 export interface ChangedItems {
@@ -23,33 +29,6 @@ export interface ChangedItems {
 })
 export class BulkEditorComponent {
 
-  @Input()
-  selectedDocuments: Set<number>
-
-  @Input()
-  viewDocuments: PaperlessDocument[]
-
-  @Output()
-  selectPage = new EventEmitter()
-
-  @Output()
-  selectAll = new EventEmitter()
-
-  @Output()
-  selectNone = new EventEmitter()
-
-  @Output()
-  setTags = new EventEmitter()
-
-  @Output()
-  setCorrespondents = new EventEmitter()
-
-  @Output()
-  setDocumentTypes = new EventEmitter()
-
-  @Output()
-  delete = new EventEmitter()
-
   tags: PaperlessTag[]
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
@@ -61,13 +40,13 @@ export class BulkEditorComponent {
   dropdownTypes = FilterableDropdownType
 
   get selectionSpansPages(): boolean {
-    return this.selectedDocuments.size > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd))
+    return this.documentList.selected.size > this.documentList.documents.length || !Array.from(this.documentList.selected).every(sd => this.documentList.documents.find(d => d.id == sd))
   }
 
   private _tagsToggleableItems: ToggleableItem[]
   get tagsToggleableItems(): ToggleableItem[] {
     let tagsToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
+    let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
     if (this.selectionSpansPages) selectedDocuments = []
 
     this.tags?.forEach(t => {
@@ -84,7 +63,7 @@ export class BulkEditorComponent {
   private _correspondentsToggleableItems: ToggleableItem[]
   get correspondentsToggleableItems(): ToggleableItem[] {
     let correspondentsToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
+    let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
     if (this.selectionSpansPages) selectedDocuments = []
 
     this.correspondents?.forEach(c => {
@@ -101,7 +80,7 @@ export class BulkEditorComponent {
   private _documentTypesToggleableItems: ToggleableItem[]
   get documentTypesToggleableItems(): ToggleableItem[] {
     let documentTypesToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
+    let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
     if (this.selectionSpansPages) selectedDocuments = []
 
     this.documentTypes?.forEach(dt => {
@@ -115,11 +94,18 @@ export class BulkEditorComponent {
     return documentTypesToggleableItems
   }
 
+  get documentList(): DocumentListViewService {
+    return this.documentListViewService
+  }
+
   constructor(
     private documentTypeService: DocumentTypeService,
     private tagService: TagService,
     private correspondentService: CorrespondentService,
-    private documentService: DocumentService
+    private documentListViewService: DocumentListViewService,
+    private documentService: DocumentService,
+    private modalService: NgbModal,
+    private openDocumentService: OpenDocumentsService
   ) { }
 
   ngOnInit() {
@@ -142,32 +128,36 @@ export class BulkEditorComponent {
 
   applyTags(newTagsToggleableItems: ToggleableItem[]) {
     let changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
-    if (changedTags.itemsToAdd.length > 0 || changedTags.itemsToRemove.length > 0) this.setTags.emit(changedTags)
+    if (changedTags.itemsToAdd.length > 0 || changedTags.itemsToRemove.length > 0) this.bulkSetTags(changedTags)
   }
 
   removeAllTags() {
-    this.setTags.emit(null)
+    this.bulkSetTags(null)
   }
 
   applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[]) {
     let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
-    if (changedCorrespondents.itemsToAdd.length > 0 || changedCorrespondents.itemsToRemove.length > 0) this.setCorrespondents.emit(changedCorrespondents)
+    if (changedCorrespondents.itemsToAdd.length > 0 || changedCorrespondents.itemsToRemove.length > 0) this.bulkSetCorrespondents(changedCorrespondents)
   }
 
   removeAllCorrespondents() {
-    this.setDocumentTypes.emit(null)
+    this.bulkSetCorrespondents(null)
   }
 
   applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[]) {
     let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
-    if (changedDocumentTypes.itemsToAdd.length > 0 || changedDocumentTypes.itemsToRemove.length > 0) this.setDocumentTypes.emit(changedDocumentTypes)
+    if (changedDocumentTypes.itemsToAdd.length > 0 || changedDocumentTypes.itemsToRemove.length > 0) this.bulkSetDocumentTypes(changedDocumentTypes)
   }
 
   removeAllDocumentTypes() {
-    this.setDocumentTypes.emit(null)
+    this.bulkSetDocumentTypes(null)
   }
 
-  checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
+  applyDelete() {
+    this.bulkDelete()
+  }
+
+  private checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
     let itemsToAdd: any[] = []
     let itemsToRemove: any[] = []
     toggleableItemsA.forEach(oldItem => {
@@ -179,7 +169,117 @@ export class BulkEditorComponent {
     return { itemsToAdd: itemsToAdd, itemsToRemove: itemsToRemove }
   }
 
-  applyDelete() {
-    this.delete.next()
+  private executeBulkOperation(method: string, args): Observable<any> {
+    return this.documentService.bulkEdit(Array.from(this.documentList.selected), method, args).pipe(
+      tap(() => {
+        this.documentList.reload()
+        this.documentList.selected.forEach(id => {
+          this.openDocumentService.refreshDocument(id)
+        })
+        this.documentList.selectNone()
+      })
+    )
+  }
+
+  private bulkSetTags(changedTags: ChangedItems) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Tags Assignment"
+    let action = 'set_tags'
+    let tags
+    let messageFragment = ''
+    let both = changedTags && changedTags.itemsToAdd.length > 0 && changedTags.itemsToRemove.length > 0
+    if (!changedTags) {
+      messageFragment = `remove all tags from`
+    } else {
+      if (changedTags.itemsToAdd.length > 0) {
+        tags = changedTags.itemsToAdd
+        messageFragment = `assign the tag(s) ${changedTags.itemsToAdd.map(t => t.name).join(', ')} to`
+      }
+      if (changedTags.itemsToRemove.length > 0) {
+        if (!both) {
+          action = 'remove_tags'
+          tags = changedTags.itemsToRemove
+        } else {
+          messageFragment += ' and '
+        }
+        messageFragment += `remove the tag(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from`
+      }
+    }
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      // TODO: API endpoints for add/remove multiple tags
+      this.executeBulkOperation(action, {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
+        response => {
+          if (!both) modal.close()
+          else {
+            this.executeBulkOperation('remove_tags', {"tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
+              response => {
+                modal.close()
+              })
+          }
+        }
+      )
+    })
+  }
+
+  private bulkSetCorrespondents(changedCorrespondents: ChangedItems) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Correspondent Assignment"
+    let correspondent
+    let messageFragment = 'remove all correspondents from'
+    if (changedCorrespondents && changedCorrespondents.itemsToAdd.length > 0) {
+      correspondent = changedCorrespondents.itemsToAdd[0]
+      messageFragment = `assign the correspondent ${correspondent.name} to`
+    }
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
+  }
+
+  private bulkSetDocumentTypes(changedDocumentTypes: ChangedItems) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Document Type Assignment"
+    let documentType
+    let messageFragment = 'remove all document types from'
+    if (changedDocumentTypes && changedDocumentTypes.itemsToAdd.length > 0) {
+      documentType = changedDocumentTypes.itemsToAdd[0]
+      messageFragment = `assign the document type ${documentType.name} to`
+    }
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
+  }
+
+  private bulkDelete() {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.delayConfirm(5)
+    modal.componentInstance.title = "Delete confirm"
+    modal.componentInstance.messageBold = `This operation will permanently delete all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.message = `This operation cannot be undone.`
+    modal.componentInstance.btnClass = "btn-danger"
+    modal.componentInstance.btnCaption = "Delete document(s)"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      this.executeBulkOperation("delete", {}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
   }
 }
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 816b9b3b6..6ff1e2ef5 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -79,18 +79,7 @@
 
 <div class="w-100 mb-2 mb-sm-4">
   <app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
-
-  <app-bulk-editor *ngIf="isBulkEditing"
-    [viewDocuments]="list.documents"
-    [(selectedDocuments)]="list.selected"
-    (selectPage)="list.selectPage()"
-    (selectAll)="list.selectAll()"
-    (selectNone)="list.selectNone()"
-    (setTags)="bulkSetTags($event)"
-    (setCorrespondents)="bulkSetCorrespondents($event)"
-    (setDocumentTypes)="bulkSetDocumentTypes($event)"
-    (delete)="bulkDelete()">
-</app-bulk-editor>
+  <app-bulk-editor *ngIf="isBulkEditing"></app-bulk-editor>
 </div>
 
 <div class="d-flex justify-content-between align-items-center">
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 236bdeeaa..699e91cb4 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -1,23 +1,19 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Observable } from 'rxjs';
-import { tap } from 'rxjs/operators';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
-import { DocumentService, DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
+import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
 import { FilterEditorComponent } from './filter-editor/filter-editor.component';
-import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component';
 import { SelectDialogComponent } from '../common/select-dialog/select-dialog.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
 import { ChangedItems } from './bulk-editor/bulk-editor.component';
-import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 
 @Component({
   selector: 'app-document-list',
@@ -32,12 +28,10 @@ export class DocumentListComponent implements OnInit {
     public route: ActivatedRoute,
     private router: Router,
     private toastService: ToastService,
-    public modalService: NgbModal,
+    private modalService: NgbModal,
     private correspondentService: CorrespondentService,
     private documentTypeService: DocumentTypeService,
-    private tagService: TagService,
-    private documentService: DocumentService,
-    private openDocumentService: OpenDocumentsService) { }
+    private tagService: TagService) { }
 
   @ViewChild("filterEditor")
   private filterEditor: FilterEditorComponent
@@ -143,118 +137,4 @@ export class DocumentListComponent implements OnInit {
   trackByDocumentId(index, item: PaperlessDocument) {
     return item.id
   }
-
-  private executeBulkOperation(method: string, args): Observable<any> {
-    return this.documentService.bulkEdit(Array.from(this.list.selected), method, args).pipe(
-      tap(() => {
-        this.list.reload()
-        this.list.selected.forEach(id => {
-          this.openDocumentService.refreshDocument(id)
-        })
-        this.list.selectNone()
-      })
-    )
-  }
-
-  bulkSetTags(changedTags: ChangedItems) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Tags Assignment"
-    let action = 'set_tags'
-    let tags
-    let messageFragment = ''
-    let both = changedTags && changedTags.itemsToAdd.length > 0 && changedTags.itemsToRemove.length > 0
-    if (!changedTags) {
-      messageFragment = `remove all tags from`
-    } else {
-      if (changedTags.itemsToAdd.length > 0) {
-        tags = changedTags.itemsToAdd
-        messageFragment = `assign the tag(s) ${changedTags.itemsToAdd.map(t => t.name).join(', ')} to`
-      }
-      if (changedTags.itemsToRemove.length > 0) {
-        if (!both) {
-          action = 'remove_tags'
-          tags = changedTags.itemsToRemove
-        } else {
-          messageFragment += ' and '
-        }
-        messageFragment += `remove the tag(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from`
-      }
-    }
-    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      // TODO: API endpoints for add/remove multiple tags
-      this.executeBulkOperation(action, {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
-        response => {
-          if (!both) modal.close()
-          else {
-            this.executeBulkOperation('remove_tags', {"tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
-              response => {
-                modal.close()
-              })
-          }
-        }
-      )
-    })
-  }
-
-  bulkSetCorrespondents(changedCorrespondents: ChangedItems) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Correspondent Assignment"
-    let correspondent
-    let messageFragment = 'remove all correspondents from'
-    if (changedCorrespondents && changedCorrespondents.itemsToAdd.length > 0) {
-      correspondent = changedCorrespondents.itemsToAdd[0]
-      messageFragment = `assign the correspondent ${correspondent.name} to`
-    }
-    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkSetDocumentTypes(changedDocumentTypes: ChangedItems) {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Document Type Assignment"
-    let documentType
-    let messageFragment = 'remove all document types from'
-    if (changedDocumentTypes && changedDocumentTypes.itemsToAdd.length > 0) {
-      documentType = changedDocumentTypes.itemsToAdd[0]
-      messageFragment = `assign the document type ${documentType.name} to`
-    }
-    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkDelete() {
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.delayConfirm(5)
-    modal.componentInstance.title = "Delete confirm"
-    modal.componentInstance.messageBold = `This operation will permanently delete all ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.message = `This operation cannot be undone.`
-    modal.componentInstance.btnClass = "btn-danger"
-    modal.componentInstance.btnCaption = "Delete document(s)"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      this.executeBulkOperation("delete", {}).subscribe(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
 }

From 2ac6a02e31a1f4b49583fbbbe637b057db7ccf8b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 25 Dec 2020 01:14:56 -0800
Subject: [PATCH 44/73] More simplification

---
 .../bulk-editor/bulk-editor.component.html    | 24 ++++----
 .../bulk-editor/bulk-editor.component.ts      | 57 +++++++------------
 2 files changed, 34 insertions(+), 47 deletions(-)

diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 11d3603b2..f27d6d201 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -32,29 +32,29 @@
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
         [toggleableItems]="tagsToggleableItems"
         [type]="dropdownTypes.Editing"
-        [showCounts]="!this.selectionSpansPages"
-        [showRemoveAll]="this.selectionSpansPages"
+        [showCounts]="!selectionSpansPages"
+        [showRemoveAll]="selectionSpansPages"
         (open)="tagsDropdownOpen()"
-        (removeAll)="removeAllTags()"
-        (editingComplete)="applyTags($event)">
+        (removeAll)="setTags(null)"
+        (editingComplete)="setTags($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
         [toggleableItems]="correspondentsToggleableItems"
         [type]="dropdownTypes.Editing"
-        [showCounts]="!this.selectionSpansPages"
-        [showRemoveAll]="this.selectionSpansPages"
+        [showCounts]="!selectionSpansPages"
+        [showRemoveAll]="selectionSpansPages"
         (open)="correspondentsDropdownOpen()"
-        (removeAll)="removeAllCorrespondents()"
-        (editingComplete)="applyCorrespondent($event)">
+        (removeAll)="setCorrespondents(null)"
+        (editingComplete)="setCorrespondents($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
         [toggleableItems]="documentTypesToggleableItems"
         [type]="dropdownTypes.Editing"
-        [showCounts]="!this.selectionSpansPages"
-        [showRemoveAll]="this.selectionSpansPages"
+        [showCounts]="!selectionSpansPages"
+        [showRemoveAll]="selectionSpansPages"
         (open)="documentTypesDropdownOpen()"
-        (removeAll)="removeAllDocumentTypes()"
-        (editingComplete)="applyDocumentType($event)">
+        (removeAll)="setDocumentTypes(null)"
+        (editingComplete)="setDocumentTypes($event)">
       </app-filterable-dropdown>
     </div>
   </div>
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 19b913af0..a5732b922 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
@@ -126,37 +126,6 @@ export class BulkEditorComponent {
     this.initialDocumentTypesToggleableItems = this._documentTypesToggleableItems
   }
 
-  applyTags(newTagsToggleableItems: ToggleableItem[]) {
-    let changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
-    if (changedTags.itemsToAdd.length > 0 || changedTags.itemsToRemove.length > 0) this.bulkSetTags(changedTags)
-  }
-
-  removeAllTags() {
-    this.bulkSetTags(null)
-  }
-
-  applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[]) {
-    let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
-    if (changedCorrespondents.itemsToAdd.length > 0 || changedCorrespondents.itemsToRemove.length > 0) this.bulkSetCorrespondents(changedCorrespondents)
-  }
-
-  removeAllCorrespondents() {
-    this.bulkSetCorrespondents(null)
-  }
-
-  applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[]) {
-    let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
-    if (changedDocumentTypes.itemsToAdd.length > 0 || changedDocumentTypes.itemsToRemove.length > 0) this.bulkSetDocumentTypes(changedDocumentTypes)
-  }
-
-  removeAllDocumentTypes() {
-    this.bulkSetDocumentTypes(null)
-  }
-
-  applyDelete() {
-    this.bulkDelete()
-  }
-
   private checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
     let itemsToAdd: any[] = []
     let itemsToRemove: any[] = []
@@ -181,7 +150,13 @@ export class BulkEditorComponent {
     )
   }
 
-  private bulkSetTags(changedTags: ChangedItems) {
+  setTags(newTagsToggleableItems: ToggleableItem[]) {
+    let changedTags: ChangedItems
+    if (newTagsToggleableItems) {
+      changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
+      if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 0) return
+    }
+
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Tags Assignment"
     let action = 'set_tags'
@@ -224,7 +199,13 @@ export class BulkEditorComponent {
     })
   }
 
-  private bulkSetCorrespondents(changedCorrespondents: ChangedItems) {
+  setCorrespondents(newCorrespondentsToggleableItems: ToggleableItem[]) {
+    let changedCorrespondents: ChangedItems
+    if (newCorrespondentsToggleableItems) {
+      changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
+      if (changedCorrespondents.itemsToAdd.length == 0 && changedCorrespondents.itemsToRemove.length == 0) return
+    }
+
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Correspondent Assignment"
     let correspondent
@@ -245,7 +226,13 @@ export class BulkEditorComponent {
     })
   }
 
-  private bulkSetDocumentTypes(changedDocumentTypes: ChangedItems) {
+  setDocumentTypes(newDocumentTypesToggleableItems: ToggleableItem[]) {
+    let changedDocumentTypes: ChangedItems
+    if (newDocumentTypesToggleableItems) {
+      changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
+      if (changedDocumentTypes.itemsToAdd.length == 0 && changedDocumentTypes.itemsToRemove.length == 0) return
+    }
+
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Document Type Assignment"
     let documentType
@@ -266,7 +253,7 @@ export class BulkEditorComponent {
     })
   }
 
-  private bulkDelete() {
+  applyDelete() {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.delayConfirm(5)
     modal.componentInstance.title = "Delete confirm"

From 320298e3ffb5a750024377867188475a921de831 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 12:43:05 +0100
Subject: [PATCH 45/73] add api method to get selection data

---
 src/documents/serialisers.py |  8 +++++
 src/documents/views.py       | 60 ++++++++++++++++++++++++++++++++++--
 src/paperless/urls.py        |  7 +++--
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/src/documents/serialisers.py b/src/documents/serialisers.py
index f34176d8a..155030a68 100644
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@@ -393,3 +393,11 @@ class PostDocumentSerializer(serializers.Serializer):
             return [tag.id for tag in tags]
         else:
             return None
+
+
+class SelectionDataSerializer(serializers.Serializer):
+
+    documents = serializers.ListField(
+        required=True,
+        child=serializers.IntegerField()
+    )
diff --git a/src/documents/views.py b/src/documents/views.py
index 8f6ec7f13..d4d7b7123 100755
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -4,7 +4,7 @@ from datetime import datetime
 from time import mktime
 
 from django.conf import settings
-from django.db.models import Count, Max
+from django.db.models import Count, Max, Case, When, IntegerField
 from django.http import HttpResponse, HttpResponseBadRequest, Http404
 from django.views.decorators.cache import cache_control
 from django.views.generic import TemplateView
@@ -48,7 +48,7 @@ from .serialisers import (
     DocumentTypeSerializer,
     PostDocumentSerializer,
     SavedViewSerializer,
-    BulkEditSerializer
+    BulkEditSerializer, SelectionDataSerializer
 )
 
 
@@ -372,6 +372,62 @@ class PostDocumentView(APIView):
         return Response("OK")
 
 
+class SelectionDataView(APIView):
+
+    permission_classes = (IsAuthenticated,)
+    serializer_class = SelectionDataSerializer
+    parser_classes = (parsers.MultiPartParser, parsers.JSONParser)
+
+    def get_serializer_context(self):
+        return {
+            'request': self.request,
+            'format': self.format_kwarg,
+            'view': self
+        }
+
+    def get_serializer(self, *args, **kwargs):
+        kwargs['context'] = self.get_serializer_context()
+        return self.serializer_class(*args, **kwargs)
+
+    def post(self, request, format=None):
+        serializer = self.get_serializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        ids = serializer.validated_data.get('documents')
+
+        correspondents = Correspondent.objects.annotate(dcount=Count(Case(
+            When(documents__id__in=ids, then=1),
+            output_field=IntegerField()
+        )))
+
+        tags = Tag.objects.annotate(dcount=Count(Case(
+            When(documents__id__in=ids, then=1),
+            output_field=IntegerField()
+        )))
+
+        types = DocumentType.objects.annotate(dcount=Count(Case(
+            When(documents__id__in=ids, then=1),
+            output_field=IntegerField()
+        )))
+
+        r = Response({
+            "selected_correspondents": [{
+                "id": t.id,
+                "dcount": t.dcount
+            } for t in correspondents],
+            "selected_tags": [{
+                "id": t.id,
+                "dcount": t.dcount
+            } for t in tags],
+            "selected_types": [{
+                "id": t.id,
+                "dcount": t.dcount
+            } for t in types]
+        })
+
+        return r
+
+
 class SearchView(APIView):
 
     permission_classes = (IsAuthenticated,)
diff --git a/src/paperless/urls.py b/src/paperless/urls.py
index 831eb02b4..39e99a7a4 100755
--- a/src/paperless/urls.py
+++ b/src/paperless/urls.py
@@ -19,7 +19,8 @@ from documents.views import (
     StatisticsView,
     PostDocumentView,
     SavedViewViewSet,
-    BulkEditView
+    BulkEditView,
+    SelectionDataView
 )
 from paperless.views import FaviconView
 
@@ -53,10 +54,12 @@ urlpatterns = [
         re_path(r"^documents/post_document/", PostDocumentView.as_view(),
                 name="post_document"),
 
-
         re_path(r"^documents/bulk_edit/", BulkEditView.as_view(),
                 name="bulk_edit"),
 
+        re_path(r"^documents/selection_data/", SelectionDataView.as_view(),
+                name="selection_data"),
+
         path('token/', views.obtain_auth_token)
 
     ] + api_router.urls)),

From 802bd7fb0dc872ab22da6fd2fe405c445772c9d1 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 12:54:47 +0100
Subject: [PATCH 46/73] client support for selection data

---
 .../src/app/services/rest/document.service.ts | 18 +++++++++++++++-
 src/documents/views.py                        | 21 ++++++++++---------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/services/rest/document.service.ts b/src-ui/src/app/services/rest/document.service.ts
index ff17e972e..9caaecdb2 100644
--- a/src-ui/src/app/services/rest/document.service.ts
+++ b/src-ui/src/app/services/rest/document.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata';
 import { AbstractPaperlessService } from './abstract-paperless-service';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Results } from 'src/app/data/results';
 import { FilterRule } from 'src/app/data/filter-rule';
@@ -22,6 +22,17 @@ export const DOCUMENT_SORT_FIELDS = [
   { field: 'modified', name: $localize`Modified` }
 ]
 
+export interface SelectionDataItem {
+  id: number
+  document_count: number
+}
+
+export interface SelectionData {
+  correspondents: SelectionDataItem[]
+  tags: SelectionDataItem[]
+  document_types: SelectionDataItem[]
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -114,4 +125,9 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     })
   }
 
+  selectionData(ids: number[]): Observable<SelectionData> {
+    console.log(ids)
+    return this.http.post<SelectionData>(this.getResourceUrl(null, 'selection_data'), {"documents": ids})
+  }
+
 }
diff --git a/src/documents/views.py b/src/documents/views.py
index d4d7b7123..a50896057 100755
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -395,17 +395,18 @@ class SelectionDataView(APIView):
 
         ids = serializer.validated_data.get('documents')
 
-        correspondents = Correspondent.objects.annotate(dcount=Count(Case(
+        correspondents = Correspondent.objects.annotate(
+            document_count=Count(Case(
+                When(documents__id__in=ids, then=1),
+                output_field=IntegerField()
+            )))
+
+        tags = Tag.objects.annotate(document_count=Count(Case(
             When(documents__id__in=ids, then=1),
             output_field=IntegerField()
         )))
 
-        tags = Tag.objects.annotate(dcount=Count(Case(
-            When(documents__id__in=ids, then=1),
-            output_field=IntegerField()
-        )))
-
-        types = DocumentType.objects.annotate(dcount=Count(Case(
+        types = DocumentType.objects.annotate(document_count=Count(Case(
             When(documents__id__in=ids, then=1),
             output_field=IntegerField()
         )))
@@ -413,15 +414,15 @@ class SelectionDataView(APIView):
         r = Response({
             "selected_correspondents": [{
                 "id": t.id,
-                "dcount": t.dcount
+                "document_count": t.document_count
             } for t in correspondents],
             "selected_tags": [{
                 "id": t.id,
-                "dcount": t.dcount
+                "document_count": t.document_count
             } for t in tags],
             "selected_types": [{
                 "id": t.id,
-                "dcount": t.dcount
+                "document_count": t.document_count
             } for t in types]
         })
 

From 4b9a8f340902427229119e5ae5da2e6151872bdf Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 13:07:58 +0100
Subject: [PATCH 47/73] move document count into matching model

---
 src-ui/src/app/data/matching-model.ts          | 2 ++
 src-ui/src/app/data/paperless-correspondent.ts | 2 --
 src-ui/src/app/data/paperless-document-type.ts | 2 --
 src-ui/src/app/data/paperless-tag.ts           | 3 +--
 4 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/data/matching-model.ts b/src-ui/src/app/data/matching-model.ts
index dd9ae95ff..dfb007ecb 100644
--- a/src-ui/src/app/data/matching-model.ts
+++ b/src-ui/src/app/data/matching-model.ts
@@ -29,4 +29,6 @@ export interface MatchingModel extends ObjectWithId {
 
     is_insensitive?: boolean
 
+    document_count?: number
+
 }
diff --git a/src-ui/src/app/data/paperless-correspondent.ts b/src-ui/src/app/data/paperless-correspondent.ts
index 217e62529..f2ff18525 100644
--- a/src-ui/src/app/data/paperless-correspondent.ts
+++ b/src-ui/src/app/data/paperless-correspondent.ts
@@ -1,8 +1,6 @@
 import { MatchingModel } from './matching-model';
 
 export interface PaperlessCorrespondent extends MatchingModel {
-
-  document_count?: number
   
   last_correspondence?: Date
 
diff --git a/src-ui/src/app/data/paperless-document-type.ts b/src-ui/src/app/data/paperless-document-type.ts
index d099bec47..b1d002461 100644
--- a/src-ui/src/app/data/paperless-document-type.ts
+++ b/src-ui/src/app/data/paperless-document-type.ts
@@ -2,6 +2,4 @@ import { MatchingModel } from './matching-model';
 
 export interface PaperlessDocumentType extends MatchingModel {
 
-  document_count?: number
-
 }
diff --git a/src-ui/src/app/data/paperless-tag.ts b/src-ui/src/app/data/paperless-tag.ts
index b13653e91..45ef8a613 100644
--- a/src-ui/src/app/data/paperless-tag.ts
+++ b/src-ui/src/app/data/paperless-tag.ts
@@ -23,6 +23,5 @@ export interface PaperlessTag extends MatchingModel {
     colour?: number
 
     is_inbox_tag?: boolean
-  
-    document_count?: number
+
 }

From a2ad62b3104cbca843ab07cd151334af2d1a1887 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 13:10:43 +0100
Subject: [PATCH 48/73] typing

---
 .../filterable-dropdown.component.ts                   | 10 ++++------
 .../toggleable-dropdown-button.component.ts            |  6 ++----
 .../filter-editor/filter-editor.component.ts           |  5 ++---
 3 files changed, 8 insertions(+), 13 deletions(-)

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 3f0b3c3ad..e66966486 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,10 +1,8 @@
 import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } 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 { FilterPipe } from  'src/app/pipes/filter.pipe';
 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';
 
 export enum FilterableDropdownType {
   Filtering = 'filtering',
@@ -24,7 +22,7 @@ export class FilterableDropdownComponent {
   filterText: string
 
   @Input()
-  set items(items: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) {
+  set items(items: MatchingModel[]) {
     if (items) {
       this._toggleableItems = items.map(i => {
         return {item: i, state: ToggleableItemState.NotSelected, count: i.document_count}
@@ -45,13 +43,13 @@ export class FilterableDropdownComponent {
   }
 
   @Input()
-  set itemsSelected(itemsSelected: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) {
+  set itemsSelected(itemsSelected: MatchingModel[]) {
     this.toggleableItems.forEach(i => {
       i.state = (itemsSelected.find(is => is.id == i.item.id)) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
     })
   }
 
-  get itemsSelected() :(PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[] {
+  get itemsSelected(): MatchingModel[] {
     return this.toggleableItems.filter(ti => ti.state == ToggleableItemState.Selected).map(ti => ti.item)
   }
 
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 4d58023ad..adfea556a 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
@@ -1,10 +1,8 @@
 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 { MatchingModel } from 'src/app/data/matching-model';
 
 export interface ToggleableItem {
-  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
+  item: MatchingModel,
   state: ToggleableItemState,
   count: number
 }
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index 2d88579f9..dfc0e4e2c 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -4,7 +4,7 @@ import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
@@ -42,8 +42,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
   constructor(
     private documentTypeService: DocumentTypeService,
     private tagService: TagService,
-    private correspondentService: CorrespondentService,
-    private dateParser: NgbDateParserFormatter
+    private correspondentService: CorrespondentService
   ) { }
 
   tags: PaperlessTag[] = []

From bf79b252ad011df752bc32d07910c7723d0dcd60 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 13:12:01 +0100
Subject: [PATCH 49/73] remove "Remove All"

---
 .../filterable-dropdown/filterable-dropdown.component.html  | 6 ------
 .../filterable-dropdown/filterable-dropdown.component.ts    | 6 ------
 .../document-list/bulk-editor/bulk-editor.component.html    | 6 ------
 3 files changed, 18 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 f9bf78b6c..58c831456 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
@@ -19,12 +19,6 @@
           <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
         </div>
       </div>
-      <button *ngIf="showRemoveAll" role="menuitem" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" (click)="removeAll.next()">
-        <svg class="toolbaricon text-danger" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#x" />
-        </svg>
-        <small class="my-1">Remove All</small>
-      </button>
       <div *ngIf="toggleableItems" class="items">
         <ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
           <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
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 e66966486..bffbb86e1 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
@@ -67,18 +67,12 @@ export class FilterableDropdownComponent {
   @Input()
   singular: boolean = false
 
-  @Input()
-  showRemoveAll: boolean = false
-
   @Output()
   toggle = new EventEmitter()
 
   @Output()
   open = new EventEmitter()
 
-  @Output()
-  removeAll = new EventEmitter()
-
   @Output()
   editingComplete = new EventEmitter()
 
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index f27d6d201..aa85fdb12 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -33,27 +33,21 @@
         [toggleableItems]="tagsToggleableItems"
         [type]="dropdownTypes.Editing"
         [showCounts]="!selectionSpansPages"
-        [showRemoveAll]="selectionSpansPages"
         (open)="tagsDropdownOpen()"
-        (removeAll)="setTags(null)"
         (editingComplete)="setTags($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
         [toggleableItems]="correspondentsToggleableItems"
         [type]="dropdownTypes.Editing"
         [showCounts]="!selectionSpansPages"
-        [showRemoveAll]="selectionSpansPages"
         (open)="correspondentsDropdownOpen()"
-        (removeAll)="setCorrespondents(null)"
         (editingComplete)="setCorrespondents($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
         [toggleableItems]="documentTypesToggleableItems"
         [type]="dropdownTypes.Editing"
         [showCounts]="!selectionSpansPages"
-        [showRemoveAll]="selectionSpansPages"
         (open)="documentTypesDropdownOpen()"
-        (removeAll)="setDocumentTypes(null)"
         (editingComplete)="setDocumentTypes($event)">
       </app-filterable-dropdown>
     </div>

From 3dd4583ea84cf07a379fcf3c99e5b8438cab8a53 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 13:23:11 +0100
Subject: [PATCH 50/73] always show count badges

---
 .../filterable-dropdown.component.html                |  2 +-
 .../filterable-dropdown.component.ts                  | 11 -----------
 .../toggleable-dropdown-button.component.html         |  2 +-
 .../toggleable-dropdown-button.component.ts           |  3 ---
 .../bulk-editor/bulk-editor.component.html            |  3 ---
 5 files changed, 2 insertions(+), 19 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 58c831456..5f9440336 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" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
+          <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></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">
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 bffbb86e1..45a037f65 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
@@ -76,17 +76,6 @@ export class FilterableDropdownComponent {
   @Output()
   editingComplete = new EventEmitter()
 
-  _showCounts: boolean = true
-
-  @Input()
-  set showCounts(show: boolean) {
-    this._showCounts = show
-  }
-
-  get showCounts(): boolean {
-    return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected.length == 0))
-  }
-
   hasBeenToggled:boolean = false
 
   constructor(private filterPipe: FilterPipe) { }
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 32f9c58ad..daa72b41d 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 *ngIf="showCounts" class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.count}}</div>
+  <div 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 adfea556a..400029615 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
@@ -23,9 +23,6 @@ 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.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index aa85fdb12..fd619717f 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -32,21 +32,18 @@
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
         [toggleableItems]="tagsToggleableItems"
         [type]="dropdownTypes.Editing"
-        [showCounts]="!selectionSpansPages"
         (open)="tagsDropdownOpen()"
         (editingComplete)="setTags($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
         [toggleableItems]="correspondentsToggleableItems"
         [type]="dropdownTypes.Editing"
-        [showCounts]="!selectionSpansPages"
         (open)="correspondentsDropdownOpen()"
         (editingComplete)="setCorrespondents($event)">
       </app-filterable-dropdown>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
         [toggleableItems]="documentTypesToggleableItems"
         [type]="dropdownTypes.Editing"
-        [showCounts]="!selectionSpansPages"
         (open)="documentTypesDropdownOpen()"
         (editingComplete)="setDocumentTypes($event)">
       </app-filterable-dropdown>

From a283b815ef3f07be46af85ff18aa5f9f00df60dd Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 13:34:36 +0100
Subject: [PATCH 51/73] refactor

---
 .../toggleable-dropdown-button.component.ts           | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

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 400029615..cffbc916f 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
@@ -36,9 +36,12 @@ export class ToggleableDropdownButtonComponent {
   }
 
   getSelectedIconName() {
-    let iconName = ''
-    if (this.toggleableItem?.state == ToggleableItemState.Selected) iconName = 'check'
-    else if (this.toggleableItem?.state == ToggleableItemState.PartiallySelected) iconName = 'dash'
-    return iconName
+    if (this.toggleableItem?.state == ToggleableItemState.Selected) {
+      return "check"
+    } else if (this.toggleableItem?.state == ToggleableItemState.PartiallySelected) {
+      return "dash"
+    } else {
+      return ""
+    }
   }
 }

From c2a47ca4b10c283868dfd8e9ced9af971a0e1abf Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 13:34:54 +0100
Subject: [PATCH 52/73] remove "selectionSpansPages"

---
 .../document-list/bulk-editor/bulk-editor.component.ts   | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

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 a5732b922..4365e00b0 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
@@ -39,16 +39,11 @@ export class BulkEditorComponent {
 
   dropdownTypes = FilterableDropdownType
 
-  get selectionSpansPages(): boolean {
-    return this.documentList.selected.size > this.documentList.documents.length || !Array.from(this.documentList.selected).every(sd => this.documentList.documents.find(d => d.id == sd))
-  }
-
   private _tagsToggleableItems: ToggleableItem[]
   get tagsToggleableItems(): ToggleableItem[] {
     let tagsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
-    if (this.selectionSpansPages) selectedDocuments = []
-
+ 
     this.tags?.forEach(t => {
       let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
       let state = ToggleableItemState.NotSelected
@@ -64,7 +59,6 @@ export class BulkEditorComponent {
   get correspondentsToggleableItems(): ToggleableItem[] {
     let correspondentsToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
-    if (this.selectionSpansPages) selectedDocuments = []
 
     this.correspondents?.forEach(c => {
       let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
@@ -81,7 +75,6 @@ export class BulkEditorComponent {
   get documentTypesToggleableItems(): ToggleableItem[] {
     let documentTypesToggleableItems = []
     let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
-    if (this.selectionSpansPages) selectedDocuments = []
 
     this.documentTypes?.forEach(dt => {
       let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)

From 131ebf0480d88b6f6363785b42e0ae3259495992 Mon Sep 17 00:00:00 2001
From: Jonas Winkler <dev@jpwinkler.de>
Date: Sun, 27 Dec 2020 17:07:33 +0100
Subject: [PATCH 53/73] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7a5f6028d..7f3808905 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 [![Documentation Status](https://readthedocs.org/projects/paperless-ng/badge/?version=latest)](https://paperless-ng.readthedocs.io/en/latest/?badge=latest)
 [![Gitter](https://badges.gitter.im/paperless-ng/community.svg)](https://gitter.im/paperless-ng/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Docker Hub Pulls](https://img.shields.io/docker/pulls/jonaswinkler/paperless-ng.svg)](https://hub.docker.com/r/jonaswinkler/paperless-ng)
-[![Coverage Status](https://coveralls.io/repos/github/jonaswinkler/paperless-ng/badge.svg?branch=master)](https://coveralls.io/github/jonaswinkler/paperless-ng?branch=master)  *<sup><-- green badge, yay :)</sup>*
+[![Coverage Status](https://coveralls.io/repos/github/jonaswinkler/paperless-ng/badge.svg?branch=master)](https://coveralls.io/github/jonaswinkler/paperless-ng?branch=master)
 
 # Paperless-ng
 

From b8e7506de42723538faac6aab528a0b17ad8290f Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 27 Dec 2020 23:55:19 +0100
Subject: [PATCH 54/73] partial selection model implementation

---
 .../date-dropdown/date-dropdown.component.ts  |  12 +-
 .../filterable-dropdown.component.html        |  12 +-
 .../filterable-dropdown.component.ts          | 145 ++++++++----
 .../toggleable-dropdown-button.component.ts   |   3 +-
 .../bulk-editor/bulk-editor.component.html    |   4 +-
 .../filter-editor.component.html              |  10 +-
 .../filter-editor/filter-editor.component.ts  | 222 +++++++-----------
 7 files changed, 199 insertions(+), 209 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index e787ce11e..1bf5d0216 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -30,9 +30,15 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
   @Input()
   dateBefore: string
 
+  @Output()
+  dateBeforeChange = new EventEmitter<string>()
+
   @Input()
   dateAfter: string
 
+  @Output()
+  dateAfterChange = new EventEmitter<string>()
+
   @Input()
   title: string
 
@@ -83,6 +89,8 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
   }
 
   onChange() {
+    this.dateAfterChange.emit(this.dateAfter)
+    this.dateBeforeChange.emit(this.dateBefore)
     this.datesSet.emit({after: this.dateAfter, before: this.dateBefore})
   }
 
@@ -91,12 +99,12 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
   }
 
   clearBefore() {
-    this.dateBefore = null;
+    this.dateBefore = null
     this.onChange()
   }
 
   clearAfter() {
-    this.dateAfter = null;
+    this.dateAfter = null
     this.onChange()
   }
 
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 5f9440336..1261ff921 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
@@ -1,14 +1,14 @@
 <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== types.Editing && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== types.Editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
       <svg class="toolbaricon" fill="currentColor">
         <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
       </svg>
     </div>
-    <ng-container *ngIf="type !== types.Editing && itemsSelected?.length > 0">
+    <ng-container *ngIf="type !== types.Editing && selectionModel.selectionSize() > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
-        {{itemsSelected?.length}}
+        {{selectionModel.selectionSize()}}
       </div>
     </ng-container>
   </button>
@@ -19,9 +19,9 @@
           <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
         </div>
       </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>
+      <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>
       </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">
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 45a037f65..31c9d064e 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
@@ -3,12 +3,55 @@ import { FilterPipe } from  'src/app/pipes/filter.pipe';
 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';
 
 export enum FilterableDropdownType {
   Filtering = 'filtering',
   Editing = 'editing'
 }
 
+export class FilterableDropdownSelectionModel {
+
+  changed = new Subject<FilterableDropdownSelectionModel>()
+
+  multiple = false
+
+  items: ToggleableItem[] = []
+
+  getSelected() {
+    return this.items.filter(i => i.state == ToggleableItemState.Selected).map(i => i.item)
+  }
+
+
+
+  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)
+      }
+    }
+  }
+
+  selectionSize() {
+    return this.getSelected().length
+  }
+}
+
 @Component({
   selector: 'app-filterable-dropdown',
   templateUrl: './filterable-dropdown.component.html',
@@ -24,33 +67,45 @@ export class FilterableDropdownComponent {
   @Input()
   set items(items: MatchingModel[]) {
     if (items) {
-      this._toggleableItems = items.map(i => {
+      this._selectionModel.items = items.map(i => {
         return {item: i, state: ToggleableItemState.NotSelected, count: i.document_count}
       })
     }
   }
 
-  _toggleableItems: ToggleableItem[] = []
-
-  @Input()
-  set toggleableItems (toggleableItems: ToggleableItem[]) {
-    if (this.type == FilterableDropdownType.Editing && this.dropdown?.isOpen()) return
-    else this._toggleableItems = toggleableItems
+  get items(): MatchingModel[] {
+    return this._selectionModel.items.map(i => i.item)
   }
 
-  get toggleableItems(): ToggleableItem[] {
-    return this._toggleableItems
-  }
+  _selectionModel = new FilterableDropdownSelectionModel()
 
   @Input()
-  set itemsSelected(itemsSelected: MatchingModel[]) {
-    this.toggleableItems.forEach(i => {
-      i.state = (itemsSelected.find(is => is.id == i.item.id)) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
+  set selectionModel(model: FilterableDropdownSelectionModel) {
+    if (this.selectionModel) {
+      this.selectionModel.changed.complete()
+      model.items = this.selectionModel.items
+      model.multiple = this.selectionModel.multiple
+    }
+    model.changed.subscribe(updatedModel => {
+      this.selectionModelChange.next(updatedModel)
     })
+    this._selectionModel = model
   }
 
-  get itemsSelected(): MatchingModel[] {
-    return this.toggleableItems.filter(ti => ti.state == ToggleableItemState.Selected).map(ti => ti.item)
+  get selectionModel(): FilterableDropdownSelectionModel {
+    return this._selectionModel
+  }
+
+  @Output()
+  selectionModelChange = new EventEmitter<FilterableDropdownSelectionModel>()
+
+  @Input()
+  set multiple(value: boolean) {
+    this.selectionModel.multiple = value
+  }
+
+  get multiple() {
+    return this.selectionModel.multiple
   }
 
   @Input()
@@ -64,50 +119,40 @@ export class FilterableDropdownComponent {
 
   types = FilterableDropdownType
 
-  @Input()
-  singular: boolean = false
-
-  @Output()
-  toggle = new EventEmitter()
-
-  @Output()
-  open = new EventEmitter()
-
-  @Output()
-  editingComplete = new EventEmitter()
-
   hasBeenToggled:boolean = false
 
-  constructor(private filterPipe: FilterPipe) { }
+  constructor(private filterPipe: FilterPipe) {
+    this.selectionModel = new FilterableDropdownSelectionModel()
+  }
 
   toggleItem(toggleableItem: ToggleableItem): void {
-    if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
-      this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
-    }
-    this.hasBeenToggled = true
-    this.toggle.emit(toggleableItem.item)
+    // if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
+    //   this.selectionModel.items.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
+    // }
+    // this.hasBeenToggled = true
+    // this.toggle.emit(toggleableItem.item)
   }
 
   dropdownOpenChange(open: boolean): void {
-    if (open) {
-      setTimeout(() => {
-        this.listFilterTextInput.nativeElement.focus();
-      }, 0)
-      this.hasBeenToggled = false
-      this.open.next()
-    } else {
-      this.filterText = ''
-      if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.toggleableItems)
-    }
+    // if (open) {
+    //   setTimeout(() => {
+    //     this.listFilterTextInput.nativeElement.focus();
+    //   }, 0)
+    //   this.hasBeenToggled = false
+    //   this.open.next()
+    // } else {
+    //   this.filterText = ''
+    //   if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.toggleableItems)
+    // }
   }
 
   listFilterEnter(): void {
-    let filtered = this.filterPipe.transform(this.toggleableItems, this.filterText)
-    if (filtered.length == 1) {
-      let toggleableItem = this.toggleableItems.find(ti => ti.item.id == filtered[0].item.id)
-      if (toggleableItem) toggleableItem.state = ToggleableItemState.Selected
-      this.toggleItem(filtered[0])
-      this.dropdown.close()
-    }
+    // let filtered = this.filterPipe.transform(this.toggleableItems, this.filterText)
+    // if (filtered.length == 1) {
+    //   let toggleableItem = this.toggleableItems.find(ti => ti.item.id == filtered[0].item.id)
+    //   if (toggleableItem) toggleableItem.state = ToggleableItemState.Selected
+    //   this.toggleItem(filtered[0])
+    //   this.dropdown.close()
+    // }
   }
 }
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 cffbc916f..b881edd5d 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
@@ -31,8 +31,7 @@ export class ToggleableDropdownButtonComponent {
   }
 
   toggleItem(): void {
-    this.toggleableItem.state = (this.toggleableItem.state == ToggleableItemState.NotSelected || this.toggleableItem.state == ToggleableItemState.PartiallySelected) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
-    this.toggle.emit(this.toggleableItem)
+    this.toggle.emit()
   }
 
   getSelectedIconName() {
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index fd619717f..800ef3742 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<!-- <div class="row">
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
     <button class="btn btn-sm btn-outline-danger" (click)="documentList.selectNone()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
@@ -58,4 +58,4 @@
       Delete
     </button>
   </div>
-</div>
+</div> -->
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 2d480bfed..f029275eb 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -8,11 +8,11 @@
   <div class="w-100 d-xl-none"></div>
    <div class="col col-xl-auto mb-2 mb-xl-0">
      <div class="d-flex">
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filterable-dropdown>
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filterable-dropdown>
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filterable-dropdown>
-       <app-date-dropdown class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-date-dropdown>
-       <app-date-dropdown [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-date-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [(selectionModel)]="tagSelectionModel" (selectionModelChange)="updateRules()" [multiple]="true" title="Tags" icon="tag-fill"></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [(selectionModel)]="correspondentSelectionModel" (selectionModelChange)="updateRules()" title="Correspondents" icon="person-fill"></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [(selectionModel)]="documentTypeSelectionModel" (selectionModelChange)="updateRules()" title="Document types" icon="file-earmark-fill"></app-filterable-dropdown>
+       <app-date-dropdown class="mr-2 mr-md-3" [(dateBefore)]="dateCreatedBefore" [(dateAfter)]="dateCreatedAfter" title="Created" (datesSet)="updateRules()"></app-date-dropdown>
+       <app-date-dropdown [(dateBefore)]="dateAddedBefore" [(dateAfter)]="dateAddedAfter" title="Added"  (datesSet)="updateRules()"></app-date-dropdown>
      </div>
    </div>
    <div class="w-100 d-xl-none"></div>
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index dfc0e4e2c..3b072c434 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -3,14 +3,13 @@ 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 { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
+import { debounceTime, distinctUntilChanged, filter, flatMap, mergeMap } from 'rxjs/operators';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { FilterRule } from 'src/app/data/filter-rule';
 import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type';
-import { DateSelection } from 'src/app/components/common/date-dropdown/date-dropdown.component';
+import { FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
 
 @Component({
   selector: 'app-filter-editor',
@@ -46,37 +45,91 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
   ) { }
 
   tags: PaperlessTag[] = []
-  correspondents: PaperlessCorrespondent[]
+  correspondents: PaperlessCorrespondent[] = []
   documentTypes: PaperlessDocumentType[] = []
 
+  _titleFilter = ""
+
+  tagSelectionModel = new FilterableDropdownSelectionModel()
+  correspondentSelectionModel = new FilterableDropdownSelectionModel()
+  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+
+  dateCreatedBefore: string
+  dateCreatedAfter: string
+  dateAddedBefore: string
+  dateAddedAfter: string
+
   @Input()
-  filterRules: FilterRule[]
+  set filterRules (value: FilterRule[]) {
+    console.log("SET FILTER RULES")
+    value.forEach(rule => {
+      switch (rule.rule_type) {
+        case FILTER_TITLE:
+          this._titleFilter = rule.value
+          break
+        case FILTER_CREATED_AFTER:
+          this.dateCreatedAfter = rule.value
+          break
+        case FILTER_CREATED_BEFORE:
+          this.dateCreatedBefore = rule.value
+          break
+        case FILTER_ADDED_AFTER:
+          this.dateAddedAfter = rule.value
+          break
+        case FILTER_ADDED_BEFORE:
+          this.dateAddedBefore = rule.value
+          break
+      }
+    })
+
+    this.tagService.getCachedMany(value.filter(v => v.rule_type == FILTER_HAS_TAG).map(rule => +rule.value)).subscribe(tags => {
+      console.log(tags)
+      tags.forEach(tag => this.tagSelectionModel.toggle(tag, false))
+    })
+  }
 
   @Output()
   filterRulesChange = new EventEmitter<FilterRule[]>()
 
+  updateRules() {
+    console.log("UPDATE RULES!!!")
+    let filterRules: FilterRule[] = []
+    if (this._titleFilter) {
+      filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
+    }
+    this.tagSelectionModel.getSelected().forEach(tag => {
+      filterRules.push({rule_type: FILTER_HAS_TAG, value: tag.id.toString()})
+    })
+    this.correspondentSelectionModel.getSelected().forEach(correspondent => {
+      filterRules.push({rule_type: FILTER_CORRESPONDENT, value: correspondent.id.toString()})
+    })
+    this.documentTypeSelectionModel.getSelected().forEach(documentType => {
+      filterRules.push({rule_type: FILTER_DOCUMENT_TYPE, value: documentType.id.toString()})
+    })
+    if (this.dateCreatedBefore) {
+      filterRules.push({rule_type: FILTER_CREATED_BEFORE, value: this.dateCreatedBefore})
+    }
+    if (this.dateCreatedAfter) {
+      filterRules.push({rule_type: FILTER_CREATED_AFTER, value: this.dateCreatedAfter})
+    }
+    if (this.dateAddedBefore) {
+      filterRules.push({rule_type: FILTER_ADDED_BEFORE, value: this.dateAddedBefore})
+    }
+    if (this.dateAddedAfter) {
+      filterRules.push({rule_type: FILTER_ADDED_AFTER, value: this.dateAddedAfter})
+    }
+    console.log(filterRules)
+    this.filterRulesChange.next(filterRules)
+  }
+
   hasFilters() {
-    return this.filterRules.length > 0
-  }
-
-  get selectedTags(): PaperlessTag[] {
-    let tagRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_HAS_TAG)
-    return this.tags?.filter(t => tagRules.find(tr => +tr.value == t.id))
-  }
-
-  get selectedCorrespondents(): PaperlessCorrespondent[] {
-    let correspondentRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_CORRESPONDENT)
-    return this.correspondents?.filter(c => correspondentRules.find(cr => +cr.value == c.id))
-  }
-
-  get selectedDocumentTypes(): PaperlessDocumentType[] {
-    let documentTypeRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_DOCUMENT_TYPE)
-    return this.documentTypes?.filter(dt => documentTypeRules.find(dtr => +dtr.value == dt.id))
+    return this._titleFilter || 
+      this.dateCreatedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
+      this.tagSelectionModel.selectionSize() || this.correspondentSelectionModel.selectionSize() || this.documentTypeSelectionModel.selectionSize()
   }
 
   get titleFilter() {
-    let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
-    return existingRule ? existingRule.value : ''
+    return this._titleFilter
   }
 
   set titleFilter(value) {
@@ -97,142 +150,27 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
       debounceTime(400),
       distinctUntilChanged()
     ).subscribe(title => {
-      this.setTitleRule(title)
+      this._titleFilter = title
+      this.updateRules()
     })
   }
 
   ngOnDestroy() {
     this.titleFilterDebounce.complete()
-    // TODO: not sure if both is necessary
-    this.subscription.unsubscribe()
-  }
-
-  applyFilters() {
-    this.filterRulesChange.next(this.filterRules)
   }
 
   clearSelected() {
-    this.filterRules = []
-    this.applyFilters()
-  }
-
-  private toggleFilterRule(filterRuleTypeID: number, value: number) {
-
-    let filterRuleType = FILTER_RULE_TYPES.find(t => t.id == filterRuleTypeID)
-
-    let existingRule = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID && rule.value == value?.toString())
-    let existingRuleOfSameType = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID)
-
-    if (existingRule) {
-      // if this exact rule already exists, remove it in all cases.
-      this.filterRules.splice(this.filterRules.indexOf(existingRule), 1)
-    } else if (filterRuleType.multi || !existingRuleOfSameType) {
-      // if we allow multiple rules per type, or no rule of this type already exists, push a new rule.
-      this.filterRules.push({rule_type: filterRuleTypeID, value: value?.toString()})
-    } else {
-      // otherwise (i.e., no multi support AND there's already a rule of this type), update the rule.
-      existingRuleOfSameType.value = value?.toString()
-    }
-    this.applyFilters()
-  }
-
-  private setTitleRule(title: string) {
-    let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
-
-    if (!existingRule && title) {
-      this.filterRules.push({rule_type: FILTER_TITLE, value: title})
-    } else if (existingRule && !title) {
-      this.filterRules.splice(this.filterRules.findIndex(rule => rule.rule_type == FILTER_TITLE), 1)
-    } else if (existingRule && title) {
-      existingRule.value = title
-    }
-    this.applyFilters()
+    this._titleFilter = ""
+    this.updateRules()
   }
 
   toggleTag(tagId: number) {
-    this.toggleFilterRule(FILTER_HAS_TAG, tagId)
   }
 
   toggleCorrespondent(correspondentId: number) {
-    this.toggleFilterRule(FILTER_CORRESPONDENT, correspondentId)
   }
 
   toggleDocumentType(documentTypeId: number) {
-    this.toggleFilterRule(FILTER_DOCUMENT_TYPE, documentTypeId)
-  }
-
-
-
-  // Date handling
-
-
-  onDatesCreatedSet(dates: DateSelection) {
-    this.setDateCreatedBefore(dates.before)
-    this.setDateCreatedAfter(dates.after)
-    this.applyFilters()
-  }
-
-  onDatesAddedSet(dates: DateSelection) {
-    this.setDateAddedBefore(dates.before)
-    this.setDateAddedAfter(dates.after)
-    this.applyFilters()
-  }
-
-  get dateCreatedBefore(): string {
-    let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE)
-    return createdBeforeRule ? createdBeforeRule.value : null
-  }
-
-  get dateCreatedAfter(): string {
-    let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER)
-    return createdAfterRule ? createdAfterRule.value : null
-  }
-
-  get dateAddedBefore(): string {
-    let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE)
-    return addedBeforeRule ? addedBeforeRule.value : null
-  }
-
-  get dateAddedAfter(): string {
-    let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER)
-    return addedAfterRule ? addedAfterRule.value : null
-  }
-
-  setDateCreatedBefore(date?: string) {
-    if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
-    else this.clearDateFilter(FILTER_CREATED_BEFORE)
-  }
-
-  setDateCreatedAfter(date?: string) {
-    if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
-    else this.clearDateFilter(FILTER_CREATED_AFTER)
-  }
-
-  setDateAddedBefore(date?: string) {
-    if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
-    else this.clearDateFilter(FILTER_ADDED_BEFORE)
-  }
-
-  setDateAddedAfter(date?: string) {
-    if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
-    else this.clearDateFilter(FILTER_ADDED_AFTER)
-  }
-
-  setDateFilter(date: string, dateRuleTypeID: number) {
-    let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID)
-
-    if (existingRule) {
-      existingRule.value = date
-    } else {
-      this.filterRules.push({rule_type: dateRuleTypeID, value: date})
-    }
-  }
-
-  clearDateFilter(dateRuleTypeID: number) {
-    let ruleIndex = this.filterRules.findIndex(rule => rule.rule_type == dateRuleTypeID)
-    if (ruleIndex != -1) {
-      this.filterRules.splice(ruleIndex, 1)
-    }
   }
 
 }

From 4fb5dce5e76abe4c1ec026e2ffa781af5d3fae35 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 00:52:28 +0100
Subject: [PATCH 55/73] selection model

---
 .../filterable-dropdown.component.html        |  4 +-
 .../filterable-dropdown.component.ts          | 76 +++++++++++--------
 .../toggleable-dropdown-button.component.html |  6 +-
 .../toggleable-dropdown-button.component.ts   | 14 +++-
 .../filter-editor/filter-editor.component.ts  | 40 ++++++----
 5 files changed, 87 insertions(+), 53 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 1261ff921..7c9a133ce 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
@@ -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">
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 31c9d064e..acb07e0d4 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
@@ -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()
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 daa72b41d..5b58025d1 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
@@ -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>
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 b881edd5d..1d42b0946 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
@@ -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 ""
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index 3b072c434..f881dc1d9 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -3,13 +3,14 @@ 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 { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, filter, flatMap, mergeMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { FilterRule } from 'src/app/data/filter-rule';
-import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type';
+import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE } from 'src/app/data/filter-rule-type';
 import { FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 @Component({
   selector: 'app-filter-editor',
@@ -61,7 +62,6 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
 
   @Input()
   set filterRules (value: FilterRule[]) {
-    console.log("SET FILTER RULES")
     value.forEach(rule => {
       switch (rule.rule_type) {
         case FILTER_TITLE:
@@ -79,31 +79,34 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
         case FILTER_ADDED_BEFORE:
           this.dateAddedBefore = rule.value
           break
+        case FILTER_HAS_TAG:
+          this.tagSelectionModel.set(+rule.value, ToggleableItemState.Selected, false)
+          break
+        case FILTER_CORRESPONDENT:
+          this.correspondentSelectionModel.set(+rule.value, ToggleableItemState.Selected, false)
+          break
+        case FILTER_DOCUMENT_TYPE:
+          this.documentTypeSelectionModel.set(+rule.value, ToggleableItemState.Selected, false)
+          break
       }
     })
-
-    this.tagService.getCachedMany(value.filter(v => v.rule_type == FILTER_HAS_TAG).map(rule => +rule.value)).subscribe(tags => {
-      console.log(tags)
-      tags.forEach(tag => this.tagSelectionModel.toggle(tag, false))
-    })
   }
 
   @Output()
   filterRulesChange = new EventEmitter<FilterRule[]>()
 
   updateRules() {
-    console.log("UPDATE RULES!!!")
     let filterRules: FilterRule[] = []
     if (this._titleFilter) {
       filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
     }
-    this.tagSelectionModel.getSelected().forEach(tag => {
+    this.tagSelectionModel.getSelectedItems().forEach(tag => {
       filterRules.push({rule_type: FILTER_HAS_TAG, value: tag.id.toString()})
     })
-    this.correspondentSelectionModel.getSelected().forEach(correspondent => {
+    this.correspondentSelectionModel.getSelectedItems().forEach(correspondent => {
       filterRules.push({rule_type: FILTER_CORRESPONDENT, value: correspondent.id.toString()})
     })
-    this.documentTypeSelectionModel.getSelected().forEach(documentType => {
+    this.documentTypeSelectionModel.getSelectedItems().forEach(documentType => {
       filterRules.push({rule_type: FILTER_DOCUMENT_TYPE, value: documentType.id.toString()})
     })
     if (this.dateCreatedBefore) {
@@ -118,13 +121,12 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     if (this.dateAddedAfter) {
       filterRules.push({rule_type: FILTER_ADDED_AFTER, value: this.dateAddedAfter})
     }
-    console.log(filterRules)
     this.filterRulesChange.next(filterRules)
   }
 
   hasFilters() {
     return this._titleFilter || 
-      this.dateCreatedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
+      this.dateAddedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
       this.tagSelectionModel.selectionSize() || this.correspondentSelectionModel.selectionSize() || this.documentTypeSelectionModel.selectionSize()
   }
 
@@ -161,16 +163,26 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
 
   clearSelected() {
     this._titleFilter = ""
+    this.tagSelectionModel.clear(false)
+    this.documentTypeSelectionModel.clear(false)
+    this.correspondentSelectionModel.clear(false)
+    this.dateAddedBefore = null
+    this.dateAddedAfter = null
+    this.dateCreatedBefore = null
+    this.dateCreatedAfter = null
     this.updateRules()
   }
 
   toggleTag(tagId: number) {
+    this.tagSelectionModel.toggle(tagId)
   }
 
   toggleCorrespondent(correspondentId: number) {
+    this.correspondentSelectionModel.toggle(correspondentId)
   }
 
   toggleDocumentType(documentTypeId: number) {
+    this.documentTypeSelectionModel.toggle(documentTypeId)
   }
 
 }

From 08beaf81d56a8130a49657db70e2bdb6b5bdd2dc Mon Sep 17 00:00:00 2001
From: Jonas Winkler <dev@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:03:30 +0100
Subject: [PATCH 56/73] Update README.md

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 7f3808905..eea41ce05 100644
--- a/README.md
+++ b/README.md
@@ -122,7 +122,6 @@ Paperless has been around a while now, and people are starting to build stuff on
 These projects also exist, but their status and compatibility with paperless-ng is unknown.
 
 * [Paperless Desktop](https://github.com/thomasbrueggemann/paperless-desktop): A desktop UI for your Paperless installation.  Runs on Mac, Linux, and Windows.
-* [ansible-role-paperless](https://github.com/ovv/ansible-role-paperless): An easy way to get Paperless running via Ansible.
 * [paperless-cli](https://github.com/stgarf/paperless-cli): A golang command line binary to interact with a Paperless instance.
 
 # Important Note

From e2bea3aee38366011c49ca1e8ea04ab6a51b2ca1 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:29:34 +0100
Subject: [PATCH 57/73] add missing index task

---
 src/documents/bulk_edit.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/documents/bulk_edit.py b/src/documents/bulk_edit.py
index beb9c50f7..c2dc438bc 100644
--- a/src/documents/bulk_edit.py
+++ b/src/documents/bulk_edit.py
@@ -106,6 +106,10 @@ def modify_tags(doc_ids, add_tags, remove_tags):
             document_id=doc, tag_id=tag) for (doc,tag) in itertools.product(affected_docs, add_tags)
     ], ignore_conflicts=True)
 
+    async_task(
+        "documents.tasks.bulk_index_documents",
+        document_ids=affected_docs
+    )
     async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
 
     return "OK"

From e228e18f04c11e92c0ef9beba1321aacbf31568f Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:29:53 +0100
Subject: [PATCH 58/73] it must have been late when I tried to do this

---
 src/documents/serialisers.py | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/documents/serialisers.py b/src/documents/serialisers.py
index 155030a68..1f33b957c 100644
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@@ -236,6 +236,15 @@ class BulkEditSerializer(serializers.Serializer):
             raise serializers.ValidationError(
                 f"Some documents in {name} don't exist or were specified twice.")
 
+    def _validate_tag_id_list(self, tags, name="tags"):
+        if not type(tags) == list:
+            raise serializers.ValidationError(f"{name} must be a list")
+        if not all([type(i) == int for i in tags]):
+            raise serializers.ValidationError(f"{name} must be a list of integers")
+        count = Tag.objects.filter(id__in=tags).count()
+        if not count == len(tags):
+            raise serializers.ValidationError(
+                f"Some tags in {name} don't exist or were specified twice.")
 
     def validate_documents(self, documents):
         self._validate_document_id_list(documents)
@@ -296,12 +305,12 @@ class BulkEditSerializer(serializers.Serializer):
 
     def _validate_parameters_modify_tags(self, parameters):
         if "add_tags" in parameters:
-            self._validate_document_id_list(parameters['add_tags'], "add_tags")
+            self._validate_tag_id_list(parameters['add_tags'], "add_tags")
         else:
             raise serializers.ValidationError("add_tags not specified")
 
         if "remove_tags" in parameters:
-            self._validate_document_id_list(parameters['remove_tags'], "remove_tags")
+            self._validate_tag_id_list(parameters['remove_tags'], "remove_tags")
         else:
             raise serializers.ValidationError("remove_tags not specified")
 

From 9e311241b313844a50989c3b1aee9d01087374ba Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:31:14 +0100
Subject: [PATCH 59/73] rename some stuff

---
 src-ui/src/app/services/rest/document.service.ts | 9 ++++-----
 src/documents/views.py                           | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/services/rest/document.service.ts b/src-ui/src/app/services/rest/document.service.ts
index 9caaecdb2..c42510270 100644
--- a/src-ui/src/app/services/rest/document.service.ts
+++ b/src-ui/src/app/services/rest/document.service.ts
@@ -28,9 +28,9 @@ export interface SelectionDataItem {
 }
 
 export interface SelectionData {
-  correspondents: SelectionDataItem[]
-  tags: SelectionDataItem[]
-  document_types: SelectionDataItem[]
+  selected_correspondents: SelectionDataItem[]
+  selected_tags: SelectionDataItem[]
+  selected_document_types: SelectionDataItem[]
 }
 
 @Injectable({
@@ -125,8 +125,7 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     })
   }
 
-  selectionData(ids: number[]): Observable<SelectionData> {
-    console.log(ids)
+  getSelectionData(ids: number[]): Observable<SelectionData> {
     return this.http.post<SelectionData>(this.getResourceUrl(null, 'selection_data'), {"documents": ids})
   }
 
diff --git a/src/documents/views.py b/src/documents/views.py
index a50896057..ddf02f534 100755
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -420,7 +420,7 @@ class SelectionDataView(APIView):
                 "id": t.id,
                 "document_count": t.document_count
             } for t in tags],
-            "selected_types": [{
+            "selected_document_types": [{
                 "id": t.id,
                 "document_count": t.document_count
             } for t in types]

From bd02c789663221eb34ff3dacbe5d40b0405d5848 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:31:30 +0100
Subject: [PATCH 60/73] fix the filter pipe

---
 src-ui/src/app/pipes/filter.pipe.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts
index a982e9019..8465f1533 100644
--- a/src-ui/src/app/pipes/filter.pipe.ts
+++ b/src-ui/src/app/pipes/filter.pipe.ts
@@ -1,17 +1,18 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
+import { MatchingModel } from '../data/matching-model';
 
 @Pipe({
   name: 'filter'
 })
 export class FilterPipe implements PipeTransform {
-  transform(toggleableItems: ToggleableItem[], searchText: string): any[] {
-    if (!toggleableItems) return [];
-    if (!searchText) return toggleableItems;
+  transform(items: MatchingModel[], searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
 
-    return toggleableItems.filter(toggleableItem => {
-      return Object.keys(toggleableItem.item).some(key => {
-        return String(toggleableItem.item[key]).toLowerCase().includes(searchText.toLowerCase());
+    return items.filter(item => {
+      return Object.keys(item).some(key => {
+        return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
       });
     });
    }

From 544ca8d0082325d23276c7164e3af07d0f67ccd7 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:31:50 +0100
Subject: [PATCH 61/73] add ability to manually clear the cache on matching
 models

---
 .../app/services/rest/abstract-paperless-service.ts  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/services/rest/abstract-paperless-service.ts b/src-ui/src/app/services/rest/abstract-paperless-service.ts
index f57956754..8ad1a2141 100644
--- a/src-ui/src/app/services/rest/abstract-paperless-service.ts
+++ b/src-ui/src/app/services/rest/abstract-paperless-service.ts
@@ -74,27 +74,31 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     )
   }
 
+  clearCache() {
+    this._listAll = null
+  }
+
   get(id: number): Observable<T> {
     return this.http.get<T>(this.getResourceUrl(id))
   }
 
   create(o: T): Observable<T> {
-    this._listAll = null
+    this.clearCache()
     return this.http.post<T>(this.getResourceUrl(), o)
   }
 
   delete(o: T): Observable<any> {
-    this._listAll = null
+    this.clearCache()
     return this.http.delete(this.getResourceUrl(o.id))
   }
 
   update(o: T): Observable<T> {
-    this._listAll = null
+    this.clearCache()
     return this.http.put<T>(this.getResourceUrl(o.id), o)
   }
 
   patch(o: T): Observable<T> {
-    this._listAll = null
+    this.clearCache()
     return this.http.patch<T>(this.getResourceUrl(o.id), o)
   }
 

From 527c533958e14d5ab83b99c8d08b6a553cde1ec0 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:32:21 +0100
Subject: [PATCH 62/73] improve performance of the toggle dropdown button

---
 .../toggleable-dropdown-button.component.html     | 14 +++++++++++---
 .../toggleable-dropdown-button.component.ts       | 15 +++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

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 5b58025d1..404ea9d4d 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
@@ -1,8 +1,16 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
   <div class="selected-icon mr-1">
-    <svg *ngIf="getSelectedIconName() !== ''" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-      <use attr.xlink:href="assets/bootstrap-icons.svg#{{getSelectedIconName()}}" />
-    </svg>
+    <ng-container *ngIf="isChecked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+      </svg>
+    </ng-container>
+    <ng-container *ngIf="isPartiallyChecked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
+        <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+      </svg>
+    </ng-container>
+    
   </div>
   <div class="mr-1">
     <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
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 1d42b0946..f082dfe67 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
@@ -40,13 +40,12 @@ export class ToggleableDropdownButtonComponent {
     this.toggle.emit()
   }
 
-  getSelectedIconName() {
-    if (this.state == ToggleableItemState.Selected) {
-      return "check"
-    } else if (this.state == ToggleableItemState.PartiallySelected) {
-      return "dash"
-    } else {
-      return ""
-    }
+  isChecked() {
+    return this.state == ToggleableItemState.Selected
   }
+
+  isPartiallyChecked() {
+    return this.state == ToggleableItemState.PartiallySelected
+  }
+
 }

From 67953c98a94dd0ee661d250867f7021967779ded Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:32:36 +0100
Subject: [PATCH 63/73] remove some non-required stuff

---
 .../document-list/document-list.component.ts           | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 60a483816..d83f02678 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -4,16 +4,11 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
-import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
-import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
-import { TagService } from 'src/app/services/rest/tag.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
 import { FilterEditorComponent } from './filter-editor/filter-editor.component';
-import { SelectDialogComponent } from '../common/select-dialog/select-dialog.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
-import { ChangedItems } from './bulk-editor/bulk-editor.component';
 
 @Component({
   selector: 'app-document-list',
@@ -28,10 +23,7 @@ export class DocumentListComponent implements OnInit {
     public route: ActivatedRoute,
     private router: Router,
     private toastService: ToastService,
-    private modalService: NgbModal,
-    private correspondentService: CorrespondentService,
-    private documentTypeService: DocumentTypeService,
-    private tagService: TagService) { }
+    private modalService: NgbModal) { }
 
   @ViewChild("filterEditor")
   private filterEditor: FilterEditorComponent

From 8af0259671e60862233f45cda651ea7a0bca19f1 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:36:26 +0100
Subject: [PATCH 64/73] rework the bulk editor

---
 .../filterable-dropdown.component.html        |   8 +-
 .../filterable-dropdown.component.ts          | 109 ++++++---
 .../bulk-editor/bulk-editor.component.html    |  42 ++--
 .../bulk-editor/bulk-editor.component.ts      | 223 ++++++------------
 4 files changed, 168 insertions(+), 214 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 7c9a133ce..d7b2af6d3 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
@@ -1,12 +1,12 @@
 <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== types.Editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
     <div class="d-none d-md-inline">{{title}}</div>
     <div class="d-inline-block d-md-none">
       <svg class="toolbaricon" fill="currentColor">
         <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
       </svg>
     </div>
-    <ng-container *ngIf="type !== types.Editing && selectionModel.selectionSize() > 0">
+    <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
       <div class="badge bg-secondary text-light rounded-pill badge-corner">
         {{selectionModel.selectionSize()}}
       </div>
@@ -24,8 +24,8 @@
           <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">
-        <small class="ml-1" [ngClass]="{'font-weight-bold': hasBeenToggled && (toggleableItems | filter: filterText).length > 0}">Apply</small>
+      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
+        <small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}">Apply</small>
         <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
         </svg>
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 acb07e0d4..8fb2d25d9 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,14 +1,13 @@
 import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
 import { FilterPipe } from  'src/app/pipes/filter.pipe';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { ToggleableItem, ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
+import { 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',
-  Editing = 'editing'
+export interface ChangedItems {
+  itemsToAdd: MatchingModel[],
+  itemsToRemove: MatchingModel[]
 }
 
 export class FilterableDropdownSelectionModel {
@@ -19,31 +18,37 @@ export class FilterableDropdownSelectionModel {
 
   items: MatchingModel[] = []
 
-  selection = new Map<number, ToggleableItemState>()
+  private selectionStates = new Map<number, ToggleableItemState>()
+
+  private temporarySelectionStates = new Map<number, ToggleableItemState>()
 
   getSelectedItems() {
-    return this.items.filter(i => this.selection.get(i.id) == ToggleableItemState.Selected)
+    return this.items.filter(i => this.temporarySelectionStates.get(i.id) == ToggleableItemState.Selected)
   }
 
   set(id: number, state: ToggleableItemState, fireEvent = true) {
-    this.selection.set(id, state)
+    if (state == ToggleableItemState.NotSelected) {
+      this.temporarySelectionStates.delete(id)
+    } else {
+      this.temporarySelectionStates.set(id, state)
+    }
     if (fireEvent) {
       this.changed.next(this)
     }
   }
 
   toggle(id: number, fireEvent = true) {
-    let state = this.selection.get(id)
+    let state = this.temporarySelectionStates.get(id)
     if (state == null || state != ToggleableItemState.Selected) {
-      this.selection.set(id, ToggleableItemState.Selected)
+      this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
     } else if (state == ToggleableItemState.Selected) {
-      this.selection.set(id, ToggleableItemState.NotSelected)
+      this.temporarySelectionStates.delete(id)
     }
 
     if (!this.multiple) {
-      for (let key of this.selection.keys()) {
+      for (let key of this.temporarySelectionStates.keys()) {
         if (key != id) {
-          this.selection.set(key, ToggleableItemState.NotSelected)
+          this.temporarySelectionStates.delete(key)
         }
       }
     }
@@ -55,7 +60,7 @@ export class FilterableDropdownSelectionModel {
   }
 
   get(id: number) {
-    return this.selection.get(id) || ToggleableItemState.NotSelected
+    return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
   }
 
   selectionSize() {
@@ -63,11 +68,47 @@ export class FilterableDropdownSelectionModel {
   }
 
   clear(fireEvent = true) {
-    this.selection.clear()
+    this.temporarySelectionStates.clear()
     if (fireEvent) {
       this.changed.next(this)
     }
   }
+
+  isDirty() {
+    if (!Array.from(this.temporarySelectionStates.keys()).every(id => this.temporarySelectionStates.get(id) == this.selectionStates.get(id))) {
+      return true
+    } else if (!Array.from(this.selectionStates.keys()).every(id => this.selectionStates.get(id) == this.temporarySelectionStates.get(id))) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  init(map) {
+    this.temporarySelectionStates = map
+    this.apply()
+  }
+
+  apply() {
+    this.selectionStates.clear()
+    this.temporarySelectionStates.forEach((value, key) => {
+      this.selectionStates.set(key, value)
+    })
+  }
+
+  reset() {
+    this.temporarySelectionStates.clear()
+    this.selectionStates.forEach((value, key) => {
+      this.temporarySelectionStates.set(key, value)
+    })
+  }
+
+  diff(): ChangedItems {
+    return {
+      itemsToAdd: this.items.filter(item => this.temporarySelectionStates.get(item.id) == ToggleableItemState.Selected && this.selectionStates.get(item.id) != ToggleableItemState.Selected),
+      itemsToRemove: this.items.filter(item => !this.temporarySelectionStates.has(item.id) && this.selectionStates.has(item.id)),
+    }
+  }
 }
 
 @Component({
@@ -131,35 +172,35 @@ export class FilterableDropdownComponent {
   icon: string
 
   @Input()
-  type: FilterableDropdownType = FilterableDropdownType.Filtering
+  editing = false
 
-  types = FilterableDropdownType
+  @Output()
+  apply = new EventEmitter<ChangedItems>()
 
-  hasBeenToggled:boolean = false
+  @Output()
+  open = new EventEmitter()
 
   constructor(private filterPipe: FilterPipe) {
     this.selectionModel = new FilterableDropdownSelectionModel()
   }
 
-  toggleItem(toggleableItem: ToggleableItem): void {
-    // if (this.singular && toggleableItem.state == ToggleableItemState.Selected) {
-    //   this.selectionModel.items.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected)
-    // }
-    // this.hasBeenToggled = true
-    // this.toggle.emit(toggleableItem.item)
+  applyClicked() {
+    if (this.selectionModel.isDirty()) {
+      this.dropdown.close()
+      this.apply.emit(this.selectionModel.diff())
+    }
   }
 
   dropdownOpenChange(open: boolean): void {
-    // if (open) {
-    //   setTimeout(() => {
-    //     this.listFilterTextInput.nativeElement.focus();
-    //   }, 0)
-    //   this.hasBeenToggled = false
-    //   this.open.next()
-    // } else {
-    //   this.filterText = ''
-    //   if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.toggleableItems)
-    // }
+    if (open) {
+      setTimeout(() => {
+        this.listFilterTextInput.nativeElement.focus();
+      }, 0)
+      this.selectionModel.reset()
+      this.open.next()
+    } else {
+      this.filterText = ''
+    }
   }
 
   listFilterEnter(): void {
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 800ef3742..c78f3ea3e 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -1,6 +1,6 @@
-<!-- <div class="row">
+<div class="row">
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
-    <button class="btn btn-sm btn-outline-danger" (click)="documentList.selectNone()">
+    <button class="btn btn-sm btn-outline-danger" (click)="list.selectNone()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
       </svg>
@@ -11,13 +11,13 @@
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
     <label class="mr-2 mb-0">Select:</label>
     <div class="btn-group">
-      <button class="btn btn-sm btn-outline-primary" (click)="documentList.selectPage()">
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
         </svg>
         Page
       </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="documentList.selectAll()">
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#check-all" />
         </svg>
@@ -30,22 +30,26 @@
     <div class="d-flex">
       <label class="ml-auto mt-1 mb-0 mr-2">Edit:</label>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
-        [toggleableItems]="tagsToggleableItems"
-        [type]="dropdownTypes.Editing"
-        (open)="tagsDropdownOpen()"
-        (editingComplete)="setTags($event)">
+        [items]="tags"
+        [editing]="true"
+        [multiple]="true"
+        (open)="openTagsDropdown()"
+        [(selectionModel)]="tagSelectionModel"
+        (apply)="setTags($event)">
       </app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
-        [toggleableItems]="correspondentsToggleableItems"
-        [type]="dropdownTypes.Editing"
-        (open)="correspondentsDropdownOpen()"
-        (editingComplete)="setCorrespondents($event)">
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill"
+        [items]="correspondents"
+        [editing]="true"
+        (open)="openCorrespondentDropdown()"
+        [(selectionModel)]="correspondentSelectionModel"
+        (apply)="setCorrespondents($event)">
       </app-filterable-dropdown>
-      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
-        [toggleableItems]="documentTypesToggleableItems"
-        [type]="dropdownTypes.Editing"
-        (open)="documentTypesDropdownOpen()"
-        (editingComplete)="setDocumentTypes($event)">
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill"
+        [items]="documentTypes"
+        [editing]="true"
+        (open)="openDocumentTypeDropdown()"
+        [(selectionModel)]="documentTypeSelectionModel"
+        (apply)="setDocumentTypes($event)">
       </app-filterable-dropdown>
     </div>
   </div>
@@ -58,4 +62,4 @@
       Delete
     </button>
   </div>
-</div> -->
+</div>
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 4365e00b0..36577bc6f 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
@@ -1,26 +1,19 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
-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';
-import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { DocumentService } from 'src/app/services/rest/document.service';
+import { DocumentService, SelectionDataItem } from 'src/app/services/rest/document.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
-import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component';
-import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
-
-export interface ChangedItems {
-  itemsToAdd: any[],
-  itemsToRemove: any[]
-}
+import { ChangedItems, FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 @Component({
   selector: 'app-bulk-editor',
@@ -33,69 +26,15 @@ export class BulkEditorComponent {
   correspondents: PaperlessCorrespondent[]
   documentTypes: PaperlessDocumentType[]
 
-  private initialTagsToggleableItems: ToggleableItem[]
-  private initialCorrespondentsToggleableItems: ToggleableItem[]
-  private initialDocumentTypesToggleableItems: ToggleableItem[]
-
-  dropdownTypes = FilterableDropdownType
-
-  private _tagsToggleableItems: ToggleableItem[]
-  get tagsToggleableItems(): ToggleableItem[] {
-    let tagsToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
- 
-    this.tags?.forEach(t => {
-      let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
-      let state = ToggleableItemState.NotSelected
-      if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithTag.length})
-    })
-    this._tagsToggleableItems = tagsToggleableItems
-    return tagsToggleableItems
-  }
-
-  private _correspondentsToggleableItems: ToggleableItem[]
-  get correspondentsToggleableItems(): ToggleableItem[] {
-    let correspondentsToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
-
-    this.correspondents?.forEach(c => {
-      let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
-      let state = ToggleableItemState.NotSelected
-      if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithCorrespondent.length})
-    })
-    this._correspondentsToggleableItems = correspondentsToggleableItems
-    return correspondentsToggleableItems
-  }
-
-  private _documentTypesToggleableItems: ToggleableItem[]
-  get documentTypesToggleableItems(): ToggleableItem[] {
-    let documentTypesToggleableItems = []
-    let selectedDocuments: PaperlessDocument[] = this.documentList.documents.filter(d => this.documentList.selected.has(d.id))
-
-    this.documentTypes?.forEach(dt => {
-      let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)
-      let state = ToggleableItemState.NotSelected
-      if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithDocumentType.length})
-    })
-    this._documentTypesToggleableItems = documentTypesToggleableItems
-    return documentTypesToggleableItems
-  }
-
-  get documentList(): DocumentListViewService {
-    return this.documentListViewService
-  }
+  tagSelectionModel = new FilterableDropdownSelectionModel()
+  correspondentSelectionModel = new FilterableDropdownSelectionModel()
+  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
 
   constructor(
     private documentTypeService: DocumentTypeService,
     private tagService: TagService,
     private correspondentService: CorrespondentService,
-    private documentListViewService: DocumentListViewService,
+    public list: DocumentListViewService,
     private documentService: DocumentService,
     private modalService: NgbModal,
     private openDocumentService: OpenDocumentsService
@@ -107,97 +46,69 @@ export class BulkEditorComponent {
     this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
   }
 
-  tagsDropdownOpen() {
-    this.initialTagsToggleableItems = this._tagsToggleableItems
-  }
-
-  correspondentsDropdownOpen() {
-    this.initialCorrespondentsToggleableItems = this._correspondentsToggleableItems
-  }
-
-  documentTypesDropdownOpen() {
-    this.initialDocumentTypesToggleableItems = this._documentTypesToggleableItems
-  }
-
-  private checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems {
-    let itemsToAdd: any[] = []
-    let itemsToRemove: any[] = []
-    toggleableItemsA.forEach(oldItem => {
-      let newItem = toggleableItemsB.find(nTTI => nTTI.item.id == oldItem.item.id)
-
-      if (newItem.state == ToggleableItemState.Selected && (oldItem.state == ToggleableItemState.PartiallySelected || oldItem.state == ToggleableItemState.NotSelected)) itemsToAdd.push(newItem.item)
-      else if (newItem.state == ToggleableItemState.NotSelected && (oldItem.state == ToggleableItemState.Selected || oldItem.state == ToggleableItemState.PartiallySelected)) itemsToRemove.push(newItem.item)
-    })
-    return { itemsToAdd: itemsToAdd, itemsToRemove: itemsToRemove }
-  }
-
   private executeBulkOperation(method: string, args): Observable<any> {
-    return this.documentService.bulkEdit(Array.from(this.documentList.selected), method, args).pipe(
+    return this.documentService.bulkEdit(Array.from(this.list.selected), method, args).pipe(
       tap(() => {
-        this.documentList.reload()
-        this.documentList.selected.forEach(id => {
+        this.list.reload()
+        this.list.selected.forEach(id => {
           this.openDocumentService.refreshDocument(id)
         })
-        this.documentList.selectNone()
+        this.list.selectNone()
       })
     )
   }
 
-  setTags(newTagsToggleableItems: ToggleableItem[]) {
-    let changedTags: ChangedItems
-    if (newTagsToggleableItems) {
-      changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems)
-      if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 0) return
-    }
+  private applySelectionData(items: SelectionDataItem[], selectionModel: FilterableDropdownSelectionModel) {
+    let selectionData = new Map<number, ToggleableItemState>()
+    items.forEach(i => {
+      if (i.document_count == this.list.selected.size) {
+        selectionData.set(i.id, ToggleableItemState.Selected)
+      } else if (i.document_count > 0) {
+        selectionData.set(i.id, ToggleableItemState.PartiallySelected)
+      }
+    })
+    selectionModel.init(selectionData)
+  }
 
-    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.title = "Confirm Tags Assignment"
-    let action = 'set_tags'
-    let tags
-    let messageFragment = ''
-    let both = changedTags && changedTags.itemsToAdd.length > 0 && changedTags.itemsToRemove.length > 0
-    if (!changedTags) {
-      messageFragment = `remove all tags from`
-    } else {
-      if (changedTags.itemsToAdd.length > 0) {
-        tags = changedTags.itemsToAdd
-        messageFragment = `assign the tag(s) ${changedTags.itemsToAdd.map(t => t.name).join(', ')} to`
-      }
-      if (changedTags.itemsToRemove.length > 0) {
-        if (!both) {
-          action = 'remove_tags'
-          tags = changedTags.itemsToRemove
-        } else {
-          messageFragment += ' and '
-        }
-        messageFragment += `remove the tag(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from`
-      }
-    }
-    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.documentList.selected.size} selected document(s).`
-    modal.componentInstance.btnClass = "btn-warning"
-    modal.componentInstance.btnCaption = "Confirm"
-    modal.componentInstance.confirmClicked.subscribe(() => {
-      // TODO: API endpoints for add/remove multiple tags
-      this.executeBulkOperation(action, {"tags": tags ? tags.map(t => t.id) : null}).subscribe(
-        response => {
-          if (!both) modal.close()
-          else {
-            this.executeBulkOperation('remove_tags', {"tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
-              response => {
-                modal.close()
-              })
-          }
-        }
-      )
+  openTagsDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_tags, this.tagSelectionModel)
     })
   }
 
-  setCorrespondents(newCorrespondentsToggleableItems: ToggleableItem[]) {
-    let changedCorrespondents: ChangedItems
-    if (newCorrespondentsToggleableItems) {
-      changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems)
-      if (changedCorrespondents.itemsToAdd.length == 0 && changedCorrespondents.itemsToRemove.length == 0) return
-    }
+  openDocumentTypeDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_document_types, this.documentTypeSelectionModel)
+    })
+  }
+
+  openCorrespondentDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_correspondents, this.correspondentSelectionModel)
+    })
+  }
+
+  setTags(changedTags: ChangedItems) {
+    if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 0) return
+
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm Tags Assignment"
+   
+    modal.componentInstance.message = `This operation will modify some tags on all ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = "Confirm"
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      this.executeBulkOperation('modify_tags', {"add_tags": changedTags.itemsToAdd.map(t => t.id), "remove_tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
+        response => {
+          this.tagService.clearCache()
+          modal.close()
+        })
+      }
+    )
+  }
+
+  setCorrespondents(changedCorrespondents: ChangedItems) {
+    if (changedCorrespondents.itemsToAdd.length == 0 && changedCorrespondents.itemsToRemove.length == 0) return
 
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Correspondent Assignment"
@@ -207,24 +118,21 @@ export class BulkEditorComponent {
       correspondent = changedCorrespondents.itemsToAdd[0]
       messageFragment = `assign the correspondent ${correspondent.name} to`
     }
-    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
       this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
         response => {
+          this.correspondentService.clearCache()
           modal.close()
         }
       )
     })
   }
 
-  setDocumentTypes(newDocumentTypesToggleableItems: ToggleableItem[]) {
-    let changedDocumentTypes: ChangedItems
-    if (newDocumentTypesToggleableItems) {
-      changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems)
-      if (changedDocumentTypes.itemsToAdd.length == 0 && changedDocumentTypes.itemsToRemove.length == 0) return
-    }
+  setDocumentTypes(changedDocumentTypes: ChangedItems) {
+    if (changedDocumentTypes.itemsToAdd.length == 0 && changedDocumentTypes.itemsToRemove.length == 0) return
 
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.title = "Confirm Document Type Assignment"
@@ -234,12 +142,13 @@ export class BulkEditorComponent {
       documentType = changedDocumentTypes.itemsToAdd[0]
       messageFragment = `assign the document type ${documentType.name} to`
     }
-    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.btnClass = "btn-warning"
     modal.componentInstance.btnCaption = "Confirm"
     modal.componentInstance.confirmClicked.subscribe(() => {
       this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
         response => {
+          this.documentService.clearCache()
           modal.close()
         }
       )
@@ -250,7 +159,7 @@ export class BulkEditorComponent {
     let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
     modal.componentInstance.delayConfirm(5)
     modal.componentInstance.title = "Delete confirm"
-    modal.componentInstance.messageBold = `This operation will permanently delete all ${this.documentList.selected.size} selected document(s).`
+    modal.componentInstance.messageBold = `This operation will permanently delete all ${this.list.selected.size} selected document(s).`
     modal.componentInstance.message = `This operation cannot be undone.`
     modal.componentInstance.btnClass = "btn-danger"
     modal.componentInstance.btnCaption = "Delete document(s)"

From 7beb8a09299696e1e83cf6241f249f3b67943833 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 12:48:41 +0100
Subject: [PATCH 65/73] fix enter select

---
 .../filterable-dropdown.component.ts          | 20 +++++++++++--------
 src-ui/src/app/pipes/filter.pipe.ts           |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

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 8fb2d25d9..e06f0d638 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
@@ -196,7 +196,9 @@ export class FilterableDropdownComponent {
       setTimeout(() => {
         this.listFilterTextInput.nativeElement.focus();
       }, 0)
-      this.selectionModel.reset()
+      if (this.editing) {
+        this.selectionModel.reset()
+      }
       this.open.next()
     } else {
       this.filterText = ''
@@ -204,12 +206,14 @@ export class FilterableDropdownComponent {
   }
 
   listFilterEnter(): void {
-    // let filtered = this.filterPipe.transform(this.toggleableItems, this.filterText)
-    // if (filtered.length == 1) {
-    //   let toggleableItem = this.toggleableItems.find(ti => ti.item.id == filtered[0].item.id)
-    //   if (toggleableItem) toggleableItem.state = ToggleableItemState.Selected
-    //   this.toggleItem(filtered[0])
-    //   this.dropdown.close()
-    // }
+    let filtered = this.filterPipe.transform(this.items, this.filterText)
+    if (filtered.length == 1) {
+      this.selectionModel.toggle(filtered[0].id)
+      if (this.editing) {
+        this.applyClicked()
+      } else {
+        this.dropdown.close()
+      }
+    }
   }
 }
diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts
index 8465f1533..d83ccc07a 100644
--- a/src-ui/src/app/pipes/filter.pipe.ts
+++ b/src-ui/src/app/pipes/filter.pipe.ts
@@ -6,7 +6,7 @@ import { MatchingModel } from '../data/matching-model';
   name: 'filter'
 })
 export class FilterPipe implements PipeTransform {
-  transform(items: MatchingModel[], searchText: string): any[] {
+  transform(items: MatchingModel[], searchText: string): MatchingModel[] {
     if (!items) return [];
     if (!searchText) return items;
 

From 3d173a13ab8706a57ae0985461857c556a6992f4 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 13:31:22 +0100
Subject: [PATCH 66/73] move the two post bulk edit tasks into one

---
 src/documents/bulk_edit.py      | 29 ++++-------------------
 src/documents/tasks.py          |  9 ++------
 src/documents/tests/test_api.py | 41 ++++++++++++++++++---------------
 3 files changed, 30 insertions(+), 49 deletions(-)

diff --git a/src/documents/bulk_edit.py b/src/documents/bulk_edit.py
index c2dc438bc..18168a164 100644
--- a/src/documents/bulk_edit.py
+++ b/src/documents/bulk_edit.py
@@ -18,11 +18,7 @@ def set_correspondent(doc_ids, correspondent):
     qs.update(correspondent=correspondent)
 
     async_task(
-        "documents.tasks.bulk_index_documents",
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
 
     return "OK"
 
@@ -37,11 +33,7 @@ def set_document_type(doc_ids, document_type):
     qs.update(document_type=document_type)
 
     async_task(
-        "documents.tasks.bulk_index_documents",
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
 
     return "OK"
 
@@ -59,11 +51,7 @@ def add_tag(doc_ids, tag):
     ])
 
     async_task(
-        "documents.tasks.bulk_index_documents",
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
 
     return "OK"
 
@@ -81,11 +69,7 @@ def remove_tag(doc_ids, tag):
     ).delete()
 
     async_task(
-        "documents.tasks.bulk_index_documents",
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
 
     return "OK"
 
@@ -107,10 +91,7 @@ def modify_tags(doc_ids, add_tags, remove_tags):
     ], ignore_conflicts=True)
 
     async_task(
-        "documents.tasks.bulk_index_documents",
-        document_ids=affected_docs
-    )
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
 
     return "OK"
 
diff --git a/src/documents/tasks.py b/src/documents/tasks.py
index c1f3ffbaa..f9937c177 100644
--- a/src/documents/tasks.py
+++ b/src/documents/tasks.py
@@ -90,16 +90,11 @@ def sanity_check():
         return "No issues detected."
 
 
-def bulk_rename_files(document_ids):
-    qs = Document.objects.filter(id__in=document_ids)
-    for doc in qs:
-        post_save.send(Document, instance=doc, created=False)
-
-
-def bulk_index_documents(document_ids):
+def bulk_update_documents(document_ids):
     documents = Document.objects.filter(id__in=document_ids)
 
     ix = index.open_index()
     with AsyncWriter(ix) as writer:
         for doc in documents:
             index.update_document(writer, doc)
+            post_save.send(Document, instance=doc, created=False)
diff --git a/src/documents/tests/test_api.py b/src/documents/tests/test_api.py
index a9c855ff7..adc947a1a 100644
--- a/src/documents/tests/test_api.py
+++ b/src/documents/tests/test_api.py
@@ -699,49 +699,49 @@ class TestBulkEdit(DirectoriesMixin, APITestCase):
         self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 1)
         bulk_edit.set_correspondent([self.doc1.id, self.doc2.id, self.doc3.id], self.c2.id)
         self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 3)
-        self.assertEqual(self.async_task.call_count, 2)
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        self.assertCountEqual(kwargs['document_ids'], [self.doc1.id, self.doc2.id])
 
     def test_unset_correspondent(self):
         self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 1)
         bulk_edit.set_correspondent([self.doc1.id, self.doc2.id, self.doc3.id], None)
         self.assertEqual(Document.objects.filter(correspondent=self.c2).count(), 0)
-        self.assertEqual(self.async_task.call_count, 2)
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        self.assertCountEqual(kwargs['document_ids'], [self.doc2.id, self.doc3.id])
 
     def test_set_document_type(self):
         self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 1)
         bulk_edit.set_document_type([self.doc1.id, self.doc2.id, self.doc3.id], self.dt2.id)
         self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 3)
-        self.assertEqual(self.async_task.call_count, 2)
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        self.assertCountEqual(kwargs['document_ids'], [self.doc1.id, self.doc2.id])
 
     def test_unset_document_type(self):
         self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 1)
         bulk_edit.set_document_type([self.doc1.id, self.doc2.id, self.doc3.id], None)
         self.assertEqual(Document.objects.filter(document_type=self.dt2).count(), 0)
-        self.assertEqual(self.async_task.call_count, 2)
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        self.assertCountEqual(kwargs['document_ids'], [self.doc2.id, self.doc3.id])
 
     def test_add_tag(self):
         self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 2)
         bulk_edit.add_tag([self.doc1.id, self.doc2.id, self.doc3.id, self.doc4.id], self.t1.id)
         self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 4)
-        self.assertEqual(self.async_task.call_count, 2)
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc3.id])
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc3.id])
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        self.assertCountEqual(kwargs['document_ids'], [self.doc1.id, self.doc3.id])
 
     def test_remove_tag(self):
         self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 2)
         bulk_edit.remove_tag([self.doc1.id, self.doc3.id, self.doc4.id], self.t1.id)
         self.assertEqual(Document.objects.filter(tags__id=self.t1.id).count(), 1)
-        self.assertEqual(self.async_task.call_count, 2)
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc4.id])
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc4.id])
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        self.assertCountEqual(kwargs['document_ids'], [self.doc4.id])
 
     def test_modify_tags(self):
         tag_unrelated = Tag.objects.create(name="unrelated")
@@ -752,6 +752,11 @@ class TestBulkEdit(DirectoriesMixin, APITestCase):
         self.assertCountEqual(list(self.doc2.tags.all()), [self.t2, tag_unrelated])
         self.assertCountEqual(list(self.doc3.tags.all()), [self.t2, tag_unrelated])
 
+        self.async_task.assert_called_once()
+        args, kwargs = self.async_task.call_args
+        # TODO: doc3 should not be affected, but the query for that is rather complicated
+        self.assertCountEqual(kwargs['document_ids'], [self.doc2.id, self.doc3.id])
+
     def test_delete(self):
         self.assertEqual(Document.objects.count(), 5)
         bulk_edit.delete([self.doc1.id, self.doc2.id])

From aa6e96e54d6a29ef5a8ea5478457cc63515ec456 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 13:33:58 +0100
Subject: [PATCH 67/73] fix pycodestyle

---
 src/documents/bulk_edit.py   |  6 +++---
 src/documents/serialisers.py | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/documents/bulk_edit.py b/src/documents/bulk_edit.py
index 18168a164..c0c80a795 100644
--- a/src/documents/bulk_edit.py
+++ b/src/documents/bulk_edit.py
@@ -85,9 +85,9 @@ def modify_tags(doc_ids, add_tags, remove_tags):
         tag_id__in=remove_tags,
     ).delete()
 
-    DocumentTagRelationship.objects.bulk_create([
-        DocumentTagRelationship(
-            document_id=doc, tag_id=tag) for (doc,tag) in itertools.product(affected_docs, add_tags)
+    DocumentTagRelationship.objects.bulk_create([DocumentTagRelationship(
+        document_id=doc, tag_id=tag) for (doc, tag) in itertools.product(
+        affected_docs, add_tags)
     ], ignore_conflicts=True)
 
     async_task(
diff --git a/src/documents/serialisers.py b/src/documents/serialisers.py
index 1f33b957c..66f5f883f 100644
--- a/src/documents/serialisers.py
+++ b/src/documents/serialisers.py
@@ -230,17 +230,20 @@ class BulkEditSerializer(serializers.Serializer):
         if not type(documents) == list:
             raise serializers.ValidationError(f"{name} must be a list")
         if not all([type(i) == int for i in documents]):
-            raise serializers.ValidationError(f"{name} must be a list of integers")
+            raise serializers.ValidationError(
+                f"{name} must be a list of integers")
         count = Document.objects.filter(id__in=documents).count()
         if not count == len(documents):
             raise serializers.ValidationError(
-                f"Some documents in {name} don't exist or were specified twice.")
+                f"Some documents in {name} don't exist or were "
+                f"specified twice.")
 
     def _validate_tag_id_list(self, tags, name="tags"):
         if not type(tags) == list:
             raise serializers.ValidationError(f"{name} must be a list")
         if not all([type(i) == int for i in tags]):
-            raise serializers.ValidationError(f"{name} must be a list of integers")
+            raise serializers.ValidationError(
+                f"{name} must be a list of integers")
         count = Tag.objects.filter(id__in=tags).count()
         if not count == len(tags):
             raise serializers.ValidationError(
@@ -310,7 +313,8 @@ class BulkEditSerializer(serializers.Serializer):
             raise serializers.ValidationError("add_tags not specified")
 
         if "remove_tags" in parameters:
-            self._validate_tag_id_list(parameters['remove_tags'], "remove_tags")
+            self._validate_tag_id_list(parameters['remove_tags'],
+                                       "remove_tags")
         else:
             raise serializers.ValidationError("remove_tags not specified")
 

From d6e733c56f8724b95189011fd383829d830eb2df Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 15:39:53 +0100
Subject: [PATCH 68/73] add more localization tags #123

---
 .../confirm-dialog/confirm-dialog.component.ts |  4 ++--
 .../date-dropdown/date-dropdown.component.html |  8 ++++----
 .../filterable-dropdown.component.html         |  2 +-
 .../select-dialog/select-dialog.component.html |  4 ++--
 .../select-dialog/select-dialog.component.ts   |  4 ++--
 .../metadata-collapse.component.ts             |  2 +-
 .../bulk-editor/bulk-editor.component.html     | 16 ++++++----------
 .../document-list/document-list.component.html | 10 +++++-----
 .../filter-editor/filter-editor.component.html | 18 +++++++++---------
 .../filter-editor/filter-editor.component.ts   |  6 +++---
 10 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
index 4791d0e77..c397811a4 100644
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
@@ -14,7 +14,7 @@ export class ConfirmDialogComponent implements OnInit {
   public confirmClicked = new EventEmitter()
 
   @Input()
-  title = "Confirmation"
+  title = $localize`Confirmation`
 
   @Input()
   messageBold
@@ -26,7 +26,7 @@ export class ConfirmDialogComponent implements OnInit {
   btnClass = "btn-primary"
 
   @Input()
-  btnCaption = "Confirm"
+  btnCaption = $localize`Confirm`
 
   confirmButtonEnabled = true
   seconds = 0
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index ba9f1fafb..e4f17c4e6 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -10,12 +10,12 @@
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 
           <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-            <div>After</div>
+            <div i18n>After</div>
             <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
               <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
               </svg>
-              <small>Clear</small>
+              <small i18n>Clear</small>
             </a>
           </div>
 
@@ -26,12 +26,12 @@
         <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 
           <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-            <div>Before</div>
+            <div i18n>Before</div>
             <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
               <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
               </svg>
-              <small>Clear</small>
+              <small i18n>Clear</small>
             </a>
           </div>
 
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 d7b2af6d3..48e0dfd97 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
@@ -25,7 +25,7 @@
         </ng-container>
       </div>
       <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
-        <small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}">Apply</small>
+        <small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}" i18n>Apply</small>
         <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
         </svg>
diff --git a/src-ui/src/app/components/common/select-dialog/select-dialog.component.html b/src-ui/src/app/components/common/select-dialog/select-dialog.component.html
index 8bde38d61..2184013a3 100644
--- a/src-ui/src/app/components/common/select-dialog/select-dialog.component.html
+++ b/src-ui/src/app/components/common/select-dialog/select-dialog.component.html
@@ -10,6 +10,6 @@
 
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()">Cancel</button>
-  <button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)">Select</button>
+  <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)" i18n>Select</button>
 </div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/select-dialog/select-dialog.component.ts b/src-ui/src/app/components/common/select-dialog/select-dialog.component.ts
index 76b23491c..99bf9b91a 100644
--- a/src-ui/src/app/components/common/select-dialog/select-dialog.component.ts
+++ b/src-ui/src/app/components/common/select-dialog/select-dialog.component.ts
@@ -15,10 +15,10 @@ export class SelectDialogComponent implements OnInit {
   public selectClicked = new EventEmitter()
 
   @Input()
-  title = "Select"
+  title = $localize`Select`
 
   @Input()
-  message = "Please select an object"
+  message = $localize`Please select an object`
 
   @Input()
   objects: ObjectWithId[] = []
diff --git a/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts b/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts
index 160274e41..34bbbd655 100644
--- a/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts
+++ b/src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts
@@ -15,7 +15,7 @@ export class MetadataCollapseComponent implements OnInit {
   metadata
 
   @Input()
-  title = "Metadata"
+  title = $localize`Metadata`
 
   ngOnInit(): void {
   }
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index c78f3ea3e..e08d50c47 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -3,32 +3,29 @@
     <button class="btn btn-sm btn-outline-danger" (click)="list.selectNone()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
-      </svg>
-      Cancel
+      </svg>&nbsp;<ng-container i18n>Cancel</ng-container>
     </button>
   </div>
   <div class="w-100 d-xl-none"></div>
   <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
-    <label class="mr-2 mb-0">Select:</label>
+    <label class="mr-2 mb-0" i18n>Select:</label>
     <div class="btn-group">
       <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
-        </svg>
-        Page
+        </svg>&nbsp;<ng-container i18n>Page</ng-container>
       </button>
       <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
         <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#check-all" />
-        </svg>
-        All
+        </svg>&nbsp;<ng-container i18n>All</ng-container>
       </button>
     </div>
   </div>
   <div class="w-100 d-xl-none"></div>
   <div class="col-auto mb-2 mb-xl-0">
     <div class="d-flex">
-      <label class="ml-auto mt-1 mb-0 mr-2">Edit:</label>
+      <label class="ml-auto mt-1 mb-0 mr-2" i18n>Edit:</label>
       <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
         [items]="tags"
         [editing]="true"
@@ -58,8 +55,7 @@
     <button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
       <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#trash" />
-      </svg>
-      Delete
+      </svg>&nbsp;<ng-container i18n>Delete</ng-container>
     </button>
   </div>
 </div>
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index b5539a1e5..40a08c105 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -4,13 +4,13 @@
     <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
-      </svg>
-      Select
+      </svg>&nbsp;<ng-container i18n>Select</ng-container>
+      
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
-      <button ngbDropdownItem (click)="list.selectPage()">Select page</button>
-      <button ngbDropdownItem (click)="list.selectAll()">Select all</button>
-      <button ngbDropdownItem (click)="list.selectNone()">Select none</button>
+      <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
+      <button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
+      <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
     </div>
   </div>
 
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index f029275eb..27a16edfd 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -1,18 +1,18 @@
 <div class="row">
    <div class="col mb-2 mb-xl-0">
      <div class="form-inline d-flex">
-         <label class="text-muted mr-2">Filter by:</label>
-         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title">
+         <label class="text-muted mr-2" i18n>Filter by:</label>
+         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder>
      </div>
   </div>
   <div class="w-100 d-xl-none"></div>
    <div class="col col-xl-auto mb-2 mb-xl-0">
      <div class="d-flex">
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [(selectionModel)]="tagSelectionModel" (selectionModelChange)="updateRules()" [multiple]="true" title="Tags" icon="tag-fill"></app-filterable-dropdown>
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [(selectionModel)]="correspondentSelectionModel" (selectionModelChange)="updateRules()" title="Correspondents" icon="person-fill"></app-filterable-dropdown>
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [(selectionModel)]="documentTypeSelectionModel" (selectionModelChange)="updateRules()" title="Document types" icon="file-earmark-fill"></app-filterable-dropdown>
-       <app-date-dropdown class="mr-2 mr-md-3" [(dateBefore)]="dateCreatedBefore" [(dateAfter)]="dateCreatedAfter" title="Created" (datesSet)="updateRules()"></app-date-dropdown>
-       <app-date-dropdown [(dateBefore)]="dateAddedBefore" [(dateAfter)]="dateAddedAfter" title="Added"  (datesSet)="updateRules()"></app-date-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [(selectionModel)]="tagSelectionModel" (selectionModelChange)="updateRules()" [multiple]="true" title="Tags" icon="tag-fill" i18n-title></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [(selectionModel)]="correspondentSelectionModel" (selectionModelChange)="updateRules()" title="Correspondents" icon="person-fill" i18n-title></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [(selectionModel)]="documentTypeSelectionModel" (selectionModelChange)="updateRules()" title="Document types" icon="file-earmark-fill" i18n-title></app-filterable-dropdown>
+       <app-date-dropdown class="mr-2 mr-md-3" [(dateBefore)]="dateCreatedBefore" [(dateAfter)]="dateCreatedAfter" title="Created" (datesSet)="updateRules()" i18n-title></app-date-dropdown>
+       <app-date-dropdown [(dateBefore)]="dateAddedBefore" [(dateAfter)]="dateAddedAfter" title="Added"  (datesSet)="updateRules()" i18n-title></app-date-dropdown>
      </div>
    </div>
    <div class="w-100 d-xl-none"></div>
@@ -20,8 +20,8 @@
      <button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
-       </svg>
-       Clear all filters
+       </svg>&nbsp;<ng-container i18n>Clear all filters</ng-container>
+       
      </button>
    </div>
 </div>
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index f881dc1d9..14a88c10b 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -25,13 +25,13 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
       switch(this.filterRules[0].rule_type) {
 
         case FILTER_CORRESPONDENT:
-          return `Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
+          return $localize`Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
 
         case FILTER_DOCUMENT_TYPE:
-          return `Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
+          return $localize`Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
 
         case FILTER_HAS_TAG:
-          return `Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
+          return $localize`Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
 
       }
     }

From 27ae4f6b1e2e6dc7e0444c9881086ca7f2cca380 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 15:48:35 +0100
Subject: [PATCH 69/73] fixes #197

---
 docker/local/Dockerfile | 1 +
 docs/setup.rst          | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docker/local/Dockerfile b/docker/local/Dockerfile
index 461b9e4fc..b66b814ff 100644
--- a/docker/local/Dockerfile
+++ b/docker/local/Dockerfile
@@ -9,6 +9,7 @@ RUN apt-get update \
   && apt-get -y --no-install-recommends install \
 		build-essential \
 		curl \
+		fonts-liberation \
 		ghostscript \
 		gnupg \
 		icc-profiles-free \
diff --git a/docs/setup.rst b/docs/setup.rst
index 4d29ce640..437409194 100644
--- a/docs/setup.rst
+++ b/docs/setup.rst
@@ -221,8 +221,9 @@ writing. Windows is not and will never be supported.
     *   ``python3-pip``, optionally ``pipenv`` for package installation
     *   ``python3-dev``
 
+    *   ``fonts-liberation`` for generating thumbnails for plain text files
     *   ``imagemagick`` >= 6 for PDF conversion
-    *   ``optipng`` for optimising thumbnails
+    *   ``optipng`` for optimizing thumbnails
     *   ``gnupg`` for handling encrypted documents
     *   ``libpoppler-cpp-dev`` for PDF to text conversion
     *   ``libmagic-dev`` for mime type detection
@@ -242,8 +243,7 @@ writing. Windows is not and will never be supported.
     *   ``tesseract-ocr`` language packs (``tesseract-ocr-eng``, ``tesseract-ocr-deu``, etc)
 
     You will also need ``build-essential``, ``python3-setuptools`` and ``python3-wheel``
-    for installing some of the python dependencies. You can remove that
-    again after installation.
+    for installing some of the python dependencies.
 
 2.  Install ``redis`` >= 5.0 and configure it to start automatically.
 

From 6d4aa76405c2292dd7c236b54ca54bc06f468b10 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 15:59:06 +0100
Subject: [PATCH 70/73] fixes #196

---
 src/documents/views.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/documents/views.py b/src/documents/views.py
index ddf02f534..32b88a18f 100755
--- a/src/documents/views.py
+++ b/src/documents/views.py
@@ -5,6 +5,7 @@ from time import mktime
 
 from django.conf import settings
 from django.db.models import Count, Max, Case, When, IntegerField
+from django.db.models.functions import Lower
 from django.http import HttpResponse, HttpResponseBadRequest, Http404
 from django.views.decorators.cache import cache_control
 from django.views.generic import TemplateView
@@ -68,7 +69,7 @@ class CorrespondentViewSet(ModelViewSet):
 
     queryset = Correspondent.objects.annotate(
         document_count=Count('documents'),
-        last_correspondence=Max('documents__created')).order_by('name')
+        last_correspondence=Max('documents__created')).order_by(Lower('name'))
 
     serializer_class = CorrespondentSerializer
     pagination_class = StandardPagination
@@ -87,7 +88,7 @@ class TagViewSet(ModelViewSet):
     model = Tag
 
     queryset = Tag.objects.annotate(
-        document_count=Count('documents')).order_by('name')
+        document_count=Count('documents')).order_by(Lower('name'))
 
     serializer_class = TagSerializer
     pagination_class = StandardPagination
@@ -101,7 +102,7 @@ class DocumentTypeViewSet(ModelViewSet):
     model = DocumentType
 
     queryset = DocumentType.objects.annotate(
-        document_count=Count('documents')).order_by('name')
+        document_count=Count('documents')).order_by(Lower('name'))
 
     serializer_class = DocumentTypeSerializer
     pagination_class = StandardPagination

From 1de7a490b4f1114fdc8fd7523da4ed4e0ce4c85f Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 17:04:53 +0100
Subject: [PATCH 71/73] #186 allow filtering for documents with no
 correspondents / tags / types

---
 .../filterable-dropdown.component.html        |  2 +-
 .../filterable-dropdown.component.ts          | 23 ++++++++++++++++++-
 .../filter-editor.component.html              |  6 ++---
 .../filter-editor/filter-editor.component.ts  | 16 ++++++++-----
 4 files changed, 36 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 48e0dfd97..7215faa79 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="selectionModel.items" class="items">
         <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>
+          <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
       <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
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 e06f0d638..06b2333d5 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
@@ -53,6 +53,16 @@ export class FilterableDropdownSelectionModel {
       }
     }
 
+    if (!id) {
+      for (let key of this.temporarySelectionStates.keys()) {
+        if (key) {
+          this.temporarySelectionStates.delete(key)
+        }
+      }
+    } else {
+      this.temporarySelectionStates.delete(null)
+    }
+
     if (fireEvent) {
       this.changed.next(this)
     }
@@ -84,6 +94,10 @@ export class FilterableDropdownSelectionModel {
     }
   }
 
+  isNoneSelected() {
+    return this.selectionSize() == 1 && this.get(null) == ToggleableItemState.Selected
+  }
+
   init(map) {
     this.temporarySelectionStates = map
     this.apply()
@@ -126,7 +140,11 @@ export class FilterableDropdownComponent {
   @Input()
   set items(items: MatchingModel[]) {
     if (items) {
-      this._selectionModel.items = items
+      this._selectionModel.items = Array.from(items)
+      this._selectionModel.items.unshift({
+        name: "None",
+        id: null
+      })
     }
   }
 
@@ -171,6 +189,9 @@ export class FilterableDropdownComponent {
   @Input()
   icon: string
 
+  @Input()
+  allowSelectNone: boolean = false
+
   @Input()
   editing = false
 
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index 27a16edfd..f0c83ae73 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -8,9 +8,9 @@
   <div class="w-100 d-xl-none"></div>
    <div class="col col-xl-auto mb-2 mb-xl-0">
      <div class="d-flex">
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [(selectionModel)]="tagSelectionModel" (selectionModelChange)="updateRules()" [multiple]="true" title="Tags" icon="tag-fill" i18n-title></app-filterable-dropdown>
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [(selectionModel)]="correspondentSelectionModel" (selectionModelChange)="updateRules()" title="Correspondents" icon="person-fill" i18n-title></app-filterable-dropdown>
-       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [(selectionModel)]="documentTypeSelectionModel" (selectionModelChange)="updateRules()" title="Document types" icon="file-earmark-fill" i18n-title></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [(selectionModel)]="tagSelectionModel" (selectionModelChange)="updateRules()" [multiple]="true" [allowSelectNone]="true" title="Tags" icon="tag-fill" i18n-title></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [(selectionModel)]="correspondentSelectionModel" (selectionModelChange)="updateRules()" [allowSelectNone]="true" title="Correspondents" icon="person-fill" i18n-title></app-filterable-dropdown>
+       <app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [(selectionModel)]="documentTypeSelectionModel" (selectionModelChange)="updateRules()" [allowSelectNone]="true" title="Document types" icon="file-earmark-fill" i18n-title></app-filterable-dropdown>
        <app-date-dropdown class="mr-2 mr-md-3" [(dateBefore)]="dateCreatedBefore" [(dateAfter)]="dateCreatedAfter" title="Created" (datesSet)="updateRules()" i18n-title></app-date-dropdown>
        <app-date-dropdown [(dateBefore)]="dateAddedBefore" [(dateAfter)]="dateAddedAfter" title="Added"  (datesSet)="updateRules()" i18n-title></app-date-dropdown>
      </div>
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index 14a88c10b..d4cac1a9d 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -8,7 +8,7 @@ import { DocumentTypeService } from 'src/app/services/rest/document-type.service
 import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { FilterRule } from 'src/app/data/filter-rule';
-import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE } from 'src/app/data/filter-rule-type';
+import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_ANY_TAG, FILTER_HAS_TAG, FILTER_TITLE } from 'src/app/data/filter-rule-type';
 import { FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
 import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
@@ -100,14 +100,18 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     if (this._titleFilter) {
       filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
     }
-    this.tagSelectionModel.getSelectedItems().forEach(tag => {
-      filterRules.push({rule_type: FILTER_HAS_TAG, value: tag.id.toString()})
-    })
+    if (this.tagSelectionModel.isNoneSelected()) {
+      filterRules.push({rule_type: FILTER_HAS_ANY_TAG, value: "false"})
+    } else {
+      this.tagSelectionModel.getSelectedItems().filter(tag => tag.id).forEach(tag => {
+        filterRules.push({rule_type: FILTER_HAS_TAG, value: tag.id?.toString()})
+      })  
+    }
     this.correspondentSelectionModel.getSelectedItems().forEach(correspondent => {
-      filterRules.push({rule_type: FILTER_CORRESPONDENT, value: correspondent.id.toString()})
+      filterRules.push({rule_type: FILTER_CORRESPONDENT, value: correspondent.id?.toString()})
     })
     this.documentTypeSelectionModel.getSelectedItems().forEach(documentType => {
-      filterRules.push({rule_type: FILTER_DOCUMENT_TYPE, value: documentType.id.toString()})
+      filterRules.push({rule_type: FILTER_DOCUMENT_TYPE, value: documentType.id?.toString()})
     })
     if (this.dateCreatedBefore) {
       filterRules.push({rule_type: FILTER_CREATED_BEFORE, value: this.dateCreatedBefore})

From 39637fc4aa6af7d08e5692bfffd7092f3cb44781 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 17:09:19 +0100
Subject: [PATCH 72/73] fixes #175

---
 src/paperless_mail/mail.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/paperless_mail/mail.py b/src/paperless_mail/mail.py
index 3c200362d..537807400 100644
--- a/src/paperless_mail/mail.py
+++ b/src/paperless_mail/mail.py
@@ -3,9 +3,9 @@ import tempfile
 from datetime import timedelta, date
 
 import magic
+import pathvalidate
 from django.conf import settings
 from django.db import DatabaseError
-from django.utils.text import slugify
 from django_q.tasks import async_task
 from imap_tools import MailBox, MailBoxUnencrypted, AND, MailMessageFlags, \
     MailboxFolderSelectError
@@ -294,7 +294,7 @@ class MailAccountHandler(LoggingMixin):
                 async_task(
                     "documents.tasks.consume_file",
                     path=temp_filename,
-                    override_filename=att.filename,
+                    override_filename=pathvalidate.sanitize_filename(att.filename),  # NOQA: E501
                     override_title=title,
                     override_correspondent_id=correspondent.id if correspondent else None,  # NOQA: E501
                     override_document_type_id=doc_type.id if doc_type else None,  # NOQA: E501

From 70c02a1c8235880a66facbdaaee3dfed6d1e855a Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Mon, 28 Dec 2020 17:20:07 +0100
Subject: [PATCH 73/73] fixes #185

---
 docker/local/Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docker/local/Dockerfile b/docker/local/Dockerfile
index b66b814ff..a8e991d8c 100644
--- a/docker/local/Dockerfile
+++ b/docker/local/Dockerfile
@@ -63,6 +63,7 @@ RUN sudo -HEu paperless python3 manage.py collectstatic --clear --no-input
 
 VOLUME ["/usr/src/paperless/data", "/usr/src/paperless/media", "/usr/src/paperless/consume", "/usr/src/paperless/export"]
 ENTRYPOINT ["/sbin/docker-entrypoint.sh"]
+EXPOSE 8000
 CMD ["/usr/local/bin/supervisord", "-c", "/etc/supervisord.conf"]
 
 LABEL maintainer="Jonas Winkler <dev@jpwinkler.de>"