Merge branch 'dev'

docker/hub/docker-compose.postgres.yml

@@ -15,7 +15,7 @@ services:
       POSTGRES_PASSWORD: paperless
 
   webserver:
-    image: jonaswinkler/paperless-ng:0.9.6
+    image: jonaswinkler/paperless-ng:0.9.7
     restart: always
     depends_on:
       - db

docker/hub/docker-compose.sqlite.yml

@@ -5,7 +5,7 @@ services:
     restart: always
 
   webserver:
-    image: jonaswinkler/paperless-ng:0.9.6
+    image: jonaswinkler/paperless-ng:0.9.7
     restart: always
     depends_on:
       - broker

docs/advanced_usage.rst

@@ -263,10 +263,10 @@ using the identifier which it has assigned to each document. You will end up get
 files like ``0000123.pdf`` in your media directory. This isn't necessarily a bad
 thing, because you normally don't have to access these files manually. However, if
 you wish to name your files differently, you can do that by adjusting the
-``PAPERLESS_FILENAME_FORMAT`` settings variable.
+``PAPERLESS_FILENAME_FORMAT`` configuration option.
 
-This variable allows you to configure the filename (folders are allowed!) using
+This variable allows you to configure the filename (folders are allowed) using
-placeholders. For example, setting
+placeholders. For example, configuring this to
 
 .. code:: bash
 
@@ -277,17 +277,16 @@ will create a directory structure as follows:
 .. code::
 
     2019/
-      my_bank/
+      My bank/
-        statement-january-0000001.pdf
+        Statement January.pdf
-        statement-february-0000002.pdf
+        Statement February.pdf
     2020/
-      my_bank/
+      My bank/
-        statement-january-0000003.pdf
+        Statement January.pdf
-      shoe_store/
+        Letter.pdf
-        my_new_shoes-0000004.pdf
+        Letter_01.pdf
-
+      Shoe store/
-Paperless appends the unique identifier of each document to the filename. This
+        My new shoes.pdf
-avoids filename clashes.
 
 .. danger::
 
@@ -299,6 +298,7 @@ Paperless provides the following placeholders withing filenames:
 
 * ``{correspondent}``: The name of the correspondent, or "none".
 * ``{document_type}``: The name of the document type, or "none".
+* ``{tag_list}``: A comma separated list of all tags assigned to the document.
 * ``{title}``: The title of the document.
 * ``{created}``: The full date and time the document was created.
 * ``{created_year}``: Year created only.
@@ -309,8 +309,14 @@ Paperless provides the following placeholders withing filenames:
 * ``{added_month}``: Month added only (number 1-12).
 * ``{added_day}``: Day added only (number 1-31).
 
-Paperless will convert all values for the placeholders into values which are safe
+
-for use in filenames.
+Paperless will try to conserve the information from your database as much as possible.
+However, some characters that you can use in document titles and correspondent names (such
+as ``: \ /`` and a couple more) are not allowed in filenames and will be replaced with dashes.
+
+If paperless detects that two documents share the same filename, paperless will automatically
+append ``_01``, ``_02``, etc to the filename. This happens if all the placeholders in a filename
+evaluate to the same value.
 
 .. hint::
 

docs/changelog.rst

@@ -5,6 +5,49 @@
 Changelog
 *********
 
+
+paperless-ng 0.9.7
+##################
+
+
+* Front end
+
+  * Thanks to the hard work of `Michael Shamoon`_, paperless now comes with a much more streamlined UI for
+    filtering documents.
+  
+  * `Michael Shamoon`_ replaced the document preview with another component. This should fix compatibility with Safari browsers.
+
+  * Added buttons to the management pages to quickly show all documents with one specific tag, correspondent, or title.
+  
+  * Paperless now stores your saved views on the server and associates them with your user account. 
+    This means that you can access your views on multiple devices and have separate views for different users.
+    You will have to recreate your views.
+
+  * The GitHub and documentation links now open in new tabs/windows. Thanks to `rYR79435`_.
+
+  * Paperless now generates default saved view names when saving views with certain filter rules.
+
+  * Added a small version indicator to the front end.
+
+* Other additions and changes
+
+  * The new filename format field ``{tag_list}`` inserts a list of tags into the filename, separated by comma.
+  * The ``document_retagger`` no longer removes inbox tags or tags without matching rules.
+  * The new configuration option ``PAPERLESS_COOKIE_PREFIX`` allows you to run multiple instances of paperless on different ports.
+    This option enables you to be logged in into multiple instances by specifying different cookie names for each instance.
+
+* Fixes
+  
+  * Sometimes paperless would assign dates in the future to newly consumed documents.
+  * The filename format fields ``{created_month}`` and ``{created_day}`` now use a leading zero for single digit values.
+  * The filename format field ``{tags}`` can no longer be used without arguments.
+  * Paperless was not able to consume many images (especially images from mobile scanners) due to missing DPI information.
+    Paperless now assumes A4 paper size for PDF generation if no DPI information is present.
+  * Documents with empty titles could not be opened from the table view due to the link being empty.
+  * Fixed an issue with filenames containing special characters such as ``:`` not being accepted for upload.
+  * Fixed issues with thumbnail generation for plain text files.
+
+
 paperless-ng 0.9.6
 ##################
 
@@ -841,6 +884,8 @@ bulk of the work on this big change.
 
 * Initial release
 
+.. _rYR79435: https://github.com/rYR79435
+.. _Michael Shamoon: https://github.com/shamoon
 .. _jayme-github: http://github.com/jayme-github
 .. _Brian Conn: https://github.com/TheConnMan
 .. _Christopher Luu: https://github.com/nuudles

docs/configuration.rst

@@ -152,6 +152,16 @@ PAPERLESS_AUTO_LOGIN_USERNAME=<username>
 
     Defaults to none, which disables this feature.
 
+
+PAPERLESS_COOKIE_PREFIX=<str>
+    Specify a prefix that is added to the cookies used by paperless to identify
+    the currently logged in user. This is useful for when you're running two
+    instances of paperless on the same host.
+
+    After changing this, you will have to login again.
+
+    Defaults to ``""``, which does not alter the cookie names.
+
 .. _configuration-ocr:
 
 OCR settings

docs/faq.rst

@@ -78,6 +78,12 @@ that automatically, I'm all ears. For now, you have to grab the latest release
 archive from the project page and build the image yourself. The release comes
 with the front end already compiled, so you don't have to do this on the Pi.
 
+**Q:** *How do I run this on unRaid?*
+
+**A:** Head over to `<https://github.com/selfhosters/unRAID-CA-templates>`_,
+`Uli Fahrer <https://github.com/Tooa>`_ created a container template for that.
+I don't exactly know how to use that though, since I don't use unRaid.
+
 **Q:** *How do I run this on my toaster?*
 
 **A:** I honestly don't know! As for all other devices that might be able

docs/usage_overview.rst

@@ -57,9 +57,6 @@ Adding documents to paperless
 #############################
 
 Once you've got Paperless setup, you need to start feeding documents into it.
-Currently, there are four options: the consumption directory, the dashboard, IMAP (email), and
-HTTP POST.
-
 When adding documents to paperless, it will perform the following operations on
 your documents:
 
@@ -112,6 +109,17 @@ Dashboard upload
 The dashboard has a file drop field to upload documents to paperless. Simply drag a file
 onto this field or select a file with the file dialog. Multiple files are supported.
 
+
+Mobile upload
+=============
+
+The mobile app over at `<https://github.com/qcasey/paperless_share>`_ allows Android users
+to share any documents with paperless. This can be combined with any of the mobile
+scanning apps out there, such as Office Lens.
+
+Furthermore, there is the  `Paperless App <https://github.com/bauerj/paperless_app>`_ as well,
+which no only has document upload, but also document editing and browsing.
+
 .. _usage-email:
 
 IMAP (Email)

paperless.conf.example

@@ -30,6 +30,7 @@
 #PAPERLESS_FORCE_SCRIPT_NAME=
 #PAPERLESS_STATIC_URL=/static/
 #PAPERLESS_AUTO_LOGIN_USERNAME=
+#PAPERLESS_COOKIE_PREFIX=
 
 # OCR settings
 

scripts/make-release.sh

@@ -5,6 +5,7 @@
 # adjust src/paperless/version.py
 # changelog in the documentation
 # adjust versions in docker/hub/*
+# adjust version in src-ui/src/environments/prod
 # If docker-compose was modified: all compose files are the same.
 
 # Steps:

src-ui/package-lock.json

@@ -2215,6 +2215,11 @@
       "integrity": "sha512-UV1/ZJMC+HcP902wWdpC43cAcGu0IQk/I5bXjP2aSuCjsk3cE74mDvFrLKga7oDC170ugOAYBwfT4DSQW3akDA==",
       "dev": true
     },
+    "@types/pdfjs-dist": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@types/pdfjs-dist/-/pdfjs-dist-2.1.7.tgz",
+      "integrity": "sha512-nQIwcPUhkAIyn7x9NS0lR/qxYfd5unRtfGkMjvpgF4Sh28IXftRymaNmFKTTdejDNY25NDGSIyjwj/BRwAPexg=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
@@ -3023,6 +3028,16 @@
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "blob": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
@@ -5508,6 +5523,13 @@
         "schema-utils": "^2.6.5"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8208,6 +8230,13 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -8260,6 +8289,23 @@
         "moment": "2.18.1"
       }
     },
+    "ng2-pdf-viewer": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-6.3.2.tgz",
+      "integrity": "sha512-H2tBhDd+Lq6CUzK2g54HsCcZDR2wTn1sDjYqKY3yF0Ydasl2R5ppCKynZBU/zge4EKvmHglJI120FbQMpJKDYQ==",
+      "requires": {
+        "@types/pdfjs-dist": "^2.1.4",
+        "pdfjs-dist": "^2.4.456",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "ngx-cookie-service": {
       "version": "10.1.1",
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz",
@@ -9270,6 +9316,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.5.207",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz",
+      "integrity": "sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -13228,7 +13279,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -13832,7 +13887,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

src-ui/package.json

@@ -23,6 +23,7 @@
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "bootstrap": "^4.5.0",
     "ng-bootstrap": "^1.6.3",
+    "ng2-pdf-viewer": "^6.3.2",
     "ngx-cookie-service": "^10.1.1",
     "ngx-file-drop": "^10.0.0",
     "ngx-infinite-scroll": "^9.1.0",

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

@@ -14,10 +14,9 @@ import { LogsComponent } from './components/manage/logs/logs.component';
 import { SettingsComponent } from './components/manage/settings/settings.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DatePipe } from '@angular/common';
-import { SafePipe } from './pipes/safe.pipe';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component';
-import { DeleteDialogComponent } from './components/common/delete-dialog/delete-dialog.component';
+import { ConfirmDialogComponent } from './components/common/confirm-dialog/confirm-dialog.component';
 import { CorrespondentEditDialogComponent } from './components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component';
 import { TagEditDialogComponent } from './components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component';
 import { DocumentTypeEditDialogComponent } from './components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component';
@@ -28,6 +27,9 @@ import { PageHeaderComponent } from './components/common/page-header/page-header
 import { AppFrameComponent } from './components/app-frame/app-frame.component';
 import { ToastsComponent } from './components/common/toasts/toasts.component';
 import { FilterEditorComponent } from './components/filter-editor/filter-editor.component';
+import { FilterDropdownComponent } from './components/filter-editor/filter-dropdown/filter-dropdown.component';
+import { FilterDropdownButtonComponent } from './components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component';
+import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.component';
 import { 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 { NgxFileDropModule } from 'ngx-file-drop';
@@ -45,9 +47,13 @@ import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-v
 import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component';
 import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component';
 import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component';
 import { YesNoPipe } from './pipes/yes-no.pipe';
 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';
 
 @NgModule({
   declarations: [
@@ -60,10 +66,9 @@ import { FileSizePipe } from './pipes/file-size.pipe';
     DocumentTypeListComponent,
     LogsComponent,
     SettingsComponent,
-    SafePipe,
     NotFoundComponent,
     CorrespondentEditDialogComponent,
-    DeleteDialogComponent,
+    ConfirmDialogComponent,
     TagEditDialogComponent,
     DocumentTypeEditDialogComponent,
     TagComponent,
@@ -73,6 +78,9 @@ import { FileSizePipe } from './pipes/file-size.pipe';
     AppFrameComponent,
     ToastsComponent,
     FilterEditorComponent,
+    FilterDropdownComponent,
+    FilterDropdownButtonComponent,
+    FilterDropdownDateComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
     TextComponent,
@@ -88,7 +96,10 @@ import { FileSizePipe } from './pipes/file-size.pipe';
     WidgetFrameComponent,
     WelcomeWidgetComponent,
     YesNoPipe,
-    FileSizePipe
+    FileSizePipe,
+    FilterPipe,
+    DocumentTitlePipe,
+    MetadataCollapseComponent
   ],
   imports: [
     BrowserModule,
@@ -98,7 +109,8 @@ import { FileSizePipe } from './pipes/file-size.pipe';
     FormsModule,
     ReactiveFormsModule,
     NgxFileDropModule,
-    InfiniteScrollModule
+    InfiniteScrollModule,
+    PdfViewerModule
   ],
   providers: [
     DatePipe,
@@ -106,7 +118,9 @@ import { FileSizePipe } from './pipes/file-size.pipe';
       provide: HTTP_INTERCEPTORS,
       useClass: CsrfInterceptor,
       multi: true
-    }
+    },
+    FilterPipe,
+    DocumentTitlePipe
   ],
   bootstrap: [AppComponent]
 })

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -17,6 +17,11 @@
 <div class="container-fluid">
   <div class="row">
     <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse" [ngbCollapse]="isMenuCollapsed">
+
+      <div style="position: absolute; bottom: 0; left: 0;" class="text-muted p-1">
+        {{versionString}}
+      </div>
+
       <div class="sidebar-sticky pt-3">
         <ul class="nav flex-column">
           <li class="nav-item">
@@ -37,16 +42,16 @@
           </li>
         </ul>
 
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='viewConfigService.getSideBarConfigs().length > 0'>
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.sidebarViews.length > 0'>
           <span>Saved views</span>
         </h6>
         <ul class="nav flex-column mb-2">
-          <li class="nav-item w-100" *ngFor='let config of viewConfigService.getSideBarConfigs()'>
+          <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">
-            <a class="nav-link text-truncate" routerLink="view/{{config.id}}" routerLinkActive="active" (click)="closeMenu()">
+            <a class="nav-link text-truncate" routerLink="view/{{view.id}}" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
               </svg>
-              {{config.title}}
+              {{view.name}}
             </a>
           </li>
         </ul>
@@ -60,7 +65,7 @@
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
               </svg>
-              {{d.title}}
+              {{d.title | documentTitle}}
             </a>
           </li>
           <li class="nav-item w-100" *ngIf="openDocuments.length > 1">
@@ -132,7 +137,7 @@
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item">
-            <a class="nav-link" href="https://paperless-ng.readthedocs.io/en/latest/">
+            <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://paperless-ng.readthedocs.io/en/latest/">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
               </svg>
@@ -140,7 +145,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="https://github.com/jonaswinkler/paperless-ng">
+            <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://github.com/jonaswinkler/paperless-ng">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#link"/>
               </svg>

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -5,8 +5,9 @@ import { from, Observable, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
+import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { SearchService } from 'src/app/services/rest/search.service';
-import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
+import { environment } from 'src/environments/environment';
 import { DocumentDetailComponent } from '../document-detail/document-detail.component';
   
 @Component({
@@ -21,10 +22,12 @@ export class AppFrameComponent implements OnInit, OnDestroy {
     private activatedRoute: ActivatedRoute,
     private openDocumentsService: OpenDocumentsService,
     private searchService: SearchService,
-    public viewConfigService: SavedViewConfigService
+    public savedViewService: SavedViewService
     ) {
   }
 
+  versionString = `${environment.appTitle} ${environment.version}`
+
   isMenuCollapsed: boolean = true
 
   closeMenu() {

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html

@@ -5,10 +5,10 @@
       </button>
     </div>
     <div class="modal-body">
-      <p><b>{{message}}</b></p>
+      <p *ngIf="messageBold"><b>{{messageBold}}</b></p>
-      <p *ngIf="message2">{{message2}}</p>
+      <p *ngIf="message">{{message}}</p>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()">Cancel</button>
-      <button type="button" class="btn btn-danger" (click)="deleteClicked.emit()">Delete</button>
+      <button type="button" class="btn" [class]="btnClass" (click)="confirmClicked.emit()">{{btnCaption}}</button>
     </div>

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DeleteDialogComponent } from './delete-dialog.component';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
 
-describe('DeleteDialogComponent', () => {
+describe('ConfirmDialogComponent', () => {
-  let component: DeleteDialogComponent;
+  let component: ConfirmDialogComponent;
-  let fixture: ComponentFixture<DeleteDialogComponent>;
+  let fixture: ComponentFixture<ConfirmDialogComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DeleteDialogComponent ]
+      declarations: [ ConfirmDialogComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DeleteDialogComponent);
+    fixture = TestBed.createComponent(ConfirmDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent implements OnInit {
+
+  constructor(public activeModal: NgbActiveModal) { }
+
+  @Output()
+  public confirmClicked = new EventEmitter()
+
+  @Input()
+  title = "Confirmation"
+
+  @Input()
+  messageBold
+
+  @Input()
+  message
+
+  @Input()
+  btnClass = "btn-primary"
+
+  @Input()
+  btnCaption = "Confirm"
+
+  ngOnInit(): void {
+  }
+
+  cancelClicked() {
+    this.activeModal.close()
+  }
+}

src-ui/src/app/components/common/delete-dialog/delete-dialog.component.ts

@@ -1,31 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-@Component({
-  selector: 'app-delete-dialog',
-  templateUrl: './delete-dialog.component.html',
-  styleUrls: ['./delete-dialog.component.scss']
-})
-export class DeleteDialogComponent implements OnInit {
-
-  constructor(public activeModal: NgbActiveModal) { }
-
-  @Output()
-  public deleteClicked = new EventEmitter()
-
-  @Input()
-  title = "Delete confirmation"
-
-  @Input()
-  message = "Do you really want to delete this?"
-
-  @Input()
-  message2
-
-  ngOnInit(): void {
-  }
-
-  cancelClicked() {
-    this.activeModal.close()
-  }
-}

src-ui/src/app/components/common/input/abstract-input.ts

@@ -1,5 +1,5 @@
-import { Component, Directive, forwardRef, Input, OnInit } from '@angular/core';
+import { Directive, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
 import { v4 as uuidv4 } from 'uuid';
 
 @Directive()

src-ui/src/app/components/common/input/date-time/date-time.component.ts

@@ -1,7 +1,6 @@
 import { formatDate } from '@angular/common';
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { AbstractInputComponent } from '../abstract-input';
 
 @Component({
   providers: [{

src-ui/src/app/components/common/input/select/select.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AbstractInputComponent } from '../abstract-input';
 

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -1,8 +1,6 @@
-import { ThrowStmt } from '@angular/compiler';
 import { Component, forwardRef, Input, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Observable } from 'rxjs';
 import { TagEditDialogComponent } from 'src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component';
 import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { TagService } from 'src/app/services/rest/tag.service';

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -1,21 +1,29 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-page-header',
   templateUrl: './page-header.component.html',
   styleUrls: ['./page-header.component.scss']
 })
-export class PageHeaderComponent implements OnInit {
+export class PageHeaderComponent {
 
-  constructor() { }
+  constructor(private titleService: Title) { }
+
+  _title = ""
 
   @Input()
-  title: string = ""
+  set title(title: string) {
+    this._title = title
+    this.titleService.setTitle(`${this.title} - ${environment.appTitle}`)
+  }
+
+  get title() {
+    return this._title
+  }
 
   @Input()
   subTitle: string = ""
 
-  ngOnInit(): void {
-  }
-
 }

src-ui/src/app/components/common/tag/tag.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
 
 @Component({

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
-import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
+import { SavedViewService } from 'src/app/services/rest/saved-view.service';
-import { environment } from 'src/environments/environment';
 
 
 @Component({
@@ -12,15 +11,15 @@ import { environment } from 'src/environments/environment';
 export class DashboardComponent implements OnInit {
 
   constructor(
-    public savedViewConfigService: SavedViewConfigService,
+    private savedViewService: SavedViewService) { }
-    private titleService: Title) { }
 
 
-  savedViews = []
+  savedViews: PaperlessSavedView[] = []
 
   ngOnInit(): void {
-    this.savedViews = this.savedViewConfigService.getDashboardConfigs()
+    this.savedViewService.listAll().subscribe(results => {
-    this.titleService.setTitle(`Dashboard - ${environment.appTitle}`)
+      this.savedViews = results.results.filter(savedView => savedView.show_on_dashboard)
+    })
   }
 
 }

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -1,4 +1,4 @@
-<app-widget-frame [title]="savedView.title">
+<app-widget-frame [title]="savedView.name">
 
   <a header-buttons [routerLink]="" (click)="showAll()">Show all</a>
 
@@ -13,7 +13,7 @@
     <tbody>
       <tr *ngFor="let doc of documents" routerLink="/documents/{{doc.id}}">
         <td>{{doc.created | date}}</td>
-        <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ml-1"></app-tag>
+        <td>{{doc.title | documentTitle}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ml-1"></app-tag>
       </tr>
     </tbody>
   </table>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
-import { SavedViewConfig } from 'src/app/data/saved-view-config';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
 
@@ -18,18 +18,18 @@ export class SavedViewWidgetComponent implements OnInit {
     private list: DocumentListViewService) { }
   
   @Input()
-  savedView: SavedViewConfig
+  savedView: PaperlessSavedView
 
   documents: PaperlessDocument[] = []
 
   ngOnInit(): void {
-    this.documentService.list(1,10,this.savedView.sortField,this.savedView.sortDirection,this.savedView.filterRules).subscribe(result => {
+    this.documentService.list(1,10,this.savedView.sort_field, this.savedView.sort_reverse, this.savedView.filter_rules).subscribe(result => {
       this.documents = result.results
     })
   }
 
   showAll() {
-    if (this.savedView.showInSideBar) {
+    if (this.savedView.show_in_sidebar) {
       this.router.navigate(['view', this.savedView.id])
     } else {
       this.list.load(this.savedView)

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -35,7 +35,7 @@
 
 
 <div class="row">
-    <div class="col-xl">
+    <div class="col mb-4">
 
         <form [formGroup]='documentForm' (ngSubmit)="save()">
 
@@ -110,53 +110,8 @@
                             </tbody>
                         </table>
 
-                        <h6 *ngIf="metadata?.original_metadata.length > 0">
+                        <app-metadata-collapse title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></app-metadata-collapse>
-                            <button type="button" class="btn btn-outline-secondary btn-sm mr-2"
+                        <app-metadata-collapse title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></app-metadata-collapse>
-                                (click)="expandOriginalMetadata = !expandOriginalMetadata" aria-controls="collapseExample">
-                                <svg class="buttonicon" fill="currentColor" *ngIf="!expandOriginalMetadata">
-                                    <use xlink:href="assets/bootstrap-icons.svg#caret-down" />
-                                </svg>
-                                <svg class="buttonicon" fill="currentColor" *ngIf="expandOriginalMetadata">
-                                    <use xlink:href="assets/bootstrap-icons.svg#caret-up" />
-                                </svg>
-                            </button>
-                            Original document metadata
-                        </h6>
-
-                        <div #collapse="ngbCollapse" [(ngbCollapse)]="!expandOriginalMetadata">
-                            <table class="table table-borderless">
-                                <tbody>
-                                    <tr *ngFor="let m of metadata?.original_metadata">
-                                        <td>{{m.prefix}}:{{m.key}}</td>
-                                        <td>{{m.value}}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h6 *ngIf="metadata?.has_archive_version && metadata?.archive_metadata.length > 0">
-                            <button type="button" class="btn btn-outline-secondary btn-sm mr-2"
-                                (click)="expandArchivedMetadata = !expandArchivedMetadata" aria-controls="collapseExample">
-                                <svg class="buttonicon" fill="currentColor" *ngIf="!expandArchivedMetadata">
-                                    <use xlink:href="assets/bootstrap-icons.svg#caret-down" />
-                                </svg>
-                                <svg class="buttonicon" fill="currentColor" *ngIf="expandArchivedMetadata">
-                                    <use xlink:href="assets/bootstrap-icons.svg#caret-up" />
-                                </svg>
-                            </button>
-                            Archived document metadata
-                        </h6>
-
-                        <div #collapse="ngbCollapse" [(ngbCollapse)]="!expandArchivedMetadata">
-                            <table class="table table-borderless">
-                                <tbody>
-                                    <tr *ngFor="let m of metadata?.archive_metadata">
-                                        <td>{{m.prefix}}:{{m.key}}</td>
-                                        <td>{{m.value}}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
 
                     </ng-template>
                 </li>
@@ -171,11 +126,9 @@
         </form>
     </div>
 
-    <div class="col-xl d-none d-xl-block document-preview">
+    <div class="col-md-6 col-xl-8 mb-3">
-        <object [data]="previewUrl | safe" type="application/pdf" width="100%" height="100%">
+      <div class="pdf-viewer-container" *ngIf="getContentType() == 'application/pdf'">
-            <p>Your browser does not support PDFs.
+        <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true"></pdf-viewer>
-                <a href="previewUrl">Download the PDF</a>.</p>
+      </div>
-        </object>
-
     </div>
-</div>
+</div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -1,5 +1,6 @@
-.document-preview {
+.pdf-viewer-container {
-  height: calc(100vh - 180px);
+  height: calc(100vh - 160px);
   top: 70px;
   position: sticky;
-}
+  background-color: gray;
+}

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

@@ -1,19 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { environment } from 'src/environments/environment';
+import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component';
-import { DeleteDialogComponent } from '../common/delete-dialog/delete-dialog.component';
 import { CorrespondentEditDialogComponent } from '../manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component';
 import { DocumentTypeEditDialogComponent } from '../manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component';
 
@@ -57,7 +56,11 @@ export class DocumentDetailComponent implements OnInit {
     private modalService: NgbModal,
     private openDocumentService: OpenDocumentsService,
     private documentListViewService: DocumentListViewService,
-    private titleService: Title) { }
+    private documentTitlePipe: DocumentTitlePipe) { }
+
+  getContentType() {
+    return this.metadata?.has_archive_version ? 'application/pdf' : this.metadata?.original_mime_type
+  }
 
   ngOnInit(): void {
     this.documentForm.valueChanges.subscribe(wow => {
@@ -86,11 +89,10 @@ export class DocumentDetailComponent implements OnInit {
 
   updateComponent(doc: PaperlessDocument) {
     this.document = doc
-    this.titleService.setTitle(`${doc.title} - ${environment.appTitle}`)
     this.documentsService.getMetadata(doc.id).subscribe(result => {
       this.metadata = result
     })
-    this.title = doc.title
+    this.title = this.documentTitlePipe.transform(doc.title)
     this.documentForm.patchValue(doc)
   }
 
@@ -151,10 +153,13 @@ export class DocumentDetailComponent implements OnInit {
   }
 
   delete() {
-    let modal = this.modalService.open(DeleteDialogComponent, {backdrop: 'static'})
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    modal.componentInstance.message = `Do you really want to delete document '${this.document.title}'?`
+    modal.componentInstance.title = "Confirm delete"
-    modal.componentInstance.message2 = `The files for this document will be deleted permanently. This operation cannot be undone.`
+    modal.componentInstance.messageBold = `Do you really want to delete document '${this.document.title}'?`
-    modal.componentInstance.deleteClicked.subscribe(() => {
+    modal.componentInstance.message = `The files for this document will be deleted permanently. This operation cannot be undone.`
+    modal.componentInstance.btnClass = "btn-danger"
+    modal.componentInstance.btnCaption = "Delete document"
+    modal.componentInstance.confirmClicked.subscribe(() => {
       this.documentsService.delete(this.document).subscribe(() => {
         modal.close()  
         this.close()

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.html

@@ -0,0 +1,23 @@
+<h6>
+  <button type="button" class="btn btn-outline-secondary btn-sm mr-2"
+      (click)="expand = !expand">
+      <svg class="buttonicon" fill="currentColor" *ngIf="!expand">
+          <use xlink:href="assets/bootstrap-icons.svg#caret-down" />
+      </svg>
+      <svg class="buttonicon" fill="currentColor" *ngIf="expand">
+          <use xlink:href="assets/bootstrap-icons.svg#caret-up" />
+      </svg>
+  </button>
+  {{title}}
+</h6>
+
+<div #collapse="ngbCollapse" [(ngbCollapse)]="!expand">
+  <table class="table table-borderless">
+      <tbody>
+          <tr *ngFor="let m of metadata">
+              <td>{{m.prefix}}:{{m.key}}</td>
+              <td>{{m.value}}</td>
+          </tr>
+      </tbody>
+  </table>
+</div>

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetadataCollapseComponent } from './metadata-collapse.component';
+
+describe('MetadataCollapseComponent', () => {
+  let component: MetadataCollapseComponent;
+  let fixture: ComponentFixture<MetadataCollapseComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetadataCollapseComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetadataCollapseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-metadata-collapse',
+  templateUrl: './metadata-collapse.component.html',
+  styleUrls: ['./metadata-collapse.component.scss']
+})
+export class MetadataCollapseComponent implements OnInit {
+
+  constructor() { }
+
+  expand = false
+
+  @Input()
+  metadata
+
+  @Input()
+  title = "Metadata"
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -7,12 +7,12 @@
       <div class="card-body">
 
         <div class="d-flex justify-content-between align-items-center">
-          <h5 class="card-title">    
+          <h5 class="card-title">
             <ng-container *ngIf="document.correspondent">
               <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="" title="Filter by correspondent" (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>
               <ng-template #nolink>{{(document.correspondent$ | async)?.name}}</ng-template>:
             </ng-container>
-            {{document.title}}
+            {{document.title | documentTitle}}
             <app-tag [tag]="t" linkTitle="Filter by tag" *ngFor="let t of document.tags$ | async" class="ml-1" (click)="clickTag.emit(t.id)" [clickable]="clickTag.observers.length"></app-tag>
           </h5>
           <h5 class="card-title" *ngIf="document.archive_serial_number">#{{document.archive_serial_number}}</h5>
@@ -52,4 +52,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss

@@ -1,5 +1,6 @@
 .result-content {
   color: darkgray;
+  overflow-wrap: anywhere;
 }
 
 .doc-img {

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

@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentService } from 'src/app/services/rest/document.service';
 
 @Component({

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

@@ -11,13 +11,13 @@
         </div>
       </div>
     </div>
-    
+
     <div class="card-body p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">
           <a [routerLink]="" title="Filter by correspondent" (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
-        {{document.title}}
+        {{document.title | documentTitle}}
       </p>
     </div>
     <div class="card-footer">
@@ -44,7 +44,7 @@
         </div>
         <small class="text-muted">{{document.created | date}}</small>
       </div>
-      
+
     </div>
-  </div>  
+  </div>
-</div>
+</div>

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

@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentService } from 'src/app/services/rest/document.service';
 
 @Component({

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

@@ -1,5 +1,4 @@
 <app-page-header [title]="getTitle()">
-
   <div class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="displayMode"
     (ngModelChange)="saveDisplayMode()">
     <label ngbButtonLabel class="btn-outline-primary btn-sm">
@@ -21,7 +20,8 @@
       </svg>
     </label>
   </div>
-  <div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="list.sortDirection">
+
+  <div class="btn-group btn-group-toggle ml-2" ngbRadioGroup [(ngModel)]="list.sortReverse">
     <div ngbDropdown class="btn-group">
       <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>Sort by</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
@@ -30,48 +30,40 @@
       </div>
     </div>
     <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn btn-sm" value="asc">
+      <input ngbButton type="radio" class="btn btn-sm" [value]="false">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
       </svg>
     </label>
     <label ngbButtonLabel class="btn-outline-primary btn-sm">
-      <input ngbButton type="radio" class="btn btn-sm" value="des">
+      <input ngbButton type="radio" class="btn btn-sm" [value]="true">
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
       </svg>
     </label>
   </div>
+
   <div class="btn-group ml-2">
 
-    <button type="button" class="btn btn-sm" [ngClass]="isFiltered ? 'btn-primary' : 'btn-outline-primary'" (click)="showFilter=!showFilter">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#funnel" />
-      </svg>
-      Filter
-    </button>
-
     <div class="btn-group" ngbDropdown role="group">
-      <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
+      <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle>Views</button>
-      <div class="dropdown-menu" ngbDropdownMenu class="shadow">
+      <div class="dropdown-menu shadow" ngbDropdownMenu>
-        <ng-container *ngIf="!list.savedViewId" >
+        <ng-container *ngIf="!list.savedViewId">
-          <button ngbDropdownItem *ngFor="let config of savedViewConfigService.getConfigs()" (click)="loadViewConfig(config)">{{config.title}}</button>
+          <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
-          <div class="dropdown-divider" *ngIf="savedViewConfigService.getConfigs().length > 0"></div>
+          <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
         </ng-container>
-        
+
         <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId">Save "{{list.savedViewTitle}}"</button>
         <button ngbDropdownItem (click)="saveViewConfigAs()">Save as...</button>
       </div>
     </div>
 
   </div>
+
 </app-page-header>
 
-<div class="card w-100 mb-3" [hidden]="!showFilter">
+<div class="w-100 mb-2 mb-sm-4">
-  <div class="card-body">
+  <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
-    <h5 class="card-title">Filter</h5>
-    <app-filter-editor [(filterRules)]="filterRules" (apply)="applyFilterRules()" (clear)="clearFilterRules()"></app-filter-editor>
-  </div>
 </div>
 
 <div class="d-flex justify-content-between align-items-center">
@@ -81,7 +73,7 @@
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">
-  <app-document-card-large *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)">
+  <app-document-card-large *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
   </app-document-card-large>
 </div>
 
@@ -101,16 +93,16 @@
       </td>
       <td class="d-none d-md-table-cell">
         <ng-container *ngIf="d.correspondent">
-          <a [routerLink]="" (click)="filterByCorrespondent(d.correspondent)" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
+          <a [routerLink]="" (click)="clickCorrespondent(d.correspondent)" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
         </ng-container>
       </td>
       <td>
-        <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title}}</a>
+        <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
-        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="filterByTag(t.id)"></app-tag>
+        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t.id)"></app-tag>
       </td>
       <td class="d-none d-xl-table-cell">
         <ng-container *ngIf="d.document_type">
-          <a [routerLink]="" (click)="filterByDocumentType(d.document_type)" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
+          <a [routerLink]="" (click)="clickDocumentType(d.document_type)" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
         </ng-container>
       </td>
       <td>
@@ -125,5 +117,5 @@
 
 
 <div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)"></app-document-card-small>    
+  <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

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

@@ -1,15 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, Router } from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { cloneFilterRules, FilterRule } from 'src/app/data/filter-rule';
+import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type';
-import { FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
-import { SavedViewConfig } from 'src/app/data/saved-view-config';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
-import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
+import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
-import { environment } from 'src/environments/environment';
+import { FilterEditorComponent } from '../filter-editor/filter-editor.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
 
 @Component({
@@ -21,17 +19,17 @@ export class DocumentListComponent implements OnInit {
 
   constructor(
     public list: DocumentListViewService,
-    public savedViewConfigService: SavedViewConfigService,
+    public savedViewService: SavedViewService,
     public route: ActivatedRoute,
+    private router: Router,
     private toastService: ToastService,
-    public modalService: NgbModal,
+    public modalService: NgbModal) { }
-    private titleService: Title) { }
+
+  @ViewChild("filterEditor")
+  private filterEditor: FilterEditorComponent
 
   displayMode = 'smallCards' // largeCards, smallCards, details
 
-  filterRules: FilterRule[] = []
-  showFilter = false
-
   get isFiltered() {
     return this.list.filterRules?.length > 0
   }
@@ -53,93 +51,66 @@ export class DocumentListComponent implements OnInit {
       this.displayMode = localStorage.getItem('document-list:displayMode')
     }
     this.route.paramMap.subscribe(params => {
+      this.list.clear()
       if (params.has('id')) {
-        this.list.savedView = this.savedViewConfigService.getConfig(params.get('id'))
+        this.savedViewService.getCached(+params.get('id')).subscribe(view => {
-        this.filterRules = this.list.filterRules
+          if (!view) {
-        this.showFilter = false
+            this.router.navigate(["404"])
-        this.titleService.setTitle(`${this.list.savedView.title} - ${environment.appTitle}`)
+            return
+          }
+
+          this.list.savedView = view
+          this.list.reload()
+        })
       } else {
         this.list.savedView = null
-        this.filterRules = this.list.filterRules
+        this.list.reload()
-        this.showFilter = this.filterRules.length > 0
-        this.titleService.setTitle(`Documents - ${environment.appTitle}`)
       }
-      this.list.clear()
-      this.list.reload()
     })
   }
 
-  applyFilterRules() {
-    this.list.filterRules = this.filterRules
-  }
 
-  clearFilterRules() {
+  loadViewConfig(view: PaperlessSavedView) {
-    this.list.filterRules = this.filterRules
+    this.list.load(view)
-    this.showFilter = false
+    this.list.reload()
-  }
-
-  loadViewConfig(config: SavedViewConfig) {
-    this.filterRules = cloneFilterRules(config.filterRules)
-    this.list.load(config)
   }
 
   saveViewConfig() {
-    this.savedViewConfigService.updateConfig(this.list.savedView)
+    this.savedViewService.update(this.list.savedView).subscribe(result => {
-    this.toastService.showToast(Toast.make("Information", `View "${this.list.savedView.title}" saved successfully.`))
+      this.toastService.showToast(Toast.make("Information", `View "${this.list.savedView.name}" saved successfully.`))
+    })
+
   }
 
   saveViewConfigAs() {
     let modal = this.modalService.open(SaveViewConfigDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
     modal.componentInstance.saveClicked.subscribe(formValue => {
-      this.savedViewConfigService.newConfig({
+      let savedView = {
-        title: formValue.title,
+        name: formValue.name,
-        showInDashboard: formValue.showInDashboard,
+        show_on_dashboard: formValue.showOnDashboard,
-        showInSideBar: formValue.showInSideBar,
+        show_in_sidebar: formValue.showInSideBar,
-        filterRules: this.list.filterRules,
+        filter_rules: this.list.filterRules,
-        sortDirection: this.list.sortDirection,
+        sort_reverse: this.list.sortReverse,
-        sortField: this.list.sortField
+        sort_field: this.list.sortField
+      }
+      this.savedViewService.create(savedView).subscribe(() => {
+        modal.close()
+        this.toastService.showToast(Toast.make("Information", `View "${savedView.name}" created successfully.`))
       })
-      modal.close()
     })
   }
 
-  filterByTag(tag_id: number) {
+  clickTag(tagID: number) {
-    let filterRules = this.list.filterRules
+    this.filterEditor.toggleTag(tagID)
-    if (filterRules.find(rule => rule.type.id == FILTER_HAS_TAG && rule.value == tag_id)) {
-      return
-    }
-
-    filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_HAS_TAG), value: tag_id})
-    this.filterRules = filterRules
-    this.applyFilterRules()
   }
 
-  filterByCorrespondent(correspondent_id: number) {
+  clickCorrespondent(correspondentID: number) {
-    let filterRules = this.list.filterRules
+    this.filterEditor.toggleCorrespondent(correspondentID)
-    let existing_rule = filterRules.find(rule => rule.type.id == FILTER_CORRESPONDENT)
-    if (existing_rule && existing_rule.value == correspondent_id) {
-      return
-    } else if (existing_rule) {
-      existing_rule.value = correspondent_id
-    } else {
-      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_CORRESPONDENT), value: correspondent_id})
-    }
-    this.filterRules = filterRules
-    this.applyFilterRules()
   }
 
-  filterByDocumentType(document_type_id: number) {
+  clickDocumentType(documentTypeID: number) {
-    let filterRules = this.list.filterRules
+    this.filterEditor.toggleDocumentType(documentTypeID)
-    let existing_rule = filterRules.find(rule => rule.type.id == FILTER_DOCUMENT_TYPE)
-    if (existing_rule && existing_rule.value == document_type_id) {
-      return
-    } else if (existing_rule) {
-      existing_rule.value = document_type_id
-    } else {
-      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_DOCUMENT_TYPE), value: document_type_id})
-    }
-    this.filterRules = filterRules
-    this.applyFilterRules()
   }
 
 }

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.html

@@ -6,9 +6,9 @@
     </button>
   </div>
   <div class="modal-body">
-    <app-input-text title="Title" formControlName="title"></app-input-text>
+    <app-input-text title="Name" formControlName="name"></app-input-text>
     <app-input-check title="Show in side bar" formControlName="showInSideBar"></app-input-check>
-    <app-input-check title="Show in dashboard" formControlName="showInDashboard"></app-input-check>
+    <app-input-check title="Show on dashboard" formControlName="showOnDashboard"></app-input-check>
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -14,10 +14,23 @@ export class SaveViewConfigDialogComponent implements OnInit {
   @Output()
   public saveClicked = new EventEmitter()
 
+  _defaultName = ""
+
+  get defaultName() {
+    return this._defaultName
+  }
+
+  @Input()
+  set defaultName(value: string) {
+    this._defaultName = value
+    this.saveViewConfigForm.patchValue({name: value})
+  }
+  
+
   saveViewConfigForm = new FormGroup({
-    title: new FormControl(''),
+    name: new FormControl(''),
     showInSideBar: new FormControl(false),
-    showInDashboard: new FormControl(false),
+    showOnDashboard: new FormControl(false),
   })
 
   ngOnInit(): void {

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

@@ -0,0 +1,43 @@
+  <div class="btn-group" ngbDropdown role="group">
+  <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="list-group list-group-flush">
+        <button class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" (click)="clear()">Clear</button>
+        <button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)">
+          <ng-container *ngIf="isStringRange(range)">This </ng-container>
+          {{ range }}
+          <ng-container *ngIf="!isStringRange(range)"> days</ng-container>
+        </button>
+        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+          <div>Before</div>
+          <div class="input-group input-group-sm">
+            <input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onBeforeSelected($event)" #dpBefore="ngbDatepicker">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary btn-sm" (click)="dpBefore.toggle()" type="button">
+                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                  <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+          <div>After</div>
+          <div class="input-group input-group-sm">
+            <input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onAfterSelected($event)" #dpAfter="ngbDatepicker">
+            <div class="input-group-append">
+              <button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">
+                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+                  <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>

src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss

@@ -0,0 +1,7 @@
+.date-filter {
+  min-width: 250px;
+
+  .btn-link {
+    line-height: 1;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterDropdownDateComponent } from './filter-dropdown-date.component';
+
+describe('FilterDropdownDateComponent', () => {
+  let component: FilterDropdownDateComponent;
+  let fixture: ComponentFixture<FilterDropdownDateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterDropdownDateComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterDropdownDateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,112 @@
+import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, SimpleChange } from '@angular/core';
+import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
+
+export interface DateSelection {
+  before?: NgbDateStruct
+  after?: NgbDateStruct
+}
+
+
+@Component({
+  selector: 'app-filter-dropdown-date',
+  templateUrl: './filter-dropdown-date.component.html',
+  styleUrls: ['./filter-dropdown-date.component.scss']
+})
+export class FilterDropdownDateComponent {
+
+  @Input()
+  dateBefore: NgbDateStruct
+
+  @Input()
+  dateAfter: NgbDateStruct
+
+  @Input()
+  title: string
+
+  @Output()
+  datesSet = new EventEmitter<DateSelection>()
+
+  @ViewChild('dpAfter') dpAfter: NgbDatepicker
+  @ViewChild('dpBefore') dpBefore: NgbDatepicker
+
+  _dateBefore: NgbDateStruct
+  _dateAfter: NgbDateStruct
+
+  get _maxDate(): NgbDate {
+    let date = new Date()
+    return NgbDate.from({year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate()})
+  }
+
+  isStringRange(range: any) {
+    return typeof range == 'string'
+  }
+
+  ngOnChanges(changes: SimpleChange) {
+    // this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
+    let dateString: string = ''
+    let dateAfterChange: SimpleChange
+    let dateBeforeChange: SimpleChange
+    if (changes) {
+      dateAfterChange = changes['dateAfter']
+      dateBeforeChange = changes['dateBefore']
+    }
+
+    if (this.dpBefore && this.dpAfter) {
+      let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
+      let dpBeforeElRef: ElementRef = this.dpBefore['_elRef']
+
+      if (dateAfterChange && dateAfterChange.currentValue) {
+        let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
+        dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
+        dpAfterElRef.nativeElement.value = dateString
+      } else if (dateBeforeChange && dateBeforeChange.currentValue) {
+        let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
+        dateString = `${dateBeforeDate.year}-${dateBeforeDate.month.toString().padStart(2,'0')}-${dateBeforeDate.day.toString().padStart(2,'0')}`
+        dpBeforeElRef.nativeElement.value = dateString
+      } else {
+        dpAfterElRef.nativeElement.value = dateString
+        dpBeforeElRef.nativeElement.value = dateString
+      }
+    }
+  }
+
+  setDateQuickFilter(range: any) {
+    let date = new Date()
+    let newDate: NgbDateStruct = { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
+    switch (typeof range) {
+      case 'number':
+        date.setDate(date.getDate() - range)
+        newDate.year = date.getFullYear()
+        newDate.month = date.getMonth() + 1
+        newDate.day = date.getDate()
+        break
+
+      case 'string':
+        newDate.day = 1
+        if (range == 'year') newDate.month = 1
+        break
+
+      default:
+        break
+    }
+    this._dateAfter = newDate
+    this._dateBefore = null
+    this.datesSet.emit({after: newDate, before: null})
+  }
+
+  onBeforeSelected(date: NgbDateStruct) {
+    this._dateBefore = date
+    this.datesSet.emit({after: this._dateAfter, before: date})
+  }
+
+  onAfterSelected(date: NgbDateStruct) {
+    this._dateAfter = date
+    this.datesSet.emit({after: date, before: this._dateBefore})
+  }
+
+  clear() {
+    this._dateBefore = null
+    this._dateAfter = null
+    this.datesSet.emit({after: null, before: null})
+  }
+}

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

@@ -0,0 +1,12 @@
+<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.scss

@@ -0,0 +1,4 @@
+.selected-icon {
+  min-width: 1em;
+  min-height: 1em;
+}

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,29 @@
+<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.scss

@@ -0,0 +1,14 @@
+.badge-corner {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+}
+
+.dropdown-menu {
+  min-width: 250px;
+
+  .items {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterDropodownComponent } from './filter-dropdown.component';
+
+describe('FilterDropodownComponent', () => {
+  let component: FilterDropodownComponent;
+  let fixture: ComponentFixture<FilterDropodownComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FilterDropodownComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterDropodownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,58 @@
+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,52 +1,27 @@
-<div *ngFor="let rule of filterRules" class="form-row form-group">
+<div class="row">
-  <div class="col-md-3 col-form-label">
+   <div class="col mb-2 mb-xl-0">
-    <span>{{rule.type.name}}</span>
+     <div class="form-inline d-flex">
-  </div>
+         <label class="text-muted mr-2">Filter by:</label>
-  <div class="col">
+         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title">
-    <input *ngIf="rule.type.datatype == 'string'" type="text" class="form-control form-control-sm" [(ngModel)]="rule.value">
+     </div>
-    <input *ngIf="rule.type.datatype == 'number'" type="number" class="form-control form-control-sm" [(ngModel)]="rule.value">
-    <input *ngIf="rule.type.datatype == 'date'" type="date" class="form-control form-control-sm" [(ngModel)]="rule.value">
-
-    <select *ngIf="rule.type.datatype == 'tag'" class="form-control form-control-sm" [(ngModel)]="rule.value">
-      <option *ngFor="let t of tags" [ngValue]="t.id">{{t.name}}</option>
-    </select>
-
-    <select *ngIf="rule.type.datatype == 'document_type'" class="form-control form-control-sm" [(ngModel)]="rule.value">
-      <option *ngFor="let dt of documentTypes" [ngValue]="dt.id">{{dt.name}}</option>
-    </select>
-
-    <select *ngIf="rule.type.datatype == 'correspondent'" class="form-control form-control-sm" [(ngModel)]="rule.value">
-      <option *ngFor="let c of correspondents" [ngValue]="c.id">{{c.name}}</option>
-    </select>
-
-    <select *ngIf="rule.type.datatype == 'boolean'" class="form-control form-control-sm" [(ngModel)]="rule.value">
-      <option [ngValue]="true">Yes</option>
-      <option [ngValue]="false">No</option>
-    </select>
-
-  </div>
-  <div class="col-auto">
-    <button class="btn btn-sm btn-outline-secondary" (click)="removeRuleClicked(rule)">
-      <svg class="toolbaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#x"/>
-      </svg>
-    </button>
-  </div>
-</div>
-
-<div class="form-row form-group">
-  <div class="col">
-    <select [(ngModel)]="selectedRuleType" class="form-control form-control-sm">
-      <option *ngFor="let ruleType of getRuleTypes()" [ngValue]="ruleType">{{ruleType.name}}</option>
-    </select>
-  </div>
-  <div class="col-auto">
-    <button (click)="newRuleClicked()" class="btn btn-sm btn-outline-secondary">Add</button>
-  </div>
-  <div class="col-auto">
-    <button (click)="clearClicked()" class="btn btn-sm btn-outline-secondary">Clear</button>
-  </div>
-  <div class="col-auto">
-    <button (click)="applyClicked()" class="btn btn-sm btn-outline-secondary">Apply</button>
   </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.scss

@@ -0,0 +1,10 @@
+.quick-filter {
+  min-width: 250px;
+  max-height: 400px;
+  overflow-y: scroll;
+
+  .selected-icon {
+    min-width: 1em;
+    min-height: 1em;
+  }
+}

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

@@ -1,67 +1,240 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
-import { FilterRule } from 'src/app/data/filter-rule';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
-import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { Subject, Subscription } from 'rxjs';
-import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+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 {
+export class FilterEditorComponent implements OnInit, OnDestroy {
 
-  constructor(private documentTypeService: DocumentTypeService, private tagService: TagService, private correspondentService: CorrespondentService) { }
+  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}`
 
-  @Output()
+        case FILTER_DOCUMENT_TYPE:
-  clear = new EventEmitter()
+          return `Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
 
-  @Input()
+        case FILTER_HAS_TAG:
-  filterRules: FilterRule[] = []
+          return `Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
 
-  @Output()
+      }
-  apply = new EventEmitter()
+    }
 
-  selectedRuleType: FilterRuleType = FILTER_RULE_TYPES[0]
+    return ""
-
-  correspondents: PaperlessCorrespondent[] = []
-  tags: PaperlessTag[] = []
-  documentTypes: PaperlessDocumentType[] = []
-
-  newRuleClicked() {
-    this.filterRules.push({type: this.selectedRuleType, value: this.selectedRuleType.default})
-    this.selectedRuleType = this.getRuleTypes().length > 0 ? this.getRuleTypes()[0] : null
   }
 
-  removeRuleClicked(rule) {
+  constructor(
-    let index = this.filterRules.findIndex(r => r == rule)
+    private documentTypeService: DocumentTypeService,
-    if (index > -1) {
+    private tagService: TagService,
-      this.filterRules.splice(index, 1)
+    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(): NgbDateStruct {
+    let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE)
+    return createdBeforeRule ? this.dateParser.parse(createdBeforeRule.value) : null
+  }
+
+  get dateCreatedAfter(): NgbDateStruct {
+    let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER)
+    return createdAfterRule ? this.dateParser.parse(createdAfterRule.value) : null
+  }
+
+  get dateAddedBefore(): NgbDateStruct {
+    let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE)
+    return addedBeforeRule ? this.dateParser.parse(addedBeforeRule.value) : null
+  }
+
+  get dateAddedAfter(): NgbDateStruct {
+    let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER)
+    return addedAfterRule ? this.dateParser.parse(addedAfterRule.value) : null
+  }
+
+  setDateCreatedBefore(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
+    else this.clearDateFilter(FILTER_CREATED_BEFORE)
+  }
+
+  setDateCreatedAfter(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
+    else this.clearDateFilter(FILTER_CREATED_AFTER)
+  }
+
+  setDateAddedBefore(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
+    else this.clearDateFilter(FILTER_ADDED_BEFORE)
+  }
+
+  setDateAddedAfter(date?: NgbDateStruct) {
+    if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
+    else this.clearDateFilter(FILTER_ADDED_AFTER)
+  }
+
+  setDateFilter(date: NgbDateStruct, dateRuleTypeID: number) {
+    let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID)
+    let newValue = this.dateParser.format(date)
+
+    if (existingRule) {
+      existingRule.value = newValue
+    } else {
+      this.filterRules.push({rule_type: dateRuleTypeID, value: newValue})
     }
   }
 
-  applyClicked() {
+  clearDateFilter(dateRuleTypeID: number) {
-    this.apply.next()
+    let ruleIndex = this.filterRules.findIndex(rule => rule.rule_type == dateRuleTypeID)
-  }
+    if (ruleIndex != -1) {
-
+      this.filterRules.splice(ruleIndex, 1)
-  clearClicked() {
+    }
-    this.filterRules.splice(0,this.filterRules.length)
-    this.clear.next()
-  }
-
-  ngOnInit(): void {
-    this.correspondentService.listAll().subscribe(result => {this.correspondents = result.results})
-    this.tagService.listAll().subscribe(result => this.tags = result.results)
-    this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
-  }
-
-  getRuleTypes() {
-    return FILTER_RULE_TYPES.filter(rt => rt.multi || !this.filterRules.find(r => r.type == rt))
   }
 
 }

src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component';

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html

@@ -26,9 +26,26 @@
       <td scope="row">{{ correspondent.last_correspondence | date }}</td>
         <td scope="row">
           <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">Edit</button>
+            <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(correspondent)">
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">Delete</button>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
-        </div>
+                <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+              </svg>
+              Documents
+            </button>
+            <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">
+              <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+              </svg>
+              Edit
+            </button>
+            <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+              </svg>
+              Delete
+            </button>
+          </div>
         </td>
     </tr>
     </tbody>

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
-import { environment } from 'src/environments/environment';
 import { GenericListComponent } from '../generic-list/generic-list.component';
 import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/correspondent-edit-dialog.component';
 
@@ -12,9 +13,12 @@ import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/co
   templateUrl: './correspondent-list.component.html',
   styleUrls: ['./correspondent-list.component.scss']
 })
-export class CorrespondentListComponent extends GenericListComponent<PaperlessCorrespondent> implements OnInit {
+export class CorrespondentListComponent extends GenericListComponent<PaperlessCorrespondent> {
 
-  constructor(correspondentsService: CorrespondentService, modalService: NgbModal, private titleService: Title) { 
+  constructor(correspondentsService: CorrespondentService, modalService: NgbModal,
+    private router: Router,
+    private list: DocumentListViewService
+  ) { 
     super(correspondentsService,modalService,CorrespondentEditDialogComponent)
   }
 
@@ -22,9 +26,10 @@ export class CorrespondentListComponent extends GenericListComponent<PaperlessCo
     return `correspondent '${object.name}'`
   }
 
-  ngOnInit(): void {
+  filterDocuments(object: PaperlessCorrespondent) {
-    super.ngOnInit()
+    this.list.documentListView.filter_rules = [
-    this.titleService.setTitle(`Correspondents - ${environment.appTitle}`)
+      {rule_type: FILTER_CORRESPONDENT, value: object.id.toString()}
+    ]
+    this.router.navigate(["documents"])
   }
-
 }

src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component';

src-ui/src/app/components/manage/document-type-list/document-type-list.component.html

@@ -25,8 +25,25 @@
       <td scope="row">{{ document_type.document_count }}</td>
       <td scope="row">
         <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(document_type)">Edit</button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(document_type)">
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(document_type)">Delete</button>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+            </svg>
+            Documents
+          </button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(document_type)">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+            Edit
+          </button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(document_type)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete
+          </button>
         </div>
       </td>
     </tr>

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

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_DOCUMENT_TYPE } from 'src/app/data/filter-rule-type';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
-import { environment } from 'src/environments/environment';
 import { GenericListComponent } from '../generic-list/generic-list.component';
 import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/document-type-edit-dialog.component';
 
@@ -12,9 +13,12 @@ import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/doc
   templateUrl: './document-type-list.component.html',
   styleUrls: ['./document-type-list.component.scss']
 })
-export class DocumentTypeListComponent extends GenericListComponent<PaperlessDocumentType> implements OnInit {
+export class DocumentTypeListComponent extends GenericListComponent<PaperlessDocumentType> {
 
-  constructor(service: DocumentTypeService, modalService: NgbModal, private titleService: Title) {
+  constructor(service: DocumentTypeService, modalService: NgbModal,
+    private router: Router,
+    private list: DocumentListViewService
+  ) {
     super(service, modalService, DocumentTypeEditDialogComponent)
   }
 
@@ -22,8 +26,10 @@ export class DocumentTypeListComponent extends GenericListComponent<PaperlessDoc
     return `document type '${object.name}'`
   }
 
-  ngOnInit(): void {
+  filterDocuments(object: PaperlessDocumentType) {
-    super.ngOnInit()
+    this.list.documentListView.filter_rules = [
-    this.titleService.setTitle(`Document types - ${environment.appTitle}`)
+      {rule_type: FILTER_DOCUMENT_TYPE, value: object.id.toString()}
+    ]
+    this.router.navigate(["documents"])
   }
 }

src-ui/src/app/components/manage/generic-list/generic-list.component.ts

@@ -4,13 +4,13 @@ import { MatchingModel, MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/mat
 import { ObjectWithId } from 'src/app/data/object-with-id';
 import { SortableDirective, SortEvent } from 'src/app/directives/sortable.directive';
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
-import { DeleteDialogComponent } from '../../common/delete-dialog/delete-dialog.component';
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component';
 
 @Directive()
 export abstract class GenericListComponent<T extends ObjectWithId> implements OnInit {
-  
+
   constructor(
-    private service: AbstractPaperlessService<T>, 
+    private service: AbstractPaperlessService<T>,
     private modalService: NgbModal,
     private editDialogComponent: any) {
     }
@@ -60,7 +60,8 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
   }
 
   reloadData() {
-    this.service.list(this.page, null, this.sortField, this.sortDirection).subscribe(c => {
+    // TODO: this is a hack
+    this.service.list(this.page, null, this.sortField, this.sortDirection == 'des').subscribe(c => {
       this.data = c.results
       this.collectionSize = c.count
     });
@@ -88,10 +89,13 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
   }
 
   openDeleteDialog(object: T) {
-    var activeModal = this.modalService.open(DeleteDialogComponent, {backdrop: 'static'})
+    var activeModal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
-    activeModal.componentInstance.message = `Do you really want to delete ${this.getObjectName(object)}?`
+    activeModal.componentInstance.title = "Confirm delete"
-    activeModal.componentInstance.message2 = "Associated documents will not be deleted."
+    activeModal.componentInstance.messageBold = `Do you really want to delete ${this.getObjectName(object)}?`
-    activeModal.componentInstance.deleteClicked.subscribe(() => {
+    activeModal.componentInstance.message = "Associated documents will not be deleted."
+    activeModal.componentInstance.btnClass = "btn-danger"
+    activeModal.componentInstance.btnCaption = "Delete"
+    activeModal.componentInstance.confirmPressed.subscribe(() => {
       this.service.delete(object).subscribe(_ => {
         activeModal.close()
         this.reloadData()

src-ui/src/app/components/manage/logs/logs.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
 import { LOG_LEVELS, LOG_LEVEL_INFO, PaperlessLog } from 'src/app/data/paperless-log';
 import { LogService } from 'src/app/services/rest/log.service';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-logs',
@@ -11,18 +9,17 @@ import { environment } from 'src/environments/environment';
 })
 export class LogsComponent implements OnInit {
 
-  constructor(private logService: LogService, private titleService: Title) { }
+  constructor(private logService: LogService) { }
 
   logs: PaperlessLog[] = []
   level: number = LOG_LEVEL_INFO
 
   ngOnInit(): void {
     this.reload()
-    this.titleService.setTitle(`Logs - ${environment.appTitle}`)
   }
 
   reload() {
-    this.logService.list(1, 50, 'created', 'des', {'level__gte': this.level}).subscribe(result => this.logs = result.results)
+    this.logService.list(1, 50, 'created', true, {'level__gte': this.level}).subscribe(result => this.logs = result.results)
   }
 
   getLevelText(level: number) {
@@ -34,7 +31,7 @@ export class LogsComponent implements OnInit {
     if (this.logs.length > 0) {
       lastCreated = new Date(this.logs[this.logs.length-1].created).toISOString()
     }
-    this.logService.list(1, 25, 'created', 'des', {'created__lt': lastCreated, 'level__gte': this.level}).subscribe(result => {
+    this.logService.list(1, 25, 'created', true, {'created__lt': lastCreated, 'level__gte': this.level}).subscribe(result => {
       this.logs.push(...result.results)
     })
   }

src-ui/src/app/components/manage/settings/settings.component.html

@@ -34,24 +34,35 @@
       <a ngbNavLink>Saved views</a>
       <ng-template ngbNavContent>
 
-        <table class="table table-borderless table-sm">
+        <div formGroupName="savedViews">
-          <thead>
+          
-            <tr>
+            <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="form-row">
-              <th scope="col">Title</th>
+              <div class="form-group col-4 mr-3">
-              <th scope="col">Show in dashboard</th>
+                <label for="name_{{view.id}}">Name</label>
-              <th scope="col">Show in sidebar</th>
+                <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
-              <th scope="col">Actions</th>
+              </div>
-            </tr>
+
-          </thead>
+              <div class="form-group col-auto mr-3">
-          <tbody>
+                <label for="show_on_dashboard_{{view.id}}">Appears on</label>
-            <tr *ngFor="let config of savedViewConfigService.getConfigs()">
+                <div class="custom-control custom-switch">
-              <td>{{ config.title }}</td>
+                  <input type="checkbox" class="custom-control-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-              <td>{{ config.showInDashboard | yesno }}</td>
+                  <label class="custom-control-label" for="show_on_dashboard_{{view.id}}">Show on dashboard</label>
-              <td>{{ config.showInSideBar | yesno }}</td>
+                </div>
-              <td><button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteViewConfig(config)">Delete</button></td>
+                <div class="custom-control custom-switch">
-            </tr>
+                  <input type="checkbox" class="custom-control-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-          </tbody>
+                  <label class="custom-control-label" for="show_in_sidebar_{{view.id}}">Show in sidebar</label>
-        </table>
+                </div>
+              </div>
+
+              <div class="form-group col-auto">
+                <label for="name_{{view.id}}">Actions</label>
+                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)">Delete</button>
+              </div>
+            </div>
+
+            <div *ngIf="savedViews.length == 0">No saved views defined.</div>
+          
+        </div>
 
       </ng-template>
     </li>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { Title } from '@angular/platform-browser';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
-import { SavedViewConfig } from 'src/app/data/saved-view-config';
 import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
-import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
+import { SavedViewService } from 'src/app/services/rest/saved-view.service';
-import { environment } from 'src/environments/environment';
+import { Toast, ToastService } from 'src/app/services/toast.service';
 
 @Component({
   selector: 'app-settings',
@@ -14,26 +13,63 @@ import { environment } from 'src/environments/environment';
 })
 export class SettingsComponent implements OnInit {
 
+  savedViewGroup = new FormGroup({})
+
   settingsForm = new FormGroup({
-    'documentListItemPerPage': new FormControl(+localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT)
+    'documentListItemPerPage': new FormControl(+localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT),
+    'savedViews': this.savedViewGroup
   })
 
   constructor(
-    private savedViewConfigService: SavedViewConfigService,
+    public savedViewService: SavedViewService,
     private documentListViewService: DocumentListViewService,
-    private titleService: Title
+    private toastService: ToastService
   ) { }
 
-  ngOnInit(): void {
+  savedViews: PaperlessSavedView[]
-    this.titleService.setTitle(`Settings - ${environment.appTitle}`)
+
+  ngOnInit() {
+    this.savedViewService.listAll().subscribe(r => {
+      this.savedViews = r.results
+      for (let view of this.savedViews) {
+        this.savedViewGroup.addControl(view.id.toString(), new FormGroup({
+          "id": new FormControl(view.id),
+          "name": new FormControl(view.name),
+          "show_on_dashboard": new FormControl(view.show_on_dashboard),
+          "show_in_sidebar": new FormControl(view.show_in_sidebar)
+        }))
+      }
+    })
   }
 
-  deleteViewConfig(config: SavedViewConfig) {
+  deleteSavedView(savedView: PaperlessSavedView) {
-    this.savedViewConfigService.deleteConfig(config)
+    this.savedViewService.delete(savedView).subscribe(() => {
+      this.savedViewGroup.removeControl(savedView.id.toString())
+      this.savedViews.splice(this.savedViews.indexOf(savedView), 1)
+      this.toastService.showToast(Toast.make("Information", `Saved view "${savedView.name} deleted.`))
+    })
+  }
+
+  private saveLocalSettings() {
+    localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    this.documentListViewService.updatePageSize()
+    this.toastService.showToast(Toast.make("Information", "Settings saved successfully."))
   }
 
   saveSettings() {
-    localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    let x = []
-    this.documentListViewService.updatePageSize()
+    for (let id in this.savedViewGroup.value) {
+      x.push(this.savedViewGroup.value[id])
+    }
+    if (x.length > 0) {
+      this.savedViewService.patchMany(x).subscribe(s => {
+        this.saveLocalSettings()
+      }, error => {
+        this.toastService.showToast(Toast.makeError(`Error while storing settings on server: ${JSON.stringify(error.error)}`))
+      })
+    } else {
+      this.saveLocalSettings()
+    }
+
   }
 }

src-ui/src/app/components/manage/tag-list/tag-list.component.html

@@ -9,7 +9,7 @@
     aria-label="Default pagination"></ngb-pagination>
 </div>
 
-<table class="table table-striped border shadow">
+<table class="table table-striped border shadow-sm">
   <thead>
     <tr>
       <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
@@ -28,8 +28,25 @@
       <td scope="row">{{ tag.document_count }}</td>
       <td scope="row">
         <div class="btn-group">
-          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">Edit</button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(tag)">
-          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">Delete</button>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+            </svg>
+            Documents
+          </button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+            Edit
+          </button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete
+          </button>
         </div>
       </td>
     </tr>

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_HAS_TAG } from 'src/app/data/filter-rule-type';
 import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { TagService } from 'src/app/services/rest/tag.service';
-import { environment } from 'src/environments/environment';
 import { GenericListComponent } from '../generic-list/generic-list.component';
 import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.component';
 
@@ -12,18 +13,15 @@ import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.compon
   templateUrl: './tag-list.component.html',
   styleUrls: ['./tag-list.component.scss']
 })
-export class TagListComponent extends GenericListComponent<PaperlessTag> implements OnInit {
+export class TagListComponent extends GenericListComponent<PaperlessTag> {
 
-  constructor(tagService: TagService, modalService: NgbModal, private titleService: Title) {
+  constructor(tagService: TagService, modalService: NgbModal,
+    private router: Router,
+    private list: DocumentListViewService
+  ) {
     super(tagService, modalService, TagEditDialogComponent)
   }
 
-
-  ngOnInit(): void {
-    super.ngOnInit()
-    this.titleService.setTitle(`Tags - ${environment.appTitle}`)
-  }
-
   getColor(id) {
     return TAG_COLOURS.find(c => c.id == id)
   }
@@ -31,4 +29,11 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> impleme
   getObjectName(object: PaperlessTag) {
     return `tag '${object.name}'`
   }
+
+  filterDocuments(object: PaperlessTag) {
+    this.list.documentListView.filter_rules = [
+      {rule_type: FILTER_HAS_TAG, value: object.id.toString()}
+    ]
+    this.router.navigate(["documents"])
+  }
 }

src-ui/src/app/components/search/search.component.ts

@@ -1,9 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SearchHit } from 'src/app/data/search-result';
 import { SearchService } from 'src/app/services/rest/search.service';
-import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-search',
@@ -28,7 +26,7 @@ export class SearchComponent implements OnInit {
 
   errorMessage: string
 
-  constructor(private searchService: SearchService, private route: ActivatedRoute, private router: Router, private titleService: Title) { }
+  constructor(private searchService: SearchService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(paramMap => {
@@ -36,7 +34,6 @@ export class SearchComponent implements OnInit {
       this.searching = true
       this.currentPage = 1
       this.loadPage()
-      this.titleService.setTitle(`Search: ${this.query} - ${environment.appTitle}`)
     })
 
   }

src-ui/src/app/data/filter-rule-type.ts

@@ -22,15 +22,15 @@ export const FILTER_RULE_TYPES: FilterRuleType[] = [
 
   {id: FILTER_TITLE, name: "Title contains", filtervar: "title__icontains", datatype: "string", multi: false, default: ""},
   {id: FILTER_CONTENT, name: "Content contains", filtervar: "content__icontains", datatype: "string", multi: false, default: ""},
-  
+
   {id: FILTER_ASN, name: "ASN is", filtervar: "archive_serial_number", datatype: "number", multi: false},
-  
+
   {id: FILTER_CORRESPONDENT, name: "Correspondent is", filtervar: "correspondent__id", datatype: "correspondent", multi: false},
   {id: FILTER_DOCUMENT_TYPE, name: "Document type is", filtervar: "document_type__id", datatype: "document_type", multi: false},
 
-  {id: FILTER_IS_IN_INBOX, name: "Is in Inbox", filtervar: "is_in_inbox", datatype: "boolean", multi: false, default: true},  
+  {id: FILTER_IS_IN_INBOX, name: "Is in Inbox", filtervar: "is_in_inbox", datatype: "boolean", multi: false, default: true},
-  {id: FILTER_HAS_TAG, name: "Has tag", filtervar: "tags__id__all", datatype: "tag", multi: true},  
+  {id: FILTER_HAS_TAG, name: "Has tag", filtervar: "tags__id__all", datatype: "tag", multi: true},
-  {id: FILTER_DOES_NOT_HAVE_TAG, name: "Does not have tag", filtervar: "tags__id__none", datatype: "tag", multi: true},  
+  {id: FILTER_DOES_NOT_HAVE_TAG, name: "Does not have tag", filtervar: "tags__id__none", datatype: "tag", multi: true},
   {id: FILTER_HAS_ANY_TAG, name: "Has any tag", filtervar: "is_tagged", datatype: "boolean", multi: false, default: true},
 
   {id: FILTER_CREATED_BEFORE, name: "Created before", filtervar: "created__date__lt", datatype: "date", multi: false},
@@ -42,7 +42,7 @@ export const FILTER_RULE_TYPES: FilterRuleType[] = [
 
   {id: FILTER_ADDED_BEFORE, name: "Added before", filtervar: "added__date__lt", datatype: "date", multi: false},
   {id: FILTER_ADDED_AFTER, name: "Added after", filtervar: "added__date__gt", datatype: "date", multi: false},
-  
+
   {id: FILTER_MODIFIED_BEFORE, name: "Modified before", filtervar: "modified__date__lt", datatype: "date", multi: false},
   {id: FILTER_MODIFIED_AFTER, name: "Modified after", filtervar: "modified__date__gt", datatype: "date", multi: false},
 ]
@@ -54,4 +54,4 @@ export interface FilterRuleType {
   datatype: string //number, string, boolean, date
   multi: boolean
   default?: any
-}
+}

src-ui/src/app/data/filter-rule.ts

@@ -1,10 +1,8 @@
-import { FilterRuleType } from './filter-rule-type';
-
 export function cloneFilterRules(filterRules: FilterRule[]): FilterRule[] {
   if (filterRules) {
     let newRules: FilterRule[] = []
     for (let rule of filterRules) {
-      newRules.push({type: rule.type, value: rule.value})
+      newRules.push({rule_type: rule.rule_type, value: rule.value})
     }
     return newRules      
   } else {
@@ -13,6 +11,6 @@ export function cloneFilterRules(filterRules: FilterRule[]): FilterRule[] {
 }
 
 export interface FilterRule {
-  type: FilterRuleType
+  rule_type: number
-  value: any
+  value: string
 }

src-ui/src/app/data/paperless-saved-view.ts

@@ -0,0 +1,18 @@
+import { FilterRule } from './filter-rule';
+import { ObjectWithId } from './object-with-id';
+
+export interface PaperlessSavedView extends ObjectWithId {
+
+  name?: string
+
+  show_on_dashboard?: boolean
+
+  show_in_sidebar?: boolean
+
+  sort_field: string
+
+  sort_reverse: boolean
+
+  filter_rules: FilterRule[]
+
+}

src-ui/src/app/data/saved-view-config.ts

@@ -1,19 +0,0 @@
-import { FilterRule } from './filter-rule';
-
-export interface SavedViewConfig {
-
-  id?: string
-
-  filterRules: FilterRule[]
-
-  sortField: string
-
-  sortDirection: string
-
-  title?: string
-
-  showInSideBar?: boolean
-
-  showInDashboard?: boolean
-
-}

src-ui/src/app/pipes/document-title.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DocumentTitlePipe } from './document-title.pipe';
+
+describe('DocumentTitlePipe', () => {
+  it('create an instance', () => {
+    const pipe = new DocumentTitlePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src-ui/src/app/pipes/document-title.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'documentTitle'
+})
+export class DocumentTitlePipe implements PipeTransform {
+
+  transform(value: string): string {
+    if (value) {
+      return value
+    } else {
+      return "(no title)"
+    }
+  }
+
+}

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

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'filter'
+})
+export class FilterPipe implements PipeTransform {
+  transform(items: any[], searchText: string): any[] {
+    if (!items) return [];
+    if (!searchText) return items;
+
+    return items.filter(item => {
+      return Object.keys(item).some(key => {
+        return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
+      });
+    });
+   }
+}

src-ui/src/app/pipes/safe.pipe.spec.ts

@@ -1,8 +0,0 @@
-import { SafePipe } from './safe.pipe';
-
-describe('SafePipe', () => {
-  it('create an instance', () => {
-    const pipe = new SafePipe();
-    expect(pipe).toBeTruthy();
-  });
-});

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

@@ -1,19 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-@Pipe({
-  name: 'safe'
-})
-export class SafePipe implements PipeTransform {
-
-  constructor(private sanitizer: DomSanitizer) { }
-
-  transform(url) {
-    if (url == null) {
-      return this.sanitizer.bypassSecurityTrustResourceUrl("")
-    } else {
-      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
-    }
-  }
-
-}

src-ui/src/app/services/document-list-view.service.ts

@@ -2,14 +2,14 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { cloneFilterRules, FilterRule } from '../data/filter-rule';
 import { PaperlessDocument } from '../data/paperless-document';
-import { SavedViewConfig } from '../data/saved-view-config';
+import { PaperlessSavedView } from '../data/paperless-saved-view';
 import { DOCUMENT_LIST_SERVICE, GENERAL_SETTINGS } from '../data/storage-keys';
 import { DocumentService } from './rest/document.service';
 
 
 /**
  * This service manages the document list which is displayed using the document list view.
- * 
+ *
  * This service also serves saved views by transparently switching between the document list
  * and saved views on request. See below.
  */
@@ -25,21 +25,21 @@ export class DocumentListViewService {
   currentPage = 1
   currentPageSize: number = +localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT
   collectionSize: 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: SavedViewConfig
+  private _documentListViewConfig: PaperlessSavedView
   /**
    * Optionally, this is the currently selected saved view, which might be null.
    */
-  private _savedViewConfig: SavedViewConfig
+  private _savedViewConfig: PaperlessSavedView
 
-  get savedView() {
+  get savedView(): PaperlessSavedView {
     return this._savedViewConfig
   }
 
-  set savedView(value) {
+  set savedView(value: PaperlessSavedView) {
     if (value) {
       //this is here so that we don't modify value, which might be the actual instance of the saved view.
       this._savedViewConfig = Object.assign({}, value)
@@ -53,7 +53,7 @@ export class DocumentListViewService {
   }
 
   get savedViewTitle() {
-    return this.savedView?.title
+    return this.savedView?.name
   }
 
   get documentListView() {
@@ -75,11 +75,11 @@ export class DocumentListViewService {
     return this.savedView || this.documentListView
   }
 
-  load(config: SavedViewConfig) {
+  load(view: PaperlessSavedView) {
-    this.view.filterRules = cloneFilterRules(config.filterRules)
+    this.documentListView.filter_rules = cloneFilterRules(view.filter_rules)
-    this.view.sortDirection = config.sortDirection
+    this.documentListView.sort_reverse = view.sort_reverse
-    this.view.sortField = config.sortField
+    this.documentListView.sort_field = view.sort_field
-    this.reload()
+    this.saveDocumentListView()
   }
 
   clear() {
@@ -93,9 +93,9 @@ export class DocumentListViewService {
     this.documentService.list(
       this.currentPage,
       this.currentPageSize,
-      this.view.sortField,
+      this.view.sort_field,
-      this.view.sortDirection,
+      this.view.sort_reverse,
-      this.view.filterRules).subscribe(
+      this.view.filter_rules).subscribe(
         result => {
           this.collectionSize = result.count
           this.documents = result.results
@@ -116,33 +116,33 @@ export class DocumentListViewService {
   set filterRules(filterRules: FilterRule[]) {
     //we're going to clone the filterRules object, since we don't
     //want changes in the filter editor to propagate into here right away.
-    this.view.filterRules = cloneFilterRules(filterRules)
+    this.view.filter_rules = filterRules
     this.reload()
     this.saveDocumentListView()
   }
 
   get filterRules(): FilterRule[] {
-    return cloneFilterRules(this.view.filterRules)
+    return this.view.filter_rules
   }
 
   set sortField(field: string) {
-    this.view.sortField = field
+    this.view.sort_field = field
     this.saveDocumentListView()
     this.reload()
   }
 
   get sortField(): string {
-    return this.view.sortField
+    return this.view.sort_field
   }
 
-  set sortDirection(direction: string) {
+  set sortReverse(reverse: boolean) {
-    this.view.sortDirection = direction
+    this.view.sort_reverse = reverse
     this.saveDocumentListView()
     this.reload()
   }
 
-  get sortDirection(): string {
+  get sortReverse(): boolean {
-    return this.view.sortDirection
+    return this.view.sort_reverse
   }
 
   private saveDocumentListView() {
@@ -188,11 +188,10 @@ export class DocumentListViewService {
     let newPageSize = +localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT
     if (newPageSize != this.currentPageSize) {
       this.currentPageSize = newPageSize
-      //this.reload()
     }
   }
 
-  constructor(private documentService: DocumentService) { 
+  constructor(private documentService: DocumentService) {
     let documentListViewConfigJson = sessionStorage.getItem(DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG)
     if (documentListViewConfigJson) {
       try {
@@ -202,11 +201,11 @@ export class DocumentListViewService {
         this.documentListView = null
       }
     }
-    if (!this.documentListView) {
+    if (!this.documentListView || !this.documentListView.filter_rules || !this.documentListView.sort_reverse || !this.documentListView.sort_field) {
       this.documentListView = {
-        filterRules: [],
+        filter_rules: [],
-        sortDirection: 'des',
+        sort_reverse: true,
-        sortField: 'created'
+        sort_field: 'created'
       }
     }
   }

src-ui/src/app/services/rest/abstract-paperless-service.ts

@@ -1,5 +1,5 @@
 import { HttpClient, HttpParams } from '@angular/common/http'
-import { Observable, of, Subject } from 'rxjs'
+import { Observable } from 'rxjs'
 import { map, publishReplay, refCount } from 'rxjs/operators'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { Results } from 'src/app/data/results'
@@ -22,17 +22,15 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     return url
   }
 
-  private getOrderingQueryParam(sortField: string, sortDirection: string) {
+  private getOrderingQueryParam(sortField: string, sortReverse: boolean) {
-    if (sortField && sortDirection) {
+    if (sortField) {
-      return (sortDirection == 'des' ? '-' : '') + sortField
+      return (sortReverse ? '-' : '') + sortField
-    } else if (sortField) {
-      return sortField
     } else {
       return null
     }
   }
 
-  list(page?: number, pageSize?: number, sortField?: string, sortDirection?: string, extraParams?): Observable<Results<T>> {
+  list(page?: number, pageSize?: number, sortField?: string, sortReverse?: boolean, extraParams?): Observable<Results<T>> {
     let httpParams = new HttpParams()
     if (page) {
       httpParams = httpParams.set('page', page.toString())
@@ -40,7 +38,7 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     if (pageSize) {
       httpParams = httpParams.set('page_size', pageSize.toString())
     }
-    let ordering = this.getOrderingQueryParam(sortField, sortDirection)
+    let ordering = this.getOrderingQueryParam(sortField, sortReverse)
     if (ordering) {
       httpParams = httpParams.set('ordering', ordering)
     }
@@ -94,4 +92,10 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     this._listAll = null
     return this.http.put<T>(this.getResourceUrl(o.id), o)
   }
-}
+
+  patch(o: T): Observable<T> {
+    this._listAll = null
+    return this.http.patch<T>(this.getResourceUrl(o.id), o)
+  }
+
+}

src-ui/src/app/services/rest/document.service.ts

@@ -10,7 +10,7 @@ import { map } from 'rxjs/operators';
 import { CorrespondentService } from './correspondent.service';
 import { DocumentTypeService } from './document-type.service';
 import { TagService } from './tag.service';
-
+import { FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 
 export const DOCUMENT_SORT_FIELDS = [
   { field: "correspondent__name", name: "Correspondent" },
@@ -22,10 +22,6 @@ export const DOCUMENT_SORT_FIELDS = [
   { field: 'modified', name: 'Modified' }
 ]
 
-export const SORT_DIRECTION_ASCENDING = "asc"
-export const SORT_DIRECTION_DESCENDING = "des"
-
-
 @Injectable({
   providedIn: 'root'
 })
@@ -39,10 +35,11 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     if (filterRules) {
       let params = {}
       for (let rule of filterRules) {
-        if (rule.type.multi) {
+        let ruleType = FILTER_RULE_TYPES.find(t => t.id == rule.rule_type)
-          params[rule.type.filtervar] = params[rule.type.filtervar] ? params[rule.type.filtervar] + "," + rule.value : rule.value
+        if (ruleType.multi) {
+          params[ruleType.filtervar] = params[ruleType.filtervar] ? params[ruleType.filtervar] + "," + rule.value : rule.value
         } else {
-          params[rule.type.filtervar] = rule.value
+          params[ruleType.filtervar] = rule.value
         }
       }
       return params
@@ -64,8 +61,8 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     return doc
   }
 
-  list(page?: number, pageSize?: number, sortField?: string, sortDirection?: string, filterRules?: FilterRule[]): Observable<Results<PaperlessDocument>> {
+  list(page?: number, pageSize?: number, sortField?: string, sortReverse?: boolean, filterRules?: FilterRule[]): Observable<Results<PaperlessDocument>> {
-    return super.list(page, pageSize, sortField, sortDirection, this.filterRulesToQueryParams(filterRules)).pipe(
+    return super.list(page, pageSize, sortField, sortReverse, this.filterRulesToQueryParams(filterRules)).pipe(
       map(results => {
         results.results.forEach(doc => this.addObservablesToDocument(doc))
         return results

src-ui/src/app/services/rest/saved-view.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SavedViewService } from './saved-view.service';
+
+describe('SavedViewService', () => {
+  let service: SavedViewService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SavedViewService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src-ui/src/app/services/rest/saved-view.service.ts

@@ -0,0 +1,59 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { combineLatest, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
+import { AbstractPaperlessService } from './abstract-paperless-service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SavedViewService extends AbstractPaperlessService<PaperlessSavedView> {
+
+  constructor(http: HttpClient) {
+    super(http, 'saved_views')
+    this.reload()
+  }
+
+  private reload() {
+    this.listAll().subscribe(r => this.savedViews = r.results)
+  }
+
+  private savedViews: PaperlessSavedView[] = []
+
+  get allViews() {
+    return this.savedViews
+  }
+
+  get sidebarViews() {
+    return this.savedViews.filter(v => v.show_in_sidebar)
+  }
+
+  get dashboardViews() {
+    return this.savedViews.filter(v => v.show_on_dashboard)
+  }
+
+  create(o: PaperlessSavedView) {
+    return super.create(o).pipe(
+      tap(() => this.reload())
+    )
+  }
+
+  update(o: PaperlessSavedView) {
+    return super.update(o).pipe(
+      tap(() => this.reload())
+    )
+  }
+  
+  patchMany(objects: PaperlessSavedView[]): Observable<PaperlessSavedView[]> {
+    return combineLatest(objects.map(o => super.patch(o))).pipe(
+      tap(() => this.reload())
+    )
+  }
+
+  delete(o: PaperlessSavedView) {
+    return super.delete(o).pipe(
+      tap(() => this.reload())
+    )
+  }
+}

src-ui/src/app/services/saved-view-config.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SavedViewConfigService } from './saved-view-config.service';
-
-describe('SavedViewConfigService', () => {
-  let service: SavedViewConfigService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(SavedViewConfigService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src-ui/src/app/services/saved-view-config.service.ts

@@ -1,66 +0,0 @@
-import { Injectable } from '@angular/core';
-import { v4 as uuidv4 } from 'uuid';
-import { SavedViewConfig } from '../data/saved-view-config';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SavedViewConfigService {
-
-  constructor() { 
-    let savedConfigs = localStorage.getItem('saved-view-config-service:savedConfigs')
-    if (savedConfigs) {
-      try {
-        this.configs = JSON.parse(savedConfigs)
-      } catch (e) {
-        this.configs = []
-      }
-    }
-  }
-
-  private configs: SavedViewConfig[] = []
-
-  getConfigs(): SavedViewConfig[] {
-    return this.configs
-  }
-
-  getDashboardConfigs(): SavedViewConfig[] {
-    return this.configs.filter(sf => sf.showInDashboard)
-  }
-
-  getSideBarConfigs(): SavedViewConfig[] {
-    return this.configs.filter(sf => sf.showInSideBar)
-  }
-
-  getConfig(id: string): SavedViewConfig {
-    return this.configs.find(sf => sf.id == id)
-  }
-
-  newConfig(config: SavedViewConfig) {
-    config.id = uuidv4()
-    this.configs.push(config)
-
-    this.save()
-  }
-
-  updateConfig(config: SavedViewConfig) {
-    let savedConfig = this.configs.find(c => c.id == config.id)
-    if (savedConfig) {
-      Object.assign(savedConfig, config)
-      this.save()
-    }
-  }
-
-  private save() {
-    localStorage.setItem('saved-view-config-service:savedConfigs', JSON.stringify(this.configs))
-  }
-
-  deleteConfig(config: SavedViewConfig) {
-    let index = this.configs.findIndex(vc => vc.id == config.id)
-    if (index != -1) {
-      this.configs.splice(index, 1)
-      this.save()
-    }
-
-  }
-}

src-ui/src/environments/environment.prod.ts

@@ -1,5 +1,6 @@
 export const environment = {
   production: true,
   apiBaseUrl: "/api/",
-  appTitle: "Paperless-ng"
+  appTitle: "Paperless-ng",
+  version: "0.9.7"
 };

src-ui/src/environments/environment.ts

@@ -5,7 +5,8 @@
 export const environment = {
   production: false,
   apiBaseUrl: "http://localhost:8000/api/",
-  appTitle: "DEVELOPMENT P-NG"
+  appTitle: "Paperless-ng",
+  version: "DEVELOPMENT"
 };
 
 /*

src/documents/admin.py

@@ -4,7 +4,8 @@ from django.utils.safestring import mark_safe
 from whoosh.writing import AsyncWriter
 
 from . import index
-from .models import Correspondent, Document, DocumentType, Log, Tag
+from .models import Correspondent, Document, DocumentType, Log, Tag, \
+    SavedView, SavedViewFilterRule
 
 
 class CorrespondentAdmin(admin.ModelAdmin):
@@ -131,8 +132,22 @@ class LogAdmin(admin.ModelAdmin):
     list_display_links = ("created", "message")
 
 
+class RuleInline(admin.TabularInline):
+    model = SavedViewFilterRule
+
+
+class SavedViewAdmin(admin.ModelAdmin):
+
+    list_display = ("name", "user")
+
+    inlines = [
+        RuleInline
+    ]
+
+
 admin.site.register(Correspondent, CorrespondentAdmin)
 admin.site.register(Tag, TagAdmin)
 admin.site.register(DocumentType, DocumentTypeAdmin)
 admin.site.register(Document, DocumentAdmin)
 admin.site.register(Log, LogAdmin)
+admin.site.register(SavedView, SavedViewAdmin)

src/documents/checks.py

@@ -2,6 +2,7 @@ import textwrap
 
 from django.conf import settings
 from django.core.checks import Error, register
+from django.core.exceptions import FieldError
 from django.db.utils import OperationalError, ProgrammingError
 
 from documents.signals import document_consumer_declaration
@@ -16,7 +17,7 @@ def changed_password_check(app_configs, **kwargs):
     try:
         encrypted_doc = Document.objects.filter(
             storage_type=Document.STORAGE_TYPE_GPG).first()
-    except (OperationalError, ProgrammingError):
+    except (OperationalError, ProgrammingError, FieldError):
         return []  # No documents table yet
 
     if encrypted_doc:

src/documents/file_handling.py

@@ -8,6 +8,12 @@ from django.conf import settings
 from django.template.defaultfilters import slugify
 
 
+class defaultdictNoStr(defaultdict):
+
+    def __str__(self):
+        raise ValueError("Don't use {tags} directly.")
+
+
 def create_source_path_directory(source_path):
     os.makedirs(os.path.dirname(source_path), exist_ok=True)
 
@@ -90,8 +96,13 @@ def generate_filename(doc, counter=0):
 
     try:
         if settings.PAPERLESS_FILENAME_FORMAT is not None:
-            tags = defaultdict(lambda: slugify(None),
+            tags = defaultdictNoStr(lambda: slugify(None),
-                               many_to_dictionary(doc.tags))
+                                    many_to_dictionary(doc.tags))
+
+            tag_list = pathvalidate.sanitize_filename(
+                ",".join([tag.name for tag in doc.tags.all()]),
+                replacement_text="-"
+            )
 
             if doc.correspondent:
                 correspondent = pathvalidate.sanitize_filename(
@@ -114,14 +125,18 @@ def generate_filename(doc, counter=0):
                 document_type=document_type,
                 created=datetime.date.isoformat(doc.created),
                 created_year=doc.created.year if doc.created else "none",
-                created_month=doc.created.month if doc.created else "none",
+                created_month=f"{doc.created.month:02}" if doc.created else "none",  # NOQA: E501
-                created_day=doc.created.day if doc.created else "none",
+                created_day=f"{doc.created.day:02}" if doc.created else "none",
                 added=datetime.date.isoformat(doc.added),
                 added_year=doc.added.year if doc.added else "none",
-                added_month=doc.added.month if doc.added else "none",
+                added_month=f"{doc.added.month:02}" if doc.added else "none",
-                added_day=doc.added.day if doc.added else "none",
+                added_day=f"{doc.added.day:02}" if doc.added else "none",
                 tags=tags,
-            )
+                tag_list=tag_list
+            ).strip()
+
+            path = path.strip(os.sep)
+
     except (ValueError, KeyError, IndexError):
         logging.getLogger(__name__).warning(
             f"Invalid PAPERLESS_FILENAME_FORMAT: "

src/documents/management/commands/document_renamer.py

@@ -2,6 +2,7 @@ import logging
 
 import tqdm
 from django.core.management.base import BaseCommand
+from django.db.models.signals import post_save
 
 from documents.models import Document
 from ...mixins import Renderable
@@ -24,5 +25,4 @@ class Command(Renderable, BaseCommand):
         logging.getLogger().handlers[0].level = logging.ERROR
 
         for document in tqdm.tqdm(Document.objects.all()):
-            # Saving the document again will generate a new filename and rename
+            post_save.send(Document, instance=document)
-            document.save()

src/documents/migrations/1007_savedview_savedviewfilterrule.py

@@ -0,0 +1,37 @@
+# Generated by Django 3.1.4 on 2020-12-12 14:41
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('documents', '1006_auto_20201208_2209'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='SavedView',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=128)),
+                ('show_on_dashboard', models.BooleanField()),
+                ('show_in_sidebar', models.BooleanField()),
+                ('sort_field', models.CharField(max_length=128)),
+                ('sort_reverse', models.BooleanField(default=False)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='SavedViewFilterRule',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('rule_type', models.PositiveIntegerField(choices=[(0, 'Title contains'), (1, 'Content contains'), (2, 'ASN is'), (3, 'Correspondent is'), (4, 'Document type is'), (5, 'Is in inbox'), (6, 'Has tag'), (7, 'Has any tag'), (8, 'Created before'), (9, 'Created after'), (10, 'Created year is'), (11, 'Created month is'), (12, 'Created day is'), (13, 'Added before'), (14, 'Added after'), (15, 'Modified before'), (16, 'Modified after'), (17, 'Does not have tag')])),
+                ('value', models.CharField(max_length=128)),
+                ('saved_view', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='filter_rules', to='documents.savedview')),
+            ],
+        ),
+    ]

src/documents/migrations/1008_auto_20201216_1736.py

@@ -0,0 +1,34 @@
+# Generated by Django 3.1.4 on 2020-12-16 17:36
+
+from django.db import migrations
+import django.db.models.functions.text
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('documents', '1007_savedview_savedviewfilterrule'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='correspondent',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+        migrations.AlterModelOptions(
+            name='document',
+            options={'ordering': ('-created',)},
+        ),
+        migrations.AlterModelOptions(
+            name='documenttype',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+        migrations.AlterModelOptions(
+            name='savedview',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+        migrations.AlterModelOptions(
+            name='tag',
+            options={'ordering': (django.db.models.functions.text.Lower('name'),)},
+        ),
+    ]

src/documents/models.py

@@ -9,9 +9,10 @@ import pathvalidate
 
 import dateutil.parser
 from django.conf import settings
+from django.contrib.auth.models import User
 from django.db import models
+from django.db.models.functions import Lower
 from django.utils import timezone
-from django.utils.text import slugify
 
 from documents.file_handling import archive_name_from_filename
 from documents.parsers import get_default_file_extension
@@ -60,7 +61,7 @@ class MatchingModel(models.Model):
 
     class Meta:
         abstract = True
-        ordering = ("name",)
+        ordering = (Lower("name"),)
 
     def __str__(self):
         return self.name
@@ -78,9 +79,6 @@ class Correspondent(MatchingModel):
     # better safe than sorry.
     SAFE_REGEX = re.compile(r"^[\w\- ,.']+$")
 
-    class Meta:
-        ordering = ("name",)
-
 
 class Tag(MatchingModel):
 
@@ -204,7 +202,7 @@ class Document(models.Model):
     )
 
     class Meta:
-        ordering = ("correspondent", "title")
+        ordering = ("-created",)
 
     def __str__(self):
         created = datetime.date.isoformat(self.created)
@@ -220,7 +218,7 @@ class Document(models.Model):
         else:
             fname = "{:07}{}".format(self.pk, self.file_type)
             if self.storage_type == self.STORAGE_TYPE_GPG:
-                fname += ".gpg"
+                fname += ".gpg"  # pragma: no cover
 
         return os.path.join(
             settings.ORIGINALS_DIR,
@@ -305,6 +303,55 @@ class Log(models.Model):
         return self.message
 
 
+class SavedView(models.Model):
+
+    class Meta:
+
+        ordering = (Lower("name"),)
+
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    name = models.CharField(max_length=128)
+
+    show_on_dashboard = models.BooleanField()
+    show_in_sidebar = models.BooleanField()
+
+    sort_field = models.CharField(max_length=128)
+    sort_reverse = models.BooleanField(default=False)
+
+
+class SavedViewFilterRule(models.Model):
+    RULE_TYPES = [
+        (0, "Title contains"),
+        (1, "Content contains"),
+        (2, "ASN is"),
+        (3, "Correspondent is"),
+        (4, "Document type is"),
+        (5, "Is in inbox"),
+        (6, "Has tag"),
+        (7, "Has any tag"),
+        (8, "Created before"),
+        (9, "Created after"),
+        (10, "Created year is"),
+        (11, "Created month is"),
+        (12, "Created day is"),
+        (13, "Added before"),
+        (14, "Added after"),
+        (15, "Modified before"),
+        (16, "Modified after"),
+        (17, "Does not have tag"),
+    ]
+
+    saved_view = models.ForeignKey(
+        SavedView,
+        on_delete=models.CASCADE,
+        related_name="filter_rules"
+    )
+
+    rule_type = models.PositiveIntegerField(choices=RULE_TYPES)
+
+    value = models.CharField(max_length=128)
+
+
 # TODO: why is this in the models file?
 class FileInfo:
 

src/documents/parsers.py

@@ -163,8 +163,6 @@ def parse_date(filename, text):
 
     date = None
 
-    next_year = timezone.now().year + 5  # Arbitrary 5 year future limit
-
     # if filename date parsing is enabled, search there first:
     if settings.FILENAME_DATE_ORDER:
         for m in re.finditer(DATE_REGEX, filename):
@@ -176,7 +174,7 @@ def parse_date(filename, text):
                 # Skip all matches that do not parse to a proper date
                 continue
 
-            if date is not None and next_year > date.year > 1900:
+            if date and date.year > 1900 and date <= timezone.now():
                 return date
 
     # Iterate through all regex matches in text and try to parse the date
@@ -189,7 +187,7 @@ def parse_date(filename, text):
             # Skip all matches that do not parse to a proper date
             continue
 
-        if date is not None and next_year > date.year > 1900:
+        if date and date.year > 1900 and date <= timezone.now():
             break
         else:
             date = None
@@ -210,6 +208,7 @@ class DocumentParser(LoggingMixin):
     def __init__(self, logging_group):
         super().__init__()
         self.logging_group = logging_group
+        os.makedirs(settings.SCRATCH_DIR, exist_ok=True)
         self.tempdir = tempfile.mkdtemp(
             prefix="paperless-", dir=settings.SCRATCH_DIR)
 
@@ -217,6 +216,9 @@ class DocumentParser(LoggingMixin):
         self.text = None
         self.date = None
 
+    def extract_metadata(self, document_path, mime_type):
+        return []
+
     def parse(self, document_path, mime_type):
         raise NotImplementedError()
 

src/documents/serialisers.py

@@ -1,10 +1,10 @@
 import magic
 from django.utils.text import slugify
-from pathvalidate import validate_filename, ValidationError
 from rest_framework import serializers
 from rest_framework.fields import SerializerMethodField
 
-from .models import Correspondent, Tag, Document, Log, DocumentType
+from .models import Correspondent, Tag, Document, Log, DocumentType, \
+    SavedView, SavedViewFilterRule
 from .parsers import is_mime_type_supported
 
 
@@ -141,6 +141,45 @@ class LogSerializer(serializers.ModelSerializer):
         )
 
 
+class SavedViewFilterRuleSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = SavedViewFilterRule
+        fields = ["rule_type", "value"]
+
+
+class SavedViewSerializer(serializers.ModelSerializer):
+
+    filter_rules = SavedViewFilterRuleSerializer(many=True)
+
+    class Meta:
+        model = SavedView
+        depth = 1
+        fields = ["id", "name", "show_on_dashboard", "show_in_sidebar",
+                  "sort_field", "sort_reverse", "filter_rules"]
+
+    def update(self, instance, validated_data):
+        if 'filter_rules' in validated_data:
+            rules_data = validated_data.pop('filter_rules')
+        else:
+            rules_data = None
+        super(SavedViewSerializer, self).update(instance, validated_data)
+        if rules_data is not None:
+            SavedViewFilterRule.objects.filter(saved_view=instance).delete()
+            for rule_data in rules_data:
+                SavedViewFilterRule.objects.create(
+                    saved_view=instance, **rule_data)
+        return instance
+
+    def create(self, validated_data):
+        rules_data = validated_data.pop('filter_rules')
+        saved_view = SavedView.objects.create(**validated_data)
+        for rule_data in rules_data:
+            SavedViewFilterRule.objects.create(
+                saved_view=saved_view, **rule_data)
+        return saved_view
+
+
 class PostDocumentSerializer(serializers.Serializer):
 
     document = serializers.FileField(
@@ -179,12 +218,6 @@ class PostDocumentSerializer(serializers.Serializer):
     )
 
     def validate_document(self, document):
-
-        try:
-            validate_filename(document.name)
-        except ValidationError:
-            raise serializers.ValidationError("Invalid filename.")
-
         document_data = document.file.read()
         mime_type = magic.from_buffer(document_data, mime=True)