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">
-<app-document-card-large *ngFor="let result of results"
-    [document]="result.document"
-    [details]="result.highlights">
+<div [class.result-content-searching]="searching" infiniteScroll (scrolled)="onScroll()">
+    <p>{{resultCount}} result(s)</p>
+    <app-document-card-large *ngFor="let result of results"
+        [document]="result.document"
+        [details]="result.highlights">
 
 </app-document-card-large>
-</div>
-
-<p *ngIf="results.length == 0" class="mx-auto">No results</p>
+</div>

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.results = result
-        this.searching = false
-      })
+      this.currentPage = 1
+      this.loadPage()
     })
     
   }
 
+  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)
+    }
+  }
+
 }