Rename search outputs after feedback from @DenysVuyka

Refs #371
This commit is contained in:
Will Abson
2016-10-31 16:36:20 +00:00
parent 3f440215b9
commit c100412538
9 changed files with 63 additions and 66 deletions

View File

@@ -1,5 +1,5 @@
<alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm" [autocomplete]="false"
(searchSubmit)="onSearchSubmit($event);" (searchChange)="onSearchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
(searchSubmit)="onSearchSubmit($event);" (searchChange)="onSearchTermChange($event);" (expand)="onExpandToggle($event);" (fileSelect)="onFileClicked($event)"></alfresco-search-control>
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"

View File

@@ -92,7 +92,8 @@ Also make sure you include these dependencies in your .html page:
<alfresco-search-control [searchTerm]="searchTerm"
inputType="search"
(searchChange)="onSearchChange($event);"
(searchSubmit)="onSearchSubmit($event);">
(searchSubmit)="onSearchSubmit($event);"
(fileSelect)="onSearchResultSelect($event);">
</alfresco-search-control>
```
@@ -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.<br />
**searchSubmit**: Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object.<br />
**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

View File

@@ -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('<b _ngcontent-a-1="">MyDoc</b>');
@@ -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 = <any> 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 = <any> 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();
(<any> 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();
(<any> 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();
(<any> 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();
(<any> 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();
(<any> 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();
(<any> 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');

View File

@@ -44,22 +44,19 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
maxResults: number = 5;
@Output()
preview: EventEmitter<any> = new EventEmitter();
fileSelect: EventEmitter<any> = new EventEmitter();
@Output()
focusEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
searchFocus: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
@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 = <any>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) {
(<any> previousElement).focus();
} else {
this.scrollBackEmitter.emit($event);
this.scrollBack.emit($event);
}
}
onRowEscape($event: KeyboardEvent): void {
this.cancelEmitter.emit($event);
this.cancel.emit($event);
}
}

View File

@@ -24,7 +24,7 @@
</form>
<alfresco-search-autocomplete #autocomplete *ngIf="autocompleteEnabled"
[searchTerm]="autocompleteSearchTerm" [ngClass]="{active: searchActive, valid: searchValid}"
(preview)="onFileClicked($event)"
(focusEmitter)="onAutoCompleteFocus($event)"
(scrollBackEmitter)="onAutoCompleteReturn($event)"
(cancelEmitter)="onAutoCompleteCancel($event)"></alfresco-search-autocomplete>
(fileSelect)="onFileClicked($event)"
(searchFocus)="onAutoCompleteFocus($event)"
(scrollBack)="onAutoCompleteReturn($event)"
(cancel)="onAutoCompleteCancel($event)"></alfresco-search-autocomplete>

View File

@@ -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'
});
});

View File

@@ -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
});
}

View File

@@ -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();
(<HTMLTableRowElement> 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();
(<HTMLTableRowElement> element.querySelector('#result_row_0')).click();
expect(component.preview.emit).not.toHaveBeenCalled();

View File

@@ -38,10 +38,7 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
preview: EventEmitter<any> = 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 = <any>error;
this.errorEmitter.emit(error);
this.resultsLoad.error(error);
}
);
}