From 01ae5688d7932f32b61f7325e654fb8ff64ba599 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:58:58 -0700
Subject: [PATCH 1/2] Add bottom pagination

---
 .../document-list.component.html              | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 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 e7ee95796..83c787815 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
@@ -80,20 +80,24 @@
   <app-bulk-editor [hidden]="!isBulkEditing"></app-bulk-editor>
 </div>
 
-<div class="d-flex justify-content-between align-items-center">
-  <p>
-    <ng-container *ngIf="list.isReloading">
-      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-      <ng-container i18n>Loading...</ng-container>
-    </ng-container>
-    <span i18n *ngIf="list.selected.size > 0">{list.collectionSize, plural, =1 {Selected {{list.selected.size}} of one document} other {Selected {{list.selected.size}} of {{list.collectionSize || 0}} documents}}</span>
-    <ng-container *ngIf="!list.isReloading">
-      <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" [(page)]="list.currentPage" [maxSize]="5"
-  [rotate]="true" aria-label="Default pagination"></ngb-pagination>
-</div>
+<ng-template #pagination>
+  <div class="d-flex justify-content-between align-items-center">
+    <p>
+      <ng-container *ngIf="list.isReloading">
+        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+        <ng-container i18n>Loading...</ng-container>
+      </ng-container>
+      <span i18n *ngIf="list.selected.size > 0">{list.collectionSize, plural, =1 {Selected {{list.selected.size}} of one document} other {Selected {{list.selected.size}} of {{list.collectionSize || 0}} documents}}</span>
+      <ng-container *ngIf="!list.isReloading">
+        <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" [(page)]="list.currentPage" [maxSize]="5"
+    [rotate]="true" aria-label="Default pagination"></ngb-pagination>
+  </div>
+</ng-template>
+
+<ng-container *ngTemplateOutlet="pagination"></ng-container>
 
 <ng-container *ngIf="list.error ; else documentListNoError">
   <div class="alert alert-danger" role="alert">Error while loading documents: {{list.error}}</div>
@@ -184,6 +188,9 @@
   <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
     <app-document-card-small class="p-0" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)" (clickDocumentType)="clickDocumentType($event)"></app-document-card-small>
   </div>
+  <div *ngIf="list.documents?.length > 15" class="mt-3">
+    <ng-container *ngTemplateOutlet="pagination"></ng-container>
+  </div>
 
 
 </ng-template>

From c87ac6f1ad772fc4c5a97176077055efbaa448ab Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 15 Mar 2022 10:17:19 -0700
Subject: [PATCH 2/2] Add bottom pagination for management lists

---
 .../correspondent-list/correspondent-list.component.html     | 5 +++++
 .../document-type-list/document-type-list.component.html     | 5 +++++
 .../app/components/manage/tag-list/tag-list.component.html   | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
index f0d89b0bc..2b0330583 100644
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html
@@ -52,3 +52,8 @@
     </tr>
     </tbody>
   </table>
+
+  <div class="d-flex">
+    <div i18n *ngIf="collectionSize > 0">{collectionSize, plural, =1 {One correspondent} other {{{collectionSize || 0}} total correspondents}}</div>
+    <ngb-pagination *ngIf="collectionSize > 20" class="ms-auto" [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+  </div>
diff --git a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
index 77e488c55..32a47dcd8 100644
--- a/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
+++ b/src-ui/src/app/components/manage/document-type-list/document-type-list.component.html
@@ -50,3 +50,8 @@
     </tr>
   </tbody>
 </table>
+
+<div class="d-flex">
+  <div i18n *ngIf="collectionSize > 0">{collectionSize, plural, =1 {One document type} other {{{collectionSize || 0}} total document types}}</div>
+  <ngb-pagination *ngIf="collectionSize > 20" class="ms-auto" [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+</div>
diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.html b/src-ui/src/app/components/manage/tag-list/tag-list.component.html
index 3ca89a37f..d51ad7d32 100644
--- a/src-ui/src/app/components/manage/tag-list/tag-list.component.html
+++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.html
@@ -53,3 +53,8 @@
     </tr>
   </tbody>
 </table>
+
+<div class="d-flex">
+  <div i18n *ngIf="collectionSize > 0">{collectionSize, plural, =1 {One tag} other {{{collectionSize || 0}} total tags}}</div>
+  <ngb-pagination *ngIf="collectionSize > 20" class="ms-auto" [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+</div>