From 7e03a628f3764583f52dd73423a60f73e3a6e4c0 Mon Sep 17 00:00:00 2001 From: Stefan Lessle Date: Wed, 24 Apr 2024 12:32:08 -0500 Subject: [PATCH 1/6] Improved paging implementation; minor theme improvements; --- package.json | 4 +- src/lib/GridFunctions.ts | 60 +++++++------------ src/lib/components/Footer.svelte | 10 +--- src/lib/components/Grid.svelte | 60 ++++++++++--------- src/lib/components/Paging.svelte | 10 +--- src/lib/index.ts | 2 +- .../cards-plus/groupby/TdGroupBy.svelte | 2 +- .../groupby/TdGroupByCheckbox.svelte | 4 +- .../themes/cards-plus/row/TdCheckbox.svelte | 4 +- src/lib/themes/cards-plus/row/TrRow.svelte | 4 +- .../plain-table-css/footer/Footer.svelte | 7 +-- .../themes/plain-table-css/row/TrRow.svelte | 1 + src/lib/themes/plain-table/row/TrRow.svelte | 5 +- src/lib/themes/preline/row/TrRow.svelte | 1 + src/lib/types/index.ts | 16 ++++- 15 files changed, 87 insertions(+), 103 deletions(-) diff --git a/package.json b/package.json index 82a2511..3ea1348 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mediakular/gridcraft", - "version": "0.2.6-beta", + "version": "0.2.7-beta", "scripts": { "dev": "vite dev", "build": "vite build && npm run package", @@ -56,7 +56,7 @@ "grid" ], "author": "Stefan Lessle", - "license": "ISC", + "license": "MIT", "bugs": { "url": "https://github.com/mediakular/gridcraft/issues" }, diff --git a/src/lib/GridFunctions.ts b/src/lib/GridFunctions.ts index cf2ca48..e181297 100644 --- a/src/lib/GridFunctions.ts +++ b/src/lib/GridFunctions.ts @@ -1,5 +1,5 @@ import { hash } from "./helpers/hash-helper.js"; -import type { GridColumn, GridFilter, GroupHeader, PagingData, PagingDataInternal } from "./types/index.js"; +import type { GridColumn, GridFilter, GroupHeader } from "./types/index.js"; export class GridFunctions { public data: T[] = []; @@ -7,18 +7,6 @@ export class GridFunctions { public dataLength = 0; public groupHeaders: GroupHeader[] = []; public groupHeadersUnpaged: GroupHeader[] = []; - public pagingData: PagingData = { - currentPage: 1, - totalPages: 0, - totalResults: 0, - itemsPerPage: 10, - itemsPerPageOptions: [10, 25, 50, 100] - }; - - private updatePagingData() { - (this.pagingData as PagingDataInternal).totalResults = this.dataLength; - (this.pagingData as PagingDataInternal).totalPages = Math.max(1, Math.ceil(this.dataLength / Math.max(1, this.pagingData.itemsPerPage))); - } /** * Initializes the GridFunctions instance with the provided data array. @@ -26,14 +14,10 @@ export class GridFunctions { * @param {T[]} data - The data array to initialize the GridFunctions with. * @return {GridFunctions} The initialized GridFunctions instance. */ - init(data: T[], pagingData: PagingData) : GridFunctions { + init(data: T[]): GridFunctions { this.data = data; this.dataLength = this.data.length; - this.pagingData = pagingData; - - this.updatePagingData(); - return this; } @@ -44,7 +28,7 @@ export class GridFunctions { * @param {GridColumn[]} columns - An array of grid columns. * @return {GridFunctions} - The updated grid functions object. */ - applyFilters(filters: GridFilter[], columns: GridColumn[]) : GridFunctions { + applyFilters(filters: GridFilter[], columns: GridColumn[]): GridFunctions { if (filters.length == 0) { return this; } @@ -81,8 +65,6 @@ export class GridFunctions { this.dataLength = this.data.length; - this.updatePagingData(); - return this; } @@ -99,7 +81,6 @@ export class GridFunctions { sortBy(column: string, sortOrder: number, groupby: string, sortOrderSecondary: number, columns: GridColumn[]): GridFunctions { if (groupby) { // always order by the groupBy column here, if the sortbyColumn is != groupby the sort will be done later this.data = this.data.sort((a, b) => { - const groupByCol = columns.find(x => x.key == groupby); const aValue: any = groupByCol?.sortValue ? groupByCol.sortValue(a) : groupByCol?.accessor ? groupByCol.accessor(a) : a[groupby as keyof T]; @@ -137,27 +118,28 @@ export class GridFunctions { return this; } + /** - * Processes paging for the data based on the current page, items per page, grouping, and columns. + * Processes paging for the grid based on the provided groupBy, currentPage, and itemsPerPage. + * If groupBy is not provided, it processes paging for the entire grid. * + * @param {string} groupBy - The key of the column to group the data by. * @param {number} currentPage - The current page number. * @param {number} itemsPerPage - The number of items to display per page. - * @param {string} groupBy - The column to group the data by. - * @param {GridColumn[]} columns - An array of grid columns. - * @return {GridFunctions} The updated GridFunctions object. + * @return {GridFunctions} The updated GridFunctions instance. */ - processPaging(groupBy: string, columns: GridColumn[]): GridFunctions { + processPaging( + groupBy: string, + currentPage: number, + itemsPerPage: number): GridFunctions { this.dataUnpaged = [...this.data]; - const currentPage = this.pagingData.currentPage; - const itemsPerPage = this.pagingData.itemsPerPage; - if (!groupBy) { const startIndex = (currentPage - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; this.data = this.data.slice(startIndex, endIndex); - + return this; } @@ -166,7 +148,7 @@ export class GridFunctions { let rest = -1; let skippedCount = 0; - const newGroupHeaders:GroupHeader[] = []; + const newGroupHeaders: GroupHeader[] = []; for (const groupHeader of this.groupHeaders) { if (rest == 0) { @@ -183,19 +165,19 @@ export class GridFunctions { groupHeader.data = []; continue; - } else if (rest == -1) { // this is for the first group header we will be adding + } else if (rest == -1) { // this is for the first group header we will be adding const start = startIndex - skippedCount; const end = Math.min(start + itemsPerPage, groupHeader.data.length); const initialLength = groupHeader.data.length; newGroupHeaders.push(groupHeader); - + groupHeader.data = groupHeader.data.slice(start, end); rest = Math.max(0, start + itemsPerPage - initialLength); - + skippedCount += initialLength; - } else { // this for the rest of the group headers we need to display (all after the first one) + } else { // this for the rest of the group headers we need to display (all after the first one) newGroupHeaders.push(groupHeader); const initialLength = groupHeader.data.length; @@ -270,14 +252,12 @@ export class GridFunctions { // deep clone group headers, we need to do this because the group headers are mutable this.groupHeaders.forEach(header => { - const newHeader = {...header}; + const newHeader = { ...header }; newHeader.data = [...newHeader.data] this.groupHeadersUnpaged.push(newHeader); }); - - this.dataLength = groupDataLength; - this.updatePagingData(); + this.dataLength = groupDataLength; return this; } diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 4104d57..eec4788 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -1,14 +1,8 @@ diff --git a/src/lib/components/Grid.svelte b/src/lib/components/Grid.svelte index 8429ea6..ed0da3d 100644 --- a/src/lib/components/Grid.svelte +++ b/src/lib/components/Grid.svelte @@ -1,9 +1,10 @@ \ No newline at end of file diff --git a/src/lib/index.ts b/src/lib/index.ts index 884478e..51ef7b3 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -4,7 +4,7 @@ import Grid from './components/Grid.svelte'; import GridFooter from './components/Footer.svelte'; import GridPaging from './components/Paging.svelte'; -import type { PagingData } from "./types/index.js"; +import { PagingData } from "./types/index.js"; import PlainTableTheme from './themes/plain-table/index.js'; import PrelineTheme from './themes/preline/index.js'; diff --git a/src/lib/themes/cards-plus/groupby/TdGroupBy.svelte b/src/lib/themes/cards-plus/groupby/TdGroupBy.svelte index 5ade4d5..57ee223 100644 --- a/src/lib/themes/cards-plus/groupby/TdGroupBy.svelte +++ b/src/lib/themes/cards-plus/groupby/TdGroupBy.svelte @@ -4,7 +4,7 @@ export let isExpanded = false; -
+