mirror of
				https://github.com/paperless-ngx/paperless-ngx.git
				synced 2025-11-03 03:16:10 -06:00 
			
		
		
		
	Merge pull request #372 from paperless-ngx/feature-bottom-pagination
Feature: Add bottom pagination
This commit is contained in:
		@@ -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> <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> <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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user