autofocus in fast filters

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html

@@ -83,7 +83,8 @@
                             label: tableWidgets[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column].name || savedFilterMap[selectedFilterSetId]?.dynamicColumn.column,
                             value: savedFilterMap[selectedFilterSetId]?.dynamicColumn.value,
                             widgetStructure: tableWidgets[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column],
-                            relations: tableTypes[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] === 'foreign key' ? tableForeignKeys[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] : undefined
+                            relations: tableTypes[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] === 'foreign key' ? tableForeignKeys[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] : undefined,
+                            autofocus: shouldAutofocus
                         }"
                         [ndcDynamicOutputs]="{
                             onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] }
@@ -98,7 +99,8 @@
                             label: savedFilterMap[selectedFilterSetId]?.dynamicColumn.column,
                             value: savedFilterMap[selectedFilterSetId]?.dynamicColumn.value,
                             structure: tableRowStructure[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column],
-                            relations: tableTypes[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] === 'foreign key' ? tableForeignKeys[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] : undefined
+                            relations: tableTypes[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] === 'foreign key' ? tableForeignKeys[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] : undefined,
+                            autofocus: shouldAutofocus
                         }"
                         [ndcDynamicOutputs]="{
                             onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] }
@@ -116,7 +118,8 @@
                         value: savedFilterMap[selectedFilterSetId]?.dynamicColumn.value,
                         readonly: savedFilterMap[selectedFilterSetId]?.dynamicColumn.operator === 'empty',
                         structure: tableRowStructure[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column],
-                        relations: tableTypes[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] === 'foreign key' ? tableForeignKeys[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] : undefined
+                        relations: tableTypes[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] === 'foreign key' ? tableForeignKeys[savedFilterMap[selectedFilterSetId]?.dynamicColumn.column] : undefined,
+                        autofocus: shouldAutofocus
                     }"
                     [ndcDynamicOutputs]="{
                         onFieldChange: { handler: updateDynamicColumnValue, args: ['$event'] }

frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts

@@ -68,6 +68,7 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
 
   public selectedFilterSetId: string | null = null;
   public selectedFilter: any = null;
+  public shouldAutofocus: boolean = false;
 
   public tableStructure: any = null;
   public tableRowFieldsShown: { [key: string]: any } = {};
@@ -335,10 +336,12 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
     if (this.selectedFilterSetId === selectedFilterSetId) {
       this.selectedFilterSetId = null;
       this.filterSelected.emit(null);
+      this.shouldAutofocus = false;
       const queryParams = this.buildQueryParams();
       this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`], { queryParams });
     } else {
       this.selectedFilterSetId = selectedFilterSetId;
+      this.shouldAutofocus = true;
       const selectedFilter = this.savedFilterMap[selectedFilterSetId];
       this.filterSelected.emit(selectedFilter);
 
@@ -356,6 +359,11 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
 
       const queryParams = this.buildQueryParams(additionalParams);
       this.router.navigate([`/dashboard/${this.connectionID}/${this.selectedTableName}`], { queryParams });
+
+      // Reset autofocus after the component has been rendered
+      setTimeout(() => {
+        this.shouldAutofocus = false;
+      }, 500);
     }
   }
 

frontend/src/app/components/ui-components/filter-fields/base-filter-field/base-filter-field.component.ts

@@ -17,6 +17,7 @@ export class BaseFilterFieldComponent implements OnInit {
   @Input() disabled: boolean;
   @Input() widgetStructure: WidgetStructure;
   @Input() relations: TableForeignKey;
+  @Input() autofocus: boolean = false;
 
   @Output() onFieldChange = new EventEmitter<any>();
 

frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.html

@@ -2,6 +2,7 @@
     <mat-form-field class="" appearance="outline">
         <mat-label>{{normalizedLabel}} (date)</mat-label>
         <input type="date" matInput name="{{label}}-{{key}}-date"
+            #inputElement
             [required]="required" [disabled]="disabled" [readonly]="readonly"
             attr.data-testid="record-{{label}}-date"
             [(ngModel)]="date" (change)="onDateChange()">

frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 import { CommonModule } from '@angular/common';
@@ -13,8 +13,9 @@ import { format } from 'date-fns'
   styleUrls: ['./date-time.component.css'],
   imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule]
 })
-export class DateTimeFilterComponent extends BaseFilterFieldComponent {
+export class DateTimeFilterComponent extends BaseFilterFieldComponent implements AfterViewInit {
   @Input() value: string;
+  @ViewChild('inputElement') inputElement: ElementRef<HTMLInputElement>;
 
   @Output() onFieldChange = new EventEmitter();
 
@@ -41,4 +42,12 @@ export class DateTimeFilterComponent extends BaseFilterFieldComponent {
     const datetime = `${this.date}T${this.time}Z`;
     this.onFieldChange.emit(datetime);
   }
+
+  ngAfterViewInit(): void {
+    if (this.autofocus && this.inputElement) {
+      setTimeout(() => {
+        this.inputElement.nativeElement.focus();
+      }, 100);
+    }
+  }
 }

frontend/src/app/components/ui-components/filter-fields/date/date.component.html

@@ -1,6 +1,7 @@
 <mat-form-field class="date-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
     <input type="date" matInput name="{{label}}-{{key}}"
+        #inputElement
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         attr.data-testid="record-{{label}}-date"
         [(ngModel)]="date" (change)="onDateChange()">

frontend/src/app/components/ui-components/filter-fields/date/date.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 import { CommonModule } from '@angular/common';
@@ -13,8 +13,9 @@ import { format } from 'date-fns'
   styleUrls: ['./date.component.css'],
   imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule]
 })
-export class DateFilterComponent extends BaseFilterFieldComponent {
+export class DateFilterComponent extends BaseFilterFieldComponent implements AfterViewInit {
   @Input() value: string;
+  @ViewChild('inputElement') inputElement: ElementRef<HTMLInputElement>;
 
   static type = 'datetime';
   public date: string;
@@ -27,6 +28,14 @@ export class DateFilterComponent extends BaseFilterFieldComponent {
     }
   }
 
+  ngAfterViewInit(): void {
+    if (this.autofocus && this.inputElement) {
+      setTimeout(() => {
+        this.inputElement.nativeElement.focus();
+      }, 100);
+    }
+  }
+
   onDateChange() {
     this.onFieldChange.emit(this.date);
   }

frontend/src/app/components/ui-components/filter-fields/long-text/long-text.component.html

@@ -1,6 +1,7 @@
 <mat-form-field class="form-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
     <textarea matInput name="{{label}}-{{key}}"
+        #inputElement
         class="form-textarea" [rows]="rowsCount"
         attr.data-testid="record-{{label}}-long-text"
         [required]="required" [disabled]="disabled" [readonly]="readonly"

frontend/src/app/components/ui-components/filter-fields/long-text/long-text.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 import { CommonModule } from '@angular/common';
@@ -12,8 +12,9 @@ import { MatInputModule } from '@angular/material/input';
   styleUrls: ['./long-text.component.css'],
   imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule]
 })
-export class LongTextFilterComponent extends BaseFilterFieldComponent {
+export class LongTextFilterComponent extends BaseFilterFieldComponent implements AfterViewInit {
   @Input() value: string;
+  @ViewChild('inputElement') inputElement: ElementRef<HTMLTextAreaElement>;
 
   static type = 'text';
   public rowsCount: string;
@@ -27,4 +28,12 @@ export class LongTextFilterComponent extends BaseFilterFieldComponent {
     };
   }
 
+  ngAfterViewInit(): void {
+    if (this.autofocus && this.inputElement) {
+      setTimeout(() => {
+        this.inputElement.nativeElement.focus();
+      }, 100);
+    }
+  }
+
 }

frontend/src/app/components/ui-components/filter-fields/number/number.component.html

@@ -1,6 +1,7 @@
 <mat-form-field class="number-form-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
-    <input type="number" matInput name="{{label}}-{{key}}" 
+    <input type="number" matInput name="{{label}}-{{key}}"
+        #inputElement
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         attr.data-testid="record-{{label}}-number"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">

frontend/src/app/components/ui-components/filter-fields/number/number.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 import { CommonModule } from '@angular/common';
@@ -12,7 +12,17 @@ import { MatInputModule } from '@angular/material/input';
   styleUrls: ['./number.component.css'],
   imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule]
 })
-export class NumberFilterComponent extends BaseFilterFieldComponent {
+export class NumberFilterComponent extends BaseFilterFieldComponent implements AfterViewInit {
   @Input() value: number;
+  @ViewChild('inputElement') inputElement: ElementRef<HTMLInputElement>;
+
   static type = 'number';
+
+  ngAfterViewInit(): void {
+    if (this.autofocus && this.inputElement) {
+      setTimeout(() => {
+        this.inputElement.nativeElement.focus();
+      }, 100);
+    }
+  }
 }

frontend/src/app/components/ui-components/filter-fields/password/password.component.html

@@ -1,6 +1,7 @@
 <mat-form-field class="password-form-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
     <input matInput type="password" autocomplete="new-password" name="{{label}}-{{key}}"
+        #inputElement
         [required]="required" [disabled]="disabled || clearPassword" [readonly]="readonly"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">
     <mat-hint>To keep password the same keep this field blank.</mat-hint>

frontend/src/app/components/ui-components/filter-fields/password/password.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 import { CommonModule } from '@angular/common';
@@ -13,8 +13,9 @@ import { MatInputModule } from '@angular/material/input';
   styleUrls: ['./password.component.css'],
   imports: [CommonModule, FormsModule, MatCheckboxModule, MatFormFieldModule, MatInputModule]
 })
-export class PasswordFilterComponent extends BaseFilterFieldComponent {
+export class PasswordFilterComponent extends BaseFilterFieldComponent implements AfterViewInit {
   @Input() value: string;
+  @ViewChild('inputElement') inputElement: ElementRef<HTMLInputElement>;
 
   public clearPassword: boolean;
 
@@ -24,6 +25,14 @@ export class PasswordFilterComponent extends BaseFilterFieldComponent {
     this.onFieldChange.emit(this.value);
   }
 
+  ngAfterViewInit(): void {
+    if (this.autofocus && this.inputElement) {
+      setTimeout(() => {
+        this.inputElement.nativeElement.focus();
+      }, 100);
+    }
+  }
+
   onClearPasswordChange() {
     if (this.clearPassword) this.onFieldChange.emit(null);
   }

frontend/src/app/components/ui-components/filter-fields/text/text.component.html

@@ -1,6 +1,7 @@
 <mat-form-field class="text-form-field" appearance="outline">
     <mat-label>{{normalizedLabel}}</mat-label>
     <input matInput type="text" name="{{label}}-{{key}}"
+        #inputElement
         [required]="required" [disabled]="disabled" [readonly]="readonly"
         attr.data-testid="record-{{label}}-text"
         [(ngModel)]="value" (ngModelChange)="onFieldChange.emit($event)">

frontend/src/app/components/ui-components/filter-fields/text/text.component.ts

@@ -1,4 +1,4 @@
-import { Component, Injectable, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Injectable, Input, ViewChild } from '@angular/core';
 
 import { BaseFilterFieldComponent } from '../base-filter-field/base-filter-field.component';
 import { CommonModule } from '@angular/common';
@@ -14,7 +14,17 @@ import { MatInputModule } from '@angular/material/input';
   styleUrls: ['./text.component.css'],
   imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule]
 })
-export class TextFilterComponent extends BaseFilterFieldComponent {
+export class TextFilterComponent extends BaseFilterFieldComponent implements AfterViewInit {
   @Input() value: string;
+  @ViewChild('inputElement') inputElement: ElementRef<HTMLInputElement>;
+
   static type = 'text';
+
+  ngAfterViewInit(): void {
+    if (this.autofocus && this.inputElement) {
+      setTimeout(() => {
+        this.inputElement.nativeElement.focus();
+      }, 100);
+    }
+  }
 }