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] 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>