feat(Paginator): allow next button disable override

If isNextButton is set, it overrides the default behavior of disabling the next button based on pages remaining
GetTerminus · Mar 5, 2020 · 744b1c4 · 744b1c4
1 parent dd6c648
commit 744b1c4
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/projects/library/paginator/src/paginator.component.html b/projects/library/paginator/src/paginator.component.html
@@ -57,26 +57,26 @@
       *ngIf="isSimpleMode"
     >{{ currentPageLabel }}</div>
 
-    <ts-tooltip [tooltipValue]="isLastPage(currentPageIndex) ? '' : nextPageTooltip">
+    <ts-tooltip [tooltipValue]="isNextButtonDisabled(currentPageIndex) ? '' : nextPageTooltip">
       <ts-button
         class="qa-paginator-next-page-button"
         [theme]="theme"
         [iconName]="nextPageIcon"
-        [isDisabled]="isLastPage(currentPageIndex) || !pagesArray?.length"
+        [isDisabled]="isNextButtonDisabled(currentPageIndex)"
         (clicked)="changePage(currentPageIndex + 1, currentPageIndex, pagesArray)"
       ></ts-button>
     </ts-tooltip>
 
 
   <ts-tooltip
-    [tooltipValue]="isLastPage(currentPageIndex) ? '' : lastPageTooltip"
+    [tooltipValue]="isNextButtonDisabled(currentPageIndex) ? '' : lastPageTooltip"
     *ngIf="!isSimpleMode"
   >
     <ts-button
         class="qa-paginator-last-page-button"
         [theme]="theme"
         [iconName]="lastPageIcon"
-        [isDisabled]="isLastPage(currentPageIndex) || !pagesArray?.length"
+        [isDisabled]="isNextButtonDisabled(currentPageIndex)"
         (clicked)="changePage(lastPageIndex, currentPageIndex, pagesArray)"
       ></ts-button>
     </ts-tooltip>

diff --git a/projects/library/paginator/src/paginator.component.spec.ts b/projects/library/paginator/src/paginator.component.spec.ts
@@ -367,6 +367,42 @@ describe(`TsPaginatorComponent`, function() {
     }));
   });
 
+  describe('disable next button', () => {
+    let fixture: ComponentFixture<TestComponents.SimpleMode>;
+    let hostComponent: TestComponents.SimpleMode;
+
+    beforeEach(() => {
+      fixture = createComponent(TestComponents.SimpleMode);
+      hostComponent = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    test(`shouldn't disable next button if not set`, () => {
+      const btn = fixture.debugElement.query(By.css('.qa-paginator-next-page-button'));
+      expect(btn.attributes['isNextDisabled']).toBeUndefined();
+      expect(btn.nativeElement.querySelector('button').disabled).toBeFalsy();
+    });
+
+    test(`should not disable next button if set to false`, fakeAsync(() => {
+      const instance = getPaginatorInstance(fixture);
+      instance.isNextDisabled = false;
+      tick(1000);
+      fixture.detectChanges();
+      const btn = fixture.debugElement.query(By.css('.qa-paginator-next-page-button'));
+      expect(btn.nativeElement.querySelector('button').disabled).toEqual(false);
+    }));
+
+    test(`should disable next button if set`, fakeAsync(() => {
+      const instance = getPaginatorInstance(fixture);
+      instance.isNextDisabled = true;
+      tick(1000);
+      fixture.detectChanges();
+      const btn = fixture.debugElement.query(By.css('.qa-paginator-next-page-button'));
+      expect(btn.nativeElement.querySelector('button').disabled).toBeTruthy();
+    }));
+
+  });
+
 });
 
 

diff --git a/projects/library/paginator/src/paginator.component.ts b/projects/library/paginator/src/paginator.component.ts
@@ -268,6 +268,12 @@ export class TsPaginatorComponent implements OnChanges, AfterViewInit {
   @Input()
   public isSimpleMode = false;
 
+  /**
+   * Override the disabling of the next button
+   */
+  @Input()
+  public isNextDisabled: boolean | undefined;
+
   /**
    * Emit a page selected event
    */
@@ -400,6 +406,18 @@ export class TsPaginatorComponent implements OnChanges, AfterViewInit {
     return false;
   }
 
+  /**
+   * Check if the next button is disabled
+   *
+   * @param page - The number of the current page
+   * @return A boolena representing if the button is disabled.
+   */
+  public isNextButtonDisabled(page: number): boolean {
+    if (this.isNextDisabled === undefined) {
+      return this.isLastPage(page) || !this.pagesArray || !this.pagesArray.length;
+    }
+    return this.isNextDisabled;
+  }
 
   /**
    * Determine if the string exists