From c10041253844e7c3da94069c81d558b8a6dff466 Mon Sep 17 00:00:00 2001 From: Will Abson Date: Mon, 31 Oct 2016 16:36:20 +0000 Subject: [PATCH] Rename search outputs after feedback from @DenysVuyka Refs #371 --- .../search/search-bar.component.html | 2 +- ng2-components/ng2-alfresco-search/README.md | 5 +- ...esco-search-autocomplete.component.spec.ts | 52 +++++++++---------- .../alfresco-search-autocomplete.component.ts | 29 +++++------ .../alfresco-search-control.component.html | 8 +-- .../alfresco-search-control.component.spec.ts | 6 +-- .../alfresco-search-control.component.ts | 4 +- .../alfresco-search.component.spec.ts | 14 ++--- .../components/alfresco-search.component.ts | 9 ++-- 9 files changed, 63 insertions(+), 66 deletions(-) diff --git a/demo-shell-ng2/app/components/search/search-bar.component.html b/demo-shell-ng2/app/components/search/search-bar.component.html index 52d8ee7a52..b890c54210 100644 --- a/demo-shell-ng2/app/components/search/search-bar.component.html +++ b/demo-shell-ng2/app/components/search/search-bar.component.html @@ -1,5 +1,5 @@ + (searchSubmit)="onSearchSubmit($event);" (searchChange)="onSearchTermChange($event);" (expand)="onExpandToggle($event);" (fileSelect)="onFileClicked($event)"> + (searchSubmit)="onSearchSubmit($event);" + (fileSelect)="onSearchResultSelect($event);"> ``` @@ -172,6 +173,8 @@ bootstrap(SearchDemo, [ **searchChange**: Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is at less than three characters in length then the term is truncated to an empty string.
**searchSubmit**: Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object.
+**fileSelect**: Emitted when a file item from the list of find-as-you-type results is selected +**expand**: Emitted when the expanded state of the control changes based on focus events and the content of the input control #### Options diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts index c2e416897e..43f9e89abb 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts @@ -100,7 +100,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect( element.querySelector('#result_user_0').innerHTML).toBe('John Doe'); expect( element.querySelector('#result_name_0').innerHTML).toBe('MyDoc'); @@ -115,7 +115,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(results)); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(element.querySelectorAll('table[data-automation-id="autocomplete_results"] tbody tr').length).toBe(2); done(); @@ -136,7 +136,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg'); spyOn(thumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE'); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); let imgEl = element.querySelector('#result_row_0 img'); expect(imgEl).not.toBeNull(); @@ -153,7 +153,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(noResult)); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(element.querySelector('#search_no_result')).not.toBeNull(); done(); @@ -176,7 +176,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should display an error if an error is encountered running the search', (done) => { - component.errorEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => {}, () => { fixture.detectChanges(); let resultsEl = element.querySelector('[data-automation-id="autocomplete_results"]'); let errorEl = element.querySelector('[data-automation-id="autocomplete_error_message"]'); @@ -213,19 +213,19 @@ describe('AlfrescoSearchAutocompleteComponent', () => { searchService = fixture.debugElement.injector.get(AlfrescoSearchService); }); - it('should emit preview when file item clicked', (done) => { + it('should emit file select when file item clicked', (done) => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).click(); }); updateSearchTerm('searchTerm'); - component.preview.subscribe(() => { + component.fileSelect.subscribe(() => { done(); }); }); @@ -235,11 +235,11 @@ describe('AlfrescoSearchAutocompleteComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(folderResult)); - spyOn(component.preview, 'emit'); - component.resultsEmitter.subscribe(() => { + spyOn(component.fileSelect, 'emit'); + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).click(); - expect(component.preview.emit).not.toHaveBeenCalled(); + expect(component.fileSelect.emit).not.toHaveBeenCalled(); done(); }); @@ -258,9 +258,9 @@ describe('AlfrescoSearchAutocompleteComponent', () => { .and.returnValue(Promise.resolve(results)); }); - it('should emit preview when enter key pressed when a file item is in focus', (done) => { + it('should emit file select when enter key pressed when a file item is in focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' @@ -269,14 +269,14 @@ describe('AlfrescoSearchAutocompleteComponent', () => { updateSearchTerm('searchTerm'); - component.preview.subscribe(() => { + component.fileSelect.subscribe(() => { done(); }); }); it('should emit cancel event when escape key pressed when a result is in focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' @@ -285,14 +285,14 @@ describe('AlfrescoSearchAutocompleteComponent', () => { updateSearchTerm('searchTerm'); - component.cancelEmitter.subscribe(() => { + component.cancel.subscribe(() => { done(); }); }); it('should focus the next result when down arrow key pressed when a result is in focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); let firstResult: any = element.querySelector('#result_row_0'); let secondResult: any = element.querySelector('#result_row_1'); @@ -310,7 +310,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should do nothing when down arrow key pressed when the last result is in focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); let lastResult: any = element.querySelector('#result_row_2'); lastResult.focus(); @@ -325,7 +325,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should focus the previous result when up arrow key pressed when a result is in focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); let firstResult: any = element.querySelector('#result_row_0'); let secondResult: any = element.querySelector('#result_row_1'); @@ -343,7 +343,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should emit scroll back event when up arrow key pressed and the first result is in focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); let firstResult: any = element.querySelector('#result_row_0'); firstResult.dispatchEvent(new KeyboardEvent('keyup', { @@ -351,7 +351,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { })); }); - component.scrollBackEmitter.subscribe(() => { + component.scrollBack.subscribe(() => { done(); }); @@ -372,14 +372,14 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should emit a focus event when a result comes into focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).dispatchEvent(new FocusEvent('focus')); }); updateSearchTerm('searchTerm'); - component.focusEmitter.subscribe((e: FocusEvent) => { + component.searchFocus.subscribe((e: FocusEvent) => { expect(e).not.toBeNull(); expect(e.type).toBe('focus'); done(); @@ -388,14 +388,14 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should emit a focus event when a result loses focus', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).dispatchEvent(new FocusEvent('blur')); }); updateSearchTerm('searchTerm'); - component.focusEmitter.subscribe((e: FocusEvent) => { + component.searchFocus.subscribe((e: FocusEvent) => { expect(e).not.toBeNull(); expect(e.type).toBe('blur'); done(); @@ -404,7 +404,7 @@ describe('AlfrescoSearchAutocompleteComponent', () => { it('should give focus to the first result when focusResult() is called externally', (done) => { - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); let firstResult: any = element.querySelector('#result_row_0'); spyOn(firstResult, 'focus'); diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts index d0441a6aa9..bd409d59b2 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts @@ -44,22 +44,19 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { maxResults: number = 5; @Output() - preview: EventEmitter = new EventEmitter(); + fileSelect: EventEmitter = new EventEmitter(); @Output() - focusEmitter: EventEmitter = new EventEmitter(); + searchFocus: EventEmitter = new EventEmitter(); @Output() - cancelEmitter = new EventEmitter(); + cancel = new EventEmitter(); @Output() - resultsEmitter = new EventEmitter(); + resultsLoad = new EventEmitter(); @Output() - scrollBackEmitter = new EventEmitter(); - - @Output() - errorEmitter = new EventEmitter(); + scrollBack = new EventEmitter(); @ViewChild('resultsTableBody', {}) resultsTableBody: ElementRef; @@ -94,12 +91,12 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { results => { this.results = results.list.entries.slice(0, this.maxResults); this.errorMessage = null; - this.resultsEmitter.emit(this.results); + this.resultsLoad.emit(this.results); }, error => { this.results = null; this.errorMessage = error; - this.errorEmitter.emit(error); + this.resultsLoad.error(error); } ); } @@ -138,7 +135,7 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { onItemClick(node): void { if (node && node.entry) { if (node.entry.isFile) { - this.preview.emit({ + this.fileSelect.emit({ value: node }); } @@ -146,17 +143,17 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { } onRowFocus($event: FocusEvent): void { - this.focusEmitter.emit($event); + this.searchFocus.emit($event); } onRowBlur($event: FocusEvent): void { - this.focusEmitter.emit($event); + this.searchFocus.emit($event); } onRowEnter(node): void { if (node && node.entry) { if (node.entry.isFile) { - this.preview.emit({ + this.fileSelect.emit({ value: node }); } @@ -183,12 +180,12 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges { if (previousElement) { ( previousElement).focus(); } else { - this.scrollBackEmitter.emit($event); + this.scrollBack.emit($event); } } onRowEscape($event: KeyboardEvent): void { - this.cancelEmitter.emit($event); + this.cancel.emit($event); } } diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html index ab75efb3e5..2ea9201e75 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html @@ -24,7 +24,7 @@ + (fileSelect)="onFileClicked($event)" + (searchFocus)="onAutoCompleteFocus($event)" + (scrollBack)="onAutoCompleteReturn($event)" + (cancel)="onAutoCompleteCancel($event)"> diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts index dd7b0f1157..de1382c37c 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.spec.ts @@ -338,12 +338,12 @@ describe('AlfrescoSearchControlComponent', () => { describe('file preview', () => { - it('should emit a preview event when onFileClicked is called', () => { - spyOn(component.preview, 'emit'); + it('should emit a file select event when onFileClicked is called', () => { + spyOn(component.fileSelect, 'emit'); component.onFileClicked({ value: 'node12345' }); - expect(component.preview.emit).toHaveBeenCalledWith({ + expect(component.fileSelect.emit).toHaveBeenCalledWith({ 'value': 'node12345' }); }); diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts index 01f46edf71..0657cf121f 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts @@ -49,7 +49,7 @@ export class AlfrescoSearchControlComponent implements OnInit, OnDestroy { searchSubmit = new EventEmitter(); @Output() - preview = new EventEmitter(); + fileSelect = new EventEmitter(); @Output() expand = new EventEmitter(); @@ -158,7 +158,7 @@ export class AlfrescoSearchControlComponent implements OnInit, OnDestroy { } onFileClicked(event): void { - this.preview.emit({ + this.fileSelect.emit({ value: event.value }); } diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts index b4278936c4..8489511c7d 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts @@ -162,7 +162,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(searchService.getSearchNodesPromise).toHaveBeenCalled(); expect(element.querySelector('#result_user_0')).not.toBeNull(); @@ -181,7 +181,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(noResult)); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(element.querySelector('#search_no_result')).not.toBeNull(); done(); @@ -197,7 +197,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.reject(errorJson)); - component.errorEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => {}, () => { fixture.detectChanges(); let resultsEl = element.querySelector('[data-automation-id="search_result_table"]'); let errorEl = element.querySelector('[data-automation-id="search_error_message"]'); @@ -217,7 +217,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); expect(searchService.getSearchNodesPromise).toHaveBeenCalledWith('searchTerm2'); expect(element.querySelector('#result_user_0')).not.toBeNull(); @@ -238,7 +238,7 @@ describe('AlfrescoSearchComponent', () => { spyOn(searchService, 'getSearchNodesPromise') .and.returnValue(Promise.resolve(result)); - component.resultsEmitter.subscribe(() => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).click(); }); @@ -246,7 +246,7 @@ describe('AlfrescoSearchComponent', () => { component.searchTerm = 'searchTerm'; component.ngOnInit(); - component.preview.subscribe(e => { + component.preview.subscribe(() => { done(); }); }); @@ -258,7 +258,7 @@ describe('AlfrescoSearchComponent', () => { .and.returnValue(Promise.resolve(folderResult)); spyOn(component.preview, 'emit'); - component.resultsEmitter.subscribe(x => { + component.resultsLoad.subscribe(() => { fixture.detectChanges(); ( element.querySelector('#result_row_0')).click(); expect(component.preview.emit).not.toHaveBeenCalled(); diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts index e38bb3e761..cd71b4617a 100644 --- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts +++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts @@ -38,10 +38,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit { preview: EventEmitter = new EventEmitter(); @Output() - resultsEmitter = new EventEmitter(); - - @Output() - errorEmitter = new EventEmitter(); + resultsLoad = new EventEmitter(); results: any = null; @@ -112,13 +109,13 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit { .subscribe( results => { this.results = results.list.entries; - this.resultsEmitter.emit(this.results); + this.resultsLoad.emit(this.results); this.errorMessage = null; }, error => { this.results = null; this.errorMessage = error; - this.errorEmitter.emit(error); + this.resultsLoad.error(error); } ); }