paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

better sorting directive

Browse Source
This commit is contained in:
jonaswinkler
2021-01-04 15:58:26 +01:00
parent 16559e83f5
commit 32f371fcb6
2 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src-ui/src/app/components/manage/generic-list/generic-list.component.ts
View File

@@ -26,7 +26,7 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
public collectionSize = 0 public collectionSize = 0
public sortField: string public sortField: string
public sortDirection: string public sortReverse: boolean
getMatching(o: MatchingModel) { getMatching(o: MatchingModel) {
if (o.matching_algorithm == MATCH_AUTO) { if (o.matching_algorithm == MATCH_AUTO) {
@@ -40,17 +40,17 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
onSort(event: SortEvent) { onSort(event: SortEvent) {
if (event.direction && event.direction.length > 0) { if (event.sorted) {
this.sortField = event.column this.sortField = event.column
this.sortDirection = event.direction this.sortReverse = event.reverse
} else { } else {
this.sortField = null this.sortField = null
this.sortDirection = null this.sortReverse = false
} }
this.headers.forEach(header => { this.headers.forEach(header => {
if (header.sortable !== this.sortField) { if (header.sortable !== this.sortField) {
header.direction = ''; header.sorted = false
} }
}); });
@@ -62,8 +62,7 @@ export abstract class GenericListComponent<T extends ObjectWithId> implements On
} }
reloadData() { reloadData() {
// TODO: this is a hack this.service.list(this.page, null, this.sortField, this.sortReverse).subscribe(c => {
this.service.list(this.page, null, this.sortField, this.sortDirection == 'des').subscribe(c => {
this.data = c.results this.data = c.results
this.collectionSize = c.count this.collectionSize = c.count
}); });

33
src-ui/src/app/directives/sortable.directive.ts
View File

@@ -1,17 +1,16 @@
import { Directive, EventEmitter, Input, Output } from '@angular/core'; import { Directive, EventEmitter, Input, Output } from '@angular/core';
export interface SortEvent { export interface SortEvent {
column: string; column: string
direction: string; sorted: boolean
reverse: boolean
} }
const rotate: {[key: string]: string} = { 'asc': 'des', 'des': '', '': 'asc' };
@Directive({ @Directive({
selector: 'th[sortable]', selector: 'th[sortable]',
host: { host: {
'[class.asc]': 'direction === "asc"', '[class.asc]': 'sorted && !reverse',
'[class.des]': 'direction === "des"', '[class.des]': 'sorted && reverse',
'(click)': 'rotate()' '(click)': 'rotate()'
} }
}) })
@@ -19,12 +18,26 @@ export class SortableDirective {
constructor() { } constructor() { }
@Input() sortable: string = ''; @Input()
@Input() direction: string = ''; sortable: string = '';
@Input()
sorted: boolean = false
@Input()
reverse: boolean = false
@Output() sort = new EventEmitter<SortEvent>(); @Output() sort = new EventEmitter<SortEvent>();
rotate() { rotate() {
this.direction = rotate[this.direction]; if (!this.sorted) {
this.sort.emit({column: this.sortable, direction: this.direction}); this.sorted = true
this.reverse = false
} else if (this.sorted && !this.reverse) {
this.reverse = true
} else {
this.sorted = false
}
this.sort.emit({column: this.sortable, sorted: this.sorted, reverse: this.reverse});
} }
} }