Feature/1487 poc paginator component

packages/components/data-source/src/array-data-source.ts

@@ -10,6 +10,7 @@ import {
 export class ArrayDataSource<T = any> extends DataSource<T> {
   #filteredItems: T[] = [];
   #items: T[];
+  #paginatedItems: T[] = [];
 
   get items(): T[] {
     return this.#filteredItems;
@@ -20,6 +21,16 @@ export class ArrayDataSource<T = any> extends DataSource<T> {
     this.update();
   }
 
+  get paginatedItems(): T[] {
+    return this.#paginatedItems;
+  }
+
+  set paginatedItems(items: T[]) {
+    this.#paginatedItems = items;
+    console.log('test', this.#paginatedItems, items, this.items);
+    this.update();
+  }
+
   get size(): number {
     return this.#items.length;
   }
@@ -28,6 +39,7 @@ export class ArrayDataSource<T = any> extends DataSource<T> {
     super();
     this.#filteredItems = [...items];
     this.#items = [...items];
+    this.#paginatedItems = [...items];
   }
 
   update(): void {
@@ -125,6 +137,37 @@ export class ArrayDataSource<T = any> extends DataSource<T> {
       });
     }
 
+    console.log('items before paginated, but should be filtered if filtered', items, this.filters, this.filters.size > 0, this.filters.values());
+
+    this.#paginatedItems = items;
+
+    // paginate items
+    if (this.paginateItems) {
+      console.log('this.paginateItems', this.paginateItems);
+      // const pagination = {pageNumber: pageNumber, pageSize: pageSize};
+      // console.log('pagination in paginate', pagination);
+
+      // const pageNumber = /*filtersChanged /!*this.filters.size > 0*!/ ? 1 :*/ this.paginateItems.pageNumber;
+      // this.paginateItems.pageNumber = pageNumber;
+      //  this.paginate(10, pageNumber);
+      //   this.paginateItems.pageNumber = pageNumber;
+
+      const startIndex = (this.paginateItems.pageNumber /*pageNumber*/ - 1) * this.paginateItems.pageSize;
+      const endIndex = startIndex + this.paginateItems.pageSize;
+      // console.log('pageNumber in array data source', pageNumber, filtersChanged, startIndex);
+      // Get the items for the current page
+      /*const paginatedItems*/items  = /*this.*/items.slice(startIndex, endIndex);
+      // console.log('paginated data', paginatedItems);
+      // Update this.items with the paginated items
+      // this.paginatedItems/*items*/ = paginatedItems;
+      //  console.log('updated items', this.items, this.paginatedItems, items);
+    }
+
+    // TODO: I need to have amount of all filtered data for total to show in the paginator...
+
+    console.log('paginateditems?', this.paginatedItems);
+    console.log('items in array data', items);
+
     this.#filteredItems = items;
     this.dispatchEvent(new CustomEvent('sl-update', { detail: { dataSource: this } }));
   }

packages/components/data-source/src/data-source.ts

@@ -35,6 +35,8 @@ export type DataSourceSortByFunction<T = unknown> = {
 
 export type DataSourceSort<T> = DataSourceSortByFunction<T> | DataSourceSortByPath;
 
+export type DataSourcePagination = { pageNumber: number, pageSize: number };
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DataSourceUpdateEvent<T = any> = CustomEvent<{ dataSource: DataSource<T> }>;
 
@@ -46,12 +48,16 @@ export abstract class DataSource<T = any> extends EventTarget {
   /** Order the items by grouping them on the given attributes. */
   #groupBy?: DataSourceGroupBy<T>;
 
+  #paginateItems?: DataSourcePagination;
+
   /**
    * The value and path/function to use for sorting. When setting this property,
    * it will cause the data to be automatically sorted.
    */
   #sort?: DataSourceSort<T>;
 
+  // #pagination
+
   get filters(): Map<string, DataSourceFilter<T>> {
     return this.#filters;
   }
@@ -60,30 +66,38 @@ export abstract class DataSource<T = any> extends EventTarget {
     return this.#groupBy;
   }
 
+  get paginateItems(): DataSourcePagination| undefined {
+    return this.#paginateItems;
+  }
+
   get sort(): DataSourceSort<T> | undefined {
     return this.#sort;
   }
 
   /** The filtered & sorted array of items. */
   abstract items: T[];
 
+  /** The array of all items, used for pagination. */
+ // abstract paginatedItems?: T[];
+
   /** Total number of items in this data source. */
   abstract readonly size: number;
 
-  /** Updates the list of items using filter and sorting if available. */
+  /** Updates the list of items using filter, sorting and pagination if available. */
   abstract update(): void;
 
   addFilter<U extends string | DataSourceFilterFunction<T>>(
     id: string,
     pathOrFilter: U,
     value?: string | string[]
   ): void {
+    console.log('value in addFilter', value);
     if (typeof pathOrFilter === 'string') {
       this.#filters.set(id, { path: pathOrFilter, value: value ?? '' });
     } else {
       this.#filters.set(id, { filter: pathOrFilter, value });
     }
-  }
+  } // TODO: maybe here emit an event?
 
   removeFilter(id: string): void {
     this.#filters.delete(id);
@@ -147,4 +161,15 @@ export abstract class DataSource<T = any> extends EventTarget {
 
     this.update();
   }
+
+  /**
+   * Use to get the paginated data for usage with the sl-paginator component.
+   * */
+  paginate(pageNumber: number, pageSize: number): void {
+    this.#paginateItems = { pageNumber: pageNumber, pageSize: pageSize};
+
+    this.update();
+  }
+
+  // TODO:  paginatedData
 }

packages/components/grid/src/grid.ts

@@ -262,6 +262,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
   }
 
   override willUpdate(changes: PropertyValues<this>): void {
+    console.log('changes in willChange', changes);
     if (changes.has('dataSource')) {
       this.#updateDataSource(this.dataSource);
     }
@@ -286,6 +287,7 @@ export class Grid<T = any> extends ScopedElementsMixin(LitElement) {
   }
 
   override render(): TemplateResult {
+    console.log('in grid render', this.items, this.dataSource);
     return html`
       <slot @sl-column-update=${this.#onColumnUpdate} @slotchange=${this.#onSlotChange} style="display:none"></slot>
       <style>

packages/components/grid/src/stories/pagination.stories.ts

@@ -0,0 +1,227 @@
+import '@sl-design-system/button/register.js';
+import '@sl-design-system/button-bar/register.js';
+import { type Person, getPeople } from '@sl-design-system/example-data';
+import { ArrayDataSource } from '@sl-design-system/data-source';
+import {PageSize, Paginator, ItemsCounter} from "@sl-design-system/paginator";
+import '@sl-design-system/paginator/register.js';
+import '@sl-design-system/text-field/register.js';
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import '../../register.js';
+import { Grid } from '../grid.js';
+
+type Story = StoryObj;
+
+export default {
+  title: 'Grid/Pagination',
+  tags: ['draft'],
+  loaders: [async () => ({ people: (await getPeople()).people })],
+  parameters: {
+    // Disables Chromatic's snapshotting on a story level
+    chromatic: { disableSnapshot: true }
+  }
+} satisfies Meta;
+
+export const Basic: Story = {
+  render: (_, { loaded: { people } }) => {
+    const pageSizes = [5, 10, 15];
+    let activePage = 1,
+     itemsPerPage = pageSizes[1],
+     startIndex = (activePage - 1) * itemsPerPage,
+     endIndex = startIndex + itemsPerPage;
+
+    setTimeout(() => {
+      const paginator = document.querySelector('sl-paginator') as Paginator,
+       pageSize = document.querySelector('sl-page-size') as PageSize,
+       visibleItems = document.querySelector('sl-items-counter') as ItemsCounter,
+       grid = document.querySelector('sl-grid') as Grid;
+
+      paginator?.addEventListener('sl-page-change', event => {
+        visibleItems.activePage = event.detail;
+        activePage = event.detail;
+        startIndex = (event.detail - 1) * itemsPerPage;
+        endIndex = startIndex + itemsPerPage;
+        grid.items = people.slice(startIndex, endIndex);
+      });
+
+      pageSize?.addEventListener('sl-page-size-change', event => {
+        paginator.itemsPerPage = event.detail;
+        visibleItems.itemsPerPage = event.detail;
+        itemsPerPage = event.detail;
+      });
+    });
+
+    return html`
+      <style>
+        .pagination {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+          margin-block: 1rem;
+          justify-content: space-between;
+        }
+
+        sl-paginator {
+          flex: 1;
+        }
+      </style>
+      <sl-grid .items=${people.slice(startIndex, endIndex)}>
+        <sl-grid-column path="firstName"></sl-grid-column>
+        <sl-grid-column path="lastName"></sl-grid-column>
+        <sl-grid-column path="profession"></sl-grid-column>
+        <sl-grid-column path="status"></sl-grid-column>
+        <sl-grid-column path="membership"></sl-grid-column>
+      </sl-grid>
+      <div class="pagination">
+        <sl-items-counter .total=${people.length} .activePage=${activePage} .itemsPerPage=${itemsPerPage}></sl-items-counter>
+        <sl-paginator .total=${people.length} .pageSizes=${pageSizes} .activePage=${activePage}
+                      .itemsPerPage=${itemsPerPage}></sl-paginator>
+        <sl-page-size .pageSizes=${pageSizes} .itemsPerPage=${itemsPerPage}></sl-page-size>
+      </div>
+    `
+  }
+};
+
+export const PaginatedDataSourceWithFilter: Story = {
+  render: (_, { loaded: { people } }) => {
+    const pageSizes = [5, 10, 15, 20],
+     dataSource = new ArrayDataSource(people as Person[]);
+
+    let total = dataSource.paginatedItems.length;
+    dataSource.paginate(1, 10);
+
+    setTimeout(() => {
+      const paginator = document.querySelector('sl-paginator') as Paginator,
+       pageSize = document.querySelector('sl-page-size') as PageSize,
+       visibleItems = document.querySelector('sl-items-counter') as ItemsCounter,
+       grid = document.querySelector('sl-grid') as Grid;
+
+      paginator?.addEventListener('sl-page-change', event => {
+        dataSource.paginate(event.detail, paginator.itemsPerPage ?? pageSizes[0]);
+        visibleItems.activePage = event.detail;
+      });
+
+      pageSize?.addEventListener('sl-page-size-change', event => {
+        paginator.itemsPerPage = event.detail;
+        visibleItems.itemsPerPage = event.detail;
+        dataSource.paginate(paginator.activePage, event.detail);
+      });
+
+      dataSource?.addEventListener('sl-update', () => {
+        paginator.total = dataSource.paginatedItems.length;
+        visibleItems.total = dataSource.paginatedItems.length;
+      });
+
+      grid?.addEventListener('sl-filter-value-change', () => {
+        // go back to the first page on filter change
+        paginator.activePage = 1;
+      });
+    });
+
+    return html`
+      <style>
+        .pagination {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+          margin-block: 1rem;
+          justify-content: space-between;
+        }
+
+        sl-paginator {
+          flex: 1;
+        }
+      </style>
+      <sl-grid .dataSource=${dataSource}>
+        <sl-grid-column path="firstName"></sl-grid-column>
+        <sl-grid-column path="lastName"></sl-grid-column>
+        <sl-grid-filter-column id="filter-profession" mode="text" path="profession"></sl-grid-filter-column>
+        <sl-grid-filter-column id="filter-status" path="status"></sl-grid-filter-column>
+        <sl-grid-filter-column id="filter-membership" path="membership"></sl-grid-filter-column>
+      </sl-grid>
+      <div class="pagination">
+        <sl-items-counter .total=${total} .activePage=${1} .itemsPerPage=${10}></sl-items-counter>
+        <sl-paginator .total=${total} .pageSizes=${pageSizes} .activePage=${1} .itemsPerPage=${10}></sl-paginator>
+        <sl-page-size .pageSizes=${pageSizes} .itemsPerPage=${10}></sl-page-size>
+      </div>
+    `;
+  }
+};
+
+export const PaginatedDataSourceWithSorter: Story = {
+  render: (_, { loaded: { people } }) => {
+    const sorter = (a: Person, b: Person): number => {
+      const lastNameCmp = a.lastName.localeCompare(b.lastName);
+
+      if (lastNameCmp === 0) {
+        return a.firstName.localeCompare(b.firstName);
+      } else {
+        return lastNameCmp;
+      }
+    };
+
+    const dataSource = new ArrayDataSource(people as Person[]);
+    dataSource.setSort('custom', sorter, 'asc');
+
+    const pageSizes = [10, 15, 20];
+    let total = dataSource.paginatedItems.length;
+    dataSource.paginate(1, 10);
+
+    setTimeout(() => {
+      const paginator = document.querySelector('sl-paginator') as Paginator,
+       pageSize = document.querySelector('sl-page-size') as PageSize,
+       visibleItems = document.querySelector('sl-items-counter') as ItemsCounter,
+       grid = document.querySelector('sl-grid') as Grid;
+
+      paginator?.addEventListener('sl-page-change', event => {
+        dataSource.paginate(event.detail, paginator.itemsPerPage ?? pageSizes[0]);
+        visibleItems.activePage = event.detail;
+      });
+
+      pageSize?.addEventListener('sl-page-size-change', event => {
+        paginator.itemsPerPage = event.detail;
+        visibleItems.itemsPerPage = event.detail;
+        dataSource.paginate(paginator.activePage, event.detail);
+      });
+
+      dataSource?.addEventListener('sl-update', () => {
+        paginator.total = dataSource.paginatedItems.length;
+        visibleItems.total = dataSource.paginatedItems.length;
+      });
+
+      grid?.addEventListener('sl-sort-direction-change', () => {
+        // go back to the first page on filter change
+        paginator.activePage = 1;
+      });
+    });
+
+    return html`
+          <style>
+        .pagination {
+          display: flex;
+          gap: 1rem;
+          align-items: center;
+          margin-block: 1rem;
+          justify-content: space-between;
+        }
+
+        sl-paginator {
+          flex: 1;
+        }
+      </style>
+      <p>This grid sorts people by last name, then first name, via a custom sorter on the data directly.</p>
+      <sl-grid .dataSource=${dataSource}>
+        <sl-grid-sort-column path="firstName"></sl-grid-sort-column>
+        <sl-grid-sort-column path="lastName"></sl-grid-sort-column>
+        <sl-grid-column path="email"></sl-grid-column>
+      </sl-grid>
+      <div class="pagination">
+        <sl-items-counter .total=${total} .activePage=${1} .itemsPerPage=${10}></sl-items-counter>
+        <sl-paginator .total=${total} .pageSizes=${pageSizes} .activePage=${1} .itemsPerPage=${10}></sl-paginator>
+        <sl-page-size .pageSizes=${pageSizes} .itemsPerPage=${10}></sl-page-size>
+      </div>
+    `;
+  }
+};
+
+