support sort fields & some refactoring

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -94,7 +94,7 @@ export class AppFrameComponent {
 
   search() {
     this.closeMenu()
-    this.queryParamsService.loadFilterRules([
+    this.queryParamsService.navigateWithFilterRules([
       {
         rule_type: FILTER_FULLTEXT_QUERY,
         value: (this.searchField.value as string).trim(),

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -67,7 +67,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
   }
 
   clickTag(tag: PaperlessTag) {
-    this.queryParamsService.loadFilterRules([
+    this.queryParamsService.navigateWithFilterRules([
       { rule_type: FILTER_HAS_TAGS_ALL, value: tag.id.toString() },
     ])
   }

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

@@ -448,7 +448,7 @@ export class DocumentDetailComponent
   }
 
   moreLike() {
-    this.queryParamsService.loadFilterRules([
+    this.queryParamsService.navigateWithFilterRules([
       {
         rule_type: FILTER_FULLTEXT_MORELIKE,
         value: this.documentId.toString(),

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

@@ -38,7 +38,7 @@
   <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 btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="list.sortReverse">
+      <div class="w-100 d-flex btn-group-toggle pb-2 mb-1 border-bottom" ngbRadioGroup [(ngModel)]="listSort">
         <label ngbButtonLabel class="btn-outline-primary btn-sm mx-2 flex-fill">
           <input ngbButton type="radio" class="btn btn-check btn-sm" [value]="false">
           <svg class="toolbaricon" fill="currentColor">
@@ -53,7 +53,7 @@
         </label>
       </div>
       <div>
-        <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="list.sortField = f.field"
+        <button *ngFor="let f of getSortFields()" ngbDropdownItem (click)="setSortField(f.field)"
           [class.active]="list.sortField == f.field">{{f.name}}
         </button>
       </div>

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

@@ -9,20 +9,9 @@ import {
 } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import {
-  filter,
-  first,
-  map,
-  Subject,
-  Subscription,
-  switchMap,
-  takeUntil,
-} from 'rxjs'
+import { filter, first, map, Subject, switchMap, takeUntil } from 'rxjs'
 import { FilterRule, isFullTextFilterRule } from 'src/app/data/filter-rule'
-import {
-  FILTER_FULLTEXT_MORELIKE,
-  FILTER_RULE_TYPES,
-} from 'src/app/data/filter-rule-type'
+import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
 import { PaperlessDocument } from 'src/app/data/paperless-document'
 import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
 import {
@@ -31,9 +20,11 @@ import {
 } from 'src/app/directives/sortable.directive'
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
-import { QueryParamsService } from 'src/app/services/query-params.service'
 import {
-  DocumentService,
+  filterRulesFromQueryParams,
+  QueryParamsService,
+} from 'src/app/services/query-params.service'
+import {
   DOCUMENT_SORT_FIELDS,
   DOCUMENT_SORT_FIELDS_FULLTEXT,
 } from 'src/app/services/rest/document.service'
@@ -50,7 +41,6 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
 export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     public list: DocumentListViewService,
-    private documentService: DocumentService,
     public savedViewService: SavedViewService,
     public route: ActivatedRoute,
     private router: Router,
@@ -85,8 +75,26 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
       : DOCUMENT_SORT_FIELDS
   }
 
+  set listSort(reverse: boolean) {
+    this.list.sortReverse = reverse
+    this.queryParamsService.sortField = this.list.sortField
+    this.queryParamsService.sortReverse = reverse
+  }
+
+  get listSort(): boolean {
+    return this.list.sortReverse
+  }
+
+  setSortField(field: string) {
+    this.list.sortField = field
+    this.queryParamsService.sortField = field
+    this.queryParamsService.sortReverse = this.listSort
+  }
+
   onSort(event: SortEvent) {
     this.list.setSort(event.column, event.reverse)
+    this.queryParamsService.sortField = event.column
+    this.queryParamsService.sortReverse = event.reverse
   }
 
   get isBulkEditing(): boolean {
@@ -139,9 +147,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
           this.loadViewConfig(parseInt(queryParams.get('view')))
         } else {
           this.list.activateSavedView(null)
-          this.queryParamsService.params = queryParams
-          this.list.filterRules = this.queryParamsService.filterRules
-          this.list.reload()
+          this.queryParamsService.parseQueryParams(queryParams)
           this.unmodifiedFilterRules = []
         }
       })
@@ -152,16 +158,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (filterRules) => {
-          this.queryParamsService.filterRules = filterRules
-
-          // if we were on a saved view we navigate 'away' to /documents
-          let base = []
-          if (this.route.snapshot.paramMap.has('id')) base = ['/documents']
-
-          this.router.navigate(base, {
-            relativeTo: this.route,
-            queryParams: this.queryParamsService.params,
-          })
+          this.queryParamsService.updateFilterRules(filterRules)
         },
       })
   }
@@ -272,7 +269,7 @@ export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   clickMoreLike(documentID: number) {
-    this.queryParamsService.loadFilterRules([
+    this.queryParamsService.navigateWithFilterRules([
       { rule_type: FILTER_FULLTEXT_MORELIKE, value: documentID.toString() },
     ])
   }

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

@@ -18,7 +18,6 @@ import {
   SortableDirective,
   SortEvent,
 } from 'src/app/directives/sortable.directive'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { QueryParamsService } from 'src/app/services/query-params.service'
 import { AbstractNameFilterService } from 'src/app/services/rest/abstract-name-filter-service'
 import { ToastService } from 'src/app/services/toast.service'
@@ -141,7 +140,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   }
 
   filterDocuments(object: ObjectWithId) {
-    this.queryParamsService.loadFilterRules([
+    this.queryParamsService.navigateWithFilterRules([
       { rule_type: this.filterRuleType, value: object.id.toString() },
     ])
   }

src-ui/src/app/services/document-list-view.service.ts

@@ -9,7 +9,6 @@ import {
 import { PaperlessDocument } from '../data/paperless-document'
 import { PaperlessSavedView } from '../data/paperless-saved-view'
 import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys'
-import { QueryParamsService } from './query-params.service'
 import { DocumentService, DOCUMENT_SORT_FIELDS } from './rest/document.service'
 import { SettingsService, SETTINGS_KEYS } from './settings.service'
 
@@ -434,8 +433,7 @@ export class DocumentListViewService {
 
   constructor(
     private documentService: DocumentService,
-    private settings: SettingsService,
-    private queryParamsService: QueryParamsService
+    private settings: SettingsService
   ) {
     let documentListViewConfigJson = localStorage.getItem(
       DOCUMENT_LIST_SERVICE.CURRENT_VIEW_CONFIG

src-ui/src/app/services/query-params.service.ts

@@ -1,101 +1,138 @@
 import { Injectable } from '@angular/core'
-import {
-  ActivatedRoute,
-  convertToParamMap,
-  ParamMap,
-  Params,
-  Router,
-} from '@angular/router'
+import { ParamMap, Params, Router } from '@angular/router'
 import { FilterRule } from '../data/filter-rule'
 import { FILTER_RULE_TYPES } from '../data/filter-rule-type'
+import { DocumentListViewService } from './document-list-view.service'
+
+const SORT_FIELD_PARAMETER = 'sort'
+const SORT_REVERSE_PARAMETER = 'reverse'
 
 @Injectable({
   providedIn: 'root',
 })
 export class QueryParamsService {
-  constructor(private router: Router, private route: ActivatedRoute) {}
+  constructor(private router: Router, private list: DocumentListViewService) {}
 
-  private filterParams: Params
-  private _filterRules: FilterRule[]
+  private filterParams: Params = {}
+  private sortParams: Params = {}
 
-  set filterRules(filterRules: FilterRule[]) {
-    this._filterRules = filterRules
-    this.filterParams = this.filterRulesToQueryParams(filterRules)
+  updateFilterRules(
+    filterRules: FilterRule[],
+    updateQueryParams: boolean = true
+  ) {
+    this.filterParams = filterRulesToQueryParams(filterRules)
+    if (updateQueryParams) this.updateQueryParams()
   }
 
-  get filterRules(): FilterRule[] {
-    return this._filterRules
+  set sortField(field: string) {
+    this.sortParams[SORT_FIELD_PARAMETER] = field
+    this.updateQueryParams()
   }
 
-  set params(params: any) {
-    this.filterParams = params
-    this._filterRules = this.filterRulesFromQueryParams(
-      params.keys ? params : convertToParamMap(params) // ParamMap
-    )
+  set sortReverse(reverse: boolean) {
+    if (!reverse) this.sortParams[SORT_REVERSE_PARAMETER] = undefined
+    else this.sortParams[SORT_REVERSE_PARAMETER] = reverse
+    this.updateQueryParams()
   }
 
   get params(): Params {
     return {
+      ...this.sortParams,
       ...this.filterParams,
     }
   }
 
-  private filterRulesToQueryParams(filterRules: FilterRule[]): Object {
-    if (filterRules) {
-      let params = {}
-      for (let rule of filterRules) {
-        let ruleType = FILTER_RULE_TYPES.find((t) => t.id == rule.rule_type)
-        if (ruleType.multi) {
-          params[ruleType.filtervar] = params[ruleType.filtervar]
-            ? params[ruleType.filtervar] + ',' + rule.value
-            : rule.value
-        } else if (ruleType.isnull_filtervar && rule.value == null) {
-          params[ruleType.isnull_filtervar] = true
-        } else {
-          params[ruleType.filtervar] = rule.value
-        }
-      }
-      return params
-    } else {
-      return null
+  private updateQueryParams() {
+    // if we were on a saved view we navigate 'away' to /documents
+    let base = []
+    if (this.router.routerState.snapshot.url.includes('/view/'))
+      base = ['/documents']
+
+    this.router.navigate(base, {
+      queryParams: this.params,
+    })
+  }
+
+  public parseQueryParams(queryParams: ParamMap) {
+    let filterRules = filterRulesFromQueryParams(queryParams)
+    if (
+      filterRules.length ||
+      queryParams.has(SORT_FIELD_PARAMETER) ||
+      queryParams.has(SORT_REVERSE_PARAMETER)
+    ) {
+      this.list.filterRules = filterRules
+      this.list.sortField = queryParams.get(SORT_FIELD_PARAMETER)
+      this.list.sortReverse =
+        queryParams.has(SORT_REVERSE_PARAMETER) ||
+        (!queryParams.has(SORT_FIELD_PARAMETER) &&
+          !queryParams.has(SORT_REVERSE_PARAMETER))
+      this.list.reload()
+    } else if (
+      filterRules.length == 0 &&
+      !queryParams.has(SORT_FIELD_PARAMETER)
+    ) {
+      // this is navigating to /documents so we need to update the params from the list
+      this.updateFilterRules(this.list.filterRules, false)
+      this.sortField = this.list.sortField
+      this.sortReverse = this.list.sortReverse
     }
   }
 
-  private filterRulesFromQueryParams(queryParams: ParamMap) {
-    const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map(
-      (rt) => rt.filtervar
-    )
-
-    // transform query params to filter rules
-    let filterRulesFromQueryParams: FilterRule[] = []
-    allFilterRuleQueryParams
-      .filter((frqp) => queryParams.has(frqp))
-      .forEach((filterQueryParamName) => {
-        const filterQueryParamValues: string[] = queryParams
-          .get(filterQueryParamName)
-          .split(',')
-
-        filterRulesFromQueryParams = filterRulesFromQueryParams.concat(
-          // map all values to filter rules
-          filterQueryParamValues.map((val) => {
-            return {
-              rule_type: FILTER_RULE_TYPES.find(
-                (rt) => rt.filtervar == filterQueryParamName
-              ).id,
-              value: val,
-            }
-          })
-        )
-      })
-
-    return filterRulesFromQueryParams
-  }
-
-  loadFilterRules(filterRules: FilterRule[]) {
-    this.filterRules = filterRules
+  navigateWithFilterRules(filterRules: FilterRule[]) {
+    this.updateFilterRules(filterRules)
     this.router.navigate(['/documents'], {
-      relativeTo: this.route,
       queryParams: this.params,
     })
   }
 }
+
+export function filterRulesToQueryParams(filterRules: FilterRule[]): Object {
+  if (filterRules) {
+    let params = {}
+    for (let rule of filterRules) {
+      let ruleType = FILTER_RULE_TYPES.find((t) => t.id == rule.rule_type)
+      if (ruleType.multi) {
+        params[ruleType.filtervar] = params[ruleType.filtervar]
+          ? params[ruleType.filtervar] + ',' + rule.value
+          : rule.value
+      } else if (ruleType.isnull_filtervar && rule.value == null) {
+        params[ruleType.isnull_filtervar] = true
+      } else {
+        params[ruleType.filtervar] = rule.value
+      }
+    }
+    return params
+  } else {
+    return null
+  }
+}
+
+export function filterRulesFromQueryParams(queryParams: ParamMap) {
+  const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map(
+    (rt) => rt.filtervar
+  )
+
+  // transform query params to filter rules
+  let filterRulesFromQueryParams: FilterRule[] = []
+  allFilterRuleQueryParams
+    .filter((frqp) => queryParams.has(frqp))
+    .forEach((filterQueryParamName) => {
+      const filterQueryParamValues: string[] = queryParams
+        .get(filterQueryParamName)
+        .split(',')
+
+      filterRulesFromQueryParams = filterRulesFromQueryParams.concat(
+        // map all values to filter rules
+        filterQueryParamValues.map((val) => {
+          return {
+            rule_type: FILTER_RULE_TYPES.find(
+              (rt) => rt.filtervar == filterQueryParamName
+            ).id,
+            value: val,
+          }
+        })
+      )
+    })
+
+  return filterRulesFromQueryParams
+}

src-ui/src/app/services/rest/document.service.ts

@@ -10,9 +10,8 @@ import { map } from 'rxjs/operators'
 import { CorrespondentService } from './correspondent.service'
 import { DocumentTypeService } from './document-type.service'
 import { TagService } from './tag.service'
-import { FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type'
 import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions'
-import { QueryParamsService } from '../query-params.service'
+import { filterRulesToQueryParams } from '../query-params.service'
 
 export const DOCUMENT_SORT_FIELDS = [
   { field: 'archive_serial_number', name: $localize`ASN` },
@@ -53,8 +52,7 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     http: HttpClient,
     private correspondentService: CorrespondentService,
     private documentTypeService: DocumentTypeService,
-    private tagService: TagService,
-    private queryParamsService: QueryParamsService
+    private tagService: TagService
   ) {
     super(http, 'documents')
   }
@@ -82,13 +80,12 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     filterRules?: FilterRule[],
     extraParams = {}
   ): Observable<Results<PaperlessDocument>> {
-    this.queryParamsService.filterRules = filterRules
     return this.list(
       page,
       pageSize,
       sortField,
       sortReverse,
-      Object.assign(extraParams, this.queryParamsService.params)
+      Object.assign(extraParams, filterRulesToQueryParams(filterRules))
     ).pipe(
       map((results) => {
         results.results.forEach((doc) => this.addObservablesToDocument(doc))