Repository: ambari Updated Branches: refs/heads/trunk cbce5e879 -> 38f6740cd
AMBARI-22376 Log Search UI: add navigation to first and last page. (Istvan Tobias via ababiichuk) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/38f6740c Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/38f6740c Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/38f6740c Branch: refs/heads/trunk Commit: 38f6740cdacc0c18e87f1b5b979e1ddb9519dcd8 Parents: cbce5e8 Author: Istvan Tobias <tobias.ist...@gmail.com> Authored: Tue Nov 7 17:00:58 2017 +0200 Committer: ababiichuk <ababiic...@hortonworks.com> Committed: Tue Nov 7 17:33:35 2017 +0200 ---------------------------------------------------------------------- .../pagination-controls.component.html | 15 ++- .../pagination-controls.component.spec.ts | 101 +++++++++++++++++++ .../pagination-controls.component.ts | 71 ++++++++++++- 3 files changed, 177 insertions(+), 10 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/38f6740c/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.html index c227a2b..370d1c7 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.html @@ -14,10 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. --> - -<button class="btn btn-link" [disabled]="currentPage === 0" (click)="updateValue(true)"> - <span class="pagination-control fa fa-chevron-left"></span> +<button class="btn btn-link" [disabled]="!hasPreviousPage()" (click)="setFirstPage()"> + <span class="pagination-control fa fa-angle-double-left"></span> +</button> +<button class="btn btn-link" [disabled]="!hasPreviousPage()" (click)="setPreviousPage()"> + <span class="pagination-control fa fa-angle-left"></span> +</button> +<button class="btn btn-link" [disabled]="!hasNextPage()" (click)="setNextPage()"> + <span class="pagination-control fa fa-angle-right"></span> </button> -<button class="btn btn-link" [disabled]="currentPage === pagesCount - 1" (click)="updateValue()"> - <span class="pagination-control fa fa-chevron-right"></span> +<button class="btn btn-link" [disabled]="!hasNextPage()" (click)="setLastPage()"> + <span class="pagination-control fa fa-angle-double-right"></span> </button> http://git-wip-us.apache.org/repos/asf/ambari/blob/38f6740c/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.spec.ts index 489f79c..999609c 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.spec.ts @@ -34,10 +34,111 @@ describe('PaginationControlsComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(PaginationControlsComponent); component = fixture.componentInstance; + component.registerOnChange(() => {}); + component.pagesCount = 3; + component.totalCount = 30; fixture.detectChanges(); }); it('should create component', () => { expect(component).toBeTruthy(); }); + + it('should the hasNextPage function return true when the currentPage is less than the pagesCount', () => { + component.pagesCount = 3; + component.totalCount = 30; + fixture.detectChanges(); + expect(component.hasNextPage()).toBe(true); + }); + it('should the hasNextPage function return false when the currentPage is equal than the pagesCount', () => { + component.currentPage = 3; + fixture.detectChanges(); + expect(component.hasNextPage()).toBe(false); + }); + it('should the hasNextPage function return false when the pagesCount is 0', () => { + component.pagesCount = 0; + component.totalCount = 0; + component.currentPage = 0; + fixture.detectChanges(); + expect(component.hasNextPage()).toBe(false); + }); + + it('should the hasPreviousPage function return true when the currentPage is greater than 0 and the pagesCount is greater than 0', () => { + component.currentPage = 1; + fixture.detectChanges(); + expect(component.hasPreviousPage()).toBe(true); + }); + it('should the hasPreviousPage function return false when the currentPage is equal to 0', () => { + component.currentPage = 0; + fixture.detectChanges(); + expect(component.hasPreviousPage()).toBe(false); + }); + it('should the hasPreviousPage function return false when the pagesCount is 0', () => { + component.pagesCount = 0; + component.totalCount = 0; + fixture.detectChanges(); + expect(component.hasPreviousPage()).toBe(false); + }); + + it('should the setNextPage function increment the value/currentPage when it is less then the pagesCount', () => { + let initialPage = 0; + let pagesCount = 3; + component.pagesCount = pagesCount; + component.totalCount = 30; + component.currentPage = initialPage; + fixture.detectChanges(); + component.setNextPage(); + fixture.detectChanges(); + expect(component.currentPage).toEqual(initialPage + 1); + }); + + it('should not the setNextPage function increment the value/currentPage when it is on the last page', () => { + let pagesCount = 3; + component.pagesCount = pagesCount; + component.totalCount = 30; + component.currentPage = pagesCount - 1; + fixture.detectChanges(); + component.setNextPage(); + fixture.detectChanges(); + expect(component.currentPage).toEqual(pagesCount - 1); + }); + + it('should the setPreviousPage function decrement the value/currentPage', () => { + let initialPage = 1; + component.pagesCount = 3; + component.totalCount = 30; + component.currentPage = initialPage; + fixture.detectChanges(); + component.setPreviousPage(); + fixture.detectChanges(); + expect(component.currentPage).toEqual(initialPage - 1); + }); + + it('should not the setPreviousPage function decrement the value/currentPage when it is equal to 0', () => { + component.pagesCount = 3; + component.totalCount = 30; + component.currentPage = 0; + fixture.detectChanges(); + component.setPreviousPage(); + fixture.detectChanges(); + expect(component.currentPage).toEqual(0); + }); + + it('should the setFirstPage set the value/currentPage to 0', () => { + component.pagesCount = 3; + component.totalCount = 30; + component.currentPage = 1; + fixture.detectChanges(); + component.setFirstPage(); + fixture.detectChanges(); + expect(component.currentPage).toEqual(0); + }); + + + it('should the setLastPage set the value/currentPage to the value of pagesCount', () => { + component.setLastPage(); + fixture.detectChanges(); + expect(component.currentPage).toEqual(component.pagesCount - 1); + }); + }); http://git-wip-us.apache.org/repos/asf/ambari/blob/38f6740c/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.ts index c71844c..81676a9 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/pagination-controls/pagination-controls.component.ts @@ -51,13 +51,74 @@ export class PaginationControlsComponent implements ControlValueAccessor { } set value(newValue: number) { - this.currentPage = newValue; - this.currentPageChange.emit(newValue); - this.onChange(newValue); + if (this.isValidValue(newValue)) { // this is the last validation check + this.currentPage = newValue; + this.currentPageChange.emit(newValue); + this.onChange(newValue); + } else { + throw new Error(`Invalid value ${newValue}. The currentPage should be between 0 and ${this.pagesCount}.`); + } + } + + /** + * A simple check if the given value is valid for the current pagination instance + * @param {number} value The new value to test + * @returns {boolean} + */ + private isValidValue(value: number): boolean { + return value <= this.pagesCount || value >= 0; + } + + /** + * The goal is to set the value to the first page... obviously to zero. It is just to have a centralized api for that. + */ + setFirstPage(): void { + this.value = 0; + } + + /** + * The goal is to set the value to the last page which is the pagesCount property anyway. + */ + setLastPage(): void { + this.value = this.pagesCount - 1; + } + + /** + * The goal is to decrease the value (currentPage) property if it is possible (checking with 'hasPreviousPage'). + * @returns {number} The new value of the currentPage + */ + setPreviousPage(): number { + if (this.hasPreviousPage()) { + this.value -= 1; + } + return this.value; + } + + /** + * The goal is to increase the value (currentPage) property if it is possible (checking with 'hasNextPage'). + * @returns {number} The new value of the currentPage + */ + setNextPage(): number { + if (this.hasNextPage()){ + this.value += 1; + } + return this.value; + } + + /** + * The goal is to have a single source of true to check if we can set a next page or not. + * @returns {boolean} + */ + hasNextPage(): boolean { + return this.pagesCount > 0 && this.value < this.pagesCount - 1; } - updateValue(isDecrement?: boolean) { - isDecrement? this.value-- : this.value++; + /** + * The goal is to have a single source of true to check if we can set a previous page or not. + * @returns {boolean} + */ + hasPreviousPage(): boolean { + return this.pagesCount > 0 && this.value > 0; } writeValue() {