Merge branch 'dev' into feature/dark-mode

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
 
@@ -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

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 \
@@ -62,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>"

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
+    for installing some of the python dependencies.
-    again after installation.
 
 2.  Install ``redis`` >= 5.0 and configure it to start automatically.
 

src-ui/src/app/app.module.ts

@@ -26,12 +26,13 @@ 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 { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component';
-import { FilterDropdownComponent } from './components/filter-editor/filter-dropdown/filter-dropdown.component';
+import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component';
-import { FilterDropdownButtonComponent } from './components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component';
+import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
-import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.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';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { TextComponent } from './components/common/input/text/text.component';
 import { SelectComponent } from './components/common/input/select/select.component';
@@ -54,8 +55,8 @@ import { FileSizePipe } from './pipes/file-size.pipe';
 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 { NgSelectModule } from '@ng-select/ng-select';
 import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @NgModule({
   declarations: [
@@ -80,11 +81,12 @@ import { SelectDialogComponent } from './components/common/select-dialog/select-
     AppFrameComponent,
     ToastsComponent,
     FilterEditorComponent,
-    FilterDropdownComponent,
+    FilterableDropdownComponent,
-    FilterDropdownButtonComponent,
+    ToggleableDropdownButtonComponent,
-    FilterDropdownDateComponent,
+    DateDropdownComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
+    BulkEditorComponent,
     TextComponent,
     SelectComponent,
     CheckComponent,

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

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}}
@@ -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>
 

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 {

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', () => {
+describe('DateDropdownComponent', () => {
-  let component: FilterDropodownComponent;
+  let component: DateDropdownComponent;
-  let fixture: ComponentFixture<FilterDropodownComponent>;
+  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();
   });

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

@@ -8,31 +8,37 @@ export interface DateSelection {
   after?: string
 }
 
-const FILTER_LAST_7_DAYS = 0
+const LAST_7_DAYS = 0
-const FILTER_LAST_MONTH = 1
+const LAST_MONTH = 1
-const FILTER_LAST_3_MONTHS = 2
+const LAST_3_MONTHS = 2
-const FILTER_LAST_YEAR = 3
+const LAST_YEAR = 3
 
 @Component({
-  selector: 'app-filter-dropdown-date',
+  selector: 'app-date-dropdown',
-  templateUrl: './filter-dropdown-date.component.html',
+  templateUrl: './date-dropdown.component.html',
-  styleUrls: ['./filter-dropdown-date.component.scss']
+  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: LAST_7_DAYS, name: "Last 7 days"},
-    {id: FILTER_LAST_MONTH, name: "Last month"},
+    {id: LAST_MONTH, name: "Last month"},
-    {id: FILTER_LAST_3_MONTHS, name: "Last 3 months"},
+    {id: LAST_3_MONTHS, name: "Last 3 months"},
-    {id: FILTER_LAST_YEAR, name: "Last year"}
+    {id: LAST_YEAR, name: "Last year"}
   ]
 
   @Input()
   dateBefore: string
 
+  @Output()
+  dateBeforeChange = new EventEmitter<string>()
+
   @Input()
   dateAfter: string
 
+  @Output()
+  dateAfterChange = new EventEmitter<string>()
+
   @Input()
   title: string
 
@@ -42,7 +48,7 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
   private datesSetDebounce$ = new Subject()
 
   private sub: Subscription
-  
+
   ngOnInit() {
     this.sub = this.datesSetDebounce$.pipe(
       debounceTime(400)
@@ -61,28 +67,30 @@ 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()
   }
 
   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 FilterDropdownDateComponent implements OnInit, OnDestroy {
   }
 
   clearBefore() {
-    this.dateBefore = null;
+    this.dateBefore = null
     this.onChange()
   }
 
   clearAfter() {
-    this.dateAfter = null;
+    this.dateAfter = null
     this.onChange()
   }
 

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

@@ -0,0 +1,35 @@
+<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
+  <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="!editing && selectionModel.selectionSize() > 0">
+      <div class="badge bg-secondary text-light rounded-pill badge-corner">
+        {{selectionModel.selectionSize()}}
+      </div>
+    </ng-container>
+  </button>
+  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+    <div class="list-group list-group-flush">
+      <div class="list-group-item">
+        <div class="input-group input-group-sm">
+          <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
+        </div>
+      </div>
+      <div *ngIf="selectionModel.items" class="items">
+        <ng-container *ngFor="let item of selectionModel.items | filter: filterText">
+          <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()">
+        <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>
+      </button>
+    </div>
+  </div>
+</div>

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();
+  });
+});

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

@@ -0,0 +1,240 @@
+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 { ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
+import { MatchingModel } from 'src/app/data/matching-model';
+import { Subject } from 'rxjs';
+
+export interface ChangedItems {
+  itemsToAdd: MatchingModel[],
+  itemsToRemove: MatchingModel[]
+}
+
+export class FilterableDropdownSelectionModel {
+
+  changed = new Subject<FilterableDropdownSelectionModel>()
+
+  multiple = false
+
+  items: MatchingModel[] = []
+
+  private selectionStates = new Map<number, ToggleableItemState>()
+
+  private temporarySelectionStates = new Map<number, ToggleableItemState>()
+
+  getSelectedItems() {
+    return this.items.filter(i => this.temporarySelectionStates.get(i.id) == ToggleableItemState.Selected)
+  }
+
+  set(id: number, state: ToggleableItemState, fireEvent = true) {
+    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.temporarySelectionStates.get(id)
+    if (state == null || state != ToggleableItemState.Selected) {
+      this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
+    } else if (state == ToggleableItemState.Selected) {
+      this.temporarySelectionStates.delete(id)
+    }
+
+    if (!this.multiple) {
+      for (let key of this.temporarySelectionStates.keys()) {
+        if (key != id) {
+          this.temporarySelectionStates.delete(key)
+        }
+      }
+    }
+
+    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)
+    }
+    
+  }
+
+  get(id: number) {
+    return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
+  }
+
+  selectionSize() {
+    return this.getSelectedItems().length
+  }
+
+  clear(fireEvent = true) {
+    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
+    }
+  }
+
+  isNoneSelected() {
+    return this.selectionSize() == 1 && this.get(null) == ToggleableItemState.Selected
+  }
+
+  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({
+  selector: 'app-filterable-dropdown',
+  templateUrl: './filterable-dropdown.component.html',
+  styleUrls: ['./filterable-dropdown.component.scss']
+})
+export class FilterableDropdownComponent {
+
+  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  filterText: string
+
+  @Input()
+  set items(items: MatchingModel[]) {
+    if (items) {
+      this._selectionModel.items = Array.from(items)
+      this._selectionModel.items.unshift({
+        name: "None",
+        id: null
+      })
+    }
+  }
+
+  get items(): MatchingModel[] {
+    return this._selectionModel.items
+  }
+
+  _selectionModel = new FilterableDropdownSelectionModel()
+
+  @Input()
+  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 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()
+  title: string
+
+  @Input()
+  icon: string
+
+  @Input()
+  allowSelectNone: boolean = false
+
+  @Input()
+  editing = false
+
+  @Output()
+  apply = new EventEmitter<ChangedItems>()
+
+  @Output()
+  open = new EventEmitter()
+
+  constructor(private filterPipe: FilterPipe) {
+    this.selectionModel = new FilterableDropdownSelectionModel()
+  }
+
+  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)
+      if (this.editing) {
+        this.selectionModel.reset()
+      }
+      this.open.next()
+    } else {
+      this.filterText = ''
+    }
+  }
+
+  listFilterEnter(): void {
+    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()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<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">
+    <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>
+    <ng-template #displayName><small>{{item.name}}</small></ng-template>
+  </div>
+  <div class="badge badge-light rounded-pill ml-auto mr-1">{{item.document_count}}</div>
+</button>

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.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();
+  });
+});

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

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+import { MatchingModel } from 'src/app/data/matching-model';
+
+export interface ToggleableItem {
+  item: MatchingModel,
+  state: ToggleableItemState,
+  count: number
+}
+
+export enum ToggleableItemState {
+  NotSelected = 0,
+  Selected = 1,
+  PartiallySelected = 2
+}
+
+@Component({
+  selector: 'app-toggleable-dropdown-button',
+  templateUrl: './toggleable-dropdown-button.component.html',
+  styleUrls: ['./toggleable-dropdown-button.component.scss']
+})
+export class ToggleableDropdownButtonComponent {
+
+  @Input()
+  item: MatchingModel
+
+  @Input()
+  state: ToggleableItemState
+
+  @Input()
+  count: number
+
+  @Output()
+  toggle = new EventEmitter()
+
+  get isTag(): boolean {
+    return 'is_inbox_tag' in this.item
+  }
+
+  toggleItem(): void {
+    this.toggle.emit()
+  }
+
+  isChecked() {
+    return this.state == ToggleableItemState.Selected
+  }
+
+  isPartiallyChecked() {
+    return this.state == ToggleableItemState.PartiallySelected
+  }
+
+}

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-outline-dark" (click)="cancelClicked()" i18n>Cancel</button>
-  <button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)">Select</button>
+  <button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)" i18n>Select</button>
 </div>

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[] = []

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 {
   }

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

@@ -0,0 +1,61 @@
+<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)="list.selectNone()">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
+      </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" 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>&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>&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" i18n>Edit:</label>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
+        [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"
+        [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"
+        [items]="documentTypes"
+        [editing]="true"
+        (open)="openDocumentTypeDropdown()"
+        [(selectionModel)]="documentTypeSelectionModel"
+        (apply)="setDocumentTypes($event)">
+      </app-filterable-dropdown>
+    </div>
+  </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-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>&nbsp;<ng-container i18n>Delete</ng-container>
+    </button>
+  </div>
+</div>

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

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FilterDropdownDateComponent } from './filter-dropdown-date.component';
+import { BulkEditorComponent } from './bulk-editor.component';
 
-describe('FilterDropdownDateComponent', () => {
+describe('BulkEditorComponent', () => {
-  let component: FilterDropdownDateComponent;
+  let component: BulkEditorComponent;
-  let fixture: ComponentFixture<FilterDropdownDateComponent>;
+  let fixture: ComponentFixture<BulkEditorComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FilterDropdownDateComponent ]
+      declarations: [ BulkEditorComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FilterDropdownDateComponent);
+    fixture = TestBed.createComponent(BulkEditorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,174 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+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 { 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, SelectionDataItem } from 'src/app/services/rest/document.service';
+import { OpenDocumentsService } from 'src/app/services/open-documents.service';
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component';
+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',
+  templateUrl: './bulk-editor.component.html',
+  styleUrls: ['./bulk-editor.component.scss']
+})
+export class BulkEditorComponent {
+
+  tags: PaperlessTag[]
+  correspondents: PaperlessCorrespondent[]
+  documentTypes: PaperlessDocumentType[]
+
+  tagSelectionModel = new FilterableDropdownSelectionModel()
+  correspondentSelectionModel = new FilterableDropdownSelectionModel()
+  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService,
+    public list: DocumentListViewService,
+    private documentService: DocumentService,
+    private modalService: NgbModal,
+    private openDocumentService: OpenDocumentsService
+  ) { }
+
+  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)
+  }
+
+  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()
+      })
+    )
+  }
+
+  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)
+  }
+
+  openTagsDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_tags, this.tagSelectionModel)
+    })
+  }
+
+  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"
+    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 => {
+          this.correspondentService.clearCache()
+          modal.close()
+        }
+      )
+    })
+  }
+
+  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"
+    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 => {
+          this.documentService.clearCache()
+          modal.close()
+        }
+      )
+    })
+  }
+
+  applyDelete() {
+    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()
+        }
+      )
+    })
+  }
+}

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -1,9 +1,9 @@
-<div class="col p-2 h-100 document-card">
+<div class="col p-2 h-100">
   <div class="card h-100 shadow-sm" [class.card-selected]="selected">
     <div class="border-bottom" [class.doc-img-background-selected]="selected">
       <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!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)="setSelected($event.target.checked)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>

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;
-}
+}

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>
+      </svg>&nbsp;<ng-container i18n>Select</ng-container>
-      Bulk edit
+      
     </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.selectNone()" i18n>Select none</button>
-      <button ngbDropdownItem (click)="list.selectAll()">Select all</button>
+      <button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
-      <button ngbDropdownItem (click)="list.selectNone()">Select none</button>
+      <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</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>
 
@@ -87,7 +78,8 @@
 </app-page-header>
 
 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-bulk-editor *ngIf="isBulkEditing"></app-bulk-editor>
 </div>
 
 <div class="d-flex justify-content-between align-items-center">
@@ -147,7 +139,6 @@
   </tbody>
 </table>
 
-
 <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
   <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

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

@@ -1,22 +1,14 @@
 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 { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
-import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
-import { DocumentService, 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 { 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 { OpenDocumentsService } from 'src/app/services/open-documents.service';
 
 @Component({
   selector: 'app-document-list',
@@ -31,12 +23,7 @@ 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) { }
 
   @ViewChild("filterEditor")
   private filterEditor: FilterEditorComponent
@@ -55,6 +42,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)
   }
@@ -115,133 +106,27 @@ export class DocumentListComponent implements OnInit {
   }
 
   clickTag(tagID: number) {
-    this.filterEditor.toggleTag(tagID)
+    this.list.selectNone()
+    setTimeout(() => {
+      this.filterEditor.toggleTag(tagID)
+    })
   }
 
   clickCorrespondent(correspondentID: number) {
-    this.filterEditor.toggleCorrespondent(correspondentID)
+    this.list.selectNone()
+    setTimeout(() => {
+      this.filterEditor.toggleCorrespondent(correspondentID)
+    })
   }
 
   clickDocumentType(documentTypeID: number) {
-    this.filterEditor.toggleDocumentType(documentTypeID)
+    this.list.selectNone()
+    setTimeout(() => {
+      this.filterEditor.toggleDocumentType(documentTypeID)
+    })
   }
 
   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()
-      })
-    )
-  }
-
-  bulkSetCorrespondent() {
-    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(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  bulkRemoveCorrespondent() {
-    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.confirmClicked.subscribe(() => {
-      this.executeBulkOperation('set_correspondent', {"correspondent": null}).subscribe(r => {
-        modal.close()
-      })
-    })
-  }
-
-  bulkSetDocumentType() {
-    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(
-        response => {
-          modal.close()
-        }
-      )
-    })
-  }
-
-  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()
-      })
-    })
-  }
-
-  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)
-    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()
-        }
-      )
-    })
-  }
 }

src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html

@@ -0,0 +1,27 @@
+<div class="row">
+   <div class="col mb-2 mb-xl-0">
+     <div class="form-inline d-flex">
+         <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" [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>
+   </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>&nbsp;<ng-container i18n>Clear all filters</ng-container>
+       
+     </button>
+   </div>
+</div>

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

@@ -0,0 +1,192 @@
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } 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 { Subject, Subscription } from 'rxjs';
+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_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';
+
+@Component({
+  selector: 'app-filter-editor',
+  templateUrl: './filter-editor.component.html',
+  styleUrls: ['./filter-editor.component.scss']
+})
+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 $localize`Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
+
+        case FILTER_DOCUMENT_TYPE:
+          return $localize`Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
+
+        case FILTER_HAS_TAG:
+          return $localize`Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
+
+      }
+    }
+
+    return ""
+  }
+
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService
+  ) { }
+
+  tags: PaperlessTag[] = []
+  correspondents: PaperlessCorrespondent[] = []
+  documentTypes: PaperlessDocumentType[] = []
+
+  _titleFilter = ""
+
+  tagSelectionModel = new FilterableDropdownSelectionModel()
+  correspondentSelectionModel = new FilterableDropdownSelectionModel()
+  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+
+  dateCreatedBefore: string
+  dateCreatedAfter: string
+  dateAddedBefore: string
+  dateAddedAfter: string
+
+  @Input()
+  set filterRules (value: FilterRule[]) {
+    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
+        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
+      }
+    })
+  }
+
+  @Output()
+  filterRulesChange = new EventEmitter<FilterRule[]>()
+
+  updateRules() {
+    let filterRules: FilterRule[] = []
+    if (this._titleFilter) {
+      filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
+    }
+    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()})
+    })
+    this.documentTypeSelectionModel.getSelectedItems().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})
+    }
+    this.filterRulesChange.next(filterRules)
+  }
+
+  hasFilters() {
+    return this._titleFilter || 
+      this.dateAddedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
+      this.tagSelectionModel.selectionSize() || this.correspondentSelectionModel.selectionSize() || this.documentTypeSelectionModel.selectionSize()
+  }
+
+  get titleFilter() {
+    return this._titleFilter
+  }
+
+  set titleFilter(value) {
+    this.titleFilterDebounce.next(value)
+  }
+
+  titleFilterDebounce: Subject<string>
+  subscription: Subscription
+
+  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)
+
+    this.titleFilterDebounce = new Subject<string>()
+
+    this.subscription = this.titleFilterDebounce.pipe(
+      debounceTime(400),
+      distinctUntilChanged()
+    ).subscribe(title => {
+      this._titleFilter = title
+      this.updateRules()
+    })
+  }
+
+  ngOnDestroy() {
+    this.titleFilterDebounce.complete()
+  }
+
+  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)
+  }
+
+}

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html

@@ -1,12 +0,0 @@
-<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>
-  </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>
-  </div>
-  <div class="badge badge-light rounded-pill ml-auto mr-1">{{item.document_count}}</div>
-</button>

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts

@@ -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();
-  });
-});

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts

@@ -1,32 +0,0 @@
-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';
-
-@Component({
-  selector: 'app-filter-dropdown-button',
-  templateUrl: './filter-dropdown-button.component.html',
-  styleUrls: ['./filter-dropdown-button.component.scss']
-})
-export class FilterDropdownButtonComponent implements OnInit {
-
-  @Input()
-  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent
-
-  @Input()
-  selected: boolean
-
-  @Output()
-  toggle = new EventEmitter()
-
-  isTag: boolean
-
-  ngOnInit() {
-    this.isTag = 'is_inbox_tag' in this.item // ~ this.item instanceof PaperlessTag
-  }
-
-  toggleItem(): void {
-    this.selected = !this.selected
-    this.toggle.emit(this.item)
-  }
-}

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html

@@ -1,29 +0,0 @@
-<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'">
-    <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">
-      <div class="list-group-item">
-        <div class="input-group input-group-sm">
-          <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-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-</div>

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts

@@ -1,58 +0,0 @@
-import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
-import { ObjectWithId } from 'src/app/data/object-with-id';
-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']
-})
-export class FilterDropdownComponent {
-
-  constructor(private filterPipe: FilterPipe) { }
-
-  @Input()
-  items: ObjectWithId[]
-
-  @Input()
-  itemsSelected: ObjectWithId[]
-
-  @Input()
-  title: string
-
-  @Input()
-  icon: string
-
-  @Output()
-  toggle = new EventEmitter()
-
-  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
-  @ViewChild('filterDropdown') filterDropdown: NgbDropdown
-
-  filterText: string
-
-  toggleItem(item: ObjectWithId): void {
-    this.toggle.emit(item)
-  }
-
-  isItemSelected(item: ObjectWithId): boolean {
-    return this.itemsSelected?.find(i => i.id == item.id) !== undefined
-  }
-
-  dropdownOpenChange(open: boolean): void {
-    if (open) {
-      setTimeout(() => {
-        this.listFilterTextInput.nativeElement.focus();
-      }, 0);
-    } else {
-      this.filterText = ''
-    }
-  }
-
-  listFilterEnter(): void {
-    let filtered = this.filterPipe.transform(this.items, this.filterText)
-    if (filtered.length == 1) this.toggleItem(filtered.shift())
-    this.filterDropdown.close()
-  }
-}

src-ui/src/app/components/filter-editor/filter-editor.component.html

@@ -1,27 +0,0 @@
-<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="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>

src-ui/src/app/components/filter-editor/filter-editor.component.ts

@@ -1,239 +0,0 @@
-import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } 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 { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { NgbDateParserFormatter, NgbDateStruct } 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';
-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';
-
-@Component({
-  selector: 'app-filter-editor',
-  templateUrl: './filter-editor.component.html',
-  styleUrls: ['./filter-editor.component.scss']
-})
-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,
-    private correspondentService: CorrespondentService,
-    private dateParser: NgbDateParserFormatter
-  ) { }
-
-  tags: PaperlessTag[] = []
-  correspondents: PaperlessCorrespondent[]
-  documentTypes: PaperlessDocumentType[] = []
-
-  @Input()
-  filterRules: FilterRule[]
-
-  @Output()
-  filterRulesChange = new EventEmitter<FilterRule[]>()
-  
-  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))
-  }
-
-  get titleFilter() {
-    let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
-    return existingRule ? existingRule.value : ''
-  }
-
-  set titleFilter(value) {
-    this.titleFilterDebounce.next(value)
-  }
-
-  titleFilterDebounce: Subject<string>
-  subscription: Subscription
-
-  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)
-
-    this.titleFilterDebounce = new Subject<string>()
-
-    this.subscription = this.titleFilterDebounce.pipe(
-      debounceTime(400),
-      distinctUntilChanged()
-    ).subscribe(title => {
-      this.setTitleRule(title)
-    })
-  }
-
-  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()
-  }
-
-  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)
-    }
-  }
-
-}

src-ui/src/app/data/matching-model.ts

@@ -29,4 +29,6 @@ export interface MatchingModel extends ObjectWithId {
 
     is_insensitive?: boolean
 
+    document_count?: number
+
 }

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
 

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
-
 }

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
 }

src-ui/src/app/pipes/filter.pipe.ts

@@ -1,10 +1,12 @@
 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(items: any[], searchText: string): any[] {
+  transform(items: MatchingModel[], searchText: string): MatchingModel[] {
     if (!items) return [];
     if (!searchText) return items;
 

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)
   }
 

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 {
+  selected_correspondents: SelectionDataItem[]
+  selected_tags: SelectionDataItem[]
+  selected_document_types: SelectionDataItem[]
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -114,4 +125,8 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     })
   }
 
+  getSelectionData(ids: number[]): Observable<SelectionData> {
+    return this.http.post<SelectionData>(this.getResourceUrl(null, 'selection_data'), {"documents": ids})
+  }
+
 }

src/documents/bulk_edit.py

@@ -1,3 +1,5 @@
+import itertools
+
 from django.db.models import Q
 from django_q.tasks import async_task
 from whoosh.writing import AsyncWriter
@@ -16,11 +18,7 @@ def set_correspondent(doc_ids, correspondent):
     qs.update(correspondent=correspondent)
 
     async_task(
-        "documents.tasks.bulk_index_documents",
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
 
     return "OK"
 
@@ -35,11 +33,7 @@ def set_document_type(doc_ids, document_type):
     qs.update(document_type=document_type)
 
     async_task(
-        "documents.tasks.bulk_index_documents",
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
 
     return "OK"
 
@@ -57,11 +51,7 @@ def add_tag(doc_ids, tag):
     ])
 
     async_task(
-        "documents.tasks.bulk_index_documents",
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
-        document_ids=affected_docs
-    )
-
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
 
     return "OK"
 
@@ -79,11 +69,29 @@ def remove_tag(doc_ids, tag):
     ).delete()
 
     async_task(
-        "documents.tasks.bulk_index_documents",
+        "documents.tasks.bulk_update_documents", document_ids=affected_docs)
-        document_ids=affected_docs
-    )
 
-    async_task("documents.tasks.bulk_rename_files", document_ids=affected_docs)
+    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_update_documents", document_ids=affected_docs)
 
     return "OK"
 

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,31 @@ 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 "
+                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")
+        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)
         return documents
 
     def validate_method(self, method):
@@ -241,6 +262,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 +306,18 @@ 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_tag_id_list(parameters['add_tags'], "add_tags")
+        else:
+            raise serializers.ValidationError("add_tags not specified")
+
+        if "remove_tags" in parameters:
+            self._validate_tag_id_list(parameters['remove_tags'],
+                                       "remove_tags")
+        else:
+            raise serializers.ValidationError("remove_tags not specified")
+
     def validate(self, attrs):
 
         method = attrs['method']
@@ -294,6 +329,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
 
@@ -369,3 +406,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()
+    )

src/documents/tasks.py

@@ -90,16 +90,11 @@ def sanity_check():
         return "No issues detected."
 
 
-def bulk_rename_files(document_ids):
+def bulk_update_documents(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):
     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)

src/documents/tests/test_api.py

@@ -699,49 +699,63 @@ 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.async_task.assert_called_once()
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
+        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
+        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.async_task.assert_called_once()
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
+        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
+        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.async_task.assert_called_once()
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
+        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc2.id])
+        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.async_task.assert_called_once()
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
+        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc2.id, self.doc3.id])
+        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.async_task.assert_called_once()
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc3.id])
+        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc1.id, self.doc3.id])
+        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.async_task.assert_called_once()
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc4.id])
+        args, kwargs = self.async_task.call_args
-        self.assertCountEqual(self.async_task.call_args_list[0][1]['document_ids'], [self.doc4.id])
+        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])
+
+        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)

src/documents/views.py

@@ -4,7 +4,8 @@ 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.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
@@ -48,7 +49,7 @@ from .serialisers import (
     DocumentTypeSerializer,
     PostDocumentSerializer,
     SavedViewSerializer,
-    BulkEditSerializer
+    BulkEditSerializer, SelectionDataSerializer
 )
 
 
@@ -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
@@ -372,6 +373,63 @@ 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(
+            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()
+        )))
+
+        types = DocumentType.objects.annotate(document_count=Count(Case(
+            When(documents__id__in=ids, then=1),
+            output_field=IntegerField()
+        )))
+
+        r = Response({
+            "selected_correspondents": [{
+                "id": t.id,
+                "document_count": t.document_count
+            } for t in correspondents],
+            "selected_tags": [{
+                "id": t.id,
+                "document_count": t.document_count
+            } for t in tags],
+            "selected_document_types": [{
+                "id": t.id,
+                "document_count": t.document_count
+            } for t in types]
+        })
+
+        return r
+
+
 class SearchView(APIView):
 
     permission_classes = (IsAuthenticated,)

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)),

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