From a37796d0cf7caf1f5f53727521d057188f768b25 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 11 Dec 2020 01:40:42 -0800
Subject: [PATCH] Allow enter key to toggle items in filtered list if single
 item remains

---
 src-ui/src/app/app.module.ts                           |  3 ++-
 .../filter-dropdown/filter-dropdown.component.html     |  6 +++---
 .../filter-dropdown/filter-dropdown.component.ts       | 10 ++++++++--
 .../filter-editor/filter-editor.component.ts           |  3 ---
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 394e3ba58..4c24123e6 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -112,7 +112,8 @@ import { FilterPipe } from './pipes/filter.pipe';
       provide: HTTP_INTERCEPTORS,
       useClass: CsrfInterceptor,
       multi: true
-    }
+    },
+    FilterPipe
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
index 6e73b31a7..b43826fb2 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
@@ -2,9 +2,9 @@
   <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
   <div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="listFilterText" placeholder="Filter {{title}}" #listFilterTextInput>
-      <ng-container *ngIf="(items | filter: listFilterText).length > 0">
-        <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: listFilterText; let i = index" (click)="toggleItem(item)">
+      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
+      <ng-container *ngIf="(items | filter: filterText).length > 0">
+        <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: filterText; let i = index" (click)="toggleItem(item)">
           <div class="selected-icon mr-1">
             <svg *ngIf="itemsActive.includes(item)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
index a57543424..6f346d4b3 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
 import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { ObjectWithId } from 'src/app/data/object-with-id';
+import { FilterPipe } from  'src/app/pipes/filter.pipe';
 
 @Component({
   selector: 'app-filter-dropdown',
@@ -9,7 +10,7 @@ import { ObjectWithId } from 'src/app/data/object-with-id';
 })
 export class FilterDropdownComponent implements OnInit {
 
-  constructor() { }
+  constructor(private filterPipe: FilterPipe) { }
 
   @Input()
   filterRuleTypeID: number
@@ -22,7 +23,7 @@ export class FilterDropdownComponent implements OnInit {
   items: ObjectWithId[] = []
   itemsActive: ObjectWithId[] = []
   title: string
-  listFilterText: string
+  filterText: string
   display: string
 
   ngOnInit(): void {
@@ -44,4 +45,9 @@ export class FilterDropdownComponent implements OnInit {
       this.filterText = ''
     }
   }
+
+  listFilterEnter(): void {
+    let filtered = this.filterPipe.transform(this.items, this.filterText)
+    if (filtered.length == 1) this.toggleItem(filtered.shift())
+  }
 }
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 f3d77d44b..93a91473f 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
@@ -42,9 +42,6 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
   documentTypes: PaperlessDocumentType[] = []
 
   filterText: string
-  filterTagsText: string
-  filterCorrespondentsText: string
-  filterDocumentTypesText: string
 
   ngOnInit(): void {
     this.updateTextFilterInput()