From 110bd65c206c98838d35ae7c1c6aec9324b06d38 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 8 Aug 2022 00:03:15 -0700
Subject: [PATCH] fix pagination, refactor

---
 .../document-list/document-list.component.html       |  2 +-
 .../document-list/document-list.component.ts         |  4 ----
 .../src/app/services/document-list-view.service.ts   | 12 ++++++------
 src-ui/src/app/utils/query-params.ts                 |  4 ++--
 4 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index 7895c9a52..60c9bcfb9 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index a73c54ad9..fc9ab3ce7 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -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
   }
diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index adff25223..764febb4b 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/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'
 
@@ -151,9 +151,9 @@ export class DocumentListViewService {
     view: PaperlessSavedView,
     queryParams: ParamMap
   ) {
-    let params = parseParams(queryParams)
+    const viewState = paramsToViewState(queryParams)
     this.activateSavedView(view)
-    this.activeListViewState.currentPage = params.currentPage
+    this.currentPage = viewState.currentPage
   }
 
   loadSavedView(view: PaperlessSavedView, closeCurrentView: boolean = false) {
@@ -180,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
@@ -224,11 +224,11 @@ export class DocumentListViewService {
           if (updateQueryParams && !this._activeSavedViewId) {
             let base = ['/documents']
             this.router.navigate(base, {
-              queryParams: generateParams(activeListViewState),
+              queryParams: paramsFromViewState(activeListViewState),
             })
           } else if (this._activeSavedViewId) {
             this.router.navigate([], {
-              queryParams: generateParams(activeListViewState, true),
+              queryParams: paramsFromViewState(activeListViewState, true),
               queryParamsHandling: 'merge',
             })
           }
diff --git a/src-ui/src/app/utils/query-params.ts b/src-ui/src/app/utils/query-params.ts
index 0849fab4b..9694442be 100644
--- a/src-ui/src/app/utils/query-params.ts
+++ b/src-ui/src/app/utils/query-params.ts
@@ -7,7 +7,7 @@ const SORT_FIELD_PARAMETER = 'sort'
 const SORT_REVERSE_PARAMETER = 'reverse'
 const PAGE_PARAMETER = 'page'
 
-export function generateParams(
+export function paramsFromViewState(
   viewState: ListViewState,
   pageOnly: boolean = false
 ): Params {
@@ -22,7 +22,7 @@ export function generateParams(
   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 =