This commit is contained in:
jonaswinkler 2021-01-04 17:08:52 +01:00
parent 32f371fcb6
commit 9bbcb9319c
7 changed files with 77 additions and 45 deletions

View File

@ -99,12 +99,54 @@
<table class="table table-sm border shadow-sm" *ngIf="displayMode == 'details'">
<thead>
<th></th>
<th class="d-none d-lg-table-cell" i18n>ASN</th>
<th class="d-none d-md-table-cell" i18n>Correspondent</th>
<th i18n>Title</th>
<th class="d-none d-xl-table-cell" i18n>Document type</th>
<th i18n>Created</th>
<th class="d-none d-xl-table-cell" i18n>Added</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
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" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">

View File

@ -1,8 +1,9 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PaperlessDocument } from 'src/app/data/paperless-document';
import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
import { SortableDirective, SortEvent } from 'src/app/directives/sortable.directive';
import { DocumentListViewService } from 'src/app/services/document-list-view.service';
import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
import { SavedViewService } from 'src/app/services/rest/saved-view.service';
@ -28,6 +29,8 @@ export class DocumentListComponent implements OnInit {
@ViewChild("filterEditor")
private filterEditor: FilterEditorComponent
@ViewChildren(SortableDirective) headers: QueryList<SortableDirective>;
displayMode = 'smallCards' // largeCards, smallCards, details
get isFiltered() {
@ -42,6 +45,10 @@ export class DocumentListComponent implements OnInit {
return DOCUMENT_SORT_FIELDS
}
onSort(event: SortEvent) {
this.list.setSort(event.column, event.reverse)
}
get isBulkEditing(): boolean {
return this.list.selected.size > 0
}
@ -73,7 +80,6 @@ export class DocumentListComponent implements OnInit {
})
}
loadViewConfig(view: PaperlessSavedView) {
this.list.load(view)
this.list.reload()

View File

@ -9,10 +9,10 @@
<table class="table table-striped border shadow">
<thead>
<tr>
<th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
<th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
<th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
<th scope="col" sortable="last_correspondence" (sort)="onSort($event)" i18n>Last correspondence</th>
<th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
<th scope="col" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
<th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
<th scope="col" sortable="last_correspondence" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Last correspondence</th>
<th scope="col" i18n>Actions</th>
</tr>
</thead>

View File

@ -10,9 +10,9 @@
<table class="table table-striped border shadow">
<thead>
<tr>
<th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
<th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
<th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
<th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
<th scope="col" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
<th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
<th scope="col" i18n>Actions</th>
</tr>
</thead>

View File

@ -39,21 +39,8 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
}
onSort(event: SortEvent) {
if (event.sorted) {
this.sortField = event.column
this.sortReverse = event.reverse
} else {
this.sortField = null
this.sortReverse = false
}
this.headers.forEach(header => {
if (header.sortable !== this.sortField) {
header.sorted = false
}
});
this.sortField = event.column
this.sortReverse = event.reverse
this.reloadData()
}

View File

@ -10,10 +10,10 @@
<table class="table table-striped border shadow-sm">
<thead>
<tr>
<th scope="col" sortable="name" (sort)="onSort($event)" i18n>Name</th>
<th scope="col" sortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
<th scope="col" i18n>Color</th>
<th scope="col" sortable="matching_algorithm" (sort)="onSort($event)" i18n>Matching</th>
<th scope="col" sortable="document_count" (sort)="onSort($event)" i18n>Document count</th>
<th scope="col" sortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
<th scope="col" sortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
<th scope="col" i18n>Actions</th>
</tr>
</thead>

View File

@ -2,15 +2,14 @@ import { Directive, EventEmitter, Input, Output } from '@angular/core';
export interface SortEvent {
column: string
sorted: boolean
reverse: boolean
}
@Directive({
selector: 'th[sortable]',
host: {
'[class.asc]': 'sorted && !reverse',
'[class.des]': 'sorted && reverse',
'[class.asc]': 'currentSortField == sortable && !currentSortReverse',
'[class.des]': 'currentSortField == sortable && currentSortReverse',
'(click)': 'rotate()'
}
})
@ -22,22 +21,20 @@ export class SortableDirective {
sortable: string = '';
@Input()
sorted: boolean = false
currentSortReverse: boolean = false
@Input()
reverse: boolean = false
currentSortField: string
@Output() sort = new EventEmitter<SortEvent>();
rotate() {
if (!this.sorted) {
this.sorted = true
this.reverse = false
} else if (this.sorted && !this.reverse) {
this.reverse = true
if (this.currentSortField != this.sortable) {
this.sort.emit({column: this.sortable, reverse: false});
} else if (this.currentSortField == this.sortable && !this.currentSortReverse) {
this.sort.emit({column: this.currentSortField, reverse: true});
} else {
this.sorted = false
this.sort.emit({column: null, reverse: false});
}
this.sort.emit({column: this.sortable, sorted: this.sorted, reverse: this.reverse});
}
}