fixes #128

src-ui/src/app/components/document-list/document-list.component.html

@@ -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' : ''">

src-ui/src/app/components/document-list/document-list.component.ts

@@ -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()

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html

@@ -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>

src-ui/src/app/components/manage/document-type-list/document-type-list.component.html

@@ -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>

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

@@ -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()
   }
 

src-ui/src/app/components/manage/tag-list/tag-list.component.html

@@ -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>