Chore: Paginate the task listing (#12633)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/services/tasks.service.spec.ts

@@ -1,4 +1,8 @@
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpRequest,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
@@ -37,16 +41,21 @@ describe('TasksService', () => {
   it('calls tasks api endpoint on reload', () => {
     tasksService.reload()
     const req = httpTestingController.expectOne(
-      `${environment.apiBaseUrl}tasks/?acknowledged=false`
+      (req: HttpRequest<unknown>) =>
+        req.url === `${environment.apiBaseUrl}tasks/` &&
+        req.params.get('acknowledged') === 'false' &&
+        req.params.get('page_size') === '1000'
     )
     expect(req.request.method).toEqual('GET')
+    req.flush({ count: 0, results: [] })
   })
 
   it('does not call tasks api endpoint on reload if already loading', () => {
     tasksService.loading = true
     tasksService.reload()
     httpTestingController.expectNone(
-      `${environment.apiBaseUrl}tasks/?acknowledged=false`
+      (req: HttpRequest<unknown>) =>
+        req.url === `${environment.apiBaseUrl}tasks/`
     )
   })
 
@@ -62,8 +71,13 @@ describe('TasksService', () => {
     req.flush([])
     // reload is then called
     httpTestingController
-      .expectOne(`${environment.apiBaseUrl}tasks/?acknowledged=false`)
-      .flush([])
+      .expectOne(
+        (req: HttpRequest<unknown>) =>
+          req.url === `${environment.apiBaseUrl}tasks/` &&
+          req.params.get('acknowledged') === 'false' &&
+          req.params.get('page_size') === '1000'
+      )
+      .flush({ count: 0, results: [] })
   })
 
   it('groups mixed task types by status when reloading', () => {
@@ -124,10 +138,13 @@ describe('TasksService', () => {
     tasksService.reload()
 
     const req = httpTestingController.expectOne(
-      `${environment.apiBaseUrl}tasks/?acknowledged=false`
+      (req: HttpRequest<unknown>) =>
+        req.url === `${environment.apiBaseUrl}tasks/` &&
+        req.params.get('acknowledged') === 'false' &&
+        req.params.get('page_size') === '1000'
     )
 
-    req.flush(mockTasks)
+    req.flush({ count: mockTasks.length, results: mockTasks })
 
     expect(tasksService.allFileTasks).toHaveLength(5)
     expect(tasksService.completedFileTasks).toHaveLength(2)
@@ -173,10 +190,13 @@ describe('TasksService', () => {
     tasksService.reload()
 
     const req = httpTestingController.expectOne(
-      `${environment.apiBaseUrl}tasks/?acknowledged=false`
+      (req: HttpRequest<unknown>) =>
+        req.url === `${environment.apiBaseUrl}tasks/` &&
+        req.params.get('acknowledged') === 'false' &&
+        req.params.get('page_size') === '1000'
     )
 
-    req.flush(mockTasks)
+    req.flush({ count: mockTasks.length, results: mockTasks })
 
     expect(tasksService.needsAttentionTasks).toHaveLength(2)
     expect(tasksService.needsAttentionTasks.map((task) => task.status)).toEqual(

src-ui/src/app/services/tasks.service.ts

@@ -1,12 +1,13 @@
 import { HttpClient } from '@angular/common/http'
 import { Injectable, inject } from '@angular/core'
 import { Observable, Subject } from 'rxjs'
-import { first, takeUntil, tap } from 'rxjs/operators'
+import { first, map, takeUntil, tap } from 'rxjs/operators'
 import {
   PaperlessTask,
   PaperlessTaskStatus,
   PaperlessTaskType,
 } from 'src/app/data/paperless-task'
+import { Results } from 'src/app/data/results'
 import { environment } from 'src/environments/environment'
 
 @Injectable({
@@ -17,6 +18,7 @@ export class TasksService {
 
   private baseUrl: string = environment.apiBaseUrl
   private endpoint: string = 'tasks'
+  private readonly defaultReloadPageSize = 1000
 
   public loading: boolean = false
 
@@ -69,9 +71,13 @@ export class TasksService {
     this.loading = true
 
     this.http
-      .get<PaperlessTask[]>(
-        `${this.baseUrl}${this.endpoint}/?acknowledged=false`
-      )
+      .get<Results<PaperlessTask>>(`${this.baseUrl}${this.endpoint}/`, {
+        params: {
+          acknowledged: 'false',
+          page_size: this.defaultReloadPageSize,
+        },
+      })
+      .pipe(map((r) => r.results))
       .pipe(takeUntil(this.unsubscribeNotifer), first())
       .subscribe((r) => {
         this.fileTasks = r
@@ -79,6 +85,23 @@ export class TasksService {
       })
   }
 
+  public list(
+    page: number,
+    pageSize: number,
+    extraParams?: Record<string, string | number | boolean>
+  ): Observable<Results<PaperlessTask>> {
+    return this.http.get<Results<PaperlessTask>>(
+      `${this.baseUrl}${this.endpoint}/`,
+      {
+        params: {
+          page,
+          page_size: pageSize,
+          ...extraParams,
+        },
+      }
+    )
+  }
+
   public dismissTasks(task_ids: Set<number>): Observable<any> {
     return this.http
       .post(`${this.baseUrl}tasks/acknowledge/`, {