mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2026-09-09 18:02:54 +00:00
[ACS-10475] [FE][Search] UX improvements for search (#5112)
This commit is contained in:
+9
-1
@@ -22,7 +22,7 @@
|
|||||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
|
||||||
import { AppTestingModule } from '../../../testing/app-testing.module';
|
import { AppTestingModule } from '../../../testing/app-testing.module';
|
||||||
import { SearchInputComponent } from './search-input.component';
|
import { SearchInputComponent } from './search-input.component';
|
||||||
import { Subject } from 'rxjs';
|
import { Subject } from 'rxjs';
|
||||||
@@ -124,6 +124,14 @@ describe('SearchInputComponent', () => {
|
|||||||
expect(searchButton).toBeTruthy();
|
expect(searchButton).toBeTruthy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should focus the search input field after view init', fakeAsync(() => {
|
||||||
|
const input = testingUtils.getInputByCSS('.app-search-input');
|
||||||
|
spyOn(input, 'focus');
|
||||||
|
component.ngAfterViewInit();
|
||||||
|
tick();
|
||||||
|
expect(input.focus).toHaveBeenCalled();
|
||||||
|
}));
|
||||||
|
|
||||||
describe('onSearchSubmit', () => {
|
describe('onSearchSubmit', () => {
|
||||||
it('should execute search on submit with valid term', () => {
|
it('should execute search on submit with valid term', () => {
|
||||||
component.onSearchSubmit('happy faces only');
|
component.onSearchSubmit('happy faces only');
|
||||||
|
|||||||
+9
-3
@@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
import { AppHookService } from '@alfresco/aca-shared';
|
import { AppHookService } from '@alfresco/aca-shared';
|
||||||
import { AppConfigService } from '@alfresco/adf-core';
|
import { AppConfigService } from '@alfresco/adf-core';
|
||||||
import { Component, DestroyRef, ElementRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
import { AfterViewInit, Component, DestroyRef, ElementRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||||
import { ActivatedRoute, NavigationSkipped, NavigationStart, Params, Router } from '@angular/router';
|
import { ActivatedRoute, NavigationSkipped, NavigationStart, Params, Router } from '@angular/router';
|
||||||
import { SearchNavigationService } from '../search-navigation.service';
|
import { SearchNavigationService } from '../search-navigation.service';
|
||||||
import { SearchFilterService } from '../search-filter.service';
|
import { SearchFilterService } from '../search-filter.service';
|
||||||
@@ -51,7 +51,7 @@ import { extractSearchedWordFromEncodedQuery } from '../../../utils/aca-search-u
|
|||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
host: { class: 'aca-search-input' }
|
host: { class: 'aca-search-input' }
|
||||||
})
|
})
|
||||||
export class SearchInputComponent implements OnInit, OnDestroy {
|
export class SearchInputComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
private readonly queryBuilder = inject(SearchQueryBuilderService);
|
private readonly queryBuilder = inject(SearchQueryBuilderService);
|
||||||
private readonly config = inject(AppConfigService);
|
private readonly config = inject(AppConfigService);
|
||||||
private readonly router = inject(Router);
|
private readonly router = inject(Router);
|
||||||
@@ -75,7 +75,7 @@ export class SearchInputComponent implements OnInit, OnDestroy {
|
|||||||
this.searchOnChange = this.config.get<boolean>('search.aca:triggeredOnChange', true);
|
this.searchOnChange = this.config.get<boolean>('search.aca:triggeredOnChange', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit(): void {
|
||||||
this.initSearchState();
|
this.initSearchState();
|
||||||
this.subscribeToRouteParams();
|
this.subscribeToRouteParams();
|
||||||
|
|
||||||
@@ -84,6 +84,12 @@ export class SearchInputComponent implements OnInit, OnDestroy {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.searchInputField.nativeElement.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
this.filterService.removeContentFilters();
|
this.filterService.removeContentFilters();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user