Merge pull request #540 from paperless-ngx/filtering-query-params

Feature: Filtering query params aka browser navigation for filtering

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

@@ -62,7 +62,7 @@
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="documents" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">
+            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()">
               <svg class="sidebaricon" fill="currentColor">
                 <use xlink:href="assets/bootstrap-icons.svg#files"/>
               </svg>&nbsp;<ng-container i18n>Documents</ng-container>

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

@@ -81,7 +81,10 @@ export class AppFrameComponent {
   search() {
     this.closeMenu()
     this.list.quickFilter([
-      { rule_type: FILTER_FULLTEXT_QUERY, value: this.searchField.value },
+      {
+        rule_type: FILTER_FULLTEXT_QUERY,
+        value: (this.searchField.value as string).trim(),
+      },
     ])
   }
 

src-ui/src/app/components/common/tag/tag.component.html

@@ -1,2 +1,2 @@
 <span *ngIf="!clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
-<a [routerLink]="[]" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>
+<a [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>

src-ui/src/app/components/common/tag/tag.component.scss

@@ -0,0 +1,3 @@
+a {
+    cursor: pointer;
+}

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

@@ -17,7 +17,7 @@
         <div class="d-flex justify-content-between align-items-center">
           <h5 class="card-title">
             <ng-container *ngIf="document.correspondent">
-              <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="[]" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>
+              <a *ngIf="clickCorrespondent.observers.length ; else nolink" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>
               <ng-template #nolink>{{(document.correspondent$ | async)?.name}}</ng-template>:
             </ng-container>
             {{document.title | documentTitle}}

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss

@@ -90,3 +90,7 @@ span ::ng-deep .match {
   color: black;
   background-color: rgb(255, 211, 66);
 }
+
+a {
+  cursor: pointer;
+}

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

@@ -23,7 +23,7 @@
     <div class="card-body p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">
-          <a [routerLink]="[]" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>:
+          <a title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
         {{document.title | documentTitle}}
       </p>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -76,3 +76,7 @@
   text-align: left !important;
   font-size: 90%;
 }
+
+a {
+  cursor: pointer;
+}

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

@@ -163,7 +163,7 @@
         </td>
         <td class="d-none d-md-table-cell">
           <ng-container *ngIf="d.correspondent">
-            <a [routerLink]="[]" (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
+            <a (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
           </ng-container>
         </td>
         <td>
@@ -172,7 +172,7 @@
         </td>
         <td class="d-none d-xl-table-cell">
           <ng-container *ngIf="d.document_type">
-            <a [routerLink]="[]" (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
+            <a (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
           </ng-container>
         </td>
         <td>

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

@@ -53,3 +53,7 @@ $paperless-card-breakpoints: (
     margin-left: 0;
   }
 }
+
+a {
+  cursor: pointer;
+}

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

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   OnDestroy,
   OnInit,
@@ -8,9 +9,20 @@ import {
 } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { Subscription } from 'rxjs'
+import {
+  filter,
+  first,
+  map,
+  Subject,
+  Subscription,
+  switchMap,
+  takeUntil,
+} from 'rxjs'
 import { FilterRule, isFullTextFilterRule } from 'src/app/data/filter-rule'
-import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
+import {
+  FILTER_FULLTEXT_MORELIKE,
+  FILTER_RULE_TYPES,
+} 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 {
@@ -20,6 +32,7 @@ import {
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
+  DocumentService,
   DOCUMENT_SORT_FIELDS,
   DOCUMENT_SORT_FIELDS_FULLTEXT,
 } from 'src/app/services/rest/document.service'
@@ -33,9 +46,10 @@ import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-vi
   templateUrl: './document-list.component.html',
   styleUrls: ['./document-list.component.scss'],
 })
-export class DocumentListComponent implements OnInit, OnDestroy {
+export class DocumentListComponent implements OnInit, OnDestroy, AfterViewInit {
   constructor(
     public list: DocumentListViewService,
+    private documentService: DocumentService,
     public savedViewService: SavedViewService,
     public route: ActivatedRoute,
     private router: Router,
@@ -53,7 +67,7 @@ export class DocumentListComponent implements OnInit, OnDestroy {
 
   unmodifiedFilterRules: FilterRule[] = []
 
-  private consumptionFinishedSubscription: Subscription
+  private unsubscribeNotifier: Subject<any> = new Subject()
 
   get isFiltered() {
     return this.list.filterRules?.length > 0
@@ -85,14 +99,25 @@ export class DocumentListComponent implements OnInit, OnDestroy {
     if (localStorage.getItem('document-list:displayMode') != null) {
       this.displayMode = localStorage.getItem('document-list:displayMode')
     }
-    this.consumptionFinishedSubscription = this.consumerStatusService
+
+    this.consumerStatusService
       .onDocumentConsumptionFinished()
+      .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe(() => {
         this.list.reload()
       })
-    this.route.paramMap.subscribe((params) => {
-      if (params.has('id')) {
-        this.savedViewService.getCached(+params.get('id')).subscribe((view) => {
+
+    this.route.paramMap
+      .pipe(
+        filter((params) => params.has('id')), // only on saved view
+        switchMap((params) => {
+          return this.savedViewService
+            .getCached(+params.get('id'))
+            .pipe(map((view) => ({ params, view })))
+        })
+      )
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(({ view, params }) => {
         if (!view) {
           this.router.navigate(['404'])
           return
@@ -101,18 +126,70 @@ export class DocumentListComponent implements OnInit, OnDestroy {
         this.list.reload()
         this.unmodifiedFilterRules = view.filter_rules
       })
-      } else {
+
+    const allFilterRuleQueryParams: string[] = FILTER_RULE_TYPES.map(
+      (rt) => rt.filtervar
+    )
+
+    this.route.queryParamMap
+      .pipe(
+        filter(() => !this.route.snapshot.paramMap.has('id')), // only when not on saved view
+        takeUntil(this.unsubscribeNotifier)
+      )
+      .subscribe((queryParams) => {
+        // 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,
+                }
+              })
+            )
+          })
+
         this.list.activateSavedView(null)
+        this.list.filterRules = filterRulesFromQueryParams
         this.list.reload()
         this.unmodifiedFilterRules = []
+      })
   }
+
+  ngAfterViewInit(): void {
+    this.filterEditor.filterRulesChange
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (filterRules) => {
+          const params =
+            this.documentService.filterRulesToQueryParams(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: params,
+          })
+        },
       })
   }
 
   ngOnDestroy() {
-    if (this.consumptionFinishedSubscription) {
-      this.consumptionFinishedSubscription.unsubscribe()
-    }
+    // unsubscribes all
+    this.unsubscribeNotifier.next(this)
+    this.unsubscribeNotifier.complete()
   }
 
   loadViewConfig(view: PaperlessSavedView) {
@@ -128,7 +205,10 @@ export class DocumentListComponent implements OnInit, OnDestroy {
         sort_field: this.list.sortField,
         sort_reverse: this.list.sortReverse,
       }
-      this.savedViewService.patch(savedView).subscribe((result) => {
+      this.savedViewService
+        .patch(savedView)
+        .pipe(first())
+        .subscribe((result) => {
           this.toastService.showInfo(
             $localize`View "${this.list.activeSavedViewTitle}" saved successfully.`
           )
@@ -142,7 +222,7 @@ export class DocumentListComponent implements OnInit, OnDestroy {
       backdrop: 'static',
     })
     modal.componentInstance.defaultName = this.filterEditor.generateFilterName()
-    modal.componentInstance.saveClicked.subscribe((formValue) => {
+    modal.componentInstance.saveClicked.pipe(first()).subscribe((formValue) => {
       modal.componentInstance.buttonsEnabled = false
       let savedView: PaperlessSavedView = {
         name: formValue.name,
@@ -153,18 +233,21 @@ export class DocumentListComponent implements OnInit, OnDestroy {
         sort_field: this.list.sortField,
       }
 
-      this.savedViewService.create(savedView).subscribe(
-        () => {
+      this.savedViewService
+        .create(savedView)
+        .pipe(first())
+        .subscribe({
+          next: () => {
             modal.close()
             this.toastService.showInfo(
               $localize`View "${savedView.name}" created successfully.`
             )
           },
-        (error) => {
+          error: (error) => {
             modal.componentInstance.error = error.error
             modal.componentInstance.buttonsEnabled = true
-        }
-      )
+          },
+        })
     })
   }
 

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

@@ -143,8 +143,8 @@ export class DocumentListViewService {
         activeListViewState.sortReverse,
         activeListViewState.filterRules
       )
-      .subscribe(
-        (result) => {
+      .subscribe({
+        next: (result) => {
           this.isReloading = false
           activeListViewState.collectionSize = result.count
           activeListViewState.documents = result.results
@@ -153,7 +153,7 @@ export class DocumentListViewService {
           }
           this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
         },
-        (error) => {
+        error: (error) => {
           this.isReloading = false
           if (activeListViewState.currentPage != 1 && error.status == 404) {
             // this happens when applying a filter: the current page might not be available anymore due to the reduced result set.
@@ -162,8 +162,8 @@ export class DocumentListViewService {
           } else {
             this.error = error.error
           }
-        }
-      )
+        },
+      })
   }
 
   set filterRules(filterRules: FilterRule[]) {
@@ -249,20 +249,11 @@ export class DocumentListViewService {
   }
 
   quickFilter(filterRules: FilterRule[]) {
-    this._activeSavedViewId = null
-    this.activeListViewState.filterRules = filterRules
-    this.activeListViewState.currentPage = 1
-    if (isFullTextFilterRule(filterRules)) {
-      this.activeListViewState.sortField = 'score'
-      this.activeListViewState.sortReverse = false
-    }
-    this.reduceSelectionToFilter()
-    this.saveDocumentListView()
-    if (this.router.url == '/documents') {
-      this.reload()
-    } else {
-      this.router.navigate(['documents'])
-    }
+    const params = this.documentService.filterRulesToQueryParams(filterRules)
+    this.router.navigate(['/documents'], {
+      relativeTo: this.route,
+      queryParams: params,
+    })
   }
 
   getLastPage(): number {

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

@@ -57,7 +57,7 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     super(http, 'documents')
   }
 
-  private filterRulesToQueryParams(filterRules: FilterRule[]) {
+  public filterRulesToQueryParams(filterRules: FilterRule[]): Object {
     if (filterRules) {
       let params = {}
       for (let rule of filterRules) {