153 lines
7.6 KiB
HTML
153 lines
7.6 KiB
HTML
<pngx-widget-frame
|
|
*pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
|
|
[title]="savedView.name"
|
|
[loading]="loading"
|
|
[draggable]="savedView"
|
|
>
|
|
|
|
@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) {
|
|
<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)) {
|
|
<th
|
|
scope="col"
|
|
[ngClass]="{
|
|
'd-none d-md-table-cell': i > 1,
|
|
'w-25': field === DisplayField.CREATED || field === DisplayField.ADDED
|
|
}">
|
|
{{ getColumnTitle(field) }}
|
|
</th>
|
|
}
|
|
}
|
|
</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) {
|
|
<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) {
|
|
@case (DisplayField.ADDED) {
|
|
<a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.added | customDate}}</a>
|
|
}
|
|
@case (DisplayField.CREATED) {
|
|
<a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.created_date | customDate}}</a>
|
|
}
|
|
@case (DisplayField.TITLE) {
|
|
<a routerLink="/documents/{{doc.id}}" title="Open document" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
|
|
}
|
|
@case (DisplayField.CORRESPONDENT) {
|
|
@if (doc.correspondent) {
|
|
<a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)" title="Filter by correspondent" i18n-title>{{doc.correspondent | correspondentName | async}}</a>
|
|
}
|
|
}
|
|
@case (DisplayField.TAGS) {
|
|
@for (tagID of doc.tags; track tagID) {
|
|
<pngx-tag [tagID]="tagID" class="ms-1 fs-6" (click)="clickTag(tagID, $event)" [clickable]="true" linkTitle="Filter by tag" i18n-title></pngx-tag>
|
|
}
|
|
}
|
|
@case (DisplayField.DOCUMENT_TYPE) {
|
|
@if (doc.document_type) {
|
|
<a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)" title="Filter by document type" i18n-title>{{doc.document_type | documentTypeName | async}}</a>
|
|
}
|
|
}
|
|
@case (DisplayField.STORAGE_PATH) {
|
|
@if (doc.storage_path) {
|
|
<a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)" title="Filter by storage path" i18n-title>{{doc.storage_path | storagePathName | async}}</a>
|
|
}
|
|
}
|
|
@case (DisplayField.OWNER) {
|
|
@if (doc.owner) {
|
|
<a class="btn-link text-dark text-decoration-none" type="button" (click)="clickOwner(doc.owner, $event)" title="Filter by owner" i18n-title>{{doc.owner | username | async}}</a>
|
|
}
|
|
}
|
|
@case (DisplayField.ASN) {
|
|
{{doc.archive_serial_number}}
|
|
}
|
|
@case (DisplayField.PAGE_COUNT) {
|
|
{{ doc.page_count }}
|
|
}
|
|
@case (DisplayField.SHARED) {
|
|
@if (doc.is_shared_by_requester) { <ng-container i18n>Yes</ng-container> } @else { <ng-container i18n>No</ng-container> }
|
|
}
|
|
@case (DisplayField.NOTES) {
|
|
@if (doc.notes.length) {
|
|
<a routerLink="/documents/{{doc.id}}/notes" class="btn btn-sm p-0">
|
|
<span class="badge rounded-pill bg-light border text-primary">
|
|
<i-bs width="1.2em" height="1.2em" class="ms-1 me-1" name="chat-left-text"></i-bs>
|
|
{{doc.notes.length}}</span>
|
|
</a>
|
|
}
|
|
}
|
|
}
|
|
@if (field.startsWith(DisplayField.CUSTOM_FIELD)) {
|
|
<pngx-custom-field-display [document]="doc" [fieldDisplayKey]="field"></pngx-custom-field-display>
|
|
}
|
|
@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>
|
|
</pngx-preview-popup>
|
|
<a [href]="getDownloadUrl(doc)" class="btn px-4 btn-dark border-dark-subtle" title="Download" i18n-title (click)="$event.stopPropagation()">
|
|
<i-bs width="0.8em" height="0.8em" name="download"></i-bs>
|
|
</a>
|
|
</div>
|
|
}
|
|
}
|
|
</td>
|
|
}
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
} @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) {
|
|
<pngx-document-card-small
|
|
class="p-0"
|
|
[ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
|
|
(dblClickDocument)="openDocumentDetail(d)"
|
|
[document]="!loading && show ? d : null"
|
|
[displayFields]="displayFields"
|
|
(clickTag)="clickTag($event)"
|
|
(clickCorrespondent)="clickCorrespondent($event)"
|
|
(clickStoragePath)="clickStoragePath($event)"
|
|
(clickDocumentType)="clickDocumentType($event)">
|
|
</pngx-document-card-small>
|
|
}
|
|
</div>
|
|
} @else if (displayMode === DisplayMode.LARGE_CARDS) {
|
|
<div class="row my-n2">
|
|
@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"
|
|
(clickTag)="clickTag($event)"
|
|
(clickCorrespondent)="clickCorrespondent($event)"
|
|
(clickStoragePath)="clickStoragePath($event)"
|
|
(clickDocumentType)="clickDocumentType($event)"
|
|
(clickMoreLike)="clickMoreLike(d.id)">
|
|
</pngx-document-card-large>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<p i18n class="text-center text-muted mb-0 fst-italic">No documents</p>
|
|
}
|
|
|
|
</div>
|
|
</pngx-widget-frame>
|