[ACA-1822] input search options (#768)

* [ACA-1822] input search options - needs cleanup and styling

* [ACA-1822] input search options cleanup

- needs styling
- needs tests

* [ACA-1822] input search options cleanup

- needs styling
- needs tests

* [ACA-1822] input search options styling

* [ACA-1822] add translation keys

* [ACA-1822] reformat with Prettier

* [ACA-1822] fix pointer event on FF

* [ACA-1822] fix e2e test

* [ACA-1822] update unit tests

* [ACA-1822] fix spellcheck

* [ACA-1822] fix display

* [ACA-1822] some theme cleanup

* [ACA-1822] reposition icon

* [ACA-1822] code review changes

* [ACA-1822] more unit tests
This commit is contained in:
Suzana Dirla 2018-11-02 09:31:29 +02:00 committed by Denys Vuika
parent 37b4d9d00b
commit 2c9e68ada7
13 changed files with 368 additions and 450 deletions

View File

@ -36,15 +36,15 @@ export class Header extends Component {
root: 'app-header',
logoLink: by.css('.app-menu__title'),
userInfo: by.css('aca-current-user'),
searchButton: by.css('#adf-search-button'),
searchBar: by.css('#adf-control-input'),
searchButton: by.css('.app-search-button'),
searchBar: by.css('#app-control-input'),
moreActions: by.id('app.header.more')
};
logoLink: ElementFinder = this.component.element(this.locators.logoLink);
userInfo: UserInfo = new UserInfo(this.component);
searchButton: ElementFinder = this.component.element(this.locators.searchButton);
searchBar: ElementFinder = this.component.element(this.locators.searchBar);
searchBar: ElementFinder = browser.element(this.locators.searchBar);
moreActions: ElementFinder = browser.element(this.locators.moreActions);
menu: Menu = new Menu();

View File

@ -208,6 +208,26 @@ export const APP_ROUTES: Routes = [
}
]
},
{
path: 'search-libraries',
children: [
{
path: '',
component: SearchResultsComponent,
data: {
title: 'APP.BROWSE.SEARCH.TITLE',
reuse: true
}
},
{
path: 'preview/:nodeId',
loadChildren: './components/preview/preview.module#PreviewModule',
data: {
navigateSource: 'search'
}
}
]
},
{
path: '**',
component: GenericErrorComponent

View File

@ -10,7 +10,6 @@
<ng-container *ngIf="!isSmallScreen">
<aca-search-input></aca-search-input>
<adf-toolbar-divider></adf-toolbar-divider>
</ng-container>
<aca-current-user></aca-current-user>

View File

@ -1,94 +1,22 @@
<div class="adf-search-container">
<div [@transitionMessages]="subscriptAnimationState" (@transitionMessages.done)="applySearchFocus($event)">
<button mat-icon-button
id="adf-search-button"
class="adf-search-button"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
(click)="expandable && toggleSearchBar()"
(keyup.enter)="expandable && toggleSearchBar()">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="adf-input-form-field-divider">
<ng-container [ngSwitch]="liveSearchEnabled">
<input matInput #searchInput
*ngSwitchCase="liveSearchEnabled"
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[type]="inputType"
[autocomplete]="getAutoComplete()"
id="adf-control-input"
[(ngModel)]="searchTerm"
(focus)="activateToolbar()"
(blur)="onBlur($event)"
(keyup.escape)="toggleSearchBar()"
(keyup.arrowdown)="selectFirstResult()"
(ngModelChange)="inputChange($event)"
[searchAutocomplete]="auto"
(keyup.enter)="searchSubmit($event)">
<input matInput
*ngSwitchDefault
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[type]="inputType"
[autocomplete]="getAutoComplete()"
[(ngModel)]="searchTerm"
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)">
</ng-container>
<div class="app-search-container">
<button mat-icon-button
id="app-search-button"
class="app-search-button"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field">
<input matInput #searchInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[type]="inputType"
id="app-control-input"
[(ngModel)]="searchTerm"
(ngModelChange)="inputChange($event)"
(keyup.enter)="searchSubmit($event)">
<mat-placeholder class="placeholder" *ngIf="!searchTerm.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
<div matSuffix class="adf-clear-search-icon-wrapper">
<mat-icon *ngIf="searchTerm.length > 0"
(click)="clear()">clear
</mat-icon>
</div>
</mat-form-field>
</div>
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>
</div>
</mat-form-field>
</div>
<adf-search #search
#auto="searchAutocomplete"
class="adf-search-result-autocomplete"
[maxResults]="liveSearchMaxResults"
[queryBody]="customQueryBody">
<ng-template let-data>
<mat-list *ngIf="isSearchBarActive()" id="autocomplete-search-result-list">
<mat-list-item
*ngFor="let item of data?.list?.entries; let idx = index"
id="result_option_{{idx}}"
[attr.data-automation-id]="'autocomplete_for_' + item.entry.name"
[tabindex]="0"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
(keyup.arrowdown)="onRowArrowDown($event)"
(keyup.arrowup)="onRowArrowUp($event)"
class="adf-search-autocomplete-item"
(click)="elementClicked(item)"
(keyup.enter)="elementClicked(item)"
(touchend)="elementClicked(item)">
<!-- This is a comment -->
<mat-icon mat-list-icon>
<img [src]="getMimeTypeIcon(item)" />
</mat-icon>
<h4 mat-line id="result_name_{{idx}}"
*ngIf="highlight; else elseBlock"
class="adf-search-fixed-text"
[innerHtml]="item.entry.name | highlight: searchTerm">
{{ item?.entry.name }}
</h4>
<ng-template #elseBlock>
<h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
</ng-template>
<p mat-line class="adf-search-fixed-text"> {{item?.entry?.createdByUser?.displayName}} </p>
</mat-list-item>
<mat-list-item id="search_no_result"
data-automation-id="search_no_result_found"
*ngIf="data?.list?.entries.length === 0">
<ng-content
selector="adf-empty-search-result"
*ngIf="isNoSearchTemplatePresent(); else defaultNoResult">
</ng-content>
<ng-template #defaultNoResult>
<p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
</ng-template>
</mat-list-item>
</mat-list>
</ng-template>
</adf-search>

View File

@ -1,8 +1,51 @@
.adf-clear-search-icon-wrapper {
width: 1em;
$top-margin: 12px;
.app-search-container {
margin-top: -$top-margin;
padding-top: 2px;
font-size: 16px;
.mat-form-field-underline {
display: none;
}
.mat-form-field-label-wrapper {
cursor: text;
pointer-events: auto;
}
.app-input-form-field {
letter-spacing: -0.7px;
width: 90%;
.mat-input-element {
letter-spacing: -0.7px;
}
}
.mat-focused .placeholder {
color: transparent;
}
.app-search-button.mat-icon-button {
top: -2px;
left: -8px;
margin-left: 15px;
.mat-icon {
font-size: 24px;
padding-right: 0;
}
}
}
.app-suffix-search-icon-wrapper {
height: 6px;
margin: 14px 13px;
float: left;
.mat-icon {
font-size: 100%;
font-size: 24px;
cursor: pointer;
}
}

View File

@ -23,99 +23,32 @@
* along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
*/
import { ThumbnailService } from '@alfresco/adf-core';
import {
animate,
state,
style,
transition,
trigger
} from '@angular/animations';
import {
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
QueryList,
ViewEncapsulation,
ViewChild,
ViewChildren,
ElementRef,
TemplateRef,
ContentChild
ElementRef
} from '@angular/core';
import { MinimalNodeEntity, QueryBody } from 'alfresco-js-api';
import { Subject } from 'rxjs';
import { MatListItem } from '@angular/material';
import { debounceTime, filter, takeUntil } from 'rxjs/operators';
import {
EmptySearchResultComponent,
SearchComponent
} from '@alfresco/adf-content-services';
@Component({
selector: 'app-search-input-control',
templateUrl: './search-input-control.component.html',
styleUrls: ['./search-input-control.component.scss'],
animations: [
trigger('transitionMessages', [
state(
'active',
style({ transform: 'translateX(0%)', 'margin-left': '13px' })
),
state('inactive', style({ transform: 'translateX(81%)' })),
state(
'no-animation',
style({ transform: 'translateX(0%)', width: '100%' })
),
transition(
'inactive => active',
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')
),
transition(
'active => inactive',
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')
)
])
],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-control' }
host: { class: 'app-search-control' }
})
export class SearchInputControlComponent implements OnInit, OnDestroy {
export class SearchInputControlComponent implements OnDestroy {
onDestroy$: Subject<boolean> = new Subject<boolean>();
/** Toggles whether to use an expanding search control. If false
* then a regular input is used.
*/
@Input()
expandable = true;
/** Toggles highlighting of the search term in the results. */
@Input()
highlight = false;
/** Type of the input field to render, e.g. "search" or "text" (default). */
@Input()
inputType = 'text';
/** Toggles auto-completion of the search input field. */
@Input()
autocomplete = false;
/** Toggles "find-as-you-type" suggestions for possible matches. */
@Input()
liveSearchEnabled = true;
/** Maximum number of results to show in the live search. */
@Input()
liveSearchMaxResults = 5;
/** @deprecated in 2.1.0 */
@Input()
customQueryBody: QueryBody;
/** Emitted when the search is submitted pressing ENTER button.
* The search term is provided as value of the event.
*/
@ -130,73 +63,10 @@ export class SearchInputControlComponent implements OnInit, OnDestroy {
@Output()
searchChange: EventEmitter<string> = new EventEmitter();
/** Emitted when a file item from the list of "find-as-you-type" results is selected. */
@Output()
optionClicked: EventEmitter<any> = new EventEmitter();
@ViewChild('search')
searchAutocomplete: SearchComponent;
@ViewChild('searchInput')
searchInput: ElementRef;
@ViewChildren(MatListItem)
private listResultElement: QueryList<MatListItem>;
@ContentChild(EmptySearchResultComponent)
emptySearchTemplate: EmptySearchResultComponent;
searchTerm = '';
subscriptAnimationState: string;
noSearchResultTemplate: TemplateRef<any> = null;
skipToggle = false;
toggleDebounceTime = 200;
private toggleSearch = new Subject<any>();
private focusSubject = new Subject<FocusEvent>();
constructor(private thumbnailService: ThumbnailService) {
this.toggleSearch
.asObservable()
.pipe(
debounceTime(this.toggleDebounceTime),
takeUntil(this.onDestroy$)
)
.subscribe(() => {
if (this.expandable && !this.skipToggle) {
this.subscriptAnimationState =
this.subscriptAnimationState === 'inactive' ? 'active' : 'inactive';
if (this.subscriptAnimationState === 'inactive') {
this.searchTerm = '';
this.searchAutocomplete.resetResults();
if (
document.activeElement.id === this.searchInput.nativeElement.id
) {
this.searchInput.nativeElement.blur();
}
}
}
this.skipToggle = false;
});
}
applySearchFocus(animationDoneEvent) {
if (animationDoneEvent.toState === 'active') {
this.searchInput.nativeElement.focus();
}
}
ngOnInit() {
this.subscriptAnimationState = this.expandable
? 'inactive'
: 'no-animation';
this.setupFocusEventHandlers();
}
isNoSearchTemplatePresent(): boolean {
return this.emptySearchTemplate ? true : false;
}
ngOnDestroy(): void {
this.onDestroy$.next(true);
@ -205,117 +75,14 @@ export class SearchInputControlComponent implements OnInit, OnDestroy {
searchSubmit(event: any) {
this.submit.emit(event);
this.toggleSearchBar();
}
inputChange(event: any) {
this.searchChange.emit(event);
}
getAutoComplete(): string {
return this.autocomplete ? 'on' : 'off';
}
getMimeTypeIcon(node: MinimalNodeEntity): string {
let mimeType;
if (node.entry.content && node.entry.content.mimeType) {
mimeType = node.entry.content.mimeType;
}
if (node.entry.isFolder) {
mimeType = 'folder';
}
return this.thumbnailService.getMimeTypeIcon(mimeType);
}
isSearchBarActive() {
return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
}
toggleSearchBar() {
if (this.toggleSearch) {
this.toggleSearch.next();
}
}
elementClicked(item: any) {
if (item.entry) {
this.optionClicked.next(item);
this.toggleSearchBar();
}
}
onFocus($event): void {
this.focusSubject.next($event);
}
onBlur($event): void {
this.focusSubject.next($event);
}
activateToolbar() {
if (!this.isSearchBarActive()) {
this.toggleSearchBar();
}
}
selectFirstResult() {
if (this.listResultElement && this.listResultElement.length > 0) {
const firstElement: MatListItem = <MatListItem>(
this.listResultElement.first
);
firstElement._getHostElement().focus();
}
}
onRowArrowDown($event: KeyboardEvent): void {
const nextElement: any = this.getNextElementSibling(<Element>$event.target);
if (nextElement) {
nextElement.focus();
}
}
onRowArrowUp($event: KeyboardEvent): void {
const previousElement: any = this.getPreviousElementSibling(<Element>(
$event.target
));
if (previousElement) {
previousElement.focus();
} else {
this.searchInput.nativeElement.focus();
this.focusSubject.next(new FocusEvent('focus'));
}
}
private setupFocusEventHandlers() {
this.focusSubject
.pipe(
debounceTime(50),
filter(($event: any) => {
return (
this.isSearchBarActive() &&
($event.type === 'blur' || $event.type === 'focusout')
);
}),
takeUntil(this.onDestroy$)
)
.subscribe(() => {
this.toggleSearchBar();
});
}
clear(event: any) {
clear() {
this.searchTerm = '';
this.searchChange.emit('');
this.skipToggle = true;
}
private getNextElementSibling(node: Element): Element {
return node.nextElementSibling;
}
private getPreviousElementSibling(node: Element): Element {
return node.previousElementSibling;
}
}

View File

@ -1,8 +1,35 @@
<app-search-input-control #searchInputControl
[highlight]="true"
(optionClicked)="onItemClicked($event)"
[expandable]="!onSearchResults"
[liveSearchEnabled]="enableLiveSearch"
(submit)="onSearchSubmit($event)"
(searchChange)="onSearchChange($event)">
</app-search-input-control>
<div class="app-search-container" [matMenuTriggerFor]="searchOptionsMenu">
<button mat-icon-button
class="app-search-button"
[title]="'SEARCH.BUTTON.TOOLTIP' | translate">
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
</button>
<mat-form-field class="app-input-form-field">
<input matInput
[attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
[type]="'text'"
[disabled]="true"
[value]="searchedWord">
<mat-placeholder class="placeholder" *ngIf="!searchedWord.length">{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-placeholder>
<div matSuffix class="app-suffix-search-icon-wrapper">
<mat-icon>arrow_drop_down</mat-icon>
</div>
</mat-form-field>
</div>
<mat-menu #searchOptionsMenu="matMenu" [overlapTrigger]="true" class="app-search-options-menu">
<app-search-input-control #searchInputControl
(click)="$event.stopPropagation()"
(submit)="onSearchSubmit($event)"
(searchChange)="onSearchChange($event)">
</app-search-input-control>
<div id="search-options">
<mat-checkbox *ngFor="let option of searchOptions"
[(ngModel)]="option.value"
[disabled]="option.shouldDisable()"
(click)="$event.stopPropagation()">
{{ option.key | translate }}
</mat-checkbox>
</div>
</mat-menu>

View File

@ -35,12 +35,7 @@ import {
import { SearchInputComponent } from './search-input.component';
import { AppTestingModule } from '../../../testing/app-testing.module';
import { Actions, ofType } from '@ngrx/effects';
import {
NAVIGATE_FOLDER,
NavigateToFolder,
VIEW_FILE,
ViewFileAction
} from '../../../store/actions';
import { SEARCH_BY_TERM, SearchByTermAction } from '../../../store/actions';
import { map } from 'rxjs/operators';
describe('SearchInputComponent', () => {
@ -63,35 +58,109 @@ describe('SearchInputComponent', () => {
});
}));
describe('onItemClicked()', () => {
it('opens preview if node is file', fakeAsync(done => {
describe('onSearchSubmit()', () => {
it('should call search action with correct search options', fakeAsync(done => {
const searchedTerm = 's';
const currentSearchOptions = [{ key: 'test' }];
actions$.pipe(
ofType<ViewFileAction>(VIEW_FILE),
ofType<SearchByTermAction>(SEARCH_BY_TERM),
map(action => {
expect(action.payload.entry.id).toBe('node-id');
expect(action.searchOptions[0].key).toBe(currentSearchOptions[0].key);
done();
})
);
const node = {
entry: { isFile: true, id: 'node-id', parentId: 'parent-id' }
};
component.onItemClicked(node);
component.onSearchSubmit(<any>{ target: { value: searchedTerm } });
tick();
}));
it('navigates if node is folder', fakeAsync(done => {
it('should call search action with correct searched term', fakeAsync(done => {
const searchedTerm = 's';
actions$.pipe(
ofType<NavigateToFolder>(NAVIGATE_FOLDER),
ofType<SearchByTermAction>(SEARCH_BY_TERM),
map(action => {
expect(action.payload.entry.id).toBe('folder-id');
expect(action.payload).toBe(searchedTerm);
done();
})
);
const node = { entry: { id: 'folder-id', isFolder: true } };
component.onItemClicked(node);
component.onSearchSubmit(<any>{ target: { value: searchedTerm } });
tick();
}));
});
describe('onSearchChange()', () => {
it('should call search action with correct search options', fakeAsync(done => {
const searchedTerm = 's';
const currentSearchOptions = [{ key: 'test' }];
actions$.pipe(
ofType<SearchByTermAction>(SEARCH_BY_TERM),
map(action => {
expect(action.searchOptions[0].key).toBe(currentSearchOptions[0].key);
done();
})
);
component.onSearchChange(searchedTerm);
tick(1000);
}));
it('should call search action with correct searched term', fakeAsync(done => {
const searchedTerm = 's';
actions$.pipe(
ofType<SearchByTermAction>(SEARCH_BY_TERM),
map(action => {
expect(action.payload).toBe(searchedTerm);
done();
})
);
component.onSearchChange(searchedTerm);
tick(1000);
}));
});
describe('isLibrariesChecked()', () => {
it('should return false by default', () => {
expect(component.isLibrariesChecked()).toBe(false);
});
it('should return true when libraries checked', () => {
const libItem = component.searchOptions.find(
item => item.key.toLowerCase().indexOf('libraries') > 0
);
libItem.value = true;
expect(component.isLibrariesChecked()).toBe(true);
});
});
describe('isContentChecked()', () => {
it('should return false by default', () => {
expect(component.isContentChecked()).toBe(false);
});
it('should return true when files checked', () => {
const filesItem = component.searchOptions.find(
item => item.key.toLowerCase().indexOf('files') > 0
);
filesItem.value = true;
expect(component.isContentChecked()).toBe(true);
});
it('should return true when folders checked', () => {
const foldersItem = component.searchOptions.find(
item => item.key.toLowerCase().indexOf('folders') > 0
);
foldersItem.value = true;
expect(component.isContentChecked()).toBe(true);
});
it('should return true when both files and folders checked', () => {
const filesItem = component.searchOptions.find(
item => item.key.toLowerCase().indexOf('files') > 0
);
filesItem.value = true;
const foldersItem = component.searchOptions.find(
item => item.key.toLowerCase().indexOf('folders') > 0
);
foldersItem.value = true;
expect(component.isContentChecked()).toBe(true);
});
});
});

View File

@ -1,37 +1,90 @@
$search-width: 594px;
$search-height: 40px;
$search-background: rgba(#efefef, 0.54);
$search-border-radius: 4px;
$top-margin: 12px;
@mixin aca-search-input-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$border: 1px solid mat-color($foreground, divider, 0.07);
.aca-search-input {
display: flex;
box-sizing: border-box;
padding: 0;
flex-direction: row;
align-items: center;
white-space: nowrap;
.app-search-container {
color: mat-color($foreground, text, 0.54);
.adf-search-control {
color: mat-color($background, card);
.app-input-form-field {
.mat-input-element {
caret-color: mat-color($foreground, text, 0.54);
.mat-form-field-underline {
background-color: mat-color($background, card);
}
.adf-input-form-field-divider {
font-size: 14px;
}
}
.adf-search-button.mat-icon-button {
left: -15px;
margin-left: 15px;
align-items: flex-start;
font: 400 11px system-ui;
color: mat-color($background, card);
.mat-icon {
font-size: 24px;
padding-right: 0;
&:disabled {
color: mat-color($foreground, text, 0.54);
}
}
}
}
.app-search-options-menu {
&.mat-menu-panel {
background-color: mat-color($background, dialog);
}
}
#search-options {
color: mat-color($foreground, text, 0.54);
border-top: $border;
}
mat-checkbox {
.mat-checkbox-frame {
border-color: mat-color($foreground, text, 0.54);
}
}
}
.aca-search-input {
margin-right: 7px;
background-color: $search-background;
border-radius: $search-border-radius;
height: $search-height;
}
.app-search-container {
width: $search-width;
height: $search-height + $top-margin;
}
.app-search-control {
margin-top: -$top-margin;
}
.app-search-options-menu {
&.mat-menu-panel {
width: $search-width;
max-width: unset;
border-radius: $search-border-radius;
margin-top: $top-margin;
}
.mat-menu-content:not(:empty) {
padding-top: 0;
padding-bottom: 0;
}
}
#search-options {
padding: 20px 0;
font-size: 16px;
letter-spacing: -0.7px;
mat-checkbox {
padding: 3px 24px 3px 19px;
.mat-checkbox-inner-container {
height: 18px;
width: 18px;
}
.mat-checkbox-label {
padding: 0 0 0 11px;
}
}
}

View File

@ -33,15 +33,10 @@ import {
UrlSegmentGroup,
UrlTree
} from '@angular/router';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { SearchInputControlComponent } from '../search-input-control/search-input-control.component';
import { Store } from '@ngrx/store';
import { AppStore } from '../../../store/states/app.state';
import {
SearchByTermAction,
NavigateToFolder,
ViewFileAction
} from '../../../store/actions';
import { SearchByTermAction } from '../../../store/actions';
import { filter } from 'rxjs/operators';
@Component({
@ -54,7 +49,25 @@ export class SearchInputComponent implements OnInit {
hasOneChange = false;
hasNewChange = false;
navigationTimer: any;
enableLiveSearch = true;
searchedWord = null;
searchOptions: any = [
{
key: 'SEARCH.INPUT.FILES',
value: false,
shouldDisable: this.isLibrariesChecked.bind(this)
},
{
key: 'SEARCH.INPUT.FOLDERS',
value: false,
shouldDisable: this.isLibrariesChecked.bind(this)
},
{
key: 'SEARCH.INPUT.LIBRARIES',
value: false,
shouldDisable: this.isContentChecked.bind(this)
}
];
@ViewChild('searchInputControl')
searchInputControl: SearchInputControlComponent;
@ -74,45 +87,21 @@ export class SearchInputComponent implements OnInit {
}
showInputValue() {
this.searchedWord = '';
if (this.onSearchResults) {
let searchedWord = null;
const urlTree: UrlTree = this.router.parseUrl(this.router.url);
const urlSegmentGroup: UrlSegmentGroup =
urlTree.root.children[PRIMARY_OUTLET];
if (urlSegmentGroup) {
const urlSegments: UrlSegment[] = urlSegmentGroup.segments;
searchedWord = urlSegments[0].parameters['q'];
}
if (this.searchInputControl) {
this.enableLiveSearch = false;
this.searchInputControl.searchTerm = searchedWord;
this.searchInputControl.subscriptAnimationState = 'no-animation';
}
} else {
if (this.searchInputControl.subscriptAnimationState === 'no-animation') {
this.searchInputControl.subscriptAnimationState = 'active';
this.searchInputControl.searchTerm = '';
this.searchInputControl.toggleSearchBar();
}
if (!this.enableLiveSearch) {
setTimeout(() => {
this.enableLiveSearch = true;
}, this.searchInputControl.toggleDebounceTime + 100);
this.searchedWord = urlSegments[0].parameters['q'] || '';
}
}
}
onItemClicked(node: MinimalNodeEntity) {
if (node && node.entry) {
const { isFile, isFolder } = node.entry;
if (isFile) {
this.store.dispatch(new ViewFileAction(node));
} else if (isFolder) {
this.store.dispatch(new NavigateToFolder(node));
}
if (this.searchInputControl) {
this.searchInputControl.searchTerm = this.searchedWord;
}
}
@ -124,33 +113,42 @@ export class SearchInputComponent implements OnInit {
onSearchSubmit(event: KeyboardEvent) {
const searchTerm = (event.target as HTMLInputElement).value;
if (searchTerm) {
this.store.dispatch(new SearchByTermAction(searchTerm));
this.store.dispatch(
new SearchByTermAction(searchTerm, this.searchOptions)
);
}
}
onSearchChange(searchTerm: string) {
if (this.onSearchResults) {
if (this.hasOneChange) {
this.hasNewChange = true;
} else {
this.hasOneChange = true;
}
if (this.hasNewChange) {
clearTimeout(this.navigationTimer);
this.hasNewChange = false;
}
this.navigationTimer = setTimeout(() => {
if (searchTerm) {
this.store.dispatch(new SearchByTermAction(searchTerm));
}
this.hasOneChange = false;
}, 1000);
if (this.hasOneChange) {
this.hasNewChange = true;
} else {
this.hasOneChange = true;
}
if (this.hasNewChange) {
clearTimeout(this.navigationTimer);
this.hasNewChange = false;
}
this.navigationTimer = setTimeout(() => {
if (searchTerm) {
this.store.dispatch(
new SearchByTermAction(searchTerm, this.searchOptions)
);
}
this.hasOneChange = false;
}, 1000);
}
get onSearchResults() {
return this.router.url.indexOf('/search') === 0;
}
isLibrariesChecked(): boolean {
return this.searchOptions[2].value;
}
isContentChecked(): boolean {
return this.searchOptions[0].value || this.searchOptions[1].value;
}
}

View File

@ -29,5 +29,5 @@ export const SEARCH_BY_TERM = 'SEARCH_BY_TERM';
export class SearchByTermAction implements Action {
readonly type = SEARCH_BY_TERM;
constructor(public payload: string) {}
constructor(public payload: string, public searchOptions?: any) {}
}

View File

@ -37,7 +37,15 @@ export class SearchEffects {
searchByTerm$ = this.actions$.pipe(
ofType<SearchByTermAction>(SEARCH_BY_TERM),
map(action => {
this.router.navigateByUrl('/search;q=' + action.payload);
if (
action.searchOptions &&
action.searchOptions[2] &&
action.searchOptions[2].value
) {
this.router.navigateByUrl('/search-libraries;q=' + action.payload);
} else {
this.router.navigateByUrl('/search;q=' + action.payload);
}
})
);
}

View File

@ -317,6 +317,12 @@
},
"SEARCH": {
"INPUT": {
"PLACEHOLDER": "Search everywhere",
"FILES": "Files",
"FOLDERS": "Folders",
"LIBRARIES": "Libraries"
},
"SORT": {
"RELEVANCE": "Relevance",
"FILENAME": "Filename",