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 a101d242a62c24a71a1ad237e53f2cc00aa92d7c..99004854c41fd0cdb56be03dedb2d067da653a13 100644 (file)
--- 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 0e8796b3dea8018f1018ca817d6849da59bef23d..82ad7e7a5a620c7b34239165ebe0da029d659809 100644 (file)
--- 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 14643875fce6730d254f398d5841fb8170e7ff75..44f524149bc73f69080491136546baa27505f2b4 100644 (file)
--- 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 &&