diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html index 0f8426c48..3ea37f474 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html +++ b/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'] } diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts index 02b511e50..f2eea469e 100644 --- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts +++ b/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); } } diff --git a/frontend/src/app/components/ui-components/filter-fields/base-filter-field/base-filter-field.component.ts b/frontend/src/app/components/ui-components/filter-fields/base-filter-field/base-filter-field.component.ts index 8614f4e14..774c159cd 100644 --- a/frontend/src/app/components/ui-components/filter-fields/base-filter-field/base-filter-field.component.ts +++ b/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(); diff --git a/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.html b/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.html index 8996f45d6..e370aa7f3 100644 --- a/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.html +++ b/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.html @@ -2,6 +2,7 @@ {{normalizedLabel}} (date) diff --git a/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.ts b/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.ts index 002a50cd6..a1919bab3 100644 --- a/frontend/src/app/components/ui-components/filter-fields/date-time/date-time.component.ts +++ b/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; @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); + } + } } diff --git a/frontend/src/app/components/ui-components/filter-fields/date/date.component.html b/frontend/src/app/components/ui-components/filter-fields/date/date.component.html index 5a63de4c8..2b87fc46e 100644 --- a/frontend/src/app/components/ui-components/filter-fields/date/date.component.html +++ b/frontend/src/app/components/ui-components/filter-fields/date/date.component.html @@ -1,6 +1,7 @@ {{normalizedLabel}} diff --git a/frontend/src/app/components/ui-components/filter-fields/date/date.component.ts b/frontend/src/app/components/ui-components/filter-fields/date/date.component.ts index 0ffc2b311..c583e71f5 100644 --- a/frontend/src/app/components/ui-components/filter-fields/date/date.component.ts +++ b/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; 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); } diff --git a/frontend/src/app/components/ui-components/filter-fields/long-text/long-text.component.html b/frontend/src/app/components/ui-components/filter-fields/long-text/long-text.component.html index 480299d16..41a02b8d8 100644 --- a/frontend/src/app/components/ui-components/filter-fields/long-text/long-text.component.html +++ b/frontend/src/app/components/ui-components/filter-fields/long-text/long-text.component.html @@ -1,6 +1,7 @@ {{normalizedLabel}}