mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-11-03 03:16:10 -06:00
207 lines
10 KiB
HTML
207 lines
10 KiB
HTML
<app-page-header [title]="getTitle()">
|
|
|
|
<div ngbDropdown class="me-2 d-flex">
|
|
<button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
|
|
</svg>
|
|
<div class="d-none d-sm-inline"> <ng-container i18n>Select</ng-container></div>
|
|
</button>
|
|
<div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
|
|
<button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
|
|
<button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
|
|
<button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group flex-fill" role="group">
|
|
<input type="radio" class="btn-check" [(ngModel)]="displayMode" value="details" (ngModelChange)="saveDisplayMode()" id="displayModeDetails">
|
|
<label for="displayModeDetails" class="btn btn-outline-primary btn-sm">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#list-ul" />
|
|
</svg>
|
|
</label>
|
|
<input type="radio" class="btn-check" [(ngModel)]="displayMode" value="smallCards" (ngModelChange)="saveDisplayMode()" id="displayModeSmall">
|
|
<label for="displayModeSmall" class="btn btn-outline-primary btn-sm">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#grid" />
|
|
</svg>
|
|
</label>
|
|
<input type="radio" class="btn-check" [(ngModel)]="displayMode" value="largeCards" (ngModelChange)="saveDisplayMode()" id="displayModeLarge">
|
|
<label for="displayModeLarge" class="btn btn-outline-primary btn-sm">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#hdd-stack" />
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
|
|
<div ngbDropdown class="btn-group ms-2 flex-fill">
|
|
<button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort</button>
|
|
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
|
|
<div class="w-100 d-flex pb-2 mb-1 border-bottom">
|
|
<input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
|
|
<label class="btn btn-outline-primary btn-sm mx-2 flex-fill" for="listSortReverseFalse">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-down" />
|
|
</svg>
|
|
</label>
|
|
<input type="radio" class="btn-check" [value]="true" [(ngModel)]="listSortReverse" id="listSortReverseTrue">
|
|
<label class="btn btn-outline-primary btn-sm me-2 flex-fill" for="listSortReverseTrue">
|
|
<svg class="toolbaricon" fill="currentColor">
|
|
<use xlink:href="assets/bootstrap-icons.svg#sort-alpha-up-alt" />
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSortField(f.field)"
|
|
[class.active]="list.sortField == f.field">{{f.name}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group ms-2 flex-fill" ngbDropdown role="group">
|
|
<button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" ngbDropdownToggle i18n>Views</button>
|
|
<div class="dropdown-menu shadow dropdown-menu-right" ngbDropdownMenu>
|
|
<ng-container *ngIf="!list.activeSavedViewId">
|
|
<button ngbDropdownItem *ngFor="let view of savedViewService.allViews" (click)="loadViewConfig(view.id)">{{view.name}}</button>
|
|
<div class="dropdown-divider" *ngIf="savedViewService.allViews.length > 0"></div>
|
|
</ng-container>
|
|
|
|
<button ngbDropdownItem (click)="saveViewConfig()" *ngIf="list.activeSavedViewId" i18n>Save "{{list.activeSavedViewTitle}}"</button>
|
|
<button ngbDropdownItem (click)="saveViewConfigAs()" i18n>Save as...</button>
|
|
</div>
|
|
</div>
|
|
|
|
</app-page-header>
|
|
|
|
<div class="row sticky-top pt-3 pt-sm-4 pb-2 pb-lg-4 bg-body">
|
|
<app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" #filterEditor></app-filter-editor>
|
|
<app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
|
|
</div>
|
|
|
|
<ng-template #pagination>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<p>
|
|
<ng-container *ngIf="list.isReloading">
|
|
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
|
|
<ng-container i18n>Loading...</ng-container>
|
|
</ng-container>
|
|
<span i18n *ngIf="list.selected.size > 0">{list.collectionSize, plural, =1 {Selected {{list.selected.size}} of one document} other {Selected {{list.selected.size}} of {{list.collectionSize || 0}} documents}}</span>
|
|
<ng-container *ngIf="!list.isReloading">
|
|
<span i18n *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span> <span i18n *ngIf="isFiltered">(filtered)</span>
|
|
</ng-container>
|
|
</p>
|
|
<ngb-pagination *ngIf="list.collectionSize" [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
|
|
[rotate]="true" aria-label="Default pagination"></ngb-pagination>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<ng-container *ngTemplateOutlet="pagination"></ng-container>
|
|
|
|
<ng-container *ngIf="list.error ; else documentListNoError">
|
|
<div class="alert alert-danger" role="alert"><ng-container i18n>Error while loading documents</ng-container>: {{list.error}}</div>
|
|
</ng-container>
|
|
|
|
<ng-template #documentListNoError>
|
|
|
|
<div *ngIf="displayMode == 'largeCards'">
|
|
<app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)" (clickStoragePath)="clickStoragePath($event)" (clickMoreLike)="clickMoreLike(d.id)">
|
|
</app-document-card-large>
|
|
</div>
|
|
|
|
<table class="table table-sm align-middle border shadow-sm" *ngIf="displayMode == 'details'">
|
|
<thead>
|
|
<th></th>
|
|
<th class="d-none d-lg-table-cell"
|
|
sortable="archive_serial_number"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>ASN</th>
|
|
<th class="d-none d-md-table-cell"
|
|
sortable="correspondent__name"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>Correspondent</th>
|
|
<th
|
|
sortable="title"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>Title</th>
|
|
<th class="d-none d-xl-table-cell"
|
|
sortable="document_type__name"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>Document type</th>
|
|
<th class="d-none d-xl-table-cell"
|
|
sortable="storage_path__name"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>Storage path</th>
|
|
<th
|
|
sortable="created"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>Created</th>
|
|
<th class="d-none d-xl-table-cell"
|
|
sortable="added"
|
|
[currentSortField]="list.sortField"
|
|
[currentSortReverse]="list.sortReverse"
|
|
(sort)="onSort($event)"
|
|
i18n>Added</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" (click)="toggleSelected(d, $event); $event.stopPropagation();" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
|
|
<td>
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event); $event.stopPropagation();">
|
|
<label class="form-check-label" for="docCheck{{d.id}}"></label>
|
|
</div>
|
|
</td>
|
|
<td class="d-none d-lg-table-cell">
|
|
{{d.archive_serial_number}}
|
|
</td>
|
|
<td class="d-none d-md-table-cell">
|
|
<ng-container *ngIf="d.correspondent">
|
|
<a (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent" i18n-title>{{(d.correspondent$ | async)?.name}}</a>
|
|
</ng-container>
|
|
</td>
|
|
<td>
|
|
<a (click)="openDocumentsService.openDocument(d)" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
|
|
<app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ms-1" clickable="true" linkTitle="Filter by tag" i18n-linkTitle (click)="clickTag(t.id);$event.stopPropagation()"></app-tag>
|
|
</td>
|
|
<td class="d-none d-xl-table-cell">
|
|
<ng-container *ngIf="d.document_type">
|
|
<a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type" i18n-title>{{(d.document_type$ | async)?.name}}</a>
|
|
</ng-container>
|
|
</td>
|
|
<td class="d-none d-xl-table-cell">
|
|
<ng-container *ngIf="d.storage_path">
|
|
<a (click)="clickStoragePath(d.storage_path);$event.stopPropagation()" title="Filter by storage path" i18n-title>{{(d.storage_path$ | async)?.name}}</a>
|
|
</ng-container>
|
|
</td>
|
|
<td>
|
|
{{d.created_date | customDate}}
|
|
</td>
|
|
<td class="d-none d-xl-table-cell">
|
|
{{d.added | customDate}}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
|
|
<app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickStoragePath)="clickStoragePath($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
|
|
</div>
|
|
<div *ngIf="list.documents?.length > 15" class="mt-3">
|
|
<ng-container *ngTemplateOutlet="pagination"></ng-container>
|
|
</div>
|
|
|
|
|
|
</ng-template>
|