Just some stuff

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ on:
 env:
   # This is the version of pipenv all the steps will use
   # If changing this, change Dockerfile
-  DEFAULT_PIP_ENV_VERSION: "2024.0.3"
+  DEFAULT_PIP_ENV_VERSION: "2024.4.0"
   # This is the default version of Python to use in most steps which aren't specific
   DEFAULT_PYTHON_VERSION: "3.11"
 
@@ -283,7 +283,7 @@ jobs:
           merge-multiple: true
       -
         name: Upload frontend coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           # not required for public repos, but intermittently fails otherwise
           token: ${{ secrets.CODECOV_TOKEN }}
@@ -299,7 +299,7 @@ jobs:
           path: src/
       -
         name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           # not required for public repos, but intermittently fails otherwise
           token: ${{ secrets.CODECOV_TOKEN }}
@@ -406,7 +406,7 @@ jobs:
       -
         name: Login to Docker Hub
         uses: docker/login-action@v3
-        # Don't attempt to login is not pushing to Docker Hub
+        # Don't attempt to login if not pushing to Docker Hub
         if: steps.push-other-places.outputs.enable == 'true'
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -414,7 +414,7 @@ jobs:
       -
         name: Login to Quay.io
         uses: docker/login-action@v3
-        # Don't attempt to login is not pushing to Quay.io
+        # Don't attempt to login if not pushing to Quay.io
         if: steps.push-other-places.outputs.enable == 'true'
         with:
           registry: quay.io

.pre-commit-config.yaml

@@ -5,7 +5,7 @@
 repos:
   # General hooks
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.6.0
+    rev: v5.0.0
     hooks:
       - id: check-docstring-first
       - id: check-json
@@ -32,7 +32,7 @@ repos:
     rev: v2.3.0
     hooks:
       - id: codespell
-        exclude: "(^src-ui/src/locale/)|(^src-ui/e2e/)|(^src/paperless_mail/tests/samples/)"
+        exclude: "(^src-ui/src/locale/)|(^src-ui/e2e/)|(^src/paperless_mail/tests/samples/)|(^src/paperless_einvoice/tests/samples/)|(^src/paperless_einvoice/templates/)"
         exclude_types:
           - pofile
           - json
@@ -46,9 +46,12 @@ repos:
           - ts
           - markdown
         exclude: "(^Pipfile\\.lock$)"
+        additional_dependencies:
+          - prettier@3.3.3
+          - 'prettier-plugin-organize-imports@4.1.0'
   # Python hooks
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: 'v0.6.8'
+    rev: v0.8.3
     hooks:
       - id: ruff
       - id: ruff-format

.prettierrc

@@ -1,16 +0,0 @@
-{
-    # https://prettier.io/docs/en/options.html#semicolons
-    "semi": false,
-    # https://prettier.io/docs/en/options.html#quotes
-    "singleQuote": true,
-    # https://prettier.io/docs/en/options.html#trailing-commas
-    "trailingComma": "es5",
-    "overrides": [
-        {
-            "files": ["docs/*.md"],
-            "options": {
-                "tabWidth": 4,
-            }
-        }
-    ]
-}

.prettierrc.js

@@ -0,0 +1,19 @@
+const config = {
+	// https://prettier.io/docs/en/options.html#semicolons
+	semi: false,
+	// https://prettier.io/docs/en/options.html#quotes
+	singleQuote: true,
+	// https://prettier.io/docs/en/options.html#trailing-commas
+	trailingComma: 'es5',
+	overrides: [
+		{
+			files: ['docs/*.md'],
+			options: {
+				tabWidth: 4,
+			},
+		},
+	],
+	plugins: [require('prettier-plugin-organize-imports')],
+}
+
+module.exports = config

.ruff.toml

@@ -31,17 +31,61 @@ extend-select = [
   "PLE",   # https://docs.astral.sh/ruff/rules/#pylint-pl
   "RUF",   # https://docs.astral.sh/ruff/rules/#ruff-specific-rules-ruf
   "FLY",   # https://docs.astral.sh/ruff/rules/#flynt-fly
+  "PTH",   # https://docs.astral.sh/ruff/rules/#flake8-use-pathlib-pth
 ]
-# TODO PTH https://docs.astral.sh/ruff/rules/#flake8-use-pathlib-pth
 ignore = ["DJ001", "SIM105", "RUF012"]
 
 [lint.per-file-ignores]
 ".github/scripts/*.py" = ["E501", "INP001", "SIM117"]
 "docker/wait-for-redis.py" = ["INP001", "T201"]
+"src/documents/barcodes.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/classifier.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/file_handling.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/index.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/management/commands/decrypt_documents.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/management/commands/document_consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/management/commands/document_exporter.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/management/commands/document_importer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/0012_auto_20160305_0040.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/0014_document_checksum.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/1003_mime_types.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/1012_fix_archive_files.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/1037_webp_encrypted_thumbnail_conversion.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/models.py" = ["SIM115", "PTH"]  # TODO PTH Enable & remove
+"src/documents/parsers.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/signals/handlers.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tasks.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_api_app_config.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_api_bulk_download.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_api_documents.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_classifier.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_file_handling.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management_consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management_exporter.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management_thumbnails.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_migration_archive_files.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_migration_document_pages_count.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_migration_mime_type.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_sanity_check.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_tasks.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_views.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/views.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/checks.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/settings.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/tests/test_checks.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/urls.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/views.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_mail/mail.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_mail/preprocessor.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_tesseract/parsers.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_tesseract/tests/test_parser.py" = ["RUF001", "PTH"]  # TODO PTH Enable & remove
+"src/paperless_tika/tests/test_live_tika.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_tika/tests/test_tika_parser.py" = ["PTH"]  # TODO Enable & remove
 "*/tests/*.py" = ["E501", "SIM117"]
 "*/migrations/*.py" = ["E501", "SIM", "T201"]
-"src/paperless_tesseract/tests/test_parser.py" = ["RUF001"]
-"src/documents/models.py" = ["SIM115"]
 
 [lint.isort]
 force-single-line = true

Dockerfile

@@ -39,7 +39,7 @@ COPY Pipfile* ./
 
 RUN set -eux \
   && echo "Installing pipenv" \
-    && python3 -m pip install --no-cache-dir --upgrade pipenv==2024.0.3 \
+    && python3 -m pip install --no-cache-dir --upgrade pipenv==2024.4.0 \
   && echo "Generating requirement.txt" \
     && pipenv requirements > requirements.txt
 
@@ -233,11 +233,11 @@ RUN --mount=type=cache,target=/root/.cache/pip/,id=pip-cache \
     && python3 -m pip install --no-cache-dir --upgrade wheel \
   && echo "Installing Python requirements" \
     && curl --fail --silent --show-error --location \
-    --output psycopg_c-3.2.2-cp312-cp312-linux_x86_64.whl \
-    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.2/psycopg_c-3.2.2-cp312-cp312-linux_x86_64.whl \
+    --output psycopg_c-3.2.3-cp312-cp312-linux_x86_64.whl \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.3/psycopg_c-3.2.3-cp312-cp312-linux_x86_64.whl \
     && curl --fail --silent --show-error --location \
-    --output psycopg_c-3.2.2-cp312-cp312-linux_aarch64.whl  \
-    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.2/psycopg_c-3.2.2-cp312-cp312-linux_aarch64.whl \
+    --output psycopg_c-3.2.3-cp312-cp312-linux_aarch64.whl  \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.3/psycopg_c-3.2.3-cp312-cp312-linux_aarch64.whl \
     && python3 -m pip install --default-timeout=1000 --find-links . --requirement requirements.txt \
   && echo "Installing NLTK data" \
     && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" snowball_data \

Pipfile

@@ -7,8 +7,8 @@ name = "pypi"
 dateparser = "~=1.2"
 # WARNING: django does not use semver.
 #          Only patch versions are guaranteed to not introduce breaking changes.
-django = "~=5.1.1"
-django-allauth = {extras = ["socialaccount"], version = "*"}
+django = "~=5.1.4"
+django-allauth = {extras = ["mfa", "socialaccount"], version = "*"}
 django-auditlog = "*"
 django-celery-results = "*"
 django-compression-middleware = "*"
@@ -18,12 +18,13 @@ django-filter = "~=24.3"
 django-guardian = "*"
 django-multiselectfield = "*"
 django-soft-delete = "*"
-djangorestframework = "==3.15.2"
+djangorestframework = "~=3.15.2"
 djangorestframework-guardian = "*"
+drafthorse = "*"
 drf-writable-nested = "*"
 bleach = "*"
 celery = {extras = ["redis"], version = "*"}
-channels = "~=4.1"
+channels = "~=4.2"
 channels-redis = "*"
 concurrent-log-handler = "*"
 filelock = "*"
@@ -37,7 +38,7 @@ jinja2 = "~=3.1"
 langdetect = "*"
 mysqlclient = "*"
 nltk = "*"
-ocrmypdf = "~=16.5"
+ocrmypdf = "~=16.7"
 pathvalidate = "*"
 pdf2image = "*"
 psycopg = {version = "*", extras = ["c"]}
@@ -49,13 +50,13 @@ python-magic = "*"
 pyzbar = "*"
 rapidfuzz = "*"
 redis = {extras = ["hiredis"], version = "*"}
-scikit-learn = "~=1.5"
+scikit-learn = "~=1.6"
 setproctitle = "*"
 tika-client = "*"
 tqdm = "*"
 # See https://github.com/paperless-ngx/paperless-ngx/issues/5494
 uvicorn = {extras = ["standard"], version = "==0.25.0"}
-watchdog = "~=4.0"
+watchdog = "~=6.0"
 whitenoise = "~=6.8"
 whoosh = "~=2.7"
 zxing-cpp = {version = "*", platform_machine = "== 'x86_64'"}

docker/compose/docker-compose.portainer.yml

@@ -19,6 +19,8 @@
 #
 # - Open portainer Stacks list and click 'Add stack'
 # - Paste the contents of this file and assign a name, e.g. 'paperless'
+# - Upload 'docker-compose.env' by clicking on 'Load variables from .env file'
+# - Modify the environment variables as needed
 # - Click 'Deploy the stack' and wait for it to be deployed
 # - Open the list of containers, select paperless_webserver_1
 # - Click 'Console' and then 'Connect' to open the command line inside the container
@@ -61,28 +63,8 @@ services:
     environment:
       PAPERLESS_REDIS: redis://broker:6379
       PAPERLESS_DBHOST: db
-# The UID and GID of the user used to run paperless in the container. Set this
-# to your UID and GID on the host so that you have write access to the
-# consumption directory.
-      USERMAP_UID: 1000
-      USERMAP_GID: 100
-# Additional languages to install for text recognition, separated by a
-# whitespace. Note that this is
-# different from PAPERLESS_OCR_LANGUAGE (default=eng), which defines the
-# language used for OCR.
-# The container installs English, German, Italian, Spanish and French by
-# default.
-# See https://packages.debian.org/search?keywords=tesseract-ocr-&searchon=names&suite=buster
-# for available languages.
-      #PAPERLESS_OCR_LANGUAGES: tur ces
-# Adjust this key if you plan to make paperless available publicly. It should
-# be a very long sequence of random characters. You don't need to remember it.
-      #PAPERLESS_SECRET_KEY: change-me
-# Use this variable to set a timezone for the Paperless Docker containers. If not specified, defaults to UTC.
-      #PAPERLESS_TIME_ZONE: America/Los_Angeles
-# The default language to use for OCR. Set this to the language most of your
-# documents are written in.
-      #PAPERLESS_OCR_LANGUAGE: eng
+    env_file:
+      - stack.env
 
 volumes:
   data:

docker/install_management_commands.sh

@@ -15,7 +15,8 @@ for command in decrypt_documents \
 	document_sanity_checker \
 	document_fuzzy_match \
 	manage_superuser \
-	convert_mariadb_uuid;
+	convert_mariadb_uuid \
+	prune_audit_logs;
 do
 	echo "installing $command..."
 	sed "s/management_command/$command/g" management_script.sh > /usr/local/bin/$command

docs/administration.md

@@ -241,6 +241,7 @@ document_exporter target [-c] [-d] [-f] [-na] [-nt] [-p] [-sm] [-z]
 
 optional arguments:
 -c,  --compare-checksums
+-cj, --compare-json
 -d,  --delete
 -f,  --use-filename-format
 -na, --no-archive
@@ -269,7 +270,8 @@ only export changed and added files. Paperless determines whether a file
 has changed by inspecting the file attributes "date/time modified" and
 "size". If that does not work out for you, specify `-c` or
 `--compare-checksums` and paperless will attempt to compare file
-checksums instead. This is slower.
+checksums instead. This is slower. The manifest and metadata json files
+are always updated, unless `cj` or `--compare-json` is specified.
 
 Paperless will not remove any existing files in the export directory. If
 you want paperless to also remove files that do not belong to the
@@ -622,3 +624,12 @@ document_fuzzy_match [--ratio] [--processes N]
     If providing the `--delete` option, it is highly recommended to have a backup.
     While every effort has been taken to ensure proper operation, there is always the
     chance of deletion of a file you want to keep.
+
+### Prune history (audit log) entries {#prune-history}
+
+If the audit log is enabled Paperless-ngx keeps an audit log of all changes made to documents. Functionality to automatically remove entries for deleted documents was added but
+entries created prior to this are not removed. This command allows you to prune the audit log of entries that are no longer needed.
+
+```shell
+prune_audit_logs
+```

docs/api.md

@@ -473,6 +473,11 @@ The following methods are supported:
     -   Requires `parameters`:
         -   `"pages": [..]` The list should be a list of integers e.g. `"[2,3,4]"`
     -   The delete_pages operation only accepts a single document.
+-   `modify_custom_fields`
+    -   Requires `parameters`:
+        -   `"add_custom_fields": { CUSTOM_FIELD_ID: VALUE }`: JSON object consisting of custom field id:value pairs to add to the document, can also be a list of custom field IDs
+            to add with empty values.
+        -   `"remove_custom_fields": [CUSTOM_FIELD_ID]`: custom field ids to remove from the document.
 
 ### Objects
 
@@ -556,3 +561,11 @@ Initial API version.
 
 -   Consumption templates were refactored to workflows and API endpoints
     changed as such.
+
+#### Version 5
+
+-   Added bulk deletion methods for documents and objects.
+
+#### Version 6
+
+-   Moved acknowledge tasks endpoint to be under `/api/tasks/acknowledge/`.

docs/changelog.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## paperless-ngx 2.13.5
+
+### Bug Fixes
+
+-   Fix: handle page count exception for pw-protected files [@shamoon](https://github.com/shamoon) ([#8240](https://github.com/paperless-ngx/paperless-ngx/pull/8240))
+-   Fix: correctly track task id in list for change detection [@shamoon](https://github.com/shamoon) ([#8230](https://github.com/paperless-ngx/paperless-ngx/pull/8230))
+-   Fix: Admin pages should show trashed documents [@stumpylog](https://github.com/stumpylog) ([#8068](https://github.com/paperless-ngx/paperless-ngx/pull/8068))
+-   Fix: tag colors shouldn't change when selected in list [@shamoon](https://github.com/shamoon) ([#8225](https://github.com/paperless-ngx/paperless-ngx/pull/8225))
+-   Fix: fix re-activation of save button when changing array items [@shamoon](https://github.com/shamoon) ([#8208](https://github.com/paperless-ngx/paperless-ngx/pull/8208))
+-   Fix: fix thumbnail clipping, select inverted color in safari dark mode not system [@shamoon](https://github.com/shamoon) ([#8193](https://github.com/paperless-ngx/paperless-ngx/pull/8193))
+-   Fix: select checkbox should remain visible [@shamoon](https://github.com/shamoon) ([#8185](https://github.com/paperless-ngx/paperless-ngx/pull/8185))
+-   Fix: warn with proper error on ASN exists in trash [@shamoon](https://github.com/shamoon) ([#8176](https://github.com/paperless-ngx/paperless-ngx/pull/8176))
+
+### Maintenance
+
+-   Chore: Updates all runner images to use Ubuntu Noble [@stumpylog](https://github.com/stumpylog) ([#8213](https://github.com/paperless-ngx/paperless-ngx/pull/8213))
+-   Chore(deps): Bump stumpylog/image-cleaner-action from 0.8.0 to 0.9.0 in the actions group [@dependabot](https://github.com/dependabot) ([#8142](https://github.com/paperless-ngx/paperless-ngx/pull/8142))
+
+### Dependencies
+
+-   Chore(deps): Bump stumpylog/image-cleaner-action from 0.8.0 to 0.9.0 in the actions group [@dependabot](https://github.com/dependabot) ([#8142](https://github.com/paperless-ngx/paperless-ngx/pull/8142))
+
+### All App Changes
+
+<details>
+<summary>7 changes</summary>
+
+-   Fix: handle page count exception for pw-protected files [@shamoon](https://github.com/shamoon) ([#8240](https://github.com/paperless-ngx/paperless-ngx/pull/8240))
+-   Fix: correctly track task id in list for change detection [@shamoon](https://github.com/shamoon) ([#8230](https://github.com/paperless-ngx/paperless-ngx/pull/8230))
+-   Fix: Admin pages should show trashed documents [@stumpylog](https://github.com/stumpylog) ([#8068](https://github.com/paperless-ngx/paperless-ngx/pull/8068))
+-   Fix: tag colors shouldn't change when selected in list [@shamoon](https://github.com/shamoon) ([#8225](https://github.com/paperless-ngx/paperless-ngx/pull/8225))
+-   Fix: fix re-activation of save button when changing array items [@shamoon](https://github.com/shamoon) ([#8208](https://github.com/paperless-ngx/paperless-ngx/pull/8208))
+-   Fix: fix thumbnail clipping, select inverted color in safari dark mode not system [@shamoon](https://github.com/shamoon) ([#8193](https://github.com/paperless-ngx/paperless-ngx/pull/8193))
+-   Fix: select checkbox should remain visible [@shamoon](https://github.com/shamoon) ([#8185](https://github.com/paperless-ngx/paperless-ngx/pull/8185))
+-   Fix: warn with proper error on ASN exists in trash [@shamoon](https://github.com/shamoon) ([#8176](https://github.com/paperless-ngx/paperless-ngx/pull/8176))
+</details>
+
 ## paperless-ngx 2.13.4
 
 ### Bug Fixes

docs/configuration.md

@@ -198,6 +198,12 @@ Docker, this may be the `environment` key of the webserver or a
 containing the configuration parameters. Be sure to use the correct format
 and watch out for indentation if editing the YAML file.
 
+#### [`PAPERLESS_EINVOICE_PARSER_ENABLED=<bool>`](#PAPERLESS_EINVOICE_PARSER_ENABLED) {#PAPERLESS_EINVOICE_PARSER_ENABLED}
+
+: Enable (or disable) the e-invoice parser. Note that this feature requires Tika to be enabled.
+
+    Defaults to false.
+
 ## Paths and folders
 
 #### [`PAPERLESS_CONSUMPTION_DIR=<path>`](#PAPERLESS_CONSUMPTION_DIR) {#PAPERLESS_CONSUMPTION_DIR}

docs/usage.md

@@ -299,6 +299,12 @@ In order to enable the password reset feature you will need to setup an SMTP bac
 [`PAPERLESS_EMAIL_HOST`](configuration.md#PAPERLESS_EMAIL_HOST). If your installation does not have
 [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) set, the reset link included in emails will use the server host.
 
+### Two-factor authentication
+
+Users can enable two-factor authentication (2FA) for their accounts from the 'My Profile' dialog. Opening the dropdown reveals a QR code that can be scanned by a 2FA app (e.g. Google Authenticator) to generate a code. The code must then be entered in the dialog to enable 2FA. If the code is accepted and 2FA is enabled, the user will be shown a set of 10 recovery codes that can be used to login in the event that the 2FA device is lost or unavailable. These codes should be stored securely and cannot be retrieved again. Once enabled, users will be required to enter a code from their 2FA app when logging in.
+
+Should a user lose access to their 2FA device and all recovery codes, a superuser can disable 2FA for the user from the 'Users & Groups' management screen.
+
 ## Workflows
 
 !!! note
@@ -316,6 +322,8 @@ fields and permissions, which will be merged.
 
 ### Workflow Triggers
 
+#### Types
+
 Currently, there are three events that correspond to workflow trigger 'types':
 
 1. **Consumption Started**: _before_ a document is consumed, so events can include filters by source (mail, consumption
@@ -325,8 +333,10 @@ Currently, there are three events that correspond to workflow trigger 'types':
    be used for filtering.
 3. **Document Updated**: when a document is updated. Similar to 'added' events, triggers can include filtering by content matching,
    tags, doc type, or correspondent.
+4. **Scheduled**: a scheduled trigger that can be used to run workflows at a specific time. The date used can be either the document
+   added, created, updated date or you can specify a (date) custom field. You can also specify a day offset from the date.
 
-The following flow diagram illustrates the three trigger types:
+The following flow diagram illustrates the three document trigger types:
 
 ```mermaid
 flowchart TD
@@ -372,25 +382,49 @@ Workflows allow you to filter by:
 
 ### Workflow Actions
 
-There are currently two types of workflow actions, "Assignment", which can assign:
+#### Types
 
--   Title, see [title placeholders](usage.md#title-placeholders) below
+The following workflow action types are available:
+
+##### Assignment
+
+"Assignment" actions can assign:
+
+-   Title, see [workflow placeholders](usage.md#workflow-placeholders) below
 -   Tags, correspondent, document type and storage path
 -   Document owner
 -   View and / or edit permissions to users or groups
 -   Custom fields. Note that no value for the field will be set
 
-and "Removal" actions, which can remove either all of or specific sets of the following:
+##### Removal
+
+"Removal" actions can remove either all of or specific sets of the following:
 
 -   Tags, correspondents, document types or storage paths
 -   Document owner
 -   View and / or edit permissions
 -   Custom fields
 
-#### Title placeholders
+##### Email
 
-Workflow titles can include placeholders but the available options differ depending on the type of
-workflow trigger. This is because at the time of consumption (when the title is to be set), no automatic tags etc. have been
+"Email" actions can send documents via email. This action requires a mail server to be [configured](configuration.md#email-sending). You can specify:
+
+-   The recipient email address(es) separated by commas
+-   The subject and body of the email, which can include placeholders, see [placeholders](usage.md#workflow-placeholders) below
+-   Whether to include the document as an attachment
+
+##### Webhook
+
+"Webhook" actions send a POST request to a specified URL. You can specify:
+
+-   The URL to send the request to
+-   The request body as text or as key-value pairs, which can include placeholders, see [placeholders](usage.md#workflow-placeholders) below.
+-   The request headers as key-value pairs
+
+#### Workflow placeholders
+
+Some workflow text can include placeholders but the available options differ depending on the type of
+workflow trigger. This is because at the time of consumption (when the text is to be set), no automatic tags etc. have been
 applied. You can use the following placeholders with any trigger type:
 
 -   `{correspondent}`: assigned correspondent name
@@ -405,6 +439,7 @@ applied. You can use the following placeholders with any trigger type:
 -   `{added_day}`: added day
 -   `{added_time}`: added time in HH:MM format
 -   `{original_filename}`: original file name without extension
+-   `{filename}`: current file name without extension
 
 The following placeholders are only available for "added" or "updated" triggers
 
@@ -416,6 +451,7 @@ The following placeholders are only available for "added" or "updated" triggers
 -   `{created_month_name_short}`: created month short name
 -   `{created_day}`: created day
 -   `{created_time}`: created time in HH:MM format
+-   `{doc_url}`: URL to the document in the web UI. Requires the `PAPERLESS_URL` setting to be set.
 
 ### Workflow permissions
 

install-paperless-ngx.sh

@@ -330,8 +330,13 @@ SECRET_KEY=$(LC_ALL=C tr -dc 'a-zA-Z0-9!#$%&()*+,-./:;<=>?@[\]^_`{|}~' < /dev/ur
 
 DEFAULT_LANGUAGES=("deu eng fra ita spa")
 
-_split_langs="${OCR_LANGUAGE//+/ }"
-read -r -a OCR_LANGUAGES_ARRAY <<< "${_split_langs}"
+# OCR_LANG requires underscores, replace dashes if the user gave them with underscores
+readonly ocr_langs=${OCR_LANGUAGE//-/_}
+# OCR_LANGS (the install version) uses dashes, not underscores, so convert underscore to dash and plus to space
+install_langs=${OCR_LANGUAGE//_/-}    # First convert any underscores to dashes
+install_langs=${install_langs//+/ }    # Then convert plus signs to spaces
+
+read -r -a install_langs_array <<< "${install_langs}"
 
 {
 	if [[ ! $URL == "" ]] ; then
@@ -344,10 +349,10 @@ read -r -a OCR_LANGUAGES_ARRAY <<< "${_split_langs}"
 		echo "USERMAP_GID=$USERMAP_GID"
 	fi
 	echo "PAPERLESS_TIME_ZONE=$TIME_ZONE"
-	echo "PAPERLESS_OCR_LANGUAGE=$OCR_LANGUAGE"
+	echo "PAPERLESS_OCR_LANGUAGE=$ocr_langs"
 	echo "PAPERLESS_SECRET_KEY='$SECRET_KEY'"
-	if [[ ! ${DEFAULT_LANGUAGES[*]} =~ ${OCR_LANGUAGES_ARRAY[*]} ]] ; then
-		echo "PAPERLESS_OCR_LANGUAGES=${OCR_LANGUAGES_ARRAY[*]}"
+	if [[ ! ${DEFAULT_LANGUAGES[*]} =~ ${install_langs_array[*]} ]] ; then
+		echo "PAPERLESS_OCR_LANGUAGES=${install_langs_array[*]}"
 	fi
 } > docker-compose.env
 

paperless.conf.example

@@ -87,6 +87,7 @@
 #PAPERLESS_TIKA_ENABLED=false
 #PAPERLESS_TIKA_ENDPOINT=http://localhost:9998
 #PAPERLESS_TIKA_GOTENBERG_ENDPOINT=http://localhost:3000
+#PAPERLESS_EINVOICE_PARSER_ENABLED=true
 
 # Binaries
 

src-ui/.eslintrc.json

@@ -11,8 +11,7 @@
       ],
       "parserOptions": {
         "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
+          "tsconfig.json"
         ],
         "createDefaultProgram": true
       },

src-ui/e2e/admin/settings.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR = 'e2e/admin/requests/api-settings.har'
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-settings.har')
 
 test('should activate / deactivate save button when settings change', async ({
   page,
@@ -33,24 +34,3 @@ test('should apply appearance changes when set', async ({ page }) => {
   await page.getByLabel('Enable dark mode').click()
   await expect(page.locator('html')).toHaveAttribute('data-bs-theme', /dark/)
 })
-
-test('should toggle saved view options when set & saved', async ({ page }) => {
-  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
-  await page.goto('/settings/savedviews')
-  await page.getByLabel('Show on dashboard').first().click()
-  await page.getByLabel('Show in sidebar').first().click()
-  const updatePromise = page.waitForRequest((request) => {
-    if (!request.url().includes('8')) return true // skip other saved views
-    const data = request.postDataJSON()
-    const isValid =
-      data['show_on_dashboard'] === true && data['show_in_sidebar'] === true
-    return (
-      isValid &&
-      request.method() === 'PATCH' &&
-      request.url().includes('/api/saved_views/')
-    )
-  })
-  await page.getByRole('button', { name: 'Save' }).scrollIntoViewIfNeeded()
-  await page.getByRole('button', { name: 'Save' }).click()
-  await updatePromise
-})

src-ui/e2e/dashboard/dashboard.spec.ts

@@ -1,9 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR1 = 'e2e/dashboard/requests/api-dashboard1.har'
-const REQUESTS_HAR2 = 'e2e/dashboard/requests/api-dashboard2.har'
-const REQUESTS_HAR3 = 'e2e/dashboard/requests/api-dashboard3.har'
-const REQUESTS_HAR4 = 'e2e/dashboard/requests/api-dashboard4.har'
+const REQUESTS_HAR1 = path.join(__dirname, 'requests/api-dashboard1.har')
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-dashboard2.har')
+const REQUESTS_HAR3 = path.join(__dirname, 'requests/api-dashboard3.har')
+const REQUESTS_HAR4 = path.join(__dirname, 'requests/api-dashboard4.har')
 
 test('dashboard inbox link', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })

src-ui/e2e/document-detail/document-detail.spec.ts

@@ -1,7 +1,8 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR = 'e2e/document-detail/requests/api-document-detail.har'
-const REQUESTS_HAR2 = 'e2e/document-detail/requests/api-document-detail2.har'
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-document-detail.har')
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-document-detail2.har')
 
 test('should activate / deactivate save button when changes are saved', async ({
   page,

src-ui/e2e/document-list/document-list.spec.ts

@@ -1,11 +1,12 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR1 = 'e2e/document-list/requests/api-document-list1.har'
-const REQUESTS_HAR2 = 'e2e/document-list/requests/api-document-list2.har'
-const REQUESTS_HAR3 = 'e2e/document-list/requests/api-document-list3.har'
-const REQUESTS_HAR4 = 'e2e/document-list/requests/api-document-list4.har'
-const REQUESTS_HAR5 = 'e2e/document-list/requests/api-document-list5.har'
-const REQUESTS_HAR6 = 'e2e/document-list/requests/api-document-list6.har'
+const REQUESTS_HAR1 = path.join(__dirname, 'requests/api-document-list1.har')
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-document-list2.har')
+const REQUESTS_HAR3 = path.join(__dirname, 'requests/api-document-list3.har')
+const REQUESTS_HAR4 = path.join(__dirname, 'requests/api-document-list4.har')
+const REQUESTS_HAR5 = path.join(__dirname, 'requests/api-document-list5.har')
+const REQUESTS_HAR6 = path.join(__dirname, 'requests/api-document-list6.har')
 
 test('basic filtering', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })

src-ui/e2e/permissions/global-permissions.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR = 'e2e/permissions/requests/api-global-permissions.har'
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-global-permissions.har')
 
 test('should not allow user to edit settings', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })

src-ui/extra-webpack.config.ts

@@ -1,8 +1,8 @@
-import * as webpack from 'webpack'
 import {
   CustomWebpackBrowserSchema,
   TargetOptions,
 } from '@angular-builders/custom-webpack'
+import * as webpack from 'webpack'
 const { codecovWebpackPlugin } = require('@codecov/webpack-plugin')
 
 export default (

src-ui/package-lock.json

@@ -25,7 +25,7 @@
         "bootstrap": "^5.3.3",
         "file-saver": "^2.0.5",
         "mime-names": "^1.0.0",
-        "ng2-pdf-viewer": "^10.3.4",
+        "ng2-pdf-viewer": "^10.4.0",
         "ngx-bootstrap-icons": "^1.9.3",
         "ngx-color": "^9.0.0",
         "ngx-cookie-service": "^18.0.0",
@@ -33,6 +33,7 @@
         "ngx-ui-tour-ng-bootstrap": "^15.0.0",
         "rxjs": "^7.8.1",
         "tslib": "^2.8.1",
+        "utif": "^3.1.0",
         "uuid": "^11.0.2",
         "zone.js": "^0.14.8"
       },
@@ -62,6 +63,7 @@
         "jest-preset-angular": "^14.2.4",
         "jest-websocket-mock": "^2.5.0",
         "patch-package": "^8.0.0",
+        "prettier-plugin-organize-imports": "^4.1.0",
         "ts-node": "~10.9.1",
         "typescript": "^5.5.4"
       }
@@ -4947,7 +4949,9 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
       "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "detect-libc": "^2.0.0",
         "https-proxy-agent": "^5.0.0",
@@ -4967,13 +4971,17 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@mapbox/node-pre-gyp/node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "debug": "4"
       },
@@ -4985,7 +4993,9 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "agent-base": "6",
         "debug": "4"
@@ -4998,7 +5008,9 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -5013,7 +5025,9 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -5022,7 +5036,9 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
       "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "abbrev": "1"
       },
@@ -7101,13 +7117,17 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
       "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/are-we-there-yet": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "delegates": "^1.0.0",
         "readable-stream": "^3.6.0"
@@ -7367,13 +7387,13 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -7423,7 +7443,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -7507,7 +7527,7 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -7580,7 +7600,7 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -7768,8 +7788,10 @@
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
       "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "@mapbox/node-pre-gyp": "^1.0.0",
         "nan": "^2.17.0",
@@ -7838,7 +7860,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -8069,7 +8091,9 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "bin": {
         "color-support": "bin.js"
       }
@@ -8153,7 +8177,7 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
@@ -8168,7 +8192,9 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/content-disposition": {
       "version": "0.5.4",
@@ -8540,6 +8566,16 @@
         }
       }
     },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -8649,7 +8685,9 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/depd": {
       "version": "2.0.0",
@@ -8873,6 +8911,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -9401,6 +9449,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/expect": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
@@ -9782,6 +9840,13 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fs-minipass": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
@@ -9798,7 +9863,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -9827,7 +9892,9 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "aproba": "^1.0.3 || ^2.0.0",
         "color-support": "^1.1.2",
@@ -9911,11 +9978,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -10067,7 +10141,9 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/hasown": {
       "version": "2.0.0",
@@ -10362,7 +10438,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -10520,7 +10596,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -12617,7 +12693,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -12629,7 +12705,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
+      "devOptional": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -12766,7 +12842,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
       "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0",
         "yallist": "^4.0.0"
@@ -12779,7 +12855,7 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -12791,13 +12867,13 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -12805,6 +12881,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/mock-socket": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/mock-socket/-/mock-socket-9.3.1.tgz",
@@ -12885,7 +12968,9 @@
       "version": "2.18.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
       "integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
@@ -12905,6 +12990,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -12957,12 +13049,13 @@
       "dev": true
     },
     "node_modules/ng2-pdf-viewer": {
-      "version": "10.3.4",
-      "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-10.3.4.tgz",
-      "integrity": "sha512-YcMT52612LRHky82POLnyPx32Gk8PcCU+bmSatRje7zi655F+HT2HYAbOY+gG2PDH96R22oQCF8fAgKzlJl64w==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/ng2-pdf-viewer/-/ng2-pdf-viewer-10.4.0.tgz",
+      "integrity": "sha512-TPh1oLZoeARggreTG60Sl3ikSn+Z3+At9pLZ0o/vxPjc7mW2ok2XPyl2Oqz7VyP80ipVorldm1hsLPBmNe2zzA==",
+      "license": "MIT",
       "dependencies": {
-        "pdfjs-dist": "4.6.82",
-        "tslib": "^2.3.0"
+        "pdfjs-dist": "4.8.69",
+        "tslib": "^2.8.1"
       }
     },
     "node_modules/ngx-bootstrap-icons": {
@@ -13066,6 +13159,19 @@
         "node-gyp-build": "^4.2.2"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.71.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.71.0.tgz",
+      "integrity": "sha512-SZ40vRiy/+wRTf21hxkkEjPJZpARzUMVcJoQse2EF8qkUWbbO2z7vd5oA/H6bVH6SZQ5STGcu0KRDS7biNRfxw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
@@ -13077,7 +13183,9 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -13097,19 +13205,25 @@
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -13422,7 +13536,9 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "are-we-there-yet": "^2.0.0",
         "console-control-strings": "^1.1.0",
@@ -13452,7 +13568,9 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13758,6 +13876,12 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -13945,7 +14069,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14009,26 +14133,51 @@
       }
     },
     "node_modules/path2d": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz",
-      "integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz",
+      "integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==",
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/pdfjs-dist": {
-      "version": "4.6.82",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.6.82.tgz",
-      "integrity": "sha512-BUOryeRFwvbLe0lOU6NhkJNuVQUp06WxlJVVCsxdmJ4y5cU3O3s3/0DunVdK1PMm7v2MUw52qKYaidhDH1Z9+w==",
+      "version": "4.8.69",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.8.69.tgz",
+      "integrity": "sha512-IHZsA4T7YElCKNNXtiLgqScw4zPd3pG9do8UrznC757gMd7UPeHSL2qwNNMJo4r79fl8oj1Xx+1nh2YkzdMpLQ==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=18"
       },
       "optionalDependencies": {
-        "canvas": "^2.11.2",
+        "canvas": "^3.0.0-rc2",
         "path2d": "^0.2.1"
       }
     },
+    "node_modules/pdfjs-dist/node_modules/canvas": {
+      "version": "3.0.0-rc2",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.0.0-rc2.tgz",
+      "integrity": "sha512-esx4bYDznnqgRX4G8kaEaf0W3q8xIc51WpmrIitDzmcoEgwnv9wSKdzT6UxWZ4wkVu5+ileofppX0TpyviJRdQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.1",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || >= 20.9.0"
+      }
+    },
+    "node_modules/pdfjs-dist/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -14358,6 +14507,88 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
+      "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -14367,6 +14598,40 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-organize-imports": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-4.1.0.tgz",
+      "integrity": "sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prettier": ">=2.0",
+        "typescript": ">=2.9",
+        "vue-tsc": "^2.1.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
@@ -14475,6 +14740,17 @@
       "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
       "dev": true
     },
+    "node_modules/pump": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -14573,6 +14849,39 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
@@ -14858,7 +15167,9 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -15253,7 +15564,9 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "optional": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/set-function-length": {
       "version": "1.2.1",
@@ -15342,7 +15655,7 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/sigstore": {
       "version": "2.3.1",
@@ -15840,7 +16153,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
       "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "chownr": "^2.0.0",
         "fs-minipass": "^2.0.0",
@@ -15853,11 +16166,48 @@
         "node": ">=10"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-fs/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tar/node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
       "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "minipass": "^3.0.0"
       },
@@ -15869,7 +16219,7 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
       "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -15881,7 +16231,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
       "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -15890,7 +16240,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/terser": {
       "version": "5.31.6",
@@ -16312,6 +16662,19 @@
         "node": ">=0.6.11 <=0.7.0 || >=0.7.3"
       }
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -16563,6 +16926,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/utif": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/utif/-/utif-3.1.0.tgz",
+      "integrity": "sha512-WEo4D/xOvFW53K5f5QTaTbbiORcm2/pCL9P6qmJnup+17eYfKaEhDeX9PeQkuyEoIxlbGklDuGl8xwuXYMrrXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.5"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17224,7 +17596,9 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
       "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "dev": true,
       "optional": true,
+      "peer": true,
       "dependencies": {
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }

src-ui/package.json

@@ -27,7 +27,7 @@
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
-    "ng2-pdf-viewer": "^10.3.4",
+    "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^18.0.0",
@@ -35,6 +35,7 @@
     "ngx-ui-tour-ng-bootstrap": "^15.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.8.1",
+    "utif": "^3.1.0",
     "uuid": "^11.0.2",
     "zone.js": "^0.14.8"
   },
@@ -64,7 +65,9 @@
     "jest-preset-angular": "^14.2.4",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4"
-  }
+  },
+  "typings": "./src/typings.d.ts"
 }

src-ui/setup-jest.ts

@@ -1,9 +1,9 @@
+import '@angular/localize/init'
 import { jest } from '@jest/globals'
+import { TextDecoder, TextEncoder } from 'util'
 if (process.env.NODE_ENV === 'test') {
   require('jest-preset-angular/setup-jest')
 }
-import '@angular/localize/init'
-import { TextEncoder, TextDecoder } from 'util'
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder
 

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

@@ -1,32 +1,33 @@
 import { NgModule } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
+import { RouterModule, Routes } from '@angular/router'
+import { ConfigComponent } from './components/admin/config/config.component'
+import { LogsComponent } from './components/admin/logs/logs.component'
+import { SettingsComponent } from './components/admin/settings/settings.component'
+import { TasksComponent } from './components/admin/tasks/tasks.component'
+import { TrashComponent } from './components/admin/trash/trash.component'
+import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
 import { AppFrameComponent } from './components/app-frame/app-frame.component'
 import { DashboardComponent } from './components/dashboard/dashboard.component'
+import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
 import { DocumentListComponent } from './components/document-list/document-list.component'
 import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
+import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
 import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
-import { LogsComponent } from './components/admin/logs/logs.component'
-import { SettingsComponent } from './components/admin/settings/settings.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
-import { NotFoundComponent } from './components/not-found/not-found.component'
-import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DirtyFormGuard } from './guards/dirty-form.guard'
+import { MailComponent } from './components/manage/mail/mail.component'
+import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
 import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { TasksComponent } from './components/admin/tasks/tasks.component'
-import { PermissionsGuard } from './guards/permissions.guard'
+import { TagListComponent } from './components/manage/tag-list/tag-list.component'
+import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
+import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
+import { DirtyFormGuard } from './guards/dirty-form.guard'
 import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
 import {
   PermissionAction,
   PermissionType,
 } from './services/permissions.service'
-import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
-import { MailComponent } from './components/manage/mail/mail.component'
-import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { ConfigComponent } from './components/admin/config/config.component'
-import { TrashComponent } from './components/admin/trash/trash.component'
 
 export const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -165,6 +166,10 @@ export const routes: Routes = [
         path: 'settings/usersgroups',
         redirectTo: '/usersgroups',
       },
+      {
+        path: 'settings/savedviews',
+        redirectTo: '/savedviews',
+      },
       {
         path: 'settings',
         component: SettingsComponent,
@@ -255,6 +260,17 @@ export const routes: Routes = [
           },
         },
       },
+      {
+        path: 'savedviews',
+        component: SavedViewsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.SavedView,
+          },
+        },
+      },
     ],
   },
 

src-ui/src/app/app.component.spec.ts

@@ -1,3 +1,4 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
@@ -6,25 +7,24 @@ import {
   tick,
 } from '@angular/core/testing'
 import { Router, RouterModule } from '@angular/router'
-import { TourService, TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxFileDropModule } from 'ngx-file-drop'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
+import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
 import {
   ConsumerStatusService,
   FileStatus,
 } from './services/consumer-status.service'
-import { PermissionsService } from './services/permissions.service'
-import { ToastService, Toast } from './services/toast.service'
-import { SettingsService } from './services/settings.service'
-import { FileDropComponent } from './components/file-drop/file-drop.component'
-import { NgxFileDropModule } from 'ngx-file-drop'
-import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { HotKeyService } from './services/hot-key.service'
-import { PermissionsGuard } from './guards/permissions.guard'
-import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { PermissionsService } from './services/permissions.service'
+import { SettingsService } from './services/settings.service'
+import { Toast, ToastService } from './services/toast.service'
 
 describe('AppComponent', () => {
   let component: AppComponent

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

@@ -1,18 +1,18 @@
-import { SettingsService } from './services/settings.service'
-import { SETTINGS_KEYS } from './data/ui-settings'
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router } from '@angular/router'
-import { Subscription, first } from 'rxjs'
-import { ConsumerStatusService } from './services/consumer-status.service'
-import { ToastService } from './services/toast.service'
-import { TasksService } from './services/tasks.service'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { first, Subscription } from 'rxjs'
+import { SETTINGS_KEYS } from './data/ui-settings'
+import { ConsumerStatusService } from './services/consumer-status.service'
+import { HotKeyService } from './services/hot-key.service'
 import {
   PermissionAction,
   PermissionsService,
   PermissionType,
 } from './services/permissions.service'
-import { HotKeyService } from './services/hot-key.service'
+import { SettingsService } from './services/settings.service'
+import { TasksService } from './services/tasks.service'
+import { ToastService } from './services/toast.service'
 
 @Component({
   selector: 'pngx-root',
@@ -165,7 +165,7 @@ export class AppComponent implements OnInit, OnDestroy {
       [
         {
           anchorId: 'tour.dashboard',
-          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some.`,
+          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
           route: '/dashboard',
           delayAfterNavigation: 500,
           isOptional: false,
@@ -227,7 +227,7 @@ export class AppComponent implements OnInit, OnDestroy {
         },
         {
           anchorId: 'tour.settings',
-          content: $localize`Check out the settings for various tweaks to the web app and toggle settings for saved views.`,
+          content: $localize`Check out the settings for various tweaks to the web app.`,
           route: '/settings',
           backdropConfig: {
             offset: 0,

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

@@ -1,136 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser'
-import { APP_INITIALIZER, NgModule } from '@angular/core'
-import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component'
-import {
-  NgbDateAdapter,
-  NgbDateParserFormatter,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
+import { DragDropModule } from '@angular/cdk/drag-drop'
+import { DatePipe, registerLocaleData } from '@angular/common'
 import {
   HTTP_INTERCEPTORS,
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http'
-import { DocumentListComponent } from './components/document-list/document-list.component'
-import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
-import { DashboardComponent } from './components/dashboard/dashboard.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
-import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
-import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
-import { LogsComponent } from './components/admin/logs/logs.component'
-import { SettingsComponent } from './components/admin/settings/settings.component'
+import { APP_INITIALIZER, NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { DatePipe, registerLocaleData } from '@angular/common'
-import { NotFoundComponent } from './components/not-found/not-found.component'
-import { ConfirmDialogComponent } from './components/common/confirm-dialog/confirm-dialog.component'
-import { CorrespondentEditDialogComponent } from './components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { TagEditDialogComponent } from './components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
-import { DocumentTypeEditDialogComponent } from './components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { TagComponent } from './components/common/tag/tag.component'
-import { ClearableBadgeComponent } from './components/common/clearable-badge/clearable-badge.component'
-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/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 { DatesDropdownComponent } from './components/common/dates-dropdown/dates-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 { TextAreaComponent } from './components/common/input/textarea/textarea.component'
-import { SelectComponent } from './components/common/input/select/select.component'
-import { CheckComponent } from './components/common/input/check/check.component'
-import { UrlComponent } from './components/common/input/url/url.component'
-import { PasswordComponent } from './components/common/input/password/password.component'
-import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component'
-import { TagsComponent } from './components/common/input/tags/tags.component'
-import { IfPermissionsDirective } from './directives/if-permissions.directive'
-import { SortableDirective } from './directives/sortable.directive'
-import { CookieService } from 'ngx-cookie-service'
-import { CsrfInterceptor } from './interceptors/csrf.interceptor'
-import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-view-widget/saved-view-widget.component'
-import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component'
-import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component'
-import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component'
-import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component'
-import { YesNoPipe } from './pipes/yes-no.pipe'
-import { FileSizePipe } from './pipes/file-size.pipe'
-import { FilterPipe } from './pipes/filter.pipe'
-import { DocumentTitlePipe } from './pipes/document-title.pipe'
-import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component'
-import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component'
+import { BrowserModule } from '@angular/platform-browser'
+import {
+  NgbDateAdapter,
+  NgbDateParserFormatter,
+  NgbModule,
+} from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { NumberComponent } from './components/common/input/number/number.component'
-import { SafeUrlPipe } from './pipes/safeurl.pipe'
-import { SafeHtmlPipe } from './pipes/safehtml.pipe'
-import { CustomDatePipe } from './pipes/custom-date.pipe'
-import { DateComponent } from './components/common/input/date/date.component'
-import { ISODateAdapter } from './utils/ngb-iso-date-adapter'
-import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter'
-import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
-import { ColorSliderModule } from 'ngx-color/slider'
-import { ColorComponent } from './components/common/input/color/color.component'
-import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DocumentNotesComponent } from './components/document-notes/document-notes.component'
-import { PermissionsGuard } from './guards/permissions.guard'
-import { DirtyDocGuard } from './guards/dirty-doc.guard'
-import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
-import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
-import { SettingsService } from './services/settings.service'
-import { TasksComponent } from './components/admin/tasks/tasks.component'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
-import { UserEditDialogComponent } from './components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
-import { GroupEditDialogComponent } from './components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
-import { PermissionsSelectComponent } from './components/common/permissions-select/permissions-select.component'
-import { MailAccountEditDialogComponent } from './components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
-import { MailRuleEditDialogComponent } from './components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
-import { PermissionsUserComponent } from './components/common/input/permissions/permissions-user/permissions-user.component'
-import { PermissionsGroupComponent } from './components/common/input/permissions/permissions-group/permissions-group.component'
-import { IfOwnerDirective } from './directives/if-owner.directive'
-import { IfObjectPermissionsDirective } from './directives/if-object-permissions.directive'
-import { PermissionsDialogComponent } from './components/common/permissions-dialog/permissions-dialog.component'
-import { PermissionsFormComponent } from './components/common/input/permissions/permissions-form/permissions-form.component'
-import { PermissionsFilterDropdownComponent } from './components/common/permissions-filter-dropdown/permissions-filter-dropdown.component'
-import { UsernamePipe } from './pipes/username.pipe'
-import { LogoComponent } from './components/common/logo/logo.component'
-import { IsNumberPipe } from './pipes/is-number.pipe'
-import { ShareLinksDropdownComponent } from './components/common/share-links-dropdown/share-links-dropdown.component'
-import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
-import { WorkflowEditDialogComponent } from './components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { MailComponent } from './components/manage/mail/mail.component'
-import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { FileDropComponent } from './components/file-drop/file-drop.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { CustomFieldsQueryDropdownComponent } from './components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
-import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
 import { PdfViewerModule } from 'ng2-pdf-viewer'
-import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
-import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
-import { SwitchComponent } from './components/common/input/switch/switch.component'
-import { ConfigComponent } from './components/admin/config/config.component'
-import { FileComponent } from './components/common/input/file/file.component'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component'
-import { MonetaryComponent } from './components/common/input/monetary/monetary.component'
-import { SystemStatusDialogComponent } from './components/common/system-status-dialog/system-status-dialog.component'
-import { RotateConfirmDialogComponent } from './components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
-import { MergeConfirmDialogComponent } from './components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
-import { SplitConfirmDialogComponent } from './components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
-import { DocumentHistoryComponent } from './components/document-history/document-history.component'
-import { DragDropSelectComponent } from './components/common/input/drag-drop-select/drag-drop-select.component'
-import { CustomFieldDisplayComponent } from './components/common/custom-field-display/custom-field-display.component'
-import { GlobalSearchComponent } from './components/app-frame/global-search/global-search.component'
-import { HotkeyDialogComponent } from './components/common/hotkey-dialog/hotkey-dialog.component'
-import { DeletePagesConfirmDialogComponent } from './components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
-import { TrashComponent } from './components/admin/trash/trash.component'
 import {
   airplane,
   archive,
@@ -143,12 +27,11 @@ import {
   arrowRightShort,
   arrowUpRight,
   asterisk,
-  braces,
   bodyText,
-  boxArrowInRight,
   boxArrowUp,
   boxArrowUpRight,
   boxes,
+  braces,
   calendar,
   calendarEvent,
   calendarEventFill,
@@ -186,6 +69,7 @@ import {
   fileEarmarkFill,
   fileEarmarkLock,
   fileEarmarkMinus,
+  fileEarmarkRichtext,
   files,
   fileText,
   filter,
@@ -205,6 +89,7 @@ import {
   listTask,
   listUl,
   microsoft,
+  NgxBootstrapIconsModule,
   nodePlus,
   pencil,
   people,
@@ -224,8 +109,8 @@ import {
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,
-  tagFill,
   tag,
+  tagFill,
   tags,
   textIndentLeft,
   textLeft,
@@ -234,10 +119,129 @@ import {
   trash,
   uiRadios,
   upcScan,
+  windowStack,
   x,
   xCircle,
   xLg,
 } from 'ngx-bootstrap-icons'
+import { ColorSliderModule } from 'ngx-color/slider'
+import { CookieService } from 'ngx-cookie-service'
+import { NgxFileDropModule } from 'ngx-file-drop'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { AppRoutingModule } from './app-routing.module'
+import { AppComponent } from './app.component'
+import { ConfigComponent } from './components/admin/config/config.component'
+import { LogsComponent } from './components/admin/logs/logs.component'
+import { SettingsComponent } from './components/admin/settings/settings.component'
+import { TasksComponent } from './components/admin/tasks/tasks.component'
+import { TrashComponent } from './components/admin/trash/trash.component'
+import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
+import { AppFrameComponent } from './components/app-frame/app-frame.component'
+import { GlobalSearchComponent } from './components/app-frame/global-search/global-search.component'
+import { ClearableBadgeComponent } from './components/common/clearable-badge/clearable-badge.component'
+import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component'
+import { ConfirmDialogComponent } from './components/common/confirm-dialog/confirm-dialog.component'
+import { DeletePagesConfirmDialogComponent } from './components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
+import { MergeConfirmDialogComponent } from './components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
+import { RotateConfirmDialogComponent } from './components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
+import { SplitConfirmDialogComponent } from './components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
+import { CustomFieldDisplayComponent } from './components/common/custom-field-display/custom-field-display.component'
+import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
+import { CustomFieldsQueryDropdownComponent } from './components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
+import { DatesDropdownComponent } from './components/common/dates-dropdown/dates-dropdown.component'
+import { CorrespondentEditDialogComponent } from './components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
+import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { DocumentTypeEditDialogComponent } from './components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
+import { GroupEditDialogComponent } from './components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { MailAccountEditDialogComponent } from './components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
+import { MailRuleEditDialogComponent } from './components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
+import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
+import { TagEditDialogComponent } from './components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
+import { UserEditDialogComponent } from './components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { WorkflowEditDialogComponent } from './components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.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 { HotkeyDialogComponent } from './components/common/hotkey-dialog/hotkey-dialog.component'
+import { CheckComponent } from './components/common/input/check/check.component'
+import { ColorComponent } from './components/common/input/color/color.component'
+import { DateComponent } from './components/common/input/date/date.component'
+import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
+import { DragDropSelectComponent } from './components/common/input/drag-drop-select/drag-drop-select.component'
+import { EntriesComponent } from './components/common/input/entries/entries.component'
+import { FileComponent } from './components/common/input/file/file.component'
+import { MonetaryComponent } from './components/common/input/monetary/monetary.component'
+import { NumberComponent } from './components/common/input/number/number.component'
+import { PasswordComponent } from './components/common/input/password/password.component'
+import { PermissionsFormComponent } from './components/common/input/permissions/permissions-form/permissions-form.component'
+import { PermissionsGroupComponent } from './components/common/input/permissions/permissions-group/permissions-group.component'
+import { PermissionsUserComponent } from './components/common/input/permissions/permissions-user/permissions-user.component'
+import { SelectComponent } from './components/common/input/select/select.component'
+import { SwitchComponent } from './components/common/input/switch/switch.component'
+import { TagsComponent } from './components/common/input/tags/tags.component'
+import { TextComponent } from './components/common/input/text/text.component'
+import { TextAreaComponent } from './components/common/input/textarea/textarea.component'
+import { UrlComponent } from './components/common/input/url/url.component'
+import { LogoComponent } from './components/common/logo/logo.component'
+import { PageHeaderComponent } from './components/common/page-header/page-header.component'
+import { PermissionsDialogComponent } from './components/common/permissions-dialog/permissions-dialog.component'
+import { PermissionsFilterDropdownComponent } from './components/common/permissions-filter-dropdown/permissions-filter-dropdown.component'
+import { PermissionsSelectComponent } from './components/common/permissions-select/permissions-select.component'
+import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
+import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
+import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component'
+import { ShareLinksDropdownComponent } from './components/common/share-links-dropdown/share-links-dropdown.component'
+import { SystemStatusDialogComponent } from './components/common/system-status-dialog/system-status-dialog.component'
+import { TagComponent } from './components/common/tag/tag.component'
+import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { DashboardComponent } from './components/dashboard/dashboard.component'
+import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-view-widget/saved-view-widget.component'
+import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component'
+import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component'
+import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component'
+import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component'
+import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
+import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
+import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component'
+import { DocumentHistoryComponent } from './components/document-history/document-history.component'
+import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component'
+import { CustomFieldsBulkEditDialogComponent } from './components/document-list/bulk-editor/custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.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 { DocumentListComponent } from './components/document-list/document-list.component'
+import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component'
+import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component'
+import { DocumentNotesComponent } from './components/document-notes/document-notes.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
+import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
+import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
+import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
+import { MailComponent } from './components/manage/mail/mail.component'
+import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
+import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
+import { TagListComponent } from './components/manage/tag-list/tag-list.component'
+import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
+import { NotFoundComponent } from './components/not-found/not-found.component'
+import { IfObjectPermissionsDirective } from './directives/if-object-permissions.directive'
+import { IfOwnerDirective } from './directives/if-owner.directive'
+import { IfPermissionsDirective } from './directives/if-permissions.directive'
+import { SortableDirective } from './directives/sortable.directive'
+import { DirtyDocGuard } from './guards/dirty-doc.guard'
+import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
+import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
+import { CsrfInterceptor } from './interceptors/csrf.interceptor'
+import { CustomDatePipe } from './pipes/custom-date.pipe'
+import { DocumentTitlePipe } from './pipes/document-title.pipe'
+import { FileSizePipe } from './pipes/file-size.pipe'
+import { FilterPipe } from './pipes/filter.pipe'
+import { IsNumberPipe } from './pipes/is-number.pipe'
+import { SafeHtmlPipe } from './pipes/safehtml.pipe'
+import { SafeUrlPipe } from './pipes/safeurl.pipe'
+import { UsernamePipe } from './pipes/username.pipe'
+import { YesNoPipe } from './pipes/yes-no.pipe'
+import { SettingsService } from './services/settings.service'
+import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter'
+import { ISODateAdapter } from './utils/ngb-iso-date-adapter'
 
 const icons = {
   airplane,
@@ -253,7 +257,6 @@ const icons = {
   asterisk,
   braces,
   bodyText,
-  boxArrowInRight,
   boxArrowUp,
   boxArrowUpRight,
   boxes,
@@ -294,6 +297,7 @@ const icons = {
   fileEarmarkFill,
   fileEarmarkLock,
   fileEarmarkMinus,
+  fileEarmarkRichtext,
   files,
   fileText,
   filter,
@@ -342,6 +346,7 @@ const icons = {
   trash,
   uiRadios,
   upcScan,
+  windowStack,
   x,
   xCircle,
   xLg,
@@ -522,6 +527,9 @@ function initializeApp(settings: SettingsService) {
     HotkeyDialogComponent,
     DeletePagesConfirmDialogComponent,
     TrashComponent,
+    EntriesComponent,
+    SavedViewsComponent,
+    CustomFieldsBulkEditDialogComponent,
   ],
   bootstrap: [AppComponent],
   imports: [

src-ui/src/app/components/admin/config/config.component.spec.ts

@@ -1,24 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { ConfigComponent } from './config.component'
-import { ConfigService } from 'src/app/services/config.service'
-import { ToastService } from 'src/app/services/toast.service'
-import { of, throwError } from 'rxjs'
-import { OutputTypeConfig } from 'src/app/data/paperless-config'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { TextComponent } from '../../common/input/text/text.component'
-import { NumberComponent } from '../../common/input/number/number.component'
-import { SwitchComponent } from '../../common/input/switch/switch.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SelectComponent } from '../../common/input/select/select.component'
-import { FileComponent } from '../../common/input/file/file.component'
-import { SettingsService } from 'src/app/services/settings.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { of, throwError } from 'rxjs'
+import { OutputTypeConfig } from 'src/app/data/paperless-config'
+import { ConfigService } from 'src/app/services/config.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { FileComponent } from '../../common/input/file/file.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ConfigComponent } from './config.component'
 
 describe('ConfigComponent', () => {
   let component: ConfigComponent

src-ui/src/app/components/admin/config/config.component.ts

@@ -1,25 +1,24 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { AbstractControl, FormControl, FormGroup } from '@angular/forms'
+import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import {
   BehaviorSubject,
   Observable,
-  Subject,
   Subscription,
   first,
   takeUntil,
 } from 'rxjs'
 import {
-  PaperlessConfigOptions,
   ConfigCategory,
   ConfigOption,
   ConfigOptionType,
   PaperlessConfig,
+  PaperlessConfigOptions,
 } from 'src/app/data/paperless-config'
 import { ConfigService } from 'src/app/services/config.service'
-import { ToastService } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-config',
@@ -27,7 +26,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   styleUrl: './config.component.scss',
 })
 export class ConfigComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
   public readonly ConfigOptionType = ConfigOptionType
@@ -45,15 +44,11 @@ export class ConfigComponent
     return PaperlessConfigOptions.filter((o) => o.category === category)
   }
 
-  public loading: boolean = false
-
   initialConfig: PaperlessConfig
   store: BehaviorSubject<any>
   storeSub: Subscription
   isDirty$: Observable<boolean>
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(
     private configService: ConfigService,
     private toastService: ToastService,
@@ -67,7 +62,6 @@ export class ConfigComponent
   }
 
   ngOnInit(): void {
-    this.loading = true
     this.configService
       .getConfig()
       .pipe(takeUntil(this.unsubscribeNotifier))

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

@@ -4,7 +4,7 @@
   info="Review the log files for the application and for email checking."
   i18n-info>
   <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" (click)="toggleAutoRefresh()" [attr.checked]="autoRefreshInterval">
+    <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
     <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
   </div>
 </pngx-page-header>
@@ -17,7 +17,7 @@
       </a>
     </li>
   }
-  @if (isLoading || !logFiles.length) {
+  @if (loading || !logFiles.length) {
     <div class="ps-2 d-flex align-items-center">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       @if (!logFiles.length) {
@@ -30,15 +30,13 @@
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
 <div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
-  @if (isLoading && logFiles.length) {
+  @if (loading && logFiles.length) {
     <div>
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </div>
   }
-  @for (log of logs; track log) {
-    <p
-      class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
-    >{{log}}</p>
+  @for (log of logs; track $index) {
+    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
   }
 </div>

src-ui/src/app/components/admin/logs/logs.component.spec.ts

@@ -1,18 +1,14 @@
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { BrowserModule, By } from '@angular/platform-browser'
+import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LogsComponent } from './logs.component'
-import { of, throwError } from 'rxjs'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
-import { BrowserModule, By } from '@angular/platform-browser'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const paperless_logs = [
   '[2023-05-29 03:05:01,224] [DEBUG] [paperless.tasks] Training data unchanged.',
@@ -42,6 +38,8 @@ describe('LogsComponent', () => {
         BrowserModule,
         NgbModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        ReactiveFormsModule,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
@@ -90,8 +88,7 @@ describe('LogsComponent', () => {
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
 
-    component.toggleAutoRefresh()
-    expect(component.autoRefreshInterval).toBeNull()
+    component.autoRefreshEnabled = false
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })

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

@@ -1,24 +1,30 @@
 import {
+  ChangeDetectorRef,
   Component,
   ElementRef,
+  OnDestroy,
   OnInit,
   ViewChild,
-  OnDestroy,
-  ChangeDetectorRef,
 } from '@angular/core'
-import { Subject, takeUntil } from 'rxjs'
+import { filter, takeUntil, timer } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss'],
 })
-export class LogsComponent implements OnInit, OnDestroy {
+export class LogsComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit, OnDestroy
+{
   constructor(
     private logService: LogService,
     private changedetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    super()
+  }
 
   public logs: string[] = []
 
@@ -26,50 +32,50 @@ export class LogsComponent implements OnInit, OnDestroy {
 
   public activeLog: string
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
-  public isLoading: boolean = false
-
-  public autoRefreshInterval: any
+  public autoRefreshEnabled: boolean = true
 
   @ViewChild('logContainer') logContainer: ElementRef
 
   ngOnInit(): void {
-    this.isLoading = true
     this.logService
       .list()
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((result) => {
         this.logFiles = result
-        this.isLoading = false
+        this.loading = false
         if (this.logFiles.length > 0) {
           this.activeLog = this.logFiles[0]
           this.reloadLogs()
         }
-        this.toggleAutoRefresh()
+        timer(5000, 5000)
+          .pipe(
+            filter(() => this.autoRefreshEnabled),
+            takeUntil(this.unsubscribeNotifier)
+          )
+          .subscribe(() => {
+            this.reloadLogs()
+          })
       })
   }
 
   ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(true)
-    this.unsubscribeNotifier.complete()
-    clearInterval(this.autoRefreshInterval)
+    super.ngOnDestroy()
   }
 
   reloadLogs() {
-    this.isLoading = true
+    this.loading = true
     this.logService
       .get(this.activeLog)
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
           this.logs = result
-          this.isLoading = false
+          this.loading = false
           this.scrollToBottom()
         },
         error: () => {
           this.logs = []
-          this.isLoading = false
+          this.loading = false
         },
       })
   }
@@ -96,15 +102,4 @@ export class LogsComponent implements OnInit, OnDestroy {
       behavior: 'auto',
     })
   }
-
-  toggleAutoRefresh(): void {
-    if (this.autoRefreshInterval) {
-      clearInterval(this.autoRefreshInterval)
-      this.autoRefreshInterval = null
-    } else {
-      this.autoRefreshInterval = setInterval(() => {
-        this.reloadLogs()
-      }, 5000)
-    }
-  }
 }

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

@@ -1,7 +1,7 @@
 <pngx-page-header
   title="Settings"
   i18n-title
-  info="Options to customize appearance, notifications, saved views and more. Settings apply to the <strong>current user only</strong>."
+  info="Options to customize appearance, notifications and more. Settings apply to the <strong>current user only</strong>."
   i18n-info
   >
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
@@ -39,193 +39,204 @@
     <li [ngbNavItem]="SettingsNavIDs.General">
       <a ngbNavLink i18n>General</a>
       <ng-template ngbNavContent>
-
-        <h4 i18n>Appearance</h4>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Display language</span>
-          </div>
-          <div class="col">
-
-            <select class="form-select" formControlName="displayLanguage">
-              @for (lang of displayLanguageOptions; track lang) {
-                <option [ngValue]="lang.code">{{lang.name}}@if (lang.code && currentLocale !== 'en-US') {
-                  <span> - {{lang.englishName}}</span>
-                }</option>
-              }
-            </select>
-
-            @if (displayLanguageIsDirty) {
-              <small class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
-            }
-
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Date display</span>
-          </div>
-          <div class="col">
-
-            <select class="form-select" formControlName="dateLocale">
-              @for (lang of dateLocaleOptions; track lang) {
-                <option [ngValue]="lang.code">{{lang.name}}@if (lang.code) {
-                  <span> - {{today | customDate:'shortDate':null:lang.code}}</span>
-                }</option>
-              }
-            </select>
-
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Date format</span>
-          </div>
-          <div class="col">
-
-            <div class="form-check">
-              <input type="radio" id="dateFormatShort" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="shortDate">
-              <label class="form-check-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate':null:computedDateLocale}}</label>
-            </div>
-            <div class="form-check">
-              <input type="radio" id="dateFormatMedium" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="mediumDate">
-              <label class="form-check-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate':null:computedDateLocale}}</label>
-            </div>
-            <div class="form-check">
-              <input type="radio" id="dateFormatLong" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="longDate">
-              <label class="form-check-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate':null:computedDateLocale}}</label>
-            </div>
-
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Items per page</span>
-          </div>
-          <div class="col">
-
-            <select class="form-select" formControlName="documentListItemPerPage">
-              <option [ngValue]="10">10</option>
-              <option [ngValue]="25">25</option>
-              <option [ngValue]="50">50</option>
-              <option [ngValue]="100">100</option>
-            </select>
-
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Document editor</span>
-          </div>
-          <div class="col">
-
-            <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
-
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Sidebar</span>
-          </div>
-          <div class="col">
-
-            <pngx-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></pngx-input-check>
-
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Dark mode</span>
-          </div>
-          <div class="col">
-            <pngx-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></pngx-input-check>
-            <pngx-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></pngx-input-check>
-            <pngx-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></pngx-input-check>
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Theme Color</span>
-          </div>
-          <div class="col col-md-3">
-            <pngx-input-color i18n-title formControlName="themeColor" [error]="error?.color"></pngx-input-color>
-          </div>
-          <div class="col-2">
-            <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
-              <i-bs width="1em" height="1em" name="x"></i-bs><ng-container i18n>Reset</ng-container>
-            </button>
-          </div>
-        </div>
-
-        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
-            Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
-            Actual updating of the app must still be performed manually.
-          </p>
-            <p i18n>
-            <em>No tracking data is collected by the app in any way.</em>
-          </p>
-            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 class="mt-4" i18n>Document editing</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Automatically remove inbox tag(s) on save" formControlName="documentEditingRemoveInboxTags"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 class="mt-4" i18n>Bulk editing</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs"></pngx-input-check>
-            <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 class="mt-4" i18n>Global search</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
-          </div>
-        </div>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <div class="row">
-              <div class="col-md-2 col-form-label pt-0">
-                <span i18n>Full search links to</span>
+        <div class="row">
+          <div class="col-xl-6 pe-xl-5">
+            <h4 i18n>Appearance</h4>
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Display language</span>
               </div>
               <div class="col">
-                <select class="form-select" formControlName="searchLink">
-                  <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
-                  <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
+
+                <select class="form-select" formControlName="displayLanguage">
+                  @for (lang of displayLanguageOptions; track lang) {
+                    <option [ngValue]="lang.code">{{lang.name}}@if (lang.code && currentLocale !== 'en-US') {
+                      <span> - {{lang.englishName}}</span>
+                    }</option>
+                  }
                 </select>
+
+                @if (displayLanguageIsDirty) {
+                  <small class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
+                }
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Date display</span>
+              </div>
+              <div class="col">
+
+                <select class="form-select" formControlName="dateLocale">
+                  @for (lang of dateLocaleOptions; track lang) {
+                    <option [ngValue]="lang.code">{{lang.name}}@if (lang.code) {
+                      <span> - {{today | customDate:'shortDate':null:lang.code}}</span>
+                    }</option>
+                  }
+                </select>
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Date format</span>
+              </div>
+              <div class="col">
+
+                <div class="form-check">
+                  <input type="radio" id="dateFormatShort" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="shortDate">
+                  <label class="form-check-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate':null:computedDateLocale}}</label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" id="dateFormatMedium" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="mediumDate">
+                  <label class="form-check-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate':null:computedDateLocale}}</label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" id="dateFormatLong" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="longDate">
+                  <label class="form-check-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate':null:computedDateLocale}}</label>
+                </div>
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Items per page</span>
+              </div>
+              <div class="col">
+
+                <select class="form-select" formControlName="documentListItemPerPage">
+                  <option [ngValue]="10">10</option>
+                  <option [ngValue]="25">25</option>
+                  <option [ngValue]="50">50</option>
+                  <option [ngValue]="100">100</option>
+                </select>
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Sidebar</span>
+              </div>
+              <div class="col">
+
+                <pngx-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></pngx-input-check>
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Dark mode</span>
+              </div>
+              <div class="col">
+                <pngx-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></pngx-input-check>
+                <pngx-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></pngx-input-check>
+                <pngx-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Theme Color</span>
+              </div>
+              <div class="col col-md-3">
+                <pngx-input-color i18n-title formControlName="themeColor" [error]="error?.color"></pngx-input-color>
+              </div>
+              <div class="col-2">
+                <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
+                  <i-bs width="1em" height="1em" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                </button>
+              </div>
+            </div>
+
+            <h4 class="mt-4" i18n>Document editing</h4>
+
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Automatically remove inbox tag(s) on save" formControlName="documentEditingRemoveInboxTags"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>
               </div>
             </div>
           </div>
-        </div>
+          <div class="col-xl-6 ps-xl-5">
+            <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
+            <div class="row mb-3">
+              <div class="offset-md-3 col d-flex flex-row align-items-start">
+                <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+                <button class="btn btn-sm btn-link text-muted me-auto p-0 ms-2" title="What's this?" i18n-title type="button" triggers="mouseenter:mouseleave" [ngbPopover]="updatesPopover" [autoClose]="true">
+                  <i-bs name="question-circle"></i-bs>
+                </button>
+                <ng-template #updatesPopover>
+                  <p i18n>
+                    Update checking works by pinging the public GitHub API for the latest release to determine whether a new version is available. Actual updating of the app must still be performed manually.
+                  </p>
+                  <p>
+                    <em i18n>No tracking data is collected by the app in any way.</em>
+                  </p>
+                </ng-template>
+              </div>
+            </div>
 
-        <h4 class="mt-4" i18n>Notes</h4>
+            <h4 class="mt-4" i18n>Bulk editing</h4>
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs"></pngx-input-check>
+                <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+              </div>
+            </div>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+            <h4 class="mt-4" i18n>Global search</h4>
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <div class="row">
+                  <div class="col-md-2 col-form-label pt-0">
+                    <span i18n>Full search links to</span>
+                  </div>
+                  <div class="col">
+                    <select class="form-select" formControlName="searchLink">
+                      <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
+                      <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <h4 class="mt-4" i18n>Saved Views</h4>
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
+              </div>
+            </div>
+
+            <h4 class="mt-4" i18n>Notes</h4>
+            <div class="row mb-3">
+              <div class="offset-md-3 col">
+                <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -331,87 +342,6 @@
 
       </ng-template>
     </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.SavedViews" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }">
-      <a ngbNavLink i18n>Saved views</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Settings</h4>
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 i18n>Views</h4>
-        <ul class="list-group" formGroupName="savedViews">
-
-          @for (view of savedViews; track view) {
-            <li class="list-group-item py-3">
-            <div [formGroupName]="view.id">
-              <div class="row">
-                <div class="col">
-                  <pngx-input-text title="Name" formControlName="name"></pngx-input-text>
-                </div>
-                <div class="col">
-                  <div class="form-check form-switch mt-3">
-                    <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-                    <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
-                  </div>
-                  <div class="form-check form-switch">
-                    <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-                    <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
-                  </div>
-                </div>
-                <div class="col-auto">
-                  <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-                  <pngx-confirm-button
-                    label="Delete"
-                    i18n-label
-                    (confirm)="deleteSavedView(view)"
-                    *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }"
-                    buttonClasses="btn-sm btn-outline-danger form-control"
-                    iconName="trash">
-                  </pngx-confirm-button>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col">
-                  <pngx-input-number i18n-title title="Documents page size" [showAdd]="false" formControlName="page_size"></pngx-input-number>
-                </div>
-                <div class="col">
-                  <label class="form-label" for="display_mode_{{view.id}}" i18n>Display as</label>
-                  <select class="form-select" formControlName="display_mode">
-                    <option [ngValue]="DisplayMode.TABLE" i18n>Table</option>
-                    <option [ngValue]="DisplayMode.SMALL_CARDS" i18n>Small Cards</option>
-                    <option [ngValue]="DisplayMode.LARGE_CARDS" i18n>Large Cards</option>
-                  </select>
-                </div>
-                  @if (displayFields) {
-                    <pngx-input-drag-drop-select i18n-title title="Show" i18n-emptyText emptyText="Default" [items]="displayFields" formControlName="display_fields"></pngx-input-drag-drop-select>
-                  }
-                </div>
-            </div>
-            </li>
-          }
-
-          @if (savedViews && savedViews.length === 0) {
-            <li class="list-group-item">
-              <div i18n>No saved views defined.</div>
-            </li>
-          }
-
-          @if (!savedViews) {
-            <li class="list-group-item">
-              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-              <div class="visually-hidden" i18n>Loading...</div>
-            </li>
-          }
-
-        </ul>
-
-      </ng-template>
-    </li>
   </ul>
 
   <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>

src-ui/src/app/components/admin/settings/settings.component.spec.ts

@@ -1,35 +1,45 @@
-import { ViewportScroller, DatePipe } from '@angular/common'
+import { DragDropModule } from '@angular/cdk/drag-drop'
+import { DatePipe, ViewportScroller } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
-import { Router, ActivatedRoute, convertToParamMap } from '@angular/router'
+import { ActivatedRoute, Router, convertToParamMap } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
-  NgbModule,
   NgbAlertModule,
-  NgbNavLink,
   NgbModal,
   NgbModalModule,
+  NgbModule,
+  NgbNavLink,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
-import { SavedView } from 'src/app/data/saved-view'
+import {
+  InstallType,
+  SystemStatus,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { ToastService, Toast } from 'src/app/services/toast.service'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { CheckComponent } from '../../common/input/check/check.component'
 import { ColorComponent } from '../../common/input/color/color.component'
+import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component'
 import { NumberComponent } from '../../common/input/number/number.component'
 import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
 import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
@@ -37,25 +47,9 @@ import { SelectComponent } from '../../common/input/select/select.component'
 import { TagsComponent } from '../../common/input/tags/tags.component'
 import { TextComponent } from '../../common/input/text/text.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SettingsComponent } from './settings.component'
-import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
-import { SystemStatusService } from 'src/app/services/system-status.service'
-import {
-  SystemStatus,
-  InstallType,
-  SystemStatusItemStatus,
-} from 'src/app/data/system-status'
-import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component'
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { SettingsComponent } from './settings.component'
 
-const savedViews = [
-  { id: 1, name: 'view1', show_in_sidebar: true, show_on_dashboard: true },
-  { id: 2, name: 'view2', show_in_sidebar: false, show_on_dashboard: false },
-]
 const users = [
   { id: 1, username: 'user1', is_superuser: false },
   { id: 2, username: 'user2', is_superuser: false },
@@ -70,7 +64,6 @@ describe('SettingsComponent', () => {
   let fixture: ComponentFixture<SettingsComponent>
   let router: Router
   let settingsService: SettingsService
-  let savedViewService: SavedViewService
   let activatedRoute: ActivatedRoute
   let viewportScroller: ViewportScroller
   let toastService: ToastService
@@ -139,7 +132,6 @@ describe('SettingsComponent', () => {
       .spyOn(permissionsService, 'currentUserOwnsObject')
       .mockReturnValue(true)
     groupService = TestBed.inject(GroupService)
-    savedViewService = TestBed.inject(SavedViewService)
   })
 
   function completeSetup(excludeService = null) {
@@ -161,15 +153,6 @@ describe('SettingsComponent', () => {
         })
       )
     }
-    if (excludeService !== savedViewService) {
-      jest.spyOn(savedViewService, 'listAll').mockReturnValue(
-        of({
-          all: savedViews.map((v) => v.id),
-          count: savedViews.length,
-          results: (savedViews as SavedView[]).concat([]),
-        })
-      )
-    }
 
     fixture = TestBed.createComponent(SettingsComponent)
     component = fixture.componentInstance
@@ -184,8 +167,6 @@ describe('SettingsComponent', () => {
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
-    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'savedviews'])
 
     const initSpy = jest.spyOn(component, 'initialize')
     component.isDirty = true // mock dirty
@@ -213,90 +194,8 @@ describe('SettingsComponent', () => {
     expect(scrollSpy).toHaveBeenCalledWith('#notifications')
   })
 
-  it('should enable organizing of sidebar saved views even on direct navigation', () => {
-    completeSetup()
-    jest
-      .spyOn(activatedRoute, 'paramMap', 'get')
-      .mockReturnValue(of(convertToParamMap({ section: 'savedviews' })))
-    activatedRoute.snapshot.fragment = '#savedviews'
-    component.ngOnInit()
-    expect(component.activeNavID).toEqual(4) // Saved Views
-    component.ngAfterViewInit()
-    expect(settingsService.organizingSidebarSavedViews).toBeTruthy()
-  })
-
-  it('should support save saved views, show error', () => {
-    completeSetup()
-
-    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
-    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
-    fixture.detectChanges()
-
-    const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastSpy = jest.spyOn(toastService, 'show')
-    const savedViewPatchSpy = jest.spyOn(savedViewService, 'patchMany')
-
-    const toggle = fixture.debugElement.query(
-      By.css('.form-check.form-switch input')
-    )
-    toggle.nativeElement.checked = true
-    toggle.nativeElement.dispatchEvent(new Event('change'))
-
-    // saved views error first
-    savedViewPatchSpy.mockReturnValueOnce(
-      throwError(() => new Error('unable to save saved views'))
-    )
-    component.saveSettings()
-    expect(toastErrorSpy).toHaveBeenCalled()
-    expect(savedViewPatchSpy).toHaveBeenCalled()
-    toastSpy.mockClear()
-    toastErrorSpy.mockClear()
-    savedViewPatchSpy.mockClear()
-
-    // succeed saved views
-    savedViewPatchSpy.mockReturnValueOnce(of(savedViews as SavedView[]))
-    component.saveSettings()
-    expect(toastErrorSpy).not.toHaveBeenCalled()
-    expect(savedViewPatchSpy).toHaveBeenCalled()
-  })
-
-  it('should update only patch saved views that have changed', () => {
-    completeSetup()
-
-    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
-    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
-    fixture.detectChanges()
-
-    const patchSpy = jest.spyOn(savedViewService, 'patchMany')
-    component.saveSettings()
-    expect(patchSpy).not.toHaveBeenCalled()
-
-    const view = savedViews[0]
-    const toggle = fixture.debugElement.query(
-      By.css('.form-check.form-switch input')
-    )
-    toggle.nativeElement.checked = true
-    toggle.nativeElement.dispatchEvent(new Event('change'))
-    // register change
-    component.savedViewGroup.get(view.id.toString()).value[
-      'show_on_dashboard'
-    ] = !view.show_on_dashboard
-    fixture.detectChanges()
-
-    component.saveSettings()
-    expect(patchSpy).toHaveBeenCalledWith([
-      {
-        id: view.id,
-        name: view.name,
-        show_in_sidebar: view.show_in_sidebar,
-        show_on_dashboard: !view.show_on_dashboard,
-      },
-    ])
-  })
-
   it('should support save local settings updating appearance settings and calling API, show error', () => {
     completeSetup()
-    jest.spyOn(savedViewService, 'patchMany').mockReturnValue(of([]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSpy = jest.spyOn(toastService, 'show')
     const storeSpy = jest.spyOn(settingsService, 'storeSettings')
@@ -315,7 +214,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(27)
+    expect(setSpy).toHaveBeenCalledTimes(28)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))
@@ -326,7 +225,6 @@ describe('SettingsComponent', () => {
 
   it('should offer reload if settings changes require', () => {
     completeSetup()
-    jest.spyOn(savedViewService, 'patchMany').mockReturnValue(of([]))
     let toast: Toast
     toastService.getToasts().subscribe((t) => (toast = t[0]))
     component.initialize(true) // reset
@@ -361,18 +259,6 @@ describe('SettingsComponent', () => {
     component.clearThemeColor()
   })
 
-  it('should support delete saved view', () => {
-    completeSetup()
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
-    const deleteSpy = jest.spyOn(savedViewService, 'delete')
-    deleteSpy.mockReturnValue(of(true))
-    component.deleteSavedView(savedViews[0] as SavedView)
-    expect(deleteSpy).toHaveBeenCalled()
-    expect(toastSpy).toHaveBeenCalledWith(
-      `Saved view "${savedViews[0].name}" deleted.`
-    )
-  })
-
   it('should show errors on load if load users failure', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     jest

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

@@ -1,13 +1,13 @@
 import { ViewportScroller } from '@angular/common'
 import {
-  Component,
-  OnInit,
   AfterViewInit,
-  OnDestroy,
+  Component,
   Inject,
   LOCALE_ID,
+  OnDestroy,
+  OnInit,
 } from '@angular/core'
-import { FormGroup, FormControl } from '@angular/forms'
+import { FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   NgbModal,
@@ -18,39 +18,36 @@ import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
   BehaviorSubject,
-  Subscription,
   Observable,
   Subject,
+  Subscription,
   first,
   takeUntil,
   tap,
 } from 'rxjs'
 import { Group } from 'src/app/data/group'
-import { SavedView } from 'src/app/data/saved-view'
+import {
+  SystemStatus,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
 import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { User } from 'src/app/data/user'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
-  PermissionsService,
   PermissionAction,
   PermissionType,
+  PermissionsService,
 } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import {
-  SettingsService,
   LanguageOption,
+  SettingsService,
 } from 'src/app/services/settings.service'
-import { ToastService, Toast } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
 import { SystemStatusService } from 'src/app/services/system-status.service'
-import {
-  SystemStatusItemStatus,
-  SystemStatus,
-} from 'src/app/data/system-status'
-import { DisplayMode } from 'src/app/data/document'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 enum SettingsNavIDs {
   General = 1,
@@ -75,9 +72,6 @@ export class SettingsComponent
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
   activeNavID: number
-  DisplayMode = DisplayMode
-
-  savedViewGroup = new FormGroup({})
 
   settingsForm = new FormGroup({
     bulkEditConfirmationDialogs: new FormControl(null),
@@ -88,7 +82,6 @@ export class SettingsComponent
     darkModeEnabled: new FormControl(null),
     darkModeInvertThumbs: new FormControl(null),
     themeColor: new FormControl(null),
-    useNativePdfViewer: new FormControl(null),
     displayLanguage: new FormControl(null),
     dateLocale: new FormControl(null),
     dateFormat: new FormControl(null),
@@ -99,7 +92,9 @@ export class SettingsComponent
     defaultPermsViewGroups: new FormControl(null),
     defaultPermsEditUsers: new FormControl(null),
     defaultPermsEditGroups: new FormControl(null),
+    useNativePdfViewer: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
+    documentEditingOverlayThumbnail: new FormControl(null),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
 
@@ -109,14 +104,9 @@ export class SettingsComponent
     notificationsConsumerSuppressOnDashboard: new FormControl(null),
 
     savedViewsWarnOnUnsavedChange: new FormControl(null),
-    savedViews: this.savedViewGroup,
   })
 
-  savedViews: SavedView[]
   SettingsNavIDs = SettingsNavIDs
-  get displayFields() {
-    return this.settings.allDisplayFields
-  }
 
   store: BehaviorSubject<any>
   storeSub: Subscription
@@ -151,7 +141,6 @@ export class SettingsComponent
   }
 
   constructor(
-    public savedViewService: SavedViewService,
     private documentListViewService: DocumentListViewService,
     private toastService: ToastService,
     private settings: SettingsService,
@@ -213,18 +202,6 @@ export class SettingsComponent
         })
     }
 
-    if (
-      this.permissionsService.currentUserCan(
-        PermissionAction.View,
-        PermissionType.SavedView
-      )
-    ) {
-      this.savedViewService.listAll().subscribe((r) => {
-        this.savedViews = r.results
-        this.initialize(false)
-      })
-    }
-
     this.activatedRoute.paramMap.subscribe((paramMap) => {
       const section = paramMap.get('section')
       if (section) {
@@ -234,9 +211,6 @@ export class SettingsComponent
         if (navIDKey) {
           this.activeNavID = SettingsNavIDs[navIDKey]
         }
-        if (this.activeNavID === SettingsNavIDs.SavedViews) {
-          this.settings.organizingSidebarSavedViews = true
-        }
       }
     })
   }
@@ -308,9 +282,11 @@ export class SettingsComponent
       documentEditingRemoveInboxTags: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
       ),
+      documentEditingOverlayThumbnail: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
+      ),
       searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
       searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
-      savedViews: {},
     }
   }
 
@@ -323,15 +299,11 @@ export class SettingsComponent
       this.router
         .navigate(['settings', foundNavIDkey.toLowerCase()])
         .then((navigated) => {
-          this.settings.organizingSidebarSavedViews = false
           if (!navigated && this.isDirty) {
             this.activeNavID = navChangeEvent.activeId
           } else if (navigated && this.isDirty) {
             this.initialize()
           }
-          if (this.activeNavID === SettingsNavIDs.SavedViews) {
-            this.settings.organizingSidebarSavedViews = true
-          }
         })
   }
 
@@ -342,34 +314,6 @@ export class SettingsComponent
 
     let storeData = this.getCurrentSettings()
 
-    if (this.savedViews) {
-      this.emptyGroup(this.savedViewGroup)
-
-      for (let view of this.savedViews) {
-        storeData.savedViews[view.id.toString()] = {
-          id: view.id,
-          name: view.name,
-          show_on_dashboard: view.show_on_dashboard,
-          show_in_sidebar: view.show_in_sidebar,
-          page_size: view.page_size,
-          display_mode: view.display_mode,
-          display_fields: view.display_fields,
-        }
-        this.savedViewGroup.addControl(
-          view.id.toString(),
-          new FormGroup({
-            id: new FormControl(null),
-            name: new FormControl(null),
-            show_on_dashboard: new FormControl(null),
-            show_in_sidebar: new FormControl(null),
-            page_size: new FormControl(null),
-            display_mode: new FormControl(null),
-            display_fields: new FormControl([]),
-          })
-        )
-      }
-    }
-
     this.store = new BehaviorSubject(storeData)
 
     this.storeSub = this.store.asObservable().subscribe((state) => {
@@ -409,32 +353,12 @@ export class SettingsComponent
     }
   }
 
-  private emptyGroup(group: FormGroup) {
-    Object.keys(group.controls).forEach((key) => group.removeControl(key))
-  }
-
   ngOnDestroy() {
     if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didn't save
     this.storeSub && this.storeSub.unsubscribe()
-    this.settings.organizingSidebarSavedViews = false
   }
 
-  deleteSavedView(savedView: SavedView) {
-    this.savedViewService.delete(savedView).subscribe(() => {
-      this.savedViewGroup.removeControl(savedView.id.toString())
-      this.savedViews.splice(this.savedViews.indexOf(savedView), 1)
-      this.toastService.showInfo(
-        $localize`Saved view "${savedView.name}" deleted.`
-      )
-      this.savedViewService.clearCache()
-      this.savedViewService.listAll().subscribe((r) => {
-        this.savedViews = r.results
-        this.initialize(true)
-      })
-    })
-  }
-
-  private saveLocalSettings() {
+  public saveSettings() {
     this.savePending = true
     const reloadRequired =
       this.settingsForm.value.displayLanguage !=
@@ -539,6 +463,10 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS,
       this.settingsForm.value.documentEditingRemoveInboxTags
     )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
+      this.settingsForm.value.documentEditingOverlayThumbnail
+    )
     this.settings.set(
       SETTINGS_KEYS.SEARCH_DB_ONLY,
       this.settingsForm.value.searchDbOnly
@@ -592,31 +520,6 @@ export class SettingsComponent
     return new Date()
   }
 
-  saveSettings() {
-    // only patch views that have actually changed
-    const changed: SavedView[] = []
-    Object.values(this.savedViewGroup.controls)
-      .filter((g: FormGroup) => !g.pristine)
-      .forEach((group: FormGroup) => {
-        changed.push(group.value)
-      })
-    if (changed.length > 0) {
-      this.savedViewService.patchMany(changed).subscribe({
-        next: () => {
-          this.saveLocalSettings()
-        },
-        error: (error) => {
-          this.toastService.showError(
-            $localize`Error while storing settings on server.`,
-            error
-          )
-        },
-      })
-    } else {
-      this.saveLocalSettings()
-    }
-  }
-
   reset() {
     this.settingsForm.patchValue(this.store.getValue())
   }

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -4,15 +4,40 @@
   info="File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process."
   i18n-info
   >
-  <div class="btn-toolbar col col-md-auto align-items-center">
+  <div class="btn-toolbar col col-md-auto align-items-center gap-2">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
     </button>
-    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
       <i-bs name="check2-all"></i-bs>&nbsp;{{dismissButtonText}}
     </button>
-    <div class="form-check form-switch mb-0">
-      <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" (click)="toggleAutoRefresh()" [attr.checked]="autoRefreshInterval">
+    <div class="form-inline d-flex align-items-center">
+      <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
+        <span class="input-group-text text-muted" i18n>Filter by</span>
+        @if (filterTargets.length > 1) {
+          <div ngbDropdown>
+            <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{filterTargetName}}</button>
+            <div class="dropdown-menu shadow" ngbDropdownMenu>
+              @for (t of filterTargets; track t.id) {
+                <button ngbDropdownItem [class.active]="filterTargetID === t.id" (click)="filterTargetID = t.id">{{t.name}}</button>
+              }
+            </div>
+          </div>
+        } @else {
+          <span class="input-group-text">{{filterTargetName}}</span>
+        }
+        @if (filterText?.length) {
+          <button class="btn btn-link btn-sm px-2 position-absolute top-0 end-0 z-10" (click)="resetFilter()">
+            <i-bs width="1em" height="1em" name="x"></i-bs>
+          </button>
+        }
+        <input #filterInput class="form-control form-control-sm" type="text"
+          (keyup)="filterInputKeyup($event)"
+          [(ngModel)]="filterText">
+      </div>
+    </div>
+    <div class="form-check form-switch mb-0 ms-2">
+      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
       <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
     </div>
   </div>
@@ -118,13 +143,13 @@
   </div>
 </ng-template>
 
-<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange()" (navChange)="beforeTabChange()">
   <li ngbNavItem="failed">
     <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
       <span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
   <li ngbNavItem="completed">
@@ -132,7 +157,7 @@
       <span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
   <li ngbNavItem="started">
@@ -140,7 +165,7 @@
       <span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
   <li ngbNavItem="queued">
@@ -148,7 +173,7 @@
       <span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
 </ul>

src-ui/src/app/components/admin/tasks/tasks.component.scss

@@ -26,3 +26,14 @@ pre {
         max-width: 150px;
     }
 }
+
+.input-group .dropdown .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.z-10 {
+    z-index: 10;
+}

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -1,36 +1,36 @@
 import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
   NgbModal,
+  NgbModalRef,
   NgbModule,
   NgbNavItem,
-  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { routes } from 'src/app/app-routing.module'
 import {
   PaperlessTask,
-  PaperlessTaskType,
   PaperlessTaskStatus,
+  PaperlessTaskType,
 } from 'src/app/data/paperless-task'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { TasksComponent } from './tasks.component'
-import { PermissionsGuard } from 'src/app/guards/permissions.guard'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { FormsModule } from '@angular/forms'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { TasksComponent, TaskTab } from './tasks.component'
 
 const tasks: PaperlessTask[] = [
   {
@@ -167,7 +167,7 @@ describe('TasksComponent', () => {
     let currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Failed
     ).length
-    component.activeTab = 'failed'
+    component.activeTab = TaskTab.Failed
     fixture.detectChanges()
     expect(tabButtons[0].nativeElement.textContent).toEqual(
       `Failed${currentTasksLength}`
@@ -179,7 +179,7 @@ describe('TasksComponent', () => {
     currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Complete
     ).length
-    component.activeTab = 'completed'
+    component.activeTab = TaskTab.Completed
     fixture.detectChanges()
     expect(tabButtons[1].nativeElement.textContent).toEqual(
       `Complete${currentTasksLength}`
@@ -188,7 +188,7 @@ describe('TasksComponent', () => {
     currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Started
     ).length
-    component.activeTab = 'started'
+    component.activeTab = TaskTab.Started
     fixture.detectChanges()
     expect(tabButtons[2].nativeElement.textContent).toEqual(
       `Started${currentTasksLength}`
@@ -197,7 +197,7 @@ describe('TasksComponent', () => {
     currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Pending
     ).length
-    component.activeTab = 'queued'
+    component.activeTab = TaskTab.Queued
     fixture.detectChanges()
     expect(tabButtons[3].nativeElement.textContent).toEqual(
       `Queued${currentTasksLength}`
@@ -206,7 +206,7 @@ describe('TasksComponent', () => {
 
   it('should to go page 1 between tab switch', () => {
     component.page = 10
-    component.duringTabChange(2)
+    component.duringTabChange()
     expect(component.page).toEqual(1)
   })
 
@@ -283,10 +283,63 @@ describe('TasksComponent', () => {
     expect(reloadSpy).toHaveBeenCalledTimes(1)
     jest.advanceTimersByTime(5000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
-
-    component.toggleAutoRefresh()
-    expect(component.autoRefreshInterval).toBeNull()
+    component.autoRefreshEnabled = false
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })
+
+  it('should filter tasks by file name', () => {
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = '191092'
+    input.nativeElement.dispatchEvent(new Event('input'))
+    jest.advanceTimersByTime(150) // debounce time
+    fixture.detectChanges()
+    expect(component.filterText).toEqual('191092')
+    expect(
+      fixture.debugElement.queryAll(By.css('table tbody tr')).length
+    ).toEqual(2) // 1 task x 2 lines
+  })
+
+  it('should filter tasks by result', () => {
+    component.activeTab = TaskTab.Failed
+    fixture.detectChanges()
+    component.filterTargetID = 1
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = 'duplicate'
+    input.nativeElement.dispatchEvent(new Event('input'))
+    jest.advanceTimersByTime(150) // debounce time
+    fixture.detectChanges()
+    expect(component.filterText).toEqual('duplicate')
+    expect(
+      fixture.debugElement.queryAll(By.css('table tbody tr')).length
+    ).toEqual(4) // 2 tasks x 2 lines
+  })
+
+  it('should support keyboard events for filtering', () => {
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = '191092'
+    input.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { key: 'Enter' })
+    )
+    expect(component.filterText).toEqual('191092') // no debounce needed
+    input.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { key: 'Escape' })
+    )
+    expect(component.filterText).toEqual('')
+  })
+
+  it('should reset filter and target on tab switch', () => {
+    component.filterText = '191092'
+    component.filterTargetID = 1
+    component.activeTab = TaskTab.Completed
+    component.beforeTabChange()
+    expect(component.filterText).toEqual('')
+    expect(component.filterTargetID).toEqual(0)
+  })
 })

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -1,11 +1,36 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { first } from 'rxjs'
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  first,
+  Subject,
+  takeUntil,
+  timer,
+} from 'rxjs'
 import { PaperlessTask } from 'src/app/data/paperless-task'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+export enum TaskTab {
+  Queued = 'queued',
+  Started = 'started',
+  Completed = 'completed',
+  Failed = 'failed',
+}
+
+enum TaskFilterTargetID {
+  Name,
+  Result,
+}
+
+const FILTER_TARGETS = [
+  { id: TaskFilterTargetID.Name, name: $localize`Name` },
+  { id: TaskFilterTargetID.Result, name: $localize`Result` },
+]
 
 @Component({
   selector: 'pngx-tasks',
@@ -13,10 +38,10 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
   styleUrls: ['./tasks.component.scss'],
 })
 export class TasksComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  public activeTab: string
+  public activeTab: TaskTab
   public selectedTasks: Set<number> = new Set()
   public togggleAll: boolean = false
   public expandedTask: number
@@ -24,7 +49,27 @@ export class TasksComponent
   public pageSize: number = 25
   public page: number = 1
 
-  public autoRefreshInterval: any
+  public autoRefreshEnabled: boolean = true
+
+  private _filterText: string = ''
+  get filterText() {
+    return this._filterText
+  }
+  set filterText(value: string) {
+    this.filterDebounce.next(value)
+  }
+
+  public filterTargetID: TaskFilterTargetID = TaskFilterTargetID.Name
+  public get filterTargetName(): string {
+    return this.filterTargets.find((t) => t.id == this.filterTargetID).name
+  }
+  private filterDebounce: Subject<string> = new Subject<string>()
+
+  public get filterTargets(): Array<{ id: number; name: string }> {
+    return [TaskTab.Failed, TaskTab.Completed].includes(this.activeTab)
+      ? FILTER_TARGETS
+      : FILTER_TARGETS.slice(0, 1)
+  }
 
   get dismissButtonText(): string {
     return this.selectedTasks.size > 0
@@ -42,12 +87,28 @@ export class TasksComponent
 
   ngOnInit() {
     this.tasksService.reload()
-    this.toggleAutoRefresh()
+    timer(5000, 5000)
+      .pipe(
+        filter(() => this.autoRefreshEnabled),
+        takeUntil(this.unsubscribeNotifier)
+      )
+      .subscribe(() => {
+        this.tasksService.reload()
+      })
+
+    this.filterDebounce
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        debounceTime(100),
+        distinctUntilChanged(),
+        filter((query) => !query.length || query.length > 2)
+      )
+      .subscribe((query) => (this._filterText = query))
   }
 
   ngOnDestroy() {
+    super.ngOnDestroy()
     this.tasksService.cancelPending()
-    clearInterval(this.autoRefreshInterval)
   }
 
   dismissTask(task: PaperlessTask) {
@@ -96,19 +157,30 @@ export class TasksComponent
   get currentTasks(): PaperlessTask[] {
     let tasks: PaperlessTask[] = []
     switch (this.activeTab) {
-      case 'queued':
+      case TaskTab.Queued:
         tasks = this.tasksService.queuedFileTasks
         break
-      case 'started':
+      case TaskTab.Started:
         tasks = this.tasksService.startedFileTasks
         break
-      case 'completed':
+      case TaskTab.Completed:
         tasks = this.tasksService.completedFileTasks
         break
-      case 'failed':
+      case TaskTab.Failed:
         tasks = this.tasksService.failedFileTasks
         break
     }
+    if (this._filterText.length) {
+      tasks = tasks.filter((t) => {
+        if (this.filterTargetID == TaskFilterTargetID.Name) {
+          return t.task_file_name
+            .toLowerCase()
+            .includes(this._filterText.toLowerCase())
+        } else if (this.filterTargetID == TaskFilterTargetID.Result) {
+          return t.result.toLowerCase().includes(this._filterText.toLowerCase())
+        }
+      })
+    }
     return tasks
   }
 
@@ -125,31 +197,37 @@ export class TasksComponent
     this.selectedTasks.clear()
   }
 
-  duringTabChange(navID: number) {
+  duringTabChange() {
     this.page = 1
   }
 
+  beforeTabChange() {
+    this.resetFilter()
+    this.filterTargetID = TaskFilterTargetID.Name
+  }
+
   get activeTabLocalized(): string {
     switch (this.activeTab) {
-      case 'queued':
+      case TaskTab.Queued:
         return $localize`queued`
-      case 'started':
+      case TaskTab.Started:
         return $localize`started`
-      case 'completed':
+      case TaskTab.Completed:
         return $localize`completed`
-      case 'failed':
+      case TaskTab.Failed:
         return $localize`failed`
     }
   }
 
-  toggleAutoRefresh(): void {
-    if (this.autoRefreshInterval) {
-      clearInterval(this.autoRefreshInterval)
-      this.autoRefreshInterval = null
-    } else {
-      this.autoRefreshInterval = setInterval(() => {
-        this.tasksService.reload()
-      }, 5000)
+  public resetFilter() {
+    this._filterText = ''
+  }
+
+  filterInputKeyup(event: KeyboardEvent) {
+    if (event.key == 'Enter') {
+      this._filterText = (event.target as HTMLInputElement).value
+    } else if (event.key === 'Escape') {
+      this.resetFilter()
     }
   }
 }

src-ui/src/app/components/admin/trash/trash.component.html

@@ -38,7 +38,7 @@
             </tr>
         </thead>
         <tbody>
-            @if (isLoading) {
+            @if (loading) {
                 <tr>
                     <td colspan="5">
                     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -47,15 +47,20 @@
                 </tr>
             }
             @for (document of documentsInTrash; track document.id) {
-                <tr (click)="toggleSelected(document); $event.stopPropagation();">
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row fade" [class.show]="show">
                     <td>
                     <div class="form-check m-0 ms-2 me-n2">
                         <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
                         <label class="form-check-label" for="{{document.id}}"></label>
                     </div>
                     </td>
-                    <td scope="row">{{ document.title }}</td>
-                    <td scope="row" i18n>{{ getDaysRemaining(document) }} days</td>
+                    <td scope="row">
+                      {{ document.title }}
+                      <pngx-preview-popup [document]="document" linkClasses="btn btn-sm btn-link" #popupPreview>
+                        <i-bs name="eye"></i-bs>
+                      </pngx-preview-popup>
+                    </td>
+                    <td scope="row" class="d-none d-sm-table-cell" i18n>{{ getDaysRemaining(document) }} days</td>
                     <td scope="row">
                     <div class="btn-group d-block d-sm-none">
                         <div ngbDropdown container="body" class="d-inline-block">
@@ -83,7 +88,7 @@
     </table>
 </div>
 
-@if (!isLoading) {
+@if (!loading) {
     <div class="d-flex mb-2">
         <div>
             <ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>

src-ui/src/app/components/admin/trash/trash.component.spec.ts

@@ -1,21 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { TrashComponent } from './trash.component'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { Router } from '@angular/router'
 import {
   NgbModal,
   NgbPaginationModule,
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { TrashService } from 'src/app/services/trash.service'
 import { of, throwError } from 'rxjs'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { By } from '@angular/platform-browser'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { TrashComponent } from './trash.component'
 
 const documentsInTrash = [
   {
@@ -38,6 +39,7 @@ describe('TrashComponent', () => {
   let trashService: TrashService
   let modalService: NgbModal
   let toastService: ToastService
+  let router: Router
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -61,11 +63,13 @@ describe('TrashComponent', () => {
     trashService = TestBed.inject(TrashService)
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
+    router = TestBed.inject(Router)
     component = fixture.componentInstance
     fixture.detectChanges()
   })
 
   it('should call correct service method on reload', () => {
+    jest.useFakeTimers()
     const trashSpy = jest.spyOn(trashService, 'getTrash')
     trashSpy.mockReturnValue(
       of({
@@ -75,6 +79,7 @@ describe('TrashComponent', () => {
       })
     )
     component.reload()
+    jest.advanceTimersByTime(100)
     expect(trashSpy).toHaveBeenCalled()
     expect(component.documentsInTrash).toEqual(documentsInTrash)
   })
@@ -161,6 +166,22 @@ describe('TrashComponent', () => {
     expect(restoreSpy).toHaveBeenCalledWith([1, 2])
   })
 
+  it('should offer link to restored document', () => {
+    let toasts
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    toastService.getToasts().subscribe((allToasts) => {
+      toasts = [...allToasts]
+    })
+    jest.spyOn(trashService, 'restoreDocuments').mockReturnValue(of('OK'))
+    component.restore(documentsInTrash[0])
+    expect(toasts.length).toEqual(1)
+    toasts[0].action()
+    expect(navigateSpy).toHaveBeenCalledWith([
+      'documents',
+      documentsInTrash[0].id,
+    ])
+  })
+
   it('should support toggle all items in view', () => {
     component.documentsInTrash = documentsInTrash
     expect(component.selectedDocuments.size).toEqual(0)

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -1,49 +1,57 @@
 import { Component, OnDestroy } from '@angular/core'
+import { Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { delay, takeUntil, tap } from 'rxjs'
 import { Document } from 'src/app/data/document'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { Subject, takeUntil } from 'rxjs'
-import { SettingsService } from 'src/app/services/settings.service'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-trash',
   templateUrl: './trash.component.html',
   styleUrl: './trash.component.scss',
 })
-export class TrashComponent implements OnDestroy {
+export class TrashComponent
+  extends LoadingComponentWithPermissions
+  implements OnDestroy
+{
   public documentsInTrash: Document[] = []
   public selectedDocuments: Set<number> = new Set()
   public allToggled: boolean = false
   public page: number = 1
   public totalDocuments: number
-  public isLoading: boolean = false
-  unsubscribeNotifier: Subject<void> = new Subject()
 
   constructor(
     private trashService: TrashService,
     private toastService: ToastService,
     private modalService: NgbModal,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private router: Router
   ) {
+    super()
     this.reload()
   }
 
-  ngOnDestroy() {
-    this.unsubscribeNotifier.next()
-    this.unsubscribeNotifier.complete()
-  }
-
   reload() {
-    this.isLoading = true
-    this.trashService.getTrash(this.page).subscribe((r) => {
-      this.documentsInTrash = r.results
-      this.totalDocuments = r.count
-      this.isLoading = false
-      this.selectedDocuments.clear()
-    })
+    this.loading = true
+    this.trashService
+      .getTrash(this.page)
+      .pipe(
+        tap((r) => {
+          this.documentsInTrash = r.results
+          this.totalDocuments = r.count
+          this.selectedDocuments.clear()
+          this.loading = false
+        }),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.show = true
+      })
   }
 
   delete(document: Document) {
@@ -110,7 +118,14 @@ export class TrashComponent implements OnDestroy {
   restore(document: Document) {
     this.trashService.restoreDocuments([document.id]).subscribe({
       next: () => {
-        this.toastService.showInfo($localize`Document restored`)
+        this.toastService.show({
+          content: $localize`Document restored`,
+          delay: 5000,
+          actionName: $localize`Open document`,
+          action: () => {
+            this.router.navigate(['documents', document.id])
+          },
+        })
         this.reload()
       },
       error: (err) => {

src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts

@@ -1,4 +1,5 @@
 import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
@@ -9,14 +10,17 @@ import {
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
-  NgbModule,
   NgbAlertModule,
   NgbModal,
   NgbModalRef,
+  NgbModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { throwError, of } from 'rxjs'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
@@ -41,10 +45,6 @@ import { TextComponent } from '../../common/input/text/text.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { SettingsComponent } from '../settings/settings.component'
 import { UsersAndGroupsComponent } from './users-groups.component'
-import { User } from 'src/app/data/user'
-import { Group } from 'src/app/data/group'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const users = [
   { id: 1, username: 'user1', is_superuser: false },

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -6,13 +6,13 @@ import { User } from 'src/app/data/user'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
   selector: 'pngx-users-groups',

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

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow-sm">
+<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow-sm">
   <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
     (click)="isMenuCollapsed = !isMenuCollapsed">
@@ -199,6 +199,13 @@
                 <i-bs class="me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
               </a>
             </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+              <a class="nav-link" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="window-stack"></i-bs><span>&nbsp;<ng-container i18n>Saved Views</ng-container></span>
+              </a>
+            </li>
             <li class="nav-item app-link"
               *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }"
               tourAnchor="tour.workflows">
@@ -327,7 +334,7 @@
                         </a>
                       }
                     } @else {
-                      <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
+                      <a  *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
                         [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
                         container="body">
                         <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>

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

@@ -48,6 +48,13 @@
 
 main {
   transition: all .2s ease;
+  padding-top: 110px;
+}
+
+@media (min-width: 768px) {
+  main {
+    padding-top: 56px;
+  }
 }
 
 .sidebar-slim-toggler {

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

@@ -1,43 +1,43 @@
+import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
-import { AppFrameComponent } from './app-frame.component'
 import {
   ComponentFixture,
   TestBed,
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { BrowserModule } from '@angular/platform-browser'
-import { RouterTestingModule } from '@angular/router/testing'
-import { SettingsService } from 'src/app/services/settings.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
-import { PermissionsService } from 'src/app/services/permissions.service'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+import { ActivatedRoute, Router } from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
-import { ToastService } from 'src/app/services/toast.service'
+import { routes } from 'src/app/app-routing.module'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import {
   DjangoMessageLevel,
   DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
-import { environment } from 'src/environments/environment'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { ActivatedRoute, Router } from '@angular/router'
-import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
-import { routes } from 'src/app/app-routing.module'
-import { PermissionsGuard } from 'src/app/guards/permissions.guard'
-import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
-import { SavedView } from 'src/app/data/saved-view'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { AppFrameComponent } from './app-frame.component'
 import { GlobalSearchComponent } from './global-search/global-search.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const saved_views = [
   {
@@ -343,6 +343,7 @@ describe('AppFrameComponent', () => {
     component.editProfile()
     expect(modalSpy).toHaveBeenCalledWith(ProfileEditDialogComponent, {
       backdrop: 'static',
+      size: 'xl',
     })
   })
 

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

@@ -1,40 +1,40 @@
+import {
+  CdkDragDrop,
+  CdkDragEnd,
+  CdkDragStart,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
 import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
-import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
 import {
   DjangoMessageLevel,
   DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
-import { environment } from 'src/environments/environment'
-import { DocumentDetailComponent } from '../document-detail/document-detail.component'
-import {
-  RemoteVersionService,
-  AppRemoteVersion,
-} from 'src/app/services/rest/remote-version.service'
-import { SettingsService } from 'src/app/services/settings.service'
-import { TasksService } from 'src/app/services/tasks.service'
-import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { ToastService } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import {
   PermissionAction,
   PermissionsService,
   PermissionType,
 } from 'src/app/services/permissions.service'
-import { SavedView } from 'src/app/data/saved-view'
 import {
-  CdkDragStart,
-  CdkDragEnd,
-  CdkDragDrop,
-  moveItemInArray,
-} from '@angular/cdk/drag-drop'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+  AppRemoteVersion,
+  RemoteVersionService,
+} from 'src/app/services/rest/remote-version.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
+import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 
 @Component({
   selector: 'pngx-app-frame',
@@ -81,7 +81,14 @@ export class AppFrameComponent
     if (this.settingsService.get(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED)) {
       this.checkForUpdates()
     }
-    this.tasksService.reload()
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.PaperlessTask
+      )
+    ) {
+      this.tasksService.reload()
+    }
 
     this.djangoMessagesService.get().forEach((message) => {
       switch (message.level) {
@@ -136,6 +143,7 @@ export class AppFrameComponent
   editProfile() {
     this.modalService.open(ProfileEditDialogComponent, {
       backdrop: 'static',
+      size: 'xl',
     })
     this.closeMenu()
   }

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

@@ -49,7 +49,7 @@
                 [disabled]="disablePrimaryButton(type, item)"
                 (mouseenter)="onButtonHover($event)">
                     @if (type === DataType.Document) {
-                        <i-bs width="1em" height="1em" name="box-arrow-in-right"></i-bs>
+                        <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
                         <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                     } @else if (type === DataType.SavedView) {
                         <i-bs width="1em" height="1em" name="eye"></i-bs>
@@ -72,7 +72,7 @@
                             <i-bs width="1em" height="1em" name="download"></i-bs>
                             <span>&nbsp;<ng-container i18n>Download</ng-container></span>
                         } @else {
-                            <i-bs width="1em" height="1em" name="box-arrow-in-right"></i-bs>
+                            <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
                             <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                         }
                     </button>

src-ui/src/app/components/app-frame/global-search/global-search.component.spec.ts

@@ -1,12 +1,13 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef } from '@angular/core'
 import {
   ComponentFixture,
   TestBed,
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { GlobalSearchComponent } from './global-search.component'
-import { of } from 'rxjs'
-import { SearchService } from 'src/app/services/rest/search.service'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
   NgbDropdownModule,
@@ -14,11 +15,9 @@ import {
   NgbModalModule,
   NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
-import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DataType } from 'src/app/data/datatype'
 import {
   FILTER_FULLTEXT_QUERY,
   FILTER_HAS_CORRESPONDENT_ANY,
@@ -27,20 +26,21 @@ import {
   FILTER_HAS_TAGS_ALL,
   FILTER_TITLE_CONTENT,
 } from 'src/app/data/filter-rule-type'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
-import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
-import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
-import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { ElementRef } from '@angular/core'
-import { ToastService } from 'src/app/services/toast.service'
-import { DataType } from 'src/app/data/datatype'
-import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
-import { SettingsService } from 'src/app/services/settings.service'
 import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SearchService } from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
+import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
+import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
+import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
+import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
+import { GlobalSearchComponent } from './global-search.component'
 
 const searchResults = {
   total: 11,

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

@@ -1,14 +1,15 @@
 import {
   Component,
-  ViewChild,
   ElementRef,
-  ViewChildren,
-  QueryList,
   OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren,
 } from '@angular/core'
 import { Router } from '@angular/router'
 import { NgbDropdown, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { Subject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
+import { Subject, debounceTime, distinctUntilChanged, filter } from 'rxjs'
+import { DataType } from 'src/app/data/datatype'
 import {
   FILTER_FULLTEXT_QUERY,
   FILTER_HAS_CORRESPONDENT_ANY,
@@ -17,19 +18,22 @@ import {
   FILTER_HAS_TAGS_ALL,
   FILTER_TITLE_CONTENT,
 } from 'src/app/data/filter-rule-type'
-import { DataType } from 'src/app/data/datatype'
 import { ObjectWithId } from 'src/app/data/object-with-id'
+import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { HotKeyService } from 'src/app/services/hot-key.service'
 import {
-  PermissionsService,
   PermissionAction,
+  PermissionsService,
 } from 'src/app/services/permissions.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import {
   GlobalSearchResult,
   SearchService,
 } from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { paramsFromViewState } from 'src/app/utils/query-params'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -41,10 +45,6 @@ import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
 import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { HotKeyService } from 'src/app/services/hot-key.service'
-import { paramsFromViewState } from 'src/app/utils/query-params'
-import { SettingsService } from 'src/app/services/settings.service'
-import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 
 @Component({
   selector: 'pngx-global-search',
@@ -89,7 +89,6 @@ export class GlobalSearchComponent implements OnInit {
     this.queryDebounce
       .pipe(
         debounceTime(400),
-        map((query) => query?.trim()),
         filter((query) => !query?.length || query?.length > 2),
         distinctUntilChanged()
       )
@@ -109,7 +108,7 @@ export class GlobalSearchComponent implements OnInit {
 
   private search(query: string) {
     this.loading = true
-    this.searchService.globalSearch(query).subscribe((results) => {
+    this.searchService.globalSearch(query.trim()).subscribe((results) => {
       this.searchResults = results
       this.loading = false
       this.resultsDropdown.open()

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { ClearableBadgeComponent } from './clearable-badge.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ClearableBadgeComponent } from './clearable-badge.component'
 
 describe('ClearableBadgeComponent', () => {
   let component: ClearableBadgeComponent

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 
 @Component({
   selector: 'pngx-clearable-badge',

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

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { ConfirmButtonComponent } from './confirm-button.component'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from './confirm-button.component'
 
 describe('ConfirmButtonComponent', () => {
   let component: ConfirmButtonComponent

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

@@ -1,14 +1,8 @@
-import {
-  ComponentFixture,
-  TestBed,
-  discardPeriodicTasks,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
-import { ConfirmDialogComponent } from './confirm-dialog.component'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { Subject } from 'rxjs'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { ConfirmDialogComponent } from './confirm-dialog.component'
 
 describe('ConfirmDialogComponent', () => {
   let component: ConfirmDialogComponent

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

@@ -1,14 +1,17 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { interval, Subject, take } from 'rxjs'
+import { Subject } from 'rxjs'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
   styleUrls: ['./confirm-dialog.component.scss'],
 })
-export class ConfirmDialogComponent {
-  constructor(public activeModal: NgbActiveModal) {}
+export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
+  constructor(public activeModal: NgbActiveModal) {
+    super()
+  }
 
   @Output()
   public confirmClicked = new EventEmitter()

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss

@@ -1,6 +1,6 @@
 .pdf-viewer-container {
   background-color: gray;
-  height: 350px;
+  height: 550px;
 
   pdf-viewer {
     width: 100%;

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

@@ -1,12 +1,12 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { PdfViewerComponent } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { PdfViewerComponent } from 'ng2-pdf-viewer'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
 
 describe('DeletePagesConfirmDialogComponent', () => {
   let component: DeletePagesConfirmDialogComponent

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

@@ -1,8 +1,8 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { PDFDocumentProxy, PdfViewerComponent } from 'ng2-pdf-viewer'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
-import { PDFDocumentProxy, PdfViewerComponent } from 'ng2-pdf-viewer'
 
 @Component({
   selector: 'pngx-delete-pages-confirm-dialog',

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

@@ -1,12 +1,12 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
 
 describe('MergeConfirmDialogComponent', () => {
   let component: MergeConfirmDialogComponent

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

@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core'
-import { ConfirmDialogComponent } from '../confirm-dialog.component'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { PermissionsService } from 'src/app/services/permissions.service'
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
-import { Subject, takeUntil } from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
 @Component({
   selector: 'pngx-merge-confirm-dialog',
@@ -25,8 +25,6 @@ export class MergeConfirmDialogComponent
 
   public metadataDocumentID: number = -1
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(
     activeModal: NgbActiveModal,
     private documentService: DocumentService,

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

@@ -1,10 +1,10 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
 
 describe('RotateConfirmDialogComponent', () => {
   let component: RotateConfirmDialogComponent

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
-import { ConfirmDialogComponent } from '../confirm-dialog.component'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
 @Component({
   selector: 'pngx-rotate-confirm-dialog',

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

@@ -6,7 +6,7 @@
 <div class="modal-body">
     <p>{{message}}</p>
     <div class="row mb-2">
-        <div class="col-8">
+        <div class="col-7">
             <div class="input-group input-group-sm">
                 <div class="input-group-text" i18n>Page</div>
                 <input class="form-control" type="number" min="1" [(ngModel)]="page" />
@@ -21,7 +21,7 @@
                 </pdf-viewer>
             </div>
         </div>
-        <div class="col-4">
+        <div class="col-5">
             <div class="d-grid">
                 <button class="btn btn-sm btn-primary" (click)="addSplit()" [disabled]="!canSplit">
                     <i-bs name="plus-circle"></i-bs>&nbsp;
@@ -44,12 +44,12 @@
             </ul>
         </div>
     </div>
-    <div class="form-check form-switch mt-4">
+</div>
+<div class="modal-footer">
+    <div class="form-check form-switch me-auto">
        <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalSwitch" [(ngModel)]="deleteOriginal" [disabled]="!userOwnsDocument">
        <label class="form-check-label" for="deleteOriginalSwitch" i18n>Delete original document after successful split</label>
      </div>
-</div>
-<div class="modal-footer">
     <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
             <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
         </button>

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss

@@ -1,6 +1,6 @@
 .pdf-viewer-container {
     background-color: gray;
-    height: 350px;
+    height: 500px;
 
     pdf-viewer {
       width: 100%;

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

@@ -1,14 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { SplitConfirmDialogComponent } from './split-confirm-dialog.component'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { ReactiveFormsModule, FormsModule } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { PdfViewerModule } from 'ng2-pdf-viewer'
-import { of } from 'rxjs'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SplitConfirmDialogComponent } from './split-confirm-dialog.component'
 
 describe('SplitConfirmDialogComponent', () => {
   let component: SplitConfirmDialogComponent

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

@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core'
-import { ConfirmDialogComponent } from '../confirm-dialog.component'
-import { Document } from 'src/app/data/document'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { PermissionsService } from 'src/app/services/permissions.service'
 import { PDFDocumentProxy } from 'ng2-pdf-viewer'
+import { Document } from 'src/app/data/document'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
 @Component({
   selector: 'pngx-split-confirm-dialog',

src-ui/src/app/components/common/custom-field-display/custom-field-display.component.spec.ts

@@ -1,12 +1,12 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { of } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { DisplayField, Document } from 'src/app/data/document'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { CustomFieldDisplayComponent } from './custom-field-display.component'
-import { DisplayField, Document } from 'src/app/data/document'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const customFields: CustomField[] = [
   { id: 1, name: 'Field 1', data_type: CustomFieldDataType.String },
@@ -17,7 +17,11 @@ const customFields: CustomField[] = [
     name: 'Field 4',
     data_type: CustomFieldDataType.Select,
     extra_data: {
-      select_options: ['Option 1', 'Option 2', 'Option 3'],
+      select_options: [
+        { label: 'Option 1', id: 'abc-123' },
+        { label: 'Option 2', id: 'def-456' },
+        { label: 'Option 3', id: 'ghi-789' },
+      ],
     },
   },
   {
@@ -131,6 +135,8 @@ describe('CustomFieldDisplayComponent', () => {
   })
 
   it('should show select value', () => {
-    expect(component.getSelectValue(customFields[3], 2)).toEqual('Option 3')
+    expect(component.getSelectValue(customFields[3], 'ghi-789')).toEqual(
+      'Option 3'
+    )
   })
 })

src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts

@@ -1,25 +1,22 @@
 import { getLocaleCurrencyCode } from '@angular/common'
-import {
-  Component,
-  Inject,
-  Input,
-  LOCALE_ID,
-  OnDestroy,
-  OnInit,
-} from '@angular/core'
-import { Subject, takeUntil } from 'rxjs'
+import { Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'
+import { takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DisplayField, Document } from 'src/app/data/document'
 import { Results } from 'src/app/data/results'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-custom-field-display',
   templateUrl: './custom-field-display.component.html',
   styleUrl: './custom-field-display.component.scss',
 })
-export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
+export class CustomFieldDisplayComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit
+{
   CustomFieldDataType = CustomFieldDataType
 
   private _document: Document
@@ -61,7 +58,6 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
 
   private docLinkDocuments: Document[] = []
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
   private defaultCurrencyCode: any
 
   constructor(
@@ -69,6 +65,7 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
     private documentService: DocumentService,
     @Inject(LOCALE_ID) currentLocale: string
   ) {
+    super()
     this.defaultCurrencyCode = getLocaleCurrencyCode(currentLocale)
     this.customFieldService.listAll().subscribe((r) => {
       this.customFields = r.results
@@ -117,12 +114,7 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
     return this.docLinkDocuments?.find((d) => d.id === docId)?.title
   }
 
-  public getSelectValue(field: CustomField, index: number): string {
-    return field.extra_data.select_options[index]
-  }
-
-  ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(true)
-    this.unsubscribeNotifier.complete()
+  public getSelectValue(field: CustomField, id: string): string {
+    return field.extra_data.select_options?.find((o) => o.id === id)?.label
   }
 }

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

@@ -1,28 +1,28 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
   TestBed,
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { CustomFieldsDropdownComponent } from './custom-fields-dropdown.component'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { ToastService } from 'src/app/services/toast.service'
-import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { of } from 'rxjs'
-import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
-import { SelectComponent } from '../input/select/select.component'
-import { NgSelectModule } from '@ng-select/ng-select'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
 import {
   NgbDropdownModule,
   NgbModal,
   NgbModalModule,
   NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
-import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { By } from '@angular/platform-browser'
+import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { of } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { SelectComponent } from '../input/select/select.component'
+import { CustomFieldsDropdownComponent } from './custom-fields-dropdown.component'
 
 const fields: CustomField[] = [
   {

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts

@@ -3,31 +3,31 @@ import {
   ElementRef,
   EventEmitter,
   Input,
-  OnDestroy,
   Output,
   QueryList,
   ViewChild,
   ViewChildren,
 } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { Subject, first, takeUntil } from 'rxjs'
+import { first, takeUntil } from 'rxjs'
 import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
 import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
-import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { ToastService } from 'src/app/services/toast.service'
-import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import {
   PermissionAction,
   PermissionType,
   PermissionsService,
 } from 'src/app/services/permissions.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 
 @Component({
   selector: 'pngx-custom-fields-dropdown',
   templateUrl: './custom-fields-dropdown.component.html',
   styleUrls: ['./custom-fields-dropdown.component.scss'],
 })
-export class CustomFieldsDropdownComponent implements OnDestroy {
+export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissions {
   @Input()
   documentId: number
 
@@ -60,8 +60,6 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
 
   public filterText: string
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   get canCreateFields(): boolean {
     return this.permissionsService.currentUserCan(
       PermissionAction.Add,
@@ -75,14 +73,10 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
     private toastService: ToastService,
     private permissionsService: PermissionsService
   ) {
+    super()
     this.getFields()
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(this)
-    this.unsubscribeNotifier.complete()
-  }
-
   private getFields() {
     this.customFieldsService
       .listAll()

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -44,6 +44,8 @@
     <ng-select #fieldSelects
       class="paperless-input-select rounded-end"
       [items]="getSelectOptionsForField(atom.field)"
+      bindLabel="label"
+      bindValue="id"
       [(ngModel)]="atom.value"
       [disabled]="disabled"
       (mousedown)="$event.stopImmediatePropagation()"
@@ -99,6 +101,8 @@
         <ng-select
           class="paperless-input-select rounded-end"
           [items]="getSelectOptionsForField(atom.field)"
+          bindLabel="label"
+          bindValue="id"
           [(ngModel)]="atom.value"
           [disabled]="disabled"
           [multiple]="true"

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.spec.ts

@@ -1,14 +1,15 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
   fakeAsync,
   TestBed,
   tick,
 } from '@angular/core/testing'
-import {
-  CustomFieldQueriesModel,
-  CustomFieldsQueryDropdownComponent,
-} from './custom-fields-query-dropdown.component'
-import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
@@ -16,17 +17,16 @@ import {
   CustomFieldQueryLogicalOperator,
   CustomFieldQueryOperatorGroups,
 } from 'src/app/data/custom-field-query'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import {
-  CustomFieldQueryExpression,
   CustomFieldQueryAtom,
   CustomFieldQueryElement,
+  CustomFieldQueryExpression,
 } from 'src/app/utils/custom-field-query-element'
-import { NgSelectModule } from '@ng-select/ng-select'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  CustomFieldQueriesModel,
+  CustomFieldsQueryDropdownComponent,
+} from './custom-fields-query-dropdown.component'
 
 const customFields = [
   {
@@ -39,7 +39,12 @@ const customFields = [
     id: 2,
     name: 'Test Select Field',
     data_type: CustomFieldDataType.Select,
-    extra_data: { select_options: ['Option 1', 'Option 2'] },
+    extra_data: {
+      select_options: [
+        { label: 'Option 1', id: 'abc-123' },
+        { label: 'Option 2', id: 'def-456' },
+      ],
+    },
   },
 ]
 
@@ -128,11 +133,19 @@ describe('CustomFieldsQueryDropdownComponent', () => {
       id: 1,
       name: 'Test Field',
       data_type: CustomFieldDataType.Select,
-      extra_data: { select_options: ['Option 1', 'Option 2'] },
+      extra_data: {
+        select_options: [
+          { label: 'Option 1', id: 'abc-123' },
+          { label: 'Option 2', id: 'def-456' },
+        ],
+      },
     }
     component.customFields = [field]
     const options = component.getSelectOptionsForField(1)
-    expect(options).toEqual(['Option 1', 'Option 2'])
+    expect(options).toEqual([
+      { label: 'Option 1', id: 'abc-123' },
+      { label: 'Option 2', id: 'def-456' },
+    ])
 
     // Fallback to empty array if field is not found
     const options2 = component.getSelectOptionsForField(2)

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -2,7 +2,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnDestroy,
   Output,
   QueryList,
   ViewChild,
@@ -10,25 +9,26 @@ import {
 } from '@angular/core'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent } from '@ng-select/ng-select'
-import { Subject, first, takeUntil } from 'rxjs'
+import { first, Subject, takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
+  CUSTOM_FIELD_QUERY_MAX_ATOMS,
+  CUSTOM_FIELD_QUERY_MAX_DEPTH,
+  CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE,
+  CUSTOM_FIELD_QUERY_OPERATOR_LABELS,
+  CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP,
   CustomFieldQueryElementType,
   CustomFieldQueryOperator,
-  CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE,
-  CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP,
   CustomFieldQueryOperatorGroups,
-  CUSTOM_FIELD_QUERY_OPERATOR_LABELS,
-  CUSTOM_FIELD_QUERY_MAX_DEPTH,
-  CUSTOM_FIELD_QUERY_MAX_ATOMS,
 } from 'src/app/data/custom-field-query'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import {
+  CustomFieldQueryAtom,
   CustomFieldQueryElement,
   CustomFieldQueryExpression,
-  CustomFieldQueryAtom,
 } from 'src/app/utils/custom-field-query-element'
 import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 export class CustomFieldQueriesModel {
   public queries: CustomFieldQueryElement[] = []
@@ -157,7 +157,7 @@ export class CustomFieldQueriesModel {
   templateUrl: './custom-fields-query-dropdown.component.html',
   styleUrls: ['./custom-fields-query-dropdown.component.scss'],
 })
-export class CustomFieldsQueryDropdownComponent implements OnDestroy {
+export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPermissions {
   public CustomFieldQueryComponentType = CustomFieldQueryElementType
   public CustomFieldQueryOperator = CustomFieldQueryOperator
   public CustomFieldDataType = CustomFieldDataType
@@ -223,19 +223,13 @@ export class CustomFieldsQueryDropdownComponent implements OnDestroy {
 
   customFields: CustomField[] = []
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(protected customFieldsService: CustomFieldsService) {
+    super()
     this.selectionModel = new CustomFieldQueriesModel()
     this.getFields()
     this.reset()
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(this)
-    this.unsubscribeNotifier.complete()
-  }
-
   public onOpenChange(open: boolean) {
     if (open) {
       if (this.selectionModel.queries.length === 0) {
@@ -311,7 +305,9 @@ export class CustomFieldsQueryDropdownComponent implements OnDestroy {
     }))
   }
 
-  getSelectOptionsForField(fieldID: number): string[] {
+  getSelectOptionsForField(
+    fieldID: number
+  ): Array<{ label: string; id: string }> {
     const field = this.customFields.find((field) => field.id === fieldID)
     if (field) {
       return field.extra_data['select_options']

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

@@ -1,24 +1,24 @@
+import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
   TestBed,
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-let fixture: ComponentFixture<DatesDropdownComponent>
-import {
-  DatesDropdownComponent,
-  DateSelection,
-  RelativeDate,
-} from './dates-dropdown.component'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { DatePipe } from '@angular/common'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  DateSelection,
+  DatesDropdownComponent,
+  RelativeDate,
+} from './dates-dropdown.component'
+let fixture: ComponentFixture<DatesDropdownComponent>
 
 describe('DatesDropdownComponent', () => {
   let component: DatesDropdownComponent

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

@@ -2,9 +2,9 @@ import {
   Component,
   EventEmitter,
   Input,
-  Output,
-  OnInit,
   OnDestroy,
+  OnInit,
+  Output,
 } from '@angular/core'
 import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, Subscription } from 'rxjs'

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

@@ -1,3 +1,4 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -11,7 +12,6 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('CorrespondentEditDialogComponent', () => {
   let component: CorrespondentEditDialogComponent

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { Correspondent } from 'src/app/data/correspondent'
+import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html

@@ -21,12 +21,16 @@
           </button>
           <div formArrayName="select_options">
             @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
-              <div class="input-group input-group-sm my-2">
-                <input #selectOption type="text" class="form-control" [formControl]="option" autocomplete="off">
+              <div class="input-group input-group-sm my-2" [formGroup]="objectForm.controls.extra_data.controls.select_options.controls[i]">
+                <input #selectOption type="text" class="form-control" formControlName="label" autocomplete="off">
+                <input type="hidden" formControlName="id">
                 <button type="button" class="btn btn-outline-danger" (click)="removeSelectOption(i)" i18n>Delete</button>
               </div>
             }
           </div>
+          @if (object?.id) {
+            <small class="d-block mt-2" i18n>Warning: existing instances of this field will retain their current value index (e.g. option #1, #2, #3) after editing the options here</small>
+          }
         }
         @case (CustomFieldDataType.Monetary) {
           <div class="my-3">

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

@@ -1,10 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { CustomFieldEditDialogComponent } from './custom-field-edit-dialog.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef, QueryList } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomFieldDataType } from 'src/app/data/custom-field'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
@@ -12,10 +15,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { CustomFieldDataType } from 'src/app/data/custom-field'
-import { ElementRef, QueryList } from '@angular/core'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomFieldEditDialogComponent } from './custom-field-edit-dialog.component'
 
 describe('CustomFieldEditDialogComponent', () => {
   let component: CustomFieldEditDialogComponent
@@ -80,7 +80,11 @@ describe('CustomFieldEditDialogComponent', () => {
       name: 'Field 1',
       data_type: CustomFieldDataType.Select,
       extra_data: {
-        select_options: ['Option 1', 'Option 2', 'Option 3'],
+        select_options: [
+          { label: 'Option 1', id: '123-xyz' },
+          { label: 'Option 2', id: '456-abc' },
+          { label: 'Option 3', id: '789-123' },
+        ],
       },
     }
     fixture.detectChanges()
@@ -94,6 +98,10 @@ describe('CustomFieldEditDialogComponent', () => {
     component.dialogMode = EditDialogMode.CREATE
     fixture.detectChanges()
     component.ngOnInit()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(0)
+    component.addSelectOption()
     expect(
       component.objectForm.get('extra_data').get('select_options').value.length
     ).toBe(1)
@@ -101,14 +109,10 @@ describe('CustomFieldEditDialogComponent', () => {
     expect(
       component.objectForm.get('extra_data').get('select_options').value.length
     ).toBe(2)
-    component.addSelectOption()
-    expect(
-      component.objectForm.get('extra_data').get('select_options').value.length
-    ).toBe(3)
     component.removeSelectOption(0)
     expect(
       component.objectForm.get('extra_data').get('select_options').value.length
-    ).toBe(2)
+    ).toBe(1)
   })
 
   it('should focus on last select option input', () => {

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

@@ -2,23 +2,22 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
-  OnDestroy,
   OnInit,
   QueryList,
   ViewChildren,
 } from '@angular/core'
-import { FormGroup, FormControl, FormArray } from '@angular/forms'
+import { FormArray, FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { takeUntil } from 'rxjs'
 import {
-  DATA_TYPE_LABELS,
   CustomField,
   CustomFieldDataType,
+  DATA_TYPE_LABELS,
 } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
-import { Subject, takeUntil } from 'rxjs'
 
 @Component({
   selector: 'pngx-custom-field-edit-dialog',
@@ -27,15 +26,13 @@ import { Subject, takeUntil } from 'rxjs'
 })
 export class CustomFieldEditDialogComponent
   extends EditDialogComponent<CustomField>
-  implements OnInit, AfterViewInit, OnDestroy
+  implements OnInit, AfterViewInit
 {
   CustomFieldDataType = CustomFieldDataType
 
   @ViewChildren('selectOption')
   private selectOptionInputs: QueryList<ElementRef>
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   private get selectOptions(): FormArray {
     return (this.objectForm.controls.extra_data as FormGroup).controls
       .select_options as FormArray
@@ -57,9 +54,16 @@ export class CustomFieldEditDialogComponent
     }
     if (this.object?.data_type === CustomFieldDataType.Select) {
       this.selectOptions.clear()
-      this.object.extra_data.select_options.forEach((option) =>
-        this.selectOptions.push(new FormControl(option))
-      )
+      this.object.extra_data.select_options
+        .filter((option) => option)
+        .forEach((option) =>
+          this.selectOptions.push(
+            new FormGroup({
+              label: new FormControl(option.label),
+              id: new FormControl(option.id),
+            })
+          )
+        )
     }
   }
 
@@ -71,11 +75,6 @@ export class CustomFieldEditDialogComponent
       })
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(true)
-    this.unsubscribeNotifier.complete()
-  }
-
   getCreateTitle() {
     return $localize`Create new custom field`
   }
@@ -89,7 +88,7 @@ export class CustomFieldEditDialogComponent
       name: new FormControl(null),
       data_type: new FormControl(null),
       extra_data: new FormGroup({
-        select_options: new FormArray([new FormControl(null)]),
+        select_options: new FormArray([]),
         default_currency: new FormControl(null),
       }),
     })
@@ -104,7 +103,9 @@ export class CustomFieldEditDialogComponent
   }
 
   public addSelectOption() {
-    this.selectOptions.push(new FormControl(''))
+    this.selectOptions.push(
+      new FormGroup({ label: new FormControl(null), id: new FormControl(null) })
+    )
   }
 
   public removeSelectOption(index: number) {

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

@@ -1,3 +1,4 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -11,7 +12,6 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('DocumentTypeEditDialogComponent', () => {
   let component: DocumentTypeEditDialogComponent

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { DocumentType } from 'src/app/data/document-type'
+import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'

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

@@ -1,3 +1,4 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
@@ -10,8 +11,8 @@ import {
   tick,
 } from '@angular/core/testing'
 import {
-  FormGroup,
   FormControl,
+  FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
@@ -19,9 +20,9 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { of } from 'rxjs'
 import {
   DEFAULT_MATCHING_ALGORITHM,
+  MATCH_ALL,
   MATCH_AUTO,
   MATCH_NONE,
-  MATCH_ALL,
 } from 'src/app/data/matching-model'
 import { Tag } from 'src/app/data/tag'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -30,7 +31,6 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
 import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 @Component({
   template: `

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

@@ -9,12 +9,13 @@ import {
 } from 'src/app/data/matching-model'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { User } from 'src/app/data/user'
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service'
 import { UserService } from 'src/app/services/rest/user.service'
-import { PermissionsFormObject } from '../input/permissions/permissions-form/permissions-form.component'
 import { SettingsService } from 'src/app/services/settings.service'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { PermissionsFormObject } from '../input/permissions/permissions-form/permissions-form.component'
 
 export enum EditDialogMode {
   CREATE = 0,
@@ -23,15 +24,19 @@ export enum EditDialogMode {
 
 @Directive()
 export abstract class EditDialogComponent<
-  T extends ObjectWithPermissions | ObjectWithId,
-> implements OnInit
+    T extends ObjectWithPermissions | ObjectWithId,
+  >
+  extends LoadingComponentWithPermissions
+  implements OnInit
 {
   constructor(
     protected service: AbstractPaperlessService<T>,
     private activeModal: NgbActiveModal,
     private userService: UserService,
     private settingsService: SettingsService
-  ) {}
+  ) {
+    super()
+  }
 
   users: User[]
 

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

@@ -1,8 +1,10 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -12,8 +14,6 @@ import { TextComponent } from '../../input/text/text.component'
 import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { GroupEditDialogComponent } from './group-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('GroupEditDialogComponent', () => {
   let component: GroupEditDialogComponent

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

@@ -1,3 +1,4 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
@@ -23,7 +24,6 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { MailAccountEditDialogComponent } from './mail-account-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('MailAccountEditDialogComponent', () => {
   let component: MailAccountEditDialogComponent

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

@@ -1,3 +1,4 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -5,8 +6,8 @@ import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { of } from 'rxjs'
 import {
-  MailMetadataCorrespondentOption,
   MailAction,
+  MailMetadataCorrespondentOption,
 } from 'src/app/data/mail-rule'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -19,12 +20,11 @@ import { CheckComponent } from '../../input/check/check.component'
 import { NumberComponent } from '../../input/number/number.component'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
+import { SwitchComponent } from '../../input/switch/switch.component'
 import { TagsComponent } from '../../input/tags/tags.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { MailRuleEditDialogComponent } from './mail-rule-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { SwitchComponent } from '../../input/switch/switch.component'
 
 describe('MailRuleEditDialogComponent', () => {
   let component: MailRuleEditDialogComponent

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

@@ -1,15 +1,21 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
 import {
   NgbAccordionButton,
   NgbActiveModal,
   NgbModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { of, throwError } from 'rxjs'
+import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
@@ -17,12 +23,6 @@ import { TextComponent } from '../../input/text/text.component'
 import { TextAreaComponent } from '../../input/textarea/textarea.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { StoragePathEditDialogComponent } from './storage-path-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { of, throwError } from 'rxjs'
-import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
-import { By } from '@angular/platform-browser'
 
 describe('StoragePathEditDialogComponent', () => {
   let component: StoragePathEditDialogComponent

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

@@ -2,17 +2,17 @@ import { Component, OnDestroy } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import {
-  Subject,
   Observable,
+  Subject,
+  catchError,
   concat,
-  of,
   distinctUntilChanged,
+  filter,
+  map,
+  of,
+  switchMap,
   takeUntil,
   tap,
-  switchMap,
-  map,
-  catchError,
-  filter,
 } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Document } from 'src/app/data/document'
@@ -41,8 +41,6 @@ export class StoragePathEditDialogComponent
   public loading = false
   public testLoading = false
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(
     service: StoragePathService,
     activeModal: NgbActiveModal,
@@ -54,11 +52,6 @@ export class StoragePathEditDialogComponent
     this.initPathObservables()
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(this)
-    this.unsubscribeNotifier.complete()
-  }
-
   getCreateTitle() {
     return $localize`Create new storage path`
   }

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

@@ -1,8 +1,10 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -13,8 +15,6 @@ import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { TagEditDialogComponent } from './tag-edit-dialog.component'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('TagEditDialogComponent', () => {
   let component: TagEditDialogComponent

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

@@ -2,12 +2,12 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { Tag } from 'src/app/data/tag'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { randomColor } from 'src/app/utils/color'
-import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { randomColor } from 'src/app/utils/color'
 
 @Component({
   selector: 'pngx-tag-edit-dialog',

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html

@@ -32,6 +32,20 @@
           </div>
 
           <pngx-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></pngx-input-select>
+
+          @if (object?.is_mfa_enabled && currentUserIsSuperUser) {
+            <label class="form-label" i18n>Two-factor Authentication</label>
+            <pngx-confirm-button
+              label="Disable Two-factor Authentication"
+              i18n-label
+              title="Disable Two-factor Authentication"
+              i18n-title
+              buttonClasses="btn-outline-danger btn-sm"
+              iconName="trash"
+              [disabled]="totpLoading"
+              (confirm)="deactivateTotp()">
+            </pngx-confirm-button>
+          }
         </div>
         <div class="col">
           <pngx-permissions-select i18n-title title="Permissions" formControlName="user_permissions" [error]="error?.user_permissions" [inheritedPermissions]="inheritedPermissions"></pngx-permissions-select>

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

@@ -1,17 +1,22 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
+  AbstractControl,
   FormsModule,
   ReactiveFormsModule,
-  AbstractControl,
 } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { of } from 'rxjs'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
+import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { PasswordComponent } from '../../input/password/password.component'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
@@ -19,12 +24,12 @@ import { TextComponent } from '../../input/text/text.component'
 import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { UserEditDialogComponent } from './user-edit-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('UserEditDialogComponent', () => {
   let component: UserEditDialogComponent
   let settingsService: SettingsService
+  let permissionsService: PermissionsService
+  let toastService: ToastService
   let fixture: ComponentFixture<UserEditDialogComponent>
 
   beforeEach(async () => {
@@ -71,6 +76,8 @@ describe('UserEditDialogComponent', () => {
     fixture = TestBed.createComponent(UserEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
     settingsService.currentUser = { id: 99, username: 'user99' }
+    permissionsService = TestBed.inject(PermissionsService)
+    toastService = TestBed.inject(ToastService)
     component = fixture.componentInstance
 
     fixture.detectChanges()
@@ -121,4 +128,38 @@ describe('UserEditDialogComponent', () => {
     component.save()
     expect(component.passwordIsSet).toBeTruthy()
   })
+
+  it('should support deactivation of TOTP', () => {
+    component.object = { id: 99, username: 'user99' }
+    const deactivateSpy = jest.spyOn(
+      component['service'] as UserService,
+      'deactivateTotp'
+    )
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    deactivateSpy.mockReturnValueOnce(throwError(() => new Error('error')))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    deactivateSpy.mockReturnValueOnce(of(false))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    deactivateSpy.mockReturnValueOnce(of(true))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
+
+  it('should check superuser status of current user', () => {
+    expect(component.currentUserIsSuperUser).toBeFalsy()
+    permissionsService.initialize([], {
+      id: 99,
+      username: 'user99',
+      is_superuser: true,
+    })
+    expect(component.currentUserIsSuperUser).toBeTruthy()
+  })
 })

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

@@ -5,9 +5,11 @@ import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
+import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
 
 @Component({
   selector: 'pngx-user-edit-dialog',
@@ -20,12 +22,15 @@ export class UserEditDialogComponent
 {
   groups: Group[]
   passwordIsSet: boolean = false
+  public totpLoading: boolean = false
 
   constructor(
     service: UserService,
     activeModal: NgbActiveModal,
     groupsService: GroupService,
-    settingsService: SettingsService
+    settingsService: SettingsService,
+    private toastService: ToastService,
+    private permissionsService: PermissionsService
   ) {
     super(service, activeModal, service, settingsService)
 
@@ -87,4 +92,30 @@ export class UserEditDialogComponent
         .length > 0
     super.save()
   }
+
+  get currentUserIsSuperUser(): boolean {
+    return this.permissionsService.isSuperUser()
+  }
+
+  deactivateTotp() {
+    this.totpLoading = true
+    ;(this.service as UserService)
+      .deactivateTotp(this.object)
+      .pipe(first())
+      .subscribe({
+        next: (result) => {
+          this.totpLoading = false
+          if (result) {
+            this.toastService.showInfo($localize`Totp deactivated`)
+            this.object.is_mfa_enabled = false
+          } else {
+            this.toastService.showError($localize`Totp deactivation failed`)
+          }
+        },
+        error: (e) => {
+          this.totpLoading = false
+          this.toastService.showError($localize`Totp deactivation failed`, e)
+        },
+      })
+  }
 }