visible items component, stories changes and new stories partially ad…

…ded, page size and paginator changes
sl-design-system · Sep 26, 2024 · 5637bda · 5637bda
1 parent b7f0863
commit 5637bda
Show file tree

Hide file tree

Showing 6 changed files with 1,220 additions and 16 deletions.
diff --git a/packages/components/paginator/index.ts b/packages/components/paginator/index.ts
@@ -1,2 +1,3 @@
 export * from './src/paginator.js';
 export * from './src/page-size.js';
+export * from './src/visible-items.js';
diff --git a/packages/components/paginator/register.ts b/packages/components/paginator/register.ts
@@ -1,5 +1,7 @@
 import { Paginator } from './src/paginator.js';
 import { PageSize } from './src/page-size.js';
+import { VisibleItems } from './src/visible-items.js';
 
 customElements.define('sl-paginator', Paginator);
 customElements.define('sl-page-size', PageSize);
+customElements.define('sl-visible-items', VisibleItems);
diff --git a/packages/components/paginator/src/page-size.ts b/packages/components/paginator/src/page-size.ts
@@ -13,9 +13,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './paginator.scss.js';
 
 declare global {
-  // interface GlobalEventHandlersEventMap {
-  //   'sl-page-change': SlPageChangeEvent; // SlTabChangeEvent
-  // }
+  interface GlobalEventHandlersEventMap {
+    'sl-page-size-change': SlPageSizeChangeEvent; // SlTabChangeEvent
+  }
 
   interface HTMLElementTagNameMap {
     'sl-page-size': PageSize;
@@ -24,7 +24,7 @@ declare global {
 
 Icon.register(faChevronLeft, faChevronRight);
 
-// export type SlPageChangeEvent = CustomEvent<number>;
+export type SlPageSizeChangeEvent = CustomEvent<number>;
 
 /**
  * A paginator component used when there are a lot of data that needs to be shown and cannot be shown at once, in one view/page.
@@ -56,9 +56,8 @@ export class PageSize extends ScopedElementsMixin(LitElement) {
    */
   #observer = new ResizeObserver(() => this.#onResize());
 
-  /** @internal Emits when the page has been selected/changed. */
-  // @event({ name: 'sl-page-change' }) pageChangeEvent!: EventEmitter<SlPageChangeEvent>; // tabChangeEvent
-  // this.tabChangeEvent.emit(selectedTab ? (this.tabs?.indexOf(selectedTab) ?? 0) : -1);
+  /** @internal Emits when the page size has been selected/changed. */
+  @event({ name: 'sl-page-size-change' }) pageSizeChangeEvent!: EventEmitter<SlPageSizeChangeEvent>;
 
   // TODO: how many pages? 'pages' prop? or state?
   // TODO: current page (state?)
@@ -1013,6 +1012,7 @@ export class PageSize extends ScopedElementsMixin(LitElement) {
     this.itemsPerPage = (event.target as SelectOption).value as number;
 
     // TODO: emit event with items per page
+    this.pageSizeChangeEvent.emit(this.itemsPerPage);
 
 
     // always go back to the first page when items per page has changed?

diff --git a/packages/components/paginator/src/paginator.stories.ts b/packages/components/paginator/src/paginator.stories.ts
@@ -1,11 +1,13 @@
 import '@sl-design-system/button/register.js';
+import '@sl-design-system/card/register.js';
 import { type Meta, type StoryObj } from '@storybook/web-components';
 import { type TemplateResult, html } from 'lit';
 import '../register.js';
 import { type Paginator } from './paginator.js';
 import { type PageSize } from './page-size.js';
+import {VisibleItems} from "./visible-items";
 
-type Props = Pick<Paginator,  'itemsPerPage' | 'pageSizes' | 'total'> & {
+type Props = Pick<Paginator, 'activePage' | 'itemsPerPage' | 'pageSizes' | 'total'> & {
   actions?(): string | TemplateResult;
   content?(): string | TemplateResult;
 };
@@ -17,7 +19,8 @@ export default {
   args: {
     total: 52,
     itemsPerPage: 15,
-    pageSizes: [5, 10, 15]
+    pageSizes: [5, 10, 15],
+    activePage: 2,
   },
   argTypes: {
     actions: {
@@ -27,23 +30,34 @@ export default {
       table: { disable: true }
     }
   },
-  render: ({ pageSizes, total }) => { // itemsPerPage
+  render: ({ activePage, itemsPerPage, pageSizes, total }) => { // itemsPerPage
     setTimeout(() => {
       const paginator = document.querySelector('sl-paginator') as Paginator;
       const pageSize = document.querySelector('sl-page-size') as PageSize;
+      const visibleItems = document.querySelector('sl-visible-items') as VisibleItems;
       console.log('paginator story', paginator, 'pageSize', pageSize, pageSize.itemsPerPage);
-      paginator.itemsPerPage = pageSize.itemsPerPage;
+      // paginator.itemsPerPage = pageSize.itemsPerPage;
       paginator?.addEventListener('sl-page-change', event => {
         console.log('sl-page-change event', event, event.detail);
         pageSize.activePage = event.detail;
+        visibleItems.activePage = event.detail;
+        // onTabChange();
+        //
+        // selectedTabIndex = event.detail;
+      });
+      pageSize?.addEventListener('sl-page-size-change', event => {
+        console.log('sl-page-size-change event', event, event.detail);
+        paginator.itemsPerPage = event.detail;
+        visibleItems.itemsPerPage = event.detail;
         // onTabChange();
         //
         // selectedTabIndex = event.detail;
       });
     }); // .itemsPerPage=${itemsPerPage}
     return html`
-      <sl-paginator .total=${total} .pageSizes=${pageSizes}></sl-paginator>
-      <sl-page-size .pageSizes=${pageSizes}></sl-page-size>
+      <sl-paginator .total=${total} .pageSizes=${pageSizes} .activePage=${activePage}></sl-paginator>
+      <sl-page-size .pageSizes=${pageSizes} .itemsPerPage=${itemsPerPage}></sl-page-size>
+      <sl-visible-items .total=${total} .activePage=${activePage}></sl-visible-items>
       `;
   }
 } satisfies Meta<Props>;
@@ -105,6 +119,94 @@ export const Overflow: Story = {
 //   `
 // };
 
+export const ExampleWithCards: Story = {
+  render: () => {
+    // setTimeout(() => {
+      const total = 100;
+      const pageSizes = [5, 10, 15];
+      const itemsPerPage = 15;
+      const activePage = 3;
+      let items: TemplateResult[] = [];
+      let start = 1;
+      let end = 1;
+
+    items = Array.from({length: total}).map( // TODO: slice the array
+      (_, index) => html`
+          <sl-card responsive padding>
+            <h2>Card number ${index + 1}</h2>
+            <p slot="body">Example body text</p>
+          </sl-card>
+        `
+    );
+
+    requestAnimationFrame(() => {
+      const paginator = document.querySelector('sl-paginator') as Paginator;
+      console.log('paginator in example cards', paginator, paginator?.activePage);
+
+      // TODO: use itemsPerPage and activePage
+     items = Array.from({length: total}).map( // TODO: slice the array
+        (_, index) => html`
+          <sl-card responsive padding>
+            <h2>Card number ${index + 1}</h2>
+            <p slot="body">Example body text</p>
+          </sl-card>
+        `
+      );
+
+     const pages = Math.ceil(total / itemsPerPage) || 2;
+
+      // TODO: use paginator activePage and so on
+      start = paginator.activePage === 1 ? 1 : ((paginator.activePage - 1) * itemsPerPage) + 1;
+      end = paginator.activePage === pages ? total : paginator.activePage * paginator.currentlyVisibleItems;
+
+
+      console.log('in example start and end', start, end);
+    });
+
+
+      // TODO: use paginator activePage and so on
+      // const start = this.activePage === 1 ? 1 : ((this.activePage - 1) * itemsPerPage) + 1;
+      // const end = this.activePage === this.#pages ? this.total : this.activePage * this.currentlyVisibleItems;
+
+/*      // TODO: use itemsPerPage and activePage
+      const items = Array.from({length: total}).map( // TODO: slice the array
+        (_, index) => html`
+          <sl-card responsive padding>
+            <h2>Card number ${index + 1}</h2>
+            <p slot="body">Example body text</p>
+          </sl-card>
+        `
+      );*/
+    // });
+
+    console.log('items and sliced', items, items.slice(start, end));
+
+    return html`
+      <style>
+        #root-inner {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+      </style>
+      <h2>Paginator with example content</h2>
+      ${items}
+      ${items.map(
+        size => html`
+                <td>
+                  <sl-avatar href="https://example.com">test ${size}</sl-avatar>
+                </td>
+              `
+      )}
+      <sl-card responsive padding>
+        <h2>Captivating Nyhavn Moments</h2>
+        <p slot="body">Example body text</p>
+      </sl-card>
+      <sl-paginator .activePage=${activePage} .total=${total} .pageSizes=${pageSizes}></sl-paginator>
+    `
+  }
+};
+
 export const All: Story = {
   render: () => html`
     <style>
@@ -117,3 +219,7 @@ export const All: Story = {
     <h2>TODO...</h2>
   `
 };
+
+// TODO: example with cards
+
+// TODO: example with grid and dataSource
diff --git a/packages/components/paginator/src/paginator.ts b/packages/components/paginator/src/paginator.ts
@@ -56,6 +56,25 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
    */
   #observer = new ResizeObserver(() => this.#onResize());
 
+  #activePage = 1;
+
+  get activePage(): number {
+    return this.#activePage;
+  }
+
+  /** The component's locale. */
+  @property()
+  set activePage(value: number) {
+    // console.log('value in setter activePage', value);
+    // this.#activePage = value ?? 1;
+
+    const oldValue = this.#activePage;
+    this.#activePage = value ?? 1;
+    this.pageChangeEvent.emit(this.#activePage);
+    this.requestUpdate('activePage', oldValue);
+    console.log('value in setter activePage', value, this.#activePage);
+  }
+
   /** @internal Emits when the activePage has changed. */
   @event({ name: 'sl-toggle' }) toggleEvent!: EventEmitter<SlToggleEvent<boolean>>;
 
@@ -99,7 +118,7 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
   #pages: number = 1;
 
   /** @internal active */ // TODO: state maybe?
-  @state() activePage: number = 1; // TODO: should be possible to set manually!!!
+  // @state() activePage: number = 1; // TODO: should be possible to set manually!!! or maybe getter and setter?
 
   /** @internal currently visible items on the current page */ // TODO: state maybe?
   @state() currentlyVisibleItems: number = 1;
@@ -180,14 +199,18 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
       const total = this.total ?? 0;
       const itemsPerPage = this.itemsPerPage ?? 10;
       this.#pages = Math.ceil(total / itemsPerPage) || 2;
-      if (this.activePage === this.#pages) {
+      if (this.activePage === this.#pages) { // TODO: this part probably needs to be moved to currentlyVisibleItems...
         const total = this.total ?? 0;
         const itemsPerPage = this.itemsPerPage ?? 10;
         console.log('last page is active');
         this.currentlyVisibleItems = total % itemsPerPage;
       } else {
         this.currentlyVisibleItems = this.itemsPerPage!;
       }
+      // always go back to the first page when items per page has changed?
+    //  this.activePage = 1;
+
+      this.#onResize();
     }
 
     // if (changes.has('activePage')) {
@@ -466,7 +489,7 @@ export class Paginator extends ScopedElementsMixin(LitElement) {
   //   `;
   // }
 
-  #onResize(): void {
+  #onResize(): void { // TODO: rename to #onChange ???
     const pagesWrapper = this.renderRoot.querySelector('.pages-wrapper') as HTMLDivElement;
     const container = this.renderRoot.querySelector('.container');
     const buttonPrev = this.renderRoot.querySelector('sl-button.prev') as Button;
@@ -1023,6 +1046,8 @@ console.log('last page width', Array.from(pages)[lastPage-1].offsetWidth);
     // always go back to the first page when items per page has changed?
     this.activePage = 1;
 
+   // this.#onResize();
+
     // TODO: if links, links need to be updated as well, so we need more links or less
     // what about activePage with links? the page will rerender... maybe selected or active attribute like in tabs will be fine?
     // TODO: maybe slot for links? and separately prev and nex link?