Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: searchbar, ecFocus + added searchbar to asset-list-pop
- Loading branch information
Showing
16 changed files
with
216 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <input #inputField [ecFocus]="focusEvent" type="text" [placeholder]="placeholder || defaultPlaceholder" | ||
| class="input input_clear" (keyup)="keyup.next($event.target.value);preventDefault($event)" (keydown)="arrowNavigation($event)" | ||
| (paste)="paste.next($event)" [(ngModel)]="query"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
| import { Item } from '@ec.components/core'; | ||
| import { ListComponent } from '@ec.components/ui'; | ||
| import { SymbolService } from '@ec.components/ui/src/symbol/symbol.service'; | ||
| import { Subject } from 'rxjs/Subject'; | ||
| import { distinctUntilChanged } from 'rxjs/operators'; | ||
| import { Focus } from '../../utility/focus/focus.interface'; | ||
|
|
||
| /** Genereic Searchbar component. Filters a given list its label property (or given property). | ||
| * Supports autofocus and arrow navigation. */ | ||
| @Component({ | ||
| selector: 'ec-searchbar', | ||
| templateUrl: 'searchbar.component.html', | ||
| }) | ||
|
|
||
| export class SearchbarComponent implements AfterViewInit, Focus { | ||
| /** Searchbar placeholder */ | ||
| @Input() placeholder: string; | ||
| /** Default placeholder when no placeholder is given */ | ||
| @Input() defaultPlaceholder: string; | ||
| /** The input query that should be prefilled */ | ||
| @Input() public query: string; | ||
| /** Property that should be filtered */ | ||
| @Input() property: string; | ||
| /** If true, the input will be autofocused */ | ||
| @Input() autofocus = true; | ||
| /** The event that focuses the input */ | ||
| public focusEvent: EventEmitter<boolean> = new EventEmitter(); | ||
| /** Delay until search is fired */ | ||
| @Input() debounceTime = 300; | ||
| /** Subject that is triggered on keyup */ | ||
| public keyup: Subject<any> = new Subject<any>(); | ||
| /** Subject that is nexted when something is pasted */ | ||
| public paste: Subject<any> = new Subject<any>(); | ||
| /** The list that should be filtered */ | ||
| @Input() list: ListComponent<any>; | ||
| /** Output that emits when enter is pressed on a selected item */ | ||
| @Output() selected: EventEmitter<any> = new EventEmitter(); | ||
|
|
||
| constructor(public route: ActivatedRoute, public symbol: SymbolService) { | ||
| this.defaultPlaceholder = this.symbol.resolve('searchbar.placeholder'); | ||
| const paste = this.paste.asObservable(); | ||
| this.paste.asObservable() | ||
| .subscribe((e) => { | ||
| const pasted = (e.clipboardData).getData('text'); | ||
| if (this.filterList(pasted, true)) { | ||
| this.preventDefault(e); | ||
| } | ||
| }); | ||
|
|
||
| this.keyup.asObservable().debounceTime(this.debounceTime) | ||
| .pipe(distinctUntilChanged()) | ||
| .subscribe(value => this.filterList(value)); | ||
|
|
||
| this.route.params | ||
| .subscribe(() => { | ||
| this.focusEvent.emit(true); | ||
| this.query = ''; | ||
| }) | ||
| } | ||
|
|
||
| /** prevents the event default and disables propagation */ | ||
| preventDefault(e) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| e.stopImmediatePropagation(); | ||
| } | ||
|
|
||
| /** After the view is ready, the searchbar needs to be focused (if autofocus is true) */ | ||
| ngAfterViewInit() { | ||
| if (this.autofocus) { | ||
| this.focusEvent.emit(true); | ||
| } | ||
| } | ||
|
|
||
| /** Filters the list by the given value, either uses property or list.config.label. | ||
| * If paste is true and the value matches the list.config.identifierPattern, | ||
| * select is emitted immediately with a pseudo item containing the value as item identifier. */ | ||
| filterList(value, paste = false) { | ||
| if (!this.list || !this.list.list) { | ||
| console.warn('could not search: no list given!', this.list); | ||
| return; | ||
| } | ||
| if (!this.property && !this.list.config.label) { | ||
| console.warn('cannot filter list: no property set and no label property configured'); | ||
| return; | ||
| } | ||
| if (paste && this.list.config.identifierPattern) { | ||
| if (value.match(this.list.config.identifierPattern)) { | ||
| this.selected.emit(new Item({ | ||
| [this.list.config.identifier]: value, | ||
| }, this.list.config)); | ||
| /* return true; */ | ||
| } | ||
| } | ||
| this.list.list.filter(this.property || this.list.config.label, value); | ||
| } | ||
|
|
||
| /** called on keydown. if arrow keys are pressed, toggle selection of next/prev elements of list */ | ||
| arrowNavigation(e) { | ||
| if (!this.list || !this.list.selection) { | ||
| return; | ||
| } | ||
| switch (e.key) { | ||
| case 'ArrowUp': | ||
| this.list.selectPrev(); | ||
| e.preventDefault(); | ||
| break; | ||
| case 'ArrowDown': | ||
| this.list.selectNext(); | ||
| e.preventDefault(); | ||
| break; | ||
| case 'Enter': | ||
| if (!this.list.selection.isEmpty()) { | ||
| this.selected.emit(this.list.selection.items[0]); | ||
| } | ||
| break; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { Directive, ElementRef, EventEmitter, Input, OnInit } from '@angular/core'; | ||
|
|
||
| @Directive({ | ||
| // tslint:disable-next-line:directive-selector | ||
| selector: '[ecFocus]', | ||
| }) | ||
| export class FocusDirective implements OnInit { | ||
| @Input() ecFocus: EventEmitter<boolean>; | ||
|
|
||
| constructor(private element: ElementRef) { | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this.ecFocus | ||
| .subscribe((event: boolean) => { | ||
| if (event) { | ||
| this.element.nativeElement.focus(); | ||
| } else { | ||
| this.element.nativeElement.blur(); | ||
| } | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { EventEmitter } from '@angular/core'; | ||
|
|
||
| export interface Focus { | ||
| focusEvent: EventEmitter<boolean>; | ||
|
|
||
| ngAfterViewInit(); | ||
| } |
Oops, something went wrong.