diff --git a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.html b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.html index 95aecf807a..7dc5f77af9 100644 --- a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.html +++ b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.html @@ -2,5 +2,6 @@ [options]="options" [selected]="value" [ascending]="ascending" - (change)="onChanged($event)"> + (valueChange)="onValueChanged($event)" + (sortingChange)="onSortingChanged($event)"> diff --git a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts index 923244706a..69e0756c2b 100644 --- a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts +++ b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.spec.ts @@ -71,11 +71,23 @@ describe('SearchSortingPickerComponent', () => { spyOn(queryBuilder, 'update').and.stub(); component.ngOnInit(); - component.onChanged({ key: 'description', ascending: false }); + component.onValueChanged('description'); expect(queryBuilder.update).toHaveBeenCalled(); expect(queryBuilder.sorting.length).toBe(1); expect(queryBuilder.sorting[0].key).toEqual('description'); + expect(queryBuilder.sorting[0].ascending).toBeTruthy(); + }); + + it('should update query builder each time sorting is changed', () => { + spyOn(queryBuilder, 'update').and.stub(); + + component.ngOnInit(); + component.onSortingChanged(false); + + expect(queryBuilder.update).toHaveBeenCalled(); + expect(queryBuilder.sorting.length).toBe(1); + expect(queryBuilder.sorting[0].key).toEqual('name'); expect(queryBuilder.sorting[0].ascending).toBeFalsy(); }); }); diff --git a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts index 4e9333b303..6f0e22ed34 100644 --- a/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts +++ b/lib/content-services/search/components/search-sorting-picker/search-sorting-picker.component.ts @@ -39,13 +39,18 @@ export class SearchSortingPickerComponent implements OnInit { const primary = this.queryBuilder.getPrimarySorting(); if (primary) { this.value = primary.key; - this.ascending = primary.ascending; + this.ascending = this.getSortingOrder(); } } - onChanged(sorting: { key: string, ascending: boolean }) { - this.value = sorting.key; - this.ascending = sorting.ascending; + onValueChanged(key: string) { + this.value = key; + this.ascending = this.getSortingOrder(); + this.applySorting(); + } + + onSortingChanged(ascending: boolean) { + this.ascending = ascending; this.applySorting(); } @@ -67,4 +72,13 @@ export class SearchSortingPickerComponent implements OnInit { } } + private getSortingOrder(): boolean { + const option = this.findOptionByKey(this.value); + if (option) { + return option.ascending; + } + + return this.queryBuilder.getPrimarySorting().ascending; + } + } diff --git a/lib/core/sorting-picker/sorting-picker.component.html b/lib/core/sorting-picker/sorting-picker.component.html index a7750f96b8..57364c858f 100644 --- a/lib/core/sorting-picker/sorting-picker.component.html +++ b/lib/core/sorting-picker/sorting-picker.component.html @@ -1,5 +1,5 @@ - + {{ option.label | translate }} diff --git a/lib/core/sorting-picker/sorting-picker.component.spec.ts b/lib/core/sorting-picker/sorting-picker.component.spec.ts index 7d8a8cf3e5..7841a1dd5a 100644 --- a/lib/core/sorting-picker/sorting-picker.component.spec.ts +++ b/lib/core/sorting-picker/sorting-picker.component.spec.ts @@ -27,23 +27,19 @@ describe('SortingPickerComponent', () => { it('should raise changed event on changing value', (done) => { component.selected = 'key1'; - component.ascending = false; - component.change.subscribe((event: { key: string, ascending: boolean }) => { - expect(event.key).toBe('key2'); - expect(event.ascending).toBeFalsy(); + component.valueChange.subscribe((key: string) => { + expect(key).toBe('key2'); done(); }); - component.onChanged( { value: 'key2' }); + component.onOptionChanged( { value: 'key2' }); }); it('should raise changed event on changing direction', (done) => { - component.selected = 'key1'; component.ascending = false; - component.change.subscribe((event: { key: string, ascending: boolean }) => { - expect(event.key).toBe('key1'); - expect(event.ascending).toBeTruthy(); + component.sortingChange.subscribe((ascending: boolean) => { + expect(ascending).toBeTruthy(); done(); }); component.toggleSortDirection(); diff --git a/lib/core/sorting-picker/sorting-picker.component.ts b/lib/core/sorting-picker/sorting-picker.component.ts index 9dd7536322..da9df6077a 100644 --- a/lib/core/sorting-picker/sorting-picker.component.ts +++ b/lib/core/sorting-picker/sorting-picker.component.ts @@ -38,24 +38,21 @@ export class SortingPickerComponent { @Input() ascending = true; - /** Raised each time sorting key or direction gets changed. */ + /** Raised each time sorting key gets changed. */ @Output() - change = new EventEmitter<{ key: string, ascending: boolean }>(); + valueChange = new EventEmitter(); - onChanged(event: MatSelectChange) { + /** Raised each time direction gets changed. */ + @Output() + sortingChange = new EventEmitter(); + + onOptionChanged(event: MatSelectChange) { this.selected = event.value; - this.raiseChangedEvent(); + this.valueChange.emit(this.selected); } toggleSortDirection() { this.ascending = !this.ascending; - this.raiseChangedEvent(); - } - - private raiseChangedEvent() { - this.change.emit({ - key: this.selected, - ascending: this.ascending - }); + this.sortingChange.emit(this.ascending); } }