From fb0ad94a9c8cee742965359bf5c1def5f65bdb13 Mon Sep 17 00:00:00 2001
From: Jonas Winkler <jonas.winkler@jpwinkler.de>
Date: Tue, 27 Oct 2020 17:05:14 +0100
Subject: [PATCH] added autocomplete

---
 .../app-frame/app-frame.component.html        |  2 +-
 .../app-frame/app-frame.component.ts          | 37 +++++++++++++++++--
 .../document-card-large.component.html        |  4 +-
 .../rest/abstract-paperless-service.ts        |  6 +--
 .../src/app/services/rest/search.service.ts   |  4 ++
 5 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 0d790342a..86471194b 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -6,7 +6,7 @@
   </button>
   <form (ngSubmit)="search()" class="w-100">
     <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search"
-      [formControl]="searchField">
+      [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (selectItem)="itemSelected($event)">
   </form>
   <ul class="navbar-nav px-3">
     <li class="nav-item text-nowrap">
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts
index f8c9750e0..33a13b384 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { from, Observable, of, scheduled, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { AuthService } from 'src/app/services/auth.service';
 import { OpenDocumentsService } from 'src/app/services/open-documents.service';
-
+import { SearchService } from 'src/app/services/rest/search.service';
+  
 @Component({
   selector: 'app-app-frame',
   templateUrl: './app-frame.component.html',
@@ -13,7 +15,7 @@ import { OpenDocumentsService } from 'src/app/services/open-documents.service';
 })
 export class AppFrameComponent implements OnInit, OnDestroy {
 
-  constructor (public router: Router, private openDocumentsService: OpenDocumentsService, private authService: AuthService) {
+  constructor (public router: Router, private openDocumentsService: OpenDocumentsService, private authService: AuthService, private searchService: SearchService) {
   }
 
   searchField = new FormControl('')
@@ -22,6 +24,35 @@ export class AppFrameComponent implements OnInit, OnDestroy {
 
   openDocumentsSubscription: Subscription
 
+  searchAutoComplete = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map(term => {
+        if (term.lastIndexOf(' ') != -1) {
+          return term.substring(term.lastIndexOf(' ') + 1)
+        } else {
+          return term
+        }
+      }),
+      switchMap(term =>
+        term.length < 2 ? from([[]]) : this.searchService.autocomplete(term)
+      )
+    )
+  
+  itemSelected(event) {
+    event.preventDefault()
+    let currentSearch: string = this.searchField.value
+    let lastSpaceIndex = currentSearch.lastIndexOf(' ')
+    if (lastSpaceIndex != -1) {
+      currentSearch = currentSearch.substring(0, lastSpaceIndex + 1)
+      currentSearch += event.item + " "
+    } else {
+      currentSearch = event.item + " "
+    }
+    this.searchField.patchValue(currentSearch)
+  }
+
   search() {
     this.router.navigate(['search'], {queryParams: {query: this.searchField.value}})
   }
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 385e58ba0..c7ac24f17 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -8,8 +8,8 @@
 
         <h5 class="card-title">{{document.title}}<app-tag [tag]="t" *ngFor="let t of document.tags" class="ml-1"></app-tag></h5>
         <p class="card-text">
-          <app-result-hightlight *ngIf="getDetailsAsHighlight()" class="result-content" [highlights]="getDetailHighlight()"></app-result-hightlight>
-          <span *ngIf="getDetailsAsString()" class="result-content">{{getDetailsString()}}</span>
+          <app-result-hightlight *ngIf="getDetailsAsHighlight()" class="result-content" [highlights]="getDetailsAsHighlight()"></app-result-hightlight>
+          <span *ngIf="getDetailsAsString()" class="result-content">{{getDetailsAsString()}}</span>
         </p>
 
 
diff --git a/src-ui/src/app/services/rest/abstract-paperless-service.ts b/src-ui/src/app/services/rest/abstract-paperless-service.ts
index a6dd4f88c..9ee07d31a 100644
--- a/src-ui/src/app/services/rest/abstract-paperless-service.ts
+++ b/src-ui/src/app/services/rest/abstract-paperless-service.ts
@@ -14,9 +14,9 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
     let url = `${this.baseUrl}${this.resourceName}/`
     if (id) {
       url += `${id}/`
-      if (action) {
-        url += `${action}/`
-      }
+    }
+    if (action) {
+      url += `${action}/`
     }
     return url
   }
diff --git a/src-ui/src/app/services/rest/search.service.ts b/src-ui/src/app/services/rest/search.service.ts
index ad88b7b6a..a9065bc7c 100644
--- a/src-ui/src/app/services/rest/search.service.ts
+++ b/src-ui/src/app/services/rest/search.service.ts
@@ -34,4 +34,8 @@ export class SearchService {
   search(query: string): Observable<SearchResult[]> {
     return this.http.get<SearchResult[]>(`${environment.apiBaseUrl}search/`, {params: new HttpParams().set('query', query)})
   }
+
+  autocomplete(term: string): Observable<string[]> {
+    return this.http.get<string[]>(`${environment.apiBaseUrl}search/autocomplete/`, {params: new HttpParams().set('term', term)})
+  }
 }