From 65fa6cc5423b53495ae9451d387d08aa60ea66f8 Mon Sep 17 00:00:00 2001
From: Jonas Winkler <jonas.winkler@jpwinkler.de>
Date: Mon, 2 Nov 2020 12:25:02 +0100
Subject: [PATCH] infinite scroll for search results

---
 .../document-card-large.component.ts          |  2 -
 .../result-hightlight.component.ts            |  4 +-
 .../components/search/search.component.html   | 13 +++----
 .../app/components/search/search.component.ts | 39 ++++++++++++++++---
 src-ui/src/app/data/search-result.ts          | 27 +++++++++++++
 .../src/app/services/rest/search.service.ts   | 28 ++++---------
 6 files changed, 75 insertions(+), 38 deletions(-)
 create mode 100644 src-ui/src/app/data/search-result.ts

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
index 0f3aa69ea..c05b1f039 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/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',
diff --git a/src-ui/src/app/components/search/result-hightlight/result-hightlight.component.ts b/src-ui/src/app/components/search/result-hightlight/result-hightlight.component.ts
index 5ce5ef607..0f20c93cc 100644
--- a/src-ui/src/app/components/search/result-hightlight/result-hightlight.component.ts
+++ b/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 {
   }
diff --git a/src-ui/src/app/components/search/search.component.html b/src-ui/src/app/components/search/search.component.html
index 7fce4a85f..59c24fa04 100644
--- a/src-ui/src/app/components/search/search.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src-ui/src/app/components/search/search.component.ts b/src-ui/src/app/components/search/search.component.ts
index 33e0cd7da..bd15611c6 100644
--- a/src-ui/src/app/components/search/search.component.ts
+++ b/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)
+    }
+  }
+
 }
diff --git a/src-ui/src/app/data/search-result.ts b/src-ui/src/app/data/search-result.ts
new file mode 100644
index 000000000..b22dc64af
--- /dev/null
+++ b/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[]
+
+
+}
\ No newline at end of file
diff --git a/src-ui/src/app/services/rest/search.service.ts b/src-ui/src/app/services/rest/search.service.ts
index a9065bc7c..2da5f9a08 100644
--- a/src-ui/src/app/services/rest/search.service.ts
+++ b/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[]> {
-    return this.http.get<SearchResult[]>(`${environment.apiBaseUrl}search/`, {params: new HttpParams().set('query', query)})
+  search(query: string, page?: number): Observable<SearchResult> {
+    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[]> {