fix(pagination): add direction to events (#931) (#950)

* fix: add a direction property to pagination events Co-authored-by: Marcus Krahl <[email protected]>
telekom · Mar 31, 2022 · 776c9ee · 776c9ee
1 parent d87f3c4
commit 776c9ee
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 18 deletions.
diff --git a/packages/components/src/components/pagination/pagination.spec.ts b/packages/components/src/components/pagination/pagination.spec.ts
@@ -53,8 +53,16 @@ describe('pagination', () => {
     ) as HTMLElement;
     buttonElement.click();
     await page.waitForChanges();
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpyLegacy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'FIRST' }),
+      })
+    );
+    expect(clickSpyLegacy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'FIRST' }),
+      })
+    );
   });
   it('should emit when clicked goPreviousPage()', async () => {
     const clickSpy = jest.fn();
@@ -66,8 +74,16 @@ describe('pagination', () => {
     ) as HTMLElement;
     buttonElement.click();
     await page.waitForChanges();
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpyLegacy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'PREVIOUS' }),
+      })
+    );
+    expect(clickSpyLegacy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'PREVIOUS' }),
+      })
+    );
   });
   it('should emit when clicked goNextPage()', async () => {
     const clickSpy = jest.fn();
@@ -79,10 +95,18 @@ describe('pagination', () => {
     ) as HTMLElement;
     buttonElement.click();
     await page.waitForChanges();
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpyLegacy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'NEXT' }),
+      })
+    );
+    expect(clickSpyLegacy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'NEXT' }),
+      })
+    );
   });
-  it('should emit when clicked golastPage()', async () => {
+  it('should emit when clicked goLastPage()', async () => {
     const clickSpy = jest.fn();
     const clickSpyLegacy = jest.fn();
     page.doc.addEventListener('scale-pagination', clickSpy);
@@ -92,7 +116,15 @@ describe('pagination', () => {
     ) as HTMLElement;
     buttonElement.click();
     await page.waitForChanges();
-    expect(clickSpy).toHaveBeenCalled();
-    expect(clickSpyLegacy).toHaveBeenCalled();
+    expect(clickSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'LAST' }),
+      })
+    );
+    expect(clickSpyLegacy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        detail: expect.objectContaining({ direction: 'LAST' }),
+      })
+    );
   });
 });
diff --git a/packages/components/src/components/pagination/pagination.tsx b/packages/components/src/components/pagination/pagination.tsx
@@ -35,6 +35,8 @@ import { emitEvent } from '../../utils/utils';
   [ ] Add icons to the icon components ?
 */
 
+export type PaginationEventDirection = 'FIRST' | 'PREVIOUS' | 'NEXT' | 'LAST';
+
 const name = 'pagination';
 @Component({
   tag: 'scale-pagination',
@@ -78,11 +80,13 @@ export class Pagination {
   @Event({ eventName: 'scale-pagination' }) scalePagination: EventEmitter<{
     startElement?: number;
     currentPage?: number;
+    direction: PaginationEventDirection;
   }>;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scalePagination' }) scalePaginationLegacy: EventEmitter<{
     startElement?: number;
     currentPage?: number;
+    direction: PaginationEventDirection;
   }>;
   /* 5. Private Properties (alphabetical) */
   /** Calculated width of largest text so buttons don't move while changing pages */
@@ -131,30 +135,31 @@ export class Pagination {
   /* 9. Local Methods */
   goFirstPage() {
     this.startElement = 0;
-    this.emitUpdate();
+    this.emitUpdate('FIRST');
   }
 
   goPreviousPage() {
     // Min to prevent going below 0
     this.startElement -= Math.min(this.pageSize, this.startElement);
-    this.emitUpdate();
+    this.emitUpdate('PREVIOUS');
   }
 
   goNextPage() {
     this.startElement += this.pageSize;
-    this.emitUpdate();
+    this.emitUpdate('NEXT');
   }
 
   goLastPage() {
     const p = this.pageSize;
     // Make sure startElement is multiple of pageSize
     this.startElement = Math.ceil((this.totalElements - p) / p) * p;
-    this.emitUpdate();
+    this.emitUpdate('LAST');
   }
 
-  emitUpdate() {
+  emitUpdate(direction: PaginationEventDirection) {
     const data = {
       startElement: this.startElement,
+      direction,
     };
     emitEvent(this, 'scalePagination', data);
   }

diff --git a/packages/components/src/components/pagination/readme.md b/packages/components/src/components/pagination/readme.md
@@ -25,10 +25,10 @@
 
 ## Events
 
-| Event              | Description                                                                                        | Type                                                            |
-| ------------------ | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
-| `scale-pagination` | Event triggered every time the data is edited, changing original rows data                         | `CustomEvent<{ startElement?: number; currentPage?: number; }>` |
-| `scalePagination`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ startElement?: number; currentPage?: number; }>` |
+| Event              | Description                                                                                        | Type                                                                                                 |
+| ------------------ | -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `scale-pagination` | Event triggered every time the data is edited, changing original rows data                         | `CustomEvent<{ startElement?: number; currentPage?: number; direction: PaginationEventDirection; }>` |
+| `scalePagination`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<{ startElement?: number; currentPage?: number; direction: PaginationEventDirection; }>` |
 
 
 ## Shadow Parts