From 25e1177198eb6d62c3af0b0b2d7edea16c4432b5 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 10 Dec 2020 01:42:40 -0800
Subject: [PATCH] Title filtering

---
 .../document-list/document-list.component.ts  |  2 -
 .../filter-editor.component.html              |  2 +-
 .../filter-editor/filter-editor.component.ts  | 48 +++++++++++++++++--
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 3fb933fb7..3ce00beab 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -67,8 +67,6 @@ export class DocumentListComponent implements OnInit {
   }
 
   applyFilterRules() {
-    console.log('applyFilterRules');
-
     this.list.filterRules = this.filterRules
   }
 
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/filter-editor/filter-editor.component.html
index 756110d13..586e23a98 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.html
@@ -3,7 +3,7 @@
     <div class="text-muted mt-1">Filter by:</div>
   </div>
   <div class="col">
-    <input class="form-control form-control-sm" type="text" placeholder="Title / content">
+    <input class="form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Title" #filterTextInput>
   </div>
 
   <div class="btn-group col-auto" ngbDropdown role="group">
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
index f4dc7162b..e470a8400 100644
--- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-editor.component.ts
@@ -1,20 +1,21 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
 import { FilterRule } from 'src/app/data/filter-rule';
-import { FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
+import { FILTER_CORRESPONDENT, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_TITLE, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { TagService } from 'src/app/services/rest/tag.service';
-
+import { fromEvent } from 'rxjs';
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-filter-editor',
   templateUrl: './filter-editor.component.html',
   styleUrls: ['./filter-editor.component.scss']
 })
-export class FilterEditorComponent implements OnInit {
+export class FilterEditorComponent implements OnInit, AfterViewInit {
 
   constructor(private documentTypeService: DocumentTypeService, private tagService: TagService, private correspondentService: CorrespondentService) { }
 
@@ -27,10 +28,13 @@ export class FilterEditorComponent implements OnInit {
   @Output()
   apply = new EventEmitter()
 
+  @ViewChild('filterTextInput') input: ElementRef;
+
   correspondents: PaperlessCorrespondent[] = []
   tags: PaperlessTag[] = []
   documentTypes: PaperlessDocumentType[] = []
 
+  filterText: string
   filterTagsText: string
   filterCorrespondentsText: string
   filterDocumentTypesText: string
@@ -41,6 +45,7 @@ export class FilterEditorComponent implements OnInit {
 
   clearSelected() {
     this.filterRules.splice(0,this.filterRules.length)
+    this.updateTextFilterInput()
     this.clear.next()
   }
 
@@ -52,12 +57,47 @@ export class FilterEditorComponent implements OnInit {
     this.correspondentService.listAll().subscribe(result => {this.correspondents = result.results})
     this.tagService.listAll().subscribe(result => this.tags = result.results)
     this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results)
+    this.updateTextFilterInput()
+  }
+
+  ngAfterViewInit() {
+    fromEvent(this.input.nativeElement,'keyup')
+        .pipe(
+            debounceTime(150),
+            distinctUntilChanged(),
+            tap()
+        )
+        .subscribe(event => {
+          this.filterText = event.target.value
+          this.onTextFilterInput()
+        });
   }
 
   findRuleIndex(type_id: number, value: any) {
     return this.filterRules.findIndex(rule => rule.type.id == type_id && rule.value == value)
   }
 
+  updateTextFilterInput() {
+    let existingTextRule = this.filterRules.find(rule => rule.type.id == FILTER_TITLE)
+    if (existingTextRule) this.filterText = existingTextRule.value
+    else this.filterText = ''
+  }
+
+  onTextFilterInput(event) {
+    let text = this.filterText
+    let filterRules = this.filterRules
+    let existingRule = filterRules.find(rule => rule.type.id == FILTER_TITLE)
+    if (existingRule && existingRule.value == text) {
+      return
+    } else if (existingRule) {
+      existingRule.value = text
+    } else {
+      filterRules.push({type: FILTER_RULE_TYPES.find(t => t.id == FILTER_TITLE), value: text})
+    }
+    this.filterRules = filterRules
+    this.applySelected()
+  }
+
   toggleFilterByTag(tag_id: number) {
     let existingRuleIndex = this.findRuleIndex(FILTER_HAS_TAG, tag_id)
     let filterRules = this.filterRules