feat(Paginator): support for simple mode

Simple mode removes the page-jump menu and the jump-to-last-page button

ISSUES CLOSED: #1706

demo/app/components/paginator/paginator.component.html

@@ -23,6 +23,13 @@ <h3 tsCardTitle tsVerticalSpacing>
     Pagination is zero-based:
     <input type="checkbox" [(ngModel)]="zeroBased" (ngModelChange)="updatePages($event)">
   </label>
+
+  <br>
+
+  <label>
+    Simple mode:
+    <input type="checkbox" [(ngModel)]="simpleMode">
+  </label>
 </ts-card>
 
 
@@ -34,6 +41,7 @@ <h3 tsCardTitle tsVerticalSpacing>
   [menuLocation]="location"
   [paginatorMessageTemplate]="myTemplate"
   [isZeroBased]="zeroBased"
+  [isSimpleMode]="simpleMode"
   recordCountTooHighMessage="Please refine your filters."
   (recordsPerPageChange)="perPageChange($event)"
   (pageSelect)="onPageSelect($event)"

demo/app/components/paginator/paginator.component.ts

@@ -22,6 +22,7 @@ export class PaginatorComponent {
   location = 'below';
   pages: number[] = [0, 1, 2, 3, 4, 5];
   zeroBased = true;
+  simpleMode = false;
 
   @ViewChild(TsPaginatorComponent, {static: true})
   paginator!: TsPaginatorComponent;

terminus-ui/button/src/button.component.scss

@@ -56,9 +56,9 @@ $shadow-transition: box-shadow $icon-transition-duration-expand $g-material-shad
 //  A button component
 //
 .ts-button {
+  $vertical-alignment-adjustment-for-inputs: 4px 0;
   @include reset;
   display: inline-block;
-  $vertical-alignment-adjustment-for-inputs: 4px 0;
   margin: $vertical-alignment-adjustment-for-inputs;
 
   // Top level styles should be nested here

terminus-ui/paginator/src/paginator.component.html

@@ -1,6 +1,9 @@
-<div class="c-paginator">
+<div
+  class="c-paginator qa-paginator"
+  [class.c-paginator--simple-mode]="isSimpleMode"
+>
 
-  <div fxLayout="row" fxLayoutAlign="start start">
+<div fxLayout="row" fxLayoutAlign="start start">
 
     <ts-select
       class="qa-paginator-per-page-select"
@@ -40,6 +43,7 @@
 
 
     <ts-menu
+      *ngIf="!isSimpleMode"
       class="qa-paginator-current-page-menu"
       [theme]="theme"
       [menuItemsTemplate]="menuItems"
@@ -48,6 +52,10 @@
       [ngClass]="{'disabled': menuIsDisabled(pagesArray?.length)}"
     >{{ currentPageLabel }}</ts-menu>
 
+    <div
+      class="c-paginator__current-page"
+      *ngIf="isSimpleMode"
+    >{{ currentPageLabel }}</div>
 
     <ts-tooltip [tooltipValue]="isLastPage(currentPageIndex) ? '' : nextPageTooltip">
       <ts-button
@@ -60,8 +68,11 @@
     </ts-tooltip>
 
 
-    <ts-tooltip [tooltipValue]="isLastPage(currentPageIndex) ? '' : lastPageTooltip">
-      <ts-button
+  <ts-tooltip
+    [tooltipValue]="isLastPage(currentPageIndex) ? '' : lastPageTooltip"
+    *ngIf="!isSimpleMode"
+  >
+    <ts-button
         class="qa-paginator-last-page-button"
         [theme]="theme"
         [iconName]="lastPageIcon"

terminus-ui/paginator/src/paginator.component.scss

@@ -32,6 +32,21 @@
     text-align: right;
   }
 
+  // <div> container for current page in simple mode
+  .c-paginator__current-page {
+    $button-margin: 4px;
+    $width-to-match-menu: 8em;
+    display: inline-block;
+    // Center vertically
+    line-height: 2.6em;
+    // Match margin added to buttons
+    margin-right: $button-margin;
+    margin-top: $button-margin;
+    text-align: center;
+    // Add a width so the layout is close to the original
+    width: $width-to-match-menu;
+  }
+
   .ts-select,
   .ts-button {
     margin-right: spacing(small, 2);

terminus-ui/paginator/src/paginator.component.spec.ts

@@ -10,6 +10,8 @@ import { createComponent as createComponentInner } from '@terminus/ngx-tools/tes
 import * as TestComponents from '../testing/src/test-components';
 import {
   clickToChangePage,
+  expectAllButtonsEnabled,
+  getPaginatorInstance,
   updateRecordsPerPage,
 } from '../testing/src/test-helpers';
 import { TsPaginatorMenuItem } from './paginator.component';
@@ -68,14 +70,14 @@ describe(`TsPaginatorComponent`, function() {
     });
 
     test(`should go to the next page`, fakeAsync(() => {
-      const hostComponent = fixture.componentInstance;
       fixture.detectChanges();
       const dir = 'next';
       tick(2000);
       clickToChangePage(fixture, dir);
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
-      const nextPageIndex = hostComponent.paginatorComponent.nextPageIndex;
+      const instance = getPaginatorInstance(fixture);
+      const nextPageIndex = instance.nextPageIndex;
 
       expect(titleEl.textContent).toContain('11 - 20 of 100');
       expect(nextPageIndex).toEqual(1);
@@ -151,42 +153,32 @@ describe(`TsPaginatorComponent`, function() {
       fixture.detectChanges();
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
-      const firstPageIndex = hostComponent.paginatorComponent.firstPageIndex;
+      const instance = getPaginatorInstance(fixture);
+      const firstPageIndex = instance.firstPageIndex;
 
       expect(titleEl.textContent).toContain('1 - 10 of 100');
-      expect(hostComponent.paginatorComponent.isFirstPage(firstPageIndex)).toEqual(true);
+      expect(instance.isFirstPage(firstPageIndex)).toEqual(true);
     });
 
-    /** TODO revisit this after menu component has been converted to INT
+    /**
+     * TODO: revisit this after menu component has been converted to integration tests
      * menu:  https://github.com/GetTerminus/terminus-ui/issues/1288
      * paginator: https://github.com/GetTerminus/terminus-ui/issues/1512
-     *
-    test(`should change page when another page is selected from the menu`, () => {});
      */
+    test.todo(`should change page when another page is selected from the menu`);
 
     test(`should show all results if they fit on a page, zeroBased`, () => {
       hostComponent.totalRecords = 8;
       fixture.detectChanges();
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
-      const firstPageIndex = hostComponent.paginatorComponent.firstPageIndex;
+      const instance = getPaginatorInstance(fixture);
+      const firstPageIndex = instance.firstPageIndex;
 
       expect(titleEl.textContent).toContain('1 - 8 of 8');
-      expect(hostComponent.paginatorComponent.isFirstPage(firstPageIndex)).toEqual(true);
-
-      const firstPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-first-page-button .c-button`)).nativeElement as HTMLButtonElement;
-      const previousPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-previous-page-button .c-button`)).nativeElement as HTMLButtonElement;
-      const lastPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-last-page-button .c-button`)).nativeElement as HTMLButtonElement;
-      const nextPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-next-page-button .c-button`)).nativeElement as HTMLButtonElement;
+      expect(instance.isFirstPage(firstPageIndex)).toEqual(true);
 
-      expect(firstPageBut.disabled).toEqual(true);
-      expect(previousPageBut.disabled).toEqual(true);
-      expect(lastPageBut.disabled).toEqual(true);
-      expect(nextPageBut.disabled).toEqual(true);
+      expectAllButtonsEnabled(fixture);
     });
 
     test(`should show all results if they fit on a page, not zeroBased`, () => {
@@ -195,24 +187,13 @@ describe(`TsPaginatorComponent`, function() {
       fixture.detectChanges();
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
-      const firstPageIndex = hostComponent.paginatorComponent.firstPageIndex;
+      const instance = getPaginatorInstance(fixture);
+      const firstPageIndex = instance.firstPageIndex;
 
       expect(titleEl.textContent).toContain('1 - 8 of 8');
-      expect(hostComponent.paginatorComponent.isFirstPage(firstPageIndex)).toEqual(true);
+      expect(instance.isFirstPage(firstPageIndex)).toEqual(true);
 
-      const firstPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-first-page-button .c-button`)).nativeElement as HTMLButtonElement;
-      const previousPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-previous-page-button .c-button`)).nativeElement as HTMLButtonElement;
-      const lastPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-last-page-button .c-button`)).nativeElement as HTMLButtonElement;
-      const nextPageBut =
-        fixture.debugElement.query(By.css(`.qa-paginator-next-page-button .c-button`)).nativeElement as HTMLButtonElement;
-
-      expect(firstPageBut.disabled).toEqual(true);
-      expect(previousPageBut.disabled).toEqual(true);
-      expect(lastPageBut.disabled).toEqual(true);
-      expect(nextPageBut.disabled).toEqual(true);
+      expectAllButtonsEnabled(fixture);
     });
 
     test(`should specify partial results on the last page, zeroBased`, fakeAsync(() => {
@@ -223,10 +204,11 @@ describe(`TsPaginatorComponent`, function() {
       clickToChangePage(fixture, 'last');
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
-      const lastPageIndex = hostComponent.paginatorComponent.lastPageIndex;
+      const instance = getPaginatorInstance(fixture);
+      const lastPageIndex = instance.lastPageIndex;
 
       expect(titleEl.textContent).toContain('91 - 95 of 95');
-      expect(hostComponent.paginatorComponent.isLastPage(lastPageIndex)).toEqual(true);
+      expect(instance.isLastPage(lastPageIndex)).toEqual(true);
     }));
 
     test(`should specify partial results on the last page, not zeroBased`, fakeAsync(() => {
@@ -237,10 +219,11 @@ describe(`TsPaginatorComponent`, function() {
       clickToChangePage(fixture, 'last');
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
-      const lastPageIndex = hostComponent.paginatorComponent.lastPageIndex;
+      const instance = getPaginatorInstance(fixture);
+      const lastPageIndex = instance.lastPageIndex;
 
       expect(titleEl.textContent).toContain('11 - 15 of 15');
-      expect(hostComponent.paginatorComponent.isLastPage(lastPageIndex)).toEqual(true);
+      expect(instance.isLastPage(lastPageIndex)).toEqual(true);
     }));
 
     test(`should return to current page if invalid page is requested`, () => {
@@ -249,50 +232,53 @@ describe(`TsPaginatorComponent`, function() {
         value: 10,
       };
       fixture.detectChanges();
-      hostComponent.paginatorComponent.currentPageChanged(requestedPage);
+      const instance = getPaginatorInstance(fixture);
+      instance.currentPageChanged(requestedPage);
 
       const titleEl = fixture.debugElement.query(By.css('.qa-paginator-current-page-menu .c-button__content')).nativeElement as HTMLElement;
 
       expect(titleEl.textContent).toContain('91 - 100 of 100');
-      expect(hostComponent.paginatorComponent.currentPageIndex).toEqual(hostComponent.paginatorComponent.lastPageIndex);
+      expect(instance.currentPageIndex).toEqual(instance.lastPageIndex);
     });
   });
 
   describe(`isZeroBased`, () => {
 
     test(`should be zero-based by default`, () => {
       const fixture = createComponent(TestComponents.Basic);
-      const hostComponent = fixture.componentInstance;
       fixture.detectChanges();
+      const instance = getPaginatorInstance(fixture);
 
-      expect(hostComponent.paginatorComponent.isZeroBased).toEqual(true);
-      expect(hostComponent.paginatorComponent.firstPageIndex).toEqual(0);
-      expect(hostComponent.paginatorComponent.currentPageIndex).toEqual(0);
+      expect(instance.isZeroBased).toEqual(true);
+      expect(instance.firstPageIndex).toEqual(0);
+      expect(instance.currentPageIndex).toEqual(0);
     });
 
     test(`should not be zero-based when set`, () => {
       const fixture = createComponent(TestComponents.ZeroBased);
+      const instance = getPaginatorInstance(fixture);
       const hostComponent = fixture.componentInstance;
       hostComponent.isZeroBased = false;
       fixture.detectChanges();
 
-      expect(hostComponent.paginatorComponent.isZeroBased).toEqual(false);
-      expect(hostComponent.paginatorComponent.firstPageIndex).toEqual(1);
-      expect(hostComponent.paginatorComponent.currentPageIndex).toEqual(1);
+      expect(instance.isZeroBased).toEqual(false);
+      expect(instance.firstPageIndex).toEqual(1);
+      expect(instance.currentPageIndex).toEqual(1);
     });
 
     test(`should adjust lastPageIndex`, () => {
       const fixture = createComponent(TestComponents.ZeroBased);
+      const instance = getPaginatorInstance(fixture);
       const hostComponent = fixture.componentInstance;
       hostComponent.isZeroBased = true;
       fixture.detectChanges();
 
-      expect(hostComponent.paginatorComponent.lastPageIndex).toEqual(9);
+      expect(instance.lastPageIndex).toEqual(9);
 
       hostComponent.isZeroBased = false;
       fixture.detectChanges();
 
-      expect(hostComponent.paginatorComponent.lastPageIndex).toEqual(10);
+      expect(instance.lastPageIndex).toEqual(10);
     });
   });
 
@@ -301,12 +287,12 @@ describe(`TsPaginatorComponent`, function() {
 
     test(`should not display message when totalRecords is less than maxPreferredRecords`, () => {
       const fixture = createComponent(TestComponents.RecordsPerPage);
-      const hostComponent = fixture.componentInstance;
+      const instance = getPaginatorInstance(fixture);
       fixture.detectChanges();
 
       expect(fixture.debugElement.query(By.css('.c-paginator__message'))).toBeFalsy();
-      expect(hostComponent.paginatorComponent.totalRecords).toEqual(100);
-      expect(hostComponent.paginatorComponent.maxPreferredRecords).toEqual(100);
+      expect(instance.totalRecords).toEqual(100);
+      expect(instance.maxPreferredRecords).toEqual(100);
     });
 
     test(`should display message when totalRecords is greater than maxPreferredRecords`, () => {
@@ -315,10 +301,8 @@ describe(`TsPaginatorComponent`, function() {
       hostComponent.totalRecords = 125;
       fixture.detectChanges();
 
-      // check default message
       const messageEl = fixture.debugElement.query(By.css('.c-paginator__message')).nativeElement as HTMLElement;
-
-      expect(messageEl.textContent.trim()).toEqual('That\'s a lot of results! Try refining your filters for better results.');
+      expect(messageEl.textContent!.trim()).toEqual('That\'s a lot of results! Try refining your filters for better results.');
     });
 
     test(`should update message text`, () => {
@@ -329,31 +313,35 @@ describe(`TsPaginatorComponent`, function() {
 
       const messageEl = fixture.debugElement.query(By.css('.c-paginator__message')).nativeElement as HTMLElement;
 
-      expect(messageEl.textContent.trim()).toEqual('There are too many results!');
+      expect(messageEl.textContent!.trim()).toEqual('There are too many results!');
     });
 
     test(`should set maxPreferredRecords`, () => {
       const fixture = createComponent(TestComponents.RecordsCount);
       const hostComponent = fixture.componentInstance;
+      const instance = getPaginatorInstance(fixture);
       hostComponent.maxPreferredRecords = 200;
       fixture.detectChanges();
 
-      expect(hostComponent.paginatorComponent.maxPreferredRecords).toEqual(200);
+      expect(instance.maxPreferredRecords).toEqual(200);
       expect(fixture.debugElement.query(By.css('.c-paginator__message'))).toBeFalsy();
     });
   });
 
 
-/* TODO: revisit this after tooltip tests have been converted to INT
- * tooltip:   https://github.com/GetTerminus/terminus-ui/issues/1296
- * paginator: https://github.com/GetTerminus/terminus-ui/issues/1512
+  /*
+   * TODO: revisit this after tooltip tests have been converted to integration tests
+   * tooltip:   https://github.com/GetTerminus/terminus-ui/issues/1296
+   * paginator: https://github.com/GetTerminus/terminus-ui/issues/1512
+   */
   describe(`tooltips`, () => {
 
-    test(`should display default tooltips by default`, () => { });
+    test.todo(`should display default tooltips by default`);
+
+    test.todo(`should update tooltips if set`);
 
-    test(`should update tooltips if set`, () => { });
   });
- */
+
 });