From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 29 Oct 2022 07:56:48 +0000 (-0700)
Subject: Support keyboard esc and X button for filter editor text field
X-Git-Tag: v1.10.0-beta.rc1~1^2~28^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a9abffaddcaf78bf79710148b19c0cd7bc3d6935;p=thirdparty%2Fpaperless-ngx.git

Support keyboard esc and X button for filter editor text field
---

diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
index a101d242a6..99004854c4 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
@@ -11,7 +11,12 @@
           <select *ngIf="textFilterTarget == 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
             <option *ngFor="let m of textFilterModifiers" ngbDropdownItem [value]="m.id">{{m.label}}</option>
           </select>
-          <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup.enter)="textFilterEnter()" [readonly]="textFilterTarget == 'fulltext-morelike'">
+          <button *ngIf="_textFilter" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
+            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+            </svg>
+          </button>
+          <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget == 'fulltext-morelike'">
          </div>
      </div>
   </div>
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
index 0e8796b3de..82ad7e7a5a 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
@@ -21,3 +21,7 @@
 input[type="text"] {
   min-width: 120px;
 }
+
+.z-10 {
+  z-index: 10;
+}
diff --git a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
index 14643875fc..44f524149b 100644
--- a/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
+++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
@@ -709,15 +709,23 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
     this.updateRules()
   }
 
-  textFilterEnter() {
-    const filterString = (
-      this.textFilterInput.nativeElement as HTMLInputElement
-    ).value
-    if (filterString.length) {
-      this.updateTextFilter(filterString)
+  textFilterKeyup(event: KeyboardEvent) {
+    if (event.key == 'Enter') {
+      const filterString = (
+        this.textFilterInput.nativeElement as HTMLInputElement
+      ).value
+      if (filterString.length) {
+        this.updateTextFilter(filterString)
+      }
+    } else if (event.key == 'Escape') {
+      this.resetTextField()
     }
   }
 
+  resetTextField() {
+    this.updateTextFilter('')
+  }
+
   changeTextFilterTarget(target) {
     if (
       this.textFilterTarget == TEXT_FILTER_TARGET_FULLTEXT_MORELIKE &&