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 eb322414d..7b11c4d42 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 @@
Filter by:
-
+
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 a6940795e..320322b53 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,14 +1,10 @@
-import { Component, EventEmitter, Input, Output, ElementRef, AfterViewInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
-import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
-import { ObjectWithId } from 'src/app/data/object-with-id';
+import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
import { FilterEditorViewService } from 'src/app/services/filter-editor-view.service'
import { PaperlessTag } from 'src/app/data/paperless-tag';
import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
-import { FilterDropdownDateComponent } from './filter-dropdown-date/filter-dropdown-date.component'
-import { fromEvent } from 'rxjs';
-import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
@Component({
@@ -16,7 +12,7 @@ import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
templateUrl: './filter-editor.component.html',
styleUrls: ['./filter-editor.component.scss']
})
-export class FilterEditorComponent implements AfterViewInit {
+export class FilterEditorComponent implements OnInit, OnDestroy {
constructor() { }
@@ -29,19 +25,32 @@ export class FilterEditorComponent implements AfterViewInit {
@Output()
apply = new EventEmitter()
- @ViewChild('filterTextInput') filterTextInput: ElementRef;
+ get filterText() {
+ return this.filterEditorService.filterText
+ }
- ngAfterViewInit() {
- fromEvent(this.filterTextInput.nativeElement,'keyup').pipe(
- debounceTime(150),
- distinctUntilChanged(),
- tap()
- ).subscribe((event: Event) => {
- this.filterEditorService.filterText = (event.target as HTMLInputElement).value
+ set filterText(value) {
+ this.filterTextDebounce.next(value)
+ }
+
+ filterTextDebounce: Subject
+ subscription: Subscription
+
+ ngOnInit() {
+ this.filterTextDebounce = new Subject()
+ this.subscription = this.filterTextDebounce.pipe(
+ debounceTime(400),
+ distinctUntilChanged()
+ ).subscribe(title => {
+ this.filterEditorService.filterText = title
this.applyFilters()
})
}
+ ngOnDestroy() {
+ this.subscription.unsubscribe()
+ }
+
applyFilters() {
this.apply.next()
}
diff --git a/src-ui/src/app/services/filter-editor-view.service.ts b/src-ui/src/app/services/filter-editor-view.service.ts
index 89f40189c..27d089106 100644
--- a/src-ui/src/app/services/filter-editor-view.service.ts
+++ b/src-ui/src/app/services/filter-editor-view.service.ts
@@ -46,7 +46,9 @@ export class FilterEditorViewService {
set filterText(text: string) {
let filterRules = this.filterRules
let existingRule = filterRules.find(rule => rule.type.id == FILTER_TITLE)
- if (existingRule && existingRule.value == text) {
+ if (existingRule && (!text || text.length == 0)) {
+ filterRules.splice(filterRules.findIndex(rule => rule.type.id == FILTER_TITLE), 1)
+ } else if (existingRule && existingRule.value == text) {
return
} else if (existingRule) {
existingRule.value = text