changelog and versions

Mobile Improvements for "Quick Filters" (2)

README.md

@@ -7,7 +7,7 @@
 
 [Paperless](https://github.com/the-paperless-project/paperless) is an application by Daniel Quinn and others that indexes your scanned documents and allows you to easily search for documents and store metadata alongside your documents.
 
-Paperless-ng is a fork of the original project, adding a new interface and many other changes under the hood. For a detailed list of changes, see below.
+Paperless-ng is a fork of the original project, adding a new interface and many other changes under the hood. For a detailed list of changes, have a look at the changelog in the documentation.
 
 This project is still in development and some things may not work as expected.
 
@@ -15,11 +15,13 @@ This project is still in development and some things may not work as expected.
 
 Paperless does not control your scanner, it only helps you deal with what your scanner produces.
 
-1. Buy a document scanner that can write to a place on your network.  If you need some inspiration, have a look at the [scanner recommendations](https://paperless-ng.readthedocs.io/en/latest/scanners.html) page.
-2. Set it up to "scan to FTP" or something similar. It should be able to push scanned images to a server without you having to do anything.  Of course if your scanner doesn't know how to automatically upload the file somewhere, you can always do that manually. Paperless doesn't care how the documents get into its local consumption directory.
-3. Have the target server run the Paperless consumption script to OCR the file and index it into a local database.
-4. Use the web frontend to sift through the database and find what you want.
-5. Download the PDF you need/want via the web interface and do whatever you like with it.  You can even print it and send it as if it's the original. In most cases, no one will care or notice.
+1. Buy a document scanner that can write to a place on your network.  If you need some inspiration, have a look at the [scanner recommendations](https://paperless-ng.readthedocs.io/en/latest/scanners.html) page. Set it up to "scan to FTP" or something similar. It should be able to push scanned images to a server without you having to do anything.  Of course if your scanner doesn't know how to automatically upload the file somewhere, you can always do that manually. Paperless doesn't care how the documents get into its local consumption directory.
+
+	- Alternatively, you can use any of the mobile scanning apps out there. We have an app that allows you to share documents with paperless, if you're on Android. See the section on affiliated projects.
+
+2. Wait for paperless to process your files. OCR is expensive, and depending on the power of your machine, this might take a bit of time.
+3. Use the web frontend to sift through the database and find what you want.
+4. Download the PDF you need/want via the web interface and do whatever you like with it.  You can even print it and send it as if it's the original. In most cases, no one will care or notice.
 
 Here's what you get:
 
@@ -28,6 +30,7 @@ Here's what you get:
 # Features
 
 * Performs OCR on your documents, adds selectable text to image only documents and adds tags, correspondents and document types to your documents.
+* Paperless stores your documents plain on disk. Filenames and folders are managed by paperless and can be configured freely.
 * Single page application front end. Should be pretty snappy. Will be mobile friendly in the future.
 	* Includes a dashboard that shows basic statistics and has document upload.
 	* Filtering by tags, correspondents, types, and more.
@@ -38,7 +41,6 @@ Here's what you get:
 	* When adding documents from mails, paperless can move these mails to a new folder, mark them as read, flag them or delete them.
 * Machine learning powered document matching.
 	* Paperless learns from your documents and will be able to automatically assign tags, correspondents and types to documents once you've stored a few documents in paperless.
-* We have a mobile app that offers a 'Share with paperless' option over at https://github.com/qcasey/paperless_share. You can use that in combination with any of the mobile scanning apps out there. It's still a little rough around the edges, but it works!
 * A task processor that processes documents in parallel and also tells you when something goes wrong. On modern multi core systems, consumption is blazing fast.
 * Code cleanup in many, MANY areas. Some of the code from OG paperless was just overly complicated.
 * More tests, more stability.
@@ -77,7 +79,7 @@ The recommended way to deploy paperless is docker-compose. Don't clone the repos
 
 Read the [documentation](https://paperless-ng.readthedocs.io/en/latest/setup.html#installation) on how to get started.
 
-Alternatively, you can install the dependencies and setup apache and a database server yourself. The documenation has information about the individual components of paperless that you need to take care of.
+Alternatively, you can install the dependencies and setup apache and a database server yourself. The documenation has a step by step guide on how to do it.
 
 # Migrating to paperless-ng
 
@@ -101,13 +103,15 @@ If you want to implement something big: Please start a discussion about that in
 
 Paperless has been around a while now, and people are starting to build stuff on top of it.  If you're one of those people, we can add your project to this list:
 
-* [Paperless App](https://github.com/bauerj/paperless_app): An Android/iOS app for Paperless. We're working on making this compatible.
+* [Paperless App](https://github.com/bauerj/paperless_app): An Android/iOS app for Paperless. Updated to work with paperless-ng.
+* [Paperless Share](https://github.com/qcasey/paperless_share). Share any files from your Android application with paperless. Very simple, but works with all of the mobile scanning apps out there that allow you to share scanned documents.
+
+These projects also exist, but their status and compatibility with paperless-ng is unknown.
+
 * [Paperless Desktop](https://github.com/thomasbrueggemann/paperless-desktop): A desktop UI for your Paperless installation.  Runs on Mac, Linux, and Windows.
 * [ansible-role-paperless](https://github.com/ovv/ansible-role-paperless): An easy way to get Paperless running via Ansible.
 * [paperless-cli](https://github.com/stgarf/paperless-cli): A golang command line binary to interact with a Paperless instance.
 
-Compatibility with Paperless-ng is unknown.
-
 # Important Note
 
 Document scanners are typically used to scan sensitive documents.  Things like your social insurance number, tax records, invoices, etc.  Everything is stored in the clear without encryption by default (it needs to be searchable, so if someone has ideas on how to do that on encrypted data, I'm all ears).  This means that Paperless should never be run on an untrusted host.  Instead, I recommend that if you do want to use it, run it locally on a server in your own home.

docker/hub/docker-compose.postgres.yml

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

docker/hub/docker-compose.sqlite.yml

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

docs/advanced_usage.rst

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

docs/changelog.rst

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

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()'>
-            <a class="nav-link text-truncate" routerLink="view/{{config.id}}" routerLinkActive="active" (click)="closeMenu()">
+          <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">
+            <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="message2">{{message2}}</p>
+      <p *ngIf="messageBold"><b>{{messageBold}}</b></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', () => {
-  let component: DeleteDialogComponent;
-  let fixture: ComponentFixture<DeleteDialogComponent>;
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent;
+  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 { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Directive, Input, OnInit } from '@angular/core';
+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 { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
-import { environment } from 'src/environments/environment';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
+import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 
 
 @Component({
@@ -12,15 +11,15 @@ import { environment } from 'src/environments/environment';
 export class DashboardComponent implements OnInit {
 
   constructor(
-    public savedViewConfigService: SavedViewConfigService,
-    private titleService: Title) { }
+    private savedViewService: SavedViewService) { }
 
 
-  savedViews = []
+  savedViews: PaperlessSavedView[] = []
 
   ngOnInit(): void {
-    this.savedViews = this.savedViewConfigService.getDashboardConfigs()
-    this.titleService.setTitle(`Dashboard - ${environment.appTitle}`)
+    this.savedViewService.listAll().subscribe(results => {
+      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">
-                            <button type="button" class="btn btn-outline-secondary btn-sm mr-2"
-                                (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>
+                        <app-metadata-collapse title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></app-metadata-collapse>
+                        <app-metadata-collapse title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></app-metadata-collapse>
 
                     </ng-template>
                 </li>
@@ -171,11 +126,9 @@
         </form>
     </div>
 
-    <div class="col-xl d-none d-xl-block document-preview">
-        <object [data]="previewUrl | safe" type="application/pdf" width="100%" height="100%">
-            <p>Your browser does not support PDFs.
-                <a href="previewUrl">Download the PDF</a>.</p>
-        </object>
-
+    <div class="col-md-6 col-xl-8 mb-3">
+      <div class="pdf-viewer-container" *ngIf="getContentType() == 'application/pdf'">
+        <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true"></pdf-viewer>
+      </div>
     </div>
-</div>
+</div>

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

@@ -1,5 +1,6 @@
-.document-preview {
-  height: calc(100vh - 180px);
+.pdf-viewer-container {
+  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 { DeleteDialogComponent } from '../common/delete-dialog/delete-dialog.component';
+import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-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'})
-    modal.componentInstance.message = `Do you really want to delete document '${this.document.title}'?`
-    modal.componentInstance.message2 = `The files for this document will be deleted permanently. This operation cannot be undone.`
-    modal.componentInstance.deleteClicked.subscribe(() => {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = "Confirm delete"
+    modal.componentInstance.messageBold = `Do you really want to delete document '${this.document.title}'?`
+    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>
-      <div class="dropdown-menu" ngbDropdownMenu class="shadow">
-        <ng-container *ngIf="!list.savedViewId" >
-          <button ngbDropdownItem *ngFor="let config of savedViewConfigService.getConfigs()" (click)="loadViewConfig(config)">{{config.title}}</button>
-          <div class="dropdown-divider" *ngIf="savedViewConfigService.getConfigs().length > 0"></div>
+      <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle>Views</button>
+      <div class="dropdown-menu shadow" ngbDropdownMenu>
+        <ng-container *ngIf="!list.savedViewId">
+          <button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view)">{{view.name}}</button>
+          <div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
         </ng-container>
-        
+
         <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId">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="card-body">
-    <h5 class="card-title">Filter</h5>
-    <app-filter-editor [(filterRules)]="filterRules" (apply)="applyFilterRules()" (clear)="clearFilterRules()"></app-filter-editor>
-  </div>
+<div class="w-100 mb-2 mb-sm-4">
+  <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
 </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>
-        <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>
+        <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
+        <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="clickTag(t.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 { Title } from '@angular/platform-browser';
-import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { cloneFilterRules, FilterRule } from 'src/app/data/filter-rule';
-import { FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
-import { SavedViewConfig } from 'src/app/data/saved-view-config';
+import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 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,
-    private titleService: Title) { }
+    public modalService: NgbModal) { }
+
+  @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.filterRules = this.list.filterRules
-        this.showFilter = false
-        this.titleService.setTitle(`${this.list.savedView.title} - ${environment.appTitle}`)
+        this.savedViewService.getCached(+params.get('id')).subscribe(view => {
+          if (!view) {
+            this.router.navigate(["404"])
+            return
+          }
+
+          this.list.savedView = view
+          this.list.reload()
+        })
       } else {
         this.list.savedView = null
-        this.filterRules = this.list.filterRules
-        this.showFilter = this.filterRules.length > 0
-        this.titleService.setTitle(`Documents - ${environment.appTitle}`)
+        this.list.reload()
       }
-      this.list.clear()
-      this.list.reload()
     })
   }
 
-  applyFilterRules() {
-    this.list.filterRules = this.filterRules
-  }
 
-  clearFilterRules() {
-    this.list.filterRules = this.filterRules
-    this.showFilter = false
-  }
-
-  loadViewConfig(config: SavedViewConfig) {
-    this.filterRules = cloneFilterRules(config.filterRules)
-    this.list.load(config)
+  loadViewConfig(view: PaperlessSavedView) {
+    this.list.load(view)
+    this.list.reload()
   }
 
   saveViewConfig() {
-    this.savedViewConfigService.updateConfig(this.list.savedView)
-    this.toastService.showToast(Toast.make("Information", `View "${this.list.savedView.title}" saved successfully.`))
+    this.savedViewService.update(this.list.savedView).subscribe(result => {
+      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({
-        title: formValue.title,
-        showInDashboard: formValue.showInDashboard,
-        showInSideBar: formValue.showInSideBar,
-        filterRules: this.list.filterRules,
-        sortDirection: this.list.sortDirection,
-        sortField: this.list.sortField
+      let savedView = {
+        name: formValue.name,
+        show_on_dashboard: formValue.showOnDashboard,
+        show_in_sidebar: formValue.showInSideBar,
+        filter_rules: this.list.filterRules,
+        sort_reverse: this.list.sortReverse,
+        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) {
-    let filterRules = this.list.filterRules
-    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()
+  clickTag(tagID: number) {
+    this.filterEditor.toggleTag(tagID)
   }
 
-  filterByCorrespondent(correspondent_id: number) {
-    let filterRules = this.list.filterRules
-    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()
+  clickCorrespondent(correspondentID: number) {
+    this.filterEditor.toggleCorrespondent(correspondentID)
   }
 
-  filterByDocumentType(document_type_id: number) {
-    let filterRules = this.list.filterRules
-    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()
+  clickDocumentType(documentTypeID: number) {
+    this.filterEditor.toggleDocumentType(documentTypeID)
   }
 
 }

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="col-md-3 col-form-label">
-    <span>{{rule.type.name}}</span>
-  </div>
-  <div class="col">
-    <input *ngIf="rule.type.datatype == 'string'" type="text" class="form-control form-control-sm" [(ngModel)]="rule.value">
-    <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 class="row">
+   <div class="col mb-2 mb-xl-0">
+     <div class="form-inline d-flex">
+         <label class="text-muted mr-2">Filter by:</label>
+         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title">
+     </div>
   </div>
+  <div class="w-100 d-xl-none"></div>
+   <div class="col col-xl-auto mb-2 mb-xl-0">
+     <div class="d-flex">
+       <app-filter-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
+       <app-filter-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
+       <app-filter-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
+       <app-filter-dropdown-date class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
+       <app-filter-dropdown-date [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added"  (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
+     </div>
+   </div>
+   <div class="w-100 d-xl-none"></div>
+   <div class="col col-xl-auto mb-2 mb-xl-0">
+     <button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
+       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+       </svg>
+       Clear all filters
+     </button>
+   </div>
 </div>

src-ui/src/app/components/filter-editor/filter-editor.component.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 { FilterRule } from 'src/app/data/filter-rule';
-import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
-import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { TagService } from 'src/app/services/rest/tag.service';
-
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { FilterRule } from 'src/app/data/filter-rule';
+import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type';
+import { DateSelection } from './filter-dropdown-date/filter-dropdown-date.component';
 
 @Component({
   selector: 'app-filter-editor',
   templateUrl: './filter-editor.component.html',
   styleUrls: ['./filter-editor.component.scss']
 })
-export class FilterEditorComponent implements OnInit {
+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()
-  clear = new EventEmitter()
+        case FILTER_DOCUMENT_TYPE:
+          return `Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
 
-  @Input()
-  filterRules: FilterRule[] = []
+        case FILTER_HAS_TAG:
+          return `Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
 
-  @Output()
-  apply = new EventEmitter()
+      }
+    }
 
-  selectedRuleType: FilterRuleType = FILTER_RULE_TYPES[0]
-
-  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
+    return ""
   }
 
-  removeRuleClicked(rule) {
-    let index = this.filterRules.findIndex(r => r == rule)
-    if (index > -1) {
-      this.filterRules.splice(index, 1)
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService,
+    private dateParser: NgbDateParserFormatter
+  ) { }
+
+  tags: PaperlessTag[] = []
+  correspondents: PaperlessCorrespondent[]
+  documentTypes: PaperlessDocumentType[] = []
+
+  @Input()
+  filterRules: FilterRule[]
+
+  @Output()
+  filterRulesChange = new EventEmitter<FilterRule[]>()
+  
+  hasFilters() {
+    return this.filterRules.length > 0
+  }
+
+  get selectedTags(): PaperlessTag[] {
+    let tagRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_HAS_TAG)
+    return this.tags?.filter(t => tagRules.find(tr => +tr.value == t.id))
+  }
+
+  get selectedCorrespondents(): PaperlessCorrespondent[] {
+    let correspondentRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_CORRESPONDENT)
+    return this.correspondents?.filter(c => correspondentRules.find(cr => +cr.value == c.id))
+  }
+
+  get selectedDocumentTypes(): PaperlessDocumentType[] {
+    let documentTypeRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_DOCUMENT_TYPE)
+    return this.documentTypes?.filter(dt => documentTypeRules.find(dtr => +dtr.value == dt.id))
+  }
+
+  get titleFilter() {
+    let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
+    return existingRule ? existingRule.value : ''
+  }
+
+  set titleFilter(value) {
+    this.titleFilterDebounce.next(value)
+  }
+
+  titleFilterDebounce: Subject<string>
+  subscription: Subscription
+
+  ngOnInit() {
+    this.tagService.listAll().subscribe(result => this.tags = result.results)
+    this.correspondentService.listAll().subscribe(result => this.correspondents = result.results)
+    this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
+
+    this.titleFilterDebounce = new Subject<string>()
+
+    this.subscription = this.titleFilterDebounce.pipe(
+      debounceTime(400),
+      distinctUntilChanged()
+    ).subscribe(title => {
+      this.setTitleRule(title)
+    })
+  }
+
+  ngOnDestroy() {
+    this.titleFilterDebounce.complete()
+    // TODO: not sure if both is necessary
+    this.subscription.unsubscribe()
+  }
+
+  applyFilters() {
+    this.filterRulesChange.next(this.filterRules)
+  }
+
+  clearSelected() {
+    this.filterRules = []
+    this.applyFilters()
+  }
+
+  private toggleFilterRule(filterRuleTypeID: number, value: number) {
+
+    let filterRuleType = FILTER_RULE_TYPES.find(t => t.id == filterRuleTypeID)
+
+    let existingRule = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID && rule.value == value?.toString())
+    let existingRuleOfSameType = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID)
+    
+    if (existingRule) {
+      // if this exact rule already exists, remove it in all cases.
+      this.filterRules.splice(this.filterRules.indexOf(existingRule), 1)
+    } else if (filterRuleType.multi || !existingRuleOfSameType) {
+      // if we allow multiple rules per type, or no rule of this type already exists, push a new rule.
+      this.filterRules.push({rule_type: filterRuleTypeID, value: value?.toString()})
+    } else {
+      // otherwise (i.e., no multi support AND there's already a rule of this type), update the rule.
+      existingRuleOfSameType.value = value?.toString()
+    }
+    this.applyFilters()
+  }
+
+  private setTitleRule(title: string) {
+    let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
+
+    if (!existingRule && title) {
+      this.filterRules.push({rule_type: FILTER_TITLE, value: title})
+    } else if (existingRule && !title) {
+      this.filterRules.splice(this.filterRules.findIndex(rule => rule.rule_type == FILTER_TITLE), 1)
+    } else if (existingRule && title) {
+      existingRule.value = title
+    }
+    this.applyFilters()
+  }
+
+  toggleTag(tagId: number) {
+    this.toggleFilterRule(FILTER_HAS_TAG, tagId)
+  }
+
+  toggleCorrespondent(correspondentId: number) {
+    this.toggleFilterRule(FILTER_CORRESPONDENT, correspondentId)
+  }
+
+  toggleDocumentType(documentTypeId: number) {
+    this.toggleFilterRule(FILTER_DOCUMENT_TYPE, documentTypeId)
+  }
+
+
+
+  // Date handling
+
+
+  onDatesCreatedSet(dates: DateSelection) {
+    this.setDateCreatedBefore(dates.before)
+    this.setDateCreatedAfter(dates.after)
+    this.applyFilters()
+  }
+
+  onDatesAddedSet(dates: DateSelection) {
+    this.setDateAddedBefore(dates.before)
+    this.setDateAddedAfter(dates.after)
+    this.applyFilters()
+  }
+
+  get dateCreatedBefore(): 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() {
-    this.apply.next()
-  }
-
-  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))
+  clearDateFilter(dateRuleTypeID: number) {
+    let ruleIndex = this.filterRules.findIndex(rule => rule.rule_type == dateRuleTypeID)
+    if (ruleIndex != -1) {
+      this.filterRules.splice(ruleIndex, 1)
+    }
   }
 
 }

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

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

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 { Title } from '@angular/platform-browser';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_DOCUMENT_TYPE } from 'src/app/data/filter-rule-type';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
-import { 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 {
-    super.ngOnInit()
-    this.titleService.setTitle(`Document types - ${environment.appTitle}`)
+  filterDocuments(object: PaperlessDocumentType) {
+    this.list.documentListView.filter_rules = [
+      {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'})
-    activeModal.componentInstance.message = `Do you really want to delete ${this.getObjectName(object)}?`
-    activeModal.componentInstance.message2 = "Associated documents will not be deleted."
-    activeModal.componentInstance.deleteClicked.subscribe(() => {
+    var activeModal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    activeModal.componentInstance.title = "Confirm delete"
+    activeModal.componentInstance.messageBold = `Do you really want to delete ${this.getObjectName(object)}?`
+    activeModal.componentInstance.message = "Associated documents will not be deleted."
+    activeModal.componentInstance.btnClass = "btn-danger"
+    activeModal.componentInstance.btnCaption = "Delete"
+    activeModal.componentInstance.confirmClicked.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">
-          <thead>
-            <tr>
-              <th scope="col">Title</th>
-              <th scope="col">Show in dashboard</th>
-              <th scope="col">Show in sidebar</th>
-              <th scope="col">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let config of savedViewConfigService.getConfigs()">
-              <td>{{ config.title }}</td>
-              <td>{{ config.showInDashboard | yesno }}</td>
-              <td>{{ config.showInSideBar | yesno }}</td>
-              <td><button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteViewConfig(config)">Delete</button></td>
-            </tr>
-          </tbody>
-        </table>
+        <div formGroupName="savedViews">
+          
+            <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="form-row">
+              <div class="form-group col-4 mr-3">
+                <label for="name_{{view.id}}">Name</label>
+                <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
+              </div>
+
+              <div class="form-group col-auto mr-3">
+                <label for="show_on_dashboard_{{view.id}}">Appears on</label>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
+                  <label class="custom-control-label" for="show_on_dashboard_{{view.id}}">Show on dashboard</label>
+                </div>
+                <div class="custom-control custom-switch">
+                  <input type="checkbox" class="custom-control-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
+                  <label class="custom-control-label" for="show_in_sidebar_{{view.id}}">Show in sidebar</label>
+                </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 { SavedViewConfig } from 'src/app/data/saved-view-config';
+import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 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 { environment } from 'src/environments/environment';
+import { SavedViewService } from 'src/app/services/rest/saved-view.service';
+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 {
-    this.titleService.setTitle(`Settings - ${environment.appTitle}`)
+  savedViews: PaperlessSavedView[]
+
+  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) {
-    this.savedViewConfigService.deleteConfig(config)
+  deleteSavedView(savedView: PaperlessSavedView) {
+    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)
-    this.documentListViewService.updatePageSize()
+    let x = []
+    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-danger" (click)="openDeleteDialog(tag)">Delete</button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="filterDocuments(tag)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+            </svg>
+            Documents
+          </button>
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+            </svg>
+            Edit
+          </button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete
+          </button>
         </div>
       </td>
     </tr>

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

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { Title } from '@angular/platform-browser';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { FILTER_HAS_TAG } from 'src/app/data/filter-rule-type';
 import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { TagService } from 'src/app/services/rest/tag.service';
-import { 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_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_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_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
-  value: any
+  rule_type: number
+  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) {
-    this.view.filterRules = cloneFilterRules(config.filterRules)
-    this.view.sortDirection = config.sortDirection
-    this.view.sortField = config.sortField
-    this.reload()
+  load(view: PaperlessSavedView) {
+    this.documentListView.filter_rules = cloneFilterRules(view.filter_rules)
+    this.documentListView.sort_reverse = view.sort_reverse
+    this.documentListView.sort_field = view.sort_field
+    this.saveDocumentListView()
   }
 
   clear() {
@@ -93,9 +93,9 @@ export class DocumentListViewService {
     this.documentService.list(
       this.currentPage,
       this.currentPageSize,
-      this.view.sortField,
-      this.view.sortDirection,
-      this.view.filterRules).subscribe(
+      this.view.sort_field,
+      this.view.sort_reverse,
+      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) {
-    this.view.sortDirection = direction
+  set sortReverse(reverse: boolean) {
+    this.view.sort_reverse = reverse
     this.saveDocumentListView()
     this.reload()
   }
 
-  get sortDirection(): string {
-    return this.view.sortDirection
+  get sortReverse(): boolean {
+    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: [],
-        sortDirection: 'des',
-        sortField: 'created'
+        filter_rules: [],
+        sort_reverse: true,
+        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) {
-    if (sortField && sortDirection) {
-      return (sortDirection == 'des' ? '-' : '') + sortField
-    } else if (sortField) {
-      return sortField
+  private getOrderingQueryParam(sortField: string, sortReverse: boolean) {
+    if (sortField) {
+      return (sortReverse ? '-' : '') + 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) {
-          params[rule.type.filtervar] = params[rule.type.filtervar] ? params[rule.type.filtervar] + "," + rule.value : rule.value
+        let ruleType = FILTER_RULE_TYPES.find(t => t.id == rule.rule_type)
+        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>> {
-    return super.list(page, pageSize, sortField, sortDirection, this.filterRulesToQueryParams(filterRules)).pipe(
+  list(page?: number, pageSize?: number, sortField?: string, sortReverse?: boolean, filterRules?: FilterRule[]): Observable<Results<PaperlessDocument>> {
+    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.8"
 };

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):
@@ -68,7 +69,7 @@ class DocumentAdmin(admin.ModelAdmin):
 
     filter_horizontal = ("tags",)
 
-    ordering = ["-created", "correspondent"]
+    ordering = ["-created"]
 
     date_hierarchy = "created"
 
@@ -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),
-                               many_to_dictionary(doc.tags))
+            tags = defaultdictNoStr(lambda: slugify(None),
+                                    many_to_dictionary(doc.tags))
+
+            tag_list = pathvalidate.sanitize_filename(
+                ",".join([tag.name for tag in doc.tags.all()]),
+                replacement_text="-"
+            )
 
             if doc.correspondent:
                 correspondent = pathvalidate.sanitize_filename(
@@ -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_day=doc.created.day if doc.created else "none",
+                created_month=f"{doc.created.month:02}" if doc.created else "none",  # NOQA: E501
+                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_day=doc.added.day if doc.added else "none",
+                added_month=f"{doc.added.month:02}" if doc.added else "none",
+                added_day=f"{doc.added.day:02}" if doc.added else "none",
                 tags=tags,
-            )
+                tag_list=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/decrypt_documents.py

@@ -2,7 +2,6 @@ import os
 
 from django.conf import settings
 from django.core.management.base import BaseCommand, CommandError
-from termcolor import colored as coloured
 
 from documents.models import Document
 from paperless.db import GnuPG
@@ -26,16 +25,14 @@ class Command(BaseCommand):
     def handle(self, *args, **options):
 
         try:
-            print(coloured(
+            print(
                 "\n\nWARNING: This script is going to work directly on your "
                 "document originals, so\nWARNING: you probably shouldn't run "
                 "this unless you've got a recent backup\nWARNING: handy.  It "
                 "*should* work without a hitch, but be safe and backup your\n"
                 "WARNING: stuff first.\n\nHit Ctrl+C to exit now, or Enter to "
-                "continue.\n\n",
-                "yellow",
-                attrs=("bold",)
-            ))
+                "continue.\n\n"
+            )
             __ = input()
         except KeyboardInterrupt:
             return
@@ -57,8 +54,8 @@ class Command(BaseCommand):
 
         for document in encrypted_files:
 
-            print(coloured("Decrypting {}".format(
-                document).encode('utf-8'), "green"))
+            print("Decrypting {}".format(
+                document).encode('utf-8'))
 
             old_paths = [document.source_path, document.thumbnail_path]
 

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
-            document.save()
+            post_save.send(Document, instance=document)

src/documents/migrations/1003_mime_types.py

@@ -6,13 +6,17 @@ import magic
 from django.conf import settings
 from django.db import migrations, models
 
+from paperless.db import GnuPG
+
+STORAGE_TYPE_UNENCRYPTED = "unencrypted"
+STORAGE_TYPE_GPG = "gpg"
 
 def source_path(self):
     if self.filename:
         fname = str(self.filename)
     else:
         fname = "{:07}.{}".format(self.pk, self.file_type)
-        if self.storage_type == self.STORAGE_TYPE_GPG:
+        if self.storage_type == STORAGE_TYPE_GPG:
             fname += ".gpg"
 
     return os.path.join(
@@ -26,9 +30,18 @@ def add_mime_types(apps, schema_editor):
     documents = Document.objects.all()
 
     for d in documents:
-        d.mime_type = magic.from_file(source_path(d), mime=True)
+        f = open(source_path(d), "rb")
+        if d.storage_type == STORAGE_TYPE_GPG:
+
+            data = GnuPG.decrypted(f)
+        else:
+            data = f.read(1024)
+
+        d.mime_type = magic.from_buffer(data, mime=True)
         d.save()
 
+        f.close()
+
 
 def add_file_extensions(apps, schema_editor):
     Document = apps.get_model("documents", "Document")

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'),)},
+        ),
+    ]