adjustable page size fixes #8

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

@@ -73,7 +73,7 @@
   </div>
 </div>
 
-<ngb-pagination [pageSize]="25" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
+<ngb-pagination [pageSize]="docs.currentPageSize" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
   [rotate]="true" [boundaryLinks]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
 
 <div *ngIf="displayMode == 'largeCards'">

src-ui/src/app/components/filter-editor/filter-editor.component.html

@@ -1,8 +1,5 @@
 <div *ngFor="let rule of filterRules" class="form-row form-group">
   <div class="col-md-3 col-form-label">
-    <!-- <select class="form-control form-control-sm" [(ngModel)]="rule.type" (change)="rule.value = null">
-      <option *ngFor="let ruleType of getRuleTypes()" [ngValue]="ruleType">{{ruleType.name}}</option>
-    </select> -->
     <span>{{rule.type.name}}</span>
   </div>
   <div class="col">

src-ui/src/app/components/manage/settings/settings.component.html

@@ -3,37 +3,61 @@
 </app-page-header>
 
 <!-- <p>items per page, documents per view type</p> -->
-<ul ngbNav #nav="ngbNav" class="nav-tabs">
+<form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
-  <li [ngbNavItem]="1">
-    <a ngbNavLink>Document List Settings</a>
-    <ng-template ngbNavContent>
-    </ng-template>
-  </li>
-  <li [ngbNavItem]="2">
-    <a ngbNavLink>Saved views</a>
-    <ng-template ngbNavContent>
 
-      <table class="table table-striped">
+  <ul ngbNav #nav="ngbNav" class="nav-tabs">
-        <thead>
+    <li [ngbNavItem]="1">
-        <tr>
+      <a ngbNavLink>General settings</a>
-          <th scope="col">Title</th>
+      <ng-template ngbNavContent>
-          <th scope="col">Show in dashboard</th>
-          <th scope="col">Show in sidebar</th>
-          <th scope="col">Actions</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let config of savedViewConfigService.getConfigs()">
-          <td>{{ config.title }}</td>
-          <td>{{ config.showInDashboard }}</td>
-          <td>{{ config.showInSideBar }}</td>
-          <td><button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteViewConfig(config)">Delete</button></td>
-        </tr>
-        </tbody>
-      </table>
 
-    </ng-template>
+        <h4>Document list</h4>
-  </li>
+        
-</ul>
+        <div class="form-row form-group">
+          <div class="col-md-3 col-form-label">
+            <span>Items per page</span>
+          </div>
+          <div class="col">
+        
+            <select class="form-control" formControlName="documentListItemPerPage">
+              <option [ngValue]="10">10</option>
+              <option [ngValue]="25">25</option>
+              <option [ngValue]="50">50</option>
+              <option [ngValue]="100">100</option>
+            </select>
+        
+          </div>
+        </div>
 
-<div [ngbNavOutlet]="nav" class="mt-2"></div>
+      </ng-template>
+    </li>
+    <li [ngbNavItem]="2">
+      <a ngbNavLink>Saved views</a>
+      <ng-template ngbNavContent>
+
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th scope="col">Title</th>
+              <th scope="col">Show in dashboard</th>
+              <th scope="col">Show in sidebar</th>
+              <th scope="col">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let config of savedViewConfigService.getConfigs()">
+              <td>{{ config.title }}</td>
+              <td>{{ config.showInDashboard }}</td>
+              <td>{{ config.showInSideBar }}</td>
+              <td><button type="button" class="btn btn-sm btn-outline-danger" (click)="deleteViewConfig(config)">Delete</button></td>
+            </tr>
+          </tbody>
+        </table>
+
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+  <button type="submit" class="btn btn-primary">Save</button>
+</form>

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { SavedViewConfig } from 'src/app/data/saved-view-config';
+import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { SavedViewConfigService } from 'src/app/services/saved-view-config.service';
 
 @Component({
@@ -9,11 +12,14 @@ import { SavedViewConfigService } from 'src/app/services/saved-view-config.servi
 })
 export class SettingsComponent implements OnInit {
 
-  constructor(
+  settingsForm = new FormGroup({
-    private savedViewConfigService: SavedViewConfigService
+    'documentListItemPerPage': new FormControl(+localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT)
-  ) { }
+  })
 
-  active
+  constructor(
+    private savedViewConfigService: SavedViewConfigService,
+    private documentListViewService: DocumentListViewService
+  ) { }
 
   ngOnInit(): void {
   }
@@ -22,4 +28,8 @@ export class SettingsComponent implements OnInit {
     this.savedViewConfigService.deleteConfig(config)
   }
 
+  saveSettings() {
+    localStorage.setItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE, this.settingsForm.value.documentListItemPerPage)
+    this.documentListViewService.updatePageSize()
+  }
 }

src-ui/src/app/data/storage-keys.ts

@@ -1,3 +1,8 @@
 export const OPEN_DOCUMENT_SERVICE = {
   DOCUMENTS: 'open-documents-service:openDocuments'
+}
+
+export const GENERAL_SETTINGS = {
+  DOCUMENT_LIST_SIZE: 'general-settings:documentListSize',
+  DOCUMENT_LIST_SIZE_DEFAULT: 50
 }

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

@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 import { cloneFilterRules, FilterRule } from '../data/filter-rule';
 import { PaperlessDocument } from '../data/paperless-document';
 import { SavedViewConfig } from '../data/saved-view-config';
+import { GENERAL_SETTINGS } from '../data/storage-keys';
 import { DocumentService, SORT_DIRECTION_DESCENDING } from './rest/document.service';
 
 
@@ -15,6 +16,7 @@ export class DocumentListViewService {
 
   documents: PaperlessDocument[] = []
   currentPage = 1
+  currentPageSize: number = +localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT
   collectionSize: number
 
   currentFilterRules: FilterRule[] = []
@@ -39,7 +41,7 @@ export class DocumentListViewService {
 
     this.documentService.list(
       this.currentPage,
-      null,
+      this.currentPageSize,
       sortField,
       sortDirection,
       filterRules).subscribe(
@@ -64,7 +66,7 @@ export class DocumentListViewService {
   }
 
   getLastPage(): number {
-    return Math.ceil(this.collectionSize / 25)
+    return Math.ceil(this.collectionSize / this.currentPageSize)
   }
 
   hasNext(doc: number) {
@@ -98,5 +100,13 @@ export class DocumentListViewService {
     })
   }
 
+  updatePageSize() {
+    let newPageSize = +localStorage.getItem(GENERAL_SETTINGS.DOCUMENT_LIST_SIZE) || GENERAL_SETTINGS.DOCUMENT_LIST_SIZE_DEFAULT
+    if (newPageSize != this.currentPageSize) {
+      this.currentPageSize = newPageSize
+      //this.reload()
+    }
+  }
+
   constructor(private documentService: DocumentService) { }
 }