amorfo77/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2026-07-30 15:45:58 +00:00
Code Issues Projects Releases Wiki Activity

Chorehancement: update to Angular v22, 'zoneless' / 'reactive' (#13114)

Browse Source
This commit is contained in:
shamoon
2026-07-10 00:42:16 -07:00
committed by GitHub
parent f244442c65
commit 106b41a15c
213 changed files with 5363 additions and 5842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
+59 -24
View File
@@ -1,22 +1,25 @@
<pngx-widget-frame
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
[title]="savedView.name"
[badge]="count"
[loading]="loading"
[loading]="false"
[draggable]="savedView"
>
@if (documents.length) {
@if (count() !== null) {
<span title-badge class="badge bg-info text-dark ms-2">{{count()}}</span>
}
@if (documents().length) {
<a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
}
<div content class="wrapper fade" [class.show]="show">
@if (displayMode === DisplayMode.TABLE) {
<div content class="wrapper fade" [class.show]="show()">
@if (displayMode() === DisplayMode.TABLE) {
<table class="table table-hover mb-0 mt-n2 align-middle">
<thead>
<tr>
@for (field of displayFields; track field; let i = $index) {
@if (displayFields.includes(field)) {
@for (field of displayFields(); track field; let i = $index) {
@if (displayFields().includes(field)) {
<th
scope="col"
[ngClass]="{
@@ -30,13 +33,26 @@
</tr>
</thead>
<tbody>
@for (doc of documents; track doc.id; let i = $index) {
<tr>
@for (field of displayFields; track field; let j = $index) {
<td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
@if (loading && show) {
@if (loading() && !documents().length) {
@for (row of placeholderRows; track row) {
<tr>
@for (field of displayFields(); track field; let j = $index) {
<td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
<div class="placeholder-glow text-start">
<span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents.length) }"></span>
<span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"></span>
</div>
</td>
}
</tr>
}
}
@for (doc of documents(); track doc.id; let i = $index) {
<tr>
@for (field of displayFields(); track field; let j = $index) {
<td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
@if (loading() && !documents().length) {
<div class="placeholder-glow text-start">
<span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents().length) }"></span>
</div>
} @else {
@switch (field) {
@@ -96,7 +112,7 @@
@if (field.startsWith(DisplayField.CUSTOM_FIELD)) {
<pngx-custom-field-display [document]="doc" [fieldDisplayKey]="field"></pngx-custom-field-display>
}
@if (j === displayFields.length - 1) {
@if (j === displayFields().length - 1) {
<div class="btn-group position-absolute top-50 end-0 translate-middle-y" (mouseleave)="popupPreview.close()">
<pngx-preview-popup [document]="doc" linkClasses="btn px-4 btn-dark border-dark-subtle" #popupPreview>
<i-bs width="0.8em" height="0.8em" name="eye"></i-bs>
@@ -113,15 +129,25 @@
}
</tbody>
</table>
} @else if (displayMode === DisplayMode.SMALL_CARDS) {
} @else if (displayMode() === DisplayMode.SMALL_CARDS) {
<div class="row row-cols-paperless-cards my-n2">
@for (d of documents; track d.id; let i = $index) {
@if (loading() && !documents().length) {
@for (row of placeholderRows; track row) {
<pngx-document-card-small
class="p-0"
[ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"
[document]="null"
[displayFields]="displayFields()">
</pngx-document-card-small>
}
}
@for (d of documents(); track d.id; let i = $index) {
<pngx-document-card-small
class="p-0"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
[ngStyle]="{ opacity: show() ? 1 : 1 - (i * 1/documents().length) }"
(dblClickDocument)="openDocumentDetail(d)"
[document]="!loading && show ? d : null"
[displayFields]="displayFields"
[document]="d"
[displayFields]="displayFields()"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"
(clickStoragePath)="clickStoragePath($event)"
@@ -129,14 +155,23 @@
</pngx-document-card-small>
}
</div>
} @else if (displayMode === DisplayMode.LARGE_CARDS) {
} @else if (displayMode() === DisplayMode.LARGE_CARDS) {
<div class="row my-n2">
@for (d of documents; track d.id; let i = $index) {
@if (loading() && !documents().length) {
@for (row of placeholderRows; track row) {
<pngx-document-card-large
[document]="null"
[ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"
[displayFields]="displayFields()">
</pngx-document-card-large>
}
}
@for (d of documents(); track d.id; let i = $index) {
<pngx-document-card-large
(dblClickDocument)="openDocumentDetail(d)"
[document]="!loading && show ? d : null"
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
[displayFields]="displayFields"
[document]="d"
[ngStyle]="{ opacity: show() ? 1 : 1 - (i * 1/documents().length) }"
[displayFields]="displayFields()"
(clickTag)="clickTag($event)"
(clickCorrespondent)="clickCorrespondent($event)"
(clickStoragePath)="clickStoragePath($event)"