bump versions

Improve mobile add to homes screen support

README.md

@@ -1,11 +1,12 @@
-[![Build Status](https://travis-ci.org/jonaswinkler/paperless-ng.svg?branch=master)](https://travis-ci.org/jonaswinkler/paperless-ng)
+[![Build Status](https://travis-ci.com/jonaswinkler/paperless-ng.svg?branch=master)](https://travis-ci.com/jonaswinkler/paperless-ng)
 [![Documentation Status](https://readthedocs.org/projects/paperless-ng/badge/?version=latest)](https://paperless-ng.readthedocs.io/en/latest/?badge=latest)
+[![Gitter](https://badges.gitter.im/paperless-ng/community.svg)](https://gitter.im/paperless-ng/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Docker Hub Pulls](https://img.shields.io/docker/pulls/jonaswinkler/paperless-ng.svg)](https://hub.docker.com/r/jonaswinkler/paperless-ng)
 [![Coverage Status](https://coveralls.io/repos/github/jonaswinkler/paperless-ng/badge.svg?branch=master)](https://coveralls.io/github/jonaswinkler/paperless-ng?branch=master)
 
 # Paperless-ng
 
-[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](https://github.com/the-paperless-project/paperless) is an application by Daniel Quinn and contributors 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, have a look at the changelog in the documentation.
 
@@ -35,15 +36,17 @@ Here's what you get:
 	* Includes a dashboard that shows basic statistics and has document upload.
 	* Filtering by tags, correspondents, types, and more.
 	* Customizable views can be saved and displayed on the dashboard.
-	* Full text search with auto completion, scored results and query highlighting allows you to quickly find what you need.
+* Full text search helps you find what you need.
+	* Auto completion suggests relevant words from your documents.
+	* Results are sorted by relevance to your search query.
+	* Highlighting shows you which parts of the document matched the query.
+	* Searching for similar documents ("More like this")
 * Email processing: Paperless adds documents from your email accounts.
 	* Configure multiple accounts and filters for each account.
 	* 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.
 * 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.
 
 If you want to see some screenshots of paperless-ng in action, [some are available in the documentation](https://paperless-ng.readthedocs.io/en/latest/screenshots.html).
 
@@ -52,27 +55,37 @@ For a complete list of changes from paperless, check out the [changelog](https:/
 # Roadmap for 1.0
 
 - Make the front end nice (except mobile).
-- Test coverage at 90%.
 - Fix whatever bugs I and you find.
 
 ## Roadmap for versions beyond 1.0
 
 These are things that I want to add to paperless eventually. They are sorted by priority.
 
-- **Bulk editing**. Add/remove metadata from multiple documents at once.
 - **More search.** The search backend is incredibly versatile and customizable. Searching is the most important feature of this project and thus, I want to implement things like:
   - Group and limit search results by correspondent, show “more from this” links in the results.
-  - Ability to search for “Similar documents” in the search results
 - **Nested tags**. Organize tags in a hierarchical structure. This will combine the benefits of folders and tags in one coherent system.
+- **Localization.** I won't translate paperless into any other languages except English and German, however, I'll add the necessary means so that anyone can translate paperless into their favorite language.
 - **An interactive consumer** that shows its progress for documents it processes on the web page.
-	- With live updates ans websockets. This already works on a dev branch, but requires a lot of new dependencies, which I'm not particular happy about.
+	- With live updates and websockets. This already works on a dev branch, but requires a lot of new dependencies, which I'm not particularly happy about.
 	- Notifications when a document was added with buttons to open the new document right away.
 - **Arbitrary tag colors**. Allow the selection of any color with a color picker.
+- **More file types**. Possibly allow more file types to be processed by paperless, such as office .odt, .doc and .docx documents.
+
+Apart from that, paperless is pretty much feature complete.
 
 ## On the chopping block.
 
 - **GnuPG encrypion.** [Here's a note about encryption in paperless](https://paperless-ng.readthedocs.io/en/latest/administration.html#managing-encryption). The gist of it is that I don't see which attacks this implementation protects against. It gives a false sense of security to users who don't care about how it works.
 
+## Wont-do list.
+
+These features will probably never make it into paperless, since paperless is meant to be an easy to use set-and-forget solution.
+
+- **Document versions.** I might consider adding the ability to update a document with a newer version, but that's about it. The kind of documents that get added to paperless usually don't change at all.
+- **Workflows.** I don't see a use case for these, yet.
+- **Folders.** Tags are superior in just about every way.
+- **Apps / extension support.** Again, paperless is meant to be simple.
+
 # Getting started
 
 The recommended way to deploy paperless is docker-compose. Don't clone the repository, grab the latest release to get started instead. The dockerfiles archive contains just the docker files which will pull the image from docker hub. The source archive contains everything you need to build the docker image yourself (i.e. if you want to run on Raspberry Pi).
@@ -109,7 +122,6 @@ Paperless has been around a while now, and people are starting to build stuff on
 These projects also exist, but their status and compatibility with paperless-ng is unknown.
 
 * [Paperless Desktop](https://github.com/thomasbrueggemann/paperless-desktop): A desktop UI for your Paperless installation.  Runs on Mac, Linux, and Windows.
-* [ansible-role-paperless](https://github.com/ovv/ansible-role-paperless): An easy way to get Paperless running via Ansible.
 * [paperless-cli](https://github.com/stgarf/paperless-cli): A golang command line binary to interact with a Paperless instance.
 
 # Important Note

docker/gunicorn.conf.py

@@ -1,4 +1,4 @@
-bind = '127.0.0.1:8000'
+bind = '0.0.0.0:8000'
 backlog = 2048
 workers = 3
 worker_class = 'sync'

docker/hub/docker-compose.postgres.yml

@@ -15,7 +15,7 @@ services:
       POSTGRES_PASSWORD: paperless
 
   webserver:
-    image: jonaswinkler/paperless-ng:0.9.8
+    image: jonaswinkler/paperless-ng:0.9.11
     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.8
+    image: jonaswinkler/paperless-ng:0.9.11
     restart: always
     depends_on:
       - broker

docker/local/Dockerfile

@@ -9,6 +9,8 @@ RUN apt-get update \
   && apt-get -y --no-install-recommends install \
 		build-essential \
 		curl \
+		file \
+		fonts-liberation \
 		ghostscript \
 		gnupg \
 		icc-profiles-free \
@@ -20,6 +22,7 @@ RUN apt-get update \
 		libpq-dev \
 		libqpdf-dev \
 		libxml2 \
+		libxslt1-dev \
 		optipng \
 		pngquant \
 		qpdf \
@@ -62,6 +65,7 @@ RUN sudo -HEu paperless python3 manage.py collectstatic --clear --no-input
 
 VOLUME ["/usr/src/paperless/data", "/usr/src/paperless/media", "/usr/src/paperless/consume", "/usr/src/paperless/export"]
 ENTRYPOINT ["/sbin/docker-entrypoint.sh"]
+EXPOSE 8000
 CMD ["/usr/local/bin/supervisord", "-c", "/etc/supervisord.conf"]
 
 LABEL maintainer="Jonas Winkler <dev@jpwinkler.de>"

docker/supervisord.conf

@@ -8,7 +8,7 @@ loglevel=info                ; log level; default info; others: debug,warn,trace
 user=root
 
 [program:gunicorn]
-command=gunicorn -c /usr/src/paperless/gunicorn.conf.py -b 0.0.0.0:8000 paperless.wsgi
+command=gunicorn -c /usr/src/paperless/gunicorn.conf.py paperless.wsgi
 user=paperless
 
 stdout_logfile=/dev/stdout

docs/advanced_usage.rst

@@ -5,85 +5,6 @@ Advanced topics
 Paperless offers a couple features that automate certain tasks and make your life
 easier.
 
-Guesswork
-#########
-
-
-Any document you put into the consumption directory will be consumed, but if
-you name the file right, it'll automatically set some values in the database
-for you.  This is is the logic the consumer follows:
-
-1. Try to find the correspondent, title, and tags in the file name following
-   the pattern: ``Date - Correspondent - Title - tag,tag,tag.pdf``.  Note that
-   the format of the date is **rigidly defined** as ``YYYYMMDDHHMMSSZ`` or
-   ``YYYYMMDDZ``.  The ``Z`` refers "Zulu time" AKA "UTC".
-   The tags are optional, so the format ``Date - Correspondent - Title.pdf``
-   works as well.
-2. If that doesn't work, we skip the date and try this pattern:
-   ``Correspondent - Title - tag,tag,tag.pdf``.
-3. If that doesn't work, we try to find the correspondent and title in the file
-   name following the pattern: ``Correspondent - Title.pdf``.
-4. If that doesn't work, just assume that the name of the file is the title.
-
-So given the above, the following examples would work as you'd expect:
-
-* ``20150314000700Z - Some Company Name - Invoice 2016-01-01 - money,invoices.pdf``
-* ``20150314Z - Some Company Name - Invoice 2016-01-01 - money,invoices.pdf``
-* ``Some Company Name - Invoice 2016-01-01 - money,invoices.pdf``
-* ``Another Company - Letter of Reference.jpg``
-* ``Dad's Recipe for Pancakes.png``
-
-These however wouldn't work:
-
-* ``2015-03-14 00:07:00 UTC - Some Company Name, Invoice 2016-01-01, money, invoices.pdf``
-* ``2015-03-14 - Some Company Name, Invoice 2016-01-01, money, invoices.pdf``
-* ``Some Company Name, Invoice 2016-01-01, money, invoices.pdf``
-* ``Another Company- Letter of Reference.jpg``
-
-Do I have to be so strict about naming?
-=======================================
-
-Rather than using the strict document naming rules, one can also set the option
-``PAPERLESS_FILENAME_DATE_ORDER`` in ``paperless.conf`` to any date order
-that is accepted by dateparser_. Doing so will cause ``paperless`` to default
-to any date format that is found in the title, instead of a date pulled from
-the document's text, without requiring the strict formatting of the document
-filename as described above.
-
-.. _dateparser: https://github.com/scrapinghub/dateparser/blob/v0.7.0/docs/usage.rst#settings
-
-.. _advanced-transforming_filenames:
-
-Transforming filenames for parsing
-==================================
-
-Some devices can't produce filenames that can be parsed by the default
-parser. By configuring the option ``PAPERLESS_FILENAME_PARSE_TRANSFORMS`` in
-``paperless.conf`` one can add transformations that are applied to the filename
-before it's parsed.
-
-The option contains a list of dictionaries of regular expressions (key:
-``pattern``) and replacements (key: ``repl``) in JSON format, which are
-applied in order by passing them to ``re.subn``. Transformation stops
-after the first match, so at most one transformation is applied. The general
-syntax is
-
-.. code:: python
-
-   [{"pattern":"pattern1", "repl":"repl1"}, {"pattern":"pattern2", "repl":"repl2"}, ..., {"pattern":"patternN", "repl":"replN"}]
-
-The example below is for a Brother ADS-2400N, a scanner that allows
-different names to different hardware buttons (useful for handling
-multiple entities in one instance), but insists on adding ``_<count>``
-to the filename.
-
-.. code:: python
-
-   # Brother profile configuration, support "Name_Date_Count" (the default
-   # setting) and "Name_Count" (use "Name" as tag and "Count" as title).
-   PAPERLESS_FILENAME_PARSE_TRANSFORMS=[{"pattern":"^([a-z]+)_(\\d{8})_(\\d{6})_([0-9]+)\\.", "repl":"\\2\\3Z - \\4 - \\1."}, {"pattern":"^([a-z]+)_([0-9]+)\\.", "repl":" - \\2 - \\1."}]
-
-
 .. _advanced-matching:
 
 Matching tags, correspondents and document types

docs/api.rst

@@ -221,21 +221,16 @@ Each fragment contains a list of strings, and some of them are marked as a highl
 
     [
         [
-            {"text": "This is a sample text with a "},
-            {"text": "highlighted", "term": 0},
-            {"text": " word."}
+            {"text": "This is a sample text with a ", "highlight": false},
+            {"text": "highlighted", "highlight": true},
+            {"text": " word.", "highlight": false}
         ],
         [
-            {"text": "Another", "term": 1},
-            {"text": " fragment with a highlight."}
+            {"text": "Another", "highlight": true},
+            {"text": " fragment with a highlight.", "highlight": false}
         ]
     ]
 
-
-
-When ``term`` is present within a string, the word within ``text`` should be highlighted.
-The term index groups multiple matches together and words with the same index
-should get identical highlighting.
 A client may use this example to produce the following output:
 
 ... This is a sample text with a **highlighted** word. ... **Another** fragment with a highlight. ...

docs/changelog.rst

@@ -6,6 +6,79 @@ Changelog
 *********
 
 
+paperless-ng 0.9.11
+###################
+
+* Fixed an issue with the docker image not starting at all due to a configuration change of the web server.
+
+
+paperless-ng 0.9.10
+###################
+
+* Bulk editing
+
+  * Thanks to `Michael Shamoon`_, we've got a new interface for the bulk editor.
+  * There are some configuration options in the settings to alter the behavior.
+
+* Other changes and additions
+  
+  * Thanks to `zjean`_, paperless now publishes a webmanifest, which is useful for adding the application to home screens on mobile devices.
+  * The Paperless-ng logo now navigates to the dashboard.
+  * Filter for documents that don't have any correspondents, types or tags assigned.
+  * Tags, types and correspondents are now sorted case insensitive.
+  * Lots of preparation work for localization support.
+
+* Fixes
+
+  * Added missing dependencies for Raspberry Pi builds.
+  * Fixed an issue with plain text file consumption: Thumbnail generation failed due to missing fonts.
+  * An issue with the search index reporting missing documents after bulk deletes was fixed.
+  * Issue with the tag selector not clearing input correctly.
+  * The consumer used to stop working when encountering an incomplete classifier model file.
+
+.. note::
+
+  The bulk delete operations did not update the search index. Therefore, documents that you deleted remained in the index and
+  caused the search to return messages about missing documents when searching. Further bulk operations will properly update
+  the index.
+  
+  However, this change is not retroactive: If you used the delete method of the bulk editor, you need to reindex your search index
+  by :ref:`running the management command document_index with the argument reindex <administration-index>`.
+
+paperless-ng 0.9.9
+##################
+
+Christmas release!
+
+* Bulk editing
+
+  * Paperless now supports bulk editing.
+  * The following operations are available: Add and remove correspondents, tags, document types from selected documents, as well as mass-deleting documents.
+  * We've got a more fancy UI in the works that makes these features more accessible, but that's not quite ready yet.
+
+* Searching
+
+  * Paperless now supports searching for similar documents ("More like this") both from the document detail page as well as from individual search results.
+  * A search score indicates how well a document matches the search query, or how similar a document is to a given reference document.
+
+* Other additions and changes
+
+  * Clarification in the UI that the fields "Match" and "Is insensitive" are not relevant for the Auto matching algorithm.
+  * New select interface for tags, types and correspondents allows filtering. This also improves tag selection. Thanks again to `Michael Shamoon`_!
+  * Page navigation controls for the document viewer, thanks to `Michael Shamoon`_.
+  * Layout changes to the small cards document list.
+  * The dashboard now displays the username (or full name if specified in the admin) on the dashboard.
+
+* Fixes
+
+  * An error that caused the document importer to crash was fixed.
+  * An issue with changes not being possible when ``PAPERLESS_COOKIE_PREFIX`` is used was fixed.
+  * The date selection filters now allow manual entry of dates.
+
+* Feature Removal
+
+  * Most of the guesswork features have been removed. Paperless no longer tries to extract correspondents and tags from file names.
+
 paperless-ng 0.9.8
 ##################
 
@@ -893,6 +966,7 @@ bulk of the work on this big change.
 
 * Initial release
 
+.. _zjean: https://github.com/zjean
 .. _rYR79435: https://github.com/rYR79435
 .. _Michael Shamoon: https://github.com/shamoon
 .. _jayme-github: http://github.com/jayme-github

docs/configuration.rst

@@ -400,11 +400,15 @@ PAPERLESS_FILENAME_DATE_ORDER=<format>
 
     Defaults to none, which disables this feature.
 
-PAPERLESS_FILENAME_PARSE_TRANSFORMS
-    Transforms filenames before they are processed by paperless. See
-    :ref:`advanced-transforming_filenames` for details.
+PAPERLESS_THUMBNAIL_FONT_NAME=<filename>
+    Paperless creates thumbnails for plain text files by rendering the content
+    of the file on an image and uses a predefined font for that. This
+    font can be changed here.
+
+    Note that this won't have any effect on already generated thumbnails.
+
+    Defaults to ``/usr/share/fonts/liberation/LiberationSerif-Regular.ttf``.
 
-    Defaults to none, which disables this feature.
 
 Binaries
 ########

docs/scanners.rst

@@ -25,6 +25,8 @@ that works right for you based on recommendations from other Paperless users.
 +---------+----------------+-----+-----+-----+----------------+
 | Fujitsu | `ix500`_       | yes |     | yes | `eonist`_      |
 +---------+----------------+-----+-----+-----+----------------+
+| Epson   | `WF-7710DWF`_  | yes |     | yes | `Skylinar`_    |
++---------+----------------+-----+-----+-----+----------------+
 | Fujitsu | `S1300i`_      | yes |     | yes | `jonaswinkler`_|
 +---------+----------------+-----+-----+-----+----------------+
 
@@ -32,7 +34,8 @@ that works right for you based on recommendations from other Paperless users.
 .. _MFC-J6930DW: https://www.brother.ca/en/p/MFCJ6930DW
 .. _MFC-J5910DW: https://www.brother.co.uk/printers/inkjet-printers/mfcj5910dw
 .. _MFC-9142CDN: https://www.brother.co.uk/printers/laser-printers/mfc9140cdn
-.. _ix500: https://www.fujitsu.com/global/products/computing/peripheral/scanners/scansnap/ix500/
+.. _ix500: http://www.fujitsu.com/us/products/computing/peripheral/scanners/scansnap/ix500/
+.. _WF-7710DWF: https://www.epson.de/en/products/printers/inkjet-printers/for-home/workforce-wf-7710dwf
 .. _S1300i: https://www.fujitsu.com/global/products/computing/peripheral/scanners/soho/s1300i/
 
 .. _danielquinn: https://github.com/danielquinn
@@ -40,4 +43,5 @@ that works right for you based on recommendations from other Paperless users.
 .. _bmsleight: https://github.com/bmsleight
 .. _eonist: https://github.com/eonist
 .. _REOLDEV: https://github.com/REOLDEV
+.. _Skylinar: https://github.com/Skylinar
 .. _jonaswinkler: https://github.com/jonaswinkler

docs/setup.rst

@@ -120,6 +120,8 @@ The `bare metal route`_ is more complicated to setup but makes it easier
 should you want to contribute some code back. You need to configure and
 run the above mentioned components yourself.
 
+.. _setup-docker_route:
+
 Docker Route
 ============
 
@@ -219,8 +221,9 @@ writing. Windows is not and will never be supported.
     *   ``python3-pip``, optionally ``pipenv`` for package installation
     *   ``python3-dev``
 
+    *   ``fonts-liberation`` for generating thumbnails for plain text files
     *   ``imagemagick`` >= 6 for PDF conversion
-    *   ``optipng`` for optimising thumbnails
+    *   ``optipng`` for optimizing thumbnails
     *   ``gnupg`` for handling encrypted documents
     *   ``libpoppler-cpp-dev`` for PDF to text conversion
     *   ``libmagic-dev`` for mime type detection
@@ -240,8 +243,7 @@ writing. Windows is not and will never be supported.
     *   ``tesseract-ocr`` language packs (``tesseract-ocr-eng``, ``tesseract-ocr-deu``, etc)
 
     You will also need ``build-essential``, ``python3-setuptools`` and ``python3-wheel``
-    for installing some of the python dependencies. You can remove that
-    again after installation.
+    for installing some of the python dependencies.
 
 2.  Install ``redis`` >= 5.0 and configure it to start automatically.
 
@@ -460,6 +462,15 @@ management commands as below.
     load data from an old database schema in SQLite into a newer database
     schema in PostgreSQL, you will run into trouble.
 
+.. warning::
+
+    On some database fields, PostgreSQL enforces predefined limits on maximum
+    length, whereas SQLite does not. The fields in question are the title of documents
+    (128 characters), names of document types, tags and correspondents (128 characters),
+    and filenames (1024 characters). If you have data in these fields that surpasses these
+    limits, migration to PostgreSQL is not possible and will fail with an error.
+
+
 1.  Stop paperless, if it is running.
 2.  Tell paperless to use PostgreSQL:
 

docs/troubleshooting.rst

@@ -39,7 +39,7 @@ Operation not permitted
 
 You might see errors such as:
 
-.. code::
+.. code:: shell-session
 
     chown: changing ownership of '../export': Operation not permitted
 
@@ -49,3 +49,29 @@ to these folders. This happens when pointing these directories to NFS shares,
 for example.
 
 Ensure that `chown` is possible on these directories.
+
+Classifier error: No training data available
+############################################
+
+This indicates that the Auto matching algorithm found no documents to learn from.
+This may have two reasons:
+
+*   You don't use the Auto matching algorithm: The error can be safely ignored in this case.
+*   You are using the Auto matching algorithm: The classifier explicitly excludes documents
+    with Inbox tags. Verify that there are documents in your archive without inbox tags.
+    The algorithm will only learn from documents not in your inbox.
+
+Permission denied errors in the consumption directory
+#####################################################
+
+You might encounter errors such as:
+
+.. code:: shell-session
+
+    The following error occured while consuming document.pdf: [Errno 13] Permission denied: '/usr/src/paperless/src/../consume/document.pdf'
+
+This happens when paperless does not have permission to delete files inside the consumption directory.
+Ensure that ``USERMAP_UID`` and ``USERMAP_GID`` are set to the user id and group id you use on the host operating system, if these are
+different from ``1000``. See :ref:`setup-docker_route`.
+
+Also ensure that you are able to read and write to the consumption directory on the host.

paperless.conf.example

@@ -39,7 +39,7 @@
 #PAPERLESS_OCR_OUTPUT_TYPE=pdfa
 #PAPERLESS_OCR_PAGES=1
 #PAPERLESS_OCR_IMAGE_DPI=300
-#PAPERLESS_OCR_USER_ARG={}
+#PAPERLESS_OCR_USER_ARGS={}
 #PAPERLESS_CONVERT_MEMORY_LIMIT=0
 #PAPERLESS_CONVERT_TMPDIR=/var/tmp/paperless
 
@@ -54,6 +54,7 @@
 #PAPERLESS_POST_CONSUME_SCRIPT=/path/to/an/arbitrary/script.sh
 #PAPERLESS_FILENAME_DATE_ORDER=YMD
 #PAPERLESS_FILENAME_PARSE_TRANSFORMS=[]
+#PAPERLESS_THUMBNAIL_FONT_NAME=
 
 # Binaries
 

src-ui/angular.json

@@ -26,12 +26,16 @@
 						"aot": true,
 						"assets": [
 							"src/favicon.ico",
-							"src/assets"
+							"src/assets",
+							"src/manifest.webmanifest"
 						],
 						"styles": [
 							"src/styles.scss"
 						],
-						"scripts": []
+						"scripts": [],
+						"allowedCommonJsDependencies": [
+							"ng2-pdf-viewer"
+						]
 					},
 					"configurations": {
 						"production": {
@@ -90,7 +94,8 @@
 						"karmaConfig": "karma.conf.js",
 						"assets": [
 							"src/favicon.ico",
-							"src/assets"
+							"src/assets",
+							"src/manifest.webmanifest"
 						],
 						"styles": [
 							"src/styles.scss"
@@ -127,4 +132,4 @@
 		}
 	},
 	"defaultProject": "paperless-ui"
-}
+}

src-ui/package-lock.json

@@ -2056,6 +2056,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@ng-select/ng-select": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-5.0.9.tgz",
+      "integrity": "sha512-YZeSAiS8/Nx/eHZJPmOOYL8YmcvSq+dr1P8WIrsKmRA7mueorBpPc5xlUj+nLQbpLtsiQvdWDQspf/ykOvD/lA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.2.0.tgz",

src-ui/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser-dynamic": "~10.1.5",
     "@angular/router": "~10.1.5",
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
+    "@ng-select/ng-select": "^5.0.9",
     "bootstrap": "^4.5.0",
     "ng-bootstrap": "^1.6.3",
     "ng2-pdf-viewer": "^6.3.2",

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

@@ -26,12 +26,13 @@ import { ResultHighlightComponent } from './components/search/result-highlight/r
 import { PageHeaderComponent } from './components/common/page-header/page-header.component';
 import { AppFrameComponent } from './components/app-frame/app-frame.component';
 import { ToastsComponent } from './components/common/toasts/toasts.component';
-import { FilterEditorComponent } from './components/filter-editor/filter-editor.component';
-import { FilterDropdownComponent } from './components/filter-editor/filter-dropdown/filter-dropdown.component';
-import { FilterDropdownButtonComponent } from './components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component';
-import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.component';
+import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component';
+import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
+import { DateDropdownComponent } from './components/common/date-dropdown/date-dropdown.component';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
+import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { TextComponent } from './components/common/input/text/text.component';
 import { SelectComponent } from './components/common/input/select/select.component';
@@ -54,6 +55,8 @@ import { FileSizePipe } from './pipes/file-size.pipe';
 import { FilterPipe } from './pipes/filter.pipe';
 import { DocumentTitlePipe } from './pipes/document-title.pipe';
 import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component';
+import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @NgModule({
   declarations: [
@@ -78,11 +81,12 @@ import { MetadataCollapseComponent } from './components/document-detail/metadata
     AppFrameComponent,
     ToastsComponent,
     FilterEditorComponent,
-    FilterDropdownComponent,
-    FilterDropdownButtonComponent,
-    FilterDropdownDateComponent,
+    FilterableDropdownComponent,
+    ToggleableDropdownButtonComponent,
+    DateDropdownComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
+    BulkEditorComponent,
     TextComponent,
     SelectComponent,
     CheckComponent,
@@ -99,7 +103,8 @@ import { MetadataCollapseComponent } from './components/document-detail/metadata
     FileSizePipe,
     FilterPipe,
     DocumentTitlePipe,
-    MetadataCollapseComponent
+    MetadataCollapseComponent,
+    SelectDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -110,7 +115,8 @@ import { MetadataCollapseComponent } from './components/document-detail/metadata
     ReactiveFormsModule,
     NgxFileDropModule,
     InfiniteScrollModule,
-    PdfViewerModule
+    PdfViewerModule,
+    NgSelectModule
   ],
   providers: [
     DatePipe,

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

@@ -1,16 +1,16 @@
 <nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
-  <span class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">
+  <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" routerLink="/dashboard">
     <img src="assets/logo-dark-notext.svg" height="18px" class="mr-2">
-    Paperless-ng
-  </span>
+    <ng-container i18n="app title">Paperless-ng</ng-container>
+  </a>
   <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
     (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
   <form (ngSubmit)="search()" class="w-100 m-1">
-    <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search"
-      [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)">
+    <input class="form-control form-control-dark" type="text" placeholder="Search for documents" aria-label="Search"
+      [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)" i18n-placeholder>
   </form>
 </nav>
 
@@ -28,136 +28,122 @@
             <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#house"/>
-              </svg>
-              Dashboard
+              </svg>&nbsp;<ng-container i18n>Dashboard</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="documents" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#files"/>
-              </svg>
-              Documents
+              </svg>&nbsp;<ng-container i18n>Documents</ng-container>
             </a>
           </li>
         </ul>
 
         <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>
+          <ng-container i18n>Saved views</ng-container>
         </h6>
         <ul class="nav flex-column mb-2">
           <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>
-              {{view.name}}
+              </svg>&nbsp;{{view.name}}
             </a>
           </li>
         </ul>
 
         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
-          <span>Open documents</span>
+          <ng-container i18n>Open documents</ng-container>
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item w-100" *ngFor='let d of openDocuments'>
             <a class="nav-link text-truncate" routerLink="documents/{{d.id}}" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-              </svg>
-              {{d.title | documentTitle}}
+              </svg>&nbsp;{{d.title | documentTitle}}
             </a>
           </li>
           <li class="nav-item w-100" *ngIf="openDocuments.length > 1">
             <a class="nav-link text-truncate" [routerLink]="" (click)="closeAll()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg>
-              Close all
+              </svg>&nbsp;<ng-container i18n>Close all</ng-container>
             </a>
           </li>
         </ul>
 
         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-          <span>Manage</span>
+          <ng-container i18n>Manage</ng-container>
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item">
             <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#person"/>
-              </svg>
-              Correspondents
+              </svg>&nbsp;<ng-container i18n>Correspondents</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#tags"/>
-              </svg>
-              Tags
+              </svg>&nbsp;<ng-container i18n>Tags</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#hash"/>
-              </svg>
-              Document types
+              </svg>&nbsp;<ng-container i18n>Document types</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#text-left"/>
-              </svg>
-              Logs
+              </svg>&nbsp;<ng-container i18n>Logs</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#gear"/>
-              </svg>
-              Settings
+              </svg>&nbsp;<ng-container i18n>Settings</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="admin/">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#toggles"/>
-              </svg>
-              Admin
+              </svg>&nbsp;<ng-container i18n>Admin</ng-container>
             </a>
           </li>
         </ul>
 
         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
-          <span>Misc</span>
+          <ng-container i18n>Misc</ng-container>
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item">
             <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>
-              Documentation
+              </svg>&nbsp;<ng-container i18n>Documentation</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <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>
-              GitHub
+              </svg>&nbsp;<ng-container i18n>GitHub</ng-container>
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="accounts/logout/">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
-              </svg>
-              Logout
+              </svg>&nbsp;<ng-container i18n>Logout</ng-container>
             </a>
           </li>
         </ul>

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

@@ -10,5 +10,8 @@
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()">Cancel</button>
-      <button type="button" class="btn" [class]="btnClass" (click)="confirmClicked.emit()">{{btnCaption}}</button>
-    </div>
+      <button type="button" class="btn" [class]="btnClass" (click)="confirmClicked.emit()" [disabled]="!confirmButtonEnabled">
+        {{btnCaption}}
+        <span *ngIf="!confirmButtonEnabled"> ({{seconds}})</span>
+      </button>
+    </div>

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

@@ -14,7 +14,7 @@ export class ConfirmDialogComponent implements OnInit {
   public confirmClicked = new EventEmitter()
 
   @Input()
-  title = "Confirmation"
+  title = $localize`Confirmation`
 
   @Input()
   messageBold
@@ -26,7 +26,22 @@ export class ConfirmDialogComponent implements OnInit {
   btnClass = "btn-primary"
 
   @Input()
-  btnCaption = "Confirm"
+  btnCaption = $localize`Confirm`
+
+  confirmButtonEnabled = true
+  seconds = 0
+
+  delayConfirm(seconds: number) {
+    this.confirmButtonEnabled = false
+    this.seconds = seconds
+    setTimeout(() => {
+      if (this.seconds <= 1) {
+        this.confirmButtonEnabled = true
+      } else {
+        this.delayConfirm(seconds - 1)
+      }
+    }, 1000)
+  }
 
   ngOnInit(): void {
   }

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

@@ -0,0 +1,44 @@
+  <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-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+    <div class="list-group list-group-flush">
+        <button *ngFor="let qf of quickFilters" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(qf.id)">
+          {{qf.name}}
+        </button>
+        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+
+          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+            <div i18n>After</div>
+            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
+              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+              </svg>
+              <small i18n>Clear</small>
+            </a>
+          </div>
+
+          <div class="input-group input-group-sm">
+            <input type="date" class="form-control" id="date_after" [(ngModel)]="dateAfter" (change)="onChangeDebounce()">
+          </div>
+        </div>
+        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+
+          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+            <div i18n>Before</div>
+            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
+              <svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+              </svg>
+              <small i18n>Clear</small>
+            </a>
+          </div>
+
+          <div class="input-group input-group-sm">
+            <input type="date" class="form-control" id="date_before" [(ngModel)]="dateBefore" (change)="onChangeDebounce()">
+          </div>
+        </div>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,4 @@
-.date-filter {
+.date-dropdown {
   min-width: 250px;
 
   .btn-link {

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

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

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

@@ -0,0 +1,111 @@
+import { formatDate } from '@angular/common';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+export interface DateSelection {
+  before?: string
+  after?: string
+}
+
+const LAST_7_DAYS = 0
+const LAST_MONTH = 1
+const LAST_3_MONTHS = 2
+const LAST_YEAR = 3
+
+@Component({
+  selector: 'app-date-dropdown',
+  templateUrl: './date-dropdown.component.html',
+  styleUrls: ['./date-dropdown.component.scss']
+})
+export class DateDropdownComponent implements OnInit, OnDestroy {
+
+  quickFilters = [
+    {id: LAST_7_DAYS, name: $localize`Last 7 days`},
+    {id: LAST_MONTH, name: $localize`Last month`},
+    {id: LAST_3_MONTHS, name: $localize`Last 3 months`},
+    {id: LAST_YEAR, name: $localize`Last year`}
+  ]
+
+  @Input()
+  dateBefore: string
+
+  @Output()
+  dateBeforeChange = new EventEmitter<string>()
+
+  @Input()
+  dateAfter: string
+
+  @Output()
+  dateAfterChange = new EventEmitter<string>()
+
+  @Input()
+  title: string
+
+  @Output()
+  datesSet = new EventEmitter<DateSelection>()
+
+  private datesSetDebounce$ = new Subject()
+
+  private sub: Subscription
+
+  ngOnInit() {
+    this.sub = this.datesSetDebounce$.pipe(
+      debounceTime(400)
+    ).subscribe(() => {
+      this.onChange()
+    })
+  }
+
+  ngOnDestroy() {
+    if (this.sub) {
+      this.sub.unsubscribe()
+    }
+  }
+
+  setDateQuickFilter(qf: number) {
+    this.dateBefore = null
+    let date = new Date()
+    switch (qf) {
+      case LAST_7_DAYS:
+        date.setDate(date.getDate() - 7)
+        break;
+
+      case LAST_MONTH:
+        date.setMonth(date.getMonth() - 1)
+        break;
+
+      case LAST_3_MONTHS:
+        date.setMonth(date.getMonth() - 3)
+        break
+
+      case LAST_YEAR:
+        date.setFullYear(date.getFullYear() - 1)
+        break
+
+      }
+    this.dateAfter = formatDate(date, 'yyyy-MM-dd', "en-us", "UTC")
+    this.onChange()
+  }
+
+  onChange() {
+    this.dateAfterChange.emit(this.dateAfter)
+    this.dateBeforeChange.emit(this.dateBefore)
+    this.datesSet.emit({after: this.dateAfter, before: this.dateBefore})
+  }
+
+  onChangeDebounce() {
+    this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
+  }
+
+  clearBefore() {
+    this.dateBefore = null
+    this.onChange()
+  }
+
+  clearAfter() {
+    this.dateAfter = null
+    this.onChange()
+  }
+
+}

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

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { MATCHING_ALGORITHMS } from 'src/app/data/matching-model';
 import { ObjectWithId } from 'src/app/data/object-with-id';
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
-import { Toast, ToastService } from 'src/app/services/toast.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 @Directive()
 export abstract class EditDialogComponent<T extends ObjectWithId> implements OnInit {
@@ -13,8 +13,7 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
   constructor(
     private service: AbstractPaperlessService<T>,
     private activeModal: NgbActiveModal,
-    private toastService: ToastService,
-    private entityName: string) { }
+    private toastService: ToastService) { }
 
   @Input()
   dialogMode: string = 'create'
@@ -35,12 +34,24 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
     }
   }
 
+  getCreateTitle() {
+    return $localize`Create new item`
+  }
+
+  getEditTitle() {
+    return $localize`Edit item`
+  }
+
+  getSaveErrorMessage(error: string) {
+    return $localize`Could not save element: ${error}`
+  }
+
   getTitle() {
     switch (this.dialogMode) {
       case 'create':
-        return "Create new " + this.entityName
+        return this.getCreateTitle()
       case 'edit':
-        return "Edit " + this.entityName
+        return this.getEditTitle()
       default:
         break;
     }
@@ -66,7 +77,7 @@ export abstract class EditDialogComponent<T extends ObjectWithId> implements OnI
       this.activeModal.close()
       this.success.emit(result)
     }, error => {
-      this.toastService.showToast(Toast.makeError(`Could not save ${this.entityName}: ${error.error.name}`))
+      this.toastService.showError(this.getSaveErrorMessage(error.error.name))
     })
   }
 

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

@@ -0,0 +1,35 @@
+<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'">
+    <div class="d-none d-md-inline">{{title}}</div>
+    <div class="d-inline-block d-md-none">
+      <svg class="toolbaricon" fill="currentColor">
+        <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
+      </svg>
+    </div>
+    <ng-container *ngIf="!editing && selectionModel.selectionSize() > 0">
+      <div class="badge bg-secondary text-light rounded-pill badge-corner">
+        {{selectionModel.selectionSize()}}
+      </div>
+    </ng-container>
+  </button>
+  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+    <div class="list-group list-group-flush">
+      <div class="list-group-item">
+        <div class="input-group input-group-sm">
+          <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
+        </div>
+      </div>
+      <div *ngIf="selectionModel.items" class="items">
+        <ng-container *ngFor="let item of (editing ? selectionModel.itemsSorted : selectionModel.items) | filter: filterText">
+          <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
+        </ng-container>
+      </div>
+      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
+        <small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}" i18n>Apply</small>
+        <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,267 @@
+import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
+import { FilterPipe } from  'src/app/pipes/filter.pipe';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
+import { MatchingModel } from 'src/app/data/matching-model';
+import { Subject } from 'rxjs';
+
+export interface ChangedItems {
+  itemsToAdd: MatchingModel[],
+  itemsToRemove: MatchingModel[]
+}
+
+export class FilterableDropdownSelectionModel {
+
+  changed = new Subject<FilterableDropdownSelectionModel>()
+
+  multiple = false
+
+  items: MatchingModel[] = []
+
+  get itemsSorted(): MatchingModel[] {
+    return this.items.sort((a,b) => {
+      if (this.getNonTemporary(a.id) == ToggleableItemState.NotSelected && this.getNonTemporary(b.id) != ToggleableItemState.NotSelected) {
+        return 1
+      } else if (this.getNonTemporary(a.id) != ToggleableItemState.NotSelected && this.getNonTemporary(b.id) == ToggleableItemState.NotSelected) {
+        return -1
+      } else {
+        return a.name.localeCompare(b.name)
+      }
+    })
+  }
+
+  private selectionStates = new Map<number, ToggleableItemState>()
+
+  private temporarySelectionStates = new Map<number, ToggleableItemState>()
+
+  getSelectedItems() {
+    return this.items.filter(i => this.temporarySelectionStates.get(i.id) == ToggleableItemState.Selected)
+  }
+
+  set(id: number, state: ToggleableItemState, fireEvent = true) {
+    if (state == ToggleableItemState.NotSelected) {
+      this.temporarySelectionStates.delete(id)
+    } else {
+      this.temporarySelectionStates.set(id, state)
+    }
+    if (fireEvent) {
+      this.changed.next(this)
+    }
+  }
+
+  toggle(id: number, fireEvent = true) {
+    let state = this.temporarySelectionStates.get(id)
+    if (state == null || state != ToggleableItemState.Selected) {
+      this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
+    } else if (state == ToggleableItemState.Selected) {
+      this.temporarySelectionStates.delete(id)
+    }
+
+    if (!this.multiple) {
+      for (let key of this.temporarySelectionStates.keys()) {
+        if (key != id) {
+          this.temporarySelectionStates.delete(key)
+        }
+      }
+    }
+
+    if (!id) {
+      for (let key of this.temporarySelectionStates.keys()) {
+        if (key) {
+          this.temporarySelectionStates.delete(key)
+        }
+      }
+    } else {
+      this.temporarySelectionStates.delete(null)
+    }
+
+    if (fireEvent) {
+      this.changed.next(this)
+    }
+    
+  }
+
+  private getNonTemporary(id: number) {
+    return this.selectionStates.get(id) || ToggleableItemState.NotSelected
+  }
+
+  get(id: number) {
+    return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
+  }
+
+  selectionSize() {
+    return this.getSelectedItems().length
+  }
+
+  clear(fireEvent = true) {
+    this.temporarySelectionStates.clear()
+    if (fireEvent) {
+      this.changed.next(this)
+    }
+  }
+
+  isDirty() {
+    if (!Array.from(this.temporarySelectionStates.keys()).every(id => this.temporarySelectionStates.get(id) == this.selectionStates.get(id))) {
+      return true
+    } else if (!Array.from(this.selectionStates.keys()).every(id => this.selectionStates.get(id) == this.temporarySelectionStates.get(id))) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  isNoneSelected() {
+    return this.selectionSize() == 1 && this.get(null) == ToggleableItemState.Selected
+  }
+
+  init(map) {
+    this.temporarySelectionStates = map
+    this.apply()
+  }
+
+  apply() {
+    this.selectionStates.clear()
+    this.temporarySelectionStates.forEach((value, key) => {
+      this.selectionStates.set(key, value)
+    })
+  }
+
+  reset() {
+    this.temporarySelectionStates.clear()
+    this.selectionStates.forEach((value, key) => {
+      this.temporarySelectionStates.set(key, value)
+    })
+  }
+
+  diff(): ChangedItems {
+    return {
+      itemsToAdd: this.items.filter(item => this.temporarySelectionStates.get(item.id) == ToggleableItemState.Selected && this.selectionStates.get(item.id) != ToggleableItemState.Selected),
+      itemsToRemove: this.items.filter(item => !this.temporarySelectionStates.has(item.id) && this.selectionStates.has(item.id)),
+    }
+  }
+}
+
+@Component({
+  selector: 'app-filterable-dropdown',
+  templateUrl: './filterable-dropdown.component.html',
+  styleUrls: ['./filterable-dropdown.component.scss']
+})
+export class FilterableDropdownComponent {
+
+  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  filterText: string
+
+  @Input()
+  set items(items: MatchingModel[]) {
+    if (items) {
+      this._selectionModel.items = Array.from(items)
+      this._selectionModel.items.unshift({
+        name: $localize`:Filter drop down element to filter for documents with no correspondent/type/tag assigned:Not assigned`,
+        id: null
+      })
+    }
+  }
+
+  get items(): MatchingModel[] {
+    return this._selectionModel.items
+  }
+
+  _selectionModel = new FilterableDropdownSelectionModel()
+
+  @Input()
+  set selectionModel(model: FilterableDropdownSelectionModel) {
+    if (this.selectionModel) {
+      this.selectionModel.changed.complete()
+      model.items = this.selectionModel.items
+      model.multiple = this.selectionModel.multiple
+    }
+    model.changed.subscribe(updatedModel => {
+      this.selectionModelChange.next(updatedModel)
+    })
+    this._selectionModel = model
+  }
+
+  get selectionModel(): FilterableDropdownSelectionModel {
+    return this._selectionModel
+  }
+
+  @Output()
+  selectionModelChange = new EventEmitter<FilterableDropdownSelectionModel>()
+
+  @Input()
+  set multiple(value: boolean) {
+    this.selectionModel.multiple = value
+  }
+
+  get multiple() {
+    return this.selectionModel.multiple
+  }
+
+  @Input()
+  title: string
+
+  @Input()
+  filterPlaceholder: string = ""
+
+  @Input()
+  icon: string
+
+  @Input()
+  allowSelectNone: boolean = false
+
+  @Input()
+  editing = false
+
+  @Input()
+  applyOnClose = false
+
+  @Output()
+  apply = new EventEmitter<ChangedItems>()
+
+  @Output()
+  open = new EventEmitter()
+
+  constructor(private filterPipe: FilterPipe) {
+    this.selectionModel = new FilterableDropdownSelectionModel()
+  }
+
+  applyClicked() {
+    if (this.selectionModel.isDirty()) {
+      this.dropdown.close()
+      if (!this.applyOnClose) {
+        this.apply.emit(this.selectionModel.diff())
+      }
+    }
+  }
+
+  dropdownOpenChange(open: boolean): void {
+    if (open) {
+      setTimeout(() => {
+        this.listFilterTextInput.nativeElement.focus();
+      }, 0)
+      if (this.editing) {
+        this.selectionModel.reset()
+      }
+      this.open.next()
+    } else {
+      this.filterText = ''
+      if (this.applyOnClose && this.selectionModel.isDirty()) {
+        this.apply.emit(this.selectionModel.diff())
+      }
+    }
+  }
+
+  listFilterEnter(): void {
+    let filtered = this.filterPipe.transform(this.items, this.filterText)
+    if (filtered.length == 1) {
+      this.selectionModel.toggle(filtered[0].id)
+      if (this.editing) {
+        this.applyClicked()
+      } else {
+        this.dropdown.close()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
+  <div class="selected-icon mr-1">
+    <ng-container *ngIf="isChecked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
+        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+      </svg>
+    </ng-container>
+    <ng-container *ngIf="isPartiallyChecked()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
+        <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
+      </svg>
+    </ng-container>
+    
+  </div>
+  <div class="mr-1">
+    <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
+    <ng-template #displayName><small>{{item.name}}</small></ng-template>
+  </div>
+  <div class="badge badge-light rounded-pill ml-auto mr-1">{{item.document_count}}</div>
+</button>

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

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

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

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

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

@@ -1,11 +1,16 @@
-<div class="form-group">
+<div class="form-group paperless-input-select">
   <label [for]="inputId">{{title}}</label>
   <div [class.input-group]="showPlusButton()">
-    <select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()"
-      [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
-      <option *ngIf="allowNull" [ngValue]="null" class="form-control">---</option>
-      <option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
-    </select>
+    <ng-select name="inputId" [(ngModel)]="value"
+      [disabled]="disabled"
+      [style.color]="textColor"
+      [style.background]="backgroundColor"
+      [clearable]="allowNull"
+      (change)="onChange(value)"
+      (blur)="onTouched()">
+      <ng-option *ngFor="let i of items" [value]="i.id">{{i.name}}</ng-option>
+    </ng-select>
+
     <div *ngIf="showPlusButton()" class="input-group-append">
       <button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()">
         <svg class="buttonicon" fill="currentColor">
@@ -15,4 +20,4 @@
     </div>
   </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-</div>
+</div>

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

@@ -0,0 +1 @@
+// styles for ng-select child are in styles.scss

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

@@ -1,30 +1,43 @@
-<div class="form-group">
-  <label for="exampleFormControlTextarea1">Tags</label>
+<div class="form-group paperless-input-select paperless-input-tags">
+  <label for="tags">Tags</label>
 
-  <div class="input-group">
-    <div class="form-control tags-form-control" id="tags">
-      <app-tag class="mr-2" *ngFor="let id of displayValue" [tag]="getTag(id)" (click)="removeTag(id)"></app-tag>
-    </div>
+  <div class="input-group flex-nowrap">
+    <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
+      [multiple]="true"
+      [closeOnSelect]="false"
+      [clearSearchOnAdd]="true"
+      [disabled]="disabled"
+      [hideSelected]="true"
+      (change)="ngSelectChange()">
 
-    <div class="input-group-append" ngbDropdown placement="top-right">
-      <button class="btn btn-outline-secondary" type="button" ngbDropdownToggle></button>
-      <div ngbDropdownMenu class="scrollable-menu shadow">
-        <button type="button" *ngFor="let tag of tags" ngbDropdownItem (click)="addTag(tag.id)">
-          <app-tag [tag]="tag"></app-tag>
-        </button>
-      </div>
-    </div>
+      <ng-template ng-label-tmp let-item="item">
+        <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
+          <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+          </svg>
+          <app-tag style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
+        </span>
+      </ng-template>
+      <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+        <div class="tag-wrap">
+          <div class="selected-icon d-inline-block mr-1">
+            <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+            </svg>
+          </div>
+          <app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
+        </div>
+      </ng-template>
+    </ng-select>
 
     <div class="input-group-append">
-
       <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
         <svg class="buttonicon" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#plus" />
         </svg>
       </button>
     </div>
-
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
 
-</div>
+</div>

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

@@ -1,10 +1,12 @@
-.tags-form-control {
-  height: auto;
+.selected-icon {
+  min-width: 1em;
+  min-height: 1em;
 }
 
+.tag-wrap {
+  font-size: 1rem;
+}
 
-.scrollable-menu {
-  height: auto;
-  max-height: 300px;
-  overflow-x: hidden;
-}
+.tag-wrap-delete {
+  cursor: pointer;
+}

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

@@ -21,7 +21,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
 
   onChange = (newValue: number[]) => {};
-  
+
   onTouched = () => {};
 
   writeValue(newValue: number[]): void {
@@ -66,29 +66,28 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   removeTag(id) {
     let index = this.displayValue.indexOf(id)
     if (index > -1) {
-      this.displayValue.splice(index, 1)
+      let oldValue = this.displayValue
+      oldValue.splice(index, 1)
+      this.displayValue = [...oldValue]
       this.onChange(this.displayValue)
     }
   }
 
-  addTag(id) {
-    let index = this.displayValue.indexOf(id)
-    if (index == -1) {
-      this.displayValue.push(id)
-      this.onChange(this.displayValue)
-    }
-  }
-
-
   createTag() {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
-        this.addTag(newTag.id)
+        this.displayValue = [...this.displayValue, newTag.id]
+        this.onChange(this.displayValue)
       })
     })
   }
 
+  ngSelectChange() {
+    this.value = this.displayValue
+    this.onChange(this.displayValue)
+  }
+
 }

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

@@ -0,0 +1,15 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="close" aria-label="Close" (click)="cancelClicked()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+
+  <app-input-select [items]="objects" [title]="message" [(ngModel)]="selected"></app-input-select>
+
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)" i18n>Select</button>
+</div>

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

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

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

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ObjectWithId } from 'src/app/data/object-with-id';
+
+@Component({
+  selector: 'app-select-dialog',
+  templateUrl: './select-dialog.component.html',
+  styleUrls: ['./select-dialog.component.scss']
+})
+
+export class SelectDialogComponent implements OnInit {
+  constructor(public activeModal: NgbActiveModal) { }
+
+  @Output()
+  public selectClicked = new EventEmitter()
+
+  @Input()
+  title = $localize`Select`
+
+  @Input()
+  message = $localize`Please select an object`
+
+  @Input()
+  objects: ObjectWithId[] = []
+
+  selected: number
+
+  ngOnInit(): void {
+  }
+
+  cancelClicked() {
+    this.activeModal.close()
+  }
+}

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

@@ -1,4 +1,4 @@
-<app-page-header title="Dashboard" subTitle="Welcome to paperless-ng!">
+<app-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
   <img src="assets/logo.svg" height="80" class="m-2 d-none d-md-block">
 </app-page-header>
 

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Meta } from '@angular/platform-browser';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 
@@ -11,8 +12,29 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 export class DashboardComponent implements OnInit {
 
   constructor(
-    private savedViewService: SavedViewService) { }
+    private savedViewService: SavedViewService,
+    private meta: Meta
+  ) { }
 
+  get displayName() {
+    let tagFullName = this.meta.getTag('name=full_name')
+    let tagUsername = this.meta.getTag('name=username')
+    if (tagFullName && tagFullName.content) {
+      return tagFullName.content
+    } else if (tagUsername && tagUsername.content) {
+      return tagUsername.content
+    } else {
+      return null
+    }
+  }
+
+  get subtitle() {
+    if (this.displayName) {
+      return $localize`Hello ${this.displayName}, welcome to Paperless-ng!`
+    } else {
+      return $localize`Welcome to Paperless-ng!`
+    }
+  }
 
   savedViews: PaperlessSavedView[] = []
 

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

@@ -1,13 +1,13 @@
 <app-widget-frame [title]="savedView.name">
 
-  <a header-buttons [routerLink]="" (click)="showAll()">Show all</a>
+  <a header-buttons [routerLink]="" (click)="showAll()" i18n>Show all</a>
 
 
   <table content class="table table-sm table-hover table-borderless">
     <thead>
       <tr>
-        <th>Created</th>
-        <th scope="col">Title</th>
+        <th i18n>Created</th>
+        <th scope="col" i18n>Title</th>
       </tr>
     </thead>
     <tbody>

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

@@ -23,7 +23,7 @@ export class SavedViewWidgetComponent implements OnInit {
   documents: PaperlessDocument[] = []
 
   ngOnInit(): void {
-    this.documentService.list(1,10,this.savedView.sort_field, this.savedView.sort_reverse, this.savedView.filter_rules).subscribe(result => {
+    this.documentService.listFiltered(1,10,this.savedView.sort_field, this.savedView.sort_reverse, this.savedView.filter_rules).subscribe(result => {
       this.documents = result.results
     })
   }

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

@@ -1,6 +1,6 @@
-<app-widget-frame title="Statistics">
+<app-widget-frame title="Statistics" i18n-title>
   <ng-container content>
-    <p class="card-text">Documents in inbox: {{statistics.documents_inbox}}</p>
-    <p class="card-text">Total documents: {{statistics.documents_total}}</p>
+    <p class="card-text" i18n>Documents in inbox: {{statistics.documents_inbox}}</p>
+    <p class="card-text" i18n>Total documents: {{statistics.documents_total}}</p>
   </ng-container>
 </app-widget-frame>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -1,16 +1,16 @@
-<app-widget-frame title="Upload new documents">
+<app-widget-frame title="Upload new documents" i18n-title>
 
   <div content>
     <form>
-      <ngx-file-drop dropZoneLabel="Drop documents here or" (onFileDrop)="dropped($event)"
+      <ngx-file-drop dropZoneLabel="Drop documents here or" browseBtnLabel="Browse files" (onFileDrop)="dropped($event)"
         (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)" dropZoneClassName="bg-light card"
         multiple="true" contentClassName="justify-content-center d-flex align-items-center p-5" [showBrowseBtn]=true
-        browseBtnClassName="btn btn-sm btn-outline-primary ml-2">
+        browseBtnClassName="btn btn-sm btn-outline-primary ml-2" i18n-dropZoneLabel i18n-browseBtnLabel>
 
       </ngx-file-drop>
     </form>
     <div *ngIf="uploadVisible" class="mt-3">
-      <p>Uploading {{uploadStatus.length}} file(s)</p>
+      <p i18n>Uploading {uploadStatus.length, plural, =1 {file} =other {{{uploadStatus.length}} files}}...</p>
       <ngb-progressbar [value]="loadedSum" [max]="totalSum" [striped]="true" [animated]="uploadStatus.length > 0">
       </ngb-progressbar>
     </div>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -2,7 +2,7 @@ import { HttpEventType } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { Toast, ToastService } from 'src/app/services/toast.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 
 interface UploadStatus {
@@ -60,7 +60,7 @@ export class UploadFileWidgetComponent implements OnInit {
             } else if (event.type == HttpEventType.Response) {
               this.uploadStatus.splice(this.uploadStatus.indexOf(uploadStatusObject), 1)
               this.completedFiles += 1
-              this.toastService.showToast(Toast.make("Information", "The document has been uploaded and will be processed by the consumer shortly."))
+              this.toastService.showInfo($localize`The document has been uploaded and will be processed by the consumer shortly.`)
             }
             
           }, error => {
@@ -68,11 +68,11 @@ export class UploadFileWidgetComponent implements OnInit {
             this.completedFiles += 1
             switch (error.status) {
               case 400: {
-                this.toastService.showToast(Toast.makeError(`There was an error while uploading the document: ${error.error.document}`))
+                this.toastService.showInfo($localize`There was an error while uploading the document: ${error.error.document}`)
                 break;
               }
               default: {
-                this.toastService.showToast(Toast.makeError("An error has occurred while uploading the document. Sorry!"))
+                this.toastService.showInfo($localize`An error has occurred while uploading the document. Sorry!`)
                 break;
               }
             }

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

@@ -1,16 +1,16 @@
-<app-widget-frame title="First steps">
+<app-widget-frame title="First steps" i18n-title>
 
   <ng-container content>
     <img src="assets/save-filter.png" class="float-right">
-    <p>Paperless is running! :)</p>
-    <p>You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list.
-      After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and have them displayed on the dashboard instead of this message.</p>
-    <p>Paperless offers some more features that try to make your life easier, such as:</p>
+    <p i18n>Paperless is running! :)</p>
+    <p i18n>You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list.
+      After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and they will appear on the dashboard instead of this message.</p>
+    <p i18n>Paperless offers some more features that try to make your life easier:</p>
     <ul>
-      <li>Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically.</li>
-      <li>You can configure paperless to read your mails and add documents from attached files.</li>
+      <li i18n>Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically.</li>
+      <li i18n>You can configure paperless to read your mails and add documents from attached files.</li>
     </ul>
-    <p>Consult the documentation on how to use these features. The section on basic usage also has some information on how to use paperless in general.</p>
+    <p i18n>Consult the documentation on how to use these features. The section on basic usage also has some information on how to use paperless in general.</p>
   </ng-container>
 
 </app-widget-frame>

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

@@ -1,9 +1,18 @@
 <app-page-header [(title)]="title">
+    <div class="input-group input-group-sm mr-5" *ngIf="getContentType() == 'application/pdf'">
+      <div class="input-group-prepend">
+        <div class="input-group-text" i18n>Page</div>
+      </div>
+      <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
+      <div class="input-group-append">
+        <div class="input-group-text" i18n>of {{previewNumPages}}</div>
+      </div>
+    </div>
+
     <button type="button" class="btn btn-sm btn-outline-danger mr-2" (click)="delete()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#trash" />
-        </svg>
-        <span class="d-none d-lg-inline"> Delete</span>
+        </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Delete</span>
     </button>
 
     <div class="btn-group mr-2">
@@ -11,25 +20,28 @@
         <a [href]="downloadUrl" class="btn btn-sm btn-outline-primary">
             <svg class="buttonicon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#download" />
-            </svg>
-            <span class="d-none d-lg-inline"> Download</span>
+            </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Download</span>
         </a>
 
         <div class="btn-group" ngbDropdown role="group" *ngIf="metadata?.has_archive_version">
             <button class="btn btn-sm btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
             <div class="dropdown-menu shadow" ngbDropdownMenu>
-                <a ngbDropdownItem [href]="downloadOriginalUrl">Download original</a>
+                <a ngbDropdownItem [href]="downloadOriginalUrl" i18n>Download original</a>
             </div>
         </div>
 
     </div>
 
+    <button type="button" class="btn btn-sm btn-outline-primary mr-2" (click)="moreLike()">
+        <svg class="buttonicon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#three-dots" />
+        </svg>&nbsp;<span class="d-none d-lg-inline" i18n>More like this</span>
+    </button>
 
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x" />
-        </svg>
-        <span class="d-none d-lg-inline"> Close</span>
+        </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Close</span>
     </button>
 </app-page-header>
 
@@ -41,27 +53,27 @@
 
             <ul ngbNav #nav="ngbNav" class="nav-tabs">
                 <li [ngbNavItem]="1">
-                    <a ngbNavLink>Details</a>
+                    <a ngbNavLink i18n>Details</a>
                     <ng-template ngbNavContent>
 
-                        <app-input-text title="Title" formControlName="title"></app-input-text>
+                        <app-input-text i18n-title title="Title" formControlName="title"></app-input-text>
                         <div class="form-group">
-                            <label for="archive_serial_number">Archive Serial Number</label>
+                            <label for="archive_serial_number" i18n>Archive serial number</label>
                             <input type="number" class="form-control" id="archive_serial_number"
                                 formControlName='archive_serial_number'>
                         </div>
-                        <app-input-date-time titleDate="Date created" formControlName="created"></app-input-date-time>
-                        <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent"
-                            allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
-                        <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type"
-                            allowNull="true" (createNew)="createDocumentType()"></app-input-select>
-                        <app-input-tags formControlName="tags" title="Tags"></app-input-tags>
+                        <app-input-date-time i18n-titleDate titleDate="Date created" formControlName="created"></app-input-date-time>
+                        <app-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true"
+                            (createNew)="createCorrespondent()"></app-input-select>
+                        <app-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true"
+                            (createNew)="createDocumentType()"></app-input-select>
+                        <app-input-tags formControlName="tags" i18n-title title="Tags"></app-input-tags>
 
                     </ng-template>
                 </li>
 
                 <li [ngbNavItem]="2">
-                    <a ngbNavLink>Content</a>
+                    <a ngbNavLink i18n>Content</a>
                     <ng-template ngbNavContent>
                         <div class="form-group">
                             <textarea class="form-control" id="content" rows="20" formControlName='content'></textarea>
@@ -70,48 +82,48 @@
                 </li>
 
                 <li [ngbNavItem]="3">
-                    <a ngbNavLink>Metadata</a>
+                    <a ngbNavLink i18n>Metadata</a>
                     <ng-template ngbNavContent>
 
                         <table class="table table-borderless">
                             <tbody>
                                 <tr>
-                                    <td>Date modified</td>
+                                    <td i18n>Date modified</td>
                                     <td>{{document.modified | date:'medium'}}</td>
                                 </tr>
                                 <tr>
-                                    <td>Date added</td>
+                                    <td i18n>Date added</td>
                                     <td>{{document.added | date:'medium'}}</td>
                                 </tr>
                                 <tr>
-                                    <td>Media filename</td>
+                                    <td i18n>Media filename</td>
                                     <td>{{metadata?.media_filename}}</td>
                                 </tr>
                                 <tr>
-                                    <td>Original MD5 Checksum</td>
+                                    <td i18n>Original MD5 checksum</td>
                                     <td>{{metadata?.original_checksum}}</td>
                                 </tr>
                                 <tr>
-                                    <td>Original file size</td>
+                                    <td i18n>Original file size</td>
                                     <td>{{metadata?.original_size | fileSize}}</td>
                                 </tr>
                                 <tr>
-                                    <td>Original mime type</td>
+                                    <td i18n>Original mime type</td>
                                     <td>{{metadata?.original_mime_type}}</td>
                                 </tr>
                                 <tr *ngIf="metadata?.has_archive_version">
-                                    <td>Archive MD5 Checksum</td>
+                                    <td i18n>Archive MD5 checksum</td>
                                     <td>{{metadata?.archive_checksum}}</td>
                                 </tr>
                                 <tr *ngIf="metadata?.has_archive_version">
-                                    <td>Archive file size</td>
+                                    <td i18n>Archive file size</td>
                                     <td>{{metadata?.archive_size | fileSize}}</td>
                                 </tr>
                             </tbody>
                         </table>
 
-                        <app-metadata-collapse title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></app-metadata-collapse>
-                        <app-metadata-collapse title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></app-metadata-collapse>
+                        <app-metadata-collapse i18n-title title="Original document metadata" [metadata]="metadata.original_metadata" *ngIf="metadata?.original_metadata?.length > 0"></app-metadata-collapse>
+                        <app-metadata-collapse i18n-title title="Archived document metadata" [metadata]="metadata.archive_metadata" *ngIf="metadata?.archive_metadata?.length > 0"></app-metadata-collapse>
 
                     </ng-template>
                 </li>
@@ -119,16 +131,15 @@
 
             <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
-            <button type="button" class="btn btn-outline-secondary" (click)="discard()">Discard</button>&nbsp;
-            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()">Save & edit
-                next</button>&nbsp;
-            <button type="submit" class="btn btn-primary">Save</button>&nbsp;
+            <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n>Discard</button>&nbsp;
+            <button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()" i18n>Save & next</button>&nbsp;
+            <button type="submit" class="btn btn-primary" i18n>Save</button>&nbsp;
         </form>
     </div>
 
     <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>
+        <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
       </div>
     </div>
 </div>

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

@@ -15,6 +15,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
 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';
+import { PDFDocumentProxy } from 'ng2-pdf-viewer';
 
 @Component({
   selector: 'app-document-detail',
@@ -47,8 +48,11 @@ export class DocumentDetailComponent implements OnInit {
     tags: new FormControl([])
   })
 
+  previewCurrentPage: number = 1
+  previewNumPages: number = 1
+
   constructor(
-    private documentsService: DocumentService, 
+    private documentsService: DocumentService,
     private route: ActivatedRoute,
     private correspondentService: CorrespondentService,
     private documentTypeService: DocumentTypeService,
@@ -126,7 +130,7 @@ export class DocumentDetailComponent implements OnInit {
     }, error => {this.router.navigate(['404'])})
   }
 
-  save() {    
+  save() {
     this.documentsService.update(this.document).subscribe(result => {
       this.close()
     })
@@ -154,21 +158,30 @@ export class DocumentDetailComponent implements OnInit {
 
   delete() {
     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.title = $localize`Confirm delete`
+    modal.componentInstance.messageBold = $localize`Do you really want to delete document "${this.document.title}"?`
+    modal.componentInstance.message = $localize`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.btnCaption = $localize`Delete document`
     modal.componentInstance.confirmClicked.subscribe(() => {
       this.documentsService.delete(this.document).subscribe(() => {
-        modal.close()  
+        modal.close()
         this.close()
       })
     })
 
   }
 
+  moreLike() {
+    this.router.navigate(["search"], {queryParams: {more_like:this.document.id}})
+  }
+
   hasNext() {
     return this.documentListViewService.hasNext(this.documentId)
   }
+
+  pdfPreviewLoaded(pdf: PDFDocumentProxy) {
+    this.previewNumPages = pdf.numPages
+  }
+
 }

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

@@ -15,7 +15,7 @@ export class MetadataCollapseComponent implements OnInit {
   metadata
 
   @Input()
-  title = "Metadata"
+  title = $localize`Metadata`
 
   ngOnInit(): void {
   }

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

@@ -0,0 +1,67 @@
+<div class="row">
+  <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
+    <button class="btn btn-sm btn-outline-danger" (click)="list.selectNone()">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
+      </svg>&nbsp;<ng-container i18n>Cancel</ng-container>
+    </button>
+  </div>
+  <div class="w-100 d-xl-none"></div>
+  <div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
+    <label class="mr-2 mb-0" i18n>Select:</label>
+    <div class="btn-group">
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
+        </svg>&nbsp;<ng-container i18n>Page</ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#check-all" />
+        </svg>&nbsp;<ng-container i18n>All</ng-container>
+      </button>
+    </div>
+  </div>
+  <div class="w-100 d-xl-none"></div>
+  <div class="col-auto mb-2 mb-xl-0">
+    <div class="d-flex">
+      <label class="ml-auto mt-1 mb-0 mr-2" i18n>Edit:</label>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" i18n-title
+        filterPlaceholder="Filter tags" i18n-filterPlaceholder
+        [items]="tags"
+        [editing]="true"
+        [multiple]="true"
+        [applyOnClose]="applyOnClose"
+        (open)="openTagsDropdown()"
+        [(selectionModel)]="tagSelectionModel"
+        (apply)="setTags($event)">
+      </app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" i18n-title
+        filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
+        [items]="correspondents"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        (open)="openCorrespondentDropdown()"
+        [(selectionModel)]="correspondentSelectionModel"
+        (apply)="setCorrespondents($event)">
+      </app-filterable-dropdown>
+      <app-filterable-dropdown class="mr-2 mr-md-3" title="Document type" icon="file-earmark-fill" i18n-title
+        filterPlaceholder="Filter document types" i18n-filterPlaceholder
+        [items]="documentTypes"
+        [editing]="true"
+        [applyOnClose]="applyOnClose"
+        (open)="openDocumentTypeDropdown()"
+        [(selectionModel)]="documentTypeSelectionModel"
+        (apply)="setDocumentTypes($event)">
+      </app-filterable-dropdown>
+    </div>
+  </div>
+  <div class="w-100 d-xl-none"></div>
+  <div class="col mb-2 mb-xl-0 d-flex">
+    <button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
+      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#trash" />
+      </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+    </button>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,232 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
+import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { TagService } from 'src/app/services/rest/tag.service';
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { DocumentService, SelectionDataItem } from 'src/app/services/rest/document.service';
+import { OpenDocumentsService } from 'src/app/services/open-documents.service';
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component';
+import { ChangedItems, FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
+import { MatchingModel } from 'src/app/data/matching-model';
+import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
+
+@Component({
+  selector: 'app-bulk-editor',
+  templateUrl: './bulk-editor.component.html',
+  styleUrls: ['./bulk-editor.component.scss']
+})
+export class BulkEditorComponent {
+
+  tags: PaperlessTag[]
+  correspondents: PaperlessCorrespondent[]
+  documentTypes: PaperlessDocumentType[]
+
+  tagSelectionModel = new FilterableDropdownSelectionModel()
+  correspondentSelectionModel = new FilterableDropdownSelectionModel()
+  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService,
+    public list: DocumentListViewService,
+    private documentService: DocumentService,
+    private modalService: NgbModal,
+    private openDocumentService: OpenDocumentsService,
+    private settings: SettingsService
+  ) { }
+
+  applyOnClose: boolean = this.settings.get(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE)
+  showConfirmationDialogs: boolean = this.settings.get(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS)
+
+  ngOnInit() {
+    this.tagService.listAll().subscribe(result => this.tags = result.results)
+    this.correspondentService.listAll().subscribe(result => this.correspondents = result.results)
+    this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
+  }
+
+  private executeBulkOperation(method: string, args): Observable<any> {
+    return this.documentService.bulkEdit(Array.from(this.list.selected), method, args).pipe(
+      tap(() => {
+        this.list.reload()
+        this.list.reduceSelectionToFilter()
+        this.list.selected.forEach(id => {
+          this.openDocumentService.refreshDocument(id)
+        })
+      })
+    )
+  }
+
+  private applySelectionData(items: SelectionDataItem[], selectionModel: FilterableDropdownSelectionModel) {
+    let selectionData = new Map<number, ToggleableItemState>()
+    items.forEach(i => {
+      if (i.document_count == this.list.selected.size) {
+        selectionData.set(i.id, ToggleableItemState.Selected)
+      } else if (i.document_count > 0) {
+        selectionData.set(i.id, ToggleableItemState.PartiallySelected)
+      }
+    })
+    selectionModel.init(selectionData)
+  }
+
+  openTagsDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_tags, this.tagSelectionModel)
+    })
+  }
+
+  openDocumentTypeDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_document_types, this.documentTypeSelectionModel)
+    })
+  }
+
+  openCorrespondentDropdown() {
+    this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
+      this.applySelectionData(s.selected_correspondents, this.correspondentSelectionModel)
+    })
+  }
+
+  private _localizeList(items: MatchingModel[]) {
+    if (items.length == 0) {
+      return ""
+    } else if (items.length == 1) {
+      return items[0].name
+    } else if (items.length == 2) {
+      return $localize`:This is for messages like 'modify "tag1" and "tag2"':"${items[0].name}" and "${items[1].name}"`
+    } else {
+      let list = items.slice(0, items.length - 1).map(i => $localize`"${i.name}"`).join($localize`:this is used to separate enumerations and should probably be a comma and a whitespace in most languages:, `)
+      return $localize`:this is for messages like 'modify "tag1", "tag2" and "tag3"':${list} and "${items[items.length - 1].name}"`
+    }
+  }
+
+  setTags(changedTags: ChangedItems) {
+    if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 0) return
+
+    if (this.showConfirmationDialogs) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+      modal.componentInstance.title = $localize`Confirm tags assignment`
+      if (changedTags.itemsToAdd.length == 1 && changedTags.itemsToRemove.length == 0) {
+        let tag = changedTags.itemsToAdd[0]
+        modal.componentInstance.message = $localize`This operation will add the tag "${tag.name}" to ${this.list.selected.size} selected document(s).`
+      } else if (changedTags.itemsToAdd.length > 1 && changedTags.itemsToRemove.length == 0) {
+        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} to ${this.list.selected.size} selected document(s).`
+      } else if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 1) {
+        let tag = changedTags.itemsToRemove[0]
+        modal.componentInstance.message = $localize`This operation will remove the tag "${tag.name}" from ${this.list.selected.size} selected document(s).`
+      } else if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length > 1) {
+        modal.componentInstance.message = $localize`This operation will remove the tags ${this._localizeList(changedTags.itemsToRemove)} from ${this.list.selected.size} selected document(s).`
+      } else {
+        modal.componentInstance.message = $localize`This operation will add the tags ${this._localizeList(changedTags.itemsToAdd)} and remove the tags ${this._localizeList(changedTags.itemsToRemove)} on ${this.list.selected.size} selected document(s).`
+      }
+      
+      modal.componentInstance.btnClass = "btn-warning"
+      modal.componentInstance.btnCaption = $localize`Confirm`
+      modal.componentInstance.confirmClicked.subscribe(() => {
+        this.performSetTags(modal, changedTags)
+      })
+    } else {
+      this.performSetTags(null, changedTags)
+    }
+  }
+
+  private performSetTags(modal, changedTags: ChangedItems) {
+    this.executeBulkOperation('modify_tags', {"add_tags": changedTags.itemsToAdd.map(t => t.id), "remove_tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
+      response => {
+        if (modal) {
+          modal.close()
+        }
+      }
+    )
+  }
+
+  setCorrespondents(changedCorrespondents: ChangedItems) {
+    if (changedCorrespondents.itemsToAdd.length == 0 && changedCorrespondents.itemsToRemove.length == 0) return
+
+    let correspondent = changedCorrespondents.itemsToAdd.length > 0 ? changedCorrespondents.itemsToAdd[0] : null
+
+    if (this.showConfirmationDialogs) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+      modal.componentInstance.title = $localize`Confirm correspondent assignment`
+      if (correspondent) {
+        modal.componentInstance.message = $localize`This operation will assign the correspondent "${correspondent.name}" to ${this.list.selected.size} selected document(s).`
+      } else {
+        modal.componentInstance.message = $localize`This operation will remove the correspondent from ${this.list.selected.size} selected document(s).`
+      }
+      modal.componentInstance.btnClass = "btn-warning"
+      modal.componentInstance.btnCaption = $localize`Confirm`
+      modal.componentInstance.confirmClicked.subscribe(() => {
+        this.performSetCorrespondents(modal, correspondent)
+      })
+    } else {
+      this.performSetCorrespondents(null, correspondent)
+    }
+  }
+
+  private performSetCorrespondents(modal, correspondent: MatchingModel) {
+    this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
+      response => {
+        if (modal) {
+          modal.close()
+        }
+      }
+    )
+  }
+
+  setDocumentTypes(changedDocumentTypes: ChangedItems) {
+    if (changedDocumentTypes.itemsToAdd.length == 0 && changedDocumentTypes.itemsToRemove.length == 0) return
+
+    let documentType = changedDocumentTypes.itemsToAdd.length > 0 ? changedDocumentTypes.itemsToAdd[0] : null
+
+    if (this.showConfirmationDialogs) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+      modal.componentInstance.title = $localize`Confirm document type assignment`
+      if (documentType) {
+        modal.componentInstance.message = $localize`This operation will assign the document type "${documentType.name}" to ${this.list.selected.size} selected document(s).`
+      } else {
+        modal.componentInstance.message = $localize`This operation will remove the document type from ${this.list.selected.size} selected document(s).`
+      }
+      modal.componentInstance.btnClass = "btn-warning"
+      modal.componentInstance.btnCaption = $localize`Confirm`
+      modal.componentInstance.confirmClicked.subscribe(() => {
+        this.performSetDocumentTypes(modal, documentType)
+      })
+    } else {
+      this.performSetDocumentTypes(null, documentType)
+    }
+  }
+
+  private performSetDocumentTypes(modal, documentType) {
+    this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe(
+      response => {
+        if (modal) {
+          modal.close()
+        }
+      }
+    )
+  }
+
+  applyDelete() {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.delayConfirm(5)
+    modal.componentInstance.title = $localize`Delete confirm`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = "btn-danger"
+    modal.componentInstance.btnCaption = $localize`Delete document(s)`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      this.executeBulkOperation("delete", {}).subscribe(
+        response => {
+          modal.close()
+        }
+      )
+    })
+  }
+}

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

@@ -1,7 +1,15 @@
-<div class="card mb-3 bg-light shadow-sm">
+<div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
   <div class="row no-gutters">
-    <div class="col-md-2 d-none d-lg-block">
-      <img [src]="getThumbUrl()" class="card-img doc-img border-right">
+    <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="setSelected(selectable ? !selected : false)">
+
+      <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)">
+          <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
+        </div>
+      </div>
+
     </div>
     <div class="col">
       <div class="card-body">
@@ -9,11 +17,11 @@
         <div class="d-flex justify-content-between align-items-center">
           <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>
+              <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="" title="Filter by correspondent" i18n-title (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 | 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>
+            <app-tag [tag]="t" linkTitle="Filter by tag" i18n-linkTitle *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>
         </div>
@@ -23,32 +31,40 @@
         </p>
 
 
-        <div class="d-flex justify-content-between align-items-center">
+        <div class="d-flex align-items-center">
           <div class="btn-group">
+            <a routerLink="/search" [queryParams]="{'more_like': document.id}" class="btn btn-sm btn-outline-secondary" *ngIf="moreLikeThis">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+              </svg>&nbsp;<ng-container i18n>More like this</ng-container>
+            </a>
             <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary">
               <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
+              </svg>&nbsp;<ng-container i18n>Edit</ng-container>
             </a>
             <a type="button" class="btn btn-sm btn-outline-secondary" [href]="getPreviewUrl()">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                 <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
-              </svg>
-              View
+              </svg>&nbsp;<ng-container i18n>View</ng-container>
             </a>
             <a type="button" class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                 <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-              </svg>
-              Download
+              </svg>&nbsp;<ng-container i18n>Download</ng-container>
             </a>
+            
           </div>
-          <small class="text-muted">Created: {{document.created | date}}</small>
-        </div>
 
+          <small class="text-muted ml-auto" i18n>Score:</small>
+
+          <ngb-progressbar *ngIf="searchScore" [type]="searchScoreClass" [value]="searchScore" class="search-score-bar mx-2" [max]="1"></ngb-progressbar>
+          
+          <small class="text-muted" i18n>Created: {{document.created | date}}</small>
+        </div>
+        
       </div>
     </div>
   </div>

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

@@ -1,5 +1,6 @@
+@import "/src/theme";
+
 .result-content {
-  color: darkgray;
   overflow-wrap: anywhere;
 }
 
@@ -8,5 +9,31 @@
   object-position: top;
   height: 100%;
   position: absolute;
+  mix-blend-mode: multiply;
+}
 
+.search-score-bar {
+  width: 100px;
+  height: 5px;
+  margin-top: 2px;
+}
+
+.document-card-check {
+  display: none
+}
+
+.document-card:hover .document-card-check {
+  display: block;
+}
+
+.card-selected {
+  border-color: $primary;
+}
+
+.doc-img-background {
+  background-color: white;
+}
+
+.doc-img-background-selected {
+  background-color: $primaryFaded;
 }

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

@@ -12,6 +12,24 @@ export class DocumentCardLargeComponent implements OnInit {
 
   constructor(private documentService: DocumentService, private sanitizer: DomSanitizer) { }
 
+  @Input()
+  selected = false
+
+  setSelected(value: boolean) {
+    this.selected = value
+    this.selectedChange.emit(value)
+  }
+
+  @Output()
+  selectedChange = new EventEmitter<boolean>()
+
+  get selectable() {
+    return this.selectedChange.observers.length > 0
+  }
+
+  @Input()
+  moreLikeThis: boolean = false
+
   @Input()
   document: PaperlessDocument
 
@@ -24,6 +42,19 @@ export class DocumentCardLargeComponent implements OnInit {
   @Output()
   clickCorrespondent = new EventEmitter<number>()
 
+  @Input()
+  searchScore: number
+
+  get searchScoreClass() {
+    if (this.searchScore > 0.7) {
+      return "success"
+    } else if (this.searchScore > 0.3) {
+      return "warning"
+    } else {
+      return "danger"
+    }
+  }
+
   ngOnInit(): void {
   }
 

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

@@ -1,10 +1,18 @@
-<div class="col p-2 h-100" style="width: 16rem;">
-  <div class="card h-100 shadow-sm">
-    <div class="border-bottom">
-      <img class="card-img doc-img" [src]="getThumbUrl()">
+<div class="col p-2 h-100">
+  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
+    <div class="border-bottom" [class.doc-img-background-selected]="selected">
+      <img class="card-img doc-img" [src]="getThumbUrl()" (click)="setSelected(!selected)">
+
+      <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)">
+          <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
+        </div>
+      </div>
+
       <div style="top: 0; right: 0; font-size: large" class="text-right position-absolute mr-1">
         <div *ngFor="let t of getTagsLimited$() | async">
-          <app-tag [tag]="t" (click)="clickTag.emit(t.id)" [clickable]="true" linkTitle="Filter by tag"></app-tag>
+          <app-tag [tag]="t" (click)="clickTag.emit(t.id)" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
         </div>
         <div *ngIf="moreTags">
           <span class="badge badge-secondary">+ {{moreTags}}</span>
@@ -15,34 +23,34 @@
     <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>:
+          <a [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
         {{document.title | documentTitle}}
       </p>
     </div>
     <div class="card-footer">
 
-      <div class="d-flex justify-content-between align-items-center ml-n2">
+      <div class="d-flex justify-content-between align-items-center mx-n2">
         <div class="btn-group">
-          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit">
+          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Edit" i18n-title>
             <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>
           </a>
-          <a [href]="getPreviewUrl()" class="btn btn-sm btn-outline-secondary" title="View in browser">
+          <a [href]="getPreviewUrl()" class="btn btn-sm btn-outline-secondary" title="View in browser" i18n-title>
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
               <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
             </svg>
           </a>
-          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download">
+          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title>
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
               <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
             </svg>
           </a>
         </div>
-        <small class="text-muted">{{document.created | date}}</small>
+        <small class="text-muted pl-1">{{document.created | date}}</small>
       </div>
 
     </div>

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

@@ -1,5 +1,36 @@
+@import "/src/theme";
+
 .doc-img {
   object-fit: cover;
   object-position: top;
   height: 200px;
-}
+  mix-blend-mode: multiply;
+}
+
+.document-card-check {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  .custom-control {
+    margin-left: 4px;
+    margin-right: -3px;
+  }
+}
+
+.document-card:hover .document-card-check {
+  display: block;
+}
+
+.card-selected {
+  border-color: $primary;
+
+  .document-card-check {
+    display: block;
+  }
+}
+
+.doc-img-background-selected {
+  background-color: $primaryFaded;
+}

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

@@ -12,6 +12,17 @@ export class DocumentCardSmallComponent implements OnInit {
 
   constructor(private documentService: DocumentService) { }
 
+  @Input()
+  selected = false
+
+  setSelected(value: boolean) {
+    this.selected = value
+    this.selectedChange.emit(value)
+  }
+
+  @Output()
+  selectedChange = new EventEmitter<boolean>()
+
   @Input()
   document: PaperlessDocument
 

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

@@ -1,4 +1,19 @@
 <app-page-header [title]="getTitle()">
+
+  <div ngbDropdown class="d-inline-block mr-2">
+    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
+      <svg class="toolbaricon" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
+      </svg>&nbsp;<ng-container i18n>Select</ng-container>
+      
+    </button>
+    <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
+      <button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
+      <button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
+      <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
+    </div>
+  </div>
+
   <div class="btn-group btn-group-toggle" ngbRadioGroup [(ngModel)]="displayMode"
     (ngModelChange)="saveDisplayMode()">
     <label ngbButtonLabel class="btn-outline-primary btn-sm">
@@ -23,7 +38,7 @@
 
   <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>
+      <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort by</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
         <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
           [class.active]="list.sortField == f.field">{{f.name}}</button>
@@ -46,15 +61,15 @@
   <div class="btn-group ml-2">
 
     <div class="btn-group" ngbDropdown role="group">
-      <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle>Views</button>
+      <button class="btn btn-sm btn-outline-primary dropdown-toggle" ngbDropdownToggle i18n>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>
+        <button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.savedViewId" i18n>Save "{{list.savedViewTitle}}"</button>
+        <button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
       </div>
     </div>
 
@@ -63,31 +78,40 @@
 </app-page-header>
 
 <div class="w-100 mb-2 mb-sm-4">
-  <app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
+  <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>
 
 <div class="d-flex justify-content-between align-items-center">
-  <p>{{list.collectionSize || 0}} document(s) <span *ngIf="isFiltered">(filtered)</span></p>
+  <p i18n *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of {{list.collectionSize || 0}} {list.collectionSize, plural, =1 {document} other {documents}}</p>
+  <p *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {1 document} other {{{list.collectionSize || 0}} documents}}</p>
   <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
   [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">
-  <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 [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"   *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
   </app-document-card-large>
 </div>
 
 <table class="table table-sm border shadow-sm" *ngIf="displayMode == 'details'">
   <thead>
-    <th class="d-none d-lg-table-cell">ASN</th>
-    <th class="d-none d-md-table-cell">Correspondent</th>
-    <th>Title</th>
-    <th class="d-none d-xl-table-cell">Document type</th>
-    <th>Created</th>
-    <th class="d-none d-xl-table-cell">Added</th>
+    <th></th>
+    <th class="d-none d-lg-table-cell" i18n>ASN</th>
+    <th class="d-none d-md-table-cell" i18n>Correspondent</th>
+    <th i18n>Title</th>
+    <th class="d-none d-xl-table-cell" i18n>Document type</th>
+    <th i18n>Created</th>
+    <th class="d-none d-xl-table-cell" i18n>Added</th>
   </thead>
   <tbody>
-    <tr *ngFor="let d of list.documents">
+    <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
+      <td>
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" class="custom-control-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (change)="list.setSelected(d, $event.target.checked)">
+          <label class="custom-control-label" for="docCheck{{d.id}}"></label>
+        </div>
+      </td>
       <td class="d-none d-lg-table-cell">
         {{d.archive_serial_number}}
       </td>
@@ -115,7 +139,6 @@
   </tbody>
 </table>
 
-
-<div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
+<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
+  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

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

@@ -0,0 +1,27 @@
+@import "/src/theme";
+
+.table-row-selected {
+  background-color: $primaryFaded;
+}
+
+$paperless-card-breakpoints: (
+  0: 2, // xs
+  768px: 3, //md
+  992px: 4, //lg
+  1200px: 5, //xl
+  1400px: 6, // xxl
+  1600px: 7,
+  1800px: 8,
+  2000px: 9
+);
+
+.row-cols-paperless-cards {
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: 100% / $n_cols;
+      }
+    }
+  }
+}

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

@@ -1,13 +1,13 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { FILTER_CORRESPONDENT } from 'src/app/data/filter-rule-type';
+import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
 import { SavedViewService } from 'src/app/services/rest/saved-view.service';
 import { Toast, ToastService } from 'src/app/services/toast.service';
-import { FilterEditorComponent } from '../filter-editor/filter-editor.component';
+import { FilterEditorComponent } from './filter-editor/filter-editor.component';
 import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
 
 @Component({
@@ -23,7 +23,7 @@ export class DocumentListComponent implements OnInit {
     public route: ActivatedRoute,
     private router: Router,
     private toastService: ToastService,
-    public modalService: NgbModal) { }
+    private modalService: NgbModal) { }
 
   @ViewChild("filterEditor")
   private filterEditor: FilterEditorComponent
@@ -35,13 +35,17 @@ export class DocumentListComponent implements OnInit {
   }
 
   getTitle() {
-    return this.list.savedViewTitle || "Documents"
+    return this.list.savedViewTitle || $localize`Documents`
   }
 
   getSortFields() {
     return DOCUMENT_SORT_FIELDS
   }
 
+  get isBulkEditing(): boolean {
+    return this.list.selected.size > 0
+  }
+
   saveDisplayMode() {
     localStorage.setItem('document-list:displayMode', this.displayMode)
   }
@@ -77,7 +81,7 @@ export class DocumentListComponent implements OnInit {
 
   saveViewConfig() {
     this.savedViewService.update(this.list.savedView).subscribe(result => {
-      this.toastService.showToast(Toast.make("Information", `View "${this.list.savedView.name}" saved successfully.`))
+      this.toastService.showInfo($localize`View "${this.list.savedView.name}" saved successfully.`)
     })
 
   }
@@ -96,21 +100,33 @@ export class DocumentListComponent implements OnInit {
       }
       this.savedViewService.create(savedView).subscribe(() => {
         modal.close()
-        this.toastService.showToast(Toast.make("Information", `View "${savedView.name}" created successfully.`))
+        this.toastService.showInfo($localize`View "${savedView.name}" created successfully.`)
       })
     })
   }
 
   clickTag(tagID: number) {
-    this.filterEditor.toggleTag(tagID)
+    this.list.selectNone()
+    setTimeout(() => {
+      this.filterEditor.toggleTag(tagID)
+    })
   }
 
   clickCorrespondent(correspondentID: number) {
-    this.filterEditor.toggleCorrespondent(correspondentID)
+    this.list.selectNone()
+    setTimeout(() => {
+      this.filterEditor.toggleCorrespondent(correspondentID)
+    })
   }
 
   clickDocumentType(documentTypeID: number) {
-    this.filterEditor.toggleDocumentType(documentTypeID)
+    this.list.selectNone()
+    setTimeout(() => {
+      this.filterEditor.toggleDocumentType(documentTypeID)
+    })
   }
 
+  trackByDocumentId(index, item: PaperlessDocument) {
+    return item.id
+  }
 }

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

@@ -0,0 +1,51 @@
+<div class="row">
+   <div class="col mb-2 mb-xl-0">
+     <div class="form-inline d-flex">
+         <label class="text-muted mr-2" i18n>Filter by:</label>
+         <input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder>
+     </div>
+  </div>
+  <div class="w-100 d-xl-none"></div>
+    <div class="col col-xl-auto mb-2 mb-xl-0">
+      <div class="d-flex">
+        <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" i18n-title
+          filterPlaceholder="Filter tags" i18n-filterPlaceholder
+          [items]="tags"
+          [(selectionModel)]="tagSelectionModel"
+          (selectionModelChange)="updateRules()"
+          [multiple]="true"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+        <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" i18n-title
+          filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
+          [items]="correspondents"
+          [(selectionModel)]="correspondentSelectionModel"
+          (selectionModelChange)="updateRules()"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+        <app-filterable-dropdown class="mr-2 mr-md-3" title="Document type" icon="file-earmark-fill" i18n-title
+          filterPlaceholder="Filter document types" i18n-filterPlaceholder
+          [items]="documentTypes"
+          [(selectionModel)]="documentTypeSelectionModel"
+          (selectionModelChange)="updateRules()"
+          [allowSelectNone]="true"></app-filterable-dropdown>
+        <app-date-dropdown class="mr-2 mr-md-3"
+          title="Created" i18n-title
+          (datesSet)="updateRules()"
+          [(dateBefore)]="dateCreatedBefore"
+          [(dateAfter)]="dateCreatedAfter"></app-date-dropdown>
+        <app-date-dropdown
+          [(dateBefore)]="dateAddedBefore"
+          [(dateAfter)]="dateAddedAfter"
+          title="Added" i18n-title
+          (datesSet)="updateRules()"></app-date-dropdown>
+     </div>
+   </div>
+   <div class="w-100 d-xl-none"></div>
+   <div class="col col-xl-auto mb-2 mb-xl-0">
+     <button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
+       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+       </svg>&nbsp;<ng-container i18n>Clear all filters</ng-container>
+       
+     </button>
+   </div>
+</div>

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

@@ -0,0 +1,203 @@
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
+import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { TagService } from 'src/app/services/rest/tag.service';
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { FilterRule } from 'src/app/data/filter-rule';
+import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_ANY_TAG, FILTER_HAS_TAG, FILTER_TITLE } from 'src/app/data/filter-rule-type';
+import { FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
+
+@Component({
+  selector: 'app-filter-editor',
+  templateUrl: './filter-editor.component.html',
+  styleUrls: ['./filter-editor.component.scss']
+})
+export class FilterEditorComponent implements OnInit, OnDestroy {
+
+  generateFilterName() {
+    if (this.filterRules.length == 1) {
+      let rule = this.filterRules[0]
+      switch(this.filterRules[0].rule_type) {
+
+        case FILTER_CORRESPONDENT:
+          return $localize`Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
+
+        case FILTER_DOCUMENT_TYPE:
+          return $localize`Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
+
+        case FILTER_HAS_TAG:
+          return $localize`Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
+
+      }
+    }
+
+    return ""
+  }
+
+  constructor(
+    private documentTypeService: DocumentTypeService,
+    private tagService: TagService,
+    private correspondentService: CorrespondentService
+  ) { }
+
+  tags: PaperlessTag[] = []
+  correspondents: PaperlessCorrespondent[] = []
+  documentTypes: PaperlessDocumentType[] = []
+
+  _titleFilter = ""
+
+  tagSelectionModel = new FilterableDropdownSelectionModel()
+  correspondentSelectionModel = new FilterableDropdownSelectionModel()
+  documentTypeSelectionModel = new FilterableDropdownSelectionModel()
+
+  dateCreatedBefore: string
+  dateCreatedAfter: string
+  dateAddedBefore: string
+  dateAddedAfter: string
+
+  @Input()
+  set filterRules (value: FilterRule[]) {
+    this.documentTypeSelectionModel.clear(false)
+    this.tagSelectionModel.clear(false)
+    this.correspondentSelectionModel.clear(false)
+
+    value.forEach(rule => {
+      switch (rule.rule_type) {
+        case FILTER_TITLE:
+          this._titleFilter = rule.value
+          break
+        case FILTER_CREATED_AFTER:
+          this.dateCreatedAfter = rule.value
+          break
+        case FILTER_CREATED_BEFORE:
+          this.dateCreatedBefore = rule.value
+          break
+        case FILTER_ADDED_AFTER:
+          this.dateAddedAfter = rule.value
+          break
+        case FILTER_ADDED_BEFORE:
+          this.dateAddedBefore = rule.value
+          break
+        case FILTER_HAS_TAG:
+          this.tagSelectionModel.set(rule.value ? +rule.value : null, ToggleableItemState.Selected, false)
+          break
+        case FILTER_HAS_ANY_TAG:
+          this.tagSelectionModel.set(null, ToggleableItemState.Selected, false)
+          break
+        case FILTER_CORRESPONDENT:
+          this.correspondentSelectionModel.set(rule.value ? +rule.value : null, ToggleableItemState.Selected, false)
+          break
+        case FILTER_DOCUMENT_TYPE:
+          this.documentTypeSelectionModel.set(rule.value ? +rule.value : null, ToggleableItemState.Selected, false)
+          break
+      }
+    })
+  }
+
+  get filterRules() {
+    let filterRules: FilterRule[] = []
+    if (this._titleFilter) {
+      filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
+    }
+    if (this.tagSelectionModel.isNoneSelected()) {
+      filterRules.push({rule_type: FILTER_HAS_ANY_TAG, value: "false"})
+    } else {
+      this.tagSelectionModel.getSelectedItems().filter(tag => tag.id).forEach(tag => {
+        filterRules.push({rule_type: FILTER_HAS_TAG, value: tag.id?.toString()})
+      })  
+    }
+    this.correspondentSelectionModel.getSelectedItems().forEach(correspondent => {
+      filterRules.push({rule_type: FILTER_CORRESPONDENT, value: correspondent.id?.toString()})
+    })
+    this.documentTypeSelectionModel.getSelectedItems().forEach(documentType => {
+      filterRules.push({rule_type: FILTER_DOCUMENT_TYPE, value: documentType.id?.toString()})
+    })
+    if (this.dateCreatedBefore) {
+      filterRules.push({rule_type: FILTER_CREATED_BEFORE, value: this.dateCreatedBefore})
+    }
+    if (this.dateCreatedAfter) {
+      filterRules.push({rule_type: FILTER_CREATED_AFTER, value: this.dateCreatedAfter})
+    }
+    if (this.dateAddedBefore) {
+      filterRules.push({rule_type: FILTER_ADDED_BEFORE, value: this.dateAddedBefore})
+    }
+    if (this.dateAddedAfter) {
+      filterRules.push({rule_type: FILTER_ADDED_AFTER, value: this.dateAddedAfter})
+    }
+    return filterRules
+  }
+
+  @Output()
+  filterRulesChange = new EventEmitter<FilterRule[]>()
+
+  updateRules() {
+    this.filterRulesChange.next(this.filterRules)
+  }
+
+  hasFilters() {
+    return this._titleFilter || 
+      this.dateAddedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
+      this.tagSelectionModel.selectionSize() || this.correspondentSelectionModel.selectionSize() || this.documentTypeSelectionModel.selectionSize()
+  }
+
+  get titleFilter() {
+    return this._titleFilter
+  }
+
+  set titleFilter(value) {
+    this.titleFilterDebounce.next(value)
+  }
+
+  titleFilterDebounce: Subject<string>
+  subscription: Subscription
+
+  ngOnInit() {
+    this.tagService.listAll().subscribe(result => this.tags = result.results)
+    this.correspondentService.listAll().subscribe(result => this.correspondents = result.results)
+    this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
+
+    this.titleFilterDebounce = new Subject<string>()
+
+    this.subscription = this.titleFilterDebounce.pipe(
+      debounceTime(400),
+      distinctUntilChanged()
+    ).subscribe(title => {
+      this._titleFilter = title
+      this.updateRules()
+    })
+  }
+
+  ngOnDestroy() {
+    this.titleFilterDebounce.complete()
+  }
+
+  clearSelected() {
+    this._titleFilter = ""
+    this.tagSelectionModel.clear(false)
+    this.documentTypeSelectionModel.clear(false)
+    this.correspondentSelectionModel.clear(false)
+    this.dateAddedBefore = null
+    this.dateAddedAfter = null
+    this.dateCreatedBefore = null
+    this.dateCreatedAfter = null
+    this.updateRules()
+  }
+
+  toggleTag(tagId: number) {
+    this.tagSelectionModel.toggle(tagId)
+  }
+
+  toggleCorrespondent(correspondentId: number) {
+    this.correspondentSelectionModel.toggle(correspondentId)
+  }
+
+  toggleDocumentType(documentTypeId: number) {
+    this.documentTypeSelectionModel.toggle(documentTypeId)
+  }
+
+}

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

@@ -1,17 +1,17 @@
 <form [formGroup]="saveViewConfigForm" class="needs-validation" novalidate (ngSubmit)="save()">
   <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">Save current view</h4>
+    <h4 class="modal-title" id="modal-basic-title" i18n>Save current view</h4>
     <button type="button" class="close" aria-label="Close" (click)="cancel()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
-    <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 on dashboard" formControlName="showOnDashboard"></app-input-check>
+    <app-input-text i18n-title title="Name" formControlName="name"></app-input-text>
+    <app-input-check i18n-title title="Show in sidebar" formControlName="showInSideBar"></app-input-check>
+    <app-input-check i18n-title 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>
-    <button type="submit" class="btn btn-primary">Save</button>
+    <button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n>Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n>Save</button>
   </div>
 </form>

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

@@ -1,43 +0,0 @@
-  <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.ts

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

@@ -1,12 +0,0 @@
-<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
-  <div class="selected-icon mr-1">
-    <svg *ngIf="selected" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
-    </svg>
-  </div>
-  <div class="mr-1">
-    <app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
-    <ng-template #displayName><small>{{item.name}}</small></ng-template>
-  </div>
-  <div class="badge badge-light rounded-pill ml-auto mr-1">{{item.document_count}}</div>
-</button>

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

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

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

@@ -1,32 +0,0 @@
-import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-
-@Component({
-  selector: 'app-filter-dropdown-button',
-  templateUrl: './filter-dropdown-button.component.html',
-  styleUrls: ['./filter-dropdown-button.component.scss']
-})
-export class FilterDropdownButtonComponent implements OnInit {
-
-  @Input()
-  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent
-
-  @Input()
-  selected: boolean
-
-  @Output()
-  toggle = new EventEmitter()
-
-  isTag: boolean
-
-  ngOnInit() {
-    this.isTag = 'is_inbox_tag' in this.item // ~ this.item instanceof PaperlessTag
-  }
-
-  toggleItem(): void {
-    this.selected = !this.selected
-    this.toggle.emit(this.item)
-  }
-}

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

@@ -1,29 +0,0 @@
-<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #filterDropdown="ngbDropdown">
-  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
-    <div class="d-none d-md-inline">{{title}}</div>
-    <div class="d-inline-block d-md-none">
-      <svg class="toolbaricon" fill="currentColor">
-        <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
-      </svg>
-    </div>
-    <ng-container *ngIf="itemsSelected?.length > 0">
-      <div class="badge bg-secondary text-light rounded-pill badge-corner">
-        {{itemsSelected?.length}}
-      </div>
-    </ng-container>
-  </button>
-  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
-    <div class="list-group list-group-flush">
-      <div class="list-group-item">
-        <div class="input-group input-group-sm">
-          <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
-        </div>
-      </div>
-      <div *ngIf="items" class="items">
-        <ng-container *ngFor="let item of items | filter: filterText; let i = index">
-          <app-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button>
-        </ng-container>
-      </div>
-    </div>
-  </div>
-</div>

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

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

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

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

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

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

@@ -7,14 +7,13 @@
   </div>
   <div class="modal-body">
     
-    <app-input-text title="Name" formControlName="name"></app-input-text>
-    <app-input-text title="Match" formControlName="match"></app-input-text>
-    <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-    <app-input-check title="Case insensitive" formControlName="is_insensitive"></app-input-check>
-
+    <app-input-text i18n-title title="Name" formControlName="name"></app-input-text>
+    <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+    <app-input-text i18n-title title="Match" formControlName="match" i18n-hint hint="Auto matching does not require you to fill in this field."></app-input-text>
+    <app-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" i18n-hint hint="Auto matching ignores this option."></app-input-check>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
-    <button type="submit" class="btn btn-primary">Save</button>
+    <button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n>Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n>Save</button>
   </div>
 </form>

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

@@ -14,7 +14,19 @@ import { ToastService } from 'src/app/services/toast.service';
 export class CorrespondentEditDialogComponent extends EditDialogComponent<PaperlessCorrespondent> {
 
   constructor(service: CorrespondentService, activeModal: NgbActiveModal, toastService: ToastService) {
-    super(service, activeModal, toastService, 'correspondent')
+    super(service, activeModal, toastService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new correspondent`
+  }
+
+  getEditTitle() {
+    return $localize`Edit correspondent`
+  }
+
+  getSaveErrorMessage(error: string) {
+    return $localize`Could not save correspondent: ${error}`
   }
 
   getForm(): FormGroup {

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

@@ -1,7 +1,5 @@
-<app-page-header title="Correspondents">
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
-    Create
-  </button>
+<app-page-header title="Correspondents" i18n-title>
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" i18n>Create</button>
 </app-page-header>
 
 <div class="row m-0 justify-content-end">
@@ -11,11 +9,11 @@
 <table class="table table-striped border shadow">
     <thead>
     <tr>
-      <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
-      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)">Matching</th>
-      <th scope="col" sortable="document_count" (sort)="onSort($event)">Document count</th>
-      <th scope="col" sortable="last_correspondence" (sort)="onSort($event)">Last correspondence</th>
-      <th scope="col">Actions</th>
+      <th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" sortable="last_correspondence" (sort)="onSort($event)" i18n>Last correspondence</th>
+      <th scope="col" i18n>Actions</th>
     </tr>
     </thead>
     <tbody>
@@ -29,21 +27,18 @@
             <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
+              </svg>&nbsp;<ng-container i18n>Documents</ng-container>
             </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
+              </svg>&nbsp;<ng-container i18n>Edit</ng-container>
             </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
+              </svg>&nbsp;<ng-container i18n>Delete</ng-container>
             </button>
           </div>
         </td>

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

@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component } from '@angular/core';
 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';
@@ -16,20 +15,16 @@ import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/co
 export class CorrespondentListComponent extends GenericListComponent<PaperlessCorrespondent> {
 
   constructor(correspondentsService: CorrespondentService, modalService: NgbModal,
-    private router: Router,
     private list: DocumentListViewService
   ) { 
     super(correspondentsService,modalService,CorrespondentEditDialogComponent)
   }
 
-  getObjectName(object: PaperlessCorrespondent) {
-    return `correspondent '${object.name}'`
+  getDeleteMessage(object: PaperlessCorrespondent) {
+    return $localize`Do you really want to delete the correspondent "${object.name}"?`
   }
 
   filterDocuments(object: PaperlessCorrespondent) {
-    this.list.documentListView.filter_rules = [
-      {rule_type: FILTER_CORRESPONDENT, value: object.id.toString()}
-    ]
-    this.router.navigate(["documents"])
+    this.list.quickFilter([{rule_type: FILTER_CORRESPONDENT, value: object.id.toString()}])
   }
 }

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

@@ -7,14 +7,14 @@
     </div>
     <div class="modal-body">
       
-      <app-input-text title="Name" formControlName="name"></app-input-text>
-      <app-input-text title="Match" formControlName="match"></app-input-text>
-      <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-      <app-input-check title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+      <app-input-text i18n-title title="Name" formControlName="name"></app-input-text>
+      <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+      <app-input-text i18n-title title="Match" formControlName="match" i18n-hint hint="Auto matching does not require you to fill in this field."></app-input-text>
+      <app-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" i18n-hint hint="Auto matching ignores this option."></app-input-check>
 
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
-      <button type="submit" class="btn btn-primary">Save</button>
+      <button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n>Cancel</button>
+      <button type="submit" class="btn btn-primary" i18n>Save</button>
     </div>
   </form>

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

@@ -14,7 +14,19 @@ import { ToastService } from 'src/app/services/toast.service';
 export class DocumentTypeEditDialogComponent extends EditDialogComponent<PaperlessDocumentType> {
 
   constructor(service: DocumentTypeService, activeModal: NgbActiveModal, toastService: ToastService) { 
-    super(service, activeModal, toastService, 'document type')
+    super(service, activeModal, toastService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new document type`
+  }
+
+  getEditTitle() {
+    return $localize`Edit document type`
+  }
+
+  getSaveErrorMessage(error: string) {
+    return $localize`Could not save document type: ${error}`
   }
 
   getForm(): FormGroup {

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

@@ -1,7 +1,5 @@
-<app-page-header title="Document types">
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
-    Create
-  </button>
+<app-page-header title="Document types" i18n-title>
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" i18n>Create</button>
 </app-page-header>
 
 <div class="row m-0 justify-content-end">
@@ -12,10 +10,10 @@
 <table class="table table-striped border shadow">
   <thead>
     <tr>
-      <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
-      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)">Matching</th>
-      <th scope="col" sortable="document_count" (sort)="onSort($event)">Document count</th>
-      <th scope="col">Actions</th>
+      <th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" i18n>Actions</th>
     </tr>
   </thead>
   <tbody>
@@ -28,21 +26,18 @@
           <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
+            </svg>&nbsp;<ng-container i18n>Documents</ng-container>
           </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
+            </svg>&nbsp;<ng-container i18n>Edit</ng-container>
           </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
+            </svg>&nbsp;<ng-container i18n>Delete</ng-container>
           </button>
         </div>
       </td>

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

@@ -1,5 +1,4 @@
 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';
@@ -16,20 +15,17 @@ import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/doc
 export class DocumentTypeListComponent extends GenericListComponent<PaperlessDocumentType> {
 
   constructor(service: DocumentTypeService, modalService: NgbModal,
-    private router: Router,
     private list: DocumentListViewService
   ) {
     super(service, modalService, DocumentTypeEditDialogComponent)
   }
 
-  getObjectName(object: PaperlessDocumentType) {
-    return `document type '${object.name}'`
+  getDeleteMessage(object: PaperlessDocumentType) {
+    return $localize`Do you really want to delete the document type "${object.name}"?`
   }
 
+
   filterDocuments(object: PaperlessDocumentType) {
-    this.list.documentListView.filter_rules = [
-      {rule_type: FILTER_DOCUMENT_TYPE, value: object.id.toString()}
-    ]
-    this.router.navigate(["documents"])
+    this.list.quickFilter([{rule_type: FILTER_DOCUMENT_TYPE, value: object.id.toString()}])
   }
 }

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

@@ -28,7 +28,7 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
 
   getMatching(o: MatchingModel) {
     if (o.matching_algorithm == MATCH_AUTO) {
-      return "Automatic"
+      return $localize`Automatic`
     } else if (o.match && o.match.length > 0) {
       return `${o.match} (${MATCHING_ALGORITHMS.find(a => a.id == o.matching_algorithm).name})`
     } else {
@@ -84,17 +84,17 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
     })
   }
 
-  getObjectName(object: T) {
-    return object.toString()
+  getDeleteMessage(object: T) {
+    return $localize`Do you really want to delete this element?`
   }
 
   openDeleteDialog(object: T) {
     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.title = $localize`Confirm delete`
+    activeModal.componentInstance.messageBold = this.getDeleteMessage(object)
+    activeModal.componentInstance.message = $localize`Associated documents will not be deleted.`
     activeModal.componentInstance.btnClass = "btn-danger"
-    activeModal.componentInstance.btnCaption = "Delete"
+    activeModal.componentInstance.btnCaption = $localize`Delete`
     activeModal.componentInstance.confirmClicked.subscribe(() => {
       this.service.delete(object).subscribe(_ => {
         activeModal.close()

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

@@ -1,11 +1,12 @@
-<app-page-header title="Logs">
+<app-page-header title="Logs" i18n-title>
 
   <div ngbDropdown class="btn-group">
     <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#funnel" />
-      </svg>
-      Filter
+      </svg>&nbsp;<ng-container i18n>Filter</ng-container>
+      
+      
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <button *ngFor="let f of getLevels()" ngbDropdownItem (click)="setLevel(f.id)"

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

@@ -7,14 +7,14 @@
 
   <ul ngbNav #nav="ngbNav" class="nav-tabs">
     <li [ngbNavItem]="1">
-      <a ngbNavLink>General settings</a>
+      <a ngbNavLink i18n>General settings</a>
       <ng-template ngbNavContent>
 
-        <h4>Document list</h4>
+        <h4 i18n>Document list</h4>
         
         <div class="form-row form-group">
           <div class="col-md-3 col-form-label">
-            <span>Items per page</span>
+            <span i18n>Items per page</span>
           </div>
           <div class="col">
         
@@ -26,41 +26,48 @@
             </select>
         
           </div>
+
+  
         </div>
 
+        <h4 i18n>Bulk editing</h4>
+
+        <app-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></app-input-check>
+        <app-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></app-input-check>
+
       </ng-template>
     </li>
     <li [ngbNavItem]="2">
-      <a ngbNavLink>Saved views</a>
+      <a ngbNavLink i18n>Saved views</a>
       <ng-template ngbNavContent>
 
         <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>
+                <label for="name_{{view.id}}" i18n>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>
+                <label for="show_on_dashboard_{{view.id}}" i18n>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>
+                  <label class="custom-control-label" for="show_on_dashboard_{{view.id}}" i18n>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>
+                  <label class="custom-control-label" for="show_in_sidebar_{{view.id}}" i18n>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>
+                <label for="name_{{view.id}}" i18n>Actions</label>
+                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" i18n>Delete</button>
               </div>
             </div>
 
-            <div *ngIf="savedViews.length == 0">No saved views defined.</div>
+            <div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
           
         </div>
 

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

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 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 { SavedViewService } from 'src/app/services/rest/saved-view.service';
-import { Toast, ToastService } from 'src/app/services/toast.service';
+import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
   selector: 'app-settings',
@@ -16,14 +16,17 @@ 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),
+    'bulkEditConfirmationDialogs': new FormControl(this.settings.get(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS)),
+    'bulkEditApplyOnClose': new FormControl(this.settings.get(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE)),
+    'documentListItemPerPage': new FormControl(this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)),
     'savedViews': this.savedViewGroup
   })
 
   constructor(
     public savedViewService: SavedViewService,
     private documentListViewService: DocumentListViewService,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private settings: SettingsService
   ) { }
 
   savedViews: PaperlessSavedView[]
@@ -46,14 +49,16 @@ export class SettingsComponent implements OnInit {
     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.`))
+      this.toastService.showInfo($localize`Saved view "${savedView.name} deleted.`)
     })
   }
 
   private saveLocalSettings() {
-    localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    this.settings.set(SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE, this.settingsForm.value.bulkEditApplyOnClose)
+    this.settings.set(SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS, this.settingsForm.value.bulkEditConfirmationDialogs)
+    this.settings.set(SETTINGS_KEYS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
     this.documentListViewService.updatePageSize()
-    this.toastService.showToast(Toast.make("Information", "Settings saved successfully."))
+    this.toastService.showInfo($localize`Settings saved successfully.`)
   }
 
   saveSettings() {
@@ -65,7 +70,7 @@ export class SettingsComponent implements OnInit {
       this.savedViewService.patchMany(x).subscribe(s => {
         this.saveLocalSettings()
       }, error => {
-        this.toastService.showToast(Toast.makeError(`Error while storing settings on server: ${JSON.stringify(error.error)}`))
+        this.toastService.showError($localize`Error while storing settings on server: ${JSON.stringify(error.error)}`)
       })
     } else {
       this.saveLocalSettings()

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

@@ -7,14 +7,24 @@
     </div>
     <div class="modal-body">
       <app-input-text title="Name" formControlName="name"></app-input-text>
-      <app-input-select title="Colour" [items]="getColours()" formControlName="colour" [textColor]="getColor(objectForm.value.colour).textColor" [backgroundColor]="getColor(objectForm.value.colour).value"></app-input-select>
-      <app-input-check title="Inbox tag" formControlName="is_inbox_tag" hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
-      <app-input-text title="Match" formControlName="match"></app-input-text>
-      <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
-      <app-input-check title="Case insensitive" formControlName="is_insensitive"></app-input-check>
+
+
+      <div class="form-group paperless-input-select">
+        <label for="colour" i18n>Color</label>
+        <ng-select name="colour" formControlName="colour" [items]="getColours()" bindValue="id" bindLabel="name" [clearable]="false">
+          <ng-template ng-option-tmp ng-label-tmp let-item="item">
+            <span class="badge" [style.background]="item.value" [style.color]="item.textColor">{{item.name}}</span>
+          </ng-template>
+        </ng-select>
+      </div>
+     
+      <app-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
+      <app-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>
+      <app-input-text i18n-title title="Match" formControlName="match" i18n-hint hint="Auto matching does not require you to fill in this field."></app-input-text>
+      <app-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" i18n-hint hint="Auto matching ignores this option."></app-input-check>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
-      <button type="submit" class="btn btn-primary">Save</button>
+      <button type="button" class="btn btn-outline-dark" (click)="cancel()" i18n>Cancel</button>
+      <button type="submit" class="btn btn-primary" i18n>Save</button>
     </div>
   </form>

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

@@ -14,7 +14,19 @@ import { ToastService } from 'src/app/services/toast.service';
 export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
 
   constructor(service: TagService, activeModal: NgbActiveModal, toastService: ToastService) { 
-    super(service, activeModal, toastService, 'tag')
+    super(service, activeModal, toastService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new tag`
+  }
+
+  getEditTitle() {
+    return $localize`Edit tag`
+  }
+
+  getSaveErrorMessage(error: string) {
+    return $localize`Could not save tag: ${error}`
   }
 
   getForm(): FormGroup {

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

@@ -1,7 +1,5 @@
-<app-page-header title="Tags">
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()">
-    Create
-  </button>
+<app-page-header title="Tags" i18n-title>
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="openCreateDialog()" i18n>Create</button>
 </app-page-header>
 
 <div class="row m-0 justify-content-end">
@@ -12,11 +10,11 @@
 <table class="table table-striped border shadow-sm">
   <thead>
     <tr>
-      <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
-      <th scope="col">Colour</th>
-      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)">Matching</th>
-      <th scope="col" sortable="document_count" (sort)="onSort($event)">Document count</th>
-      <th scope="col">Actions</th>
+      <th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
+      <th scope="col" i18n>Color</th>
+      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
+      <th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
+      <th scope="col" i18n>Actions</th>
     </tr>
   </thead>
   <tbody>
@@ -31,21 +29,18 @@
           <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
+            </svg>&nbsp;<ng-container i18n>Documents</ng-container>
           </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
+            </svg>&nbsp;<ng-container i18n>Edit</ng-container>
           </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
+            </svg>&nbsp;<ng-container i18n>Delete</ng-container>
           </button>
         </div>
       </td>

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

@@ -1,5 +1,4 @@
 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';
@@ -16,7 +15,6 @@ import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.compon
 export class TagListComponent extends GenericListComponent<PaperlessTag> {
 
   constructor(tagService: TagService, modalService: NgbModal,
-    private router: Router,
     private list: DocumentListViewService
   ) {
     super(tagService, modalService, TagEditDialogComponent)
@@ -26,14 +24,12 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> {
     return TAG_COLOURS.find(c => c.id == id)
   }
 
-  getObjectName(object: PaperlessTag) {
-    return `tag '${object.name}'`
+  getDeleteMessage(object: PaperlessTag) {
+    return $localize`Do you really want to delete the tag "${object.name}"?`
   }
 
   filterDocuments(object: PaperlessTag) {
-    this.list.documentListView.filter_rules = [
-      {rule_type: FILTER_HAS_TAG, value: object.id.toString()}
-    ]
-    this.router.navigate(["documents"])
+    this.list.quickFilter([{rule_type: FILTER_HAS_TAG, value: object.id.toString()}])
+
   }
 }

src-ui/src/app/components/not-found/not-found.component.html

@@ -4,5 +4,5 @@
         <path fill-rule="evenodd" d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683z"/>
         <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
       </svg>
-    <h1>404 Not Found</h1>
+    <h1 i18n>404 Not Found</h1>
 </div>

src-ui/src/app/components/search/result-highlight/result-highlight.component.html

@@ -1,3 +1,3 @@
 ... <span *ngFor="let fragment of highlights">
-    <span *ngFor="let token of fragment" [ngClass]="token.term != null ? 'match term'+ token.term : ''">{{token.text}}</span> ... 
+    <span *ngFor="let token of fragment" [class.match]="token.highlight">{{token.text}}</span> ... 
 </span>