infinite scroll for search results

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -1,9 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
-import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { SearchResultHighlightedText } from 'src/app/services/rest/search.service';
 
 @Component({
   selector: 'app-document-card-large',

src-ui/src/app/components/search/result-hightlight/result-hightlight.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { SearchResultHighlightedText } from 'src/app/services/rest/search.service';
+import { SearchHitHighlight } from 'src/app/data/search-result';
 
 @Component({
   selector: 'app-result-hightlight',
@@ -11,7 +11,7 @@ export class ResultHightlightComponent implements OnInit {
   constructor() { }
 
   @Input()
-  highlights: SearchResultHighlightedText[][]
+  highlights: SearchHitHighlight[][]
 
   ngOnInit(): void {
   }

src-ui/src/app/components/search/search.component.html

@@ -3,12 +3,11 @@
 
 <p>Search string: <i>{{query}}</i></p>
 
-<div [class.result-content-searching]="searching">
+<div [class.result-content-searching]="searching" infiniteScroll (scrolled)="onScroll()">
-<app-document-card-large *ngFor="let result of results"
+    <p>{{resultCount}} result(s)</p>
-    [document]="result.document"
+    <app-document-card-large *ngFor="let result of results"
-    [details]="result.highlights">
+        [document]="result.document"
+        [details]="result.highlights">
 
 </app-document-card-large>
 </div>
-
-<p *ngIf="results.length == 0" class="mx-auto">No results</p>

src-ui/src/app/components/search/search.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { SearchResult, SearchService } from 'src/app/services/rest/search.service';
+import { SearchHit } from 'src/app/data/search-result';
+import { SearchService } from 'src/app/services/rest/search.service';
 
 @Component({
   selector: 'app-search',
@@ -9,24 +10,50 @@ import { SearchResult, SearchService } from 'src/app/services/rest/search.servic
 })
 export class SearchComponent implements OnInit {
   
-  results: SearchResult[] = []
+  results: SearchHit[] = []
 
   query: string = ""
 
   searching = false
 
+  currentPage = 1
+
+  pageCount = 1
+
+  resultCount
+
   constructor(private searchService: SearchService, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(paramMap => {
       this.query = paramMap.get('query')
       this.searching = true
-      this.searchService.search(this.query).subscribe(result => {
+      this.currentPage = 1
-        this.results = result
+      this.loadPage()
-        this.searching = false
-      })
     })
     
   }
 
+  loadPage(append: boolean = false) {
+    this.searchService.search(this.query, this.currentPage).subscribe(result => {
+      if (append) {
+        this.results.push(...result.results)
+      } else {
+        this.results = result.results
+      }
+      this.pageCount = result.page_count
+      this.searching = false
+      this.resultCount = result.count
+    })
+  }
+
+  onScroll() {
+    console.log(this.currentPage)
+    console.log(this.pageCount)
+    if (this.currentPage < this.pageCount) {
+      this.currentPage += 1
+      this.loadPage(true)
+    }
+  }
+
 }

src-ui/src/app/data/search-result.ts

@@ -0,0 +1,27 @@
+import { PaperlessDocument } from './paperless-document'
+
+export class SearchHitHighlight {
+  text?: string
+  term?: number
+}
+
+export interface SearchHit {
+  id?: number
+  title?: string
+  score?: number
+  rank?: number
+
+  highlights?: SearchHitHighlight[][]
+  document?: PaperlessDocument
+}
+
+export interface SearchResult {
+
+  count?: number
+  page?: number
+  page_count?: number
+
+  results?: SearchHit[]
+
+
+}

src-ui/src/app/services/rest/search.service.ts

@@ -2,27 +2,9 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
+import { SearchResult } from 'src/app/data/search-result';
 import { environment } from 'src/environments/environment';
 
-export class SearchResultHighlightedText {
-  text?: string
-  term?: number
-
-  toString(): string {
-    return this.text
-  }
-}
-
-export class SearchResult {
-  id?: number
-  title?: string
-  content?: string
-
-  score?: number
-  highlights?: SearchResultHighlightedText[][]
-
-  document?: PaperlessDocument
-}
 
 @Injectable({
   providedIn: 'root'
@@ -31,8 +13,12 @@ export class SearchService {
   
   constructor(private http: HttpClient) { }
 
-  search(query: string): Observable<SearchResult[]> {
+  search(query: string, page?: number): Observable<SearchResult> {
-    return this.http.get<SearchResult[]>(`${environment.apiBaseUrl}search/`, {params: new HttpParams().set('query', query)})
+    let httpParams = new HttpParams().set('query', query)
+    if (page) {
+      httpParams = httpParams.set('page', page.toString())
+    }
+    return this.http.get<SearchResult>(`${environment.apiBaseUrl}search/`, {params: httpParams})
   }
 
   autocomplete(term: string): Observable<string[]> {