fix: pagination items per page options (#313)

* feat(pagination): add select options property * docs(pagination): add customization to canvas * style(pagination): change page list on small screens * fix(pagination): make items-per-page-options property only Co-authored-by: Murat Çorlu <[email protected]> Co-authored-by: Murat Çorlu <[email protected]>
Trendyol · Nov 11, 2022 · 2a4e560 · 2a4e560
1 parent 1b3b36a
commit 2a4e560
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 62 deletions.
diff --git a/src/components/pagination/bl-pagination.css b/src/components/pagination/bl-pagination.css
@@ -1,9 +1,9 @@
-:host {
-  width: max-content;
-}
-
 .pagination {
   display: flex;
+  flex-wrap:wrap;
+  justify-content: center;
+  max-width:max-content;
+  gap: var(--bl-size-s);
 }
 
 .pagination * {
@@ -35,8 +35,9 @@
 
 .pagination-helpers {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
-  margin-right: var(--bl-size-s);
   gap: var(--bl-size-m);
 }
 
@@ -63,3 +64,9 @@ bl-input {
 bl-select {
   width:128px;
 }
+
+@media only screen and (max-width: 768px) {
+  label {
+    display:none;
+  }
+}
diff --git a/src/components/pagination/bl-pagination.stories.mdx b/src/components/pagination/bl-pagination.stories.mdx
@@ -17,7 +17,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
      itemsPerPage: {
        control: {
         type: 'number',
-        default:100
+        default:10
       }
     },
    hasJumper: {
@@ -44,10 +44,26 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
         default:"Show"
       }
     },
-    optionText: {
+    itemsPerPageOptions: {
       control: {
-        type: 'text',
-        default:"Items"
+        type: 'array',
+        default:[
+            {
+              text: '100 Sonuç',
+              value: 100,
+            },
+            {
+              text: '250 Sonuç',
+              value: 250,
+            },
+            {
+              text: '500 Sonuç',
+              value: 500,
+            },
+            {
+              text: '1000 Sonuç',
+              value: 1000,
+            }]
       }
     },
   }}
@@ -62,7 +78,7 @@ export const PaginationTemplate = (args) => html`
       jumper-label=${ifDefined(args.jumperLabel)}
       has-select=${ifDefined(args.hasSelect)}
       select-label=${ifDefined(args.selectLabel)}
-      option-text=${ifDefined(args.optionText)}
+      .itemsPerPageOptions=${ifDefined(args.itemsPerPageOptions)}
       >
       </bl-pagination>
   `
@@ -76,7 +92,7 @@ The Pagination component enables the user to select a specific page from a range
 Use a simple pagination for navigating to the next or previous page or a selected page.
 
 <Canvas>
-<Story name="Basic Usage" args={{currentPage:1,totalItems:1500,itemsPerPage:10}}>
+<Story name="Basic Usage" args={{currentPage:1,totalItems:1500}}>
     {PaginationTemplate.bind({})}
   </Story>
 </Canvas>
@@ -85,7 +101,7 @@ Use a simple pagination for navigating to the next or previous page or a selecte
 Use the jumper to directly go to a specific page.
 
 <Canvas>
-<Story name="Jumper" args={{currentPage:1,totalItems:1500,itemsPerPage:10,hasJumper:true}}>
+<Story name="Jumper" args={{currentPage:1,totalItems:1500,hasJumper:true}}>
     {PaginationTemplate.bind({})}
   </Story>
 </Canvas>
@@ -94,16 +110,41 @@ Use the jumper to directly go to a specific page.
 Use the select helper to change the number of items per page.
 
 <Canvas>
-<Story name="Select" args={{currentPage:1,totalItems:1500,itemsPerPage:100,hasSelect:true}}>
+<Story name="Select" args={{currentPage:1,totalItems:1500,hasSelect:true}}>
     {PaginationTemplate.bind({})}
   </Story>
 </Canvas>
 
 ## Customization
-The labels and the texts of the jumper and select element are fully customizable.
+The labels and the texts of the jumper and select element are fully customizable. The default select options can also be changed.
 
 <Canvas>
-<Story name="Customization"  args={{currentPage:1,totalItems:1500,itemsPerPage:250,hasJumper:true,jumperLabel:"Sayfaya Git",hasSelect:true,selectLabel:"Sayfa Başına",optionText:"Sonuç"}}>
+<Story name="Customization"  args={{
+  currentPage:1,
+  totalItems:1500,
+  itemsPerPage:100,
+  hasJumper:true,
+  jumperLabel:"Sayfaya Git",
+  hasSelect:true,
+  selectLabel:"Sayfa Başına",
+  itemsPerPageOptions:[
+  {
+    text: '100 Sonuç',
+    value: 100,
+  },
+  {
+    text: '250 Sonuç',
+    value: 250,
+  },
+  {
+    text: '500 Sonuç',
+    value: 500,
+  },
+  {
+    text: '1000 Sonuç',
+    value: 1000,
+  }]
+  }}>
     {PaginationTemplate.bind({})}
   </Story>
 </Canvas>

diff --git a/src/components/pagination/bl-pagination.test.ts b/src/components/pagination/bl-pagination.test.ts
@@ -32,12 +32,11 @@ describe('bl-pagination', () => {
   it('should render with the correct default values', async () => {
     const el = await fixture<typeOfBlPagination>(html`<bl-pagination></bl-pagination> `);
     expect(el?.currentPage).to.equal(1);
-    expect(el.itemsPerPage).to.equal(100);
+    expect(el.itemsPerPage).to.equal(10);
     expect(el.hasJumper).to.equal(false);
     expect(el.hasSelect).to.equal(false);
     expect(el.jumperLabel).to.equal('Go To');
     expect(el.selectLabel).to.equal('Show');
-    expect(el.optionText).to.equal('Items');
   });
 
   it('should correctly set the attributes', async () => {
@@ -51,7 +50,6 @@ describe('bl-pagination', () => {
           jumper-label="Git"
           has-select
           select-label="Göster"
-          option-text="Sonuç"
         >
         </bl-pagination>
       `
@@ -62,7 +60,6 @@ describe('bl-pagination', () => {
     expect(el.hasSelect).to.equal(true);
     expect(el.jumperLabel).to.equal('Git');
     expect(el.selectLabel).to.equal('Göster');
-    expect(el.optionText).to.equal('Sonuç');
   });
 
   describe('back and forward arrows', () => {
@@ -130,6 +127,15 @@ describe('bl-pagination', () => {
         expect(el.currentPage).to.equal(4);
       });
     });
+
+    it('renders only the current page with previous - next arrows on mobile view', async () => {
+      window.innerWidth = 600;
+      const el = await fixture<typeOfBlPagination>(
+        html`<bl-pagination current-page="10" items-per-page="1" total-items="10"></bl-pagination>`
+      );
+      expect(el.shadowRoot?.querySelectorAll('bl-button').length).to.eq(3);
+      expect(el.shadowRoot?.querySelectorAll('.dots').length).to.eq(0);
+    });
   });
 
   describe('jumper and select element', () => {

diff --git a/src/components/pagination/bl-pagination.ts b/src/components/pagination/bl-pagination.ts
@@ -12,25 +12,6 @@ import style from './bl-pagination.css';
  * @summary Baklava Pagination component
  */
 
-const selectOptions = [
-  {
-    text: '100',
-    value: 100,
-  },
-  {
-    text: '250',
-    value: 250,
-  },
-  {
-    text: '500',
-    value: 500,
-  },
-  {
-    text: '1000',
-    value: 1000,
-  },
-];
-
 @customElement('bl-pagination')
 export default class BlPagination extends LitElement {
   static get styles(): CSSResultGroup {
@@ -53,7 +34,7 @@ export default class BlPagination extends LitElement {
    * Sets the number of items per page
    */
   @property({ attribute: 'items-per-page', type: Number, reflect: true })
-  itemsPerPage = 100;
+  itemsPerPage = 10;
 
   /**
    * Adds jumper element if provided as true
@@ -80,10 +61,28 @@ export default class BlPagination extends LitElement {
   selectLabel = 'Show';
 
   /**
-   *  Sets the option texts.
+   * Sets the items per page options of the select element
+   *  PROPERTY
    */
-  @property({ attribute: 'option-text', type: String })
-  optionText = 'Items';
+  @property({ type: Array, attribute: false })
+  itemsPerPageOptions = [
+    {
+      text: '10 Items',
+      value: 10,
+    },
+    {
+      text: '25 Items',
+      value: 25,
+    },
+    {
+      text: '50 Items',
+      value: 50,
+    },
+    {
+      text: '100 Items',
+      value: 100,
+    },
+  ];
 
   @state() private pages: Array<number | string> = [];
 
@@ -92,8 +91,25 @@ export default class BlPagination extends LitElement {
    */
   @event('bl-change') private onChange: EventDispatcher<{ selectedPage: number; prevPage: number }>;
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    setTimeout(() => {
+      window?.addEventListener('resize', () => this._paginate());
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window?.removeEventListener('resize', this._paginate);
+  }
+
   updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has('currentPage') || changedProperties.has('itemsPerPage') || changedProperties.has('totalItems') ) {
+    if (
+      changedProperties.has('currentPage') ||
+      changedProperties.has('itemsPerPage') ||
+      changedProperties.has('totalItems')
+    ) {
       this._paginate();
       this.onChange({
         selectedPage: this.currentPage,
@@ -159,7 +175,7 @@ export default class BlPagination extends LitElement {
     this.currentPage = 1;
   }
 
-  private renderSinglePage(page: number | string) {
+  private _renderSinglePage(page: number | string) {
     if (typeof page === 'string') {
       return html`<span class="dots"></span>`;
     }
@@ -186,7 +202,9 @@ export default class BlPagination extends LitElement {
           ?disabled=${this.currentPage === 1}
         ></bl-button>
         <ul class="page-list">
-          ${this.pages.map(page => html`${this.renderSinglePage(page)}`)}
+          ${window.innerWidth < 768
+            ? html`${this._renderSinglePage(this.currentPage)}`
+            : this.pages.map(page => html`${this._renderSinglePage(page)}`)}
         </ul>
         <bl-button
           @click="${this._pageForward}"
@@ -201,20 +219,22 @@ export default class BlPagination extends LitElement {
   }
 
   render(): TemplateResult {
-    const selectEl = this.hasSelect ? html`
-      <div class="select">
-        <label>${this.selectLabel}</label>
-        <bl-select @bl-select="${this._selectHandler}">
-          ${selectOptions.map(option => {
-            return html`<bl-select-option
-              value="${option.value}"
-              ?selected=${option.value === this.itemsPerPage}
-              >${option.text} ${this.optionText}</bl-select-option
-            >`;
-          })}
-        </bl-select>
-      </div>
-    ` : null;
+    const selectEl = this.hasSelect
+      ? html`
+          <div class="select">
+            <label>${this.selectLabel}</label>
+            <bl-select @bl-select="${this._selectHandler}">
+              ${this.itemsPerPageOptions.map(option => {
+                return html`<bl-select-option
+                  value="${option.value}"
+                  ?selected=${option.value === this.itemsPerPage}
+                  >${option.text}</bl-select-option
+                >`;
+              })}
+            </bl-select>
+          </div>
+        `
+      : null;
 
     const jumperEl = this.hasJumper
       ? html` <div class="jumper">
@@ -225,9 +245,7 @@ export default class BlPagination extends LitElement {
 
     const getHelperElements = () => {
       if (!this.hasSelect && !this.hasJumper) return;
-      return html`
-        <div class="pagination-helpers">${selectEl} ${jumperEl}</div>
-      `;
+      return html` <div class="pagination-helpers">${selectEl} ${jumperEl}</div> `;
     };
 
     return html` <div class="pagination">${getHelperElements()} ${this.renderPages()}</div>`;