Merge pull request #1376 from paperless-ngx/fix/saved-view-page-param

Fix: saved view page parameter

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

@@ -91,7 +91,7 @@
         <span i18n *ngIf="list.selected.size == 0">{list.collectionSize, plural, =1 {One document} other {{{list.collectionSize || 0}} documents}}</span>&nbsp;<span i18n *ngIf="isFiltered">(filtered)</span>
       </ng-container>
     </p>
-    <ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" (pageChange)="setPage($event)" [page]="list.currentPage" [maxSize]="5"
+    <ngb-pagination *ngIf="list.collectionSize" [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
     [rotate]="true" aria-label="Default pagination"></ngb-pagination>
   </div>
 </ng-template>

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

@@ -6,7 +6,7 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, convertToParamMap, Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { filter, first, map, Subject, switchMap, takeUntil } from 'rxjs'
 import { FilterRule, isFullTextFilterRule } from 'src/app/data/filter-rule'
@@ -87,10 +87,6 @@ export class DocumentListComponent implements OnInit, OnDestroy {
     this.list.setSort(event.column, event.reverse)
   }
 
-  setPage(page: number) {
-    this.list.currentPage = page
-  }
-
   get isBulkEditing(): boolean {
     return this.list.selected.size > 0
   }
@@ -126,7 +122,11 @@ export class DocumentListComponent implements OnInit, OnDestroy {
           this.router.navigate(['404'])
           return
         }
-        this.list.activateSavedView(view)
+
+        this.list.activateSavedViewWithQueryParams(
+          view,
+          convertToParamMap(this.route.snapshot.queryParams)
+        )
         this.list.reload()
         this.unmodifiedFilterRules = view.filter_rules
       })
@@ -139,7 +139,13 @@ export class DocumentListComponent implements OnInit, OnDestroy {
       .subscribe((queryParams) => {
         if (queryParams.has('view')) {
           // loading a saved view on /documents
-          this.loadViewConfig(parseInt(queryParams.get('view')))
+          this.savedViewService
+            .getCached(parseInt(queryParams.get('view')))
+            .pipe(first())
+            .subscribe((view) => {
+              this.list.activateSavedView(view)
+              this.list.reload()
+            })
         } else {
           this.list.activateSavedView(null)
           this.list.loadFromQueryParams(queryParams)
@@ -154,16 +160,6 @@ export class DocumentListComponent implements OnInit, OnDestroy {
     this.unsubscribeNotifier.complete()
   }
 
-  loadViewConfig(viewId: number) {
-    this.savedViewService
-      .getCached(viewId)
-      .pipe(first())
-      .subscribe((view) => {
-        this.list.activateSavedView(view)
-        this.list.reload()
-      })
-  }
-
   saveViewConfig() {
     if (this.list.activeSavedViewId != null) {
       let savedView: PaperlessSavedView = {

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

@@ -11,7 +11,7 @@ import { PaperlessDocument } from '../data/paperless-document'
 import { PaperlessSavedView } from '../data/paperless-saved-view'
 import { SETTINGS_KEYS } from '../data/paperless-uisettings'
 import { DOCUMENT_LIST_SERVICE } from '../data/storage-keys'
-import { generateParams, parseParams } from '../utils/query-params'
+import { paramsFromViewState, paramsToViewState } from '../utils/query-params'
 import { DocumentService, DOCUMENT_SORT_FIELDS } from './rest/document.service'
 import { SettingsService } from './settings.service'
 
@@ -147,6 +147,15 @@ export class DocumentListViewService {
     }
   }
 
+  activateSavedViewWithQueryParams(
+    view: PaperlessSavedView,
+    queryParams: ParamMap
+  ) {
+    const viewState = paramsToViewState(queryParams)
+    this.activateSavedView(view)
+    this.currentPage = viewState.currentPage
+  }
+
   loadSavedView(view: PaperlessSavedView, closeCurrentView: boolean = false) {
     if (closeCurrentView) {
       this._activeSavedViewId = null
@@ -171,7 +180,7 @@ export class DocumentListViewService {
   loadFromQueryParams(queryParams: ParamMap) {
     const paramsEmpty: boolean = queryParams.keys.length == 0
     let newState: ListViewState = this.listViewStates.get(null)
-    if (!paramsEmpty) newState = parseParams(queryParams)
+    if (!paramsEmpty) newState = paramsToViewState(queryParams)
     if (newState == undefined) newState = this.defaultListViewState() // if nothing in local storage
 
     // only reload if things have changed
@@ -212,11 +221,16 @@ export class DocumentListViewService {
           this.isReloading = false
           activeListViewState.collectionSize = result.count
           activeListViewState.documents = result.results
-
           if (updateQueryParams && !this._activeSavedViewId) {
             let base = ['/documents']
             this.router.navigate(base, {
-              queryParams: generateParams(activeListViewState),
+              queryParams: paramsFromViewState(activeListViewState),
+              replaceUrl: !this.router.routerState.snapshot.url.includes('?'), // in case navigating from params-less /documents
+            })
+          } else if (this._activeSavedViewId) {
+            this.router.navigate([], {
+              queryParams: paramsFromViewState(activeListViewState, true),
+              queryParamsHandling: 'merge',
             })
           }
 
@@ -305,7 +319,6 @@ export class DocumentListViewService {
 
   set currentPage(page: number) {
     if (this.activeListViewState.currentPage == page) return
-    this._activeSavedViewId = null
     this.activeListViewState.currentPage = page
     this.reload()
     this.saveDocumentListView()

src-ui/src/app/utils/query-params.ts

@@ -7,17 +7,22 @@ const SORT_FIELD_PARAMETER = 'sort'
 const SORT_REVERSE_PARAMETER = 'reverse'
 const PAGE_PARAMETER = 'page'
 
-export function generateParams(viewState: ListViewState): Params {
+export function paramsFromViewState(
+  viewState: ListViewState,
+  pageOnly: boolean = false
+): Params {
   let params = queryParamsFromFilterRules(viewState.filterRules)
   params[SORT_FIELD_PARAMETER] = viewState.sortField
   params[SORT_REVERSE_PARAMETER] = viewState.sortReverse ? 1 : undefined
+  if (pageOnly) params = {}
   params[PAGE_PARAMETER] = isNaN(viewState.currentPage)
     ? 1
     : viewState.currentPage
+  if (pageOnly && viewState.currentPage == 1) params[PAGE_PARAMETER] = null
   return params
 }
 
-export function parseParams(queryParams: ParamMap): ListViewState {
+export function paramsToViewState(queryParams: ParamMap): ListViewState {
   let filterRules = filterRulesFromQueryParams(queryParams)
   let sortField = queryParams.get(SORT_FIELD_PARAMETER)
   let sortReverse =