Bump version to 2.3.0

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -102,3 +102,14 @@ body:
     attributes:
       label: Other
       description: Any other relevant details.
+  - type: checkboxes
+    id: required-checks
+    attributes:
+      label: Please confirm the following
+      options:
+        - label: I believe this issue is a bug that affects all users of Paperless-ngx, not something specific to my installation.
+          required: true
+        - label: I have already searched for relevant existing issues and discussions before opening this report.
+          required: true
+        - label: I have updated the title field above with a concise description.
+          required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,7 +8,11 @@ Note: All PRs with code changes should be targeted to the `dev` branch, pure doc
 Please include a summary of the change and which issue is fixed (if any) and any relevant motivation / context. List any dependencies that are required for this change. If appropriate, please include an explanation of how your proposed change can be tested. Screenshots and / or videos can also be helpful if appropriate.
 -->
 
-Fixes # (issue)
+<!--
+⚠️ Important: Pull requests that implement a new feature *should almost always target an existing feature request*. This is in order to balance the work of implementing and maintaining new features vs. community-interest. If that is not currently the case, please open a feature request instead of this PR to gather feedback from both users and the project maintainers.
+-->
+
+Closes #(issue or discussion)
 
 ## Type of change
 
@@ -17,10 +21,11 @@ What type of change does your PR introduce to Paperless-ngx?
 NOTE: Please check only one box!
 -->
 
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] Other (please explain):
+- [ ] Bug fix: non-breaking change which fixes an issue.
+- [ ] New feature: non-breaking change which adds functionality. _Please read the important note above._
+- [ ] Breaking change: fix or feature that would cause existing functionality to not work as expected.
+- [ ] Documentation only.
+- [ ] Other. Please explain:
 
 ## Checklist:
 

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ on:
 env:
   # This is the version of pipenv all the steps will use
   # If changing this, change Dockerfile
-  DEFAULT_PIP_ENV_VERSION: "2023.10.24"
+  DEFAULT_PIP_ENV_VERSION: "2023.11.15"
   # This is the default version of Python to use in most steps which aren't specific
   DEFAULT_PYTHON_VERSION: "3.10"
 
@@ -37,7 +37,7 @@ jobs:
         uses: actions/checkout@v4
       -
         name: Install python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       -
@@ -56,7 +56,7 @@ jobs:
       -
         name: Set up Python
         id: setup-python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
           cache: "pipenv"
@@ -87,7 +87,7 @@ jobs:
           pipenv --python ${{ steps.setup-python.outputs.python-version }} run mkdocs gh-deploy --force --no-history
       -
         name: Upload artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: documentation
           path: site/
@@ -114,7 +114,7 @@ jobs:
       -
         name: Set up Python
         id: setup-python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: "${{ matrix.python-version }}"
           cache: "pipenv"
@@ -155,7 +155,7 @@ jobs:
       -
         name: Upload coverage
         if: ${{ matrix.python-version == env.DEFAULT_PYTHON_VERSION }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: backend-coverage-report
           path: src/coverage.xml
@@ -238,7 +238,7 @@ jobs:
       -
         name: Upload Jest coverage
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: jest-coverage-report-${{ matrix.shard-index }}
           path: |
@@ -253,9 +253,9 @@ jobs:
       -
         name: Upload Playwright test results
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.shard-index }}
           path: src-ui/playwright-report
           retention-days: 7
 
@@ -269,10 +269,18 @@ jobs:
       -
         uses: actions/checkout@v4
       -
-        name: Download frontend coverage
-        uses: actions/download-artifact@v3
+        name: Download frontend jest coverage
+        uses: actions/download-artifact@v4
         with:
           path: src-ui/coverage/
+          pattern: jest-coverage-report-*
+      -
+        name: Download frontend playwright coverage
+        uses: actions/download-artifact@v4
+        with:
+          path: src-ui/coverage/
+          pattern: playwright-report-*
+          merge-multiple: true
       -
         name: Upload frontend coverage to Codecov
         uses: codecov/codecov-action@v3
@@ -285,7 +293,7 @@ jobs:
           files: '!coverage.xml'
       -
         name: Download backend coverage
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: backend-coverage-report
           path: src/
@@ -416,7 +424,7 @@ jobs:
           docker cp frontend-extract:/usr/src/paperless/src/documents/static/frontend src/documents/static/frontend/
       -
         name: Upload frontend artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: frontend-compiled
           path: src/documents/static/frontend/
@@ -435,7 +443,7 @@ jobs:
       -
         name: Set up Python
         id: setup-python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
           cache: "pipenv"
@@ -461,13 +469,13 @@ jobs:
           sudo apt-get install -qq --no-install-recommends gettext liblept5
       -
         name: Download frontend artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: frontend-compiled
           path: src/documents/static/frontend/
       -
         name: Download documentation artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: documentation
           path: docs/_build/html/
@@ -533,7 +541,7 @@ jobs:
           tar -cJf paperless-ngx.tar.xz paperless-ngx/
       -
         name: Upload release artifact
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: release
           path: dist/paperless-ngx.tar.xz
@@ -552,7 +560,7 @@ jobs:
     steps:
       -
         name: Download release artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: release
           path: ./
@@ -603,7 +611,7 @@ jobs:
           ref: main
       -
         name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
           cache: "pipenv"

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -51,4 +51,4 @@ jobs:
         # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
+      uses: github/codeql-action/analyze@v3

.github/workflows/repo-maintenance.yml

@@ -18,7 +18,7 @@ jobs:
     name: 'Stale'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v8
+      - uses: actions/stale@v9
         with:
           days-before-stale: 7
           days-before-close: 14

.pre-commit-config.yaml

@@ -11,6 +11,8 @@ repos:
       - id: check-json
         exclude: "tsconfig.*json"
       - id: check-yaml
+        args:
+          - "--unsafe"
       - id: check-toml
       - id: check-executables-have-shebangs
       - id: end-of-file-fixer

CONTRIBUTING.md

@@ -94,7 +94,7 @@ The following files need to be changed:
 
 - src-ui/angular.json (under the _projects/paperless-ui/i18n/locales_ JSON key)
 - src/paperless/settings.py (in the _LANGUAGES_ array)
-- src-ui/src/app/services/settings.service.ts (inside the _getLanguageOptions_ method)
+- src-ui/src/app/services/settings.service.ts (inside the _LANGUAGE_OPTIONS_ array)
 - src-ui/src/app/app.module.ts (import locale from _angular/common/locales_ and call _registerLocaleData_)
 
 Please add the language in the correct order, alphabetically by locale.

Dockerfile

@@ -12,7 +12,7 @@ COPY ./src-ui /src/src-ui
 WORKDIR /src/src-ui
 RUN set -eux \
   && npm update npm -g \
-  && npm ci --omit=optional
+  && npm ci
 RUN set -eux \
   && ./node_modules/.bin/ng build --configuration production
 
@@ -29,7 +29,7 @@ COPY Pipfile* ./
 
 RUN set -eux \
   && echo "Installing pipenv" \
-    && python3 -m pip install --no-cache-dir --upgrade pipenv==2023.10.24 \
+    && python3 -m pip install --no-cache-dir --upgrade pipenv==2023.11.15 \
   && echo "Generating requirement.txt" \
     && pipenv requirements > requirements.txt
 
@@ -39,6 +39,8 @@ RUN set -eux \
 #  - Don't leave anything extra in here
 FROM docker.io/python:3.11-slim-bookworm as main-app
 
+ENV PYTHONWARNINGS="ignore:::django.http.response:517"
+
 LABEL org.opencontainers.image.authors="paperless-ngx team <hello@paperless-ngx.com>"
 LABEL org.opencontainers.image.documentation="https://docs.paperless-ngx.com/"
 LABEL org.opencontainers.image.source="https://github.com/paperless-ngx/paperless-ngx"
@@ -52,8 +54,8 @@ ARG TARGETARCH
 
 # Can be workflow provided, defaults set for manual building
 ARG JBIG2ENC_VERSION=0.29
-ARG QPDF_VERSION=11.6.3
-ARG GS_VERSION=10.02.0
+ARG QPDF_VERSION=11.6.4
+ARG GS_VERSION=10.02.1
 
 #
 # Begin installation and configuration
@@ -123,13 +125,13 @@ RUN set -eux \
       && echo "Installing Ghostscript ${GS_VERSION}" \
         && curl --fail --silent --show-error --location \
           --output libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10_${GS_VERSION}.dfsg-1_${TARGETARCH}.deb \
         && curl --fail --silent --show-error --location \
           --output ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/ghostscript_${GS_VERSION}.dfsg-1_${TARGETARCH}.deb \
         && curl --fail --silent --show-error --location \
           --output libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10-common_${GS_VERSION}.dfsg-1_all.deb \
         && dpkg --install ./libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
         && dpkg --install ./libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
         && dpkg --install ./ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
@@ -268,3 +270,5 @@ ENTRYPOINT ["/sbin/docker-entrypoint.sh"]
 EXPOSE 8000
 
 CMD ["/usr/local/bin/paperless_cmd.sh"]
+
+HEALTHCHECK --interval=30s --timeout=10s --retries=5 CMD [ "curl", "-fs", "-S", "--max-time", "2", "http://localhost:8000" ]

Pipfile

@@ -4,16 +4,16 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-dateparser = "~=1.1"
+dateparser = "~=1.2"
 # WARNING: django does not use semver.
 #          Only patch versions are guaranteed to not introduce breaking changes.
-django = "~=4.2.7"
+django = "~=4.2.8"
 django-auditlog = "*"
 django-celery-results = "*"
 django-compression-middleware = "*"
 django-cors-headers = "*"
 django-extensions = "*"
-django-filter = "~=23.3"
+django-filter = "~=23.5"
 django-guardian = "*"
 django-multiselectfield = "*"
 djangorestframework = "~=3.14"
@@ -33,7 +33,7 @@ inotifyrecursive = "~=0.3"
 langdetect = "*"
 mysqlclient = "*"
 nltk = "*"
-ocrmypdf = "~=15.0"
+ocrmypdf = "~=15.4"
 pathvalidate = "*"
 pdf2image = "*"
 psycopg2 = "*"
@@ -57,7 +57,7 @@ zxing-cpp = {version = "*", platform_machine = "== 'x86_64'"}
 
 [dev-packages]
 # Linting
-black = "*"
+black = "==23.11.0"
 pre-commit = "*"
 ruff = "*"
 # Testing

docker/docker-entrypoint.sh

@@ -86,13 +86,13 @@ initialize() {
 		"${CONSUME_DIR}"; do
 		if [[ ! -d "${dir}" ]]; then
 			echo "Creating directory ${dir}"
-			mkdir "${dir}"
+			mkdir --parents "${dir}"
 		fi
 	done
 
 	local -r tmp_dir="/tmp/paperless"
 	echo "Creating directory ${tmp_dir}"
-	mkdir -p "${tmp_dir}"
+	mkdir --parents "${tmp_dir}"
 
 	set +e
 	echo "Adjusting permissions of paperless files. This may take a while."

docker/docker-prepare.sh

@@ -80,7 +80,7 @@ django_checks() {
 
 search_index() {
 
-	local -r index_version=7
+	local -r index_version=8
 	local -r index_version_file=${DATA_DIR}/.index_version
 
 	if [[ (! -f "${index_version_file}") || $(<"${index_version_file}") != "$index_version" ]]; then

docs/administration.md

@@ -607,3 +607,10 @@ document_fuzzy_match [--ratio] [--processes N]
 | ----------- | -------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | --ratio     | No       | 85.0                | a number between 0 and 100, setting how similar a document must be for it to be reported. Higher numbers mean more similarity. |
 | --processes | No       | 1/4 of system cores | Number of processes to use for matching. Setting 1 disables multiple processes                                                 |
+| --delete    | No       | False               | If provided, one document of a matched pair above the ratio will be deleted.                                                   |
+
+!!! warning
+
+    If providing the `--delete` option, it is highly recommended to have a backup.
+    While every effort has been taken to ensure proper operation, there is always the
+    chance of deletion of a file you want to keep.

docs/advanced_usage.md

@@ -136,6 +136,11 @@ script can access the following relevant environment variables set:
     be triggered, leading to failures as two tasks work on the
     same document path
 
+!!! warning
+
+    If your script modifies `DOCUMENT_WORKING_PATH` in a non-deterministic
+    way, this may allow duplicate documents to be stored
+
 A simple but common example for this would be creating a simple script
 like this:
 

docs/api.md

@@ -8,20 +8,22 @@ most of the available filters and ordering fields.
 
 The API provides the following main endpoints:
 
+- `/api/correspondents/`: Full CRUD support.
+- `/api/custom_fields/`: Full CRUD support.
 - `/api/documents/`: Full CRUD support, except POSTing new documents.
   See below.
-- `/api/correspondents/`: Full CRUD support.
 - `/api/document_types/`: Full CRUD support.
+- `/api/groups/`: Full CRUD support.
 - `/api/logs/`: Read-Only.
-- `/api/tags/`: Full CRUD support.
-- `/api/tasks/`: Read-only.
 - `/api/mail_accounts/`: Full CRUD support.
 - `/api/mail_rules/`: Full CRUD support.
-- `/api/users/`: Full CRUD support.
-- `/api/groups/`: Full CRUD support.
-- `/api/share_links/`: Full CRUD support.
-- `/api/custom_fields/`: Full CRUD support.
 - `/api/profile/`: GET, PATCH
+- `/api/share_links/`: Full CRUD support.
+- `/api/storage_paths/`: Full CRUD support.
+- `/api/tags/`: Full CRUD support.
+- `/api/tasks/`: Read-only.
+- `/api/users/`: Full CRUD support.
+- `/api/workflows/`: Full CRUD support.
 
 All of these endpoints except for the logging endpoint allow you to
 fetch (and edit and delete where appropriate) individual objects by
@@ -272,6 +274,7 @@ The endpoint supports the following optional form fields:
 - `correspondent`: Specify the ID of a correspondent that the consumer
   should use for the document.
 - `document_type`: Similar to correspondent.
+- `storage_path`: Similar to correspondent.
 - `tags`: Similar to correspondent. Specify this multiple times to
   have multiple tags added to the document.
 - `archive_serial_number`: An optional archive serial number to set.

docs/changelog.md

@@ -1,5 +1,119 @@
 # Changelog
 
+## paperless-ngx 2.2.1
+
+### Bug Fixes
+
+- Fix: saving doc links with no value [@shamoon](https://github.com/shamoon) ([#5144](https://github.com/paperless-ngx/paperless-ngx/pull/5144))
+- Fix: allow multiple consumption templates to assign the same custom field [@shamoon](https://github.com/shamoon) ([#5142](https://github.com/paperless-ngx/paperless-ngx/pull/5142))
+- Fix: some dropdowns broken in 2.2.0 [@shamoon](https://github.com/shamoon) ([#5134](https://github.com/paperless-ngx/paperless-ngx/pull/5134))
+
+### All App Changes
+
+<details>
+<summary>3 changes</summary>
+
+- Fix: saving doc links with no value [@shamoon](https://github.com/shamoon) ([#5144](https://github.com/paperless-ngx/paperless-ngx/pull/5144))
+- Fix: allow multiple consumption templates to assign the same custom field [@shamoon](https://github.com/shamoon) ([#5142](https://github.com/paperless-ngx/paperless-ngx/pull/5142))
+- Fix: some dropdowns broken in 2.2.0 [@shamoon](https://github.com/shamoon) ([#5134](https://github.com/paperless-ngx/paperless-ngx/pull/5134))
+</details>
+
+## paperless-ngx 2.2.0
+
+### Features
+
+- Enhancement: Add tooltip for select dropdown items [@shamoon](https://github.com/shamoon) ([#5070](https://github.com/paperless-ngx/paperless-ngx/pull/5070))
+- Chore: Update Angular to v17 including new Angular control-flow [@shamoon](https://github.com/shamoon) ([#4980](https://github.com/paperless-ngx/paperless-ngx/pull/4980))
+- Enhancement: symmetric document links [@shamoon](https://github.com/shamoon) ([#4907](https://github.com/paperless-ngx/paperless-ngx/pull/4907))
+- Enhancement: shared icon \& shared by me filter [@shamoon](https://github.com/shamoon) ([#4859](https://github.com/paperless-ngx/paperless-ngx/pull/4859))
+- Enhancement: Improved popup preview, respect embedded viewer, error handling [@shamoon](https://github.com/shamoon) ([#4947](https://github.com/paperless-ngx/paperless-ngx/pull/4947))
+- Enhancement: Allow deletion of documents via the fuzzy matching command [@stumpylog](https://github.com/stumpylog) ([#4957](https://github.com/paperless-ngx/paperless-ngx/pull/4957))
+- Enhancement: document link field fixes [@shamoon](https://github.com/shamoon) ([#5020](https://github.com/paperless-ngx/paperless-ngx/pull/5020))
+- Enhancement: above and below doc detail save buttons [@shamoon](https://github.com/shamoon) ([#5008](https://github.com/paperless-ngx/paperless-ngx/pull/5008))
+
+### Bug Fixes
+
+- Fix: Case where a mail attachment has no filename to use [@stumpylog](https://github.com/stumpylog) ([#5117](https://github.com/paperless-ngx/paperless-ngx/pull/5117))
+- Fix: Disable auto-login for API token requests [@shamoon](https://github.com/shamoon) ([#5094](https://github.com/paperless-ngx/paperless-ngx/pull/5094))
+- Fix: update ASN regex to support Unicode [@eukub](https://github.com/eukub) ([#5099](https://github.com/paperless-ngx/paperless-ngx/pull/5099))
+- Fix: ensure CSRF-Token on Index view [@baflo](https://github.com/baflo) ([#5082](https://github.com/paperless-ngx/paperless-ngx/pull/5082))
+- Fix: Stop auto-refresh logs / tasks after close [@shamoon](https://github.com/shamoon) ([#5089](https://github.com/paperless-ngx/paperless-ngx/pull/5089))
+- Fix: Make the admin panel accessible when using a large number of documents [@bogdal](https://github.com/bogdal) ([#5052](https://github.com/paperless-ngx/paperless-ngx/pull/5052))
+- Fix: dont allow null property via API [@shamoon](https://github.com/shamoon) ([#5063](https://github.com/paperless-ngx/paperless-ngx/pull/5063))
+- Fix: Updates Ghostscript to 10.02.1 for more bug fixes to it [@stumpylog](https://github.com/stumpylog) ([#5040](https://github.com/paperless-ngx/paperless-ngx/pull/5040))
+- Fix: allow system keyboard shortcuts in date fields [@shamoon](https://github.com/shamoon) ([#5009](https://github.com/paperless-ngx/paperless-ngx/pull/5009))
+- Fix password change detection on profile edit [@shamoon](https://github.com/shamoon) ([#5028](https://github.com/paperless-ngx/paperless-ngx/pull/5028))
+
+### Documentation
+
+- Documentation: organize API endpoints [@dgsponer](https://github.com/dgsponer) ([#5077](https://github.com/paperless-ngx/paperless-ngx/pull/5077))
+
+### Maintenance
+
+- Chore: Bulk backend update [@stumpylog](https://github.com/stumpylog) ([#5061](https://github.com/paperless-ngx/paperless-ngx/pull/5061))
+
+### Dependencies
+
+<details>
+<summary>5 changes</summary>
+
+- Chore: Bulk backend update [@stumpylog](https://github.com/stumpylog) ([#5061](https://github.com/paperless-ngx/paperless-ngx/pull/5061))
+- Chore(deps): Bump the django group with 3 updates [@dependabot](https://github.com/dependabot) ([#5046](https://github.com/paperless-ngx/paperless-ngx/pull/5046))
+- Chore(deps): Bump the major-versions group with 1 update [@dependabot](https://github.com/dependabot) ([#5047](https://github.com/paperless-ngx/paperless-ngx/pull/5047))
+- Chore(deps): Bump the small-changes group with 6 updates [@dependabot](https://github.com/dependabot) ([#5048](https://github.com/paperless-ngx/paperless-ngx/pull/5048))
+- Fix: Updates Ghostscript to 10.02.1 for more bug fixes to it [@stumpylog](https://github.com/stumpylog) ([#5040](https://github.com/paperless-ngx/paperless-ngx/pull/5040))
+</details>
+
+### All App Changes
+
+<details>
+<summary>20 changes</summary>
+
+- Fix: Case where a mail attachment has no filename to use [@stumpylog](https://github.com/stumpylog) ([#5117](https://github.com/paperless-ngx/paperless-ngx/pull/5117))
+- Fix: Disable auto-login for API token requests [@shamoon](https://github.com/shamoon) ([#5094](https://github.com/paperless-ngx/paperless-ngx/pull/5094))
+- Fix: update ASN regex to support Unicode [@eukub](https://github.com/eukub) ([#5099](https://github.com/paperless-ngx/paperless-ngx/pull/5099))
+- Fix: ensure CSRF-Token on Index view [@baflo](https://github.com/baflo) ([#5082](https://github.com/paperless-ngx/paperless-ngx/pull/5082))
+- Fix: Stop auto-refresh logs / tasks after close [@shamoon](https://github.com/shamoon) ([#5089](https://github.com/paperless-ngx/paperless-ngx/pull/5089))
+- Enhancement: Add tooltip for select dropdown items [@shamoon](https://github.com/shamoon) ([#5070](https://github.com/paperless-ngx/paperless-ngx/pull/5070))
+- Fix: Make the admin panel accessible when using a large number of documents [@bogdal](https://github.com/bogdal) ([#5052](https://github.com/paperless-ngx/paperless-ngx/pull/5052))
+- Chore: Update Angular to v17 including new Angular control-flow [@shamoon](https://github.com/shamoon) ([#4980](https://github.com/paperless-ngx/paperless-ngx/pull/4980))
+- Fix: dont allow null property via API [@shamoon](https://github.com/shamoon) ([#5063](https://github.com/paperless-ngx/paperless-ngx/pull/5063))
+- Enhancement: symmetric document links [@shamoon](https://github.com/shamoon) ([#4907](https://github.com/paperless-ngx/paperless-ngx/pull/4907))
+- Enhancement: shared icon \& shared by me filter [@shamoon](https://github.com/shamoon) ([#4859](https://github.com/paperless-ngx/paperless-ngx/pull/4859))
+- Chore(deps): Bump the django group with 3 updates [@dependabot](https://github.com/dependabot) ([#5046](https://github.com/paperless-ngx/paperless-ngx/pull/5046))
+- Chore(deps): Bump the major-versions group with 1 update [@dependabot](https://github.com/dependabot) ([#5047](https://github.com/paperless-ngx/paperless-ngx/pull/5047))
+- Chore(deps): Bump the small-changes group with 6 updates [@dependabot](https://github.com/dependabot) ([#5048](https://github.com/paperless-ngx/paperless-ngx/pull/5048))
+- Enhancement: Improved popup preview, respect embedded viewer, error handling [@shamoon](https://github.com/shamoon) ([#4947](https://github.com/paperless-ngx/paperless-ngx/pull/4947))
+- Enhancement: Add {original_filename}, {added_time} to title placeholders [@TTT7275](https://github.com/TTT7275) ([#4972](https://github.com/paperless-ngx/paperless-ngx/pull/4972))
+- Feature: Allow deletion of documents via the fuzzy matching command [@stumpylog](https://github.com/stumpylog) ([#4957](https://github.com/paperless-ngx/paperless-ngx/pull/4957))
+- Fix: allow system keyboard shortcuts in date fields [@shamoon](https://github.com/shamoon) ([#5009](https://github.com/paperless-ngx/paperless-ngx/pull/5009))
+- Enhancement: document link field fixes [@shamoon](https://github.com/shamoon) ([#5020](https://github.com/paperless-ngx/paperless-ngx/pull/5020))
+- Fix password change detection on profile edit [@shamoon](https://github.com/shamoon) ([#5028](https://github.com/paperless-ngx/paperless-ngx/pull/5028))
+</details>
+
+## paperless-ngx 2.1.3
+
+### Bug Fixes
+
+- Fix: Document metadata is lost during barcode splitting [@stumpylog](https://github.com/stumpylog) ([#4982](https://github.com/paperless-ngx/paperless-ngx/pull/4982))
+- Fix: Export of custom field instances during a split manifest export [@stumpylog](https://github.com/stumpylog) ([#4984](https://github.com/paperless-ngx/paperless-ngx/pull/4984))
+- Fix: Apply user arguments even in the case of the forcing OCR [@stumpylog](https://github.com/stumpylog) ([#4981](https://github.com/paperless-ngx/paperless-ngx/pull/4981))
+- Fix: support show errors for select dropdowns [@shamoon](https://github.com/shamoon) ([#4979](https://github.com/paperless-ngx/paperless-ngx/pull/4979))
+- Fix: Don't attempt to parse none objects during date searching [@bogdal](https://github.com/bogdal) ([#4977](https://github.com/paperless-ngx/paperless-ngx/pull/4977))
+
+### All App Changes
+
+<details>
+<summary>6 changes</summary>
+
+- Refactor: Boost performance by reducing db queries [@bogdal](https://github.com/bogdal) ([#4990](https://github.com/paperless-ngx/paperless-ngx/pull/4990))
+- Fix: Document metadata is lost during barcode splitting [@stumpylog](https://github.com/stumpylog) ([#4982](https://github.com/paperless-ngx/paperless-ngx/pull/4982))
+- Fix: Export of custom field instances during a split manifest export [@stumpylog](https://github.com/stumpylog) ([#4984](https://github.com/paperless-ngx/paperless-ngx/pull/4984))
+- Fix: Apply user arguments even in the case of the forcing OCR [@stumpylog](https://github.com/stumpylog) ([#4981](https://github.com/paperless-ngx/paperless-ngx/pull/4981))
+- Fix: support show errors for select dropdowns [@shamoon](https://github.com/shamoon) ([#4979](https://github.com/paperless-ngx/paperless-ngx/pull/4979))
+- Fix: Don't attempt to parse none objects during date searching [@bogdal](https://github.com/bogdal) ([#4977](https://github.com/paperless-ngx/paperless-ngx/pull/4977))
+</details>
+
 ## paperless-ngx 2.1.2
 
 ### Bug Fixes

docs/configuration.md

@@ -3,6 +3,11 @@
 Paperless provides a wide range of customizations. Depending on how you
 run paperless, these settings have to be defined in different places.
 
+Certain configuration options may be set via the UI. This currently includes
+common [OCR](#ocr) related settings. If set, these will take preference over the
+settings via environment variables. If not set, the environment setting or applicable
+default will be utilized instead.
+
 - If you run paperless on docker, `paperless.conf` is not used.
   Rather, configure paperless by copying necessary options to
   `docker-compose.env`.
@@ -1154,12 +1159,13 @@ combination with PAPERLESS_CONSUMER_BARCODE_UPSCALE bigger than 1.0.
 
 ## Audit Trail
 
-#### [`PAPERLESS_AUDIT_LOG_ENABLED=<bool>`](#PAPERLESS_AUDIT_LOG_ENABLED){#PAPERLESS_AUDIT_LOG_ENABLED}
+#### [`PAPERLESS_AUDIT_LOG_ENABLED=<bool>`](#PAPERLESS_AUDIT_LOG_ENABLED) {#PAPERLESS_AUDIT_LOG_ENABLED}
 
 : Enables an audit trail for documents, document types, correspondents, and tags. Log entries can be viewed in the Django backend only.
 
     !!! warning
-    Once enabled cannot be disabled
+
+        Once enabled cannot be disabled
 
 ## Collate Double-Sided Documents {#collate}
 
@@ -1309,6 +1315,10 @@ specified as "chi-tra".
 
     Defaults to none, which does not install any additional languages.
 
+    !!! warning
+
+         This option must not be used in rootless containers.
+
 #### [`PAPERLESS_ENABLE_FLOWER=<defined>`](#PAPERLESS_ENABLE_FLOWER) {#PAPERLESS_ENABLE_FLOWER}
 
 : If this environment variable is defined, the Celery monitoring tool

docs/development.md

@@ -277,27 +277,17 @@ Adding new languages requires adding the translated files in the
     }
     ```
 
-2.  Add the language to the available options in
+2.  Add the language to the `LANGUAGE_OPTIONS` array in
     `src-ui/src/app/services/settings.service.ts`:
 
-    ```typescript
-    getLanguageOptions(): LanguageOption[] {
-        return [
-            {code: "en-us", name: $localize`English (US)`, englishName: "English (US)", dateInputFormat: "mm/dd/yyyy"},
-            {code: "en-gb", name: $localize`English (GB)`, englishName: "English (GB)", dateInputFormat: "dd/mm/yyyy"},
-            {code: "de", name: $localize`German`, englishName: "German", dateInputFormat: "dd.mm.yyyy"},
-            {code: "nl", name: $localize`Dutch`, englishName: "Dutch", dateInputFormat: "dd-mm-yyyy"},
-            {code: "fr", name: $localize`French`, englishName: "French", dateInputFormat: "dd/mm/yyyy"},
-            {code: "pt-br", name: $localize`Portuguese (Brazil)`, englishName: "Portuguese (Brazil)", dateInputFormat: "dd/mm/yyyy"}
-            // Add your new language here
-        ]
-    }
     ```
 
     `dateInputFormat` is a special string that defines the behavior of
     the date input fields and absolutely needs to contain "dd", "mm"
     and "yyyy".
 
+    ```
+
 3.  Import and register the Angular data for this locale in
     `src-ui/src/app/app.module.ts`:
 

docs/index.md

@@ -18,6 +18,7 @@ physical documents into a searchable online archive so you can keep, well, _less
 ## Features
 
 -   **Organize and index** your scanned documents with tags, correspondents, types, and more.
+-   _Your_ data is stored locally on _your_ server and is never transmitted or shared in any way.
 -   Performs **OCR** on your documents, adding searchable and selectable text, even to documents scanned with only images.
 -   Utilizes the open-source Tesseract engine to recognize more than 100 languages.
 -   Documents are saved as PDF/A format which is designed for long term storage, alongside the unaltered originals.
@@ -41,7 +42,7 @@ physical documents into a searchable online archive so you can keep, well, _less
     -   Configure multiple accounts and rules for each account.
     -   After processing, paperless can perform actions on the messages such as marking as read, deleting and more.
 -   A built-in robust **multi-user permissions** system that supports 'global' permissions as well as per document or object.
--   A powerful templating system that gives you more control over the consumption pipeline.
+-   A powerful workflow system that gives you even more control.
 -   **Optimized** for multi core systems: Paperless-ngx consumes multiple documents in parallel.
 -   The integrated sanity checker makes sure that your document archive is in good health.
 
@@ -156,9 +157,9 @@ Tag, correspondent, document type and storage path editing.
 
 </div>
 <div class="grid-half-right" markdown>
-  Consumption templates provide finer control over the document pipeline.
+  Workflows provide finer control over the document pipeline and trigger actions.
 
-![image](assets/screenshots/consumption_template.png)
+![image](assets/screenshots/workflow.png)
 
 </div>
 <div class="clear"></div>

docs/setup.md

@@ -28,7 +28,8 @@ steps described in [Docker setup](#docker_hub) automatically.
 1.  Make sure that Docker and Docker Compose are installed.
 
     !!! tip
-    See the Docker installation instructions at https://docs.docker.com/engine/install/
+
+        See the Docker installation instructions at https://docs.docker.com/engine/install/
 
 2.  Download and run the installation script:
 
@@ -72,7 +73,7 @@ steps described in [Docker setup](#docker_hub) automatically.
 
         If you want to use the included `docker-compose.*.yml` file, you
         need to have at least Docker version **17.09.0** and Docker Compose
-        version **v2**. To check do: `docker compose -v` or `docker -v`
+        version **v2**. To check do: `docker compose version` or `docker -v`
 
         See the [Docker installation guide](https://docs.docker.com/engine/install/) on how to install the current
         version of Docker for your operating system or Linux distribution of
@@ -120,6 +121,10 @@ steps described in [Docker setup](#docker_hub) automatically.
 
     **Rootless**
 
+    !!! warning
+
+        It is currently not possible to run the container rootless if additional languages are specified via `PAPERLESS_OCR_LANGUAGES`.
+
     If you want to run Paperless as a rootless container, you will need
     to do the following in your `docker-compose.yml`:
 

docs/usage.md

@@ -238,7 +238,7 @@ do not have an owner set.
 
 ### Default permissions
 
-Default permissions for documents can be set using consumption templates.
+Default permissions for documents can be set using workflows.
 
 For objects created via the web UI (tags, doc types, etc.) the default is to set the current user
 as owner and no extra permissions, but you explicitly set these under Settings > Permissions.
@@ -255,29 +255,80 @@ permissions can be granted to limit access to certain parts of the UI (and corre
 In order to enable the password reset feature you will need to setup an SMTP backend, see
 [`PAPERLESS_EMAIL_HOST`](configuration.md#PAPERLESS_EMAIL_HOST)
 
-## Consumption templates
+## Workflows
 
-Consumption templates were introduced in v2.0 and allow for finer control over what metadata (tags, doc
-types) and permissions (owner, privileges) are assigned to documents during consumption. In general,
-templates are applied sequentially (by sort order) but subsequent templates will never override an
-assignment from a preceding template. The same is true for mail rules, e.g. if you set the correspondent
-in a mail rule any subsequent consumption templates that are applied _will not_ overwrite this. The
-exception to this is assignments that can be multiple e.g. tags and permissions, which will be merged.
+!!! note
 
-Consumption templates allow you to filter by:
+    v2.3 added "Workflows" and existing "Consumption Templates" were converted automatically to the new more powerful format.
+
+Workflows allow hooking into the Paperless-ngx document pipeline, for example to alter what metadata (tags, doc types) and
+permissions (owner, privileges) are assigned to documents. Workflows can have multiple 'triggers' and 'actions'. Triggers
+are events (with optional filtering rules) that will cause the workflow to be run and actions are the set of sequential
+actions to apply.
+
+In general, workflows and any actions they contain are applied sequentially by sort order. For "assignment" actions, subsequent
+workflow actions will override previous assignments, except for assignments that accept multiple items e.g. tags, custom
+fields and permissions, which will be merged.
+
+### Workflow Triggers
+
+Currently, there are three events that correspond to workflow trigger 'types':
+
+1. **Consumption Started**: _before_ a document is consumed, so events can include filters by source (mail, consumption
+   folder or API), file path, file name, mail rule
+2. **Document Added**: _after_ a document is added. At this time, file path and source information is no longer available,
+   but the document content has been extracted and metadata such as document type, tags, etc. have been set, so these can now
+   be used for filtering.
+3. **Document Updated**: when a document is updated. Similar to 'added' events, triggers can include filtering by content matching,
+   tags, doc type, or correspondent.
+
+The following flow diagram illustrates the three trigger types:
+
+```mermaid
+flowchart TD
+    consumption{"Matching
+    'Consumption'
+    trigger(s)"}
+
+    added{"Matching
+    'Added'
+    trigger(s)"}
+
+    updated{"Matching
+    'Updated'
+    trigger(s)"}
+
+    A[New Document] --> consumption
+    consumption --> |Yes| C[Workflow Actions Run]
+    consumption --> |No| D
+    C --> D[Document Added]
+    D -- Paperless-ngx 'matching' of tags, etc. --> added
+    added --> |Yes| F[Workflow Actions Run]
+    added --> |No| G
+    F --> G[Document Finalized]
+    H[Existing Document Changed] --> updated
+    updated --> |Yes| J[Workflow Actions Run]
+    updated --> |No| K
+    J --> K[Document Saved]
+```
+
+#### Filters {#workflow-trigger-filters}
+
+Workflows allow you to filter by:
 
 - Source, e.g. documents uploaded via consume folder, API (& the web UI) and mail fetch
 - File name, including wildcards e.g. \*.pdf will apply to all pdfs
 - File path, including wildcards. Note that enabling `PAPERLESS_CONSUMER_RECURSIVE` would allow, for
   example, automatically assigning documents to different owners based on the upload directory.
-- Mail rule. Choosing this option will force 'mail fetch' to be the template source.
+- Mail rule. Choosing this option will force 'mail fetch' to be the workflow source.
+- Content matching (`Added` and `Updated` triggers only). Filter document content using the matching settings.
+- Tags (`Added` and `Updated` triggers only). Filter for documents with any of the specified tags
+- Document type (`Added` and `Updated` triggers only). Filter documents with this doc type
+- Correspondent (`Added` and `Updated` triggers only). Filter documents with this correspondent
 
-!!! note
+### Workflow Actions
 
-    You must include a file name filter, a path filter or a mail rule filter. Use * for either to apply
-    to all files.
-
-Consumption templates can assign:
+There is currently one type of workflow action, "Assignment", which can assign:
 
 - Title, see [title placeholders](usage.md#title-placeholders) below
 - Tags, correspondent, document types
@@ -285,21 +336,11 @@ Consumption templates can assign:
 - View and / or edit permissions to users or groups
 - Custom fields. Note that no value for the field will be set
 
-### Consumption template permissions
+#### Title placeholders
 
-All users who have application permissions for editing consumption templates can see the same set
-of templates. In other words, templates themselves intentionally do not have an owner or permissions.
-
-Given their potentially far-reaching capabilities, you may want to restrict access to templates.
-
-Upon migration, existing installs will grant access to consumption templates to users who can add
-documents (and superusers who can always access all parts of the app).
-
-### Title placeholders
-
-Consumption template titles can include placeholders, _only for items that are assigned within the template_.
-This is because at the time of consumption (when the title is to be set), no automatic tags etc. have been
-applied. You can use the following placeholders:
+Workflow titles can include placeholders but the available options differ depending on the type of
+workflow trigger. This is because at the time of consumption (when the title is to be set), no automatic tags etc. have been
+applied. You can use the following placeholders with any trigger type:
 
 - `{correspondent}`: assigned correspondent name
 - `{document_type}`: assigned document type name
@@ -311,6 +352,29 @@ applied. You can use the following placeholders:
 - `{added_month_name}`: added month name
 - `{added_month_name_short}`: added month short name
 - `{added_day}`: added day
+- `{added_time}`: added time in HH:MM format
+- `{original_filename}`: original file name without extension
+
+The following placeholders are only available for "added" or "updated" triggers
+
+- `{created}`: created datetime
+- `{created_year}`: created year
+- `{created_year_short}`: created year
+- `{created_month}`: created month
+- `{created_month_name}`: created month name
+- `{created_month_name_short}`: created month short name
+- `{created_day}`: created day
+- `{created_time}`: created time in HH:MM format
+
+### Workflow permissions
+
+All users who have application permissions for editing workflows can see the same set
+of workflows. In other words, workflows themselves intentionally do not have an owner or permissions.
+
+Given their potentially far-reaching capabilities, you may want to restrict access to workflows.
+
+Upon migration, existing installs will grant access to workflows to users who can add
+documents (and superusers who can always access all parts of the app).
 
 ## Custom Fields {#custom-fields}
 
@@ -343,7 +407,7 @@ The following custom field types are supported:
 - `Integer`: integer number e.g. 12
 - `Number`: float number e.g. 12.3456
 - `Monetary`: float number with exactly two decimals, e.g. 12.30
-- `Document Link`: reference(s) to other document(s), displayed as links
+- `Document Link`: reference(s) to other document(s) displayed as links, automatically creates a symmetrical link in reverse
 
 ## Share Links
 

mkdocs.yml

@@ -44,6 +44,11 @@ markdown_extensions:
   - pymdownx.inlinehilite
   - pymdownx.snippets
   - footnotes
+  - pymdownx.superfences:
+      custom_fences:
+        - name: mermaid
+          class: mermaid
+          format: !!python/name:pymdownx.superfences.fence_code_format
 strict: true
 nav:
     - index.md

src-ui/angular.json

@@ -125,18 +125,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "paperless-ui:build:en-US"
+            "buildTarget": "paperless-ui:build:en-US"
           },
           "configurations": {
             "production": {
-              "browserTarget": "paperless-ui:build:production"
+              "buildTarget": "paperless-ui:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "paperless-ui:build"
+            "buildTarget": "paperless-ui:build"
           }
         },
         "test": {

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

@@ -12,13 +12,9 @@ test('should activate / deactivate save button when changes are saved', async ({
   await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
     /\w+/
   )
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeDisabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeDisabled()
   await page.getByTitle('Storage path').getByTitle('Clear all').click()
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeEnabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeEnabled()
 })
 
 test('should warn on unsaved changes', async ({ page }) => {
@@ -27,16 +23,12 @@ test('should warn on unsaved changes', async ({ page }) => {
   await expect(page.getByTitle('Correspondent', { exact: true })).toHaveText(
     /\w+/
   )
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeDisabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeDisabled()
   await page
     .getByTitle('Storage path', { exact: true })
     .getByTitle('Clear all')
     .click()
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeEnabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeEnabled()
   await page.getByRole('button', { name: 'Close', exact: true }).click()
   await expect(page.getByRole('dialog')).toHaveText(/unsaved changes/)
   await page.getByRole('button', { name: 'Cancel' }).click()

src-ui/package.json

@@ -11,56 +11,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^16.2.11",
-    "@angular/common": "~16.2.11",
-    "@angular/compiler": "~16.2.11",
-    "@angular/core": "~16.2.11",
-    "@angular/forms": "~16.2.11",
-    "@angular/localize": "~16.2.11",
-    "@angular/platform-browser": "~16.2.11",
-    "@angular/platform-browser-dynamic": "~16.2.11",
-    "@angular/router": "~16.2.11",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
-    "@ng-select/ng-select": "^11.2.0",
+    "@angular/cdk": "^17.0.4",
+    "@angular/common": "~17.0.8",
+    "@angular/compiler": "~17.0.8",
+    "@angular/core": "~17.0.8",
+    "@angular/forms": "~17.0.8",
+    "@angular/localize": "~17.0.8",
+    "@angular/platform-browser": "~17.0.8",
+    "@angular/platform-browser-dynamic": "~17.0.8",
+    "@angular/router": "~17.0.8",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ng-select/ng-select": "^12.0.4",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
     "ngx-color": "^9.0.0",
-    "ngx-cookie-service": "^16.0.1",
+    "ngx-cookie-service": "^17.0.1",
     "ngx-file-drop": "^16.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^13.0.6",
+    "ngx-ui-tour-ng-bootstrap": "^14.0.1",
     "pdfjs-dist": "^3.11.174",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
-    "zone.js": "^0.13.3"
+    "zone.js": "^0.14.2"
   },
   "devDependencies": {
-    "@angular-builders/jest": "16.0.1",
-    "@angular-devkit/build-angular": "~16.2.9",
-    "@angular-eslint/builder": "16.2.0",
-    "@angular-eslint/eslint-plugin": "16.2.0",
-    "@angular-eslint/eslint-plugin-template": "16.2.0",
-    "@angular-eslint/schematics": "16.2.0",
-    "@angular-eslint/template-parser": "16.2.0",
-    "@angular/cli": "~16.2.9",
-    "@angular/compiler-cli": "~16.2.3",
+    "@angular-builders/jest": "17.0.0",
+    "@angular-devkit/build-angular": "~17.0.8",
+    "@angular-eslint/builder": "17.1.1",
+    "@angular-eslint/eslint-plugin": "17.1.1",
+    "@angular-eslint/eslint-plugin-template": "17.1.1",
+    "@angular-eslint/schematics": "17.1.1",
+    "@angular-eslint/template-parser": "17.1.1",
+    "@angular/cli": "~17.0.8",
+    "@angular/compiler-cli": "~17.0.7",
     "@playwright/test": "^1.40.1",
     "@types/jest": "^29.5.10",
-    "@types/node": "^20.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@types/node": "^20.10.6",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-angular": "^13.1.4",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "wait-on": "^7.2.0"
   }
 }

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

@@ -21,10 +21,11 @@ import {
   PermissionAction,
   PermissionType,
 } from './services/permissions.service'
-import { ConsumptionTemplatesComponent } from './components/manage/consumption-templates/consumption-templates.component'
+import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
 import { MailComponent } from './components/manage/mail/mail.component'
 import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
 import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
+import { ConfigComponent } from './components/admin/config/config.component'
 
 export const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -179,6 +180,17 @@ export const routes: Routes = [
           },
         },
       },
+      {
+        path: 'config',
+        component: ConfigComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Admin,
+          },
+        },
+      },
       {
         path: 'tasks',
         component: TasksComponent,
@@ -202,13 +214,13 @@ export const routes: Routes = [
         },
       },
       {
-        path: 'templates',
-        component: ConsumptionTemplatesComponent,
+        path: 'workflows',
+        component: WorkflowsComponent,
         canActivate: [PermissionsGuard],
         data: {
           requiredPermission: {
             action: PermissionAction.View,
-            type: PermissionType.ConsumptionTemplate,
+            type: PermissionType.Workflow,
           },
         },
       },

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

@@ -1,32 +1,36 @@
 <pngx-toasts></pngx-toasts>
 
 <pngx-file-drop>
-    <ng-container content>
-        <router-outlet></router-outlet>
-    </ng-container>
+  <ng-container content>
+    <router-outlet></router-outlet>
+  </ng-container>
 </pngx-file-drop>
 
 <tour-step-template>
-    <ng-template #tourStep let-step="step">
-        <p class="tour-step-content" [innerHTML]="step?.content"></p>
-        <hr/>
-        <div class="d-flex justify-content-between align-items-center">
-            <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
-            <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
-                <div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
-                    <button class="btn btn-outline-danger" (click)="tourService.end()">
-                        {{ step?.endBtnTitle }}
-                    </button>
-                </div>
-                <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
-                    <button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary" (click)="tourService.prev()">
-                        « {{ step?.prevBtnTitle }}
-                    </button>
-                    <button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary" (click)="tourService.next()">
-                        {{ step?.nextBtnTitle }} »
-                    </button>
-                </div>
-            </div>
+  <ng-template #tourStep let-step="step">
+    <p class="tour-step-content" [innerHTML]="step?.content"></p>
+    <hr/>
+    <div class="d-flex justify-content-between align-items-center">
+      <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
+      <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
+        <div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
+          <button class="btn btn-outline-danger" (click)="tourService.end()">
+            {{ step?.endBtnTitle }}
+          </button>
         </div>
-    </ng-template>
+        <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
+          @if (tourService.hasPrev(step)) {
+            <button class="btn btn-outline-primary" (click)="tourService.prev()">
+              « {{ step?.prevBtnTitle }}
+            </button>
+          }
+          @if (tourService.hasNext(step)) {
+            <button class="btn btn-outline-primary" (click)="tourService.next()">
+              {{ step?.nextBtnTitle }} »
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+  </ng-template>
 </tour-step-template>

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

@@ -1,5 +1,5 @@
 import { SettingsService } from './services/settings.service'
-import { SETTINGS_KEYS } from './data/paperless-uisettings'
+import { SETTINGS_KEYS } from './data/ui-settings'
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription, first } from 'rxjs'
@@ -176,9 +176,9 @@ export class AppComponent implements OnInit, OnDestroy {
           },
         },
         {
-          anchorId: 'tour.consumption-templates',
-          content: $localize`Consumption templates give you finer control over the document ingestion process.`,
-          route: '/templates',
+          anchorId: 'tour.workflows',
+          content: $localize`Workflows give you more control over the document pipeline.`,
+          route: '/workflows',
           backdropConfig: {
             offset: 0,
           },

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

@@ -95,8 +95,8 @@ import { UsernamePipe } from './pipes/username.pipe'
 import { LogoComponent } from './components/common/logo/logo.component'
 import { IsNumberPipe } from './pipes/is-number.pipe'
 import { ShareLinksDropdownComponent } from './components/common/share-links-dropdown/share-links-dropdown.component'
-import { ConsumptionTemplatesComponent } from './components/manage/consumption-templates/consumption-templates.component'
-import { ConsumptionTemplateEditDialogComponent } from './components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component'
+import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
+import { WorkflowEditDialogComponent } from './components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
 import { MailComponent } from './components/manage/mail/mail.component'
 import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
 import { DragDropModule } from '@angular/cdk/drag-drop'
@@ -107,6 +107,9 @@ import { CustomFieldsDropdownComponent } from './components/common/custom-fields
 import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
 import { PdfViewerComponent } from './components/common/pdf-viewer/pdf-viewer.component'
 import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
+import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
+import { SwitchComponent } from './components/common/input/switch/switch.component'
+import { ConfigComponent } from './components/admin/config/config.component'
 
 import localeAf from '@angular/common/locales/af'
 import localeAr from '@angular/common/locales/ar'
@@ -250,8 +253,8 @@ function initializeApp(settings: SettingsService) {
     LogoComponent,
     IsNumberPipe,
     ShareLinksDropdownComponent,
-    ConsumptionTemplatesComponent,
-    ConsumptionTemplateEditDialogComponent,
+    WorkflowsComponent,
+    WorkflowEditDialogComponent,
     MailComponent,
     UsersAndGroupsComponent,
     FileDropComponent,
@@ -261,6 +264,9 @@ function initializeApp(settings: SettingsService) {
     ProfileEditDialogComponent,
     PdfViewerComponent,
     DocumentLinkComponent,
+    PreviewPopupComponent,
+    SwitchComponent,
+    ConfigComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,54 @@
+<pngx-page-header title="Configuration" i18n-title></pngx-page-header>
+
+<form [formGroup]="configForm" (ngSubmit)="saveConfig()" class="pb-4">
+
+    <ul ngbNav #nav="ngbNav" class="nav-tabs">
+        @for (category of optionCategories; track category) {
+            <li [ngbNavItem]="category">
+                <a ngbNavLink i18n>{{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">
+                            @for (option of getCategoryOptions(category); track option.key) {
+                                <div class="col">
+                                    <div class="card bg-light">
+                                        <div class="card-body">
+                                            <div class="card-title">
+                                                <h6>
+                                                    {{option.title}}
+                                                    <a class="btn btn-sm btn-link" title="Read the documentation about this setting" i18n-title [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">
+                                                        <svg class="sidebaricon" fill="currentColor">
+                                                            <use xlink:href="assets/bootstrap-icons.svg#info-circle"/>
+                                                        </svg>
+                                                    </a>
+                                                </h6>
+                                            </div>
+                                            <div class="mb-n3">
+                                                @switch (option.type) {
+                                                    @case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [error]="errors[option.key]" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
+                                                    @case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [error]="errors[option.key]" [showAdd]="false"></pngx-input-number> }
+                                                    @case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" [error]="errors[option.key]" [horizontal]="true" title="Enable" i18n-title></pngx-input-switch> }
+                                                    @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
+                                                    @case (ConfigOptionType.JSON) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </ng-template>
+            </li>
+        }
+    </ul>
+    <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+    <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group me-2">
+            <button type="button" (click)="discardChanges()" class="btn btn-secondary" [disabled]="loading || (isDirty$ | async) === false" i18n>Discard</button>
+        </div>
+        <div class="btn-group">
+            <button type="submit" class="btn btn-primary" [disabled]="loading || !configForm.valid || (isDirty$ | async) === false" i18n>Save</button>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,103 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ConfigComponent } from './config.component'
+import { ConfigService } from 'src/app/services/config.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { of, throwError } from 'rxjs'
+import { OutputTypeConfig } from 'src/app/data/paperless-config'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { BrowserModule } from '@angular/platform-browser'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { TextComponent } from '../../common/input/text/text.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+
+describe('ConfigComponent', () => {
+  let component: ConfigComponent
+  let fixture: ComponentFixture<ConfigComponent>
+  let configService: ConfigService
+  let toastService: ToastService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        ConfigComponent,
+        TextComponent,
+        SelectComponent,
+        NumberComponent,
+        SwitchComponent,
+        PageHeaderComponent,
+      ],
+      imports: [
+        HttpClientTestingModule,
+        BrowserModule,
+        NgbModule,
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+      ],
+    }).compileComponents()
+
+    configService = TestBed.inject(ConfigService)
+    toastService = TestBed.inject(ToastService)
+    fixture = TestBed.createComponent(ConfigComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should load config on init, show error if necessary', () => {
+    const getSpy = jest.spyOn(configService, 'getConfig')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    getSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error getting config'))
+    )
+    component.ngOnInit()
+    expect(getSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    getSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.ngOnInit()
+    expect(component.initialConfig).toEqual({
+      output_type: OutputTypeConfig.PDF_A,
+    })
+  })
+
+  it('should save config, show error if necessary', () => {
+    const saveSpy = jest.spyOn(configService, 'saveConfig')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    saveSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error saving config'))
+    )
+    component.saveConfig()
+    expect(saveSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    saveSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.saveConfig()
+    expect(component.initialConfig).toEqual({
+      output_type: OutputTypeConfig.PDF_A,
+    })
+  })
+
+  it('should support discard changes', () => {
+    component.initialConfig = { output_type: OutputTypeConfig.PDF_A2 } as any
+    component.configForm.patchValue({ output_type: OutputTypeConfig.PDF_A })
+    component.discardChanges()
+    expect(component.configForm.get('output_type').value).toEqual(
+      OutputTypeConfig.PDF_A2
+    )
+  })
+
+  it('should support JSON validation for e.g. user_args', () => {
+    component.configForm.patchValue({ user_args: '{ foo bar }' })
+    expect(component.errors).toEqual({ user_args: 'Invalid JSON' })
+    component.configForm.patchValue({ user_args: '{ "foo": "bar" }' })
+    expect(component.errors).toEqual({ user_args: null })
+  })
+})

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

@@ -0,0 +1,163 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms'
+import {
+  BehaviorSubject,
+  Observable,
+  Subject,
+  Subscription,
+  first,
+  takeUntil,
+} from 'rxjs'
+import {
+  PaperlessConfigOptions,
+  ConfigCategory,
+  ConfigOption,
+  ConfigOptionType,
+  PaperlessConfig,
+} from 'src/app/data/paperless-config'
+import { ConfigService } from 'src/app/services/config.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+
+@Component({
+  selector: 'pngx-config',
+  templateUrl: './config.component.html',
+  styleUrl: './config.component.scss',
+})
+export class ConfigComponent
+  extends ComponentWithPermissions
+  implements OnInit, OnDestroy, DirtyComponent
+{
+  public readonly ConfigOptionType = ConfigOptionType
+
+  // generated dynamically
+  public configForm = new FormGroup({})
+
+  public errors = {}
+
+  get optionCategories(): string[] {
+    return Object.values(ConfigCategory)
+  }
+
+  getCategoryOptions(category: string): ConfigOption[] {
+    return PaperlessConfigOptions.filter((o) => o.category === category)
+  }
+
+  public loading: boolean = false
+
+  initialConfig: PaperlessConfig
+  store: BehaviorSubject<any>
+  storeSub: Subscription
+  isDirty$: Observable<boolean>
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
+  constructor(
+    private configService: ConfigService,
+    private toastService: ToastService
+  ) {
+    super()
+    this.configForm.addControl('id', new FormControl())
+    PaperlessConfigOptions.forEach((option) => {
+      this.configForm.addControl(option.key, new FormControl())
+    })
+  }
+
+  ngOnInit(): void {
+    this.loading = true
+    this.configService
+      .getConfig()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (config) => {
+          this.loading = false
+          this.initialize(config)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError($localize`Error retrieving config`, e)
+        },
+      })
+
+    // validate JSON inputs
+    PaperlessConfigOptions.filter(
+      (o) => o.type === ConfigOptionType.JSON
+    ).forEach((option) => {
+      this.configForm
+        .get(option.key)
+        .addValidators((control: AbstractControl) => {
+          if (!control.value || control.value.toString().length === 0)
+            return null
+          try {
+            JSON.parse(control.value)
+          } catch (e) {
+            return [
+              {
+                user_args: e,
+              },
+            ]
+          }
+          return null
+        })
+      this.configForm.get(option.key).statusChanges.subscribe((status) => {
+        this.errors[option.key] =
+          status === 'INVALID' ? $localize`Invalid JSON` : null
+      })
+      this.configForm.get(option.key).updateValueAndValidity()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(true)
+    this.unsubscribeNotifier.complete()
+  }
+
+  private initialize(config: PaperlessConfig) {
+    if (!this.store) {
+      this.store = new BehaviorSubject(config)
+
+      this.store
+        .asObservable()
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe((state) => {
+          this.configForm.patchValue(state, { emitEvent: false })
+        })
+
+      this.isDirty$ = dirtyCheck(this.configForm, this.store.asObservable())
+    }
+    this.configForm.patchValue(config)
+
+    this.initialConfig = config
+  }
+
+  getDocsUrl(key: string) {
+    return `https://docs.paperless-ngx.com/configuration/#${key}`
+  }
+
+  public saveConfig() {
+    this.loading = true
+    this.configService
+      .saveConfig(this.configForm.value as PaperlessConfig)
+      .pipe(takeUntil(this.unsubscribeNotifier), first())
+      .subscribe({
+        next: (config) => {
+          this.loading = false
+          this.initialize(config)
+          this.store.next(config)
+          this.toastService.showInfo($localize`Configuration updated`)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError(
+            $localize`An error occurred updating configuration`,
+            e
+          )
+        },
+      })
+  }
+
+  public discardChanges() {
+    this.configForm.reset(this.initialConfig)
+  }
+}

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

@@ -6,25 +6,35 @@
 </pngx-page-header>
 
 <ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
-  <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">
-    <a ngbNavLink>
-      {{logFile}}.log
-    </a>
-  </li>
-  <div *ngIf="isLoading || !logFiles.length" class="ps-2 d-flex align-items-center">
-    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-    <ng-container *ngIf="!logFiles.length" i18n>Loading...</ng-container>
-  </div>
+  @for (logFile of logFiles; track logFile) {
+    <li [ngbNavItem]="logFile">
+      <a ngbNavLink>
+        {{logFile}}.log
+      </a>
+    </li>
+  }
+  @if (isLoading || !logFiles.length) {
+    <div class="ps-2 d-flex align-items-center">
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      @if (!logFiles.length) {
+        <ng-container i18n>Loading...</ng-container>
+      }
+    </div>
+  }
 </ul>
 
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
 <div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
-  <div *ngIf="isLoading && logFiles.length">
-    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-    <ng-container i18n>Loading...</ng-container>
-  </div>
-  <p
-    class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
-    *ngFor="let log of logs">{{log}}</p>
+  @if (isLoading && logFiles.length) {
+    <div>
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      <ng-container i18n>Loading...</ng-container>
+    </div>
+  }
+  @for (log of logs; track log) {
+    <p
+      class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
+    >{{log}}</p>
+  }
 </div>

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

@@ -54,6 +54,7 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
   ngOnDestroy(): void {
     this.unsubscribeNotifier.next(true)
     this.unsubscribeNotifier.complete()
+    clearInterval(this.autoRefreshInterval)
   }
 
   reloadLogs() {

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

@@ -1,10 +1,10 @@
 <pngx-page-header title="Settings" i18n-title>
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
   <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
-      <ng-container i18n>Open Django Admin</ng-container>
-      <svg class="sidebaricon ms-1" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
-      </svg>
+    <ng-container i18n>Open Django Admin</ng-container>
+    <svg class="sidebaricon ms-1" fill="currentColor">
+      <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
+    </svg>
   </a>
 </pngx-page-header>
 
@@ -24,10 +24,16 @@
           <div class="col">
 
             <select class="form-select" formControlName="displayLanguage">
-              <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale !== 'en-US'"> - {{lang.englishName}}</span></option>
+              @for (lang of displayLanguageOptions; track lang) {
+                <option [ngValue]="lang.code">{{lang.name}}@if (lang.code && currentLocale !== 'en-US') {
+                  <span> - {{lang.englishName}}</span>
+                }</option>
+              }
             </select>
 
-            <small *ngIf="displayLanguageIsDirty" class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
+            @if (displayLanguageIsDirty) {
+              <small class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
+            }
 
           </div>
         </div>
@@ -39,7 +45,11 @@
           <div class="col">
 
             <select class="form-select" formControlName="dateLocale">
-              <option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | customDate:'shortDate':null:lang.code}}</span></option>
+              @for (lang of dateLocaleOptions; track lang) {
+                <option [ngValue]="lang.code">{{lang.name}}@if (lang.code) {
+                  <span> - {{today | customDate:'shortDate':null:lang.code}}</span>
+                }</option>
+              }
             </select>
 
           </div>
@@ -127,198 +137,202 @@
             <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
               <svg fill="currentColor" class="buttonicon-sm me-1">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg><ng-container i18n>Reset</ng-container>
-            </button>
+                </svg><ng-container i18n>Reset</ng-container>
+              </button>
+            </div>
           </div>
-        </div>
 
-        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
+          <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <p i18n>
               Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
               Actual updating of the app must still be performed manually.
             </p>
-            <p i18n>
+              <p i18n>
               <em>No tracking data is collected by the app in any way.</em>
             </p>
-            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+              <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+            </div>
           </div>
-        </div>
 
-        <h4 class="mt-4" i18n>Bulk editing</h4>
+          <h4 class="mt-4" i18n>Bulk editing</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
-            <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
+              <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+            </div>
           </div>
-        </div>
 
-        <h4 class="mt-4" i18n>Notes</h4>
+          <h4 class="mt-4" i18n>Notes</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+            </div>
           </div>
-        </div>
 
-      </ng-template>
-    </li>
+        </ng-template>
+      </li>
 
-    <li [ngbNavItem]="SettingsNavIDs.Permissions">
-      <a ngbNavLink i18n>Permissions</a>
-      <ng-template ngbNavContent>
+      <li [ngbNavItem]="SettingsNavIDs.Permissions">
+        <a ngbNavLink i18n>Permissions</a>
+        <ng-template ngbNavContent>
 
-        <h4 i18n>Default Permissions</h4>
+          <h4 i18n>Default Permissions</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <p i18n>
               Settings apply to this user account for objects (Tags, Mail Rules, etc.) created via the web UI
             </p>
-          </div>
-        </div>
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Default Owner</span>
-          </div>
-          <div class="col-md-5">
-            <pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
-            <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
-          </div>
-        </div>
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Default View Permissions</span>
-          </div>
-          <div class="col-md-5">
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Users:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-                  <pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user>
-                </ng-container>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Groups:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
-                  <pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group>
-                </ng-container>
-              </div>
             </div>
           </div>
-        </div>
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Default Edit Permissions</span>
-          </div>
-          <div class="col-md-5">
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Users:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-                  <pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
-                </ng-container>
-              </div>
+          <div class="row mb-3">
+            <div class="col-md-3 col-form-label pt-0">
+              <span i18n>Default Owner</span>
             </div>
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Groups:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
-                  <pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
-                </ng-container>
-              </div>
-            </div>
-            <div class="row">
-              <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+            <div class="col-md-5">
+              <pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
+              <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
             </div>
           </div>
-        </div>
-      </ng-template>
-    </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.Notifications">
-      <a ngbNavLink i18n>Notifications</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Document processing</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
-            <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
-            <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
-            <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
-          </div>
-        </div>
-
-      </ng-template>
-    </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.SavedViews">
-      <a ngbNavLink i18n>Saved views</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Settings</h4>
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 i18n>Views</h4>
-        <div formGroupName="savedViews">
-
-            <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="row">
-              <div class="mb-3 col">
-                <label class="form-label" for="name_{{view.id}}" i18n>Name</label>
-                <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
-              </div>
-
-              <div class="mb-2 col">
-                <label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
-                <div class="form-check form-switch">
-                  <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-                  <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
+          <div class="row mb-3">
+            <div class="col-md-3 col-form-label pt-0">
+              <span i18n>Default View Permissions</span>
+            </div>
+            <div class="col-md-5">
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Users:</span>
                 </div>
-                <div class="form-check form-switch">
-                  <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-                  <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+                    <pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user>
+                  </ng-container>
                 </div>
               </div>
-
-              <div class="mb-2 col-auto">
-                <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-                <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Groups:</span>
+                </div>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
+                    <pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group>
+                  </ng-container>
+                </div>
               </div>
             </div>
-
-            <div *ngIf="savedViews && savedViews.length === 0" i18n>No saved views defined.</div>
-
-            <div *ngIf="!savedViews">
-              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-              <div class="visually-hidden" i18n>Loading...</div>
+          </div>
+          <div class="row mb-3">
+            <div class="col-md-3 col-form-label pt-0">
+              <span i18n>Default Edit Permissions</span>
             </div>
+            <div class="col-md-5">
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Users:</span>
+                </div>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+                    <pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
+                  </ng-container>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Groups:</span>
+                </div>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
+                    <pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
+                  </ng-container>
+                </div>
+              </div>
+              <div class="row">
+                <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+      </li>
 
-        </div>
+      <li [ngbNavItem]="SettingsNavIDs.Notifications">
+        <a ngbNavLink i18n>Notifications</a>
+        <ng-template ngbNavContent>
 
-      </ng-template>
-    </li>
-  </ul>
+          <h4 i18n>Document processing</h4>
 
-  <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
+              <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
+              <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
+              <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
+            </div>
+          </div>
 
-  <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
-</form>
+        </ng-template>
+      </li>
+
+      <li [ngbNavItem]="SettingsNavIDs.SavedViews">
+        <a ngbNavLink i18n>Saved views</a>
+        <ng-template ngbNavContent>
+
+          <h4 i18n>Settings</h4>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
+            </div>
+          </div>
+
+          <h4 i18n>Views</h4>
+          <div formGroupName="savedViews">
+
+            @for (view of savedViews; track view) {
+              <div [formGroupName]="view.id" class="row">
+                <div class="mb-3 col">
+                  <label class="form-label" for="name_{{view.id}}" i18n>Name</label>
+                  <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
+                </div>
+                <div class="mb-2 col">
+                  <label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
+                  <div class="form-check form-switch">
+                    <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
+                    <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
+                  </div>
+                  <div class="form-check form-switch">
+                    <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
+                    <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
+                  </div>
+                </div>
+                <div class="mb-2 col-auto">
+                  <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
+                  <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
+                </div>
+              </div>
+            }
+
+            @if (savedViews && savedViews.length === 0) {
+              <div i18n>No saved views defined.</div>
+            }
+
+            @if (!savedViews) {
+              <div>
+                <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                <div class="visually-hidden" i18n>Loading...</div>
+              </div>
+            }
+
+          </div>
+
+        </ng-template>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+
+    <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
+  </form>

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

@@ -13,8 +13,8 @@ import {
 import { NgSelectModule } from '@ng-select/ng-select'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@@ -138,7 +138,7 @@ describe('SettingsComponent', () => {
         of({
           all: savedViews.map((v) => v.id),
           count: savedViews.length,
-          results: (savedViews as PaperlessSavedView[]).concat([]),
+          results: (savedViews as SavedView[]).concat([]),
         })
       )
     }
@@ -226,9 +226,7 @@ describe('SettingsComponent', () => {
     savedViewPatchSpy.mockClear()
 
     // succeed saved views
-    savedViewPatchSpy.mockReturnValueOnce(
-      of(savedViews as PaperlessSavedView[])
-    )
+    savedViewPatchSpy.mockReturnValueOnce(of(savedViews as SavedView[]))
     component.saveSettings()
     expect(toastErrorSpy).not.toHaveBeenCalled()
     expect(savedViewPatchSpy).toHaveBeenCalled()
@@ -335,7 +333,7 @@ describe('SettingsComponent', () => {
     const toastSpy = jest.spyOn(toastService, 'showInfo')
     const deleteSpy = jest.spyOn(savedViewService, 'delete')
     deleteSpy.mockReturnValue(of(true))
-    component.deleteSavedView(savedViews[0] as PaperlessSavedView)
+    component.deleteSavedView(savedViews[0] as SavedView)
     expect(deleteSpy).toHaveBeenCalled()
     expect(toastSpy).toHaveBeenCalledWith(
       `Saved view "${savedViews[0].name}" deleted.`

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

@@ -21,10 +21,10 @@ import {
   takeUntil,
   tap,
 } from 'rxjs'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+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 { User } from 'src/app/data/user'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
   PermissionsService,
@@ -48,6 +48,12 @@ enum SettingsNavIDs {
   SavedViews = 4,
 }
 
+const systemLanguage = { code: '', name: $localize`Use system language` }
+const systemDateFormat = {
+  code: '',
+  name: $localize`Use date format of display language`,
+}
+
 @Component({
   selector: 'pngx-settings',
   templateUrl: './settings.component.html',
@@ -92,7 +98,7 @@ export class SettingsComponent
     savedViews: this.savedViewGroup,
   })
 
-  savedViews: PaperlessSavedView[]
+  savedViews: SavedView[]
 
   store: BehaviorSubject<any>
   storeSub: Subscription
@@ -101,8 +107,8 @@ export class SettingsComponent
   unsubscribeNotifier: Subject<any> = new Subject()
   savePending: boolean = false
 
-  users: PaperlessUser[]
-  groups: PaperlessGroup[]
+  users: User[]
+  groups: Group[]
 
   get computedDateLocale(): string {
     return (
@@ -362,7 +368,7 @@ export class SettingsComponent
     this.settings.organizingSidebarSavedViews = false
   }
 
-  deleteSavedView(savedView: PaperlessSavedView) {
+  deleteSavedView(savedView: SavedView) {
     this.savedViewService.delete(savedView).subscribe(() => {
       this.savedViewGroup.removeControl(savedView.id.toString())
       this.savedViews.splice(this.savedViews.indexOf(savedView), 1)
@@ -512,15 +518,11 @@ export class SettingsComponent
   }
 
   get displayLanguageOptions(): LanguageOption[] {
-    return [{ code: '', name: $localize`Use system language` }].concat(
-      this.settings.getLanguageOptions()
-    )
+    return [systemLanguage].concat(this.settings.getLanguageOptions())
   }
 
   get dateLocaleOptions(): LanguageOption[] {
-    return [
-      { code: '', name: $localize`Use date format of display language` },
-    ].concat(this.settings.getDateLocaleOptions())
+    return [systemDateFormat].concat(this.settings.getDateLocaleOptions())
   }
 
   get today() {
@@ -529,7 +531,7 @@ export class SettingsComponent
 
   saveSettings() {
     // only patch views that have actually changed
-    const changed: PaperlessSavedView[] = []
+    const changed: SavedView[] = []
     Object.values(this.savedViewGroup.controls)
       .filter((g: FormGroup) => !g.pristine)
       .forEach((group: FormGroup) => {

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

@@ -3,127 +3,153 @@
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <svg class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#x"/>
-      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
-    </button>
-    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-      <svg class="sidebaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
-      </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
-    </button>
-    <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
-      <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
-      <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
-    </div>
-  </div>
-</pngx-page-header>
+        </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+        <svg class="sidebaricon" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
+          </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
+        </button>
+        <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
+          <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
+          <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+        </div>
+      </div>
+    </pngx-page-header>
 
-<ng-container *ngIf="!tasksService.completedFileTasks && tasksService.loading">
-  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-  <div class="visually-hidden" i18n>Loading...</div>
-</ng-container>
+    @if (!tasksService.completedFileTasks && tasksService.loading) {
+      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+      <div class="visually-hidden" i18n>Loading...</div>
+    }
 
-<ng-template let-tasks="tasks" #tasksTemplate>
-  <table class="table table-striped align-middle border shadow-sm">
-    <thead>
-      <tr>
-        <th scope="col">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
-            <label class="form-check-label" for="all-tasks"></label>
-          </div>
-        </th>
-        <th scope="col" i18n>Name</th>
-        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
-        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'" i18n>Results</th>
-        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
-        <th scope="col" i18n>Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <ng-container *ngFor="let task of tasks | slice: (page-1) * pageSize : page * pageSize">
-      <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
-        <td>
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
-            <label class="form-check-label" for="task{{task.id}}"></label>
-          </div>
-        </td>
-        <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
-        <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
-        <td class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'">
-          <div *ngIf="task.result?.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
-            [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
-            <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
-          </div>
-          <span *ngIf="task.result?.length <= 50" class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
-          <ng-template #resultPopover>
-            <pre class="small mb-0">{{ task.result | slice:0:300 }}<ng-container *ngIf="task.result.length > 300">&hellip;</ng-container></pre>
-            <ng-container *ngIf="task.result?.length > 300"><br/><em>(<ng-container i18n>click for full output</ng-container>)</em></ng-container>
-          </ng-template>
-        </td>
-        <td class="d-lg-none">
-          <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
-            <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
-              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-            </svg>
-          </button>
-        </td>
-        <td scope="row">
-          <div class="btn-group" role="group">
-            <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#check"/>
-              </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
-            </button>
-            <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-              <button *ngIf="task.related_document" class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                </svg>&nbsp;<ng-container i18n>Open Document</ng-container>
-              </button>
-            </ng-container>
-          </div>
-        </td>
-      </tr>
-      <tr>
-        <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
-          <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
-        </td>
-      </tr>
-      </ng-container>
-    </tbody>
-  </table>
+    <ng-template let-tasks="tasks" #tasksTemplate>
+      <table class="table table-striped align-middle border shadow-sm">
+        <thead>
+          <tr>
+            <th scope="col">
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <label class="form-check-label" for="all-tasks"></label>
+              </div>
+            </th>
+            <th scope="col" i18n>Name</th>
+            <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+            @if (activeTab !== 'started' && activeTab !== 'queued') {
+              <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
+            }
+            <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+            <th scope="col" i18n>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
+            <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
+              <td>
+                <div class="form-check">
+                  <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
+                  <label class="form-check-label" for="task{{task.id}}"></label>
+                </div>
+              </td>
+              <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
+              <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
+              @if (activeTab !== 'started' && activeTab !== 'queued') {
+                <td class="d-none d-lg-table-cell">
+                  @if (task.result?.length > 50) {
+                    <div class="result" (click)="expandTask(task); $event.stopPropagation();"
+                      [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
+                      <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
+                    </div>
+                  }
+                  @if (task.result?.length <= 50) {
+                    <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+                  }
+                  <ng-template #resultPopover>
+                    <pre class="small mb-0">{{ task.result | slice:0:300 }}@if (task.result.length > 300) {
+                      &hellip;
+                    }</pre>
+                    @if (task.result?.length > 300) {
+                      <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
+                    }
+                  </ng-template>
+                </td>
+              }
+              <td class="d-lg-none">
+                <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
+                  <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+                    <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+                  </svg>
+                </button>
+              </td>
+              <td scope="row">
+                <div class="btn-group" role="group">
+                  <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
+                    <svg class="sidebaricon" fill="currentColor">
+                      <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                      </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+                    </button>
+                    <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+                      @if (task.related_document) {
+                        <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
+                          <svg class="sidebaricon" fill="currentColor">
+                            <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                            </svg>&nbsp;<ng-container i18n>Open Document</ng-container>
+                          </button>
+                        }
+                      </ng-container>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
+                    <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
 
-  <div class="pb-3 d-sm-flex justify-content-between align-items-center">
-    <div class="pb-2 pb-sm-0" i18n *ngIf="tasks.length > 0">{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</div>
-    <ngb-pagination *ngIf="tasks.length > pageSize" [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
-  </div>
-</ng-template>
+          <div class="pb-3 d-sm-flex justify-content-between align-items-center">
+            @if (tasks.length > 0) {
+              <div class="pb-2 pb-sm-0" i18n>{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</div>
+            }
+            @if (tasks.length > pageSize) {
+              <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
+            }
+          </div>
+        </ng-template>
 
-<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
-  <li ngbNavItem="failed">
-    <a ngbNavLink i18n>Failed<span *ngIf="tasksService.failedFileTasks.length > 0" class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></a>
-    <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
-    </ng-template>
-  </li>
-  <li ngbNavItem="completed">
-    <a ngbNavLink i18n>Complete<span *ngIf="tasksService.completedFileTasks.length > 0" class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span></a>
-    <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
-    </ng-template>
-  </li>
-  <li ngbNavItem="started">
-    <a ngbNavLink i18n>Started<span *ngIf="tasksService.startedFileTasks.length > 0" class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span></a>
-    <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
-    </ng-template>
-  </li>
-  <li ngbNavItem="queued">
-    <a ngbNavLink i18n>Queued<span *ngIf="tasksService.queuedFileTasks.length > 0" class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span></a>
-    <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
-    </ng-template>
-  </li>
-</ul>
-<div [ngbNavOutlet]="nav"></div>
+        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
+          <li ngbNavItem="failed">
+            <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
+<span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+          <li ngbNavItem="completed">
+            <a ngbNavLink i18n>Complete@if (tasksService.completedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+          <li ngbNavItem="started">
+            <a ngbNavLink i18n>Started@if (tasksService.startedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+          <li ngbNavItem="queued">
+            <a ngbNavLink i18n>Queued@if (tasksService.queuedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+        </ul>
+        <div [ngbNavOutlet]="nav"></div>

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

@@ -46,6 +46,7 @@ export class TasksComponent
 
   ngOnDestroy() {
     this.tasksService.cancelPending()
+    clearInterval(this.autoRefreshInterval)
   }
 
   dismissTask(task: PaperlessTask) {

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

@@ -1,97 +1,104 @@
 <pngx-page-header title="Users & Groups" i18n-title>
 </pngx-page-header>
 
-<ng-container *ngIf="users">
-    <h4 class="d-flex">
-        <ng-container i18n>Users</ng-container>
-        <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
-        <svg class="sidebaricon me-1" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-        </svg>
-        <ng-container i18n>Add User</ng-container>
-        </button>
-    </h4>
-    <ul class="list-group">
-        <li class="list-group-item">
+@if (users) {
+  <h4 class="d-flex">
+    <ng-container i18n>Users</ng-container>
+    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
+      <svg class="sidebaricon me-1" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+      </svg>
+      <ng-container i18n>Add User</ng-container>
+    </button>
+  </h4>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <div class="row">
+        <div class="col" i18n>Username</div>
+        <div class="col" i18n>Name</div>
+        <div class="col" i18n>Groups</div>
+        <div class="col" i18n>Actions</div>
+      </div>
+    </li>
+    @for (user of users; track user) {
+      <li class="list-group-item">
         <div class="row">
-            <div class="col" i18n>Username</div>
-            <div class="col" i18n>Name</div>
-            <div class="col" i18n>Groups</div>
-            <div class="col" i18n>Actions</div>
-        </div>
-        </li>
-
-        <li *ngFor="let user of users" class="list-group-item">
-        <div class="row">
-            <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
-            <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
-            <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
-            <div class="col">
+          <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
+          <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
+          <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
+          <div class="col">
             <div class="btn-group">
-                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                    </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
+                <svg class="buttonicon-sm" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#pencil" />
+                  </svg>&nbsp;<ng-container i18n>Edit</ng-container>
                 </button>
                 <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                  <svg class="buttonicon-sm" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
                     </svg>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
+                  </button>
+                </div>
+              </div>
             </div>
-            </div>
-        </div>
-        </li>
-    </ul>
-</ng-container>
+          </li>
+        }
+      </ul>
+    }
 
-<ng-container *ngIf="groups">
-    <h4 class="mt-4 d-flex">
+    @if (groups) {
+      <h4 class="mt-4 d-flex">
         <ng-container i18n>Groups</ng-container>
         <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
-        <svg class="sidebaricon me-1" fill="currentColor">
+          <svg class="sidebaricon me-1" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-        </svg>
-        <ng-container i18n>Add Group</ng-container>
+          </svg>
+          <ng-container i18n>Add Group</ng-container>
         </button>
-    </h4>
-    <ul *ngIf="groups.length > 0" class="list-group">
-        <li class="list-group-item">
-        <div class="row">
-            <div class="col" i18n>Name</div>
-            <div class="col"></div>
-            <div class="col"></div>
-            <div class="col" i18n>Actions</div>
-        </div>
-        </li>
-
-        <li *ngFor="let group of groups" class="list-group-item">
-        <div class="row">
-            <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
-            <div class="col"></div>
-            <div class="col"></div>
-            <div class="col">
-            <div class="btn-group">
-                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
-                    <svg class="buttonicon-sm" fill="currentColor">
+      </h4>
+      @if (groups.length > 0) {
+        <ul class="list-group">
+          <li class="list-group-item">
+            <div class="row">
+              <div class="col" i18n>Name</div>
+              <div class="col"></div>
+              <div class="col"></div>
+              <div class="col" i18n>Actions</div>
+            </div>
+          </li>
+          @for (group of groups; track group) {
+            <li class="list-group-item">
+              <div class="row">
+                <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
+                <div class="col"></div>
+                <div class="col"></div>
+                <div class="col">
+                  <div class="btn-group">
+                    <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
+                      <svg class="buttonicon-sm" fill="currentColor">
                         <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                    </svg>&nbsp;<ng-container i18n>Edit</ng-container>
-                </button>
-                <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                    </svg>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
-            </div>
-            </div>
-        </div>
-        </li>
-        <li *ngIf="groups.length === 0" class="list-group-item" i18n>No groups defined</li>
-    </ul>
+                        </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                      </button>
+                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
+                        <svg class="buttonicon-sm" fill="currentColor">
+                          <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                          </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              }
+              @if (groups.length === 0) {
+                <li class="list-group-item" i18n>No groups defined</li>
+              }
+            </ul>
+          }
+        }
 
-</ng-container>
-
-<div *ngIf="!users || !groups">
-    <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-    <div class="visually-hidden" i18n>Loading...</div>
-</div>
+        @if (!users || !groups) {
+          <div>
+            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+            <div class="visually-hidden" i18n>Loading...</div>
+          </div>
+        }

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

@@ -41,8 +41,8 @@ import { TextComponent } from '../../common/input/text/text.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { SettingsComponent } from '../settings/settings.component'
 import { UsersAndGroupsComponent } from './users-groups.component'
-import { PaperlessUser } from 'src/app/data/paperless-user'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
+import { User } from 'src/app/data/user'
+import { Group } from 'src/app/data/group'
 
 const users = [
   { id: 1, username: 'user1', is_superuser: false },
@@ -119,7 +119,7 @@ describe('UsersAndGroupsComponent', () => {
         of({
           all: users.map((a) => a.id),
           count: users.length,
-          results: (users as PaperlessUser[]).concat([]),
+          results: (users as User[]).concat([]),
         })
       )
     }
@@ -128,7 +128,7 @@ describe('UsersAndGroupsComponent', () => {
         of({
           all: groups.map((r) => r.id),
           count: groups.length,
-          results: (groups as PaperlessGroup[]).concat([]),
+          results: (groups as Group[]).concat([]),
         })
       )
     }

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

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, first, takeUntil } from 'rxjs'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
@@ -23,8 +23,8 @@ export class UsersAndGroupsComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  users: PaperlessUser[]
-  groups: PaperlessGroup[]
+  users: User[]
+  groups: Group[]
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
@@ -69,7 +69,7 @@ export class UsersAndGroupsComponent
     this.unsubscribeNotifier.next(true)
   }
 
-  editUser(user: PaperlessUser = null) {
+  editUser(user: User = null) {
     var modal = this.modalService.open(UserEditDialogComponent, {
       backdrop: 'static',
       size: 'xl',
@@ -80,7 +80,7 @@ export class UsersAndGroupsComponent
     modal.componentInstance.object = user
     modal.componentInstance.succeeded
       .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((newUser: PaperlessUser) => {
+      .subscribe((newUser: User) => {
         if (
           newUser.id === this.settings.currentUser.id &&
           (modal.componentInstance as UserEditDialogComponent).passwordIsSet
@@ -107,7 +107,7 @@ export class UsersAndGroupsComponent
       })
   }
 
-  deleteUser(user: PaperlessUser) {
+  deleteUser(user: User) {
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })
@@ -133,7 +133,7 @@ export class UsersAndGroupsComponent
     })
   }
 
-  editGroup(group: PaperlessGroup = null) {
+  editGroup(group: Group = null) {
     var modal = this.modalService.open(GroupEditDialogComponent, {
       backdrop: 'static',
       size: 'lg',
@@ -157,7 +157,7 @@ export class UsersAndGroupsComponent
       })
   }
 
-  deleteGroup(group: PaperlessGroup) {
+  deleteGroup(group: Group) {
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })

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

@@ -4,24 +4,32 @@
     (click)="isMenuCollapsed = !isMenuCollapsed">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard" tourAnchor="tour.intro">
+  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0"
+    [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard"
+    tourAnchor="tour.intro">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="1em" class="me-2" fill="currentColor">
-      <path d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z" transform="translate(0 0)"/>
+      <path
+        d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z"
+        transform="translate(0 0)" />
     </svg>
     <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">Paperless-ngx</span>
   </a>
-  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
+    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
     <form (ngSubmit)="search()" class="form-inline flex-grow-1">
       <svg width="1em" height="1em" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#search"/>
+        <use xlink:href="assets/bootstrap-icons.svg#search" />
       </svg>
       <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
-        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)" (selectItem)="itemSelected($event)" i18n-placeholder>
-      <button type="button" *ngIf="!searchFieldEmpty" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
-        <svg fill="currentColor" class="buttonicon-sm me-1">
-          <use xlink:href="assets/bootstrap-icons.svg#x"/>
-        </svg>
-      </button>
+        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)"
+        (selectItem)="itemSelected($event)" i18n-placeholder>
+      @if (!searchFieldEmpty) {
+        <button type="button" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
+          <svg fill="currentColor" class="buttonicon-sm me-1">
+            <use xlink:href="assets/bootstrap-icons.svg#x" />
+          </svg>
+        </button>
+      }
     </form>
   </div>
   <ul ngbNav class="order-sm-3">
@@ -31,7 +39,7 @@
           {{this.settingsService.displayName}}
         </span>
         <svg width="1.3em" height="1.3em" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
+          <use xlink:href="assets/bootstrap-icons.svg#person-circle" />
         </svg>
       </button>
       <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
@@ -41,23 +49,25 @@
         </div>
         <button ngbDropdownItem class="nav-link" (click)="editProfile()">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#person"/>
+            <use xlink:href="assets/bootstrap-icons.svg#person" />
           </svg><ng-container i18n>My Profile</ng-container>
         </button>
-        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
+        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
+          *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#gear"/>
+            <use xlink:href="assets/bootstrap-icons.svg#gear" />
           </svg><ng-container i18n>Settings</ng-container>
         </a>
         <a ngbDropdownItem class="nav-link" href="accounts/logout/" (click)="onLogout()">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
+            <use xlink:href="assets/bootstrap-icons.svg#door-open" />
           </svg><ng-container i18n>Logout</ng-container>
         </a>
-				<div class="dropdown-divider"></div>
-        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com">
+        <div class="dropdown-divider"></div>
+        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer"
+          href="https://docs.paperless-ngx.com">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
+            <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
           </svg><ng-container i18n>Documentation</ng-container>
         </a>
       </div>
@@ -67,81 +77,108 @@
 
 <div class="container-fluid">
   <div class="row">
-    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating" [ngbCollapse]="isMenuCollapsed">
+    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse"
+      [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating"
+      [ngbCollapse]="isMenuCollapsed">
       <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
         <svg class="sidebaricon-sm" fill="currentColor">
-          <use *ngIf="slimSidebarEnabled" xlink:href="assets/bootstrap-icons.svg#chevron-double-right"/>
-          <use *ngIf="!slimSidebarEnabled" xlink:href="assets/bootstrap-icons.svg#chevron-double-left"/>
+          @if (slimSidebarEnabled) {
+            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-right" />
+          } @else {
+            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-left" />
+          }
         </svg>
       </button>
       <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
         <ul class="nav flex-column">
           <li class="nav-item">
-            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#house"/>
+                <use xlink:href="assets/bootstrap-icons.svg#house" />
               </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#files"/>
+                <use xlink:href="assets/bootstrap-icons.svg#files" />
               </svg><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
             </a>
           </li>
         </ul>
         <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-          <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews?.length > 0'>
-            <span i18n>Saved views</span>
-            <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
-          </h6>
+          @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
+              <span i18n>Saved views</span>
+              @if (savedViewService.loading) {
+                <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+              }
+            </h6>
+          }
           <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
-            <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews"
-              cdkDrag
-              [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
-              cdkDragPreviewContainer="parent"
-              cdkDragPreviewClass="navItemDrag"
-              (cdkDragStarted)="onDragStart($event)"
-              (cdkDragEnded)="onDragEnd($event)">
-              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#funnel"/>
-                </svg><span>&nbsp;{{view.name}}</span>
-              </a>
-              <div *ngIf="settingsService.organizingSidebarSavedViews" class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
-                <svg class="sidebaricon text-muted" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#grip-vertical"/>
-                </svg>
-              </div>
-            </li>
+            @for (view of savedViewService.sidebarViews; track view) {
+              <li class="nav-item w-100" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
+                cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
+                (cdkDragEnded)="onDragEnd($event)">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#funnel" />
+                  </svg><span>&nbsp;{{view.name}}</span>
+                </a>
+                @if (settingsService.organizingSidebarSavedViews) {
+                  <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                    <svg class="sidebaricon text-muted" fill="currentColor">
+                      <use xlink:href="assets/bootstrap-icons.svg#grip-vertical" />
+                    </svg>
+                  </div>
+                }
+              </li>
+            }
           </ul>
         </ng-container>
 
         <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-          <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
-            <span i18n>Open documents</span>
-          </h6>
+          @if (openDocuments.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
+              <span i18n>Open documents</span>
+            </h6>
+          }
           <ul class="nav flex-column mb-2">
-            <li class="nav-item w-100" *ngFor='let d of openDocuments'>
-              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                </svg><span>&nbsp;{{d.title | documentTitle}}</span>
-                <span class="close" (click)="closeDocument(d); $event.preventDefault()">
-                  <svg fill="currentColor" class="toolbaricon">
-                    <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                  </svg>
-                </span>
-              </a>
-            </li>
-            <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
-              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()" ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
-              </a>
-            </li>
+            @for (d of openDocuments; track d) {
+              <li class="nav-item w-100">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#file-text" />
+                  </svg><span>&nbsp;{{d.title | documentTitle}}</span>
+                  <span class="close" (click)="closeDocument(d); $event.preventDefault()">
+                    <svg fill="currentColor" class="toolbaricon">
+                      <use xlink:href="assets/bootstrap-icons.svg#x" />
+                    </svg>
+                  </span>
+                </a>
+              </li>
+            }
+            @if (openDocuments.length >= 1) {
+              <li class="nav-item w-100">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
+                  ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#x" />
+                  </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+                </a>
+              </li>
+            }
           </ul>
         </ng-container>
 
@@ -149,52 +186,72 @@
           <span i18n>Manage</span>
         </h6>
         <ul class="nav flex-column mb-2">
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
-            <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+            <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#person"/>
+                <use xlink:href="assets/bootstrap-icons.svg#person" />
               </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }" tourAnchor="tour.tags">
-            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
+            tourAnchor="tour.tags">
+            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#tags"/>
+                <use xlink:href="assets/bootstrap-icons.svg#tags" />
               </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
-            <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+            <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#hash"/>
+                <use xlink:href="assets/bootstrap-icons.svg#hash" />
               </svg><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
-            <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#folder"/>
+                <use xlink:href="assets/bootstrap-icons.svg#folder" />
               </svg><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
-            <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#ui-radios"/>
+                <use xlink:href="assets/bootstrap-icons.svg#ui-radios" />
               </svg><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }" tourAnchor="tour.consumption-templates">
-            <a class="nav-link" routerLink="templates" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Consumption templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }"
+            tourAnchor="tour.workflows">
+            <a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#file-earmark-ruled"/>
-              </svg><span>&nbsp;<ng-container i18n>Templates</ng-container></span>
+                <use xlink:href="assets/bootstrap-icons.svg#boxes" />
+              </svg><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }" tourAnchor="tour.mail">
-            <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
+            tourAnchor="tour.mail">
+            <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#envelope"/>
+                <use xlink:href="assets/bootstrap-icons.svg#envelope" />
               </svg><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
             </a>
           </li>
@@ -204,92 +261,134 @@
           <span i18n>Administration</span>
         </h6>
         <ul class="nav flex-column mb-2">
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }" tourAnchor="tour.settings">
-            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"
+            tourAnchor="tour.settings">
+            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#gear"/>
+                <use xlink:href="assets/bootstrap-icons.svg#gear" />
               </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-            <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
+            <a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#people"/>
+                <use xlink:href="assets/bootstrap-icons.svg#sliders2-vertical" />
+              </svg><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+            <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#people" />
               </svg><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
             </a>
           </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }" tourAnchor="tour.file-tasks">
-            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <span *ngIf="tasksService.failedFileTasks.length > 0 && slimSidebarEnabled" class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }"
+            tourAnchor="tour.file-tasks">
+            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
+                <span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
+              }
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#list-task"/>
-              </svg><span>&nbsp;<ng-container i18n>File Tasks<span *ngIf="tasksService.failedFileTasks.length > 0"><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span></ng-container></span>
+                <use xlink:href="assets/bootstrap-icons.svg#list-task" />
+              </svg><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
+                    <span><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span>
+                  }</ng-container></span>
             </a>
           </li>
           <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
-            <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#text-left"/>
+                <use xlink:href="assets/bootstrap-icons.svg#text-left" />
               </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
             </a>
           </li>
           <li class="nav-item mt-2" tourAnchor="tour.outro">
-            <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
+              target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
               <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#question-circle"/>
+                <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
               </svg><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
             </a>
           </li>
           <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
             <div class="px-3 py-0 text-muted small d-flex align-items-center flex-wrap">
               <div class="me-3">
-                <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer"
+                  href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                  triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                   {{ versionString }}
                 </a>
               </div>
-              <div *ngIf="!settingsService.updateCheckingIsSet || appRemoteVersion" class="version-check">
-                <ng-template #updateAvailablePopContent>
-                  <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is available.</ng-container><br/><ng-container i18n>Click to view.</ng-container></span>
-                </ng-template>
-                <ng-template #updateCheckingNotEnabledPopContent>
-                  <p class="small mb-2">
-                    <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
-                  </p>
-                  <div class="btn-group btn-group-xs flex-fill w-100">
-                    <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
-                    <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
-                  </div>
-                  <p class="small mb-0 mt-2">
-                    <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
-                      How does this work?
+              @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
+                <div class="version-check">
+                  <ng-template #updateAvailablePopContent>
+                    <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is
+                        available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>
+                  </ng-template>
+                  <ng-template #updateCheckingNotEnabledPopContent>
+                    <p class="small mb-2">
+                      <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
+                    </p>
+                    <div class="btn-group btn-group-xs flex-fill w-100">
+                      <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
+                      <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
+                    </div>
+                    <p class="small mb-0 mt-2">
+                      <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
+                        How does this work?
+                      </a>
+                    </p>
+                  </ng-template>
+                  @if (settingsService.updateCheckingIsSet) {
+                    @if (appRemoteVersion.update_available) {
+                      <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer"
+                        href="https://github.com/paperless-ngx/paperless-ngx/releases"
+                        [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
+                        container="body">
+                        <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;"
+                          viewBox="0 0 16 16">
+                          <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+                        </svg>
+                        @if (appRemoteVersion?.update_available) {
+                        <ng-container i18n>Update available</ng-container>
+                        }
+                      </a>
+                    }
+                  } @else {
+                    <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
+                      [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
+                      container="body">
+                      <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;"
+                        viewBox="0 0 16 16">
+                        <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+                      </svg>
                     </a>
-                  </p>
-                </ng-template>
-                <ng-container *ngIf="settingsService.updateCheckingIsSet; else updateCheckNotSet">
-                  <a *ngIf="appRemoteVersion.update_available" class="small text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx/releases"
-                  [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave" container="body">
-                    <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
-                      <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                    </svg>
-                    <ng-container *ngIf="appRemoteVersion?.update_available" i18n>Update available</ng-container>
-                  </a>
-                </ng-container>
-                <ng-template #updateCheckNotSet>
-                  <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
-                  [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter" container="body">
-                    <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
-                      <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                    </svg>
-                  </a>
-                </ng-template>
-              </div>
+                  }
+                </div>
+              }
             </div>
           </li>
         </ul>
       </div>
     </nav>
 
-    <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
+    <main role="main" class="ms-sm-auto px-md-4"
+      [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
       <router-outlet></router-outlet>
     </main>
   </div>

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

@@ -15,11 +15,11 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { PermissionsService } from 'src/app/services/permissions.service'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { Observable, of, tap, throwError } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
@@ -31,7 +31,7 @@ import { FILTER_FULLTEXT_QUERY } from 'src/app/data/filter-rule-type'
 import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { SavedView } from 'src/app/data/saved-view'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
 
 const saved_views = [
@@ -356,7 +356,7 @@ describe('AppFrameComponent', () => {
     const toastSpy = jest.spyOn(toastService, 'showInfo')
     jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
     component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
-      PaperlessSavedView[]
+      SavedView[]
     >)
     expect(settingsSpy).toHaveBeenCalledWith([
       saved_views[2],
@@ -379,7 +379,7 @@ describe('AppFrameComponent', () => {
       .spyOn(settingsService, 'storeSettings')
       .mockReturnValue(throwError(() => new Error('unable to save')))
     component.onDrop({ previousIndex: 0, currentIndex: 2 } as CdkDragDrop<
-      PaperlessSavedView[]
+      SavedView[]
     >)
     expect(toastSpy).toHaveBeenCalled()
   })

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

@@ -10,7 +10,7 @@ import {
   first,
   catchError,
 } from 'rxjs/operators'
-import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { Document } from 'src/app/data/document'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
@@ -25,7 +25,7 @@ import {
 import { SettingsService } from 'src/app/services/settings.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { ToastService } from 'src/app/services/toast.service'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import {
@@ -33,7 +33,7 @@ import {
   PermissionsService,
   PermissionType,
 } from 'src/app/services/permissions.service'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { SavedView } from 'src/app/data/saved-view'
 import {
   CdkDragStart,
   CdkDragEnd,
@@ -132,7 +132,7 @@ export class AppFrameComponent
     this.closeMenu()
   }
 
-  get openDocuments(): PaperlessDocument[] {
+  get openDocuments(): Document[] {
     return this.openDocumentsService.getOpenDocuments()
   }
 
@@ -200,7 +200,7 @@ export class AppFrameComponent
     ])
   }
 
-  closeDocument(d: PaperlessDocument) {
+  closeDocument(d: Document) {
     this.openDocumentsService
       .closeDocument(d)
       .pipe(first())
@@ -250,7 +250,7 @@ export class AppFrameComponent
     this.settingsService.globalDropzoneEnabled = true
   }
 
-  onDrop(event: CdkDragDrop<PaperlessSavedView[]>) {
+  onDrop(event: CdkDragDrop<SavedView[]>) {
     const sidebarViews = this.savedViewService.sidebarViews.concat([])
     moveItemInArray(sidebarViews, event.previousIndex, event.currentIndex)
 

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

@@ -1,9 +1,15 @@
-<button *ngIf="active" class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
-    <svg *ngIf="!isNumbered && selected" width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+@if (active) {
+  <button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
+    @if (!isNumbered && selected) {
+      <svg width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
-    </svg>
-    <div *ngIf="isNumbered" class="number">{{number}}<span class="visually-hidden">selected</span></div>
+      </svg>
+    }
+    @if (isNumbered) {
+      <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    }
     <svg width=".9em" height="1em" class="x m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
+      <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
     </svg>
-</button>
+  </button>
+}

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

@@ -1,24 +1,32 @@
-    <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">
-      <p *ngIf="messageBold"><b>{{messageBold}}</b></p>
-      <p class="mb-0" *ngIf="message" [innerHTML]="message | safeHtml"></p>
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>
+<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">
+  @if (messageBold) {
+    <p><b>{{messageBold}}</b></p>
+  }
+  @if (message) {
+    <p class="mb-0" [innerHTML]="message | safeHtml"></p>
+  }
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>
         <span class="d-inline-block" style="padding-bottom: 1px;" >Cancel</span>
       </button>
-      <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
-        <span>
-          {{btnCaption}}
-          <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
-        </span>
-        <ngb-progressbar *ngIf="!confirmButtonEnabled" style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
-      </button>
-      <button *ngIf="alternativeBtnCaption" type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
-        {{alternativeBtnCaption}}
-      </button>
-    </div>
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+    <span>
+      {{btnCaption}}
+      <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
+    </span>
+    @if (!confirmButtonEnabled) {
+      <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+    }
+  </button>
+  @if (alternativeBtnCaption) {
+    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
+      {{alternativeBtnCaption}}
+    </button>
+  }
+</div>

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

@@ -8,10 +8,7 @@ import {
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { of } from 'rxjs'
-import {
-  PaperlessCustomField,
-  PaperlessCustomFieldDataType,
-} from 'src/app/data/paperless-custom-field'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { SelectComponent } from '../input/select/select.component'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -24,16 +21,16 @@ import {
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { By } from '@angular/platform-browser'
 
-const fields: PaperlessCustomField[] = [
+const fields: CustomField[] = [
   {
     id: 0,
     name: 'Field 1',
-    data_type: PaperlessCustomFieldDataType.Integer,
+    data_type: CustomFieldDataType.Integer,
   },
   {
     id: 1,
     name: 'Field 2',
-    data_type: PaperlessCustomFieldDataType.String,
+    data_type: CustomFieldDataType.String,
   },
 ]
 

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

@@ -7,8 +7,8 @@ import {
 } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, first, takeUntil } from 'rxjs'
-import { PaperlessCustomField } from 'src/app/data/paperless-custom-field'
-import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-field-instance'
+import { CustomField } from 'src/app/data/custom-field'
+import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
@@ -31,16 +31,16 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
   disabled: boolean = false
 
   @Input()
-  existingFields: PaperlessCustomFieldInstance[] = []
+  existingFields: CustomFieldInstance[] = []
 
   @Output()
-  added: EventEmitter<PaperlessCustomField> = new EventEmitter()
+  added: EventEmitter<CustomField> = new EventEmitter()
 
   @Output()
-  created: EventEmitter<PaperlessCustomField> = new EventEmitter()
+  created: EventEmitter<CustomField> = new EventEmitter()
 
-  private customFields: PaperlessCustomField[] = []
-  public unusedFields: PaperlessCustomField[]
+  private customFields: CustomField[] = []
+  public unusedFields: CustomField[]
 
   public name: string
 
@@ -88,8 +88,8 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
   }
 
   public getCustomFieldFromInstance(
-    instance: PaperlessCustomFieldInstance
-  ): PaperlessCustomField {
+    instance: CustomFieldInstance
+  ): CustomField {
     return this.customFields.find((f) => f.id === instance.field)
   }
 

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

@@ -1,15 +1,18 @@
-  <div class="btn-group w-100" ngbDropdown role="group">
+<div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
     {{title}}
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
   <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-        <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
+      @for (rd of relativeDates; track rd) {
+        <button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
           <div class="selected-icon">
-            <svg *ngIf="relativeDate === rd.id" fill="currentColor" class="buttonicon-sm">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-          </svg>
+            @if (relativeDate === rd.id) {
+              <svg fill="currentColor" class="buttonicon-sm">
+                <use xlink:href="assets/bootstrap-icons.svg#check"/>
+              </svg>
+            }
           </div>
           <div class="d-flex justify-content-between w-100 align-items-center ps-2">
             <div class="pe-2 pe-lg-4">
@@ -22,52 +25,57 @@
             </div>
           </div>
         </button>
-        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+      }
+      <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 
-          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-            <div i18n>After</div>
-            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
+        <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+          <div i18n>After</div>
+          @if (dateAfter) {
+            <a class="btn btn-link p-0 m-0" (click)="clearAfter()">
               <svg fill="currentColor" class="buttonicon-sm">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
               </svg>
               <small i18n>Clear</small>
             </a>
-          </div>
-
-          <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                    maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
-            <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
-              </svg>
-            </button>
-          </div>
-
+          }
         </div>
-        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
 
-          <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-            <div i18n>Before</div>
-            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
+        <div class="input-group input-group-sm">
+          <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
+          <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
+            <svg fill="currentColor" class="buttonicon-sm">
+              <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
+            </svg>
+          </button>
+        </div>
+
+      </div>
+      <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+
+        <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+          <div i18n>Before</div>
+          @if (dateBefore) {
+            <a class="btn btn-link p-0 m-0" (click)="clearBefore()">
               <svg fill="currentColor" class="buttonicon-sm">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
               </svg>
               <small i18n>Clear</small>
             </a>
-          </div>
-
-          <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                    maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
-            <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
-              </svg>
-            </button>
-          </div>
-
+          }
         </div>
+
+        <div class="input-group input-group-sm">
+          <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
+          <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
+            <svg fill="currentColor" class="buttonicon-sm">
+              <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
+            </svg>
+          </button>
+        </div>
+
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,93 +0,0 @@
-<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="row">
-        <div class="col-md-8">
-          <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
-        </div>
-        <div class="col">
-          <pngx-input-number i18n-title title="Sort order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-4">
-          <h5 class="border-bottom pb-2" i18n>Filters</h5>
-          <p class="small" i18n>Process documents that match <em>all</em> filters specified below.</p>
-          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
-          <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
-          <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case insensitive.</a>" [error]="error?.filter_path"></pngx-input-text>
-          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
-        </div>
-        <div class="col">
-          <div class="row">
-            <div class="col">
-              <h5 class="border-bottom pb-2" i18n>Assignments</h5>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col">
-              <pngx-input-text i18n-title title="Assign title" formControlName="assign_title" i18n-hint hint="Can include some placeholders, see <a target='_blank' href='https://docs.paperless-ngx.com/usage/#consumption-templates'>documentation</a>." [error]="error?.assign_title"></pngx-input-text>
-              <pngx-input-tags [allowCreate]="false" i18n-title title="Assign tags" formControlName="assign_tags"></pngx-input-tags>
-              <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
-              <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
-              <pngx-input-select i18n-title title="Assign storage path" [items]="storagePaths" [allowNull]="true" formControlName="assign_storage_path"></pngx-input-select>
-              <pngx-input-select i18n-title title="Assign custom fields" multiple="true" [items]="customFields" [allowNull]="true" formControlName="assign_custom_fields"></pngx-input-select>
-          </div>
-          <div class="col">
-            <pngx-input-select i18n-title title="Assign owner" [items]="users" bindLabel="username" formControlName="assign_owner" [allowNull]="true"></pngx-input-select>
-              <div>
-                <label class="form-label" i18n>Assign view permissions</label>
-                <div class="mb-2">
-                  <div class="row mb-1">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-user type="view" formControlName="assign_view_users"></pngx-permissions-user>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-group type="view" formControlName="assign_view_groups"></pngx-permissions-group>
-                    </div>
-                  </div>
-                </div>
-                <label class="form-label" i18n>Assign edit permissions</label>
-                <div>
-                  <div class="row mb-1">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-user type="change" formControlName="assign_change_users"></pngx-permissions-user>
-                    </div>
-                  </div>
-                  <div class="row">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-group type="change" formControlName="assign_change_groups"></pngx-permissions-group>
-                    </div>
-                  </div>
-                  <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
-                </div>
-              </div>
-          </div>
-        </div>
-      </div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <span class="text-danger" *ngIf="error?.non_field_errors"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
-    </div>
-  </form>

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

@@ -1,125 +0,0 @@
-import { Component } from '@angular/core'
-import { FormGroup, FormControl } from '@angular/forms'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { first } from 'rxjs'
-import {
-  DocumentSource,
-  PaperlessConsumptionTemplate,
-} from 'src/app/data/paperless-consumption-template'
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
-import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
-import { ConsumptionTemplateService } from 'src/app/services/rest/consumption-template.service'
-import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
-import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
-import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { UserService } from 'src/app/services/rest/user.service'
-import { SettingsService } from 'src/app/services/settings.service'
-import { EditDialogComponent } from '../edit-dialog.component'
-import { MailRuleService } from 'src/app/services/rest/mail-rule.service'
-import { PaperlessMailRule } from 'src/app/data/paperless-mail-rule'
-import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { PaperlessCustomField } from 'src/app/data/paperless-custom-field'
-
-export const DOCUMENT_SOURCE_OPTIONS = [
-  {
-    id: DocumentSource.ConsumeFolder,
-    name: $localize`Consume Folder`,
-  },
-  {
-    id: DocumentSource.ApiUpload,
-    name: $localize`API Upload`,
-  },
-  {
-    id: DocumentSource.MailFetch,
-    name: $localize`Mail Fetch`,
-  },
-]
-
-@Component({
-  selector: 'pngx-consumption-template-edit-dialog',
-  templateUrl: './consumption-template-edit-dialog.component.html',
-  styleUrls: ['./consumption-template-edit-dialog.component.scss'],
-})
-export class ConsumptionTemplateEditDialogComponent extends EditDialogComponent<PaperlessConsumptionTemplate> {
-  templates: PaperlessConsumptionTemplate[]
-  correspondents: PaperlessCorrespondent[]
-  documentTypes: PaperlessDocumentType[]
-  storagePaths: PaperlessStoragePath[]
-  mailRules: PaperlessMailRule[]
-  customFields: PaperlessCustomField[]
-
-  constructor(
-    service: ConsumptionTemplateService,
-    activeModal: NgbActiveModal,
-    correspondentService: CorrespondentService,
-    documentTypeService: DocumentTypeService,
-    storagePathService: StoragePathService,
-    mailRuleService: MailRuleService,
-    userService: UserService,
-    settingsService: SettingsService,
-    customFieldsService: CustomFieldsService
-  ) {
-    super(service, activeModal, userService, settingsService)
-
-    correspondentService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.correspondents = result.results))
-
-    documentTypeService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.documentTypes = result.results))
-
-    storagePathService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.storagePaths = result.results))
-
-    mailRuleService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.mailRules = result.results))
-
-    customFieldsService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.customFields = result.results))
-  }
-
-  getCreateTitle() {
-    return $localize`Create new consumption template`
-  }
-
-  getEditTitle() {
-    return $localize`Edit consumption template`
-  }
-
-  getForm(): FormGroup {
-    return new FormGroup({
-      name: new FormControl(null),
-      account: new FormControl(null),
-      filter_filename: new FormControl(null),
-      filter_path: new FormControl(null),
-      filter_mailrule: new FormControl(null),
-      order: new FormControl(null),
-      sources: new FormControl([]),
-      assign_title: new FormControl(null),
-      assign_tags: new FormControl([]),
-      assign_owner: new FormControl(null),
-      assign_document_type: new FormControl(null),
-      assign_correspondent: new FormControl(null),
-      assign_storage_path: new FormControl(null),
-      assign_view_users: new FormControl([]),
-      assign_view_groups: new FormControl([]),
-      assign_change_users: new FormControl([]),
-      assign_change_groups: new FormControl([]),
-      assign_custom_fields: new FormControl([]),
-    })
-  }
-
-  get sourceOptions() {
-    return DOCUMENT_SOURCE_OPTIONS
-  }
-}

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

@@ -8,8 +8,12 @@
 
     <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-    <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
+    }
 
     <div *pngxIfOwner="object">
       <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>

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

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
+import { Correspondent } from 'src/app/data/correspondent'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -13,7 +13,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './correspondent-edit-dialog.component.html',
   styleUrls: ['./correspondent-edit-dialog.component.scss'],
 })
-export class CorrespondentEditDialogComponent extends EditDialogComponent<PaperlessCorrespondent> {
+export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
   constructor(
     service: CorrespondentService,
     activeModal: NgbActiveModal,

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

@@ -7,7 +7,9 @@
   <div class="modal-body">
     <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
     <pngx-input-select i18n-title title="Data type" [items]="getDataTypes()" formControlName="data_type"></pngx-input-select>
-    <small class="d-block mt-n2" *ngIf="typeFieldDisabled" i18n>Data type cannot be changed after a field is created</small>
+    @if (typeFieldDisabled) {
+      <small class="d-block mt-n2" i18n>Data type cannot be changed after a field is created</small>
+    }
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>

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

@@ -1,10 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { FormGroup, FormControl } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import {
-  DATA_TYPE_LABELS,
-  PaperlessCustomField,
-} from 'src/app/data/paperless-custom-field'
+import { DATA_TYPE_LABELS, CustomField } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -16,7 +13,7 @@ import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
   styleUrls: ['./custom-field-edit-dialog.component.scss'],
 })
 export class CustomFieldEditDialogComponent
-  extends EditDialogComponent<PaperlessCustomField>
+  extends EditDialogComponent<CustomField>
   implements OnInit
 {
   constructor(

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

@@ -1,25 +1,29 @@
 <form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
-    </div>
-    <div class="modal-body">
-
-      <div class="col">
-        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
-        <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-        <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-        <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
-      </div>
-
-      <div *pngxIfOwner="object">
-        <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
-      </div>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
 
+    <div class="col">
+      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+      <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+      @if (patternRequired) {
+        <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+      }
+      @if (patternRequired) {
+        <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+      }
     </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+
+    <div *pngxIfOwner="object">
+      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
     </div>
-  </form>
+
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
+import { DocumentType } from 'src/app/data/document-type'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -13,7 +13,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './document-type-edit-dialog.component.html',
   styleUrls: ['./document-type-edit-dialog.component.scss'],
 })
-export class DocumentTypeEditDialogComponent extends EditDialogComponent<PaperlessDocumentType> {
+export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
   constructor(
     service: DocumentTypeService,
     activeModal: NgbActiveModal,

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

@@ -23,8 +23,8 @@ import {
   MATCH_NONE,
   MATCH_ALL,
 } from 'src/app/data/matching-model'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { Tag } from 'src/app/data/tag'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -38,7 +38,7 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
     </div>
   `,
 })
-class TestComponent extends EditDialogComponent<PaperlessTag> {
+class TestComponent extends EditDialogComponent<Tag> {
   constructor(
     service: TagService,
     activeModal: NgbActiveModal,

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

@@ -9,12 +9,12 @@ import {
 } from 'src/app/data/matching-model'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { User } from 'src/app/data/user'
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { PermissionsFormObject } from '../input/permissions/permissions-form/permissions-form.component'
 import { SettingsService } from 'src/app/services/settings.service'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 
 export enum EditDialogMode {
   CREATE = 0,
@@ -33,7 +33,7 @@ export abstract class EditDialogComponent<
     private settingsService: SettingsService
   ) {}
 
-  users: PaperlessUser[]
+  users: User[]
 
   @Input()
   dialogMode: EditDialogMode = EditDialogMode.CREATE

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
+import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -12,7 +12,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './group-edit-dialog.component.html',
   styleUrls: ['./group-edit-dialog.component.scss'],
 })
-export class GroupEditDialogComponent extends EditDialogComponent<PaperlessGroup> {
+export class GroupEditDialogComponent extends EditDialogComponent<Group> {
   constructor(
     service: GroupService,
     activeModal: NgbActiveModal,

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

@@ -22,13 +22,15 @@
   </div>
   <div class="modal-footer">
     <div class="m-0 me-2">
-      <ngb-alert #testResultAlert *ngIf="testResult" [type]="testResult" class="mb-0 py-2" (closed)="testResult = null">{{testResultMessage}}</ngb-alert>
+      @if (testResult) {
+        <ngb-alert #testResultAlert [type]="testResult" class="mb-0 py-2" (closed)="testResult = null">{{testResultMessage}}</ngb-alert>
+      }
     </div>
     <button type="button" class="btn btn-outline-primary" (click)="test()" [disabled]="networkActive || testActive">
-      <ng-container *ngIf="testActive">
+      @if (testActive) {
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
         <span class="visually-hidden mr-1" i18n>Loading...</span>
-      </ng-container>
+      }
       <ng-container i18n>Test</ng-container>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>

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

@@ -11,7 +11,7 @@ import {
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { IMAPSecurity } from 'src/app/data/paperless-mail-account'
+import { IMAPSecurity } from 'src/app/data/mail-account'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'

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

@@ -2,10 +2,7 @@ import { Component, ViewChild } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import {
-  IMAPSecurity,
-  PaperlessMailAccount,
-} from 'src/app/data/paperless-mail-account'
+import { IMAPSecurity, MailAccount } from 'src/app/data/mail-account'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -21,7 +18,7 @@ const IMAP_SECURITY_OPTIONS = [
   templateUrl: './mail-account-edit-dialog.component.html',
   styleUrls: ['./mail-account-edit-dialog.component.scss'],
 })
-export class MailAccountEditDialogComponent extends EditDialogComponent<PaperlessMailAccount> {
+export class MailAccountEditDialogComponent extends EditDialogComponent<MailAccount> {
   testActive: boolean = false
   testResult: string
   alertTimeout

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

@@ -26,19 +26,25 @@
       </div>
       <div class="col-md-4">
         <pngx-input-select i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Action is only performed when documents are consumed from the mail. Mails without attachments remain entirely untouched."></pngx-input-select>
-        <pngx-input-text i18n-title title="Action parameter" *ngIf="showActionParamField" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+        @if (showActionParamField) {
+          <pngx-input-text i18n-title title="Action parameter" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+        }
         <p class="small fst-italic mt-5" i18n>Assignments specified here will supersede any consumption templates.</p>
         <pngx-input-select i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></pngx-input-select>
         <pngx-input-tags [allowCreate]="false" formControlName="assign_tags"></pngx-input-tags>
         <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
         <pngx-input-select i18n-title title="Assign correspondent from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></pngx-input-select>
-        <pngx-input-select *ngIf="showCorrespondentField" i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+        @if (showCorrespondentField) {
+          <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+        }
         <pngx-input-check i18n-title title="Assign owner from rule" formControlName="assign_owner_from_rule"></pngx-input-check>
       </div>
     </div>
   </div>
   <div class="modal-footer">
-    <span class="text-danger" *ngIf="error?.non_field_errors"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    @if (error?.non_field_errors) {
+      <span class="text-danger"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    }
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
     <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
   </div>

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

@@ -7,7 +7,7 @@ import { of } from 'rxjs'
 import {
   MailMetadataCorrespondentOption,
   MailAction,
-} from 'src/app/data/paperless-mail-rule'
+} from 'src/app/data/mail-rule'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'

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

@@ -3,17 +3,17 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
-import { PaperlessMailAccount } from 'src/app/data/paperless-mail-account'
+import { Correspondent } from 'src/app/data/correspondent'
+import { DocumentType } from 'src/app/data/document-type'
+import { MailAccount } from 'src/app/data/mail-account'
 import {
   MailAction,
   MailFilterAttachmentType,
   MailMetadataCorrespondentOption,
   MailMetadataTitleOption,
-  PaperlessMailRule,
+  MailRule,
   MailRuleConsumptionScope,
-} from 'src/app/data/paperless-mail-rule'
+} from 'src/app/data/mail-rule'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
@@ -109,10 +109,10 @@ const METADATA_CORRESPONDENT_OPTIONS = [
   templateUrl: './mail-rule-edit-dialog.component.html',
   styleUrls: ['./mail-rule-edit-dialog.component.scss'],
 })
-export class MailRuleEditDialogComponent extends EditDialogComponent<PaperlessMailRule> {
-  accounts: PaperlessMailAccount[]
-  correspondents: PaperlessCorrespondent[]
-  documentTypes: PaperlessDocumentType[]
+export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
+  accounts: MailAccount[]
+  correspondents: Correspondent[]
+  documentTypes: DocumentType[]
 
   constructor(
     service: MailRuleService,

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

@@ -9,8 +9,12 @@
     <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
     <pngx-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-text>
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-    <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    }
 
     <div *pngxIfOwner="object">
       <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>

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

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
-import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { StoragePath } from 'src/app/data/storage-path'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -13,7 +13,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './storage-path-edit-dialog.component.html',
   styleUrls: ['./storage-path-edit-dialog.component.scss'],
 })
-export class StoragePathEditDialogComponent extends EditDialogComponent<PaperlessStoragePath> {
+export class StoragePathEditDialogComponent extends EditDialogComponent<StoragePath> {
   constructor(
     service: StoragePathService,
     activeModal: NgbActiveModal,

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

@@ -1,26 +1,30 @@
-  <form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+
+    <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>
+
+    <pngx-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></pngx-input-check>
+    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    }
+
+    <div *pngxIfOwner="object">
+      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
     </div>
-    <div class="modal-body">
-      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
 
-      <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>
-
-      <pngx-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></pngx-input-check>
-      <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-      <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-      <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
-
-      <div *pngxIfOwner="object">
-        <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
-      </div>
-
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
-    </div>
-  </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { randomColor } from 'src/app/utils/color'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
@@ -14,7 +14,7 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './tag-edit-dialog.component.html',
   styleUrls: ['./tag-edit-dialog.component.scss'],
 })
-export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
+export class TagEditDialogComponent extends EditDialogComponent<Tag> {
   constructor(
     service: TagService,
     activeModal: NgbActiveModal,

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

@@ -3,8 +3,8 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -15,10 +15,10 @@ import { SettingsService } from 'src/app/services/settings.service'
   styleUrls: ['./user-edit-dialog.component.scss'],
 })
 export class UserEditDialogComponent
-  extends EditDialogComponent<PaperlessUser>
+  extends EditDialogComponent<User>
   implements OnInit
 {
-  groups: PaperlessGroup[]
+  groups: Group[]
   passwordIsSet: boolean = false
 
   constructor(

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

@@ -0,0 +1,207 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+      </div>
+      <div class="col-4">
+        <pngx-input-number i18n-title title="Sort order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+      </div>
+      <div class="col">
+        <pngx-input-switch i18n-title title="Enabled" formControlName="enabled" [error]="error?.enabled"></pngx-input-switch>
+      </div>
+    </div>
+    <div ngbAccordion>
+      <div ngbAccordionItem>
+        <h2 ngbAccordionHeader>
+          <button ngbAccordionButton i18n>Triggers</button>
+        </h2>
+        <div ngbAccordionCollapse>
+          <div ngbAccordionBody>
+            <ng-template>
+              <div class="d-flex">
+                <p class="p-2" i18n>Trigger Workflow On:</p>
+                <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
+                  <svg class="sidebaricon me-1" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+                  </svg>
+                  <ng-container i18n>Add Trigger</ng-container>
+                </button>
+              </div>
+              <div ngbAccordion [closeOthers]="true">
+                @for (trigger of object?.triggers; track trigger; let i = $index){
+                  <div ngbAccordionItem>
+                    <div ngbAccordionHeader>
+                      <button ngbAccordionButton>{{i + 1}}. {{getTriggerTypeOptionName(triggerFields.controls[i].value.type)}}
+                        @if(trigger.id > -1) {
+                          <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{trigger.id}}</span>
+                        }
+                        <button type="button" class="btn btn-link text-danger ms-2" (click)="removeTrigger(i)">
+                          <svg class="sidebaricon me-1" fill="currentColor">
+                            <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                          </svg>
+                          <ng-container i18n>Delete</ng-container>
+                        </button>
+                      </button>
+                    </div>
+                    <div ngbAccordionCollapse>
+                      <div ngbAccordionBody>
+                        <ng-template [ngTemplateOutlet]="triggerForm" [ngTemplateOutletContext]="{ formGroup: triggerFields.controls[i], trigger: trigger }"></ng-template>
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </ng-template>
+          </div>
+        </div>
+      </div>
+      <div ngbAccordionItem>
+        <h2 ngbAccordionHeader>
+          <button class="btn-lg" ngbAccordionButton i18n>Actions</button>
+        </h2>
+        <div ngbAccordionCollapse>
+          <div ngbAccordionBody>
+            <ng-template>
+              <div class="d-flex">
+                <p class="p-2" i18n>Apply Actions:</p>
+                <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
+                  <svg class="sidebaricon me-1" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+                  </svg>
+                  <ng-container i18n>Add Action</ng-container>
+                </button>
+              </div>
+              <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
+                @for (action of object?.actions; track action; let i = $index){
+                  <div ngbAccordionItem cdkDrag [formGroup]="actionFields.controls[i]">
+                    <div ngbAccordionHeader>
+                      <button ngbAccordionButton>{{i + 1}}. {{getActionTypeOptionName(actionFields.controls[i].value.type)}}
+                        @if(action.id > -1) {
+                          <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
+                        }
+                        <button type="button" class="btn btn-link text-danger ms-2" (click)="removeAction(i)">
+                          <svg class="sidebaricon me-1" fill="currentColor">
+                            <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                          </svg>
+                          <ng-container i18n>Delete</ng-container>
+                        </button>
+                      </button>
+                    </div>
+                    <div ngbAccordionCollapse>
+                      <div ngbAccordionBody>
+                        <pngx-input-select i18n-title title="Action type" [horizontal]="true" [items]="actionTypeOptions" formControlName="type"></pngx-input-select>
+                        <input type="hidden" formControlName="id" />
+                        <div class="row">
+                          <div class="col">
+                            <pngx-input-text i18n-title title="Assign title" formControlName="assign_title" i18n-hint hint="Can include some placeholders, see <a target='_blank' href='https://docs.paperless-ngx.com/usage/#workflows'>documentation</a>." [error]="error?.assign_title"></pngx-input-text>
+                            <pngx-input-tags [allowCreate]="false" i18n-title title="Assign tags" formControlName="assign_tags"></pngx-input-tags>
+                            <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
+                            <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+                            <pngx-input-select i18n-title title="Assign storage path" [items]="storagePaths" [allowNull]="true" formControlName="assign_storage_path"></pngx-input-select>
+                            <pngx-input-select i18n-title title="Assign custom fields" multiple="true" [items]="customFields" [allowNull]="true" formControlName="assign_custom_fields"></pngx-input-select>
+                          </div>
+                          <div class="col">
+                            <pngx-input-select i18n-title title="Assign owner" [items]="users" bindLabel="username" formControlName="assign_owner" [allowNull]="true"></pngx-input-select>
+                            <div>
+                              <label class="form-label" i18n>Assign view permissions</label>
+                              <div class="mb-2">
+                                <div class="row mb-1">
+                                  <div class="col-lg-3">
+                                    <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
+                                  </div>
+                                  <div class="col-lg-9">
+                                    <pngx-permissions-user type="view" formControlName="assign_view_users"></pngx-permissions-user>
+                                  </div>
+                                </div>
+                                <div class="row">
+                                  <div class="col-lg-3">
+                                    <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
+                                  </div>
+                                  <div class="col-lg-9">
+                                    <pngx-permissions-group type="view" formControlName="assign_view_groups"></pngx-permissions-group>
+                                  </div>
+                                </div>
+                              </div>
+                              <label class="form-label" i18n>Assign edit permissions</label>
+                              <div>
+                                <div class="row mb-1">
+                                  <div class="col-lg-3">
+                                    <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
+                                  </div>
+                                  <div class="col-lg-9">
+                                    <pngx-permissions-user type="change" formControlName="assign_change_users"></pngx-permissions-user>
+                                  </div>
+                                </div>
+                                <div class="row">
+                                  <div class="col-lg-3">
+                                    <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
+                                  </div>
+                                  <div class="col-lg-9">
+                                    <pngx-permissions-group type="change" formControlName="assign_change_groups"></pngx-permissions-group>
+                                  </div>
+                                </div>
+                                <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </ng-template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    @if (error?.non_field_errors) {
+      <span class="text-danger"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    }
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>
+
+<ng-template #triggerForm let-formGroup="formGroup" let-trigger="trigger">
+  <div [formGroup]="formGroup">
+    <input type="hidden" formControlName="id" />
+    <pngx-input-select i18n-title title="Trigger type" [horizontal]="true" [items]="triggerTypeOptions" formControlName="type"></pngx-input-select>
+    <p class="small" i18n>Trigger for documents that match <em>all</em> filters specified below.</p>
+    <div class="row">
+      <div class="col">
+        <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
+        @if (formGroup.get('type').value === WorkflowTriggerType.Consumption) {
+          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
+          <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case insensitive.</a>" [error]="error?.filter_path"></pngx-input-text>
+          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
+        }
+        @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated) {
+          <pngx-input-select i18n-title title="Content matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+          @if (patternRequired) {
+            <pngx-input-text i18n-title title="Content matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+          }
+          @if (patternRequired) {
+            <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+          }
+        }
+      </div>
+      @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated) {
+        <div class="col-md-6">
+          <pngx-input-tags [allowCreate]="false" i18n-title title="Has tags" formControlName="filter_has_tags"></pngx-input-tags>
+          <pngx-input-select i18n-title title="Has correspondent" [items]="correspondents" [allowNull]="true" formControlName="filter_has_correspondent"></pngx-input-select>
+          <pngx-input-select i18n-title title="Has document type" [items]="documentTypes" [allowNull]="true" formControlName="filter_has_document_type"></pngx-input-select>
+        </div>
+      }
+    </div>
+  </div>
+</ng-template>

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.scss

@@ -0,0 +1,5 @@
+.btn.text-danger {
+    &:hover, &:focus {
+        color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+    }
+}

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

@@ -18,24 +18,69 @@ import { PermissionsUserComponent } from '../../input/permissions/permissions-us
 import { SelectComponent } from '../../input/select/select.component'
 import { TagsComponent } from '../../input/tags/tags.component'
 import { TextComponent } from '../../input/text/text.component'
+import { SwitchComponent } from '../../input/switch/switch.component'
 import { EditDialogMode } from '../edit-dialog.component'
-import { ConsumptionTemplateEditDialogComponent } from './consumption-template-edit-dialog.component'
+import {
+  DOCUMENT_SOURCE_OPTIONS,
+  WORKFLOW_ACTION_OPTIONS,
+  WORKFLOW_TYPE_OPTIONS,
+  WorkflowEditDialogComponent,
+} from './workflow-edit-dialog.component'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { Workflow } from 'src/app/data/workflow'
+import {
+  WorkflowTriggerType,
+  DocumentSource,
+} from 'src/app/data/workflow-trigger'
+import { CdkDragDrop } from '@angular/cdk/drag-drop'
+import {
+  WorkflowAction,
+  WorkflowActionType,
+} from 'src/app/data/workflow-action'
+import { MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/matching-model'
+
+const workflow: Workflow = {
+  name: 'Workflow 1',
+  id: 1,
+  order: 1,
+  enabled: true,
+  triggers: [
+    {
+      id: 1,
+      type: WorkflowTriggerType.Consumption,
+      sources: [DocumentSource.ConsumeFolder],
+      filter_filename: '*',
+    },
+  ],
+  actions: [
+    {
+      id: 1,
+      type: WorkflowActionType.Assignment,
+      assign_title: 'foo',
+    },
+    {
+      id: 4,
+      type: WorkflowActionType.Assignment,
+      assign_owner: 2,
+    },
+  ],
+}
 
 describe('ConsumptionTemplateEditDialogComponent', () => {
-  let component: ConsumptionTemplateEditDialogComponent
+  let component: WorkflowEditDialogComponent
   let settingsService: SettingsService
-  let fixture: ComponentFixture<ConsumptionTemplateEditDialogComponent>
+  let fixture: ComponentFixture<WorkflowEditDialogComponent>
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [
-        ConsumptionTemplateEditDialogComponent,
+        WorkflowEditDialogComponent,
         IfPermissionsDirective,
         IfOwnerDirective,
         SelectComponent,
         TextComponent,
         NumberComponent,
+        SwitchComponent,
         TagsComponent,
         PermissionsUserComponent,
         PermissionsGroupComponent,
@@ -113,7 +158,7 @@ describe('ConsumptionTemplateEditDialogComponent', () => {
       ],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(ConsumptionTemplateEditDialogComponent)
+    fixture = TestBed.createComponent(WorkflowEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
     settingsService.currentUser = { id: 99, username: 'user99' }
     component = fixture.componentInstance
@@ -121,15 +166,70 @@ describe('ConsumptionTemplateEditDialogComponent', () => {
     fixture.detectChanges()
   })
 
-  it('should support create and edit modes', () => {
+  it('should support create and edit modes, support adding triggers and actions on new workflow', () => {
     component.dialogMode = EditDialogMode.CREATE
     const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
     const editTitleSpy = jest.spyOn(component, 'getEditTitle')
     fixture.detectChanges()
     expect(createTitleSpy).toHaveBeenCalled()
     expect(editTitleSpy).not.toHaveBeenCalled()
+    expect(component.object).toBeUndefined()
+    component.addAction()
+    expect(component.object).not.toBeUndefined()
+    expect(component.object.actions).toHaveLength(1)
+    component.object = undefined
+    component.addTrigger()
+    expect(component.object).not.toBeUndefined()
+    expect(component.object.triggers).toHaveLength(1)
+
     component.dialogMode = EditDialogMode.EDIT
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })
+
+  it('should return source options, type options, type name', () => {
+    // coverage
+    expect(component.sourceOptions).toEqual(DOCUMENT_SOURCE_OPTIONS)
+    expect(component.triggerTypeOptions).toEqual(WORKFLOW_TYPE_OPTIONS)
+    expect(
+      component.getTriggerTypeOptionName(WorkflowTriggerType.DocumentAdded)
+    ).toEqual('Document Added')
+    expect(component.getTriggerTypeOptionName(null)).toEqual('')
+    expect(component.sourceOptions).toEqual(DOCUMENT_SOURCE_OPTIONS)
+    expect(component.actionTypeOptions).toEqual(WORKFLOW_ACTION_OPTIONS)
+    expect(
+      component.getActionTypeOptionName(WorkflowActionType.Assignment)
+    ).toEqual('Assignment')
+    expect(component.getActionTypeOptionName(null)).toEqual('')
+  })
+
+  it('should support add and remove triggers and actions', () => {
+    component.object = workflow
+    component.addTrigger()
+    expect(component.object.triggers.length).toEqual(2)
+    component.addAction()
+    expect(component.object.actions.length).toEqual(3)
+    component.removeTrigger(1)
+    expect(component.object.triggers.length).toEqual(1)
+    component.removeAction(1)
+    expect(component.object.actions.length).toEqual(2)
+  })
+
+  it('should update order and remove ids from actions on drag n drop', () => {
+    const action1 = workflow.actions[0]
+    const action2 = workflow.actions[1]
+    component.object = workflow
+    component.onActionDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
+      WorkflowAction[]
+    >)
+    expect(component.object.actions).toEqual([action2, action1])
+    expect(action1.id).toBeNull()
+    expect(action2.id).toBeNull()
+  })
+
+  it('should not include auto matching in algorithms', () => {
+    expect(component.getMatchingAlgorithms()).not.toContain(
+      MATCHING_ALGORITHMS.find((a) => a.id === MATCH_AUTO)
+    )
+  })
 })

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

@@ -0,0 +1,300 @@
+import { Component, OnInit } from '@angular/core'
+import { FormGroup, FormControl, FormArray } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { first } from 'rxjs'
+import { Workflow } from 'src/app/data/workflow'
+import { Correspondent } from 'src/app/data/correspondent'
+import { DocumentType } from 'src/app/data/document-type'
+import { StoragePath } from 'src/app/data/storage-path'
+import { WorkflowService } from 'src/app/services/rest/workflow.service'
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { EditDialogComponent } from '../edit-dialog.component'
+import { MailRuleService } from 'src/app/services/rest/mail-rule.service'
+import { MailRule } from 'src/app/data/mail-rule'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { CustomField } from 'src/app/data/custom-field'
+import {
+  DocumentSource,
+  WorkflowTriggerType,
+} from 'src/app/data/workflow-trigger'
+import {
+  WorkflowAction,
+  WorkflowActionType,
+} from 'src/app/data/workflow-action'
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
+import {
+  MATCHING_ALGORITHMS,
+  MATCH_AUTO,
+  MATCH_NONE,
+} from 'src/app/data/matching-model'
+
+export const DOCUMENT_SOURCE_OPTIONS = [
+  {
+    id: DocumentSource.ConsumeFolder,
+    name: $localize`Consume Folder`,
+  },
+  {
+    id: DocumentSource.ApiUpload,
+    name: $localize`API Upload`,
+  },
+  {
+    id: DocumentSource.MailFetch,
+    name: $localize`Mail Fetch`,
+  },
+]
+
+export const WORKFLOW_TYPE_OPTIONS = [
+  {
+    id: WorkflowTriggerType.Consumption,
+    name: $localize`Consumption Started`,
+  },
+  {
+    id: WorkflowTriggerType.DocumentAdded,
+    name: $localize`Document Added`,
+  },
+  {
+    id: WorkflowTriggerType.DocumentUpdated,
+    name: $localize`Document Updated`,
+  },
+]
+
+export const WORKFLOW_ACTION_OPTIONS = [
+  {
+    id: WorkflowActionType.Assignment,
+    name: $localize`Assignment`,
+  },
+]
+
+const TRIGGER_MATCHING_ALGORITHMS = MATCHING_ALGORITHMS.filter(
+  (a) => a.id !== MATCH_AUTO
+)
+
+@Component({
+  selector: 'pngx-workflow-edit-dialog',
+  templateUrl: './workflow-edit-dialog.component.html',
+  styleUrls: ['./workflow-edit-dialog.component.scss'],
+})
+export class WorkflowEditDialogComponent
+  extends EditDialogComponent<Workflow>
+  implements OnInit
+{
+  public WorkflowTriggerType = WorkflowTriggerType
+
+  templates: Workflow[]
+  correspondents: Correspondent[]
+  documentTypes: DocumentType[]
+  storagePaths: StoragePath[]
+  mailRules: MailRule[]
+  customFields: CustomField[]
+
+  expandedItem: number = null
+
+  constructor(
+    service: WorkflowService,
+    activeModal: NgbActiveModal,
+    correspondentService: CorrespondentService,
+    documentTypeService: DocumentTypeService,
+    storagePathService: StoragePathService,
+    mailRuleService: MailRuleService,
+    userService: UserService,
+    settingsService: SettingsService,
+    customFieldsService: CustomFieldsService
+  ) {
+    super(service, activeModal, userService, settingsService)
+
+    correspondentService
+      .listAll()
+      .pipe(first())
+      .subscribe((result) => (this.correspondents = result.results))
+
+    documentTypeService
+      .listAll()
+      .pipe(first())
+      .subscribe((result) => (this.documentTypes = result.results))
+
+    storagePathService
+      .listAll()
+      .pipe(first())
+      .subscribe((result) => (this.storagePaths = result.results))
+
+    mailRuleService
+      .listAll()
+      .pipe(first())
+      .subscribe((result) => (this.mailRules = result.results))
+
+    customFieldsService
+      .listAll()
+      .pipe(first())
+      .subscribe((result) => (this.customFields = result.results))
+  }
+
+  getCreateTitle() {
+    return $localize`Create new workflow`
+  }
+
+  getEditTitle() {
+    return $localize`Edit workflow`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(null),
+      order: new FormControl(null),
+      enabled: new FormControl(true),
+      triggers: new FormArray([]),
+      actions: new FormArray([]),
+    })
+  }
+
+  getMatchingAlgorithms() {
+    // No auto matching
+    return TRIGGER_MATCHING_ALGORITHMS
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit()
+    this.updateTriggerActionFields()
+  }
+
+  get triggerFields(): FormArray {
+    return this.objectForm.get('triggers') as FormArray
+  }
+
+  get actionFields(): FormArray {
+    return this.objectForm.get('actions') as FormArray
+  }
+
+  private updateTriggerActionFields(emitEvent: boolean = false) {
+    this.triggerFields.clear({ emitEvent: false })
+    this.object?.triggers.forEach((trigger) => {
+      this.triggerFields.push(
+        new FormGroup({
+          id: new FormControl(trigger.id),
+          type: new FormControl(trigger.type),
+          sources: new FormControl(trigger.sources),
+          filter_filename: new FormControl(trigger.filter_filename),
+          filter_path: new FormControl(trigger.filter_path),
+          filter_mailrule: new FormControl(trigger.filter_mailrule),
+          matching_algorithm: new FormControl(MATCH_NONE),
+          match: new FormControl(''),
+          is_insensitive: new FormControl(true),
+          filter_has_tags: new FormControl(trigger.filter_has_tags),
+          filter_has_correspondent: new FormControl(
+            trigger.filter_has_correspondent
+          ),
+          filter_has_document_type: new FormControl(
+            trigger.filter_has_document_type
+          ),
+        }),
+        { emitEvent }
+      )
+    })
+
+    this.actionFields.clear({ emitEvent: false })
+    this.object?.actions.forEach((action) => {
+      this.actionFields.push(
+        new FormGroup({
+          id: new FormControl(action.id),
+          type: new FormControl(action.type),
+          assign_title: new FormControl(action.assign_title),
+          assign_tags: new FormControl(action.assign_tags),
+          assign_owner: new FormControl(action.assign_owner),
+          assign_document_type: new FormControl(action.assign_document_type),
+          assign_correspondent: new FormControl(action.assign_correspondent),
+          assign_storage_path: new FormControl(action.assign_storage_path),
+          assign_view_users: new FormControl(action.assign_view_users),
+          assign_view_groups: new FormControl(action.assign_view_groups),
+          assign_change_users: new FormControl(action.assign_change_users),
+          assign_change_groups: new FormControl(action.assign_change_groups),
+          assign_custom_fields: new FormControl(action.assign_custom_fields),
+        }),
+        { emitEvent }
+      )
+    })
+  }
+
+  get sourceOptions() {
+    return DOCUMENT_SOURCE_OPTIONS
+  }
+
+  get triggerTypeOptions() {
+    return WORKFLOW_TYPE_OPTIONS
+  }
+
+  getTriggerTypeOptionName(type: WorkflowTriggerType): string {
+    return this.triggerTypeOptions.find((t) => t.id === type)?.name ?? ''
+  }
+
+  addTrigger() {
+    if (!this.object) {
+      this.object = Object.assign({}, this.objectForm.value)
+    }
+    this.object.triggers.push({
+      type: WorkflowTriggerType.Consumption,
+      sources: [],
+      filter_filename: null,
+      filter_path: null,
+      filter_mailrule: null,
+      filter_has_tags: [],
+      filter_has_correspondent: null,
+      filter_has_document_type: null,
+    })
+
+    this.updateTriggerActionFields()
+  }
+
+  get actionTypeOptions() {
+    return WORKFLOW_ACTION_OPTIONS
+  }
+
+  getActionTypeOptionName(type: WorkflowActionType): string {
+    return this.actionTypeOptions.find((t) => t.id === type)?.name ?? ''
+  }
+
+  addAction() {
+    if (!this.object) {
+      this.object = Object.assign({}, this.objectForm.value)
+    }
+    this.object.actions.push({
+      type: WorkflowActionType.Assignment,
+      assign_title: null,
+      assign_tags: [],
+      assign_document_type: null,
+      assign_correspondent: null,
+      assign_storage_path: null,
+      assign_owner: null,
+      assign_view_users: [],
+      assign_view_groups: [],
+      assign_change_users: [],
+      assign_change_groups: [],
+      assign_custom_fields: [],
+    })
+
+    this.updateTriggerActionFields()
+  }
+
+  removeTrigger(index: number) {
+    this.object.triggers.splice(index, 1)
+    this.updateTriggerActionFields()
+  }
+
+  removeAction(index: number) {
+    this.object.actions.splice(index, 1)
+    this.updateTriggerActionFields()
+  }
+
+  onActionDrop(event: CdkDragDrop<WorkflowAction[]>) {
+    moveItemInArray(
+      this.object.actions,
+      event.previousIndex,
+      event.currentIndex
+    )
+    // removing id will effectively re-create the actions in this order
+    this.object.actions.forEach((a) => (a.id = null))
+    this.updateTriggerActionFields()
+  }
+}

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

@@ -4,49 +4,61 @@
       <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
     </svg>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
-    <ng-container *ngIf="!editing && selectionModel.totalCount > 0">
+    @if (!editing && selectionModel.totalCount > 0) {
       <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
-    </ng-container>
+    }
   </button>
   <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
     <div class="list-group list-group-flush">
-      <div *ngIf="!editing && manyToOne" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs flex-fill" role="group">
-          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd_{{name}}" name="logicalOperatorAnd_{{name}}" value="and">
-          <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{name}}" i18n>All</label>
-          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
-          <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
+      @if (!editing && manyToOne) {
+        <div class="list-group-item d-flex">
+          <div class="btn-group btn-group-xs flex-fill" role="group">
+            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd_{{name}}" name="logicalOperatorAnd_{{name}}" value="and">
+            <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{name}}" i18n>All</label>
+            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
+            <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
+          </div>
         </div>
-      </div>
-      <div *ngIf="!editing && !manyToOne" class="list-group-item d-flex">
-        <div class="btn-group btn-group-xs flex-fill" role="group">
-          <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionInclude_{{name}}" name="intersectionInclude_{{name}}" value="include">
-          <label class="btn btn-outline-primary" for="intersectionInclude_{{name}}" i18n>Include</label>
-          <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
-          <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
+      }
+      @if (!editing && !manyToOne) {
+        <div class="list-group-item d-flex">
+          <div class="btn-group btn-group-xs flex-fill" role="group">
+            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionInclude_{{name}}" name="intersectionInclude_{{name}}" value="include">
+            <label class="btn btn-outline-primary" for="intersectionInclude_{{name}}" i18n>Include</label>
+            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
+            <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
+          </div>
         </div>
-      </div>
+      }
       <div class="list-group-item">
         <div class="input-group input-group-sm">
           <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
         </div>
       </div>
-      <div *ngIf="selectionModel.items" class="items" #buttonItems>
-        <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText; let i = index">
-          <pngx-toggleable-dropdown-button
-            *ngIf="allowSelectNone || item.id" [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
-          </pngx-toggleable-dropdown-button>
-        </ng-container>
-      </div>
-      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
-        <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
-        <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
-        </svg>
-      </button>
-      <div *ngIf="!editing && manyToOne" class="list-group-item list-group-item-note pt-1 pb-2">
-        <small i18n>Click again to exclude items.</small>
-      </div>
+      @if (selectionModel.items) {
+        <div class="items" #buttonItems>
+          @for (item of selectionModel.itemsSorted | filter: filterText; track item; let i = $index) {
+            @if (allowSelectNone || item.id) {
+              <pngx-toggleable-dropdown-button
+                [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
+              </pngx-toggleable-dropdown-button>
+            }
+          }
+        </div>
+      }
+      @if (editing) {
+        <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
+          <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
+          <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
+          </svg>
+        </button>
+      }
+      @if (!editing && manyToOne) {
+        <div class="list-group-item list-group-item-note pt-1 pb-2">
+          <small i18n>Click again to exclude items.</small>
+        </div>
+      }
     </div>
   </div>
 </div>

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

@@ -13,7 +13,7 @@ import {
 } from './filterable-dropdown.component'
 import { FilterPipe } from 'src/app/pipes/filter.pipe'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import {
   DEFAULT_MATCHING_ALGORITHM,
   MATCH_ALL,
@@ -26,7 +26,7 @@ import { TagComponent } from '../tag/tag.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 
-const items: PaperlessTag[] = [
+const items: Tag[] = [
   {
     id: 1,
     name: 'Tag1',

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

@@ -1,24 +1,29 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="toggleItem($event)" [disabled]="disabled">
   <div class="selected-icon me-1">
-    <ng-container *ngIf="isChecked()">
+    @if (isChecked()) {
       <svg fill="currentColor" class="buttonicon-sm bi-check">
         <use xlink:href="assets/bootstrap-icons.svg#check"/>
       </svg>
-    </ng-container>
-    <ng-container *ngIf="isPartiallyChecked()">
+    }
+    @if (isPartiallyChecked()) {
       <svg fill="currentColor" class="buttonicon-sm bi-dash">
         <use xlink:href="assets/bootstrap-icons.svg#dash"/>
       </svg>
-    </ng-container>
-    <ng-container *ngIf="isExcluded()">
+    }
+    @if (isExcluded()) {
       <svg fill="currentColor" class="buttonicon-sm bi-x">
         <use xlink:href="assets/bootstrap-icons.svg#x"/>
       </svg>
-    </ng-container>
+    }
   </div>
   <div class="me-1">
-    <pngx-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="false"></pngx-tag>
-    <ng-template #displayName><small>{{item.name}}</small></ng-template>
+    @if (isTag) {
+      <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
+    } @else {
+      <small>{{item.name}}</small>
+    }
   </div>
-  <div *ngIf="!hideCount" class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>
+  @if (!hideCount) {
+    <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>
+  }
 </button>

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

@@ -4,7 +4,7 @@ import {
   ToggleableItemState,
 } from './toggleable-dropdown-button.component'
 import { TagComponent } from '../../tag/tag.component'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 
 describe('ToggleableDropdownButtonComponent', () => {
   let component: ToggleableDropdownButtonComponent
@@ -26,7 +26,7 @@ describe('ToggleableDropdownButtonComponent', () => {
       id: 1,
       name: 'Test Tag',
       is_inbox_tag: false,
-    } as PaperlessTag
+    } as Tag
 
     fixture.detectChanges()
     expect(component.isTag).toBeTruthy()

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

@@ -1,19 +1,27 @@
 <div class="mb-3">
   <div class="row">
-    <div *ngIf="horizontal" class="d-flex align-items-center position-relative hidden-button-container col-md-3">
-      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-        <svg class="sidebaricon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#x"/>
-        </svg>&nbsp;<ng-container i18n>Remove</ng-container>
-      </button>
-    </div>
-    <div [ngClass]="{'col-md-9': horizontal, 'align-items-center': horizontal, 'd-flex': horizontal}">
-      <div class="form-check">
-        <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
-        <label *ngIf="!horizontal" class="form-check-label" [for]="inputId">{{title}}</label>
-        <div *ngIf="hint" class="form-text text-muted">{{hint}}</div>
+    @if (horizontal) {
+      <div class="d-flex align-items-center position-relative hidden-button-container col-md-3">
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+            <svg class="sidebaricon" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#x"/>
+              </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+            </button>
+          }
+        </div>
+      }
+      <div [ngClass]="{'col-md-9': horizontal, 'align-items-center': horizontal, 'd-flex': horizontal}">
+        <div class="form-check">
+          <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
+          @if (!horizontal) {
+            <label class="form-check-label" [for]="inputId">{{title}}</label>
+          }
+          @if (hint) {
+            <div class="form-text text-muted">{{hint}}</div>
+          }
+        </div>
       </div>
     </div>
   </div>
-</div>

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

@@ -1,28 +1,32 @@
 <div class="mb-3">
-  <label *ngIf="title" [for]="inputId">{{title}}</label>
+  @if (title) {
+    <label [for]="inputId">{{title}}</label>
+  }
 
   <div class="input-group" [class.is-invalid]="error">
     <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
 
-      <ng-template #popContent>
-        <div style="min-width: 200px;" class="pb-3">
-          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
-        </div>
+    <ng-template #popContent>
+      <div style="min-width: 200px;" class="pb-3">
+        <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
+      </div>
 
-      </ng-template>
+    </ng-template>
 
-      <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
+    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
 
-      <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
-          <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
-          <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
-        </svg>
-      </button>
+    <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
+        <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
+        <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+      </svg>
+    </button>
 
-    </div>
-    <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-    <div class="invalid-feedback">
-      {{error}}
-    </div>
+  </div>
+  @if (hint) {
+    <small class="form-text text-muted">{{hint}}</small>
+  }
+  <div class="invalid-feedback">
+    {{error}}
+  </div>
 </div>

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

@@ -2,36 +2,44 @@
   <div class="row">
     <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
       <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-        <svg class="sidebaricon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#x"/>
-        </svg>&nbsp;<ng-container i18n>Remove</ng-container>
-      </button>
-    </div>
-    <div class="position-relative" [class.col-md-9]="horizontal">
-      <div class="input-group" [class.is-invalid]="error">
-        <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
-              (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
-              name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
-        <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="buttonicon">
-            <use _ngcontent-ng-c3750736003="" xlink:href="assets/bootstrap-icons.svg#calendar"></use>
-          </svg>
-        </button>
-        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ fitlerButtonTitle }}">
-          <svg class="buttonicon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#filter" />
-          </svg>
-        </button>
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+          <svg class="sidebaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
+      </div>
+      <div class="position-relative" [class.col-md-9]="horizontal">
+        <div class="input-group" [class.is-invalid]="error">
+          <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
+            (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
+            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
+          <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="buttonicon">
+              <use _ngcontent-ng-c3750736003="" xlink:href="assets/bootstrap-icons.svg#calendar"></use>
+            </svg>
+          </button>
+          @if (showFilter) {
+            <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
+              <svg class="buttonicon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#filter" />
+              </svg>
+            </button>
+          }
+        </div>
+        <div class="invalid-feedback position-absolute top-100" i18n>Invalid date.</div>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
+        @if (getSuggestions().length > 0) {
+          <small>
+            <span i18n>Suggestions:</span>&nbsp;
+            @for (s of getSuggestions(); track s) {
+              <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
+            }
+          </small>
+        }
       </div>
-      <div class="invalid-feedback position-absolute top-100" i18n>Invalid date.</div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-      <small *ngIf="getSuggestions().length > 0">
-        <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let s of getSuggestions()">
-          <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
-        </ng-container>
-      </small>
     </div>
   </div>
-</div>

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

@@ -81,6 +81,16 @@ describe('DateComponent', () => {
     expect(eventSpy).toHaveBeenCalled()
   })
 
+  it('should show allow system keyboard events', () => {
+    let event: KeyboardEvent = new KeyboardEvent('keypress', {
+      key: '9',
+      altKey: true,
+    })
+    let preventDefaultSpy = jest.spyOn(event, 'preventDefault')
+    input.dispatchEvent(event)
+    expect(preventDefaultSpy).not.toHaveBeenCalled()
+  })
+
   it('should support paste', () => {
     expect(component.value).toBeUndefined()
     const date = '5/4/20'
@@ -99,5 +109,25 @@ describe('DateComponent', () => {
     event['clipboardData'] = clipboardData
     input.dispatchEvent(event)
     expect(component.value).toEqual({ day: 4, month: 5, year: 2020 })
+    // coverage
+    window['clipboardData'] = {
+      getData: (type) => '',
+    }
+    component.onPaste(new Event('foo') as any)
+  })
+
+  it('should set filter button title', () => {
+    component.title = 'foo'
+    expect(component.filterButtonTitle).toEqual(
+      'Filter documents with this foo'
+    )
+  })
+
+  it('should emit date on filter', () => {
+    let dateReceived
+    component.value = '12/16/2023'
+    component.filterDocuments.subscribe((date) => (dateReceived = date))
+    component.onFilterDocuments()
+    expect(dateReceived).toEqual([{ day: 16, month: 12, year: 2023 }])
   })
 })

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

@@ -90,7 +90,11 @@ export class DateComponent
   }
 
   onKeyPress(event: KeyboardEvent) {
-    if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
+    if (
+      'Enter' !== event.key &&
+      !(event.altKey || event.metaKey || event.ctrlKey) &&
+      !/[0-9,\.\/-]+/.test(event.key)
+    ) {
       event.preventDefault()
     }
   }

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

@@ -1,12 +1,16 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
-    <div class="row">
-      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-        <label *ngIf="title" class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-        <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
           <svg class="sidebaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x"/>
-          </svg>&nbsp;<ng-container i18n>Remove</ng-container>
-        </button>
+            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
       </div>
       <div [class.col-md-9]="horizontal">
         <div>
@@ -23,28 +27,30 @@
             [loading]="loading"
             [typeahead]="documentsInput$"
             (change)="onChange(selectedDocuments)">
-                <ng-template ng-label-tmp let-document="item">
-                  <div class="d-flex align-items-center">
-                    <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
-                      <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                    </svg>
-                    <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
-                      <svg class="sidebaricon-sm me-1" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                      </svg><span>{{document.title}}</span>
-                    </a>
-                  </div>
-                </ng-template>
-                <ng-template ng-loadingspinner-tmp>
-                  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-                  <div class="visually-hidden" i18n>Loading...</div>
-                </ng-template>
-                <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
-                  <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
-                </ng-template>
-          </ng-select>
+            <ng-template ng-label-tmp let-document="item">
+              <div class="d-flex align-items-center">
+                <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
+                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                </svg>
+                <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
+                  <svg class="sidebaricon-sm me-1" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                    </svg><span>{{document.title}}</span>
+                  </a>
+                </div>
+              </ng-template>
+              <ng-template ng-loadingspinner-tmp>
+                <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                <div class="visually-hidden" i18n>Loading...</div>
+              </ng-template>
+              <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+                <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+              </ng-template>
+            </ng-select>
+          </div>
+          @if (hint) {
+            <small class="form-text text-muted">{{hint}}</small>
+          }
         </div>
-        <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
       </div>
     </div>
-  </div>

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

@@ -1,6 +1,10 @@
-::ng-deep .ng-select-container .ng-value-container .ng-value {
-    background-color: transparent !important;
-    border-color: transparent;
+::ng-deep .ng-select-container .ng-value-container {
+    overflow: hidden;
+
+    .ng-value {
+        background-color: transparent !important;
+        border-color: transparent;
+    }
 }
 
 .sidebaricon {
@@ -9,6 +13,4 @@
 
 .badge {
     font-size: .75rem;
-    // --bs-primary: var(--pngx-bg-alt);
-    // color: var(--pngx-primary-text-contrast);
 }

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

@@ -20,6 +20,10 @@ const documents = [
     id: 12,
     title: 'Document 12 bar',
   },
+  {
+    id: 16,
+    title: 'Document 16 bar',
+  },
   {
     id: 23,
     title: 'Document 23 bar',
@@ -48,10 +52,15 @@ describe('DocumentLinkComponent', () => {
     fixture.detectChanges()
   })
 
-  it('should retrieve selected documents from APIs', () => {
-    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+  it('should retrieve selected documents from API', () => {
+    const getSpy = jest.spyOn(documentService, 'getFew')
     getSpy.mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
     })
     component.writeValue([1])
     expect(getSpy).toHaveBeenCalled()
@@ -85,12 +94,18 @@ describe('DocumentLinkComponent', () => {
   })
 
   it('should load values correctly', () => {
-    jest.spyOn(documentService, 'getCachedMany').mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+    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, 23])
     expect(component.value).toEqual([12, 23])
-    expect(component.selectedDocuments).toEqual([documents[1], documents[2]])
+    expect(component.selectedDocuments).toEqual([documents[1], documents[3]])
     component.writeValue(null)
     expect(component.value).toEqual([])
     expect(component.selectedDocuments).toEqual([])
@@ -100,9 +115,14 @@ describe('DocumentLinkComponent', () => {
   })
 
   it('should support unselect', () => {
-    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+    const getSpy = jest.spyOn(documentService, 'getFew')
     getSpy.mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+      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, 23])
     component.unselect({ id: 23 })
@@ -115,4 +135,26 @@ describe('DocumentLinkComponent', () => {
     expect(component.compareDocuments(documents[0], { id: 2 })).toBeFalsy()
     expect(component.trackByFn(documents[1])).toEqual(12)
   })
+
+  it('should not include the current document or already selected documents in results', () => {
+    let foundDocs
+    component.foundDocuments$.subscribe((found) => (foundDocs = found))
+    component.parentDocumentID = 23
+    component.selectedDocuments = [documents[2]]
+    const listSpy = jest.spyOn(documentService, 'listFiltered')
+    listSpy.mockImplementation(
+      (page, pageSize, sortField, sortReverse, filterRules, extraParams) => {
+        const docs = documents.filter((d) =>
+          d.title.includes(filterRules[0].value)
+        )
+        return of({
+          count: docs.length,
+          results: docs,
+          all: docs.map((d) => d.id),
+        })
+      }
+    )
+    component.documentsInput$.next('bar')
+    expect(foundDocs).toEqual([documents[1]])
+  })
 })

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

@@ -13,7 +13,7 @@ import {
   catchError,
 } from 'rxjs'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
-import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { Document } from 'src/app/data/document'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { AbstractInputComponent } from '../abstract-input'
 
@@ -34,15 +34,18 @@ export class DocumentLinkComponent
   implements OnInit, OnDestroy
 {
   documentsInput$ = new Subject<string>()
-  foundDocuments$: Observable<PaperlessDocument[]>
+  foundDocuments$: Observable<Document[]>
   loading = false
-  selectedDocuments: PaperlessDocument[] = []
+  selectedDocuments: Document[] = []
 
   private unsubscribeNotifier: Subject<any> = new Subject()
 
   @Input()
   notFoundText: string = $localize`No documents found`
 
+  @Input()
+  parentDocumentID: number
+
   constructor(private documentsService: DocumentService) {
     super()
   }
@@ -58,11 +61,11 @@ export class DocumentLinkComponent
     } else {
       this.loading = true
       this.documentsService
-        .getCachedMany(documentIDs)
+        .getFew(documentIDs, { fields: 'id,title' })
         .pipe(takeUntil(this.unsubscribeNotifier))
-        .subscribe((documents) => {
+        .subscribe((documentResults) => {
           this.loading = false
-          this.selectedDocuments = documents
+          this.selectedDocuments = documentResults.results
           super.writeValue(documentIDs)
         })
     }
@@ -86,7 +89,13 @@ export class DocumentLinkComponent
               { truncate_content: true }
             )
             .pipe(
-              map((results) => results.results),
+              map((results) =>
+                results.results.filter(
+                  (d) =>
+                    d.id !== this.parentDocumentID &&
+                    !this.selectedDocuments.find((sd) => sd.id === d.id)
+                )
+              ),
               catchError(() => of([])), // empty on error
               tap(() => (this.loading = false))
             )
@@ -95,21 +104,18 @@ export class DocumentLinkComponent
     )
   }
 
-  unselect(document: PaperlessDocument): void {
+  unselect(document: Document): void {
     this.selectedDocuments = this.selectedDocuments.filter(
       (d) => d.id !== document.id
     )
     this.onChange(this.selectedDocuments.map((d) => d.id))
   }
 
-  compareDocuments(
-    document: PaperlessDocument,
-    selectedDocument: PaperlessDocument
-  ) {
+  compareDocuments(document: Document, selectedDocument: Document) {
     return document.id === selectedDocument.id
   }
 
-  trackByFn(item: PaperlessDocument) {
+  trackByFn(item: Document) {
     return item.id
   }
 

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

@@ -1,22 +1,30 @@
 <div class="mb-3" [class.pb-3]="error">
   <div class="row">
     <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-        <svg class="sidebaricon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#x"/>
-        </svg>&nbsp;<ng-container i18n>Remove</ng-container>
-      </button>
-    </div>
-    <div class="position-relative" [class.col-md-9]="horizontal">
-      <div class="input-group" [class.is-invalid]="error">
-        <input #inputField type="number" class="form-control" [step]="step" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
-        <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+          <svg class="sidebaricon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
       </div>
-      <div class="invalid-feedback position-absolute top-100">
-        {{error}}
+      <div class="position-relative" [class.col-md-9]="horizontal">
+        <div class="input-group" [class.is-invalid]="error">
+          <input #inputField type="number" class="form-control" [step]="step" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
+          @if (showAdd) {
+            <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
+          }
+        </div>
+        <div class="invalid-feedback position-absolute top-100">
+          {{error}}
+        </div>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
       </div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
     </div>
   </div>
-</div>

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

@@ -2,14 +2,18 @@
   <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
     <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
-    <button *ngIf="showReveal" type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
-      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#eye" />
-      </svg>
-    </button>
+    @if (showReveal) {
+      <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
+        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#eye" />
+        </svg>
+      </button>
+    }
   </div>
   <div class="invalid-feedback">
     {{error}}
   </div>
-  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  @if (hint) {
+    <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  }
 </div>