Just some stuff

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

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -98,7 +98,7 @@ body:
       label: Browser
       description: Which browser you are using, if relevant.
       placeholder: e.g. Chrome, Safari
-  - type: input
+  - type: textarea
     id: config-changes
     attributes:
       label: Configuration changes

.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"
 
@@ -30,7 +30,7 @@ jobs:
       github.repository
 
     name: Linting Checks
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       -
         name: Checkout repository
@@ -46,7 +46,7 @@ jobs:
 
   documentation:
     name: "Build & Deploy Documentation"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - pre-commit
     steps:
@@ -95,7 +95,7 @@ jobs:
 
   tests-backend:
     name: "Backend Tests (Python ${{ matrix.python-version }})"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - pre-commit
     strategy:
@@ -170,7 +170,7 @@ jobs:
 
   install-frontend-depedendencies:
     name: "Install Frontend Dependencies"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - pre-commit
     steps:
@@ -201,7 +201,7 @@ jobs:
 
   tests-frontend:
     name: "Frontend Tests (Node ${{ matrix.node-version }} - ${{ matrix.shard-index }}/${{ matrix.shard-count }})"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - install-frontend-depedendencies
     strategy:
@@ -261,7 +261,7 @@ jobs:
 
   tests-coverage-upload:
     name: "Upload to Codecov"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - tests-backend
       - tests-frontend
@@ -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 }}
@@ -333,7 +333,7 @@ jobs:
 
   build-docker-image:
     name: Build Docker image for ${{ github.ref_name }}
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     if: github.event_name == 'push' && (startsWith(github.ref, 'refs/heads/feature-') || startsWith(github.ref, 'refs/heads/fix-') || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/beta' || contains(github.ref, 'beta.rc') || startsWith(github.ref, 'refs/tags/v'))
     concurrency:
       group: ${{ github.workflow }}-build-docker-image-${{ github.ref_name }}
@@ -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
@@ -461,7 +461,7 @@ jobs:
     needs:
       - build-docker-image
       - documentation
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       -
         name: Checkout
@@ -482,12 +482,6 @@ jobs:
         name: Install Python dependencies
         run: |
           pipenv --python ${{ steps.setup-python.outputs.python-version }} sync --dev
-      -
-        name: Patch whitenoise
-        run: |
-          curl --fail --silent --show-error --location --output 484.patch https://github.com/evansd/whitenoise/pull/484.patch
-          patch -d $(pipenv --venv)/lib/python3.11/site-packages --verbose -p2 < 484.patch
-          rm 484.patch
       -
         name: Install system dependencies
         run: |
@@ -575,7 +569,7 @@ jobs:
 
   publish-release:
     name: "Publish Release"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     outputs:
       prerelease: ${{ steps.get_version.outputs.prerelease }}
       changelog: ${{ steps.create-release.outputs.body }}
@@ -625,7 +619,7 @@ jobs:
 
   append-changelog:
     name: "Append Changelog"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - publish-release
     if: needs.publish-release.outputs.prerelease == 'false'
@@ -655,7 +649,9 @@ jobs:
           git checkout ${{ needs.publish-release.outputs.version }}-changelog
           echo -e "# Changelog\n\n${{ needs.publish-release.outputs.changelog }}\n" > changelog-new.md
           echo "Manually linking usernames"
-          sed -i -r 's|@(.+?) \(\[#|[@\1](https://github.com/\1) ([#|ig' changelog-new.md
+          sed -i -r 's|@([a-zA-Z0-9_]+) \(\[#|[@\1](https://github.com/\1) ([#|g' changelog-new.md
+          echo "Removing unneeded comment tags"
+          sed -i -r 's|@<!---->|@|g' changelog-new.md
           CURRENT_CHANGELOG=`tail --lines +2 changelog.md`
           echo -e "$CURRENT_CHANGELOG" >> changelog-new.md
           mv changelog-new.md changelog.md

.github/workflows/cleanup-tags.yml

@@ -21,7 +21,7 @@ jobs:
   cleanup-images:
     name: Cleanup Image Tags for ${{ matrix.primary-name }}
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     strategy:
       fail-fast: false
       matrix:
@@ -33,7 +33,7 @@ jobs:
       -
         name: Clean temporary images
         if: "${{ env.TOKEN != '' }}"
-        uses: stumpylog/image-cleaner-action/ephemeral@v0.8.0
+        uses: stumpylog/image-cleaner-action/ephemeral@v0.9.0
         with:
           token: "${{ env.TOKEN }}"
           owner: "${{ github.repository_owner }}"
@@ -47,7 +47,7 @@ jobs:
   cleanup-untagged-images:
     name: Cleanup Untagged Images Tags for ${{ matrix.primary-name }}
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - cleanup-images
     strategy:
@@ -61,7 +61,7 @@ jobs:
       -
         name: Clean untagged images
         if: "${{ env.TOKEN != '' }}"
-        uses: stumpylog/image-cleaner-action/untagged@v0.8.0
+        uses: stumpylog/image-cleaner-action/untagged@v0.9.0
         with:
           token: "${{ env.TOKEN }}"
           owner: "${{ github.repository_owner }}"

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     permissions:
       actions: read
       contents: read

.github/workflows/crowdin.yml

@@ -16,7 +16,7 @@ jobs:
   synchronize-with-crowdin:
     name: Crowdin Sync
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
 
     steps:
     - name: Checkout

.github/workflows/project-actions.yml

@@ -15,7 +15,7 @@ permissions:
 jobs:
   pr_opened_or_reopened:
     name: pr_opened_or_reopened
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     permissions:
       # write permission is required for autolabeler
       pull-requests: write

.github/workflows/repo-maintenance.yml

@@ -17,7 +17,7 @@ jobs:
   stale:
     name: 'Stale'
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/stale@v9
         with:
@@ -33,7 +33,7 @@ jobs:
   lock-threads:
     name: 'Lock Old Threads'
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: dessant/lock-threads@v5
         with:
@@ -59,7 +59,7 @@ jobs:
   close-answered-discussions:
     name: 'Close Answered Discussions'
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/github-script@v7
         with:
@@ -116,7 +116,7 @@ jobs:
   close-outdated-discussions:
     name: 'Close Outdated Discussions'
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/github-script@v7
         with:
@@ -208,7 +208,7 @@ jobs:
   close-unsupported-feature-requests:
     name: 'Close Unsupported Feature Requests'
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/github-script@v7
         with:

.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": ["index.md", "administration.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,16 +233,12 @@ 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 "Patching whitenoise for compression speedup" \
-    && curl --fail --silent --show-error --location --output 484.patch https://github.com/evansd/whitenoise/pull/484.patch \
-    && patch -d /usr/local/lib/python3.12/site-packages --verbose -p2 < 484.patch \
-    && rm 484.patch \
   && echo "Installing NLTK data" \
     && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" snowball_data \
     && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" stopwords \

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,23 +50,24 @@ 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"
-whitenoise = "~=6.7"
+watchdog = "~=6.0"
+whitenoise = "~=6.8"
 whoosh = "~=2.7"
 zxing-cpp = {version = "*", platform_machine = "== 'x86_64'"}
 
+
 [dev-packages]
 # Linting
 pre-commit = "*"
 ruff = "*"
-# Testing
 factory-boy = "*"
+# Testing
 pytest = "*"
 pytest-cov = "*"
 pytest-django = "*"

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/env-from-file.sh

@@ -16,7 +16,7 @@ do
 	# Check if it starts with "PAPERLESS_" and ends in "_FILE"
 	if [[ ${env_name} == PAPERLESS_*_FILE ]]; then
 		# This should have been named different..
-		if [[ ${env_name} == "PAPERLESS_OCR_SKIP_ARCHIVE_FILE" ]]; then
+		if [[ ${env_name} == "PAPERLESS_OCR_SKIP_ARCHIVE_FILE" || ${env_name} == "PAPERLESS_MODEL_FILE" ]]; then
 			continue
 		fi
 		# Extract the value of the environment

docker/install_management_commands.sh

@@ -14,7 +14,9 @@ for command in decrypt_documents \
 	document_thumbnails \
 	document_sanity_checker \
 	document_fuzzy_match \
-	manage_superuser;
+	manage_superuser \
+	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

@@ -19,6 +19,8 @@ Options available to any installation of paperless:
     export. Therefore, incremental backups with `rsync` are entirely
     possible.
 
+    The exporter does not include API tokens and they will need to be re-generated after importing.
+
 !!! caution
 
     You cannot import the export generated with one version of paperless in
@@ -239,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
@@ -267,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
@@ -620,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/advanced_usage.md

@@ -25,20 +25,20 @@ documents.
 
 The following algorithms are available:
 
-- **None:** No matching will be performed.
-- **Any:** Looks for any occurrence of any word provided in match in
-  the PDF. If you define the match as `Bank1 Bank2`, it will match
-  documents containing either of these terms.
-- **All:** Requires that every word provided appears in the PDF,
-  albeit not in the order provided.
-- **Exact:** Matches only if the match appears exactly as provided
-  (i.e. preserve ordering) in the PDF.
-- **Regular expression:** Parses the match as a regular expression and
-  tries to find a match within the document.
-- **Fuzzy match:** Uses a partial matching based on locating the tag text
-  inside the document, using a [partial ratio](https://rapidfuzz.github.io/RapidFuzz/Usage/fuzz.html#partial-ratio)
-- **Auto:** Tries to automatically match new documents. This does not
-  require you to set a match. See the [notes below](#automatic-matching).
+-   **None:** No matching will be performed.
+-   **Any:** Looks for any occurrence of any word provided in match in
+    the PDF. If you define the match as `Bank1 Bank2`, it will match
+    documents containing either of these terms.
+-   **All:** Requires that every word provided appears in the PDF,
+    albeit not in the order provided.
+-   **Exact:** Matches only if the match appears exactly as provided
+    (i.e. preserve ordering) in the PDF.
+-   **Regular expression:** Parses the match as a regular expression and
+    tries to find a match within the document.
+-   **Fuzzy match:** Uses a partial matching based on locating the tag text
+    inside the document, using a [partial ratio](https://rapidfuzz.github.io/RapidFuzz/Usage/fuzz.html#partial-ratio)
+-   **Auto:** Tries to automatically match new documents. This does not
+    require you to set a match. See the [notes below](#automatic-matching).
 
 When using the _any_ or _all_ matching algorithms, you can search for
 terms that consist of multiple words by enclosing them in double quotes.
@@ -69,33 +69,33 @@ Paperless tries to hide much of the involved complexity with this
 approach. However, there are a couple caveats you need to keep in mind
 when using this feature:
 
-- Changes to your documents are not immediately reflected by the
-  matching algorithm. The neural network needs to be _trained_ on your
-  documents after changes. Paperless periodically (default: once each
-  hour) checks for changes and does this automatically for you.
-- The Auto matching algorithm only takes documents into account which
-  are NOT placed in your inbox (i.e. have any inbox tags assigned to
-  them). This ensures that the neural network only learns from
-  documents which you have correctly tagged before.
-- The matching algorithm can only work if there is a correlation
-  between the tag, correspondent, document type, or storage path and
-  the document itself. Your bank statements usually contain your bank
-  account number and the name of the bank, so this works reasonably
-  well, However, tags such as "TODO" cannot be automatically
-  assigned.
-- The matching algorithm needs a reasonable number of documents to
-  identify when to assign tags, correspondents, storage paths, and
-  types. If one out of a thousand documents has the correspondent
-  "Very obscure web shop I bought something five years ago", it will
-  probably not assign this correspondent automatically if you buy
-  something from them again. The more documents, the better.
-- Paperless also needs a reasonable amount of negative examples to
-  decide when not to assign a certain tag, correspondent, document
-  type, or storage path. This will usually be the case as you start
-  filling up paperless with documents. Example: If all your documents
-  are either from "Webshop" or "Bank", paperless will assign one
-  of these correspondents to ANY new document, if both are set to
-  automatic matching.
+-   Changes to your documents are not immediately reflected by the
+    matching algorithm. The neural network needs to be _trained_ on your
+    documents after changes. Paperless periodically (default: once each
+    hour) checks for changes and does this automatically for you.
+-   The Auto matching algorithm only takes documents into account which
+    are NOT placed in your inbox (i.e. have any inbox tags assigned to
+    them). This ensures that the neural network only learns from
+    documents which you have correctly tagged before.
+-   The matching algorithm can only work if there is a correlation
+    between the tag, correspondent, document type, or storage path and
+    the document itself. Your bank statements usually contain your bank
+    account number and the name of the bank, so this works reasonably
+    well, However, tags such as "TODO" cannot be automatically
+    assigned.
+-   The matching algorithm needs a reasonable number of documents to
+    identify when to assign tags, correspondents, storage paths, and
+    types. If one out of a thousand documents has the correspondent
+    "Very obscure web shop I bought something five years ago", it will
+    probably not assign this correspondent automatically if you buy
+    something from them again. The more documents, the better.
+-   Paperless also needs a reasonable amount of negative examples to
+    decide when not to assign a certain tag, correspondent, document
+    type, or storage path. This will usually be the case as you start
+    filling up paperless with documents. Example: If all your documents
+    are either from "Webshop" or "Bank", paperless will assign one
+    of these correspondents to ANY new document, if both are set to
+    automatic matching.
 
 ## Hooking into the consumption process {#consume-hooks}
 
@@ -242,12 +242,12 @@ webserver:
 
 Troubleshooting:
 
-- Monitor the Docker Compose log
-  `cd ~/paperless-ngx; docker compose logs -f`
-- Check your script's permission e.g. in case of permission error
-  `sudo chmod 755 post-consumption-example.sh`
-- Pipe your scripts's output to a log file e.g.
-  `echo "${DOCUMENT_ID}" | tee --append /usr/src/paperless/scripts/post-consumption-example.log`
+-   Monitor the Docker Compose log
+    `cd ~/paperless-ngx; docker compose logs -f`
+-   Check your script's permission e.g. in case of permission error
+    `sudo chmod 755 post-consumption-example.sh`
+-   Pipe your scripts's output to a log file e.g.
+    `echo "${DOCUMENT_ID}" | tee --append /usr/src/paperless/scripts/post-consumption-example.log`
 
 ## File name handling {#file-name-handling}
 
@@ -302,35 +302,35 @@ will create a directory structure as follows:
 
 Paperless provides the following variables for use within filenames:
 
-- `{{ asn }}`: The archive serial number of the document, or "none".
-- `{{ correspondent }}`: The name of the correspondent, or "none".
-- `{{ document_type }}`: The name of the document type, or "none".
-- `{{ tag_list }}`: A comma separated list of all tags assigned to the
-  document.
-- `{{ title }}`: The title of the document.
-- `{{ created }}`: The full date (ISO format) the document was created.
-- `{{ created_year }}`: Year created only, formatted as the year with
-  century.
-- `{{ created_year_short }}`: Year created only, formatted as the year
-  without century, zero padded.
-- `{{ created_month }}`: Month created only (number 01-12).
-- `{{ created_month_name }}`: Month created name, as per locale
-- `{{ created_month_name_short }}`: Month created abbreviated name, as per
-  locale
-- `{{ created_day }}`: Day created only (number 01-31).
-- `{{ added }}`: The full date (ISO format) the document was added to
-  paperless.
-- `{{ added_year }}`: Year added only.
-- `{{ added_year_short }}`: Year added only, formatted as the year without
-  century, zero padded.
-- `{{ added_month }}`: Month added only (number 01-12).
-- `{{ added_month_name }}`: Month added name, as per locale
-- `{{ added_month_name_short }}`: Month added abbreviated name, as per
-  locale
-- `{{ added_day }}`: Day added only (number 01-31).
-- `{{ owner_username }}`: Username of document owner, if any, or "none"
-- `{{ original_name }}`: Document original filename, minus the extension, if any, or "none"
-- `{{ doc_pk }}`: The paperless identifier (primary key) for the document.
+-   `{{ asn }}`: The archive serial number of the document, or "none".
+-   `{{ correspondent }}`: The name of the correspondent, or "none".
+-   `{{ document_type }}`: The name of the document type, or "none".
+-   `{{ tag_list }}`: A comma separated list of all tags assigned to the
+    document.
+-   `{{ title }}`: The title of the document.
+-   `{{ created }}`: The full date (ISO format) the document was created.
+-   `{{ created_year }}`: Year created only, formatted as the year with
+    century.
+-   `{{ created_year_short }}`: Year created only, formatted as the year
+    without century, zero padded.
+-   `{{ created_month }}`: Month created only (number 01-12).
+-   `{{ created_month_name }}`: Month created name, as per locale
+-   `{{ created_month_name_short }}`: Month created abbreviated name, as per
+    locale
+-   `{{ created_day }}`: Day created only (number 01-31).
+-   `{{ added }}`: The full date (ISO format) the document was added to
+    paperless.
+-   `{{ added_year }}`: Year added only.
+-   `{{ added_year_short }}`: Year added only, formatted as the year without
+    century, zero padded.
+-   `{{ added_month }}`: Month added only (number 01-12).
+-   `{{ added_month_name }}`: Month added name, as per locale
+-   `{{ added_month_name_short }}`: Month added abbreviated name, as per
+    locale
+-   `{{ added_day }}`: Day added only (number 01-31).
+-   `{{ owner_username }}`: Username of document owner, if any, or "none"
+-   `{{ original_name }}`: Document original filename, minus the extension, if any, or "none"
+-   `{{ doc_pk }}`: The paperless identifier (primary key) for the document.
 
 !!! warning
 
@@ -381,10 +381,10 @@ before empty placeholders are removed as well, empty directories are omitted.
 When a single storage layout is not sufficient for your use case, storage paths allow for more complex
 structure to set precisely where each document is stored in the file system.
 
-- Each storage path is a [`PAPERLESS_FILENAME_FORMAT`](configuration.md#PAPERLESS_FILENAME_FORMAT) and
-  follows the rules described above
-- Each document is assigned a storage path using the matching algorithms described above, but can be
-  overwritten at any time
+-   Each storage path is a [`PAPERLESS_FILENAME_FORMAT`](configuration.md#PAPERLESS_FILENAME_FORMAT) and
+    follows the rules described above
+-   Each document is assigned a storage path using the matching algorithms described above, but can be
+    overwritten at any time
 
 For example, you could define the following two storage paths:
 
@@ -435,8 +435,8 @@ with more complex logic.
 
 #### Additional Variables
 
-- `{{ tag_name_list }}`: A list of tag names applied to the document, ordered by the tag name. Note this is a list, not a single string
-- `{{ custom_fields }}`: A mapping of custom field names to their type and value. A user can access the mapping by field name or check if a field is applied by checking its existence in the variable.
+-   `{{ tag_name_list }}`: A list of tag names applied to the document, ordered by the tag name. Note this is a list, not a single string
+-   `{{ custom_fields }}`: A mapping of custom field names to their type and value. A user can access the mapping by field name or check if a field is applied by checking its existence in the variable.
 
 !!! tip
 
@@ -532,15 +532,15 @@ installation, you can use volumes to accomplish this:
 
 ```yaml
 services:
-  # ...
-  webserver:
-    environment:
-      - PAPERLESS_ENABLE_FLOWER
-    ports:
-      - 5555:5555 # (2)!
     # ...
-    volumes:
-      - /path/to/my/flowerconfig.py:/usr/src/paperless/src/paperless/flowerconfig.py:ro # (1)!
+    webserver:
+        environment:
+            - PAPERLESS_ENABLE_FLOWER
+        ports:
+            - 5555:5555 # (2)!
+        # ...
+        volumes:
+            - /path/to/my/flowerconfig.py:/usr/src/paperless/src/paperless/flowerconfig.py:ro # (1)!
 ```
 
 1. Note the `:ro` tag means the file will be mounted as read only.
@@ -571,11 +571,11 @@ For example, using Docker Compose:
 
 ```yaml
 services:
-  # ...
-  webserver:
     # ...
-    volumes:
-      - /path/to/my/scripts:/custom-cont-init.d:ro # (1)!
+    webserver:
+        # ...
+        volumes:
+            - /path/to/my/scripts:/custom-cont-init.d:ro # (1)!
 ```
 
 1. Note the `:ro` tag means the folder will be mounted as read only. This is for extra security against changes
@@ -623,16 +623,16 @@ Paperless is able to utilize barcodes for automatically performing some tasks.
 
 At this time, the library utilized for detection of barcodes supports the following types:
 
-- AN-13/UPC-A
-- UPC-E
-- EAN-8
-- Code 128
-- Code 93
-- Code 39
-- Codabar
-- Interleaved 2 of 5
-- QR Code
-- SQ Code
+-   AN-13/UPC-A
+-   UPC-E
+-   EAN-8
+-   Code 128
+-   Code 93
+-   Code 39
+-   Codabar
+-   Interleaved 2 of 5
+-   QR Code
+-   SQ Code
 
 You may check for updates on the [zbar library homepage](https://github.com/mchehab/zbar).
 For usage in Paperless, the type of barcode does not matter, only the contents of it.
@@ -819,9 +819,9 @@ If using docker, you'll need to add the following volume mounts to your `docker-
 
 ```yaml
 webserver:
-  volumes:
-    - /home/user/.gnupg/pubring.gpg:/usr/src/paperless/.gnupg/pubring.gpg
-    - <path to gpg-agent.extra socket>:/usr/src/paperless/.gnupg/S.gpg-agent
+    volumes:
+        - /home/user/.gnupg/pubring.gpg:/usr/src/paperless/.gnupg/pubring.gpg
+        - <path to gpg-agent.extra socket>:/usr/src/paperless/.gnupg/S.gpg-agent
 ```
 
 For a 'bare-metal' installation no further configuration is necessary. If you
@@ -829,9 +829,9 @@ want to use a separate `GNUPG_HOME`, you can do so by configuring the [PAPERLESS
 
 ### Troubleshooting
 
-- Make sure, that `gpg-agent` is running on your host machine
-- Make sure, that encryption and decryption works from inside the container using the `gpg` commands from above.
-- Check that all files in `/usr/src/paperless/.gnupg` have correct permissions
+-   Make sure, that `gpg-agent` is running on your host machine
+-   Make sure, that encryption and decryption works from inside the container using the `gpg` commands from above.
+-   Check that all files in `/usr/src/paperless/.gnupg` have correct permissions
 
 ```shell
 paperless@9da1865df327:~/.gnupg$ ls -al

docs/api.md

@@ -8,23 +8,23 @@ most of the available filters and ordering fields.
 
 The API provides the following main endpoints:
 
-- `/api/correspondents/`: Full CRUD support.
-- `/api/custom_fields/`: Full CRUD support.
-- `/api/documents/`: Full CRUD support, except POSTing new documents.
-  See [below](#file-uploads).
-- `/api/document_types/`: Full CRUD support.
-- `/api/groups/`: Full CRUD support.
-- `/api/logs/`: Read-Only.
-- `/api/mail_accounts/`: Full CRUD support.
-- `/api/mail_rules/`: Full CRUD support.
-- `/api/profile/`: GET, PATCH
-- `/api/share_links/`: Full CRUD support.
-- `/api/storage_paths/`: Full CRUD support.
-- `/api/tags/`: Full CRUD support.
-- `/api/tasks/`: Read-only.
-- `/api/users/`: Full CRUD support.
-- `/api/workflows/`: Full CRUD support.
-- `/api/search/` GET, see [below](#global-search).
+-   `/api/correspondents/`: Full CRUD support.
+-   `/api/custom_fields/`: Full CRUD support.
+-   `/api/documents/`: Full CRUD support, except POSTing new documents.
+    See [below](#file-uploads).
+-   `/api/document_types/`: Full CRUD support.
+-   `/api/groups/`: Full CRUD support.
+-   `/api/logs/`: Read-Only.
+-   `/api/mail_accounts/`: Full CRUD support.
+-   `/api/mail_rules/`: Full CRUD support.
+-   `/api/profile/`: GET, PATCH
+-   `/api/share_links/`: Full CRUD support.
+-   `/api/storage_paths/`: Full CRUD support.
+-   `/api/tags/`: Full CRUD support.
+-   `/api/tasks/`: Read-only.
+-   `/api/users/`: Full CRUD support.
+-   `/api/workflows/`: Full CRUD support.
+-   `/api/search/` GET, see [below](#global-search).
 
 All of these endpoints except for the logging endpoint allow you to
 fetch (and edit and delete where appropriate) individual objects by
@@ -33,32 +33,32 @@ appending their primary key to the path, e.g. `/api/documents/454/`.
 The objects served by the document endpoint contain the following
 fields:
 
-- `id`: ID of the document. Read-only.
-- `title`: Title of the document.
-- `content`: Plain text content of the document.
-- `tags`: List of IDs of tags assigned to this document, or empty
-  list.
-- `document_type`: Document type of this document, or null.
-- `correspondent`: Correspondent of this document or null.
-- `created`: The date time at which this document was created.
-- `created_date`: The date (YYYY-MM-DD) at which this document was
-  created. Optional. If also passed with created, this is ignored.
-- `modified`: The date at which this document was last edited in
-  paperless. Read-only.
-- `added`: The date at which this document was added to paperless.
-  Read-only.
-- `archive_serial_number`: The identifier of this document in a
-  physical document archive.
-- `original_file_name`: Verbose filename of the original document.
-  Read-only.
-- `archived_file_name`: Verbose filename of the archived document.
-  Read-only. Null if no archived document is available.
-- `notes`: Array of notes associated with the document.
-- `page_count`: Number of pages.
-- `set_permissions`: Allows setting document permissions. Optional,
-  write-only. See [below](#permissions).
-- `custom_fields`: Array of custom fields & values, specified as
-  `{ field: CUSTOM_FIELD_ID, value: VALUE }`
+-   `id`: ID of the document. Read-only.
+-   `title`: Title of the document.
+-   `content`: Plain text content of the document.
+-   `tags`: List of IDs of tags assigned to this document, or empty
+    list.
+-   `document_type`: Document type of this document, or null.
+-   `correspondent`: Correspondent of this document or null.
+-   `created`: The date time at which this document was created.
+-   `created_date`: The date (YYYY-MM-DD) at which this document was
+    created. Optional. If also passed with created, this is ignored.
+-   `modified`: The date at which this document was last edited in
+    paperless. Read-only.
+-   `added`: The date at which this document was added to paperless.
+    Read-only.
+-   `archive_serial_number`: The identifier of this document in a
+    physical document archive.
+-   `original_file_name`: Verbose filename of the original document.
+    Read-only.
+-   `archived_file_name`: Verbose filename of the archived document.
+    Read-only. Null if no archived document is available.
+-   `notes`: Array of notes associated with the document.
+-   `page_count`: Number of pages.
+-   `set_permissions`: Allows setting document permissions. Optional,
+    write-only. See [below](#permissions).
+-   `custom_fields`: Array of custom fields & values, specified as
+    `{ field: CUSTOM_FIELD_ID, value: VALUE }`
 
 !!! note
 
@@ -69,11 +69,11 @@ fields:
 In addition to that, the document endpoint offers these additional
 actions on individual documents:
 
-- `/api/documents/<pk>/download/`: Download the document.
-- `/api/documents/<pk>/preview/`: Display the document inline, without
-  downloading it.
-- `/api/documents/<pk>/thumb/`: Download the PNG thumbnail of a
-  document.
+-   `/api/documents/<pk>/download/`: Download the document.
+-   `/api/documents/<pk>/preview/`: Display the document inline, without
+    downloading it.
+-   `/api/documents/<pk>/thumb/`: Download the PNG thumbnail of a
+    document.
 
 Paperless generates archived PDF/A documents from consumed files and
 stores both the original files as well as the archived files. By
@@ -107,30 +107,30 @@ Access the metadata of a document with an ID `id` at
 
 The endpoint reports the following data:
 
-- `original_checksum`: MD5 checksum of the original document.
-- `original_size`: Size of the original document, in bytes.
-- `original_mime_type`: Mime type of the original document.
-- `media_filename`: Current filename of the document, under which it
-  is stored inside the media directory.
-- `has_archive_version`: True, if this document is archived, false
-  otherwise.
-- `original_metadata`: A list of metadata associated with the original
-  document. See below.
-- `archive_checksum`: MD5 checksum of the archived document, or null.
-- `archive_size`: Size of the archived document in bytes, or null.
-- `archive_metadata`: Metadata associated with the archived document,
-  or null. See below.
+-   `original_checksum`: MD5 checksum of the original document.
+-   `original_size`: Size of the original document, in bytes.
+-   `original_mime_type`: Mime type of the original document.
+-   `media_filename`: Current filename of the document, under which it
+    is stored inside the media directory.
+-   `has_archive_version`: True, if this document is archived, false
+    otherwise.
+-   `original_metadata`: A list of metadata associated with the original
+    document. See below.
+-   `archive_checksum`: MD5 checksum of the archived document, or null.
+-   `archive_size`: Size of the archived document in bytes, or null.
+-   `archive_metadata`: Metadata associated with the archived document,
+    or null. See below.
 
 File metadata is reported as a list of objects in the following form:
 
 ```json
 [
-  {
-    "namespace": "http://ns.adobe.com/pdf/1.3/",
-    "prefix": "pdf",
-    "key": "Producer",
-    "value": "SparklePDF, Fancy edition"
-  }
+    {
+        "namespace": "http://ns.adobe.com/pdf/1.3/",
+        "prefix": "pdf",
+        "key": "Producer",
+        "value": "SparklePDF, Fancy edition"
+    }
 ]
 ```
 
@@ -140,9 +140,9 @@ document. Paperless only reports PDF metadata at this point.
 
 ## Documents additional endpoints
 
-- `/api/documents/<id>/notes/`: Retrieve notes for a document.
-- `/api/documents/<id>/share_links/`: Retrieve share links for a document.
-- `/api/documents/<id>/history/`: Retrieve history of changes for a document.
+-   `/api/documents/<id>/notes/`: Retrieve notes for a document.
+-   `/api/documents/<id>/share_links/`: Retrieve share links for a document.
+-   `/api/documents/<id>/history/`: Retrieve history of changes for a document.
 
 ## Authorization
 
@@ -228,10 +228,10 @@ Full text searching is available on the `/api/documents/` endpoint. Two
 specific query parameters cause the API to return full text search
 results:
 
-- `/api/documents/?query=your%20search%20query`: Search for a document
-  using a full text query. For details on the syntax, see [Basic Usage - Searching](usage.md#basic-usage_searching).
-- `/api/documents/?more_like_id=1234`: Search for documents similar to
-  the document with id 1234.
+-   `/api/documents/?query=your%20search%20query`: Search for a document
+    using a full text query. For details on the syntax, see [Basic Usage - Searching](usage.md#basic-usage_searching).
+-   `/api/documents/?more_like_id=1234`: Search for documents similar to
+    the document with id 1234.
 
 Pagination works exactly the same as it does for normal requests on this
 endpoint.
@@ -268,12 +268,12 @@ attribute with various information about the search results:
 }
 ```
 
-- `score` is an indication how well this document matches the query
-  relative to the other search results.
-- `highlights` is an excerpt from the document content and highlights
-  the search terms with `<span>` tags as shown above.
-- `rank` is the index of the search results. The first result will
-  have rank 0.
+-   `score` is an indication how well this document matches the query
+    relative to the other search results.
+-   `highlights` is an excerpt from the document content and highlights
+    the search terms with `<span>` tags as shown above.
+-   `rank` is the index of the search results. The first result will
+    have rank 0.
 
 ### Filtering by custom fields
 
@@ -284,33 +284,33 @@ use cases:
 1. Documents with a custom field "due" (date) between Aug 1, 2024 and
    Sept 1, 2024 (inclusive):
 
-   `?custom_field_query=["due", "range", ["2024-08-01", "2024-09-01"]]`
+    `?custom_field_query=["due", "range", ["2024-08-01", "2024-09-01"]]`
 
 2. Documents with a custom field "customer" (text) that equals "bob"
    (case sensitive):
 
-   `?custom_field_query=["customer", "exact", "bob"]`
+    `?custom_field_query=["customer", "exact", "bob"]`
 
 3. Documents with a custom field "answered" (boolean) set to `true`:
 
-   `?custom_field_query=["answered", "exact", true]`
+    `?custom_field_query=["answered", "exact", true]`
 
 4. Documents with a custom field "favorite animal" (select) set to either
    "cat" or "dog":
 
-   `?custom_field_query=["favorite animal", "in", ["cat", "dog"]]`
+    `?custom_field_query=["favorite animal", "in", ["cat", "dog"]]`
 
 5. Documents with a custom field "address" (text) that is empty:
 
-   `?custom_field_query=["OR", ["address", "isnull", true], ["address", "exact", ""]]`
+    `?custom_field_query=["OR", ["address", "isnull", true], ["address", "exact", ""]]`
 
 6. Documents that don't have a field called "foo":
 
-   `?custom_field_query=["foo", "exists", false]`
+    `?custom_field_query=["foo", "exists", false]`
 
 7. Documents that have document links "references" to both document 3 and 7:
 
-   `?custom_field_query=["references", "contains", [3, 7]]`
+    `?custom_field_query=["references", "contains", [3, 7]]`
 
 All field types support basic operations including `exact`, `in`, `isnull`,
 and `exists`. String, URL, and monetary fields support case-insensitive
@@ -326,8 +326,8 @@ Get auto completions for a partial search term.
 
 Query parameters:
 
-- `term`: The incomplete term.
-- `limit`: Amount of results. Defaults to 10.
+-   `term`: The incomplete term.
+-   `limit`: Amount of results. Defaults to 10.
 
 Results returned by the endpoint are ordered by importance of the term
 in the document index. The first result is the term that has the highest
@@ -351,19 +351,19 @@ from there.
 
 The endpoint supports the following optional form fields:
 
-- `title`: Specify a title that the consumer should use for the
-  document.
-- `created`: Specify a DateTime where the document was created (e.g.
-  "2016-04-19" or "2016-04-19 06:15:00+02:00").
-- `correspondent`: Specify the ID of a correspondent that the consumer
-  should use for the document.
-- `document_type`: Similar to correspondent.
-- `storage_path`: Similar to correspondent.
-- `tags`: Similar to correspondent. Specify this multiple times to
-  have multiple tags added to the document.
-- `archive_serial_number`: An optional archive serial number to set.
-- `custom_fields`: An array of custom field ids to assign (with an empty
-  value) to the document.
+-   `title`: Specify a title that the consumer should use for the
+    document.
+-   `created`: Specify a DateTime where the document was created (e.g.
+    "2016-04-19" or "2016-04-19 06:15:00+02:00").
+-   `correspondent`: Specify the ID of a correspondent that the consumer
+    should use for the document.
+-   `document_type`: Similar to correspondent.
+-   `storage_path`: Similar to correspondent.
+-   `tags`: Similar to correspondent. Specify this multiple times to
+    have multiple tags added to the document.
+-   `archive_serial_number`: An optional archive serial number to set.
+-   `custom_fields`: An array of custom field ids to assign (with an empty
+    value) to the document.
 
 The endpoint will immediately return HTTP 200 if the document consumption
 process was started successfully, with the UUID of the consumption task
@@ -429,50 +429,55 @@ a json payload of the format:
 
 The following methods are supported:
 
-- `set_correspondent`
-  - Requires `parameters`: `{ "correspondent": CORRESPONDENT_ID }`
-- `set_document_type`
-  - Requires `parameters`: `{ "document_type": DOCUMENT_TYPE_ID }`
-- `set_storage_path`
-  - Requires `parameters`: `{ "storage_path": STORAGE_PATH_ID }`
-- `add_tag`
-  - Requires `parameters`: `{ "tag": TAG_ID }`
-- `remove_tag`
-  - Requires `parameters`: `{ "tag": TAG_ID }`
-- `modify_tags`
-  - Requires `parameters`: `{ "add_tags": [LIST_OF_TAG_IDS] }` and / or `{ "remove_tags": [LIST_OF_TAG_IDS] }`
-- `delete`
-  - No `parameters` required
-- `reprocess`
-  - No `parameters` required
-- `set_permissions`
-  - Requires `parameters`:
-    - `"set_permissions": PERMISSIONS_OBJ` (see format [above](#permissions)) and / or
-    - `"owner": OWNER_ID or null`
-    - `"merge": true or false` (defaults to false)
-  - The `merge` flag determines if the supplied permissions will overwrite all existing permissions (including
-    removing them) or be merged with existing permissions.
-- `merge`
-  - No additional `parameters` required.
-  - The ordering of the merged document is determined by the list of IDs.
-  - Optional `parameters`:
-    - `"metadata_document_id": DOC_ID` apply metadata (tags, correspondent, etc.) from this document to the merged document.
-    - `"delete_originals": true` to delete the original documents. This requires the calling user being the owner of
-      all documents that are merged.
-- `split`
-  - Requires `parameters`:
-    - `"pages": [..]` The list should be a list of pages and/or a ranges, separated by commas e.g. `"[1,2-3,4,5-7]"`
-  - Optional `parameters`:
-    - `"delete_originals": true` to delete the original document after consumption. This requires the calling user being the owner of
-      the document.
-  - The split operation only accepts a single document.
-- `rotate`
-  - Requires `parameters`:
-    - `"degrees": DEGREES`. Must be an integer i.e. 90, 180, 270
-- `delete_pages`
-  - 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.
+-   `set_correspondent`
+    -   Requires `parameters`: `{ "correspondent": CORRESPONDENT_ID }`
+-   `set_document_type`
+    -   Requires `parameters`: `{ "document_type": DOCUMENT_TYPE_ID }`
+-   `set_storage_path`
+    -   Requires `parameters`: `{ "storage_path": STORAGE_PATH_ID }`
+-   `add_tag`
+    -   Requires `parameters`: `{ "tag": TAG_ID }`
+-   `remove_tag`
+    -   Requires `parameters`: `{ "tag": TAG_ID }`
+-   `modify_tags`
+    -   Requires `parameters`: `{ "add_tags": [LIST_OF_TAG_IDS] }` and / or `{ "remove_tags": [LIST_OF_TAG_IDS] }`
+-   `delete`
+    -   No `parameters` required
+-   `reprocess`
+    -   No `parameters` required
+-   `set_permissions`
+    -   Requires `parameters`:
+        -   `"set_permissions": PERMISSIONS_OBJ` (see format [above](#permissions)) and / or
+        -   `"owner": OWNER_ID or null`
+        -   `"merge": true or false` (defaults to false)
+    -   The `merge` flag determines if the supplied permissions will overwrite all existing permissions (including
+        removing them) or be merged with existing permissions.
+-   `merge`
+    -   No additional `parameters` required.
+    -   The ordering of the merged document is determined by the list of IDs.
+    -   Optional `parameters`:
+        -   `"metadata_document_id": DOC_ID` apply metadata (tags, correspondent, etc.) from this document to the merged document.
+        -   `"delete_originals": true` to delete the original documents. This requires the calling user being the owner of
+            all documents that are merged.
+-   `split`
+    -   Requires `parameters`:
+        -   `"pages": [..]` The list should be a list of pages and/or a ranges, separated by commas e.g. `"[1,2-3,4,5-7]"`
+    -   Optional `parameters`:
+        -   `"delete_originals": true` to delete the original document after consumption. This requires the calling user being the owner of
+            the document.
+    -   The split operation only accepts a single document.
+-   `rotate`
+    -   Requires `parameters`:
+        -   `"degrees": DEGREES`. Must be an integer i.e. 90, 180, 270
+-   `delete_pages`
+    -   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
 
@@ -494,16 +499,16 @@ operations, using the endpoint: `/api/bulk_edit_objects/`, which requires a json
 
 The REST API is versioned since Paperless-ngx 1.3.0.
 
-- Versioning ensures that changes to the API don't break older
-  clients.
-- Clients specify the specific version of the API they wish to use
-  with every request and Paperless will handle the request using the
-  specified API version.
-- Even if the underlying data model changes, older API versions will
-  always serve compatible data.
-- If no version is specified, Paperless will serve version 1 to ensure
-  compatibility with older clients that do not request a specific API
-  version.
+-   Versioning ensures that changes to the API don't break older
+    clients.
+-   Clients specify the specific version of the API they wish to use
+    with every request and Paperless will handle the request using the
+    specified API version.
+-   Even if the underlying data model changes, older API versions will
+    always serve compatible data.
+-   If no version is specified, Paperless will serve version 1 to ensure
+    compatibility with older clients that do not request a specific API
+    version.
 
 API versions are specified by submitting an additional HTTP `Accept`
 header with every request:
@@ -540,19 +545,27 @@ Initial API version.
 
 #### Version 2
 
-- Added field `Tag.color`. This read/write string field contains a hex
-  color such as `#a6cee3`.
-- Added read-only field `Tag.text_color`. This field contains the text
-  color to use for a specific tag, which is either black or white
-  depending on the brightness of `Tag.color`.
-- Removed field `Tag.colour`.
+-   Added field `Tag.color`. This read/write string field contains a hex
+    color such as `#a6cee3`.
+-   Added read-only field `Tag.text_color`. This field contains the text
+    color to use for a specific tag, which is either black or white
+    depending on the brightness of `Tag.color`.
+-   Removed field `Tag.colour`.
 
 #### Version 3
 
-- Permissions endpoints have been added.
-- The format of the `/api/ui_settings/` has changed.
+-   Permissions endpoints have been added.
+-   The format of the `/api/ui_settings/` has changed.
 
 #### Version 4
 
-- Consumption templates were refactored to workflows and API endpoints
-  changed as such.
+-   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/assets/extra.css

@@ -10,7 +10,7 @@
     --md-hue: 222;
 }
 
-@media (min-width: 400px) {
+@media (min-width: 768px) {
     .grid-left {
         width: 33%;
         float: left;

docs/configuration.md

@@ -8,17 +8,17 @@ common [OCR](#ocr) related settings and some frontend settings. If set, these wi
 preference over the settings via environment variables. If not set, the environment setting
 or applicable default will be utilized instead.
 
-- If you run paperless on docker, `paperless.conf` is not used.
-  Rather, configure paperless by copying necessary options to
-  `docker-compose.env`.
+-   If you run paperless on docker, `paperless.conf` is not used.
+    Rather, configure paperless by copying necessary options to
+    `docker-compose.env`.
 
-- If you are running paperless on anything else, paperless will search
-  for the configuration file in these locations and use the first one
-  it finds:
-  - The environment variable `PAPERLESS_CONFIGURATION_PATH`
-  - `/path/to/paperless/paperless.conf`
-  - `/etc/paperless.conf`
-  - `/usr/local/etc/paperless.conf`
+-   If you are running paperless on anything else, paperless will search
+    for the configuration file in these locations and use the first one
+    it finds:
+    -   The environment variable `PAPERLESS_CONFIGURATION_PATH`
+    -   `/path/to/paperless/paperless.conf`
+    -   `/etc/paperless.conf`
+    -   `/usr/local/etc/paperless.conf`
 
 ## Required services
 
@@ -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/development.md

@@ -6,23 +6,23 @@ on Paperless-ngx.
 Check out the source from GitHub. The repository is organized in the
 following way:
 
-- `main` always represents the latest release and will only see
-  changes when a new release is made.
-- `dev` contains the code that will be in the next release.
-- `feature-X` contains bigger changes that will be in some release, but
-  not necessarily the next one.
+-   `main` always represents the latest release and will only see
+    changes when a new release is made.
+-   `dev` contains the code that will be in the next release.
+-   `feature-X` contains bigger changes that will be in some release, but
+    not necessarily the next one.
 
 When making functional changes to Paperless-ngx, _always_ make your changes
 on the `dev` branch.
 
 Apart from that, the folder structure is as follows:
 
-- `docs/` - Documentation.
-- `src-ui/` - Code of the front end.
-- `src/` - Code of the back end.
-- `scripts/` - Various scripts that help with different parts of
-  development.
-- `docker/` - Files required to build the docker image.
+-   `docs/` - Documentation.
+-   `src-ui/` - Code of the front end.
+-   `src/` - Code of the back end.
+-   `scripts/` - Various scripts that help with different parts of
+    development.
+-   `docker/` - Files required to build the docker image.
 
 ## Contributing to Paperless-ngx
 
@@ -99,17 +99,17 @@ first-time setup.
 
 7.  You can now either ...
 
-    - install redis or
+    -   install redis or
 
-    - use the included `scripts/start_services.sh` to use docker to fire
-      up a redis instance (and some other services such as tika,
-      gotenberg and a database server) or
+    -   use the included `scripts/start_services.sh` to use docker to fire
+        up a redis instance (and some other services such as tika,
+        gotenberg and a database server) or
 
-    - spin up a bare redis container
+    -   spin up a bare redis container
 
-      ```
-      $ docker run -d -p 6379:6379 --restart unless-stopped redis:latest
-      ```
+        ```
+        $ docker run -d -p 6379:6379 --restart unless-stopped redis:latest
+        ```
 
 8.  Continue with either back-end or front-end development – or both :-).
 
@@ -122,9 +122,9 @@ work well for development, but you can use whatever you want.
 Configure the IDE to use the `src/`-folder as the base source folder.
 Configure the following launch configurations in your IDE:
 
-- `python3 manage.py runserver`
-- `python3 manage.py document_consumer`
-- `celery --app paperless worker -l DEBUG` (or any other log level)
+-   `python3 manage.py runserver`
+-   `python3 manage.py document_consumer`
+-   `celery --app paperless worker -l DEBUG` (or any other log level)
 
 To start them all:
 
@@ -150,11 +150,11 @@ $ ng build --configuration production
 
 ### Testing
 
-- Run `pytest` in the `src/` directory to execute all tests. This also
-  generates a HTML coverage report. When runnings test, `paperless.conf`
-  is loaded as well. However, the tests rely on the default
-  configuration. This is not ideal. But for now, make sure no settings
-  except for DEBUG are overridden when testing.
+-   Run `pytest` in the `src/` directory to execute all tests. This also
+    generates a HTML coverage report. When runnings test, `paperless.conf`
+    is loaded as well. However, the tests rely on the default
+    configuration. This is not ideal. But for now, make sure no settings
+    except for DEBUG are overridden when testing.
 
 !!! note
 
@@ -245,14 +245,14 @@ these parts have to be translated separately.
 
 ### Front end localization
 
-- The AngularJS front end does localization according to the [Angular
-  documentation](https://angular.io/guide/i18n).
-- The source language of the project is "en_US".
-- The source strings end up in the file `src-ui/messages.xlf`.
-- The translated strings need to be placed in the
-  `src-ui/src/locale/` folder.
-- In order to extract added or changed strings from the source files,
-  call `ng extract-i18n`.
+-   The AngularJS front end does localization according to the [Angular
+    documentation](https://angular.io/guide/i18n).
+-   The source language of the project is "en_US".
+-   The source strings end up in the file `src-ui/messages.xlf`.
+-   The translated strings need to be placed in the
+    `src-ui/src/locale/` folder.
+-   In order to extract added or changed strings from the source files,
+    call `ng extract-i18n`.
 
 Adding new languages requires adding the translated files in the
 `src-ui/src/locale/` folder and adjusting a couple files.
@@ -298,18 +298,18 @@ A majority of the strings that appear in the back end appear only when
 the admin is used. However, some of these are still shown on the front
 end (such as error messages).
 
-- The django application does localization according to the [Django
-  documentation](https://docs.djangoproject.com/en/3.1/topics/i18n/translation/).
-- The source language of the project is "en_US".
-- Localization files end up in the folder `src/locale/`.
-- In order to extract strings from the application, call
-  `python3 manage.py makemessages -l en_US`. This is important after
-  making changes to translatable strings.
-- The message files need to be compiled for them to show up in the
-  application. Call `python3 manage.py compilemessages` to do this.
-  The generated files don't get committed into git, since these are
-  derived artifacts. The build pipeline takes care of executing this
-  command.
+-   The django application does localization according to the [Django
+    documentation](https://docs.djangoproject.com/en/3.1/topics/i18n/translation/).
+-   The source language of the project is "en_US".
+-   Localization files end up in the folder `src/locale/`.
+-   In order to extract strings from the application, call
+    `python3 manage.py makemessages -l en_US`. This is important after
+    making changes to translatable strings.
+-   The message files need to be compiled for them to show up in the
+    application. Call `python3 manage.py compilemessages` to do this.
+    The generated files don't get committed into git, since these are
+    derived artifacts. The build pipeline takes care of executing this
+    command.
 
 Adding new languages requires adding the translated files in the
 `src/locale/`-folder and adjusting the file
@@ -378,10 +378,10 @@ base code.
 Paperless-ngx uses parsers to add documents. A parser is
 responsible for:
 
-- Retrieving the content from the original
-- Creating a thumbnail
-- _optional:_ Retrieving a created date from the original
-- _optional:_ Creating an archived document from the original
+-   Retrieving the content from the original
+-   Creating a thumbnail
+-   _optional:_ Retrieving a created date from the original
+-   _optional:_ Creating an archived document from the original
 
 Custom parsers can be added to Paperless-ngx to support more file types. In
 order to do that, you need to write the parser itself and announce its
@@ -439,14 +439,14 @@ def myparser_consumer_declaration(sender, **kwargs):
     }
 ```
 
-- `parser` is a reference to a class that extends `DocumentParser`.
-- `weight` is used whenever two or more parsers are able to parse a
-  file: The parser with the higher weight wins. This can be used to
-  override the parsers provided by Paperless-ngx.
-- `mime_types` is a dictionary. The keys are the mime types your
-  parser supports and the value is the default file extension that
-  Paperless-ngx should use when storing files and serving them for
-  download. We could guess that from the file extensions, but some
-  mime types have many extensions associated with them and the Python
-  methods responsible for guessing the extension do not always return
-  the same value.
+-   `parser` is a reference to a class that extends `DocumentParser`.
+-   `weight` is used whenever two or more parsers are able to parse a
+    file: The parser with the higher weight wins. This can be used to
+    override the parsers provided by Paperless-ngx.
+-   `mime_types` is a dictionary. The keys are the mime types your
+    parser supports and the value is the default file extension that
+    Paperless-ngx should use when storing files and serving them for
+    download. We could guess that from the file extensions, but some
+    mime types have many extensions associated with them and the Python
+    methods responsible for guessing the extension do not always return
+    the same value.

docs/faq.md

@@ -40,28 +40,28 @@ system. On Linux, chances are high that this location is
 You can always drag those files out of that folder to use them
 elsewhere. Here are a couple notes about that.
 
-- Paperless-ngx never modifies your original documents. It keeps
-  checksums of all documents and uses a scheduled sanity checker to
-  check that they remain the same.
-- By default, paperless uses the internal ID of each document as its
-  filename. This might not be very convenient for export. However, you
-  can adjust the way files are stored in paperless by
-  [configuring the filename format](advanced_usage.md#file-name-handling).
-- [The exporter](administration.md#exporter) is
-  another easy way to get your files out of paperless with reasonable
-  file names.
+-   Paperless-ngx never modifies your original documents. It keeps
+    checksums of all documents and uses a scheduled sanity checker to
+    check that they remain the same.
+-   By default, paperless uses the internal ID of each document as its
+    filename. This might not be very convenient for export. However, you
+    can adjust the way files are stored in paperless by
+    [configuring the filename format](advanced_usage.md#file-name-handling).
+-   [The exporter](administration.md#exporter) is
+    another easy way to get your files out of paperless with reasonable
+    file names.
 
 ## _What file types does paperless-ngx support?_
 
 **A:** Currently, the following files are supported:
 
-- PDF documents, PNG images, JPEG images, TIFF images, GIF images and
-  WebP images are processed with OCR and converted into PDF documents.
-- Plain text documents are supported as well and are added verbatim to
-  paperless.
-- With the optional Tika integration enabled (see [Tika configuration](https://docs.paperless-ngx.com/configuration#tika)),
-  Paperless also supports various Office documents (.docx, .doc, odt,
-  .ppt, .pptx, .odp, .xls, .xlsx, .ods).
+-   PDF documents, PNG images, JPEG images, TIFF images, GIF images and
+    WebP images are processed with OCR and converted into PDF documents.
+-   Plain text documents are supported as well and are added verbatim to
+    paperless.
+-   With the optional Tika integration enabled (see [Tika configuration](https://docs.paperless-ngx.com/configuration#tika)),
+    Paperless also supports various Office documents (.docx, .doc, odt,
+    .ppt, .pptx, .odp, .xls, .xlsx, .ods).
 
 Paperless-ngx determines the type of a file by inspecting its content.
 The file extensions do not matter.
@@ -127,11 +127,11 @@ ASGI-enabled web server as well that processes WebSocket connections,
 and configure Apache to redirect WebSocket connections to this server.
 Multiple options for ASGI servers exist:
 
-- `gunicorn` with `uvicorn` as the worker implementation (the default
-  of paperless)
-- `daphne` as a standalone server, which is the reference
-  implementation for ASGI.
-- `uvicorn` as a standalone server
+-   `gunicorn` with `uvicorn` as the worker implementation (the default
+    of paperless)
+-   `daphne` as a standalone server, which is the reference
+    implementation for ASGI.
+-   `uvicorn` as a standalone server
 
 ## _What about the Redis licensing change and using one of the open source forks_?
 

docs/setup.md

@@ -2,11 +2,11 @@
 
 You can go multiple routes to setup and run Paperless:
 
-- [Use the easy install docker script](#docker_script)
-- [Pull the image from Docker Hub](#docker_hub)
-- [Build the Docker image yourself](#docker_build)
-- [Install Paperless directly on your system manually (bare metal)](#bare_metal)
-- A user-maintained list of commercial hosting providers can be found [in the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Related-Projects)
+-   [Use the easy install docker script](#docker_script)
+-   [Pull the image from Docker Hub](#docker_hub)
+-   [Build the Docker image yourself](#docker_build)
+-   [Install Paperless directly on your system manually (bare metal)](#bare_metal)
+-   A user-maintained list of commercial hosting providers can be found [in the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Related-Projects)
 
 The Docker routes are quick & easy. These are the recommended routes.
 This configures all the stuff from the above automatically so that it
@@ -105,14 +105,14 @@ steps described in [Docker setup](#docker_hub) automatically.
 
     ```yaml
     ports:
-      - 8000:8000
+        - 8000:8000
     ```
 
     Replace the part BEFORE the colon with a port of your choice:
 
     ```yaml
     ports:
-      - 8010:8000
+        - 8010:8000
     ```
 
     Don't change the part after the colon or edit other lines that
@@ -129,11 +129,11 @@ steps described in [Docker setup](#docker_hub) automatically.
     If you want to run Paperless as a rootless container, you will need
     to do the following in your `docker-compose.yml`:
 
-    - set the `user` running the container to map to the `paperless`
-      user in the container. This value (`user_id` below), should be
-      the same id that `USERMAP_UID` and `USERMAP_GID` are set to in
-      the next step. See `USERMAP_UID` and `USERMAP_GID`
-      [here](configuration.md#docker).
+    -   set the `user` running the container to map to the `paperless`
+        user in the container. This value (`user_id` below), should be
+        the same id that `USERMAP_UID` and `USERMAP_GID` are set to in
+        the next step. See `USERMAP_UID` and `USERMAP_GID`
+        [here](configuration.md#docker).
 
     Your entry for Paperless should contain something like:
 
@@ -222,7 +222,7 @@ steps described in [Docker setup](#docker_hub) automatically.
 
     ```yaml
     webserver:
-      image: ghcr.io/paperless-ngx/paperless-ngx:latest
+        image: ghcr.io/paperless-ngx/paperless-ngx:latest
     ```
 
     and replace it with a line that instructs Docker Compose to build
@@ -230,8 +230,8 @@ steps described in [Docker setup](#docker_hub) automatically.
 
     ```yaml
     webserver:
-      build:
-        context: .
+        build:
+            context: .
     ```
 
 4.  Follow steps 3 to 8 of [Docker Setup](#docker_hub). When asked to run
@@ -257,20 +257,20 @@ are released, dependency support is confirmed, etc.
 
 1.  Install dependencies. Paperless requires the following packages.
 
-    - `python3`
-    - `python3-pip`
-    - `python3-dev`
-    - `default-libmysqlclient-dev` for MariaDB
-    - `pkg-config` for mysqlclient (python dependency)
-    - `fonts-liberation` for generating thumbnails for plain text
-      files
-    - `imagemagick` >= 6 for PDF conversion
-    - `gnupg` for handling encrypted documents
-    - `libpq-dev` for PostgreSQL
-    - `libmagic-dev` for mime type detection
-    - `mariadb-client` for MariaDB compile time
-    - `libzbar0` for barcode detection
-    - `poppler-utils` for barcode detection
+    -   `python3`
+    -   `python3-pip`
+    -   `python3-dev`
+    -   `default-libmysqlclient-dev` for MariaDB
+    -   `pkg-config` for mysqlclient (python dependency)
+    -   `fonts-liberation` for generating thumbnails for plain text
+        files
+    -   `imagemagick` >= 6 for PDF conversion
+    -   `gnupg` for handling encrypted documents
+    -   `libpq-dev` for PostgreSQL
+    -   `libmagic-dev` for mime type detection
+    -   `mariadb-client` for MariaDB compile time
+    -   `libzbar0` for barcode detection
+    -   `poppler-utils` for barcode detection
 
     Use this list for your preferred package management:
 
@@ -281,17 +281,17 @@ are released, dependency support is confirmed, etc.
     These dependencies are required for OCRmyPDF, which is used for text
     recognition.
 
-    - `unpaper`
-    - `ghostscript`
-    - `icc-profiles-free`
-    - `qpdf`
-    - `liblept5`
-    - `libxml2`
-    - `pngquant` (suggested for certain PDF image optimizations)
-    - `zlib1g`
-    - `tesseract-ocr` >= 4.0.0 for OCR
-    - `tesseract-ocr` language packs (`tesseract-ocr-eng`,
-      `tesseract-ocr-deu`, etc)
+    -   `unpaper`
+    -   `ghostscript`
+    -   `icc-profiles-free`
+    -   `qpdf`
+    -   `liblept5`
+    -   `libxml2`
+    -   `pngquant` (suggested for certain PDF image optimizations)
+    -   `zlib1g`
+    -   `tesseract-ocr` >= 4.0.0 for OCR
+    -   `tesseract-ocr` language packs (`tesseract-ocr-eng`,
+        `tesseract-ocr-deu`, etc)
 
     Use this list for your preferred package management:
 
@@ -301,15 +301,15 @@ are released, dependency support is confirmed, etc.
 
     On Raspberry Pi, these libraries are required as well:
 
-    - `libatlas-base-dev`
-    - `libxslt1-dev`
-    - `mime-support`
+    -   `libatlas-base-dev`
+    -   `libxslt1-dev`
+    -   `mime-support`
 
     You will also need these for installing some of the python dependencies:
 
-    - `build-essential`
-    - `python3-setuptools`
-    - `python3-wheel`
+    -   `build-essential`
+    -   `python3-setuptools`
+    -   `python3-wheel`
 
     Use this list for your preferred package management:
 
@@ -361,33 +361,33 @@ are released, dependency support is confirmed, etc.
     needs. Required settings for getting
     paperless running are:
 
-    - [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) should point to your redis server, such as
-      <redis://localhost:6379>.
-    - [`PAPERLESS_DBENGINE`](configuration.md#PAPERLESS_DBENGINE) optional, and should be one of `postgres`,
-      `mariadb`, or `sqlite`
-    - [`PAPERLESS_DBHOST`](configuration.md#PAPERLESS_DBHOST) should be the hostname on which your
-      PostgreSQL server is running. Do not configure this to use
-      SQLite instead. Also configure port, database name, user and
-      password as necessary.
-    - [`PAPERLESS_CONSUMPTION_DIR`](configuration.md#PAPERLESS_CONSUMPTION_DIR) should point to a folder which
-      paperless should watch for documents. You might want to have
-      this somewhere else. Likewise, [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) and
-      [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) define where paperless stores its data.
-      If you like, you can point both to the same directory.
-    - [`PAPERLESS_SECRET_KEY`](configuration.md#PAPERLESS_SECRET_KEY) should be a random sequence of
-      characters. It's used for authentication. Failure to do so
-      allows third parties to forge authentication credentials.
-    - [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) if you are behind a reverse proxy. This should
-      point to your domain. Please see
-      [configuration](configuration.md) for more
-      information.
+    -   [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) should point to your redis server, such as
+        <redis://localhost:6379>.
+    -   [`PAPERLESS_DBENGINE`](configuration.md#PAPERLESS_DBENGINE) optional, and should be one of `postgres`,
+        `mariadb`, or `sqlite`
+    -   [`PAPERLESS_DBHOST`](configuration.md#PAPERLESS_DBHOST) should be the hostname on which your
+        PostgreSQL server is running. Do not configure this to use
+        SQLite instead. Also configure port, database name, user and
+        password as necessary.
+    -   [`PAPERLESS_CONSUMPTION_DIR`](configuration.md#PAPERLESS_CONSUMPTION_DIR) should point to a folder which
+        paperless should watch for documents. You might want to have
+        this somewhere else. Likewise, [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) and
+        [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) define where paperless stores its data.
+        If you like, you can point both to the same directory.
+    -   [`PAPERLESS_SECRET_KEY`](configuration.md#PAPERLESS_SECRET_KEY) should be a random sequence of
+        characters. It's used for authentication. Failure to do so
+        allows third parties to forge authentication credentials.
+    -   [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) if you are behind a reverse proxy. This should
+        point to your domain. Please see
+        [configuration](configuration.md) for more
+        information.
 
     Many more adjustments can be made to paperless, especially the OCR
     part. The following options are recommended for everyone:
 
-    - Set [`PAPERLESS_OCR_LANGUAGE`](configuration.md#PAPERLESS_OCR_LANGUAGE) to the language most of your
-      documents are written in.
-    - Set [`PAPERLESS_TIME_ZONE`](configuration.md#PAPERLESS_TIME_ZONE) to your local time zone.
+    -   Set [`PAPERLESS_OCR_LANGUAGE`](configuration.md#PAPERLESS_OCR_LANGUAGE) to the language most of your
+        documents are written in.
+    -   Set [`PAPERLESS_TIME_ZONE`](configuration.md#PAPERLESS_TIME_ZONE) to your local time zone.
 
     !!! warning
 
@@ -395,9 +395,9 @@ are released, dependency support is confirmed, etc.
 
 7.  Create the following directories if they are missing:
 
-    - `/opt/paperless/media`
-    - `/opt/paperless/data`
-    - `/opt/paperless/consume`
+    -   `/opt/paperless/media`
+    -   `/opt/paperless/data`
+    -   `/opt/paperless/consume`
 
     Adjust as necessary if you configured different folders.
     Ensure that the paperless user has write permissions for every one
@@ -586,21 +586,21 @@ your setup depending on how you installed paperless.
 This setup describes how to update an existing paperless Docker
 installation. The important things to keep in mind are as follows:
 
-- Read the [changelog](changelog.md) and
-  take note of breaking changes.
-- You should decide if you want to stick with SQLite or want to
-  migrate your database to PostgreSQL. See [documentation](#sqlite_to_psql)
-  for details on
-  how to move your data from SQLite to PostgreSQL. Both work fine with
-  paperless. However, if you already have a database server running
-  for other services, you might as well use it for paperless as well.
-- The task scheduler of paperless, which is used to execute periodic
-  tasks such as email checking and maintenance, requires a
-  [redis](https://redis.io/) message broker instance. The
-  Docker Compose route takes care of that.
-- The layout of the folder structure for your documents and data
-  remains the same, so you can just plug your old docker volumes into
-  paperless-ngx and expect it to find everything where it should be.
+-   Read the [changelog](changelog.md) and
+    take note of breaking changes.
+-   You should decide if you want to stick with SQLite or want to
+    migrate your database to PostgreSQL. See [documentation](#sqlite_to_psql)
+    for details on
+    how to move your data from SQLite to PostgreSQL. Both work fine with
+    paperless. However, if you already have a database server running
+    for other services, you might as well use it for paperless as well.
+-   The task scheduler of paperless, which is used to execute periodic
+    tasks such as email checking and maintenance, requires a
+    [redis](https://redis.io/) message broker instance. The
+    Docker Compose route takes care of that.
+-   The layout of the folder structure for your documents and data
+    remains the same, so you can just plug your old docker volumes into
+    paperless-ngx and expect it to find everything where it should be.
 
 Migration to paperless-ngx is then performed in a few simple steps:
 
@@ -763,30 +763,30 @@ Paperless runs on Raspberry Pi. However, some things are rather slow on
 the Pi and configuring some options in paperless can help improve
 performance immensely:
 
-- Stick with SQLite to save some resources.
-- Consider setting [`PAPERLESS_OCR_PAGES`](configuration.md#PAPERLESS_OCR_PAGES) to 1, so that paperless will
-  only OCR the first page of your documents. In most cases, this page
-  contains enough information to be able to find it.
-- [`PAPERLESS_TASK_WORKERS`](configuration.md#PAPERLESS_TASK_WORKERS) and [`PAPERLESS_THREADS_PER_WORKER`](configuration.md#PAPERLESS_THREADS_PER_WORKER) are
-  configured to use all cores. The Raspberry Pi models 3 and up have 4
-  cores, meaning that paperless will use 2 workers and 2 threads per
-  worker. This may result in sluggish response times during
-  consumption, so you might want to lower these settings (example: 2
-  workers and 1 thread to always have some computing power left for
-  other tasks).
-- Keep [`PAPERLESS_OCR_MODE`](configuration.md#PAPERLESS_OCR_MODE) at its default value `skip` and consider
-  OCR'ing your documents before feeding them into paperless. Some
-  scanners are able to do this!
-- Set [`PAPERLESS_OCR_SKIP_ARCHIVE_FILE`](configuration.md#PAPERLESS_OCR_SKIP_ARCHIVE_FILE) to `with_text` to skip archive
-  file generation for already ocr'ed documents, or `always` to skip it
-  for all documents.
-- If you want to perform OCR on the device, consider using
-  `PAPERLESS_OCR_CLEAN=none`. This will speed up OCR times and use
-  less memory at the expense of slightly worse OCR results.
-- If using docker, consider setting [`PAPERLESS_WEBSERVER_WORKERS`](configuration.md#PAPERLESS_WEBSERVER_WORKERS) to 1. This will save some memory.
-- Consider setting [`PAPERLESS_ENABLE_NLTK`](configuration.md#PAPERLESS_ENABLE_NLTK) to false, to disable the
-  more advanced language processing, which can take more memory and
-  processing time.
+-   Stick with SQLite to save some resources.
+-   Consider setting [`PAPERLESS_OCR_PAGES`](configuration.md#PAPERLESS_OCR_PAGES) to 1, so that paperless will
+    only OCR the first page of your documents. In most cases, this page
+    contains enough information to be able to find it.
+-   [`PAPERLESS_TASK_WORKERS`](configuration.md#PAPERLESS_TASK_WORKERS) and [`PAPERLESS_THREADS_PER_WORKER`](configuration.md#PAPERLESS_THREADS_PER_WORKER) are
+    configured to use all cores. The Raspberry Pi models 3 and up have 4
+    cores, meaning that paperless will use 2 workers and 2 threads per
+    worker. This may result in sluggish response times during
+    consumption, so you might want to lower these settings (example: 2
+    workers and 1 thread to always have some computing power left for
+    other tasks).
+-   Keep [`PAPERLESS_OCR_MODE`](configuration.md#PAPERLESS_OCR_MODE) at its default value `skip` and consider
+    OCR'ing your documents before feeding them into paperless. Some
+    scanners are able to do this!
+-   Set [`PAPERLESS_OCR_SKIP_ARCHIVE_FILE`](configuration.md#PAPERLESS_OCR_SKIP_ARCHIVE_FILE) to `with_text` to skip archive
+    file generation for already ocr'ed documents, or `always` to skip it
+    for all documents.
+-   If you want to perform OCR on the device, consider using
+    `PAPERLESS_OCR_CLEAN=none`. This will speed up OCR times and use
+    less memory at the expense of slightly worse OCR results.
+-   If using docker, consider setting [`PAPERLESS_WEBSERVER_WORKERS`](configuration.md#PAPERLESS_WEBSERVER_WORKERS) to 1. This will save some memory.
+-   Consider setting [`PAPERLESS_ENABLE_NLTK`](configuration.md#PAPERLESS_ENABLE_NLTK) to false, to disable the
+    more advanced language processing, which can take more memory and
+    processing time.
 
 For details, refer to [configuration](configuration.md).
 

docs/troubleshooting.md

@@ -4,27 +4,27 @@
 
 Check for the following issues:
 
-- Ensure that the directory you're putting your documents in is the
-  folder paperless is watching. With docker, this setting is performed
-  in the `docker-compose.yml` file. Without Docker, look at the
-  `CONSUMPTION_DIR` setting. Don't adjust this setting if you're
-  using docker.
+-   Ensure that the directory you're putting your documents in is the
+    folder paperless is watching. With docker, this setting is performed
+    in the `docker-compose.yml` file. Without Docker, look at the
+    `CONSUMPTION_DIR` setting. Don't adjust this setting if you're
+    using docker.
 
-- Ensure that redis is up and running. Paperless does its task
-  processing asynchronously, and for documents to arrive at the task
-  processor, it needs redis to run.
+-   Ensure that redis is up and running. Paperless does its task
+    processing asynchronously, and for documents to arrive at the task
+    processor, it needs redis to run.
 
-- Ensure that the task processor is running. Docker does this
-  automatically. Manually invoke the task processor by executing
+-   Ensure that the task processor is running. Docker does this
+    automatically. Manually invoke the task processor by executing
 
-  ```shell-session
-  $ celery --app paperless worker
-  ```
+    ```shell-session
+    $ celery --app paperless worker
+    ```
 
-- Look at the output of paperless and inspect it for any errors.
+-   Look at the output of paperless and inspect it for any errors.
 
-- Go to the admin interface, and check if there are failed tasks. If
-  so, the tasks will contain an error message.
+-   Go to the admin interface, and check if there are failed tasks. If
+    so, the tasks will contain an error message.
 
 ## Consumer warns `OCR for XX failed`
 
@@ -78,12 +78,12 @@ Ensure that `chown` is possible on these directories.
 This indicates that the Auto matching algorithm found no documents to
 learn from. This may have two reasons:
 
-- You don't use the Auto matching algorithm: The error can be safely
-  ignored in this case.
-- You are using the Auto matching algorithm: The classifier explicitly
-  excludes documents with Inbox tags. Verify that there are documents
-  in your archive without inbox tags. The algorithm will only learn
-  from documents not in your inbox.
+-   You don't use the Auto matching algorithm: The error can be safely
+    ignored in this case.
+-   You are using the Auto matching algorithm: The classifier explicitly
+    excludes documents with Inbox tags. Verify that there are documents
+    in your archive without inbox tags. The algorithm will only learn
+    from documents not in your inbox.
 
 ## UserWarning in sklearn on every single document
 
@@ -127,10 +127,10 @@ change in the `docker-compose.yml` file:
 # The gotenberg chromium route is used to convert .eml files. We do not
 # want to allow external content like tracking pixels or even javascript.
 command:
-  - 'gotenberg'
-  - '--chromium-disable-javascript=true'
-  - '--chromium-allow-list=file:///tmp/.*'
-  - '--api-timeout=60'
+    - 'gotenberg'
+    - '--chromium-disable-javascript=true'
+    - '--chromium-allow-list=file:///tmp/.*'
+    - '--api-timeout=60'
 ```
 
 ## Permission denied errors in the consumption directory
@@ -353,6 +353,20 @@ ways from the original. As the logs indicate, if you encounter this error you ca
 `PAPERLESS_OCR_USER_ARGS: '{"continue_on_soft_render_error": true}'` to try to 'force'
 processing documents with this issue.
 
+## Logs show "possible incompatible database column" when deleting documents {#convert-uuid-field}
+
+You may see errors when deleting documents like:
+
+```
+Data too long for column 'transaction_id' at row 1
+```
+
+This error can occur in installations which have upgraded from a version of Paperless-ngx that used Django 4 (Paperless-ngx versions prior to v2.13.0) with a MariaDB/MySQL database. Due to the backawards-incompatible change in Django 5, the column "documents_document.transaction_id" will need to be re-created, which can be done with a one-time run of the following management command:
+
+```shell-session
+$ python3 manage.py convert_mariadb_uuid
+```
+
 ## Platform-Specific Deployment Troubleshooting
 
 A user-maintained wiki page is available to help troubleshoot issues that may arise when trying to deploy Paperless-ngx on specific platforms, for example SELinux. Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Platform%E2%80%90Specific-Troubleshooting).

docs/usage.md

@@ -10,37 +10,37 @@ and provides many utilities for finding and managing your documents.
 Paperless essentially consists of two different parts for managing your
 documents:
 
-- The _consumer_ watches a specified folder and adds all documents in
-  that folder to paperless.
-- The _web server_ provides a UI that you use to manage and search for
-  your scanned documents.
+-   The _consumer_ watches a specified folder and adds all documents in
+    that folder to paperless.
+-   The _web server_ provides a UI that you use to manage and search for
+    your scanned documents.
 
 Each document has a couple of fields that you can assign to them:
 
-- A _Document_ is a piece of paper that sometimes contains valuable
-  information.
-- The _correspondent_ of a document is the person, institution or
-  company that a document either originates from, or is sent to.
-- A _tag_ is a label that you can assign to documents. Think of labels
-  as more powerful folders: Multiple documents can be grouped together
-  with a single tag, however, a single document can also have multiple
-  tags. This is not possible with folders. The reason folders are not
-  implemented in paperless is simply that tags are much more versatile
-  than folders.
-- A _document type_ is used to demarcate the type of a document such
-  as letter, bank statement, invoice, contract, etc. It is used to
-  identify what a document is about.
-- The _date added_ of a document is the date the document was scanned
-  into paperless. You cannot and should not change this date.
-- The _date created_ of a document is the date the document was
-  initially issued. This can be the date you bought a product, the
-  date you signed a contract, or the date a letter was sent to you.
-- The _archive serial number_ (short: ASN) of a document is the
-  identifier of the document in your physical document binders. See
-  [recommended workflow](#usage-recommended-workflow) below.
-- The _content_ of a document is the text that was OCR'ed from the
-  document. This text is fed into the search engine and is used for
-  matching tags, correspondents and document types.
+-   A _Document_ is a piece of paper that sometimes contains valuable
+    information.
+-   The _correspondent_ of a document is the person, institution or
+    company that a document either originates from, or is sent to.
+-   A _tag_ is a label that you can assign to documents. Think of labels
+    as more powerful folders: Multiple documents can be grouped together
+    with a single tag, however, a single document can also have multiple
+    tags. This is not possible with folders. The reason folders are not
+    implemented in paperless is simply that tags are much more versatile
+    than folders.
+-   A _document type_ is used to demarcate the type of a document such
+    as letter, bank statement, invoice, contract, etc. It is used to
+    identify what a document is about.
+-   The _date added_ of a document is the date the document was scanned
+    into paperless. You cannot and should not change this date.
+-   The _date created_ of a document is the date the document was
+    initially issued. This can be the date you bought a product, the
+    date you signed a contract, or the date a letter was sent to you.
+-   The _archive serial number_ (short: ASN) of a document is the
+    identifier of the document in your physical document binders. See
+    [recommended workflow](#usage-recommended-workflow) below.
+-   The _content_ of a document is the text that was OCR'ed from the
+    document. This text is fed into the search engine and is used for
+    matching tags, correspondents and document types.
 
 ## Adding documents to paperless
 
@@ -142,21 +142,21 @@ patterns can include wildcards and multiple patterns separated by a comma.
 The actions all ensure that the same mail is not consumed twice by
 different means. These are as follows:
 
-- **Delete:** Immediately deletes mail that paperless has consumed
-  documents from. Use with caution.
-- **Mark as read:** Mark consumed mail as read. Paperless will not
-  consume documents from already read mails. If you read a mail before
-  paperless sees it, it will be ignored.
-- **Flag:** Sets the 'important' flag on mails with consumed
-  documents. Paperless will not consume flagged mails.
-- **Move to folder:** Moves consumed mails out of the way so that
-  paperless won't consume them again.
-- **Add custom Tag:** Adds a custom tag to mails with consumed
-  documents (the IMAP standard calls these "keywords"). Paperless
-  will not consume mails already tagged. Not all mail servers support
-  this feature!
+-   **Delete:** Immediately deletes mail that paperless has consumed
+    documents from. Use with caution.
+-   **Mark as read:** Mark consumed mail as read. Paperless will not
+    consume documents from already read mails. If you read a mail before
+    paperless sees it, it will be ignored.
+-   **Flag:** Sets the 'important' flag on mails with consumed
+    documents. Paperless will not consume flagged mails.
+-   **Move to folder:** Moves consumed mails out of the way so that
+    paperless won't consume them again.
+-   **Add custom Tag:** Adds a custom tag to mails with consumed
+    documents (the IMAP standard calls these "keywords"). Paperless
+    will not consume mails already tagged. Not all mail servers support
+    this feature!
 
-  - **Apple Mail support:** Apple Mail clients allow differently colored tags. For this to work use `apple:<color>` (e.g. _apple:green_) as a custom tag. Available colors are _red_, _orange_, _yellow_, _blue_, _green_, _violet_ and _grey_.
+    -   **Apple Mail support:** Apple Mail clients allow differently colored tags. For this to work use `apple:<color>` (e.g. _apple:green_) as a custom tag. Available colors are _red_, _orange_, _yellow_, _blue_, _green_, _violet_ and _grey_.
 
 !!! warning
 
@@ -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
@@ -360,62 +370,88 @@ flowchart TD
 
 Workflows allow you to filter by:
 
-- Source, e.g. documents uploaded via consume folder, API (& the web UI) and mail fetch
-- File name, including wildcards e.g. \*.pdf will apply to all pdfs
-- File path, including wildcards. Note that enabling `PAPERLESS_CONSUMER_RECURSIVE` would allow, for
-  example, automatically assigning documents to different owners based on the upload directory.
-- Mail rule. Choosing this option will force 'mail fetch' to be the workflow source.
-- Content matching (`Added` and `Updated` triggers only). Filter document content using the matching settings.
-- Tags (`Added` and `Updated` triggers only). Filter for documents with any of the specified tags
-- Document type (`Added` and `Updated` triggers only). Filter documents with this doc type
-- Correspondent (`Added` and `Updated` triggers only). Filter documents with this correspondent
+-   Source, e.g. documents uploaded via consume folder, API (& the web UI) and mail fetch
+-   File name, including wildcards e.g. \*.pdf will apply to all pdfs
+-   File path, including wildcards. Note that enabling `PAPERLESS_CONSUMER_RECURSIVE` would allow, for
+    example, automatically assigning documents to different owners based on the upload directory.
+-   Mail rule. Choosing this option will force 'mail fetch' to be the workflow source.
+-   Content matching (`Added` and `Updated` triggers only). Filter document content using the matching settings.
+-   Tags (`Added` and `Updated` triggers only). Filter for documents with any of the specified tags
+-   Document type (`Added` and `Updated` triggers only). Filter documents with this doc type
+-   Correspondent (`Added` and `Updated` triggers only). Filter documents with this correspondent
 
 ### Workflow Actions
 
-There are currently two types of workflow actions, "Assignment", which can assign:
+#### Types
 
-- Title, see [title placeholders](usage.md#title-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
+The following workflow action types are available:
 
-and "Removal" actions, which can remove either all of or specific sets of the following:
+##### Assignment
 
-- Tags, correspondents, document types or storage paths
-- Document owner
-- View and / or edit permissions
-- Custom fields
+"Assignment" actions can assign:
 
-#### Title placeholders
+-   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
 
-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
+##### 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
+
+##### Email
+
+"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
-- `{document_type}`: assigned document type name
-- `{owner_username}`: assigned owner username
-- `{added}`: added datetime
-- `{added_year}`: added year
-- `{added_year_short}`: added year
-- `{added_month}`: added month
-- `{added_month_name}`: added month name
-- `{added_month_name_short}`: added month short name
-- `{added_day}`: added day
-- `{added_time}`: added time in HH:MM format
-- `{original_filename}`: original file name without extension
+-   `{correspondent}`: assigned correspondent name
+-   `{document_type}`: assigned document type name
+-   `{owner_username}`: assigned owner username
+-   `{added}`: added datetime
+-   `{added_year}`: added year
+-   `{added_year_short}`: added year
+-   `{added_month}`: added month
+-   `{added_month_name}`: added month name
+-   `{added_month_name_short}`: added month short name
+-   `{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
 
-- `{created}`: created datetime
-- `{created_year}`: created year
-- `{created_year_short}`: created year
-- `{created_month}`: created month
-- `{created_month_name}`: created month name
-- `{created_month_name_short}`: created month short name
-- `{created_day}`: created day
-- `{created_time}`: created time in HH:MM format
+-   `{created}`: created datetime
+-   `{created_year}`: created year
+-   `{created_year_short}`: created year
+-   `{created_month}`: created month
+-   `{created_month_name}`: created month name
+-   `{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
 
@@ -450,24 +486,24 @@ Multiple fields may be attached to a document but the same field name cannot be
 
 The following custom field types are supported:
 
-- `Text`: any text
-- `Boolean`: true / false (check / unchecked) field
-- `Date`: date
-- `URL`: a valid url
-- `Integer`: integer number e.g. 12
-- `Number`: float number e.g. 12.3456
-- `Monetary`: [ISO 4217 currency code](https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes) and a number with exactly two decimals, e.g. USD12.30
-- `Document Link`: reference(s) to other document(s) displayed as links, automatically creates a symmetrical link in reverse
-- `Select`: a pre-defined list of strings from which the user can choose
+-   `Text`: any text
+-   `Boolean`: true / false (check / unchecked) field
+-   `Date`: date
+-   `URL`: a valid url
+-   `Integer`: integer number e.g. 12
+-   `Number`: float number e.g. 12.3456
+-   `Monetary`: [ISO 4217 currency code](https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes) and a number with exactly two decimals, e.g. USD12.30
+-   `Document Link`: reference(s) to other document(s) displayed as links, automatically creates a symmetrical link in reverse
+-   `Select`: a pre-defined list of strings from which the user can choose
 
 ## Share Links
 
 Paperless-ngx added the ability to create shareable links to files in version 2.0. You can find the button for this on the document detail screen.
 
-- Share links do not require a user to login and thus link directly to a file.
-- Links are unique and are of the form `{paperless-url}/share/{randomly-generated-slug}`.
-- Links can optionally have an expiration time set.
-- After a link expires or is deleted users will be redirected to the regular paperless-ngx login.
+-   Share links do not require a user to login and thus link directly to a file.
+-   Links are unique and are of the form `{paperless-url}/share/{randomly-generated-slug}`.
+-   Links can optionally have an expiration time set.
+-   After a link expires or is deleted users will be redirected to the regular paperless-ngx login.
 
 !!! tip
 
@@ -477,10 +513,10 @@ Paperless-ngx added the ability to create shareable links to files in version 2.
 
 Paperless-ngx supports four basic editing operations for PDFs (these operations currently cannot be performed on non-PDF files):
 
-- Merging documents: available when selecting multiple documents for 'bulk editing'.
-- Rotating documents: available when selecting multiple documents for 'bulk editing' and from an individual document's details page.
-- Splitting documents: available from an individual document's details page.
-- Deleting pages: available from an individual document's details page.
+-   Merging documents: available when selecting multiple documents for 'bulk editing'.
+-   Rotating documents: available when selecting multiple documents for 'bulk editing' and from an individual document's details page.
+-   Splitting documents: available from an individual document's details page.
+-   Deleting pages: available from an individual document's details page.
 
 !!! important
 
@@ -558,18 +594,18 @@ the system.
 Here are a couple examples of tags and types that you could use in your
 collection.
 
-- An `inbox` tag for newly added documents that you haven't manually
-  edited yet.
-- A tag `car` for everything car related (repairs, registration,
-  insurance, etc)
-- A tag `todo` for documents that you still need to do something with,
-  such as reply, or perform some task online.
-- A tag `bank account x` for all bank statement related to that
-  account.
-- A tag `mail` for anything that you added to paperless via its mail
-  processing capabilities.
-- A tag `missing_metadata` when you still need to add some metadata to
-  a document, but can't or don't want to do this right now.
+-   An `inbox` tag for newly added documents that you haven't manually
+    edited yet.
+-   A tag `car` for everything car related (repairs, registration,
+    insurance, etc)
+-   A tag `todo` for documents that you still need to do something with,
+    such as reply, or perform some task online.
+-   A tag `bank account x` for all bank statement related to that
+    account.
+-   A tag `mail` for anything that you added to paperless via its mail
+    processing capabilities.
+-   A tag `missing_metadata` when you still need to add some metadata to
+    a document, but can't or don't want to do this right now.
 
 ## Searching {#basic-usage_searching}
 
@@ -658,8 +694,8 @@ The following diagram shows how easy it is to manage your documents.
 
 ### Preparations in paperless
 
-- Create an inbox tag that gets assigned to all new documents.
-- Create a TODO tag.
+-   Create an inbox tag that gets assigned to all new documents.
+-   Create a TODO tag.
 
 ### Processing of the physical documents
 
@@ -733,78 +769,78 @@ Some documents require attention and require you to act on the document.
 You may take two different approaches to handle these documents based on
 how regularly you intend to scan documents and use paperless.
 
-- If you scan and process your documents in paperless regularly,
-  assign a TODO tag to all scanned documents that you need to process.
-  Create a saved view on the dashboard that shows all documents with
-  this tag.
-- If you do not scan documents regularly and use paperless solely for
-  archiving, create a physical todo box next to your physical inbox
-  and put documents you need to process in the TODO box. When you
-  performed the task associated with the document, move it to the
-  inbox.
+-   If you scan and process your documents in paperless regularly,
+    assign a TODO tag to all scanned documents that you need to process.
+    Create a saved view on the dashboard that shows all documents with
+    this tag.
+-   If you do not scan documents regularly and use paperless solely for
+    archiving, create a physical todo box next to your physical inbox
+    and put documents you need to process in the TODO box. When you
+    performed the task associated with the document, move it to the
+    inbox.
 
 ## Architecture
 
 Paperless-ngx consists of the following components:
 
-- **The webserver:** This serves the administration pages, the API,
-  and the new frontend. This is the main tool you'll be using to interact
-  with paperless. You may start the webserver directly with
+-   **The webserver:** This serves the administration pages, the API,
+    and the new frontend. This is the main tool you'll be using to interact
+    with paperless. You may start the webserver directly with
 
-  ```shell-session
-  $ cd /path/to/paperless/src/
-  $ gunicorn -c ../gunicorn.conf.py paperless.wsgi
-  ```
+    ```shell-session
+    $ cd /path/to/paperless/src/
+    $ gunicorn -c ../gunicorn.conf.py paperless.wsgi
+    ```
 
-  or by any other means such as Apache `mod_wsgi`.
+    or by any other means such as Apache `mod_wsgi`.
 
-- **The consumer:** This is what watches your consumption folder for
-  documents. However, the consumer itself does not really consume your
-  documents. Now it notifies a task processor that a new file is ready
-  for consumption. I suppose it should be named differently. This was
-  also used to check your emails, but that's now done elsewhere as
-  well.
+-   **The consumer:** This is what watches your consumption folder for
+    documents. However, the consumer itself does not really consume your
+    documents. Now it notifies a task processor that a new file is ready
+    for consumption. I suppose it should be named differently. This was
+    also used to check your emails, but that's now done elsewhere as
+    well.
 
-  Start the consumer with the management command `document_consumer`:
+    Start the consumer with the management command `document_consumer`:
 
-  ```shell-session
-  $ cd /path/to/paperless/src/
-  $ python3 manage.py document_consumer
-  ```
+    ```shell-session
+    $ cd /path/to/paperless/src/
+    $ python3 manage.py document_consumer
+    ```
 
-- **The task processor:** Paperless relies on [Celery - Distributed
-  Task Queue](https://docs.celeryq.dev/en/stable/index.html) for doing
-  most of the heavy lifting. This is a task queue that accepts tasks
-  from multiple sources and processes these in parallel. It also comes
-  with a scheduler that executes certain commands periodically.
+-   **The task processor:** Paperless relies on [Celery - Distributed
+    Task Queue](https://docs.celeryq.dev/en/stable/index.html) for doing
+    most of the heavy lifting. This is a task queue that accepts tasks
+    from multiple sources and processes these in parallel. It also comes
+    with a scheduler that executes certain commands periodically.
 
-  This task processor is responsible for:
+    This task processor is responsible for:
 
-  - Consuming documents. When the consumer finds new documents, it
-    notifies the task processor to start a consumption task.
-  - The task processor also performs the consumption of any
-    documents you upload through the web interface.
-  - Consuming emails. It periodically checks your configured
-    accounts for new emails and notifies the task processor to
-    consume the attachment of an email.
-  - Maintaining the search index and the automatic matching
-    algorithm. These are things that paperless needs to do from time
-    to time in order to operate properly.
+    -   Consuming documents. When the consumer finds new documents, it
+        notifies the task processor to start a consumption task.
+    -   The task processor also performs the consumption of any
+        documents you upload through the web interface.
+    -   Consuming emails. It periodically checks your configured
+        accounts for new emails and notifies the task processor to
+        consume the attachment of an email.
+    -   Maintaining the search index and the automatic matching
+        algorithm. These are things that paperless needs to do from time
+        to time in order to operate properly.
 
-  This allows paperless to process multiple documents from your
-  consumption folder in parallel! On a modern multi core system, this
-  makes the consumption process with full OCR blazingly fast.
+    This allows paperless to process multiple documents from your
+    consumption folder in parallel! On a modern multi core system, this
+    makes the consumption process with full OCR blazingly fast.
 
-  The task processor comes with a built-in admin interface that you
-  can use to check whenever any of the tasks fail and inspect the
-  errors (i.e., wrong email credentials, errors during consuming a
-  specific file, etc).
+    The task processor comes with a built-in admin interface that you
+    can use to check whenever any of the tasks fail and inspect the
+    errors (i.e., wrong email credentials, errors during consuming a
+    specific file, etc).
 
-- A [redis](https://redis.io/) message broker: This is a really
-  lightweight service that is responsible for getting the tasks from
-  the webserver and the consumer to the task scheduler. These run in a
-  different process (maybe even on different machines!), and
-  therefore, this is necessary.
+-   A [redis](https://redis.io/) message broker: This is a really
+    lightweight service that is responsible for getting the tasks from
+    the webserver and the consumer to the task scheduler. These run in a
+    different process (maybe even on different machines!), and
+    therefore, this is necessary.
 
-- Optional: A database server. Paperless supports PostgreSQL, MariaDB
-  and SQLite for storing its data.
+-   Optional: A database server. Paperless supports PostgreSQL, MariaDB
+    and SQLite for storing its data.

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.json

@@ -11,60 +11,63 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^18.2.6",
-    "@angular/common": "~18.2.6",
-    "@angular/compiler": "~18.2.6",
-    "@angular/core": "~18.2.6",
-    "@angular/forms": "~18.2.6",
-    "@angular/localize": "~18.2.6",
-    "@angular/platform-browser": "~18.2.6",
-    "@angular/platform-browser-dynamic": "~18.2.6",
-    "@angular/router": "~18.2.6",
+    "@angular/cdk": "^18.2.11",
+    "@angular/common": "~18.2.10",
+    "@angular/compiler": "~18.2.10",
+    "@angular/core": "~18.2.10",
+    "@angular/forms": "~18.2.10",
+    "@angular/localize": "~18.2.10",
+    "@angular/platform-browser": "~18.2.10",
+    "@angular/platform-browser-dynamic": "~18.2.10",
+    "@angular/router": "~18.2.10",
     "@ng-bootstrap/ng-bootstrap": "^17.0.1",
-    "@ng-select/ng-select": "^13.9.0",
+    "@ng-select/ng-select": "^13.9.1",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
-    "ng2-pdf-viewer": "^10.3.1",
+    "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^18.0.0",
     "ngx-file-drop": "^16.0.0",
     "ngx-ui-tour-ng-bootstrap": "^15.0.0",
     "rxjs": "^7.8.1",
-    "tslib": "^2.7.0",
-    "uuid": "^10.0.0",
+    "tslib": "^2.8.1",
+    "utif": "^3.1.0",
+    "uuid": "^11.0.2",
     "zone.js": "^0.14.8"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^18.0.0",
     "@angular-builders/jest": "^18.0.0",
     "@angular-devkit/build-angular": "^18.2.2",
-    "@angular-devkit/core": "^18.2.6",
-    "@angular-devkit/schematics": "^18.2.6",
-    "@angular-eslint/builder": "18.3.1",
-    "@angular-eslint/eslint-plugin": "18.3.1",
-    "@angular-eslint/eslint-plugin-template": "18.3.1",
-    "@angular-eslint/schematics": "18.3.1",
-    "@angular-eslint/template-parser": "18.3.1",
-    "@angular/cli": "~18.2.6",
+    "@angular-devkit/core": "^18.2.11",
+    "@angular-devkit/schematics": "^18.2.11",
+    "@angular-eslint/builder": "18.4.0",
+    "@angular-eslint/eslint-plugin": "18.4.0",
+    "@angular-eslint/eslint-plugin-template": "18.4.0",
+    "@angular-eslint/schematics": "18.4.0",
+    "@angular-eslint/template-parser": "18.4.0",
+    "@angular/cli": "~18.2.11",
     "@angular/compiler-cli": "~18.2.2",
-    "@codecov/webpack-plugin": "^1.2.0",
-    "@playwright/test": "^1.47.2",
-    "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.4",
-    "@typescript-eslint/eslint-plugin": "^8.8.0",
-    "@typescript-eslint/parser": "^8.8.0",
+    "@codecov/webpack-plugin": "^1.2.1",
+    "@playwright/test": "^1.48.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.8.6",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
     "@typescript-eslint/utils": "^8.0.0",
-    "eslint": "^9.11.1",
+    "eslint": "^9.14.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "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>
@@ -43,7 +68,7 @@
       </tr>
     </thead>
     <tbody>
-      @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
+      @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task.id) {
         <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
           <td>
             <div class="form-check">
@@ -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.html

@@ -18,9 +18,11 @@
             @case (CustomFieldDataType.DocumentLink) {
                 <div [ngbTooltip]="nameTooltip" class="d-flex gap-1 flex-wrap">
                     @for (docId of value; track docId) {
-                        <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
-                            <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
-                        </a>
+                      @if (getDocumentTitle(docId)) {
+                          <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
+                              <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
+                          </a>
+                      }
                     }
                 </div>
             }

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
@@ -107,9 +104,9 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
       .getFew(this.value, { fields: 'id,title' })
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((result: Results<Document>) => {
-        this.docLinkDocuments = this.value.map((id) =>
-          result.results.find((d) => d.id === id)
-        )
+        this.docLinkDocuments = this.value
+          .map((id) => result.results.find((d) => d.id === id))
+          .filter((d) => d)
       })
   }
 
@@ -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.scss

@@ -5,26 +5,26 @@
   }
 }
 
-::ng-deep .ng-select-container {
+:host ::ng-deep .ng-select-container {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   height: 100% !important;
 }
 
-::ng-deep .rounded-end .ng-select-container {
+:host ::ng-deep .rounded-end .ng-select-container {
   border-top-right-radius: var(--bs-border-radius) !important;
   border-bottom-right-radius: var(--bs-border-radius) !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
 
-::ng-deep .ng-select {
+:host ::ng-deep .ng-select {
   max-width: 100px;
   min-width: 35%;
   font-size: 14px;
 }
 
-::ng-deep .doc-link-select {
+:host ::ng-deep .doc-link-select {
   padding-top: 0 !important;
   border-top-right-radius: var(--bs-border-radius) !important;
   border-bottom-right-radius: var(--bs-border-radius) !important;

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[] = []
@@ -114,16 +114,21 @@ export class CustomFieldQueriesModel {
     queryElement: CustomFieldQueryElement,
     elements: any[]
   ): CustomFieldQueryElement {
+    let foundElement
     for (let i = 0; i < elements.length; i++) {
       if (elements[i] === queryElement) {
-        return elements.splice(i, 1)[0]
+        foundElement = elements.splice(i, 1)[0]
       } else if (elements[i].type === CustomFieldQueryElementType.Expression) {
-        return this.findElement(
+        foundElement = this.findElement(
           queryElement,
           elements[i].value as CustomFieldQueryElement[]
         )
       }
+      if (foundElement) {
+        break
+      }
     }
+    return foundElement
   }
 
   public removeElement(queryElement: CustomFieldQueryElement) {
@@ -152,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
@@ -218,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) {
@@ -306,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', () => {