fix(admin-ui): Improve keyboard controls for data table filters

vendure-ecommerce · Jun 30, 2023 · 00f0155 · 00f0155
1 parent f5dfc2f
commit 00f0155
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/...i/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.html b/...i/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.html
@@ -5,7 +5,7 @@
             <clr-icon shape="times" size="12"></clr-icon>
         </button>
         <button vdrDropdownTrigger class="">
-            <span *ngIf="state === 'new'">{{ 'common.add-filter' | translate }}</span>
+            <span *ngIf="state === 'new'">{{ 'common.add-filter' | translate }} <span class="filter-hotkey">f</span></span>
             <span *ngIf="state === 'active'">
                 <vdr-data-table-filter-label
                     [filterWithValue]="filterWithValue"
@@ -30,7 +30,7 @@
         <div class="mx-2 mt-1">
             <div vdrCustomFilterComponentHost #customComponentHost></div>
         </div>
-        <div *ngIf="selectedFilter" class="">
+        <form *ngIf="selectedFilter" class="" [cdkTrapFocus]="true" [cdkTrapFocusAutoCapture]="true">
             <ng-container *ngIf="selectedFilter.type.kind !== 'custom'">
                 <div class="mx-2 mt-1" [ngSwitch]="selectedFilter.type.kind">
                     <div *ngSwitchCase="'select'" [formGroup]="formControl">
@@ -104,6 +104,6 @@
                     <clr-icon shape="check"></clr-icon>
                 </button>
             </div>
-        </div>
+        </form>
     </vdr-dropdown-menu>
 </vdr-dropdown>
diff --git a/...i/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.scss b/...i/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.scss
@@ -13,6 +13,7 @@
     border-radius: var(--border-radius-lg);
     background-color: var(--color-button-small-bg);
     color: var(--color-button-small-text);
+
     > button {
         border: none;
         gap: 12px;
@@ -24,13 +25,16 @@
         border-radius: var(--border-radius-lg);
         color: var(--color-button-small-text);
     }
+
     &.active {
         background-color: var(--color-primary-700);
         color: var(--color-primary-100);
+
         > button {
             color: var(--color-primary-100);
         }
     }
+
     button.remove {
     }
 }
@@ -48,8 +52,20 @@ label {
     color: var(--color-weight-600);
     margin: 0 calc(var(--space-unit) * 2);
 }
+
 .apply-wrapper {
     display: flex;
     justify-content: flex-end;
-    padding-right : calc(var(--space-unit) * 2);
+    padding-right: calc(var(--space-unit) * 2);
+}
+
+.filter-hotkey {
+    font-size: var(--font-size-xs);
+    color: var(--color-weight-500);
+    border: 1px solid var(--color-weight-200);
+    background-color: var(--color-weight-100);
+    border-radius: var(--border-radius);
+    padding: 0 3px;
+    text-transform: uppercase;
+    margin-inline-start: 3px;
 }
diff --git a/...-ui/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.ts b/...-ui/src/lib/core/src/shared/components/data-table-filters/data-table-filters.component.ts
@@ -4,6 +4,7 @@ import {
     ChangeDetectorRef,
     Component,
     ComponentRef,
+    HostListener,
     Input,
     ViewChild,
 } from '@angular/core';
@@ -40,6 +41,13 @@ export class DataTableFiltersComponent implements AfterViewInit {
     protected selectedFilter: DataTableFilter | undefined;
     protected customComponent?: ComponentRef<FormInputComponent>;
 
+    @HostListener('window:keydown.f', ['$event'])
+    onFKeyPress(event: KeyboardEvent) {
+        if (!this.dropdown.isOpen && this.state === 'new') {
+            this.dropdown.toggleOpen();
+        }
+    }
+
     constructor(private i18nService: I18nService, private changeDetectorRef: ChangeDetectorRef) {}
 
     ngAfterViewInit() {