Merge branch 'dev'

.codespellrc

@@ -1,3 +1,3 @@
 [codespell]
 write-changes = True
-ignore-words-list = criterias,afterall,valeu,ureue,equest,ure
+ignore-words-list = criterias,afterall,valeu,ureue,equest,ure,assertIn

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -86,6 +86,12 @@ body:
       description: Note there are significant differences from the official image and linuxserver.io, please check if your issue is specific to the third-party image.
     validations:
       required: true
+  - type: textarea
+    id: system-status
+    attributes:
+      label: System status
+      description: If available, copy & paste the system status output from Settings > System Status > Copy
+      render: json
   - type: input
     id: browser
     attributes:
@@ -97,11 +103,6 @@ body:
     attributes:
       label: Configuration changes
       description: Any configuration changes you made in `docker-compose.yml`, `docker-compose.env` or `paperless.conf`.
-  - type: input
-    id: other
-    attributes:
-      label: Other
-      description: Any other relevant details.
   - type: checkboxes
     id: required-checks
     attributes:

.github/dependabot.yml

@@ -53,7 +53,6 @@ updates:
       development:
         patterns:
           - "*pytest*"
-          - "black"
           - "ruff"
           - "mkdocs-material"
       django:

.github/workflows/crowdin.yml

@@ -21,7 +21,7 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v4
     - name: crowdin action
-      uses: crowdin/github-action@v1
+      uses: crowdin/github-action@v2
       with:
         upload_translations: false
         download_translations: true

.github/workflows/repo-maintenance.yml

@@ -22,7 +22,7 @@ jobs:
         with:
           days-before-stale: 7
           days-before-close: 14
-          any-of-labels: 'cant-reproduce,not a bug'
+          any-of-labels: 'stale,cant-reproduce,not a bug'
           stale-issue-label: stale
           stale-pr-label: stale
           stale-issue-message: >

.pre-commit-config.yaml

@@ -29,7 +29,7 @@ repos:
       - id: check-case-conflict
       - id: detect-private-key
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.6
+    rev: v2.3.0
     hooks:
       - id: codespell
         exclude: "(^src-ui/src/locale/)|(^src-ui/e2e/)|(^src/paperless_mail/tests/samples/)"
@@ -47,13 +47,10 @@ repos:
         exclude: "(^Pipfile\\.lock$)"
   # Python hooks
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: 'v0.4.2'
+    rev: 'v0.4.7'
     hooks:
       - id: ruff
-  - repo: https://github.com/psf/black-pre-commit-mirror
+      - id: ruff-format
-    rev: 24.4.2
-    hooks:
-      - id: black
   # Dockerfile hooks
   - repo: https://github.com/AleksaC/hadolint-py
     rev: v2.12.0.3

CODE_OF_CONDUCT.md

@@ -5,7 +5,7 @@
 We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
+identity and expression, level of experience, education, socioeconomic status,
 nationality, personal appearance, race, religion, or sexual identity
 and orientation.
 

CONTRIBUTING.md

@@ -11,7 +11,7 @@ If you want to implement something big:
 
 ## Python
 
-Paperless supports python 3.9 - 3.11. We format Python code with [Black](https://github.com/psf/black).
+Paperless supports python 3.9 - 3.11. We format Python code with [ruff](https://docs.astral.sh/ruff/formatter/).
 
 ## Branches
 

Dockerfile

@@ -53,7 +53,7 @@ ARG TARGETARCH
 # Can be workflow provided, defaults set for manual building
 ARG JBIG2ENC_VERSION=0.29
 ARG QPDF_VERSION=11.9.0
-ARG GS_VERSION=10.02.1
+ARG GS_VERSION=10.03.1
 
 # Set Python environment variables
 ENV PYTHONDONTWRITEBYTECODE=1 \
@@ -83,7 +83,6 @@ ARG RUNTIME_PACKAGES="\
   icc-profiles-free \
   imagemagick \
   # PostgreSQL
-  libpq5 \
   postgresql-client \
   # MySQL / MariaDB
   mariadb-client \
@@ -129,17 +128,17 @@ RUN set -eux \
         && dpkg --install ./qpdf_${QPDF_VERSION}-1_${TARGETARCH}.deb \
       && echo "Installing Ghostscript ${GS_VERSION}" \
         && curl --fail --silent --show-error --location \
-          --output libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+          --output libgs10_${GS_VERSION}.dfsg.git20240518-1_${TARGETARCH}.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10_${GS_VERSION}.dfsg-1_${TARGETARCH}.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10_${GS_VERSION}.dfsg.git20240518-1_${TARGETARCH}.deb \
         && curl --fail --silent --show-error --location \
-          --output ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+          --output ghostscript_${GS_VERSION}.dfsg.git20240518-1_${TARGETARCH}.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/ghostscript_${GS_VERSION}.dfsg-1_${TARGETARCH}.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/ghostscript_${GS_VERSION}.dfsg.git20240518-1_${TARGETARCH}.deb \
         && curl --fail --silent --show-error --location \
-          --output libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
+          --output libgs10-common_${GS_VERSION}.dfsg.git20240518-1_all.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10-common_${GS_VERSION}.dfsg-1_all.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10-common_${GS_VERSION}.dfsg.git20240518-1_all.deb \
-        && dpkg --install ./libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
+        && dpkg --install ./libgs10-common_${GS_VERSION}.dfsg.git20240518-1_all.deb \
-        && dpkg --install ./libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+        && dpkg --install ./libgs10_${GS_VERSION}.dfsg.git20240518-1_${TARGETARCH}.deb \
-        && dpkg --install ./ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+        && dpkg --install ./ghostscript_${GS_VERSION}.dfsg.git20240518-1_${TARGETARCH}.deb \
       && echo "Installing jbig2enc" \
         && curl --fail --silent --show-error --location \
           --output jbig2enc_${JBIG2ENC_VERSION}-1_${TARGETARCH}.deb \
@@ -223,7 +222,13 @@ RUN --mount=type=cache,target=/root/.cache/pip/,id=pip-cache \
     && apt-get install --yes --quiet --no-install-recommends ${BUILD_PACKAGES} \
     && python3 -m pip install --no-cache-dir --upgrade wheel \
   && echo "Installing Python requirements" \
-    && python3 -m pip install --default-timeout=1000 --requirement requirements.txt \
+    && curl --fail --silent --show-error --location \
+    --output psycopg_c-3.1.19-cp311-cp311-linux_x86_64.whl \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.1.19/psycopg_c-3.1.19-cp311-cp311-linux_x86_64.whl \
+    && curl --fail --silent --show-error --location \
+    --output psycopg_c-3.1.19-cp311-cp311-linux_aarch64.whl  \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.1.19/psycopg_c-3.1.19-cp311-cp311-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.11/site-packages --verbose -p2 < 484.patch \
@@ -236,6 +241,7 @@ RUN --mount=type=cache,target=/root/.cache/pip/,id=pip-cache \
     && apt-get --yes purge ${BUILD_PACKAGES} \
     && apt-get --yes autoremove --purge \
     && apt-get clean --yes \
+    && rm --recursive --force --verbose *.whl \
     && rm --recursive --force --verbose /var/lib/apt/lists/* \
     && rm --recursive --force --verbose /tmp/* \
     && rm --recursive --force --verbose /var/tmp/* \

Pipfile

@@ -7,7 +7,7 @@ name = "pypi"
 dateparser = "~=1.2"
 # WARNING: django does not use semver.
 #          Only patch versions are guaranteed to not introduce breaking changes.
-django = "~=4.2.11"
+django = "~=4.2.13"
 django-allauth = {extras = ["socialaccount"], version = "*"}
 django-auditlog = "*"
 django-celery-results = "*"
@@ -37,7 +37,7 @@ nltk = "*"
 ocrmypdf = "~=15.4"
 pathvalidate = "*"
 pdf2image = "*"
-psycopg2 = "*"
+psycopg = {version = "*", extras = ["c"]}
 python-dateutil = "*"
 python-dotenv = "*"
 python-gnupg = "*"
@@ -46,23 +46,19 @@ python-magic = "*"
 pyzbar = "*"
 rapidfuzz = "*"
 redis = {extras = ["hiredis"], version = "*"}
-scikit-learn = "~=1.4"
+scikit-learn = "~=1.5"
 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.6"
 whoosh="~=2.7"
 zxing-cpp = {version = "*", platform_machine = "== 'x86_64'"}
 
-# Locked for issues
-# See https://github.com/paperless-ngx/paperless-ngx/discussions/6610 & https://bugs.launchpad.net/lxml/+bug/2059910
-lxml = "==5.1.1"
-
 [dev-packages]
 # Linting
-black = "*"
 pre-commit = "*"
 ruff = "*"
 # Testing

docker/compose/docker-compose.ci-test.yml

@@ -3,7 +3,6 @@
 # Can be used locally or by the CI to start the necessary containers with the
 # correct networking for the tests
 
-version: "3.7"
 services:
   gotenberg:
     image: docker.io/gotenberg/gotenberg:7.10
@@ -20,7 +19,7 @@ services:
       - "--log-level=warn"
       - "--log-format=text"
   tika:
-    image: ghcr.io/paperless-ngx/tika:latest
+    image: docker.io/apache/tika:latest
     hostname: tika
     container_name: tika
     network_mode: host

docker/compose/docker-compose.mariadb-tika.yml

@@ -30,7 +30,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7
@@ -88,7 +87,7 @@ services:
       - "--chromium-allow-list=file:///tmp/.*"
 
   tika:
-    image: ghcr.io/paperless-ngx/tika:latest
+    image: docker.io/apache/tika:latest
     restart: unless-stopped
 
 volumes:

docker/compose/docker-compose.mariadb.yml

@@ -26,7 +26,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7

docker/compose/docker-compose.portainer.yml

@@ -28,7 +28,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7

docker/compose/docker-compose.postgres-tika.yml

@@ -30,7 +30,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7
@@ -83,7 +82,7 @@ services:
       - "--chromium-allow-list=file:///tmp/.*"
 
   tika:
-    image: ghcr.io/paperless-ngx/tika:latest
+    image: docker.io/apache/tika:latest
     restart: unless-stopped
 
 volumes:

docker/compose/docker-compose.postgres.yml

@@ -26,7 +26,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7

docker/compose/docker-compose.sqlite-tika.yml

@@ -30,7 +30,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7
@@ -71,7 +70,7 @@ services:
       - "--chromium-allow-list=file:///tmp/.*"
 
   tika:
-    image: ghcr.io/paperless-ngx/tika:latest
+    image: docker.io/apache/tika:latest
     restart: unless-stopped
 
 volumes:

docker/compose/docker-compose.sqlite.yml

@@ -23,7 +23,6 @@
 # For more extensive installation and update instructions, refer to the
 # documentation.
 
-version: "3.4"
 services:
   broker:
     image: docker.io/library/redis:7

docker/wait-for-redis.py

@@ -4,6 +4,7 @@ Simple script which attempts to ping the Redis broker as set in the environment
 a certain number of times, waiting a little bit in between
 
 """
+
 import os
 import sys
 import time

docs/administration.md

@@ -185,34 +185,12 @@ For PostgreSQL, refer to [Upgrading a PostgreSQL Cluster](https://www.postgresql
 
 For MariaDB, refer to [Upgrading MariaDB](https://mariadb.com/kb/en/upgrading/)
 
-## Downgrading Paperless {#downgrade-paperless}
+You may also use the exporter and importer with the `--data-only` flag, after creating a new database with the updated version of PostgreSQL or MariaDB.
 
-Downgrades are possible. However, some updates also contain database
+!!! warning
-migrations (these change the layout of the database and may move data).
-In order to move back from a version that applied database migrations,
-you'll have to revert the database migration _before_ downgrading, and
-then downgrade paperless.
 
-This table lists the compatible versions for each database migration
+    You should not change any settings, especially paths, when doing this or there is a
-number.
+    risk of data loss
-
-| Migration number | Version range   |
-| ---------------- | --------------- |
-| 1011             | 1.0.0           |
-| 1012             | 1.1.0 - 1.2.1   |
-| 1014             | 1.3.0 - 1.3.1   |
-| 1016             | 1.3.2 - current |
-
-Execute the following management command to migrate your database:
-
-```shell-session
-$ python3 manage.py migrate documents <migration number>
-```
-
-!!! note
-
-    Some migrations cannot be undone. The command will issue errors if that
-    happens.
 
 ## Management utilities {#management-commands}
 
@@ -269,6 +247,7 @@ optional arguments:
 -sm, --split-manifest
 -z,  --zip
 -zn, --zip-name
+--data-only
 ```
 
 `target` is a folder to which the data gets written. This includes
@@ -327,6 +306,9 @@ If `-z` or `--zip` is provided, the export will be a zip file
 in the target directory, named according to the current local date or the
 value set in `-zn` or `--zip-name`.
 
+If `--data-only` is provided, only the database will be exported. This option is intended
+to facilitate database upgrades without needing to clean documents and thumbnails from the media directory.
+
 !!! warning
 
     If exporting with the file name format, there may be errors due to
@@ -341,10 +323,15 @@ exporter](#exporter) and imports it into paperless.
 The importer works just like the exporter. You point it at a directory,
 and the script does the rest of the work:
 
-```
+```shell
 document_importer source
 ```
 
+| Option      | Required | Default | Description                                                               |
+| ----------- | -------- | ------- | ------------------------------------------------------------------------- |
+| source      | Yes      | N/A     | The directory containing an export                                        |
+| --data-only | No       | False   | If provided, only import data, do not import document files or thumbnails |
+
 When you use the provided docker compose script, put the export inside
 the `export` folder in your paperless source directory. Specify
 `../export` as the `source`.
@@ -586,7 +573,7 @@ Enabling encryption is no longer supported.
 
 Basic usage to disable encryption of your document store:
 
-(Note: If [`PAPERLESS_PASSPHRASE`](configuration.md#PAPERLESS_PASSPHRASE) isn't set already, you need to specify
+(Note: If `PAPERLESS_PASSPHRASE` isn't set already, you need to specify
 it here)
 
 ```

docs/api.md

@@ -11,7 +11,7 @@ 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](#posting-documents-file-uploads).
+  See [below](#file-uploads).
 - `/api/document_types/`: Full CRUD support.
 - `/api/groups/`: Full CRUD support.
 - `/api/logs/`: Read-Only.
@@ -403,7 +403,7 @@ The following methods are supported:
   - Requires `parameters`: `{ "add_tags": [LIST_OF_TAG_IDS] }` and / or `{ "remove_tags": [LIST_OF_TAG_IDS] }`
 - `delete`
   - No `parameters` required
-- `redo_ocr`
+- `reprocess`
   - No `parameters` required
 - `set_permissions`
   - Requires `parameters`:
@@ -424,6 +424,10 @@ The following methods are supported:
 - `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.
 
 ### Objects
 

docs/configuration.md

@@ -288,6 +288,12 @@ this folder is no longer needed and can be removed manually.
 
 Defaults to `/usr/share/nltk_data`
 
+#### [`PAPERLESS_MODEL_FILE=<path>`](#PAPERLESS_MODEL_FILE) {#PAPERLESS_MODEL_FILE}
+
+: This is where paperless will store the classification model.
+
+    Defaults to `PAPERLESS_DATA_DIR/classification_model.pickle`.
+
 ## Logging
 
 #### [`PAPERLESS_LOGROTATE_MAX_SIZE=<num>`](#PAPERLESS_LOGROTATE_MAX_SIZE) {#PAPERLESS_LOGROTATE_MAX_SIZE}

docs/development.md

@@ -47,7 +47,7 @@ early on.
 Once installed, hooks will run when you commit. If the formatting isn't
 quite right or a linter catches something, the commit will be rejected.
 You'll need to look at the output and fix the issue. Some hooks, such
-as the Python formatting tool `black`, will format failing
+as the Python linting and formatting tool `ruff`, will format failing
 files, so all you need to do is `git add` those files again
 and retry your commit.
 

docs/setup.md

@@ -300,8 +300,17 @@ supported.
     - `libatlas-base-dev`
     - `libxslt1-dev`
 
-    You will also need `build-essential`, `python3-setuptools` and
+    You will also need these for installing some of the python dependencies:
-    `python3-wheel` for installing some of the python dependencies.
+
+    - `build-essential`
+    - `python3-setuptools`
+    - `python3-wheel`
+
+    Use this list for your preferred package management:
+
+    ```
+    build-essential python3-setuptools python3-wheel
+    ```
 
 2.  Install `redis` >= 6.0 and configure it to start automatically.
 
@@ -667,24 +676,37 @@ commands as well.
 1.  Stop and remove the paperless container
 2.  If using an external database, stop the container
 3.  Update Redis configuration
-    a) If `REDIS_URL` is already set, change it to [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS)
+
-    and continue to step 4.
+    1. If `REDIS_URL` is already set, change it to [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS)
-    b) Otherwise, in the `docker-compose.yml` add a new service for
+       and continue to step 4.
-    Redis, following [the example compose
+
-    files](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose)
+    1. Otherwise, in the `docker-compose.yml` add a new service for
-    c) Set the environment variable [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) so it points to
+       Redis, following [the example compose
-    the new Redis container
+       files](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose)
+
+    1. Set the environment variable [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) so it points to
+       the new Redis container
+
 4.  Update user mapping
-    a) If set, change the environment variable `PUID` to `USERMAP_UID`
+
-    b) If set, change the environment variable `PGID` to `USERMAP_GID`
+    1. If set, change the environment variable `PUID` to `USERMAP_UID`
+
+    1. If set, change the environment variable `PGID` to `USERMAP_GID`
+
 5.  Update configuration paths
-    a) Set the environment variable [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) to `/config`
+
+    1. Set the environment variable [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) to `/config`
+
 6.  Update media paths
-    a) Set the environment variable [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) to
+
-    `/data/media`
+    1. Set the environment variable [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) to
+       `/data/media`
+
 7.  Update timezone
-    a) Set the environment variable [`PAPERLESS_TIME_ZONE`](configuration.md#PAPERLESS_TIME_ZONE) to the same
+
-    value as `TZ`
+    1. Set the environment variable [`PAPERLESS_TIME_ZONE`](configuration.md#PAPERLESS_TIME_ZONE) to the same
+       value as `TZ`
+
 8.  Modify the `image:` to point to
     `ghcr.io/paperless-ngx/paperless-ngx:latest` or a specific version
     if preferred.

docs/usage.md

@@ -461,15 +461,16 @@ Paperless-ngx added the ability to create shareable links to files in version 2.
 
 ## PDF Actions
 
-Paperless-ngx supports 3 basic editing operations for PDFs (these operations cannot be performed on non-PDF files):
+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'
+- 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
+- Splitting documents: available from an individual document's details page.
+- Deleting pages: available from an individual document's details page.
 
 !!! important
 
-    Note that rotation alters the Paperless-ngx _original_ file, which would, for example, invalidate a digital signature.
+    Note that rotation and deleting pages alter the Paperless-ngx _original_ file, which would, for example, invalidate a digital signature.
 
 ## Document History
 

paperless-ngx.code-workspace

@@ -31,6 +31,11 @@
 			"**/.venv": true,
 			"**/.coverage": true,
 			"**/coverage.json": true
-		}
+		},
+		"python.defaultInterpreterPath": ".venv/bin/python3",
+	},
+	"extensions": {
+		"recommendations": ["ms-python.python", "charliermarsh.ruff", "editorconfig.editorconfig"],
+		"unwantedRecommendations": ["ms-python.black-formatter"]
 	}
 }

scripts/start_services.sh

@@ -3,4 +3,4 @@
 docker run -p 5432:5432 -e POSTGRES_PASSWORD=password -v paperless_pgdata:/var/lib/postgresql/data -d postgres:15
 docker run -d -p 6379:6379 redis:latest
 docker run -p 3000:3000 -d gotenberg/gotenberg:7.8 gotenberg --chromium-disable-javascript=true --chromium-allow-list="file:///tmp/.*"
-docker run -p 9998:9998 -d ghcr.io/paperless-ngx/tika:latest
+docker run -p 9998:9998 -d docker.io/apache/tika:latest

src-ui/angular.json

@@ -76,8 +76,7 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "pdfjs-dist",
+              "ng2-pdf-viewer",
-              "pdfjs-dist/web/pdf_viewer",
               "filesize",
               "file-saver"
             ],

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

@@ -71,7 +71,7 @@ test('should show a mobile preview', async ({ page }) => {
   await page.setViewportSize({ width: 400, height: 1000 })
   await expect(page.getByRole('tab', { name: 'Preview' })).toBeVisible()
   await page.getByRole('tab', { name: 'Preview' }).click()
-  await page.waitForSelector('pngx-pdf-viewer')
+  await page.waitForSelector('pdf-viewer')
 })
 
 test('should show a list of notes', async ({ page }) => {

src-ui/jest.config.js

@@ -7,7 +7,6 @@ module.exports = {
     'abstract-name-filter-service',
     'abstract-paperless-service',
   ],
-  coveragePathIgnorePatterns: ['/src/app/components/common/pdf-viewer/*'],
   transformIgnorePatterns: [`<rootDir>/node_modules/(?!.*\\.mjs$|lodash-es)`],
   moduleNameMapper: {
     '^src/(.*)': '<rootDir>/src/$1',

src-ui/package.json

@@ -11,15 +11,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^17.3.6",
+    "@angular/cdk": "^17.3.10",
-    "@angular/common": "~17.3.7",
+    "@angular/common": "~17.3.9",
-    "@angular/compiler": "~17.3.7",
+    "@angular/compiler": "~17.3.9",
-    "@angular/core": "~17.3.7",
+    "@angular/core": "~17.3.9",
-    "@angular/forms": "~17.3.7",
+    "@angular/forms": "~17.3.9",
-    "@angular/localize": "~17.3.7",
+    "@angular/localize": "~17.3.9",
-    "@angular/platform-browser": "~17.3.7",
+    "@angular/platform-browser": "~17.3.9",
-    "@angular/platform-browser-dynamic": "~17.3.7",
+    "@angular/platform-browser-dynamic": "~17.3.9",
-    "@angular/router": "~17.3.7",
+    "@angular/router": "~17.3.9",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ng-select/ng-select": "^12.0.7",
     "@ngneat/dirty-check-forms": "^3.0.3",
@@ -27,13 +27,13 @@
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
+    "ng2-pdf-viewer": "^10.2.2",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^17.1.0",
     "ngx-file-drop": "^16.0.0",
     "ngx-filesize": "^3.0.3",
-    "ngx-ui-tour-ng-bootstrap": "^14.0.2",
+    "ngx-ui-tour-ng-bootstrap": "^14.0.3",
-    "pdfjs-dist": "^3.11.174",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
@@ -41,13 +41,13 @@
   },
   "devDependencies": {
     "@angular-builders/jest": "17.0.3",
-    "@angular-devkit/build-angular": "~17.3.6",
+    "@angular-devkit/build-angular": "~17.3.7",
-    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/builder": "17.4.1",
-    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.4.1",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.4.1",
-    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/schematics": "17.4.1",
-    "@angular-eslint/template-parser": "17.3.0",
+    "@angular-eslint/template-parser": "17.4.1",
-    "@angular/cli": "~17.3.6",
+    "@angular/cli": "~17.3.7",
     "@angular/compiler-cli": "~17.3.2",
     "@playwright/test": "^1.42.1",
     "@types/jest": "^29.5.12",
@@ -58,7 +58,7 @@
     "eslint": "^8.57.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-angular": "^14.0.0",
+    "jest-preset-angular": "^14.1.0",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
     "ts-node": "~10.9.1",

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

@@ -105,7 +105,7 @@ import { CustomFieldsComponent } from './components/manage/custom-fields/custom-
 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 { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
-import { PdfViewerComponent } from './components/common/pdf-viewer/pdf-viewer.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'
@@ -124,6 +124,7 @@ import { DragDropSelectComponent } from './components/common/input/drag-drop-sel
 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 {
   airplane,
   archive,
@@ -160,6 +161,7 @@ import {
   clipboardCheckFill,
   clipboardFill,
   dash,
+  dashCircle,
   diagram3,
   dice5,
   doorOpen,
@@ -174,6 +176,7 @@ import {
   fileEarmarkCheck,
   fileEarmarkFill,
   fileEarmarkLock,
+  fileEarmarkMinus,
   files,
   fileText,
   filter,
@@ -259,6 +262,7 @@ const icons = {
   clipboardCheckFill,
   clipboardFill,
   dash,
+  dashCircle,
   diagram3,
   dice5,
   doorOpen,
@@ -273,6 +277,7 @@ const icons = {
   fileEarmarkCheck,
   fileEarmarkFill,
   fileEarmarkLock,
+  fileEarmarkMinus,
   files,
   fileText,
   filter,
@@ -475,7 +480,6 @@ function initializeApp(settings: SettingsService) {
     CustomFieldEditDialogComponent,
     CustomFieldsDropdownComponent,
     ProfileEditDialogComponent,
-    PdfViewerComponent,
     DocumentLinkComponent,
     PreviewPopupComponent,
     SwitchComponent,
@@ -492,6 +496,7 @@ function initializeApp(settings: SettingsService) {
     CustomFieldDisplayComponent,
     GlobalSearchComponent,
     HotkeyDialogComponent,
+    DeletePagesConfirmDialogComponent,
   ],
   imports: [
     BrowserModule,
@@ -500,6 +505,7 @@ function initializeApp(settings: SettingsService) {
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
+    PdfViewerModule,
     NgxFileDropModule,
     NgSelectModule,
     ColorSliderModule,

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

@@ -11,7 +11,7 @@
     <ul ngbNav #nav="ngbNav" class="nav-tabs">
         @for (category of optionCategories; track category) {
             <li [ngbNavItem]="category">
-                <a ngbNavLink i18n>{{category}}</a>
+                <a ngbNavLink>{{category}}</a>
                 <ng-template ngbNavContent>
                     <div class="p-3">
                         <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">

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

@@ -201,7 +201,23 @@
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Search database only (do not include advanced search results)" formControlName="searchDbOnly"></pngx-input-check>
+            <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>
 

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

@@ -309,7 +309,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(26)
+    expect(setSpy).toHaveBeenCalledTimes(27)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))

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

@@ -27,7 +27,7 @@ import {
 } from 'rxjs'
 import { Group } from 'src/app/data/group'
 import { SavedView } from 'src/app/data/saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+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 {
@@ -101,6 +101,7 @@ export class SettingsComponent
     defaultPermsEditGroups: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
     searchDbOnly: new FormControl(null),
+    searchLink: new FormControl(null),
 
     notificationsConsumerNewDocument: new FormControl(null),
     notificationsConsumerSuccess: new FormControl(null),
@@ -129,6 +130,8 @@ export class SettingsComponent
 
   public systemStatus: SystemStatus
 
+  public readonly GlobalSearchType = GlobalSearchType
+
   get systemStatusHasErrors(): boolean {
     return (
       this.systemStatus.database.status === SystemStatusItemStatus.ERROR ||
@@ -306,6 +309,7 @@ export class SettingsComponent
         SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
       ),
       searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
+      searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
       savedViews: {},
     }
   }
@@ -539,6 +543,10 @@ export class SettingsComponent
       SETTINGS_KEYS.SEARCH_DB_ONLY,
       this.settingsForm.value.searchDbOnly
     )
+    this.settings.set(
+      SETTINGS_KEYS.SEARCH_FULL_TYPE,
+      this.settingsForm.value.searchLink
+    )
     this.settings.setLanguage(this.settingsForm.value.displayLanguage)
     this.settings
       .storeSettings()

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

@@ -19,8 +19,12 @@
                 </div>
             </div>
             @if (query) {
-                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="runAdvanedSearch()">
+                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="runFullSearch()">
-                    <ng-container i18n>Advanced search</ng-container>
+                    @if (useAdvancedForFullSearch) {
+                        <ng-container i18n>Advanced search</ng-container>
+                    } @else {
+                        <ng-container i18n>Search</ng-container>
+                    }
                     <i-bs width="1em" height="1em" name="arrow-right-short"></i-bs>
                 </button>
             }

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

@@ -25,6 +25,7 @@ import {
   FILTER_HAS_DOCUMENT_TYPE_ANY,
   FILTER_HAS_STORAGE_PATH_ANY,
   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'
@@ -37,6 +38,8 @@ 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'
 
 const searchResults = {
   total: 11,
@@ -130,6 +133,7 @@ describe('GlobalSearchComponent', () => {
   let documentService: DocumentService
   let documentListViewService: DocumentListViewService
   let toastService: ToastService
+  let settingsService: SettingsService
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -150,6 +154,7 @@ describe('GlobalSearchComponent', () => {
     documentService = TestBed.inject(DocumentService)
     documentListViewService = TestBed.inject(DocumentListViewService)
     toastService = TestBed.inject(ToastService)
+    settingsService = TestBed.inject(SettingsService)
 
     fixture = TestBed.createComponent(GlobalSearchComponent)
     component = fixture.componentInstance
@@ -262,7 +267,7 @@ describe('GlobalSearchComponent', () => {
     component.searchResults = searchResults as any
     component.resultsDropdown.open()
     component.query = 'test'
-    const advancedSearchSpy = jest.spyOn(component, 'runAdvanedSearch')
+    const advancedSearchSpy = jest.spyOn(component, 'runFullSearch')
     component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
     expect(advancedSearchSpy).toHaveBeenCalled()
   })
@@ -499,15 +504,6 @@ describe('GlobalSearchComponent', () => {
     expect(focusSpy).toHaveBeenCalled()
   })
 
-  it('should support explicit advanced search', () => {
-    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.query = 'test'
-    component.runAdvanedSearch()
-    expect(qfSpy).toHaveBeenCalledWith([
-      { rule_type: FILTER_FULLTEXT_QUERY, value: 'test' },
-    ])
-  })
-
   it('should support open in new window', () => {
     const openSpy = jest.spyOn(window, 'open')
     const event = new Event('click')
@@ -528,4 +524,23 @@ describe('GlobalSearchComponent', () => {
     button.dispatchEvent(keyboardEvent)
     expect(dispatchSpy).toHaveBeenCalledTimes(2) // once for keydown, second for click
   })
+
+  it('should support title content search and advanced search', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.query = 'test'
+    component.runFullSearch()
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_TITLE_CONTENT, value: 'test' },
+    ])
+
+    settingsService.set(
+      SETTINGS_KEYS.SEARCH_FULL_TYPE,
+      GlobalSearchType.ADVANCED
+    )
+    component.query = 'test'
+    component.runFullSearch()
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_FULLTEXT_QUERY, value: 'test' },
+    ])
+  })
 })

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

@@ -15,6 +15,7 @@ import {
   FILTER_HAS_DOCUMENT_TYPE_ANY,
   FILTER_HAS_STORAGE_PATH_ANY,
   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'
@@ -42,6 +43,8 @@ import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dial
 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',
@@ -63,6 +66,13 @@ export class GlobalSearchComponent implements OnInit {
   @ViewChildren('primaryButton') primaryButtons: QueryList<ElementRef>
   @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
+  get useAdvancedForFullSearch(): boolean {
+    return (
+      this.settingsService.get(SETTINGS_KEYS.SEARCH_FULL_TYPE) ===
+      GlobalSearchType.ADVANCED
+    )
+  }
+
   constructor(
     public searchService: SearchService,
     private router: Router,
@@ -71,7 +81,8 @@ export class GlobalSearchComponent implements OnInit {
     private documentListViewService: DocumentListViewService,
     private permissionsService: PermissionsService,
     private toastService: ToastService,
-    private hotkeyService: HotKeyService
+    private hotkeyService: HotKeyService,
+    private settingsService: SettingsService
   ) {
     this.queryDebounce = new Subject<string>()
 
@@ -282,7 +293,7 @@ export class GlobalSearchComponent implements OnInit {
         this.primaryButtons.first.nativeElement.click()
         this.searchInput.nativeElement.blur()
       } else if (this.query?.length) {
-        this.runAdvanedSearch()
+        this.runFullSearch()
         this.reset(true)
       }
     } else if (event.key === 'Escape' && !this.resultsDropdown.isOpen()) {
@@ -378,9 +389,12 @@ export class GlobalSearchComponent implements OnInit {
     )
   }
 
-  public runAdvanedSearch() {
+  public runFullSearch() {
+    const ruleType = this.useAdvancedForFullSearch
+      ? FILTER_FULLTEXT_QUERY
+      : FILTER_TITLE_CONTENT
     this.documentListViewService.quickFilter([
-      { rule_type: FILTER_FULLTEXT_QUERY, value: this.query },
+      { rule_type: ruleType, value: this.query },
     ])
     this.reset(true)
   }

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

@@ -0,0 +1,54 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col">
+            <div class="btn-toolbar flex-nowrap">
+                <div class="input-group input-group-sm">
+                    <div class="input-group-text" i18n>Page</div>
+                    <input class="form-control mw-60" type="number" min="1" [(ngModel)]="currentPage" />
+                    <div class="input-group-text" i18n>of {{totalPages}}</div>
+                </div>
+                <div class="input-group input-group-sm ms-auto">
+                    <span class="input-group-text" i18n>Pages to remove</span>
+                    <input [ngModel]="pagesString" class="form-control" disabled />
+                </div>
+            </div>
+            <div class="pdf-viewer-container w-100 mt-3">
+                <pdf-viewer #pdfViewer [src]="pdfSrc" [(page)]="currentPage"
+                [original-size]="false"
+                [zoom]="1"
+                zoom-scale="page-fit"
+                [render-text]="false"
+                (pagerendered)="pageRendered($event)"
+                (after-load-complete)="pdfPreviewLoaded($event)">
+                </pdf-viewer>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-footer flex-nowrap">
+    <div>
+        @if (message) {
+            <p [innerHTML]="message | safeHtml"></p>
+        }
+        @if (messageBold) {
+            <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+        }
+    </div>
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+            <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+        </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+        {{btnCaption}}
+    </button>
+</div>
+
+<ng-template #pageCheckOverlay let-page="page" let-pages="pages">
+    <div class="position-absolute top-0 start-0 w-100 h-100 p-2" (click)="pageCheckChanged(page)">
+        <input type="checkbox" class="form-check-input" />
+    </div>
+</ng-template>

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

@@ -0,0 +1,28 @@
+.pdf-viewer-container {
+  background-color: gray;
+  height: 350px;
+
+  pdf-viewer {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.mw-60 {
+  max-width: 60px;
+}
+
+div.position-absolute:has(.form-check-input:checked) {
+  background-color: rgba(var(--bs-dark-rgb), 0.4);
+}
+
+.form-check-input {
+  &:checked {
+    background-color: var(--bs-danger);
+    border-color: var(--bs-danger);
+  }
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), var(--pngx-focus-alpha));
+    border-color: var(--bs-danger);
+  }
+}

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

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+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'
+
+describe('DeletePagesConfirmDialogComponent', () => {
+  let component: DeletePagesConfirmDialogComponent
+  let fixture: ComponentFixture<DeletePagesConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeletePagesConfirmDialogComponent, PdfViewerComponent],
+      providers: [NgbActiveModal, SafeHtmlPipe],
+      imports: [
+        HttpClientTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        ReactiveFormsModule,
+      ],
+    }).compileComponents()
+    fixture = TestBed.createComponent(DeletePagesConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should return a string with comma-separated pages', () => {
+    component.pages = [1, 2, 3, 4]
+    expect(component.pagesString).toEqual('1, 2, 3, 4')
+  })
+
+  it('should update totalPages when pdf is loaded', () => {
+    component.pdfPreviewLoaded({ numPages: 5 } as any)
+    expect(component.totalPages).toEqual(5)
+  })
+
+  it('should update checks when page is rendered', () => {
+    const event = {
+      target: document.createElement('div'),
+      detail: { pageNumber: 1 },
+    } as any
+    component.pageRendered(event)
+    expect(component['checks'].length).toEqual(1)
+  })
+
+  it('should update pages when page check is changed', () => {
+    component.pageCheckChanged(1)
+    expect(component.pages).toEqual([1])
+    component.pageCheckChanged(1)
+    expect(component.pages).toEqual([])
+  })
+})

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

@@ -0,0 +1,64 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+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',
+  templateUrl: './delete-pages-confirm-dialog.component.html',
+  styleUrl: './delete-pages-confirm-dialog.component.scss',
+})
+export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
+  public documentID: number
+  public pages: number[] = []
+  public currentPage: number = 1
+  public totalPages: number
+
+  @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent
+  @ViewChild('pageCheckOverlay') pageCheckOverlay!: TemplateRef<any>
+  private checks: HTMLElement[] = []
+
+  public get pagesString(): string {
+    return this.pages.join(', ')
+  }
+
+  public get pdfSrc(): string {
+    return this.documentService.getPreviewUrl(this.documentID)
+  }
+
+  constructor(
+    activeModal: NgbActiveModal,
+    private documentService: DocumentService
+  ) {
+    super(activeModal)
+  }
+
+  public pdfPreviewLoaded(pdf: PDFDocumentProxy) {
+    this.totalPages = pdf.numPages
+  }
+
+  pageRendered(event: CustomEvent) {
+    const pageDiv = event.target as HTMLDivElement
+    const check = this.pageCheckOverlay.createEmbeddedView({
+      page: event.detail.pageNumber,
+    })
+    this.checks[event.detail.pageNumber - 1] = check.rootNodes[0]
+    pageDiv?.insertBefore(check.rootNodes[0], pageDiv.firstChild)
+    this.updateChecks()
+  }
+
+  pageCheckChanged(pageNumber: number) {
+    if (!this.pages.includes(pageNumber)) this.pages.push(pageNumber)
+    else if (this.pages.includes(pageNumber))
+      this.pages.splice(this.pages.indexOf(pageNumber), 1)
+    this.updateChecks()
+  }
+
+  private updateChecks() {
+    this.checks.forEach((check, i) => {
+      const input = check.getElementsByTagName('input')[0]
+      input.checked = this.pages.includes(i + 1)
+    })
+  }
+}

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

@@ -21,21 +21,19 @@
             </button>
         </div>
     </div>
-    <div class="row mt-4">
-        <div class="col">
-            @if (messageBold) {
-              <p><b>{{messageBold}}</b></p>
-            }
-            @if (message) {
-              <p class="mb-0" [innerHTML]="message | safeHtml"></p>
-            }
-        </div>
-    </div>
     @if (showPDFNote) {
         <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
     }
 </div>
-<div class="modal-footer">
+<div class="modal-footer flex-nowrap">
+    <div class="col">
+        @if (message) {
+            <p [innerHTML]="message | safeHtml"></p>
+        }
+        @if (messageBold) {
+          <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+        }
+    </div>
     <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.html

@@ -13,12 +13,12 @@
                 <div class="input-group-text" i18n>of {{totalPages}}</div>
             </div>
             <div class="pdf-viewer-container w-100 mt-3">
-                <pngx-pdf-viewer [src]="pdfSrc" [(page)]="page"
+                <pdf-viewer [src]="pdfSrc" [(page)]="page"
                 [original-size]="false"
                 [zoom]="1"
                 zoom-scale="page-fit"
                 (after-load-complete)="pdfPreviewLoaded($event)">
-                </pngx-pdf-viewer>
+                </pdf-viewer>
             </div>
         </div>
         <div class="col-4">

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

@@ -2,7 +2,7 @@
     background-color: gray;
     height: 350px;
 
-    pngx-pdf-viewer {
+    pdf-viewer {
       width: 100%;
       height: 100%;
     }

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

@@ -6,7 +6,7 @@ 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 { PdfViewerComponent } from '../../pdf-viewer/pdf-viewer.component'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
 
 describe('SplitConfirmDialogComponent', () => {
   let component: SplitConfirmDialogComponent
@@ -15,13 +15,14 @@ describe('SplitConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SplitConfirmDialogComponent, PdfViewerComponent],
+      declarations: [SplitConfirmDialogComponent],
       providers: [NgbActiveModal],
       imports: [
         HttpClientTestingModule,
         NgxBootstrapIconsModule.pick(allIcons),
         ReactiveFormsModule,
         FormsModule,
+        PdfViewerModule,
       ],
     }).compileComponents()
 

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

@@ -2,7 +2,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 { PDFDocumentProxy } from '../../pdf-viewer/typings'
+import { PDFDocumentProxy } from 'ng2-pdf-viewer'
 
 @Component({
   selector: 'pngx-split-confirm-dialog',

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

@@ -29,6 +29,6 @@
             }
         }
     } @else if (showNameIfEmpty) {
-        <span class="fst-italic text-muted" i18n>{{field.name}}</span>
+        <span class="fst-italic text-muted">{{field.name}}</span>
     }
 }

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

@@ -18,7 +18,7 @@ const document: Document = {
   custom_fields: [
     { field: 1, document: 1, created: null, value: 'Text value' },
     { field: 2, document: 1, created: null, value: 'USD100' },
-    { field: 3, document: 1, created: null, value: '1,2,3' },
+    { field: 3, document: 1, created: null, value: [1, 2, 3] },
   ],
 }
 

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

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

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -27,8 +27,8 @@
           (change)="onChange(selectedDocuments)">
           <ng-template ng-label-tmp let-document="item">
             <div class="d-flex align-items-center">
-              <i-bs (click)="unselect(document)" name="x"></i-bs>
+              <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
-              <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
+              <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
                 <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
               </a>
             </div>

src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts

@@ -66,6 +66,20 @@ describe('DocumentLinkComponent', () => {
     expect(getSpy).toHaveBeenCalled()
   })
 
+  it('shoud maintain ordering of selected documents', () => {
+    const getSpy = jest.spyOn(documentService, 'getFew')
+    getSpy.mockImplementation((ids) => {
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
+    })
+    component.writeValue([12, 1])
+    expect(component.selectedDocuments).toEqual([documents[1], documents[0]])
+  })
+
   it('should search API on select text input', () => {
     const listSpy = jest.spyOn(documentService, 'listFiltered')
     listSpy.mockImplementation(

src-ui/src/app/components/common/input/document-link/document-link.component.ts

@@ -65,7 +65,9 @@ export class DocumentLinkComponent
         .pipe(takeUntil(this.unsubscribeNotifier))
         .subscribe((documentResults) => {
           this.loading = false
-          this.selectedDocuments = documentResults.results
+          this.selectedDocuments = documentIDs.map((id) =>
+            documentResults.results.find((d) => d.id === id)
+          )
           super.writeValue(documentIDs)
         })
     }

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

@@ -9,7 +9,7 @@
             <div class="badge bg-primary" cdkDrag>{{item.name}}</div>
         }
         @if (selectedItems.length === 0) {
-            <div class="badge bg-light text-secondary fst-italic" i18n>{{emptyText}}</div>
+            <div class="badge bg-light text-secondary fst-italic">{{emptyText}}</div>
         }
     </div>
 </div>

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

@@ -1,7 +1,7 @@
 <div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="getSuggestions().length > 0">
   <div class="row">
     <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
-      <label class="form-label" [class.mb-md-0]="horizontal" for="tags" i18n>{{title}}</label>
+      <label class="form-label" [class.mb-md-0]="horizontal" for="tags">{{title}}</label>
     </div>
     <div class="position-relative" [class.col-md-9]="horizontal">
       <div class="input-group flex-nowrap">
@@ -17,12 +17,12 @@
           (change)="onChange(value)">
 
           <ng-template ng-label-tmp let-item="item">
-            <span class="tag-wrap tag-wrap-delete" (mousedown)="removeTag($event, item.id)">
+            <button class="tag-wrap btn p-0" (click)="removeTag($event, item.id)" title="Remove tag" i18n-title>
-              <i-bs name="x"></i-bs>
+              <i-bs name="x" style="margin-inline-end: 1px;"></i-bs>
               @if (item.id && tags) {
                 <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
               }
-            </span>
+            </button>
           </ng-template>
           <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
             <div class="tag-wrap">

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

@@ -7,10 +7,6 @@
   font-size: 1rem;
 }
 
-.tag-wrap-delete {
-  cursor: pointer;
-}
-
 .paperless-input-select.disabled {
   .input-group {
       cursor: not-allowed;

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.html

@@ -1,3 +0,0 @@
-<div #pdfViewerContainer class="pngx-pdf-viewer-container">
-  <div class="pdfViewer"></div>
-</div>

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts

@@ -1,600 +0,0 @@
-/**
- * This file is taken and modified from https://github.com/VadimDez/ng2-pdf-viewer/blob/10.0.0/src/app/pdf-viewer/pdf-viewer.component.ts
- * Created by vadimdez on 21/06/16.
- */
-import {
-  Component,
-  Input,
-  Output,
-  ElementRef,
-  EventEmitter,
-  OnChanges,
-  SimpleChanges,
-  OnInit,
-  OnDestroy,
-  ViewChild,
-  AfterViewChecked,
-  NgZone,
-} from '@angular/core'
-import { from, fromEvent, Subject } from 'rxjs'
-import { debounceTime, filter, takeUntil } from 'rxjs/operators'
-import * as PDFJS from 'pdfjs-dist'
-import * as PDFJSViewer from 'pdfjs-dist/web/pdf_viewer'
-
-import { createEventBus } from './utils/event-bus-utils'
-
-import type {
-  PDFSource,
-  PDFPageProxy,
-  PDFProgressData,
-  PDFDocumentProxy,
-  PDFDocumentLoadingTask,
-  PDFViewerOptions,
-  ZoomScale,
-} from './typings'
-import { PDFSinglePageViewer } from 'pdfjs-dist/web/pdf_viewer'
-
-PDFJS['verbosity'] = PDFJS.VerbosityLevel.ERRORS
-
-export enum RenderTextMode {
-  DISABLED,
-  ENABLED,
-  ENHANCED,
-}
-
-@Component({
-  selector: 'pngx-pdf-viewer',
-  templateUrl: './pdf-viewer.component.html',
-  styleUrls: ['./pdf-viewer.component.scss'],
-})
-export class PdfViewerComponent
-  implements OnChanges, OnInit, OnDestroy, AfterViewChecked
-{
-  static CSS_UNITS = 96.0 / 72.0
-  static BORDER_WIDTH = 9
-
-  @ViewChild('pdfViewerContainer')
-  pdfViewerContainer!: ElementRef<HTMLDivElement>
-
-  public eventBus!: PDFJSViewer.EventBus
-  public pdfLinkService!: PDFJSViewer.PDFLinkService
-  public pdfViewer!: PDFJSViewer.PDFViewer | PDFSinglePageViewer
-
-  private isVisible = false
-
-  private _cMapsUrl =
-    typeof PDFJS !== 'undefined'
-      ? `https://unpkg.com/pdfjs-dist@${(PDFJS as any).version}/cmaps/`
-      : null
-  private _imageResourcesPath =
-    typeof PDFJS !== 'undefined'
-      ? `https://unpkg.com/pdfjs-dist@${(PDFJS as any).version}/web/images/`
-      : undefined
-  private _renderText = true
-  private _renderTextMode: RenderTextMode = RenderTextMode.ENABLED
-  private _stickToPage = false
-  private _originalSize = true
-  private _pdf: PDFDocumentProxy | undefined
-  private _page = 1
-  private _zoom = 1
-  private _zoomScale: ZoomScale = 'page-width'
-  private _rotation = 0
-  private _showAll = true
-  private _canAutoResize = true
-  private _fitToPage = false
-  private _externalLinkTarget = 'blank'
-  private _showBorders = false
-  private lastLoaded!: string | Uint8Array | PDFSource | null
-  private _latestScrolledPage!: number
-
-  private resizeTimeout: number | null = null
-  private pageScrollTimeout: number | null = null
-  private isInitialized = false
-  private loadingTask?: PDFDocumentLoadingTask | null
-  private destroy$ = new Subject<void>()
-
-  @Output('after-load-complete') afterLoadComplete =
-    new EventEmitter<PDFDocumentProxy>()
-  @Output('page-rendered') pageRendered = new EventEmitter<CustomEvent>()
-  @Output('pages-initialized') pageInitialized = new EventEmitter<CustomEvent>()
-  @Output('text-layer-rendered') textLayerRendered =
-    new EventEmitter<CustomEvent>()
-  @Output('error') onError = new EventEmitter<any>()
-  @Output('on-progress') onProgress = new EventEmitter<PDFProgressData>()
-  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>(true)
-  @Input() src?: string | Uint8Array | PDFSource
-
-  @Input('c-maps-url')
-  set cMapsUrl(cMapsUrl: string) {
-    this._cMapsUrl = cMapsUrl
-  }
-
-  @Input('page')
-  set page(_page: number | string | any) {
-    _page = parseInt(_page, 10) || 1
-    const originalPage = _page
-
-    if (this._pdf) {
-      _page = this.getValidPageNumber(_page)
-    }
-
-    this._page = _page
-    if (originalPage !== _page) {
-      this.pageChange.emit(_page)
-    }
-  }
-
-  @Input('render-text')
-  set renderText(renderText: boolean) {
-    this._renderText = renderText
-  }
-
-  @Input('render-text-mode')
-  set renderTextMode(renderTextMode: RenderTextMode) {
-    this._renderTextMode = renderTextMode
-  }
-
-  @Input('original-size')
-  set originalSize(originalSize: boolean) {
-    this._originalSize = originalSize
-  }
-
-  @Input('show-all')
-  set showAll(value: boolean) {
-    this._showAll = value
-  }
-
-  @Input('stick-to-page')
-  set stickToPage(value: boolean) {
-    this._stickToPage = value
-  }
-
-  @Input('zoom')
-  set zoom(value: number) {
-    if (value <= 0) {
-      return
-    }
-
-    this._zoom = value
-  }
-
-  get zoom() {
-    return this._zoom
-  }
-
-  @Input('zoom-scale')
-  set zoomScale(value: ZoomScale) {
-    this._zoomScale = value
-  }
-
-  get zoomScale() {
-    return this._zoomScale
-  }
-
-  @Input('rotation')
-  set rotation(value: number) {
-    if (!(typeof value === 'number' && value % 90 === 0)) {
-      console.warn('Invalid pages rotation angle.')
-      return
-    }
-
-    this._rotation = value
-  }
-
-  @Input('external-link-target')
-  set externalLinkTarget(value: string) {
-    this._externalLinkTarget = value
-  }
-
-  @Input('autoresize')
-  set autoresize(value: boolean) {
-    this._canAutoResize = Boolean(value)
-  }
-
-  @Input('fit-to-page')
-  set fitToPage(value: boolean) {
-    this._fitToPage = Boolean(value)
-  }
-
-  @Input('show-borders')
-  set showBorders(value: boolean) {
-    this._showBorders = Boolean(value)
-  }
-
-  static getLinkTarget(type: string) {
-    switch (type) {
-      case 'blank':
-        return (PDFJSViewer as any).LinkTarget.BLANK
-      case 'none':
-        return (PDFJSViewer as any).LinkTarget.NONE
-      case 'self':
-        return (PDFJSViewer as any).LinkTarget.SELF
-      case 'parent':
-        return (PDFJSViewer as any).LinkTarget.PARENT
-      case 'top':
-        return (PDFJSViewer as any).LinkTarget.TOP
-    }
-
-    return null
-  }
-
-  constructor(
-    private element: ElementRef<HTMLElement>,
-    private ngZone: NgZone
-  ) {
-    PDFJS.GlobalWorkerOptions['workerSrc'] = 'assets/js/pdf.worker.min.js'
-  }
-
-  ngAfterViewChecked(): void {
-    if (this.isInitialized) {
-      return
-    }
-
-    const offset = this.pdfViewerContainer.nativeElement.offsetParent
-
-    if (this.isVisible === true && offset == null) {
-      this.isVisible = false
-      return
-    }
-
-    if (this.isVisible === false && offset != null) {
-      this.isVisible = true
-
-      setTimeout(() => {
-        this.initialize()
-        this.ngOnChanges({ src: this.src } as any)
-      })
-    }
-  }
-
-  ngOnInit() {
-    this.initialize()
-    this.setupResizeListener()
-  }
-
-  ngOnDestroy() {
-    this.clear()
-    this.destroy$.next()
-    this.loadingTask = null
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.isVisible) {
-      return
-    }
-
-    if ('src' in changes) {
-      this.loadPDF()
-    } else if (this._pdf) {
-      if ('renderText' in changes || 'showAll' in changes) {
-        this.setupViewer()
-        this.resetPdfDocument()
-      }
-      if ('page' in changes) {
-        const { page } = changes
-        if (page.currentValue === this._latestScrolledPage) {
-          return
-        }
-
-        // New form of page changing: The viewer will now jump to the specified page when it is changed.
-        // This behavior is introduced by using the PDFSinglePageViewer
-        this.pdfViewer.scrollPageIntoView({ pageNumber: this._page })
-      }
-
-      this.update()
-    }
-  }
-
-  public updateSize() {
-    from(
-      this._pdf!.getPage(
-        this.pdfViewer.currentPageNumber
-      ) as unknown as Promise<PDFPageProxy>
-    )
-      .pipe(takeUntil(this.destroy$))
-      .subscribe({
-        next: (page: PDFPageProxy) => {
-          const rotation = this._rotation + page.rotate
-          const viewportWidth =
-            (page as any).getViewport({
-              scale: this._zoom,
-              rotation,
-            }).width * PdfViewerComponent.CSS_UNITS
-          let scale = this._zoom
-          let stickToPage = true
-
-          // Scale the document when it shouldn't be in original size or doesn't fit into the viewport
-          if (
-            !this._originalSize ||
-            (this._fitToPage &&
-              viewportWidth > this.pdfViewerContainer.nativeElement.clientWidth)
-          ) {
-            const viewPort = (page as any).getViewport({ scale: 1, rotation })
-            scale = this.getScale(viewPort.width, viewPort.height)
-            stickToPage = !this._stickToPage
-          }
-
-          setTimeout(() => {
-            this.pdfViewer.currentScale = scale
-          })
-        },
-      })
-  }
-
-  public clear() {
-    if (this.loadingTask && !this.loadingTask.destroyed) {
-      this.loadingTask.destroy()
-    }
-
-    if (this._pdf) {
-      this._latestScrolledPage = 0
-      this._pdf.destroy()
-      this._pdf = undefined
-    }
-  }
-
-  private getPDFLinkServiceConfig() {
-    const linkTarget = PdfViewerComponent.getLinkTarget(
-      this._externalLinkTarget
-    )
-
-    if (linkTarget) {
-      return { externalLinkTarget: linkTarget }
-    }
-
-    return {}
-  }
-
-  private initEventBus() {
-    this.eventBus = createEventBus(PDFJSViewer, this.destroy$)
-
-    fromEvent<CustomEvent>(this.eventBus, 'pagerendered')
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((event) => {
-        this.pageRendered.emit(event)
-      })
-
-    fromEvent<CustomEvent>(this.eventBus, 'pagesinit')
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((event) => {
-        this.pageInitialized.emit(event)
-      })
-
-    fromEvent(this.eventBus, 'pagechanging')
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(({ pageNumber }: any) => {
-        if (this.pageScrollTimeout) {
-          clearTimeout(this.pageScrollTimeout)
-        }
-
-        this.pageScrollTimeout = window.setTimeout(() => {
-          this._latestScrolledPage = pageNumber
-          this.pageChange.emit(pageNumber)
-        }, 100)
-      })
-
-    fromEvent<CustomEvent>(this.eventBus, 'textlayerrendered')
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((event) => {
-        this.textLayerRendered.emit(event)
-      })
-  }
-
-  private initPDFServices() {
-    this.pdfLinkService = new PDFJSViewer.PDFLinkService({
-      eventBus: this.eventBus,
-      ...this.getPDFLinkServiceConfig(),
-    })
-  }
-
-  private getPDFOptions(): PDFViewerOptions {
-    return {
-      eventBus: this.eventBus,
-      container: this.element.nativeElement.querySelector('div')!,
-      removePageBorders: !this._showBorders,
-      linkService: this.pdfLinkService,
-      textLayerMode: this._renderText
-        ? this._renderTextMode
-        : RenderTextMode.DISABLED,
-      imageResourcesPath: this._imageResourcesPath,
-    }
-  }
-
-  private setupViewer() {
-    PDFJS['disableTextLayer'] = !this._renderText
-
-    this.initPDFServices()
-
-    if (this._showAll) {
-      this.pdfViewer = new PDFJSViewer.PDFViewer(this.getPDFOptions())
-    } else {
-      this.pdfViewer = new PDFJSViewer.PDFSinglePageViewer(this.getPDFOptions())
-    }
-    this.pdfLinkService.setViewer(this.pdfViewer)
-
-    this.pdfViewer._currentPageNumber = this._page
-  }
-
-  private getValidPageNumber(page: number): number {
-    if (page < 1) {
-      return 1
-    }
-
-    if (page > this._pdf!.numPages) {
-      return this._pdf!.numPages
-    }
-
-    return page
-  }
-
-  private getDocumentParams() {
-    const srcType = typeof this.src
-
-    if (!this._cMapsUrl) {
-      return this.src
-    }
-
-    const params: any = {
-      cMapUrl: this._cMapsUrl,
-      cMapPacked: true,
-      enableXfa: true,
-    }
-    params.isEvalSupported = false
-
-    if (srcType === 'string') {
-      params.url = this.src
-    } else if (srcType === 'object') {
-      if ((this.src as any).byteLength !== undefined) {
-        params.data = this.src
-      } else {
-        Object.assign(params, this.src)
-      }
-    }
-
-    return params
-  }
-
-  private loadPDF() {
-    if (!this.src) {
-      return
-    }
-
-    if (this.lastLoaded === this.src) {
-      this.update()
-      return
-    }
-
-    this.clear()
-
-    if (this.pdfViewer) {
-      this.pdfViewer._resetView()
-      this.pdfViewer = null
-    }
-
-    this.setupViewer()
-
-    try {
-      this.loadingTask = PDFJS.getDocument(this.getDocumentParams())
-
-      this.loadingTask!.onProgress = (progressData: PDFProgressData) => {
-        this.onProgress.emit(progressData)
-      }
-
-      const src = this.src
-
-      from(this.loadingTask!.promise as Promise<PDFDocumentProxy>)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe({
-          next: (pdf) => {
-            this._pdf = pdf
-            this.lastLoaded = src
-
-            this.afterLoadComplete.emit(pdf)
-            this.resetPdfDocument()
-
-            this.update()
-          },
-          error: (error) => {
-            this.lastLoaded = null
-            this.onError.emit(error)
-          },
-        })
-    } catch (e) {
-      this.onError.emit(e)
-    }
-  }
-
-  private update() {
-    this.page = this._page
-
-    this.render()
-  }
-
-  private render() {
-    this._page = this.getValidPageNumber(this._page)
-
-    if (
-      this._rotation !== 0 ||
-      this.pdfViewer.pagesRotation !== this._rotation
-    ) {
-      setTimeout(() => {
-        this.pdfViewer.pagesRotation = this._rotation
-      })
-    }
-
-    if (this._stickToPage) {
-      setTimeout(() => {
-        this.pdfViewer.currentPageNumber = this._page
-      })
-    }
-
-    this.updateSize()
-  }
-
-  private getScale(viewportWidth: number, viewportHeight: number) {
-    const borderSize = this._showBorders
-      ? 2 * PdfViewerComponent.BORDER_WIDTH
-      : 0
-    const pdfContainerWidth =
-      this.pdfViewerContainer.nativeElement.clientWidth - borderSize
-    const pdfContainerHeight =
-      this.pdfViewerContainer.nativeElement.clientHeight - borderSize
-
-    if (
-      pdfContainerHeight === 0 ||
-      viewportHeight === 0 ||
-      pdfContainerWidth === 0 ||
-      viewportWidth === 0
-    ) {
-      return 1
-    }
-
-    let ratio = 1
-    switch (this._zoomScale) {
-      case 'page-fit':
-        ratio = Math.min(
-          pdfContainerHeight / viewportHeight,
-          pdfContainerWidth / viewportWidth
-        )
-        break
-      case 'page-height':
-        ratio = pdfContainerHeight / viewportHeight
-        break
-      case 'page-width':
-      default:
-        ratio = pdfContainerWidth / viewportWidth
-        break
-    }
-
-    return (this._zoom * ratio) / PdfViewerComponent.CSS_UNITS
-  }
-
-  private resetPdfDocument() {
-    this.pdfLinkService.setDocument(this._pdf, null)
-    this.pdfViewer.setDocument(this._pdf!)
-  }
-
-  private initialize(): void {
-    if (!this.isVisible) {
-      return
-    }
-
-    this.isInitialized = true
-    this.initEventBus()
-    this.setupViewer()
-  }
-
-  private setupResizeListener(): void {
-    this.ngZone.runOutsideAngular(() => {
-      fromEvent(window, 'resize')
-        .pipe(
-          debounceTime(100),
-          filter(() => this._canAutoResize && !!this._pdf),
-          takeUntil(this.destroy$)
-        )
-        .subscribe(() => {
-          this.updateSize()
-        })
-    })
-  }
-}

src-ui/src/app/components/common/pdf-viewer/typings.ts

@@ -1,17 +0,0 @@
-export type PDFPageProxy =
-  import('pdfjs-dist/types/src/display/api').PDFPageProxy
-export type PDFSource =
-  import('pdfjs-dist/types/src/display/api').DocumentInitParameters
-export type PDFDocumentProxy =
-  import('pdfjs-dist/types/src/display/api').PDFDocumentProxy
-export type PDFDocumentLoadingTask =
-  import('pdfjs-dist/types/src/display/api').PDFDocumentLoadingTask
-export type PDFViewerOptions =
-  import('pdfjs-dist/types/web/pdf_viewer').PDFViewerOptions
-
-export interface PDFProgressData {
-  loaded: number
-  total: number
-}
-
-export type ZoomScale = 'page-height' | 'page-fit' | 'page-width'

src-ui/src/app/components/common/pdf-viewer/utils/event-bus-utils.ts

@@ -1,182 +0,0 @@
-/**
- * This file is taken and modified from https://github.com/VadimDez/ng2-pdf-viewer/blob/10.0.0/src/app/pdf-viewer/utils/event-bus-utils.ts
- * Created by vadimdez on 21/06/16.
- */
-import { fromEvent, Subject } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
-
-import type { EventBus } from 'pdfjs-dist/web/pdf_viewer'
-
-// interface EventBus {
-//   on(eventName: string, listener: Function): void;
-//   off(eventName: string, listener: Function): void;
-//   _listeners: any;
-//   dispatch(eventName: string, data: Object): void;
-//   _on(eventName: any, listener: any, options?: null): void;
-//   _off(eventName: any, listener: any, options?: null): void;
-// }
-
-export function createEventBus(pdfJsViewer: any, destroy$: Subject<void>) {
-  const globalEventBus: EventBus = new pdfJsViewer.EventBus()
-  attachDOMEventsToEventBus(globalEventBus, destroy$)
-  return globalEventBus
-}
-
-function attachDOMEventsToEventBus(
-  eventBus: EventBus,
-  destroy$: Subject<void>
-): void {
-  fromEvent(eventBus, 'documentload')
-    .pipe(takeUntil(destroy$))
-    .subscribe(() => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('documentload', true, true, {})
-      window.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'pagerendered')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ pageNumber, cssTransform, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('pagerendered', true, true, {
-        pageNumber,
-        cssTransform,
-      })
-      source.div.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'textlayerrendered')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ pageNumber, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('textlayerrendered', true, true, { pageNumber })
-      source.textLayerDiv?.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'pagechanging')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ pageNumber, source }: any) => {
-      const event = document.createEvent('UIEvents') as any
-      event.initEvent('pagechanging', true, true)
-      /* tslint:disable:no-string-literal */
-      event['pageNumber'] = pageNumber
-      source.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'pagesinit')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('pagesinit', true, true, null)
-      source.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'pagesloaded')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ pagesCount, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('pagesloaded', true, true, { pagesCount })
-      source.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'scalechange')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ scale, presetValue, source }: any) => {
-      const event = document.createEvent('UIEvents') as any
-      event.initEvent('scalechange', true, true)
-      /* tslint:disable:no-string-literal */
-      event['scale'] = scale
-      /* tslint:disable:no-string-literal */
-      event['presetValue'] = presetValue
-      source.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'updateviewarea')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ location, source }: any) => {
-      const event = document.createEvent('UIEvents') as any
-      event.initEvent('updateviewarea', true, true)
-      event['location'] = location
-      source.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'find')
-    .pipe(takeUntil(destroy$))
-    .subscribe(
-      ({
-        source,
-        type,
-        query,
-        phraseSearch,
-        caseSensitive,
-        highlightAll,
-        findPrevious,
-      }: any) => {
-        if (source === window) {
-          return // event comes from FirefoxCom, no need to replicate
-        }
-        const event = document.createEvent('CustomEvent')
-        event.initCustomEvent('find' + type, true, true, {
-          query,
-          phraseSearch,
-          caseSensitive,
-          highlightAll,
-          findPrevious,
-        })
-        window.dispatchEvent(event)
-      }
-    )
-
-  fromEvent(eventBus, 'attachmentsloaded')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ attachmentsCount, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('attachmentsloaded', true, true, {
-        attachmentsCount,
-      })
-      source.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'sidebarviewchanged')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ view, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('sidebarviewchanged', true, true, { view })
-      source.outerContainer.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'pagemode')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ mode, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('pagemode', true, true, { mode })
-      source.pdfViewer.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'namedaction')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ action, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('namedaction', true, true, { action })
-      source.pdfViewer.container.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'presentationmodechanged')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ active, switchInProgress }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('presentationmodechanged', true, true, {
-        active,
-        switchInProgress,
-      })
-      window.dispatchEvent(event)
-    })
-
-  fromEvent(eventBus, 'outlineloaded')
-    .pipe(takeUntil(destroy$))
-    .subscribe(({ outlineCount, source }: any) => {
-      const event = document.createEvent('CustomEvent')
-      event.initCustomEvent('outlineloaded', true, true, { outlineCount })
-      source.container.dispatchEvent(event)
-    })
-}

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

@@ -19,7 +19,7 @@
         @for (action of PermissionAction | keyvalue; track action) {
           <div class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type, action.key)" placement="left" triggers="mouseenter:mouseleave">
             <input type="checkbox" class="form-check-input" id="{{type}}_{{action.key}}" formControlName="{{action.key}}">
-            <label class="form-check-label visually-hidden" for="{{type}}_{{action.key}}" i18n>{{action.key}}</label>
+            <label class="form-check-label visually-hidden" for="{{type}}_{{action.key}}">{{action.key}}</label>
           </div>
         }
       </li>

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -13,13 +13,13 @@
         </div>
       }
       @if (!requiresPassword) {
-        <pngx-pdf-viewer
+        <pdf-viewer
           [src]="previewURL"
           [original-size]="false"
-          [show-borders]="true"
+          [show-borders]="false"
           [show-all]="true"
           (error)="onError($event)">
-        </pngx-pdf-viewer>
+        </pdf-viewer>
       }
     }
   }

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { PreviewPopupComponent } from './preview-popup.component'
-import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
 import { By } from '@angular/platform-browser'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -9,6 +8,7 @@ import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
 
 const doc = {
   id: 10,
@@ -25,10 +25,11 @@ describe('PreviewPopupComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PreviewPopupComponent, PdfViewerComponent, SafeUrlPipe],
+      declarations: [PreviewPopupComponent, SafeUrlPipe],
       imports: [
         HttpClientTestingModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        PdfViewerModule,
       ],
     })
     settingsService = TestBed.inject(SettingsService)
@@ -69,7 +70,7 @@ describe('PreviewPopupComponent', () => {
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).toBeNull()
-    expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
+    expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
   })
 
   it('should show lock icon on password error', () => {

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

@@ -87,7 +87,7 @@ describe('SystemStatusDialogComponent', () => {
     jest.spyOn(clipboard, 'copy')
     component.copy()
     expect(clipboard.copy).toHaveBeenCalledWith(
-      JSON.stringify(component.status)
+      JSON.stringify(component.status, null, 4)
     )
     expect(component.copied).toBeTruthy()
     tick(3000)

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.ts

@@ -28,7 +28,7 @@ export class SystemStatusDialogComponent {
   }
 
   public copy() {
-    this.clipboard.copy(JSON.stringify(this.status))
+    this.clipboard.copy(JSON.stringify(this.status, null, 4))
     this.copied = true
     setTimeout(() => {
       this.copied = false

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

@@ -34,32 +34,32 @@
               <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': i > 1 }">
                 @switch (field) {
                   @case (DisplayField.ADDED) {
-                    <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.added | customDate}}</a>
+                    <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.added | customDate}}</a>
                   }
                   @case (DisplayField.CREATED) {
-                    <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a>
+                    <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.created_date | customDate}}</a>
                   }
                   @case (DisplayField.TITLE) {
-                    <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
+                    <a routerLink="/documents/{{doc.id}}" title="Open document" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
                   }
                   @case (DisplayField.CORRESPONDENT) {
                     @if (doc.correspondent) {
-                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)">{{(doc.correspondent$ | async)?.name}}</a>
+                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)" title="Filter by correspondent" i18n-title>{{(doc.correspondent$ | async)?.name}}</a>
                     }
                   }
                   @case (DisplayField.TAGS) {
                     @for (t of doc.tags$ | async; track t) {
-                      <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t.id, $event)"></pngx-tag>
+                      <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t.id, $event)" [clickable]="true" linkTitle="Filter by tag" i18n-title></pngx-tag>
                     }
                   }
                   @case (DisplayField.DOCUMENT_TYPE) {
                     @if (doc.document_type) {
-                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)">{{(doc.document_type$ | async)?.name}}</a>
+                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)" title="Filter by document type" i18n-title>{{(doc.document_type$ | async)?.name}}</a>
                     }
                   }
                   @case (DisplayField.STORAGE_PATH) {
                     @if (doc.storage_path) {
-                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)">{{(doc.storage_path$ | async)?.name}}</a>
+                      <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)" title="Filter by storage path" i18n-title>{{(doc.storage_path$ | async)?.name}}</a>
                     }
                   }
                 }

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

@@ -1,5 +1,5 @@
 <pngx-page-header [(title)]="title">
-  @if (contentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
+  @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
     @if (previewNumPages) {
       <div class="input-group input-group-sm d-none d-md-flex">
         <div class="input-group-text" i18n>Page</div>
@@ -45,21 +45,25 @@
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
-      <button ngbDropdownItem (click)="redoOcr()" [disabled]="!userCanEdit">
+      <button ngbDropdownItem (click)="reprocess()" [disabled]="!userCanEdit">
-        <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<span i18n>Redo OCR</span>
+        <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<span i18n>Reprocess</span>
       </button>
 
       <button ngbDropdownItem (click)="moreLike()">
         <i-bs width="1em" height="1em" name="diagram-3"></i-bs>&nbsp;<span i18n>More like this</span>
       </button>
 
-      <button ngbDropdownItem (click)="splitDocument()" [disabled]="contentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
+      <button ngbDropdownItem (click)="splitDocument()" [disabled]="originalContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
         <i-bs width="1em" height="1em" name="scissors"></i-bs>&nbsp;<span i18n>Split</span>
       </button>
 
-      <button ngbDropdownItem (click)="rotateDocument()" [disabled]="!userIsOwner || metadata?.original_mime_type !== 'application/pdf'">
+      <button ngbDropdownItem (click)="rotateDocument()" [disabled]="!userIsOwner || originalContentRenderType !== ContentRenderType.PDF">
         <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
       </button>
+
+      <button ngbDropdownItem (click)="deletePages()" [disabled]="!userIsOwner || originalContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
+        <i-bs name="file-earmark-minus"></i-bs>&nbsp;<ng-container i18n>Delete page(s)</ng-container>
+      </button>
     </div>
   </div>
 
@@ -105,13 +109,13 @@
               <pngx-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" [horizontal]="true" formControlName='archive_serial_number'></pngx-input-number>
               <pngx-input-date i18n-title title="Date created" formControlName="created_date" [suggestions]="suggestions?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
               [error]="error?.created_date"></pngx-input-date>
-              <pngx-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
+              <pngx-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Correspondent)"
               (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></pngx-input-select>
-              <pngx-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
+              <pngx-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.DocumentType)"
               (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></pngx-input-select>
-              <pngx-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
+              <pngx-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.StoragePath)"
               (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
-              <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
+              <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Tag)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
               @for (fieldInstance of document?.custom_fields; track fieldInstance.field; let i = $index) {
                 <div [formGroup]="customFieldFormFields.controls[i]">
                   @switch (getCustomFieldFromInstance(fieldInstance)?.data_type) {
@@ -343,11 +347,11 @@
       </div>
     </div>
   } @else {
-    @switch (contentRenderType) {
+    @switch (archiveContentRenderType) {
       @case (ContentRenderType.PDF) {
         @if (!useNativePdfViewer) {
           <div class="preview-sticky pdf-viewer-container">
-            <pngx-pdf-viewer
+            <pdf-viewer
               [src]="{ url: previewUrl, password: password }"
               [original-size]="false"
               [show-borders]="true"
@@ -357,7 +361,7 @@
               [zoom]="previewZoomSetting"
               (error)="onError($event)"
               (after-load-complete)="pdfPreviewLoaded($event)">
-            </pngx-pdf-viewer>
+            </pdf-viewer>
           </div>
         } @else {
           <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>

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

@@ -5,16 +5,18 @@
 }
 
 .pdf-viewer-container {
+  padding-top: 10px;
   background-color: gray;
 
-  pngx-pdf-viewer {
+  pdf-viewer {
     width: 100%;
     height: 100%;
   }
 }
 
-::ng-deep .pngx-pdf-viewer-container .page {
+::ng-deep .ng2-pdf-viewer-container .page {
-  --page-margin: 10px auto;
+  --page-margin: 0 auto 10px;
+  --page-border: 0;
 }
 
 ::ng-deep form .ng-select-taggable {

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

@@ -76,11 +76,13 @@ import { ShareLinksDropdownComponent } from '../common/share-links-dropdown/shar
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { PdfViewerComponent } from '../common/pdf-viewer/pdf-viewer.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { environment } from 'src/environments/environment'
 import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
+import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
+import { PdfViewerModule } from 'ng2-pdf-viewer'
+import { DataType } from 'src/app/data/datatype'
 
 const doc: Document = {
   id: 3,
@@ -176,9 +178,9 @@ describe('DocumentDetailComponent', () => {
         SafeUrlPipe,
         ShareLinksDropdownComponent,
         CustomFieldsDropdownComponent,
-        PdfViewerComponent,
         SplitConfirmDialogComponent,
         RotateConfirmDialogComponent,
+        DeletePagesConfirmDialogComponent,
       ],
       providers: [
         DocumentTitlePipe,
@@ -265,6 +267,7 @@ describe('DocumentDetailComponent', () => {
         ReactiveFormsModule,
         NgbModalModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        PdfViewerModule,
       ],
     }).compileComponents()
 
@@ -649,7 +652,7 @@ describe('DocumentDetailComponent', () => {
     ])
   })
 
-  it('should support redo ocr, confirm and close modal after started', () => {
+  it('should support reprocess, confirm and close modal after started', () => {
     initNormally()
     const bulkEditSpy = jest.spyOn(documentService, 'bulkEdit')
     bulkEditSpy.mockReturnValue(of(true))
@@ -657,10 +660,10 @@ describe('DocumentDetailComponent', () => {
     modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
     const modalSpy = jest.spyOn(modalService, 'open')
     const toastSpy = jest.spyOn(toastService, 'showInfo')
-    component.redoOcr()
+    component.reprocess()
     const modalCloseSpy = jest.spyOn(openModal, 'close')
     openModal.componentInstance.confirmClicked.next()
-    expect(bulkEditSpy).toHaveBeenCalledWith([doc.id], 'redo_ocr', {})
+    expect(bulkEditSpy).toHaveBeenCalledWith([doc.id], 'reprocess', {})
     expect(modalSpy).toHaveBeenCalled()
     expect(toastSpy).toHaveBeenCalled()
     expect(modalCloseSpy).toHaveBeenCalled()
@@ -672,7 +675,7 @@ describe('DocumentDetailComponent', () => {
     let openModal: NgbModalRef
     modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
     const toastSpy = jest.spyOn(toastService, 'showError')
-    component.redoOcr()
+    component.reprocess()
     const modalCloseSpy = jest.spyOn(openModal, 'close')
     bulkEditSpy.mockReturnValue(throwError(() => new Error('error occurred')))
     openModal.componentInstance.confirmClicked.next()
@@ -781,10 +784,9 @@ describe('DocumentDetailComponent', () => {
     const object = {
       id: 22,
       name: 'Correspondent22',
-      last_correspondence: new Date().toISOString(),
     } as Correspondent
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.filterDocuments([object])
+    component.filterDocuments([object], DataType.Correspondent)
     expect(qfSpy).toHaveBeenCalledWith([
       {
         rule_type: FILTER_CORRESPONDENT,
@@ -797,7 +799,7 @@ describe('DocumentDetailComponent', () => {
     initNormally()
     const object = { id: 22, name: 'DocumentType22' } as DocumentType
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.filterDocuments([object])
+    component.filterDocuments([object], DataType.DocumentType)
     expect(qfSpy).toHaveBeenCalledWith([
       {
         rule_type: FILTER_DOCUMENT_TYPE,
@@ -814,7 +816,7 @@ describe('DocumentDetailComponent', () => {
       path: '/foo/bar/',
     } as StoragePath
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.filterDocuments([object])
+    component.filterDocuments([object], DataType.StoragePath)
     expect(qfSpy).toHaveBeenCalledWith([
       {
         rule_type: FILTER_STORAGE_PATH,
@@ -840,7 +842,7 @@ describe('DocumentDetailComponent', () => {
       text_color: '#000000',
     } as Tag
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.filterDocuments([object1, object2])
+    component.filterDocuments([object1, object2], DataType.Tag)
     expect(qfSpy).toHaveBeenCalledWith([
       {
         rule_type: FILTER_HAS_TAGS_ALL,
@@ -885,7 +887,7 @@ describe('DocumentDetailComponent', () => {
     jest.spyOn(settingsService, 'get').mockReturnValue(false)
     expect(component.useNativePdfViewer).toBeFalsy()
     fixture.detectChanges()
-    expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
+    expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
   })
 
   it('should display native pdf viewer if enabled', () => {
@@ -1035,7 +1037,9 @@ describe('DocumentDetailComponent', () => {
     component.metadata = { has_archive_version: true }
     initNormally()
     fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(component.ContentRenderType.PDF)
+    expect(component.archiveContentRenderType).toEqual(
+      component.ContentRenderType.PDF
+    )
     expect(
       fixture.debugElement.query(By.css('pdf-viewer-container'))
     ).not.toBeUndefined()
@@ -1045,7 +1049,7 @@ describe('DocumentDetailComponent', () => {
       original_mime_type: 'text/plain',
     }
     fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(
+    expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Text
     )
     expect(
@@ -1057,7 +1061,7 @@ describe('DocumentDetailComponent', () => {
       original_mime_type: 'image/jpg',
     }
     fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(
+    expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Image
     )
     expect(
@@ -1070,7 +1074,7 @@ describe('DocumentDetailComponent', () => {
         'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
     }
     fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(
+    expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Other
     )
     expect(
@@ -1130,6 +1134,31 @@ describe('DocumentDetailComponent', () => {
     req.flush(true)
   })
 
+  it('should support delete pages', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    initNormally()
+    component.deletePages()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.documentID = doc.id
+    modal.componentInstance.pages = [1, 2]
+    modal.componentInstance.confirm()
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    expect(req.request.body).toEqual({
+      documents: [doc.id],
+      method: 'delete_pages',
+      parameters: { pages: [1, 2] },
+    })
+    req.error(new ProgressEvent('failed'))
+    modal.componentInstance.confirm()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.flush(true)
+  })
+
   it('should support keyboard shortcuts', () => {
     initNormally()
 

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

@@ -66,10 +66,12 @@ import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import { CustomField, CustomFieldDataType } 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 { PDFDocumentProxy } from '../common/pdf-viewer/typings'
 import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
+import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
 import { HotKeyService } from 'src/app/services/hot-key.service'
+import { PDFDocumentProxy } from 'ng2-pdf-viewer'
+import { DataType } from 'src/app/data/datatype'
 
 enum DocumentDetailNavIDs {
   Details = 1,
@@ -170,6 +172,8 @@ export class DocumentDetailComponent
 
   public readonly ContentRenderType = ContentRenderType
 
+  public readonly DataType = DataType
+
   @ViewChild('nav') nav: NgbNav
   @ViewChild('pdfPreview') set pdfPreview(element) {
     // this gets called when component added or removed from DOM
@@ -216,19 +220,27 @@ export class DocumentDetailComponent
     return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
   }
 
-  get contentRenderType(): ContentRenderType {
+  get archiveContentRenderType(): ContentRenderType {
-    if (!this.metadata) return ContentRenderType.Unknown
+    return this.getRenderType(
-    const contentType = this.metadata?.has_archive_version
+      this.metadata?.has_archive_version
-      ? 'application/pdf'
+        ? 'application/pdf'
-      : this.metadata?.original_mime_type
+        : this.metadata?.original_mime_type
+    )
+  }
 
-    if (contentType === 'application/pdf') {
+  get originalContentRenderType(): ContentRenderType {
+    return this.getRenderType(this.metadata?.original_mime_type)
+  }
+
+  private getRenderType(mimeType: string): ContentRenderType {
+    if (!mimeType) return ContentRenderType.Unknown
+    if (mimeType === 'application/pdf') {
       return ContentRenderType.PDF
     } else if (
-      ['text/plain', 'application/csv', 'text/csv'].includes(contentType)
+      ['text/plain', 'application/csv', 'text/csv'].includes(mimeType)
     ) {
       return ContentRenderType.Text
-    } else if (contentType?.indexOf('image/') === 0) {
+    } else if (mimeType?.indexOf('image/') === 0) {
       return ContentRenderType.Image
     }
     return ContentRenderType.Other
@@ -800,23 +812,23 @@ export class DocumentDetailComponent
     ])
   }
 
-  redoOcr() {
+  reprocess() {
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })
-    modal.componentInstance.title = $localize`Redo OCR confirm`
+    modal.componentInstance.title = $localize`Reprocess confirm`
-    modal.componentInstance.messageBold = $localize`This operation will permanently redo OCR for this document.`
+    modal.componentInstance.messageBold = $localize`This operation will permanently recreate the archive file for this document.`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.message = $localize`The archive file will be re-generated with the current settings.`
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked.subscribe(() => {
       modal.componentInstance.buttonsEnabled = false
       this.documentsService
-        .bulkEdit([this.document.id], 'redo_ocr', {})
+        .bulkEdit([this.document.id], 'reprocess', {})
         .subscribe({
           next: () => {
             this.toastService.showInfo(
-              $localize`Redo OCR operation will begin in the background. Close and re-open or reload this document after the operation has completed to see new content.`
+              $localize`Reprocess operation will begin in the background. Close and re-open or reload this document after the operation has completed to see new content.`
             )
             if (modal) {
               modal.close()
@@ -989,7 +1001,7 @@ export class DocumentDetailComponent
     )
   }
 
-  filterDocuments(items: ObjectWithId[] | NgbDateStruct[]) {
+  filterDocuments(items: ObjectWithId[] | NgbDateStruct[], type?: DataType) {
     const filterRules: FilterRule[] = items.flatMap((i) => {
       if (i.hasOwnProperty('year')) {
         const isoDateAdapter = new ISODateAdapter()
@@ -1008,30 +1020,28 @@ export class DocumentDetailComponent
             value: dateBefore.toISOString().substring(0, 10),
           },
         ]
-      } else if (i.hasOwnProperty('last_correspondence')) {
+      }
-        // Correspondent
+      switch (type) {
-        return {
+        case DataType.Correspondent:
-          rule_type: FILTER_CORRESPONDENT,
+          return {
-          value: (i as Correspondent).id.toString(),
+            rule_type: FILTER_CORRESPONDENT,
-        }
+            value: (i as Correspondent).id.toString(),
-      } else if (i.hasOwnProperty('path')) {
+          }
-        // Storage Path
+        case DataType.DocumentType:
-        return {
+          return {
-          rule_type: FILTER_STORAGE_PATH,
+            rule_type: FILTER_DOCUMENT_TYPE,
-          value: (i as StoragePath).id.toString(),
+            value: (i as DocumentType).id.toString(),
-        }
+          }
-      } else if (i.hasOwnProperty('is_inbox_tag')) {
+        case DataType.StoragePath:
-        // Tag
+          return {
-        return {
+            rule_type: FILTER_STORAGE_PATH,
-          rule_type: FILTER_HAS_TAGS_ALL,
+            value: (i as StoragePath).id.toString(),
-          value: (i as Tag).id.toString(),
+          }
-        }
+        case DataType.Tag:
-      } else {
+          return {
-        // Document Type, has no specific props
+            rule_type: FILTER_HAS_TAGS_ALL,
-        return {
+            value: (i as Tag).id.toString(),
-          rule_type: FILTER_DOCUMENT_TYPE,
+          }
-          value: (i as DocumentType).id.toString(),
-        }
       }
     })
 
@@ -1138,7 +1148,6 @@ export class DocumentDetailComponent
     })
     modal.componentInstance.title = $localize`Rotate confirm`
     modal.componentInstance.messageBold = $localize`This operation will permanently rotate the original version of the current document.`
-    modal.componentInstance.message = $localize`This will alter the original copy.`
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.documentID = this.document.id
     modal.componentInstance.showPDFNote = false
@@ -1173,4 +1182,41 @@ export class DocumentDetailComponent
           })
       })
   }
+
+  deletePages() {
+    let modal = this.modalService.open(DeletePagesConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Delete pages confirm`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete the selected pages from the original document.`
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.documentID = this.document.id
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.documentsService
+          .bulkEdit([this.document.id], 'delete_pages', {
+            pages: modal.componentInstance.pages,
+          })
+          .pipe(first(), takeUntil(this.unsubscribeNotifier))
+          .subscribe({
+            next: () => {
+              this.toastService.showInfo(
+                $localize`Delete pages operation will begin in the background. Close and re-open or reload this document after the operation has completed to see the changes.`
+              )
+              modal.close()
+            },
+            error: (error) => {
+              if (modal) {
+                modal.componentInstance.buttonsEnabled = true
+              }
+              this.toastService.showError(
+                $localize`Error executing delete pages operation`,
+                error
+              )
+            },
+          })
+      })
+  }
 }

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

@@ -32,7 +32,7 @@
                             @for (change of entry.changes | keyvalue; track change.key) {
                                 @if (change.value["type"] === 'm2m') {
                                     <li>
-                                        <span class="fst-italic" i18n>{{ change.value["operation"] | titlecase }}</span>&nbsp;
+                                        <span class="fst-italic">{{ change.value["operation"] | titlecase }}</span>&nbsp;
                                         <span>{{ change.key | titlecase }}</span>:&nbsp;
                                         <code class="text-primary">{{ change.value["objects"].join(', ') }}</code>
                                     </li>

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

@@ -107,8 +107,8 @@
                 <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
               </button>
               <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
-                <button ngbDropdownItem (click)="redoOcrSelected()" [disabled]="!userCanEditAll">
+                <button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll">
-                  <i-bs name="body-text"></i-bs>&nbsp;<ng-container i18n>Redo OCR</ng-container>
+                  <i-bs name="body-text"></i-bs>&nbsp;<ng-container i18n>Reprocess</ng-container>
                 </button>
                 <button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll">
                   <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>

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

@@ -961,7 +961,7 @@ describe('BulkEditorComponent', () => {
       .mockReturnValue(true)
     component.showConfirmationDialogs = true
     fixture.detectChanges()
-    component.redoOcrSelected()
+    component.reprocessSelected()
     expect(modal).not.toBeUndefined()
     modal.componentInstance.confirm()
     let req = httpTestingController.expectOne(
@@ -970,7 +970,7 @@ describe('BulkEditorComponent', () => {
     req.flush(true)
     expect(req.request.body).toEqual({
       documents: [3, 4],
-      method: 'redo_ocr',
+      method: 'reprocess',
       parameters: {},
     })
     httpTestingController.match(

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

@@ -744,20 +744,20 @@ export class BulkEditorComponent
       })
   }
 
-  redoOcrSelected() {
+  reprocessSelected() {
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })
-    modal.componentInstance.title = $localize`Redo OCR confirm`
+    modal.componentInstance.title = $localize`Reprocess confirm`
-    modal.componentInstance.messageBold = $localize`This operation will permanently redo OCR for ${this.list.selected.size} selected document(s).`
+    modal.componentInstance.messageBold = $localize`This operation will permanently recreate the archive files for ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.message = $localize`The archive files will be re-generated with the current settings.`
     modal.componentInstance.btnClass = 'btn-danger'
     modal.componentInstance.btnCaption = $localize`Proceed`
     modal.componentInstance.confirmClicked
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
         modal.componentInstance.buttonsEnabled = false
-        this.executeBulkOperation(modal, 'redo_ocr', {})
+        this.executeBulkOperation(modal, 'reprocess', {})
       })
   }
 

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

@@ -72,7 +72,7 @@
             <div class="list-group list-group-horizontal border-0 card-info ms-md-auto mt-2 mt-md-0">
               @if (displayFields.includes(DisplayField.NOTES) && notesEnabled && document.notes.length) {
                 <button routerLink="/documents/{{document.id}}/notes" class="list-group-item btn btn-sm bg-light text-dark p-1 border-0 me-2 d-flex align-items-center" title="View notes" i18n-title>
-                  <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="chat-left-text"></i-bs><small i18n>{{document.notes.length}} Notes</small>
+                  <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="chat-left-text"></i-bs><small>{{document.notes.length}} Notes</small>
                 </button>
               }
               @if (displayFields.includes(DisplayField.DOCUMENT_TYPE) && document.document_type) {
@@ -95,7 +95,7 @@
               @if (displayFields.includes(DisplayField.CREATED) || displayFields.includes(DisplayField.ADDED)) {
                 <ng-template #dateTooltip>
                   <div class="d-flex flex-column text-light">
-                    <span i18n>Created: {{ document.created | customDate }}</span>
+                    <span i18n>Created: {{ document.created_date | customDate }}</span>
                     <span i18n>Added: {{ document.added | customDate }}</span>
                     <span i18n>Modified: {{ document.modified | customDate }}</span>
                   </div>

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

@@ -62,14 +62,14 @@
           <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
             <ng-template #dateTooltip>
               <div class="d-flex flex-column text-light">
-                <span i18n>Created: {{ document.created | customDate }}</span>
+                <span i18n>Created: {{ document.created_date | customDate }}</span>
                 <span i18n>Added: {{ document.added | customDate }}</span>
                 <span i18n>Modified: {{ document.modified | customDate }}</span>
               </div>
             </ng-template>
             <div class="ps-0 p-1" placement="top" [ngbTooltip]="dateTooltip">
               <i-bs width="1em" height="1em" class="me-2 text-muted" name="calendar-event"></i-bs>
-              <small>{{document.created | customDate:'mediumDate'}}</small>
+              <small>{{document.created_date | customDate:'mediumDate'}}</small>
             </div>
           </div>
         }

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

@@ -12,6 +12,7 @@ import { CorrespondentService } from 'src/app/services/rest/correspondent.servic
 import { ToastService } from 'src/app/services/toast.service'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { ManagementListComponent } from '../management-list/management-list.component'
+import { takeUntil } from 'rxjs'
 
 @Component({
   selector: 'pngx-correspondent-list',
@@ -63,6 +64,26 @@ export class CorrespondentListComponent extends ManagementListComponent<Correspo
     )
   }
 
+  public reloadData(): void {
+    this.isLoading = true
+    this.service
+      .listFiltered(
+        this.page,
+        null,
+        this.sortField,
+        this.sortReverse,
+        this._nameFilter,
+        true,
+        { last_correspondence: true }
+      )
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((c) => {
+        this.data = c.results
+        this.collectionSize = c.count
+        this.isLoading = false
+      })
+  }
+
   getDeleteMessage(object: Correspondent) {
     return $localize`Do you really want to delete the correspondent "${object.name}"?`
   }

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

@@ -52,7 +52,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   implements OnInit, OnDestroy
 {
   constructor(
-    private service: AbstractNameFilterService<T>,
+    protected service: AbstractNameFilterService<T>,
     private modalService: NgbModal,
     private editDialogComponent: any,
     private toastService: ToastService,
@@ -81,8 +81,8 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   public isLoading: boolean = false
 
   private nameFilterDebounce: Subject<string>
-  private unsubscribeNotifier: Subject<any> = new Subject()
+  protected unsubscribeNotifier: Subject<any> = new Subject()
-  private _nameFilter: string
+  protected _nameFilter: string
 
   public selectedObjects: Set<number> = new Set()
   public togggleAll: boolean = false

src-ui/src/app/data/ui-settings.ts

@@ -12,6 +12,11 @@ export interface UiSetting {
   default: any
 }
 
+export enum GlobalSearchType {
+  ADVANCED = 'advanced',
+  TITLE_CONTENT = 'title-content',
+}
+
 export const SETTINGS_KEYS = {
   LANGUAGE: 'language',
   APP_LOGO: 'app_logo',
@@ -57,6 +62,7 @@ export const SETTINGS_KEYS = {
   DOCUMENT_EDITING_REMOVE_INBOX_TAGS:
     'general-settings:document-editing:remove-inbox-tags',
   SEARCH_DB_ONLY: 'general-settings:search:db-only',
+  SEARCH_FULL_TYPE: 'general-settings:search:more-link',
 }
 
 export const SETTINGS: UiSetting[] = [
@@ -225,4 +231,9 @@ export const SETTINGS: UiSetting[] = [
     type: 'boolean',
     default: false,
   },
+  {
+    key: SETTINGS_KEYS.SEARCH_FULL_TYPE,
+    type: 'string',
+    default: GlobalSearchType.TITLE_CONTENT,
+  },
 ]

src-ui/src/app/services/rest/abstract-name-filter-service.ts

@@ -17,9 +17,10 @@ export abstract class AbstractNameFilterService<
     sortField?: string,
     sortReverse?: boolean,
     nameFilter?: string,
-    fullPerms?: boolean
+    fullPerms?: boolean,
+    extraParams?: { [key: string]: any }
   ) {
-    let params = {}
+    let params = extraParams ?? {}
     if (nameFilter) {
       params['name__icontains'] = nameFilter
     }

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

@@ -100,13 +100,13 @@ export const commonAbstractPaperlessServiceTests = (endpoint, ServiceClass) => {
     test('should call appropriate api endpoint for get a few objects', () => {
       subscription = service.getFew([1, 2, 3]).subscribe()
       const req = httpTestingController.expectOne(
-        `${environment.apiBaseUrl}${endpoint}/?id__in=1,2,3`
+        `${environment.apiBaseUrl}${endpoint}/?id__in=1,2,3&ordering=-id`
       )
       expect(req.request.method).toEqual('GET')
       req.flush([])
       subscription = service.getFew([4, 5, 6], { foo: 'bar' }).subscribe()
       const req2 = httpTestingController.expectOne(
-        `${environment.apiBaseUrl}${endpoint}/?id__in=4,5,6&foo=bar`
+        `${environment.apiBaseUrl}${endpoint}/?id__in=4,5,6&ordering=-id&foo=bar`
       )
       expect(req2.request.method).toEqual('GET')
       req2.flush([])

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

@@ -94,6 +94,7 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
   getFew(ids: number[], extraParams?): Observable<Results<T>> {
     let httpParams = new HttpParams()
     httpParams = httpParams.set('id__in', ids.join(','))
+    httpParams = httpParams.set('ordering', '-id')
     for (let extraParamKey in extraParams) {
       if (extraParams[extraParamKey] != null) {
         httpParams = httpParams.set(extraParamKey, extraParams[extraParamKey])

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

@@ -5,7 +5,7 @@ export const environment = {
   apiBaseUrl: document.baseURI + 'api/',
   apiVersion: '5',
   appTitle: 'Paperless-ngx',
-  version: '2.8.6',
+  version: '2.8.6-dev',
   webSocketHost: window.location.host,
   webSocketProtocol: window.location.protocol == 'https:' ? 'wss:' : 'ws:',
   webSocketBaseUrl: base_url.pathname + 'ws/',