Merge remote-tracking branch 'upstream/dev' into feature/popover-previews

2025-07-28 18:24:38 -05:00 · 2021-02-24 12:41:44 -08:00
parent 55dea67784 9a383b9b5c
commit d08df53aa9
160 changed files with 11865 additions and 2503 deletions
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDateAdapter, NgbDateParserFormatter, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DocumentListComponent } from './components/document-list/document-list.component';
 import { DocumentDetailComponent } from './components/document-detail/document-detail.component';
@@ -39,7 +39,6 @@ import { SelectComponent } from './components/common/input/select/select.compone
 import { CheckComponent } from './components/common/input/check/check.component';
 import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { DateTimeComponent } from './components/common/input/date-time/date-time.component';
 import { TagsComponent } from './components/common/input/tags/tags.component';
 import { SortableDirective } from './directives/sortable.directive';
 import { CookieService } from 'ngx-cookie-service';
@@ -59,14 +58,21 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { NumberComponent } from './components/common/input/number/number.component';
 import { SafePipe } from './pipes/safe.pipe';
 import { CustomDatePipe } from './pipes/custom-date.pipe';
+import { DateComponent } from './components/common/input/date/date.component';
+import { ISODateTimeAdapter } from './utils/ngb-iso-date-time-adapter';
+import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter';

 import localeFr from '@angular/common/locales/fr';
 import localeNl from '@angular/common/locales/nl';
 import localeDe from '@angular/common/locales/de';
+import localePt from '@angular/common/locales/pt-PT';
+import localeEnGb from '@angular/common/locales/en-GB';

 registerLocaleData(localeFr)
 registerLocaleData(localeNl)
 registerLocaleData(localeDe)
+registerLocaleData(localePt, "pt-BR")
+registerLocaleData(localeEnGb)

@NgModule({
  declarations: [
@@ -101,7 +107,6 @@ registerLocaleData(localeDe)
    SelectComponent,
    CheckComponent,
    SaveViewConfigDialogComponent,
-    DateTimeComponent,
    TagsComponent,
    SortableDirective,
    SavedViewWidgetComponent,
@@ -117,7 +122,8 @@ registerLocaleData(localeDe)
    SelectDialogComponent,
    NumberComponent,
    SafePipe,
-    CustomDatePipe
+    CustomDatePipe,
+    DateComponent
  ],
  imports: [
    BrowserModule,
@@ -138,7 +144,9 @@ registerLocaleData(localeDe)
      multi: true
    },
    FilterPipe,
-    DocumentTitlePipe
+    DocumentTitlePipe,
+    {provide: NgbDateAdapter, useClass: ISODateTimeAdapter},
+    {provide: NgbDateParserFormatter, useClass: LocalizedDateParserFormatter}
  ],
  bootstrap: [AppComponent]
 })
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -163,13 +163,13 @@
            </a>
          </li>
          <li class="nav-item">
-            <div class="d-flex w-100">
-              <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/jonaswinkler/paperless-ng">
+            <div class="d-flex w-100 flex-wrap">
+              <a class="nav-link pr-0 pb-0" target="_blank" rel="noopener noreferrer" href="https://github.com/jonaswinkler/paperless-ng">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="sidebaricon bi bi-github" viewBox="0 0 16 16">
                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                </svg>&nbsp;<ng-container i18n>GitHub</ng-container>
              </a>
-              <a class="nav-link-additional small text-muted" target="_blank" rel="noopener noreferrer" href="https://github.com/jonaswinkler/paperless-ng/discussions/categories/feature-requests" title="Suggest an idea">
+              <a class="nav-link-additional small text-muted ml-3" target="_blank" rel="noopener noreferrer" href="https://github.com/jonaswinkler/paperless-ng/discussions/categories/feature-requests" title="Suggest an idea">
                <svg xmlns="http://www.w3.org/2000/svg" width=".9rem" height=".9rem" fill="currentColor" class="bi bi-lightbulb pr-1" viewBox="0 0 16 16">
                  <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>
                </svg>
@@ -177,7 +177,7 @@
              </a>
            </div>
          </li>
-          <li class="nav-item">
+          <li class="nav-item mt-2">
            <div class="px-3 py-2 text-muted small">
              {{versionString}}
            </div>
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -20,8 +20,17 @@
          </div>

          <div class="input-group input-group-sm">
-            <input type="date" class="form-control" id="date_after" [(ngModel)]="dateAfter" (change)="onChangeDebounce()">
+            <input class="form-control" [placeholder]="datePlaceHolder" id="dateAfter" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+                    [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                </svg>
+              </button>
+            </div>
          </div>
+
        </div>
        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">

@@ -36,8 +45,17 @@
          </div>

          <div class="input-group input-group-sm">
-            <input type="date" class="form-control" id="date_before" [(ngModel)]="dateBefore" (change)="onChangeDebounce()">
+            <input class="form-control" [placeholder]="datePlaceHolder" id="dateBefore" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+                    [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                </svg>
+              </button>
+            </div>
          </div>
+          
        </div>
    </div>
  </div>
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -1,7 +1,10 @@
 import { formatDate } from '@angular/common';
 import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
 import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { debounceTime } from 'rxjs/operators';
+import { SettingsService } from 'src/app/services/settings.service';
+import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter';

 export interface DateSelection {
  before?: string
@@ -16,10 +19,17 @@ const LAST_YEAR = 3
@Component({
  selector: 'app-date-dropdown',
  templateUrl: './date-dropdown.component.html',
-  styleUrls: ['./date-dropdown.component.scss']
+  styleUrls: ['./date-dropdown.component.scss'],
+  providers: [
+    {provide: NgbDateAdapter, useClass: ISODateAdapter},
+  ]
 })
 export class DateDropdownComponent implements OnInit, OnDestroy {

+  constructor(settings: SettingsService) {
+    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
+  }
+
  quickFilters = [
    {id: LAST_7_DAYS, name: $localize`Last 7 days`},
    {id: LAST_MONTH, name: $localize`Last month`},
@@ -27,6 +37,8 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
    {id: LAST_YEAR, name: $localize`Last year`}
  ]

+  datePlaceHolder: string
+
  @Input()
  dateBefore: string

--- a/src-ui/src/app/components/common/input/date-time/date-time.component.html
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.html
@@ -1,13 +0,0 @@
-<div class="form-row">
-  <div class="form-group col">
-      <label for="created_date">{{titleDate}}</label>
-      <input type="date" class="form-control" id="created_date" [(ngModel)]="dateValue" (change)="dateOrTimeChanged()">
-  </div>
-  <div class="form-group col" *ngIf="titleTime">
-      <label for="created_time">{{titleTime}}</label>
-      <input type="time" class="form-control" id="created_time" [(ngModel)]="timeValue" (change)="dateOrTimeChanged()">
-  </div>
-</div>
-
-
-<!-- <small *ngIf="hint" class="form-text text-muted">{{hint}}</small> -->
--- a/src-ui/src/app/components/common/input/date-time/date-time.component.ts
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.ts
@@ -1,61 +0,0 @@
-import { formatDate } from '@angular/common';
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  providers: [{
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => DateTimeComponent),
-    multi: true
-  }],
-  selector: 'app-input-date-time',
-  templateUrl: './date-time.component.html',
-  styleUrls: ['./date-time.component.scss']
-})
-export class DateTimeComponent implements OnInit,ControlValueAccessor  {
-
-  constructor() {
-  }
-
-  onChange = (newValue: any) => {};
-  
-  onTouched = () => {};
-
-  writeValue(newValue: any): void {
-    this.dateValue = formatDate(newValue, 'yyyy-MM-dd', "en-US")
-    this.timeValue = formatDate(newValue, 'HH:mm:ss', 'en-US')
-  }
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-  setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-
-  @Input()
-  titleDate: string = "Date"
-
-  @Input()
-  titleTime: string
-
-  @Input()
-  disabled: boolean = false
-
-  @Input()
-  hint: string
-
-  timeValue
-
-  dateValue
-
-  ngOnInit(): void {
-  }
-
-  dateOrTimeChanged() {
-    this.onChange(formatDate(this.dateValue + "T" + this.timeValue,"yyyy-MM-ddTHH:mm:ssZZZZZ", "en-us", "UTC"))
-  }
-
-}
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -0,0 +1,15 @@
+<div class="form-group">
+  <label [for]="inputId">{{title}}</label>
+  <div class="input-group">
+    <input [class.is-invalid]="error" class="form-control" [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)"
+           name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
+    <div class="input-group-append">
+      <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
+          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+        </svg>
+      </button>
+    </div>
+    <div class="invalid-feedback" *ngIf="error" i18n>Invalid date.</div>
+  </div>
+</div>
--- a/src-ui/src/app/components/common/input/date-time/date-time.component.scss
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.scss
--- a/src-ui/src/app/components/common/input/date-time/date-time.component.spec.ts
+++ b/src-ui/src/app/components/common/input/date-time/date-time.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

-import { DateTimeComponent } from './date-time.component';
+import { DateComponent } from './date.component';

-describe('DateTimeComponent', () => {
-  let component: DateTimeComponent;
-  let fixture: ComponentFixture<DateTimeComponent>;
+describe('DateComponent', () => {
+  let component: DateComponent;
+  let fixture: ComponentFixture<DateComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      declarations: [ DateTimeComponent ]
+      declarations: [ DateComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
-    fixture = TestBed.createComponent(DateTimeComponent);
+    fixture = TestBed.createComponent(DateComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -0,0 +1,32 @@
+import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgbDateAdapter, NgbDateParserFormatter, NgbDatepickerContent } from '@ng-bootstrap/ng-bootstrap';
+import { SettingsService } from 'src/app/services/settings.service';
+import { v4 as uuidv4 } from 'uuid';
+import { AbstractInputComponent } from '../abstract-input';
+
+
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DateComponent),
+    multi: true
+  }],
+  selector: 'app-input-date',
+  templateUrl: './date.component.html',
+  styleUrls: ['./date.component.scss']
+})
+export class DateComponent extends AbstractInputComponent<string> implements OnInit {
+
+  constructor(private settings: SettingsService) {
+    super()
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit()
+    this.placeholder = this.settings.getLocalizedDateInputFormat()
+  }
+
+  placeholder: string
+
+}
--- a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
@@ -12,7 +12,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
  templateUrl: './saved-view-widget.component.html',
  styleUrls: ['./saved-view-widget.component.scss']
 })
-export class SavedViewWidgetComponent implements OnInit {
+export class SavedViewWidgetComponent implements OnInit, OnDestroy {

  constructor(
    private documentService: DocumentService,
@@ -48,7 +48,7 @@ export class SavedViewWidgetComponent implements OnInit {
    if (this.savedView.show_in_sidebar) {
      this.router.navigate(['view', this.savedView.id])
    } else {
-      this.list.load(this.savedView)
+      this.list.loadSavedView(this.savedView, true)
      this.router.navigate(["documents"])
    }
  }
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
@@ -1,6 +1,6 @@
 <app-widget-frame title="Statistics" i18n-title>
  <ng-container content>
-    <p class="card-text" i18n>Documents in inbox: {{statistics.documents_inbox}}</p>
-    <p class="card-text" i18n>Total documents: {{statistics.documents_total}}</p>
+    <p class="card-text" i18n *ngIf="statistics?.documents_inbox != null">Documents in inbox: {{statistics?.documents_inbox}}</p>
+    <p class="card-text" i18n>Total documents: {{statistics?.documents_total}}</p>
  </ng-container>
 </app-widget-frame>
--- a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
@@ -1,6 +1,7 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { ConsumerStatusService } from 'src/app/services/consumer-status.service';
 import { environment } from 'src/environments/environment';

 export interface Statistics {
@@ -14,20 +15,34 @@ export interface Statistics {
  templateUrl: './statistics-widget.component.html',
  styleUrls: ['./statistics-widget.component.scss']
 })
-export class StatisticsWidgetComponent implements OnInit {
+export class StatisticsWidgetComponent implements OnInit, OnDestroy {

-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient,
+    private consumerStatusService: ConsumerStatusService) { }

  statistics: Statistics = {}

-  getStatistics(): Observable<Statistics> {
+  subscription: Subscription
+  
+  private getStatistics(): Observable<Statistics> {
    return this.http.get(`${environment.apiBaseUrl}statistics/`)
  }

-  ngOnInit(): void {
+  reload() {
    this.getStatistics().subscribe(statistics => {
      this.statistics = statistics
    })
  }

+  ngOnInit(): void {
+    this.reload()
+    this.subscription = this.consumerStatusService.onDocumentConsumptionFinished().subscribe(status => {
+      this.reload()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+
 }
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
@@ -1,6 +1,6 @@
 <app-widget-frame title="Upload new documents" i18n-title>
  <div header-buttons>
-    <a *ngIf="getStatusCompleted().length > 0" (click)="dismissAll()" [routerLink]="" >
+    <a *ngIf="getStatusSuccess().length > 0" (click)="dismissCompleted()" [routerLink]="" >
      <span i18n="This button dismisses all status messages about processed documents on the dashboard (failed and successful)">Dismiss completed</span>&nbsp;
      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-check2-all" viewBox="0 0 16 16">
        <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7l-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"/>
--- a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
+++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
@@ -92,8 +92,8 @@ export class UploadFileWidgetComponent implements OnInit {
    this.consumerStatusService.dismiss(status)
  }

-  dismissAll() {
-    this.consumerStatusService.dismissAll()
+  dismissCompleted() {
+    this.consumerStatusService.dismissCompleted()
  }

  ngOnInit(): void {
@@ -133,7 +133,7 @@ export class UploadFileWidgetComponent implements OnInit {
                break;
              }
              default: {
-                this.consumerStatusService.fail(status, `${error.status} ${error.statusText}`)
+                this.consumerStatusService.fail(status, $localize`HTTP error: ${error.status} ${error.statusText}`)
                break;
              }
            }
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -48,7 +48,7 @@

                        <app-input-text #inputTitle i18n-title title="Title" formControlName="title" [error]="error?.title"></app-input-text>
                        <app-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" formControlName='archive_serial_number'></app-input-number>
-                        <app-input-date-time i18n-titleDate titleDate="Date created" formControlName="created"></app-input-date-time>
+                        <app-input-date i18n-title title="Date created" formControlName="created" [error]="error?.created"></app-input-date>
                        <app-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true"
                            (createNew)="createCorrespondent()" [suggestions]="suggestions?.correspondents"></app-input-select>
                        <app-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true"
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -107,9 +107,13 @@ export class DocumentDetailComponent implements OnInit {
    this.document = doc
    this.documentsService.getMetadata(doc.id).subscribe(result => {
      this.metadata = result
+    }, error => {
+      this.metadata = null
    })
    this.documentsService.getSuggestions(doc.id).subscribe(result => {
      this.suggestions = result
+    }, error => {
+      this.suggestions = null
    })
    this.title = this.documentTitlePipe.transform(doc.title)
    this.documentForm.patchValue(doc)
@@ -179,8 +183,8 @@ export class DocumentDetailComponent implements OnInit {

  close() {
    this.openDocumentService.closeDocument(this.document)
-    if (this.documentListViewService.savedViewId) {
-      this.router.navigate(['view', this.documentListViewService.savedViewId])
+    if (this.documentListViewService.activeSavedViewId) {
+      this.router.navigate(['view', this.documentListViewService.activeSavedViewId])
    } else {
      this.router.navigate(['documents'])
    }
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -56,6 +56,20 @@
    </div>
  </div>
  <div class="col-auto ml-auto mb-2 mb-xl-0 d-flex">
+    <div class="btn-group btn-group-sm mr-2">
+      <button type="button" class="btn btn-outline-primary btn-sm" (click)="downloadSelected()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#download" />
+        </svg>&nbsp;<ng-container i18n>Download</ng-container>
+      </button>
+      <div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+        <button class="btn btn-outline-primary btn-sm dropdown-toggle-split" ngbDropdownToggle></button>
+        <div class="dropdown-menu shadow" ngbDropdownMenu>
+          <button ngbDropdownItem i18n (click)="downloadSelected('originals')">Download originals</button>
+        </div>
+      </div>
+    </div>
+
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()">
      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#trash" />
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -15,6 +15,7 @@ import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable
 import { MatchingModel } from 'src/app/data/matching-model';
 import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
 import { ToastService } from 'src/app/services/toast.service';
+import { saveAs } from 'file-saver';

@Component({
  selector: 'app-bulk-editor',
@@ -137,7 +138,7 @@ export class BulkEditorComponent {
      } else {
        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} and remove the tags ${this._localizeList(changedTags.itemsToRemove)} on ${this.list.selected.size} selected document(s).`
      }
-      
+
      modal.componentInstance.btnClass = "btn-warning"
      modal.componentInstance.btnCaption = $localize`Confirm`
      modal.componentInstance.confirmClicked.subscribe(() => {
@@ -207,4 +208,10 @@ export class BulkEditorComponent {
      this.executeBulkOperation(modal, "delete", {})
    })
  }
+
+  downloadSelected(content = "archive") {
+    this.documentService.bulkDownload(Array.from(this.list.selected), content).subscribe((result: any) => {
+      saveAs(result, 'documents.zip');
+    })
+  }
 }
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -6,7 +6,7 @@

 .doc-img {
  object-fit: cover;
-  object-position: top;
+  object-position: top left;
  height: 100%;
  position: absolute;
  mix-blend-mode: multiply;
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -2,7 +2,7 @@

 .doc-img {
  object-fit: cover;
-  object-position: top;
+  object-position: top left;
  height: 200px;
  mix-blend-mode: multiply;
 }
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -63,12 +63,12 @@
  <div class="btn-group ml-2 flex-fill" ngbDropdown role="group">
    <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
    <div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
-      <ng-container *ngIf="!list.savedViewId">
+      <ng-container *ngIf="!list.activeSavedViewId">
        <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
        <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
      </ng-container>

-      <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
+      <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.activeSavedViewId" i18n>Save "{{list.activeSavedViewTitle}}"</button>
      <button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
    </div>
  </div>
@@ -86,7 +86,7 @@
    <span i18n *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span>&nbsp;<span i18n *ngIf="isFiltered">(filtered)</span>
  </p>
  <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
-  [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
+  [rotate]="true" aria-label="Default pagination"></ngb-pagination>
 </div>

 <div *ngIf="displayMode == 'largeCards'">
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs';
@@ -9,7 +9,7 @@ import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
-import { Toast, ToastService } from 'src/app/services/toast.service';
+import { ToastService } from 'src/app/services/toast.service';
 import { FilterEditorComponent } from './filter-editor/filter-editor.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';

@@ -46,7 +46,7 @@ export class DocumentListComponent implements OnInit, OnDestroy {
  }

  getTitle() {
-    return this.list.savedViewTitle || $localize`Documents`
+    return this.list.activeSavedViewTitle || $localize`Documents`
  }

  getSortFields() {
@@ -73,19 +73,18 @@ export class DocumentListComponent implements OnInit, OnDestroy {
      this.list.reload()
    })
    this.route.paramMap.subscribe(params => {
-      this.list.clear()
      if (params.has('id')) {
        this.savedViewService.getCached(+params.get('id')).subscribe(view => {
          if (!view) {
            this.router.navigate(["404"])
            return
          }
-          this.list.savedView = view
+          this.list.activateSavedView(view)
          this.list.reload()
          this.rulesChanged()
        })
      } else {
-        this.list.savedView = null
+        this.list.activateSavedView(null)
        this.list.reload()
        this.rulesChanged()
      }
@@ -99,16 +98,23 @@ export class DocumentListComponent implements OnInit, OnDestroy {
  }

  loadViewConfig(view: PaperlessSavedView) {
-    this.list.load(view)
+    this.list.loadSavedView(view)
    this.list.reload()
    this.rulesChanged()
  }

  saveViewConfig() {
-    this.savedViewService.update(this.list.savedView).subscribe(result => {
-      this.toastService.showInfo($localize`View "${this.list.savedView.name}" saved successfully.`)
-    })
-
+    if (this.list.activeSavedViewId != null) {
+      let savedView: PaperlessSavedView = {
+        id: this.list.activeSavedViewId,
+        filter_rules: this.list.filterRules,
+        sort_field: this.list.sortField,
+        sort_reverse: this.list.sortReverse
+      }
+      this.savedViewService.patch(savedView).subscribe(result => {
+        this.toastService.showInfo($localize`View "${this.list.activeSavedViewTitle}" saved successfully.`)
+      })
+    }
  }

  saveViewConfigAs() {
@@ -116,7 +122,7 @@ export class DocumentListComponent implements OnInit, OnDestroy {
    modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
    modal.componentInstance.saveClicked.subscribe(formValue => {
      modal.componentInstance.buttonsEnabled = false
-      let savedView = {
+      let savedView: PaperlessSavedView = {
        name: formValue.name,
        show_on_dashboard: formValue.showOnDashboard,
        show_in_sidebar: formValue.showInSideBar,
@@ -137,8 +143,8 @@ export class DocumentListComponent implements OnInit, OnDestroy {

  resetFilters(): void {
    this.filterRulesModified = false
-    if (this.list.savedViewId) {
-      this.savedViewService.getCached(this.list.savedViewId).subscribe(viewUntouched => {
+    if (this.list.activeSavedViewId) {
+      this.savedViewService.getCached(this.list.activeSavedViewId).subscribe(viewUntouched => {
        this.list.filterRules = viewUntouched.filter_rules
        this.list.reload()
      })
@@ -150,11 +156,11 @@ export class DocumentListComponent implements OnInit, OnDestroy {

  rulesChanged() {
    let modified = false
-    if (this.list.savedView == null) {
+    if (this.list.activeSavedViewId == null) {
      modified = this.list.filterRules.length > 0 // documents list is modified if it has any filters
    } else {
      // compare savedView current filters vs original
-      this.savedViewService.getCached(this.list.savedViewId).subscribe(view => {
+      this.savedViewService.getCached(this.list.activeSavedViewId).subscribe(view => {
        let filterRulesInitial = view.filter_rules

        if (this.list.filterRules.length !== filterRulesInitial.length) modified = true
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -46,6 +46,8 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
            return $localize`Without any tag`
          }

+        case FILTER_TITLE:
+          return $localize`Title: ${rule.value}`
      }
    }

@@ -117,7 +119,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
    })
  }

-  get filterRules() {
+  get filterRules(): FilterRule[] {
    let filterRules: FilterRule[] = []
    if (this._titleFilter) {
      filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@@ -8,7 +8,7 @@
  <div class="modal-body">
    <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
    <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-    <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match"></app-input-text>
+    <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
    <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></app-input-check>
  </div>
  <div class="modal-footer">
--- a/src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html
@@ -9,7 +9,7 @@

      <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
      <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-      <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match"></app-input-text>
+      <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
      <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>

    </div>
--- a/src-ui/src/app/components/manage/logs/logs.component.html
+++ b/src-ui/src/app/components/manage/logs/logs.component.html
@@ -1,27 +1,18 @@
 <app-page-header title="Logs" i18n-title>

-  <div ngbDropdown class="btn-group">
-    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#funnel" />
-      </svg>&nbsp;<ng-container i18n>Filter</ng-container>
-
-
-    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-      <button *ngFor="let f of getLevels()" ngbDropdownItem (click)="setLevel(f.id)"
-        [class.active]="level == f.id">{{f.name}}</button>
-    </div>
-  </div>
-
 </app-page-header>

-<div class="bg-dark p-3 mb-3 text-light text-monospace" infiniteScroll (scrolled)="onScroll()">
+
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
+  <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">
+    <a ngbNavLink>{{logFile}}.log</a>
+  </li>
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+<div class="bg-dark p-3 mb-3 text-light text-monospace log-container">
  <p
-    class="m-0 p-0 log-entry-{{log.level}}"
-    *ngFor="let log of logs">
-      {{log.created | customDate:'short'}}
-      {{getLevelText(log.level)}}
-      {{log.message}}
-  </p>
+    class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
+    *ngFor="let log of logs" style="white-space: pre;">{{log}}</p>
 </div>
--- a/src-ui/src/app/components/manage/logs/logs.component.scss
+++ b/src-ui/src/app/components/manage/logs/logs.component.scss
@@ -13,4 +13,12 @@
 .log-entry-50 {
  color: lightcoral !important;
  font-weight: bold;
+}
+
+.log-container {
+
+  overflow: scroll;
+
+  height: calc(100vh - 190px);
+  top: 70px;
 }
--- a/src-ui/src/app/components/manage/logs/logs.component.ts
+++ b/src-ui/src/app/components/manage/logs/logs.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { LOG_LEVELS, LOG_LEVEL_INFO, PaperlessLog } from 'src/app/data/paperless-log';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { LogService } from 'src/app/services/rest/log.service';

@Component({
@@ -11,38 +10,42 @@ export class LogsComponent implements OnInit {

  constructor(private logService: LogService) { }

-  logs: PaperlessLog[] = []
-  level: number = LOG_LEVEL_INFO
+  logs: string[] = []
+
+  logFiles: string[] = []
+
+  activeLog: string

  ngOnInit(): void {
-    this.reload()
-  }
-
-  reload() {
-    this.logService.list(1, 50, 'created', true, {'level__gte': this.level}).subscribe(result => this.logs = result.results)
-  }
-
-  getLevelText(level: number) {
-    return LOG_LEVELS.find(l => l.id == level)?.name
-  }
-
-  onScroll() {
-    let lastCreated = null
-    if (this.logs.length > 0) {
-      lastCreated = new Date(this.logs[this.logs.length-1].created).toISOString()
-    }
-    this.logService.list(1, 25, 'created', true, {'created__lt': lastCreated, 'level__gte': this.level}).subscribe(result => {
-      this.logs.push(...result.results)
+    this.logService.list().subscribe(result => {
+      this.logFiles = result
+      if (this.logFiles.length > 0) {
+        this.activeLog = this.logFiles[0]
+        this.reloadLogs()
+      }
    })
  }

-  getLevels() {
-    return LOG_LEVELS
+  reloadLogs() {
+    this.logService.get(this.activeLog).subscribe(result => {
+      this.logs = result
+    }, error => {
+      this.logs = []
+    })
  }

-  setLevel(id) {
-    this.level = id
-    this.reload()
+  getLogLevel(log: string) {
+    if (log.indexOf("[DEBUG]") != -1) {
+      return 10
+    } else if (log.indexOf("[WARNING]") != -1) {
+      return 30
+    } else if (log.indexOf("[ERROR]") != -1) {
+      return 40
+    } else if (log.indexOf("[CRITICAL]") != -1) {
+      return 50
+    } else {
+      return 20
+    }
  }

 }
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -34,7 +34,7 @@
          <div class="col">

            <select class="form-control" formControlName="dateLocale">
-              <option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | date:'shortDate':null:lang.code}}</span></option>
+              <option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | customDate:'shortDate':null:lang.code}}</span></option>
            </select>

          </div>
@@ -167,7 +167,7 @@
    </li>
  </ul>

-  <div [ngbNavOutlet]="nav" class="border-left border-right border-bottom p-3 mb-3 shadow"></div>
+  <div [ngbNavOutlet]="nav" class="border-left border-right border-bottom p-3 mb-3 shadow-sm"></div>

  <button type="submit" class="btn btn-primary" i18n>Save</button>
 </form>
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -34,7 +34,7 @@ export class SettingsComponent implements OnInit {
  savedViews: PaperlessSavedView[]

  get computedDateLocale(): string {
-    return this.settingsForm.value.dateLocale || this.settingsForm.value.displayLanguage
+    return this.settingsForm.value.dateLocale || this.settingsForm.value.displayLanguage || this.currentLocale
  }

  constructor(
@@ -86,11 +86,15 @@ export class SettingsComponent implements OnInit {
  }

  get displayLanguageOptions(): LanguageOption[] {
-    return [{code: "", name: $localize`Use system language`}].concat(this.settings.getLanguageOptions())
+    return [
+      {code: "", name: $localize`Use system language`}
+    ].concat(this.settings.getLanguageOptions())
  }

  get dateLocaleOptions(): LanguageOption[] {
-    return [{code: "", name: $localize`Use date format of display language`}].concat(this.settings.getLanguageOptions())
+    return [
+      {code: "", name: $localize`Use date format of display language`}
+    ].concat(this.settings.getDateLocaleOptions())
  }

  get today() {
--- a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html
@@ -20,7 +20,7 @@

      <app-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
      <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-      <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match"></app-input-text>
+      <app-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></app-input-text>
      <app-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></app-input-check>
    </div>
    <div class="modal-footer">
--- a/src-ui/src/app/data/paperless-log.ts
+++ b/src-ui/src/app/data/paperless-log.ts
@@ -1,27 +0,0 @@
-export const LOG_LEVEL_DEBUG = 10
-export const LOG_LEVEL_INFO = 20
-export const LOG_LEVEL_WARNING = 30
-export const LOG_LEVEL_ERROR = 40
-export const LOG_LEVEL_CRITICAL = 50
-
-export const LOG_LEVELS = [
-  {id: LOG_LEVEL_DEBUG, name: "DEBUG"},
-  {id: LOG_LEVEL_INFO, name: "INFO"},
-  {id: LOG_LEVEL_WARNING, name: "WARNING"},
-  {id: LOG_LEVEL_ERROR, name: "ERROR"},
-  {id: LOG_LEVEL_CRITICAL, name: "CRITICAL"}
-]
-
-export interface PaperlessLog {
-
-  id?: number
-
-  group?: string
-
-  message?: string
-
-  created?: Date
-
-  level?: number
-
-}
--- a/src-ui/src/app/pipes/custom-date.pipe.ts
+++ b/src-ui/src/app/pipes/custom-date.pipe.ts
@@ -2,18 +2,29 @@ import { DatePipe } from '@angular/common';
 import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core';
 import { SettingsService, SETTINGS_KEYS } from '../services/settings.service';

+const FORMAT_TO_ISO_FORMAT = {
+  "longDate": "y-MM-dd",
+  "mediumDate": "yy-MM-dd",
+  "shortDate": "yy-MM-dd"
+}
+
@Pipe({
  name: 'customDate'
 })
 export class CustomDatePipe extends DatePipe implements PipeTransform {

  constructor(@Inject(LOCALE_ID) locale: string, private settings: SettingsService) {
-    super(settings.get(SETTINGS_KEYS.DATE_LOCALE) || locale)
-
+    super(locale)
  }

  transform(value: any, format?: string, timezone?: string, locale?: string): string | null {
-    return super.transform(value, format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT), timezone, locale)
+    let l = locale || this.settings.get(SETTINGS_KEYS.DATE_LOCALE)
+    let f = format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT)
+    if (l == "iso-8601") {
+      return super.transform(value, FORMAT_TO_ISO_FORMAT[f], timezone)
+    } else {
+      return super.transform(value, format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT), timezone, locale)
+    }
  }

 }
--- a/src-ui/src/app/services/consumer-status.service.ts
+++ b/src-ui/src/app/services/consumer-status.service.ts
@@ -169,15 +169,20 @@ export class ConsumerStatusService {
  }

  dismiss(status: FileStatus) {
-    let index = this.consumerStatus.findIndex(s => s.filename == status.filename)
+    let index
+    if (status.taskId != null) {
+      index = this.consumerStatus.findIndex(s => s.taskId == status.taskId)
+    } else {
+      index = this.consumerStatus.findIndex(s => s.filename == status.filename)
+    }

    if (index > -1) {
      this.consumerStatus.splice(index, 1)
    }
  }

-  dismissAll() {
-    this.consumerStatus = this.consumerStatus.filter(status => status.phase < FileStatusPhase.SUCCESS)
+  dismissCompleted() {
+    this.consumerStatus = this.consumerStatus.filter(status => status.phase != FileStatusPhase.SUCCESS)
  }

  onDocumentConsumptionFinished() {
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -8,6 +8,23 @@ import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys';
 import { DocumentService } from './rest/document.service';
 import { SettingsService, SETTINGS_KEYS } from './settings.service';

+interface ListViewState {
+
+  title?: string
+
+  documents?: PaperlessDocument[]
+
+  currentPage: number
+  collectionSize: number
+
+  sortField: string
+  sortReverse: boolean
+
+  filterRules: FilterRule[]
+
+  selected?: Set<number>
+
+}

 /**
 * This service manages the document list which is displayed using the document list view.
@@ -20,156 +37,174 @@ import { SettingsService, SETTINGS_KEYS } from './settings.service';
 })
 export class DocumentListViewService {

-  static DEFAULT_SORT_FIELD = 'created'
-
  isReloading: boolean = false
-  documents: PaperlessDocument[] = []
-  currentPage = 1
-  currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
-  collectionSize: number
+
  rangeSelectionAnchorIndex: number
  lastRangeSelectionToIndex: number

-  /**
-   * This is the current config for the document list. The service will always remember the last settings used for the document list.
-   */
-  private _documentListViewConfig: PaperlessSavedView
-  /**
-   * Optionally, this is the currently selected saved view, which might be null.
-   */
-  private _savedViewConfig: PaperlessSavedView
+  currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)

-  get savedView(): PaperlessSavedView {
-    return this._savedViewConfig
+  private listViewStates: Map<number, ListViewState> = new Map()
+
+  private _activeSavedViewId: number = null
+
+  get activeSavedViewId() {
+    return this._activeSavedViewId
  }

-  set savedView(value: PaperlessSavedView) {
-    if (value && !this._savedViewConfig || value && value.id != this._savedViewConfig.id) {
-      //saved view inactive and should be active now, or saved view active, but a different view is requested
-      //this is here so that we don't modify value, which might be the actual instance of the saved view.
-      this.selectNone()
-      this._savedViewConfig = Object.assign({}, value)
-    } else if (this._savedViewConfig && !value) {
-      //saved view active, but document list requested
-      this.selectNone()
-      this._savedViewConfig = null
+  get activeSavedViewTitle() {
+    return this.activeListViewState.title
+  }
+
+  private defaultListViewState(): ListViewState {
+    return {
+      title: null,
+      documents: [],
+      currentPage: 1,
+      collectionSize: null,
+      sortField: "created",
+      sortReverse: true,
+      filterRules: [],
+      selected: new Set<number>()
    }
  }

-  get savedViewId() {
-    return this.savedView?.id
+  private get activeListViewState() {
+    if (!this.listViewStates.has(this._activeSavedViewId)) {
+      this.listViewStates.set(this._activeSavedViewId, this.defaultListViewState())
+    }
+    return this.listViewStates.get(this._activeSavedViewId)
  }

-  get savedViewTitle() {
-    return this.savedView?.name
-  }
-
-  get documentListView() {
-    return this._documentListViewConfig
-  }
-
-  set documentListView(value) {
-    if (value) {
-      this._documentListViewConfig = Object.assign({}, value)
-      this.saveDocumentListView()
+  activateSavedView(view: PaperlessSavedView) {
+    this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
+    if (view) {
+      this._activeSavedViewId = view.id
+      this.loadSavedView(view)
+    } else {
+      this._activeSavedViewId = null
    }
  }

-  /**
-   * This is what switches between the saved views and the document list view. Everything on the document list uses
-   * this property to determine the settings for the currently displayed document list.
-   */
-  get view() {
-    return this.savedView || this.documentListView
-  }
-
-  load(view: PaperlessSavedView) {
-    this.documentListView.filter_rules = cloneFilterRules(view.filter_rules)
-    this.documentListView.sort_reverse = view.sort_reverse
-    this.documentListView.sort_field = view.sort_field
-    this.saveDocumentListView()
-  }
-
-  clear() {
-    this.collectionSize = null
-    this.documents = []
-    this.currentPage = 1
+  loadSavedView(view: PaperlessSavedView, closeCurrentView: boolean = false) {
+    if (closeCurrentView) {
+      this._activeSavedViewId = null
+    }
+    this.activeListViewState.filterRules = cloneFilterRules(view.filter_rules)
+    this.activeListViewState.sortField = view.sort_field
+    this.activeListViewState.sortReverse = view.sort_reverse
+    if (this._activeSavedViewId) {
+      this.activeListViewState.title = view.name
+    }
+    this.reduceSelectionToFilter()
  }

  reload(onFinish?) {
    this.isReloading = true
+    let activeListViewState = this.activeListViewState
+
    this.documentService.listFiltered(
-      this.currentPage,
+      activeListViewState.currentPage,
      this.currentPageSize,
-      this.view.sort_field,
-      this.view.sort_reverse,
-      this.view.filter_rules).subscribe(
+      activeListViewState.sortField,
+      activeListViewState.sortReverse,
+      activeListViewState.filterRules).subscribe(
        result => {
-          this.collectionSize = result.count
-          this.documents = result.results
+          this.isReloading = false
+          activeListViewState.collectionSize = result.count
+          activeListViewState.documents = result.results
          if (onFinish) {
            onFinish()
          }
          this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
-          this.isReloading = false
        },
        error => {
-          if (this.currentPage != 1 && error.status == 404) {
+          this.isReloading = false
+          if (activeListViewState.currentPage != 1 && error.status == 404) {
            // this happens when applying a filter: the current page might not be available anymore due to the reduced result set.
-            this.currentPage = 1
+            activeListViewState.currentPage = 1
            this.reload()
          }
-          this.isReloading = false
        })
  }

  set filterRules(filterRules: FilterRule[]) {
-    //we're going to clone the filterRules object, since we don't
-    //want changes in the filter editor to propagate into here right away.
-    this.view.filter_rules = filterRules
+    this.activeListViewState.filterRules = filterRules
    this.reload()
    this.reduceSelectionToFilter()
    this.saveDocumentListView()
  }

  get filterRules(): FilterRule[] {
-    return this.view.filter_rules
+    return this.activeListViewState.filterRules
  }

  set sortField(field: string) {
-    this.view.sort_field = field
-    this.saveDocumentListView()
+    this.activeListViewState.sortField = field
    this.reload()
+    this.saveDocumentListView()
  }

  get sortField(): string {
-    return this.view.sort_field
+    return this.activeListViewState.sortField
  }

  set sortReverse(reverse: boolean) {
-    this.view.sort_reverse = reverse
-    this.saveDocumentListView()
+    this.activeListViewState.sortReverse = reverse
    this.reload()
+    this.saveDocumentListView()
  }

  get sortReverse(): boolean {
-    return this.view.sort_reverse
+    return this.activeListViewState.sortReverse
+  }
+
+  get collectionSize(): number {
+    return this.activeListViewState.collectionSize
+  }
+
+  get currentPage(): number {
+    return this.activeListViewState.currentPage
+  }
+
+  set currentPage(page: number) {
+    this.activeListViewState.currentPage = page
+    this.reload()
+    this.saveDocumentListView()
+  }
+
+  get documents(): PaperlessDocument[] {
+    return this.activeListViewState.documents
+  }
+
+  get selected(): Set<number> {
+    return this.activeListViewState.selected
  }

  setSort(field: string, reverse: boolean) {
-    this.view.sort_field = field
-    this.view.sort_reverse = reverse
-    this.saveDocumentListView()
+    this.activeListViewState.sortField = field
+    this.activeListViewState.sortReverse = reverse
    this.reload()
+    this.saveDocumentListView()
  }

  private saveDocumentListView() {
-    sessionStorage.setItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, JSON.stringify(this.documentListView))
+    if (this._activeSavedViewId == null) {
+      let savedState: ListViewState = {
+        collectionSize: this.activeListViewState.collectionSize,
+        currentPage: this.activeListViewState.currentPage,
+        filterRules: this.activeListViewState.filterRules,
+        sortField: this.activeListViewState.sortField,
+        sortReverse: this.activeListViewState.sortReverse
+      }
+      sessionStorage.setItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG, JSON.stringify(savedState))
+    }
  }

  quickFilter(filterRules: FilterRule[]) {
-    this.savedView = null
-    this.view.filter_rules = filterRules
+    this._activeSavedViewId = null
+    this.activeListViewState.filterRules = filterRules
+    this.activeListViewState.currentPage = 1
    this.reduceSelectionToFilter()
    this.saveDocumentListView()
    this.router.navigate(["documents"])
@@ -217,8 +252,6 @@ export class DocumentListViewService {
    }
  }

-  selected = new Set<number>()
-
  selectNone() {
    this.selected.clear()
    this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
@@ -227,13 +260,11 @@ export class DocumentListViewService {
  reduceSelectionToFilter() {
    if (this.selected.size > 0) {
      this.documentService.listAllFilteredIds(this.filterRules).subscribe(ids => {
-        let subset = new Set<number>()
-        for (let id of ids) {
-          if (this.selected.has(id)) {
-            subset.add(id)
+        for (let id of this.selected) {
+          if (!ids.includes(id)) {
+            this.selected.delete(id)
          }
        }
-        this.selected = subset
      })
    }
  }
@@ -287,20 +318,21 @@ export class DocumentListViewService {
  }

  constructor(private documentService: DocumentService, private settings: SettingsService, private router: Router) {
-    let documentListViewConfigJson = sessionStorage.getItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
+     let documentListViewConfigJson = sessionStorage.getItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
    if (documentListViewConfigJson) {
      try {
-        this.documentListView = JSON.parse(documentListViewConfigJson)
+        let savedState: ListViewState = JSON.parse(documentListViewConfigJson)
+        // Remove null elements from the restored state
+        Object.keys(savedState).forEach(k => {
+          if (savedState[k] == null) {
+            delete savedState[k]
+          }
+        })
+        //only use restored state attributes instead of defaults if they are not null
+        let newState = Object.assign(this.defaultListViewState(), savedState)
+        this.listViewStates.set(null, newState)
      } catch (e) {
        sessionStorage.removeItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
-        this.documentListView = null
-      }
-    }
-    if (!this.documentListView || this.documentListView.filter_rules == null || this.documentListView.sort_reverse == null || this.documentListView.sort_field == null) {
-      this.documentListView = {
-        filter_rules: [],
-        sort_reverse: true,
-        sort_field: 'created'
      }
    }
  }
--- a/src-ui/src/app/services/rest/document.service.ts
+++ b/src-ui/src/app/services/rest/document.service.ts
@@ -134,4 +134,8 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
    return this.http.get<PaperlessDocumentSuggestions>(this.getResourceUrl(id, 'suggestions'))
  }

+  bulkDownload(ids: number[], content="both") {
+    return this.http.post(this.getResourceUrl(null, 'bulk_download'), {"documents": ids, "content": content}, { responseType: 'blob' })
+  }
+
 }
--- a/src-ui/src/app/services/rest/log.service.ts
+++ b/src-ui/src/app/services/rest/log.service.ts
@@ -1,14 +1,21 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { PaperlessLog } from 'src/app/data/paperless-log';
-import { AbstractPaperlessService } from './abstract-paperless-service';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
 })
-export class LogService extends AbstractPaperlessService<PaperlessLog> {
+export class LogService {

-  constructor(http: HttpClient) {
-    super(http, 'logs')
+  constructor(private http: HttpClient) {
+  }
+
+  list(): Observable<string[]> {
+    return this.http.get<string[]>(`${environment.apiBaseUrl}logs/`)
+  }
+
+  get(id: string): Observable<string[]> {
+    return this.http.get<string[]>(`${environment.apiBaseUrl}logs/${id}/`)
  }
 }
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -1,5 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { Inject, Injectable, LOCALE_ID, Renderer2, RendererFactory2 } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
 import { CookieService } from 'ngx-cookie-service';

@@ -10,9 +10,14 @@ export interface PaperlessSettings {
 }

 export interface LanguageOption {
-  code: string,
-  name: string,
+  code: string
+  name: string
  englishName?: string
+
+  /**
+   * A date format string for use by the date selectors. MUST contain 'yyyy', 'mm' and 'dd'.
+   */
+  dateInputFormat?: string
 }

 export const SETTINGS_KEYS = {
@@ -54,7 +59,8 @@ export class SettingsService {
    private rendererFactory: RendererFactory2,
    @Inject(DOCUMENT) private document,
    private cookieService: CookieService,
-    private meta: Meta
+    private meta: Meta,
+    @Inject(LOCALE_ID) private localeId: string
  ) {
    this.renderer = rendererFactory.createRenderer(null, null);

@@ -77,13 +83,20 @@ export class SettingsService {

  getLanguageOptions(): LanguageOption[] {
    return [
-      {code: "en-US", name: $localize`English (US)`, englishName: "English (US)"},
-      {code: "de", name: $localize`German`, englishName: "German"},
-      {code: "nl", name: $localize`Dutch`, englishName: "Dutch"},
-      {code: "fr", name: $localize`French`, englishName: "French"}
+      {code: "en-us", name: $localize`English (US)`, englishName: "English (US)", dateInputFormat: "mm/dd/yyyy"},
+      {code: "en-gb", name: $localize`English (GB)`, englishName: "English (GB)", dateInputFormat: "dd/mm/yyyy"},
+      {code: "de", name: $localize`German`, englishName: "German", dateInputFormat: "dd.mm.yyyy"},
+      {code: "nl", name: $localize`Dutch`, englishName: "Dutch", dateInputFormat: "dd-mm-yyyy"},
+      {code: "fr", name: $localize`French`, englishName: "French", dateInputFormat: "dd/mm/yyyy"},
+      {code: "pt-br", name: $localize`Portuguese (Brazil)`, englishName: "Portuguese (Brazil)", dateInputFormat: "dd/mm/yyyy"}
    ]
  }

+  getDateLocaleOptions(): LanguageOption[] {
+    let isoOption: LanguageOption = {code: "iso-8601", name: $localize`ISO 8601`, dateInputFormat: "yyyy-mm-dd"}
+    return [isoOption].concat(this.getLanguageOptions())
+  }
+
  private getLanguageCookieName() {
    let prefix = ""
    if (this.meta.getTag('name=cookie_prefix')) {
@@ -104,6 +117,11 @@ export class SettingsService {
    }
  }

+  getLocalizedDateInputFormat(): string {
+    let dateLocale = this.get(SETTINGS_KEYS.DATE_LOCALE) || this.getLanguage() || this.localeId.toLowerCase()
+    return this.getDateLocaleOptions().find(o => o.code == dateLocale)?.dateInputFormat || "yyyy-mm-dd"
+  }
+
  get(key: string): any {
    let setting = SETTINGS.find(s => s.key == key)

--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -0,0 +1,59 @@
+import { Injectable } from "@angular/core"
+import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap"
+import { SettingsService } from "../services/settings.service"
+
+@Injectable()
+export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
+
+  constructor(private settings: SettingsService) {
+    super()
+  }
+
+  private getDateInputFormat() {
+    return this.settings.getLocalizedDateInputFormat()
+  }
+
+  /**
+   * This constructs a regular expression from a date input format which is then
+   * used to parse dates.
+   */
+  private getDateParseRegex() {
+    return new RegExp(
+      "^" + this.getDateInputFormat()
+      .replace('dd', '(?<day>[0-9]+)')
+      .replace('mm', '(?<month>[0-9]+)')
+      .replace('yyyy', '(?<year>[0-9]+)')
+      .split('.').join('\\.\\s*') + "$" // allow whitespace(s) after dot (specific for German)
+      )
+  }
+
+  parse(value: string): NgbDateStruct | null {
+    let match = this.getDateParseRegex().exec(value)
+    if (match) {
+      let dateStruct = {
+        day: +match.groups.day,
+        month: +match.groups.month,
+        year: +match.groups.year
+      }
+      if (dateStruct.year <= (new Date().getFullYear() - 2000)) {
+        dateStruct.year += 2000
+      } else if (dateStruct.year < 100) {
+        dateStruct.year += 1900
+      }
+      return dateStruct
+    } else {
+      return null
+    }
+  }
+
+  format(date: NgbDateStruct | null): string {
+    if (date) {
+      return this.getDateInputFormat()
+      .replace('dd', date.day.toString().padStart(2, '0'))
+      .replace('mm', date.month.toString().padStart(2, '0'))
+      .replace('yyyy', date.year.toString().padStart(4, '0'))
+    } else {
+      return null
+    }
+  }
+}
--- a/src-ui/src/app/utils/ngb-iso-date-adapter.ts
+++ b/src-ui/src/app/utils/ngb-iso-date-adapter.ts
@@ -0,0 +1,27 @@
+import { Injectable } from "@angular/core";
+import { NgbDateAdapter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
+
+@Injectable()
+export class ISODateAdapter extends NgbDateAdapter<string> {
+
+  fromModel(value: string | null): NgbDateStruct | null {
+    if (value) {
+      let date = new Date(value)
+      return {
+        day : date.getDate(),
+        month : date.getMonth() + 1,
+        year : date.getFullYear()
+      }
+    } else {
+      return null
+    }
+  }
+
+  toModel(date: NgbDateStruct | null): string | null {
+    if (date) {
+      return date.year.toString().padStart(4, '0') + "-" + date.month.toString().padStart(2, '0') + "-" + date.day.toString().padStart(2, '0')
+    } else {
+      return null
+    }
+  }
+}
--- a/src-ui/src/app/utils/ngb-iso-date-time-adapter.ts
+++ b/src-ui/src/app/utils/ngb-iso-date-time-adapter.ts
@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+import { NgbDateAdapter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
+
+@Injectable()
+export class ISODateTimeAdapter extends NgbDateAdapter<string> {
+
+  fromModel(value: string | null): NgbDateStruct | null {
+    if (value) {
+      let date = new Date(value)
+      return {
+        day : date.getDate(),
+        month : date.getMonth() + 1,
+        year : date.getFullYear()
+      }
+    } else {
+      return null
+    }
+  }
+
+  toModel(date: NgbDateStruct | null): string | null {
+    return date ? new Date(date.year, date.month - 1, date.day).toISOString() : null
+  }
+}