diff --git a/README.md b/README.md index 77ca576..63d96a6 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ Refer to the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-reac - [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-react) / [examples repo](https://github.com/ghiscoding/slickgrid-react-demos/tree/main/bootstrap5-i18n-demo) #### Working Demos -For a complete set of working demos (over 30 examples), we strongly suggest you to clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is out, so it is updated frequently and is also used as the GitHub live demo page. +For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is out, so it is updated frequently and is also used as the GitHub live demo page. ## License [MIT License](LICENSE) diff --git a/docs/TOC.md b/docs/TOC.md index 392e311..559d68f 100644 --- a/docs/TOC.md +++ b/docs/TOC.md @@ -58,6 +58,7 @@ * [Grid State & Presets](grid-functionalities/grid-state-preset.md) * [Grouping & Aggregators](grid-functionalities/grouping-aggregators.md) * [Header Menu & Header Buttons](grid-functionalities/header-menu-header-buttons.md) +* [Infinite Scroll](grid-functionalities/infinite-scroll.md) * [Pinning (frozen) of Columns/Rows](grid-functionalities/frozen-columns-rows.md) * [Providing data to the grid](grid-functionalities/providing-grid-data.md) * [Row Selection](grid-functionalities/row-selection.md) diff --git a/docs/backend-services/GraphQL.md b/docs/backend-services/GraphQL.md index e14a890..730baf1 100644 --- a/docs/backend-services/GraphQL.md +++ b/docs/backend-services/GraphQL.md @@ -6,6 +6,7 @@ - [Pagination](graphql/GraphQL-Pagination.md) - [Sorting](graphql/GraphQL-Sorting.md) - [Filtering](graphql/GraphQL-Filtering.md) +- [Infinite Scroll](../grid-functionalities/infinite-scroll.md#infinite-scroll-with-backend-services) ### Description GraphQL Backend Service (for Pagination purposes) to get data from a backend server with the help of GraphQL. diff --git a/docs/backend-services/OData.md b/docs/backend-services/OData.md index d606470..b3a3b56 100644 --- a/docs/backend-services/OData.md +++ b/docs/backend-services/OData.md @@ -4,6 +4,7 @@ - [Passing Extra Arguments](#passing-extra-arguments-to-the-query) - [OData options](#odata-options) - [Override the filter query](#override-the-filter-query) +- [Infinite Scroll](../grid-functionalities/infinite-scroll.md#infinite-scroll-with-backend-services) ### Description OData Backend Service (for Pagination purposes) to get data from a backend server with the help of OData. diff --git a/docs/grid-functionalities/infinite-scroll.md b/docs/grid-functionalities/infinite-scroll.md new file mode 100644 index 0000000..85f28d7 --- /dev/null +++ b/docs/grid-functionalities/infinite-scroll.md @@ -0,0 +1,162 @@ +## Description + +Infinite scrolling allows the grid to lazy-load rows from the server (or locally) when reaching the scroll bottom (end) position. +In its simplest form, the more the user scrolls down, the more rows will get loaded and appended to the in-memory dataset. + +### Demo + +[JSON Data - Demo Page](https://ghiscoding.github.io/slickgrid-react/#/slickgrid/Example38) / [Demo ViewModel](https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/Example38.tsx) + +[OData Backend Service - Demo Page](https://ghiscoding.github.io/slickgrid-react/#/slickgrid/Example39) / [Demo ViewModel](https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/Example39.tsx) + +[GraphQL Backend Service - Demo Page](https://ghiscoding.github.io/slickgrid-react/#/slickgrid/Example40) / [Demo ViewModel](https://github.com/ghiscoding/slickgrid-react/blob/master/src/examples/slickgrid/Example40.tsx) + +> ![WARNING] +> Pagination Grid Preset (`presets.pagination`) is **not** supported with Infinite Scroll + +## Infinite Scroll with JSON data + +As describe above, when used with a local JSON dataset, it will add data to the in-memory dataset whenever we scroll to the bottom until we reach the end of the dataset (if ever). + +#### Code Sample +When used with a local JSON dataset, the Infinite Scroll is a feature that must be implemented by yourself. You implement by subscribing to 1 main event (`onScroll`) and if you want to reset the data when Sorting then you'll also need to subscribe to the (`onSort`) event. So the idea is to have simple code in the `onScroll` event to detect when we reach the scroll end and then use the DataView `addItems()` to append data to the existing dataset (in-memory) and that's about it. + +```tsx +export class Example { + scrollEndCalled = false; + reactGrid: SlickgridReactInstance; + + reactGridReady(reactGrid: SlickgridReactInstance) { + this.reactGrid = reactGrid; + } + + // add onScroll listener which will detect when we reach the scroll end + // if so, then append items to the dataset + handleOnScroll(event) { + const args = event.detail?.args; + const viewportElm = args.grid.getViewportNode(); + if ( + ['mousewheel', 'scroll'].includes(args.triggeredBy || '') + && !this.scrollEndCalled + && viewportElm.scrollTop > 0 + && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight + ) { + // onScroll end reached, add more items + // for demo purposes, we'll mock next subset of data at last id index + 1 + const startIdx = this.reactGrid.dataView?.getItemCount() || 0; + const newItems = this.loadData(startIdx, FETCH_SIZE); + this.reactGrid.dataView?.addItems(newItems); + this.scrollEndCalled = false; // + } + } + + // do we want to reset the dataset when Sorting? + // if answering Yes then use the code below + handleOnSort() { + if (this.shouldResetOnSort) { + const newData = this.loadData(0, FETCH_SIZE); + this.reactGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered + this.reactGrid.dataView?.setItems(newData); + this.reactGrid.dataView?.reSort(); + } + } + + render() { + return ( + this.reactGridReady($event.detail)} + onScroll={$event => this.handleOnScroll($event.$detail.args)} + onSort={$event => this.handleOnSort())} + /> + ); + } +} +``` + +--- + +## Infinite Scroll with Backend Services + +As describe above, when used with the Backend Service API, it will add data to the in-memory dataset whenever we scroll to the bottom. However there is one thing to note that might surprise you which is that even if Pagination is hidden in the UI, but the fact is that behind the scene that is exactly what it uses (mainly the Pagination Service `.goToNextPage()` to fetch the next set of data). + +#### Code Sample +We'll use the OData Backend Service to demo Infinite Scroll with a Backend Service, however the implementation is similar for any Backend Services. The main difference with the Infinite Scroll implementation is around the `onProcess` and the callback that we use within (which is the `getCustomerCallback` in our use case). This callback will receive a data object that include the `infiniteScrollBottomHit` boolean property, this prop will be `true` only on the 2nd and more passes which will help us make a distinction between the first page load and any other subset of data to append to our in-memory dataset. With this property in mind, we'll assign the entire dataset on 1st pass with `this.dataset = data.value` (when `infiniteScrollBottomHit: false`) but for any other passes, we'll want to use the DataView `addItems()` to append data to the existing dataset (in-memory) and that's about it. + +```tsx +export class Example { + reactGrid: SlickgridReactInstance; + + reactGridReady(reactGrid: SlickgridReactInstance) { + this.reactGrid = reactGrid; + } + + initializeGrid() { + this.columnDefinitions = [ /* ... */ ]; + + this.gridOptions = { + presets: { + // NOTE: pagination preset is NOT supported with infinite scroll + // filters: [{ columnId: 'gender', searchTerms: ['female'] }] + }, + backendServiceApi: { + service: new GridOdataService(), // or any Backend Service + options: { + // enable infinite scroll via Boolean OR via { fetchSize: number } + infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25 + + preProcess: () => { + this.displaySpinner(true); + }, + process: (query) => this.getCustomerApiCall(query), + postProcess: (response) => { + this.displaySpinner(false); + this.getCustomerCallback(response); + }, + // we could use local in-memory Filtering (please note that it only filters against what is currently loaded) + // that is when we want to avoid reloading the entire dataset every time + // useLocalFiltering: true, + } as OdataServiceApi, + }; + } + + // Web API call + getCustomerApiCall(odataQuery) { + return this.http.get(`/api/getCustomers?${odataQuery}`); + } + + getCustomerCallback(data: { '@odata.count': number; infiniteScrollBottomHit: boolean; metrics: Metrics; query: string; value: any[]; }) { + // totalItems property needs to be filled for pagination to work correctly + const totalItemCount: number = data['@odata.count']; + this.metrics.totalItemCount = totalItemCount; + + // even if we're not showing pagination, it is still used behind the scene to fetch next set of data (next page basically) + // once pagination totalItems is filled, we can update the dataset + + // infinite scroll has an extra data property to determine if we hit an infinite scroll and there's still more data (in that case we need append data) + // or if we're on first data fetching (no scroll bottom ever occured yet) + if (!data.infiniteScrollBottomHit) { + // initial load not scroll hit yet, full dataset assignment + this.reactGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered + this.dataset = data.value; + this.metrics.itemCount = data.value.length; + } else { + // scroll hit, for better perf we can simply use the DataView directly for better perf (which is better compare to replacing the entire dataset) + this.reactGrid.dataView?.addItems(data.value); + } + } + + render() { + return ( + this.reactGridReady($event.detail)} + /> + ); + } +} +``` diff --git a/package.json b/package.json index d165ac7..26594f4 100644 --- a/package.json +++ b/package.json @@ -83,11 +83,11 @@ "/src/slickgrid-react" ], "dependencies": { - "@slickgrid-universal/common": "~5.4.0", - "@slickgrid-universal/custom-footer-component": "~5.4.0", - "@slickgrid-universal/empty-warning-component": "~5.4.0", - "@slickgrid-universal/event-pub-sub": "~5.4.0", - "@slickgrid-universal/pagination-component": "~5.4.0", + "@slickgrid-universal/common": "~5.5.0", + "@slickgrid-universal/custom-footer-component": "~5.5.0", + "@slickgrid-universal/empty-warning-component": "~5.5.0", + "@slickgrid-universal/event-pub-sub": "~5.5.0", + "@slickgrid-universal/pagination-component": "~5.5.0", "dequal": "^2.0.3", "i18next": "^23.12.2", "sortablejs": "^1.15.2" @@ -99,18 +99,18 @@ "@formkit/tempo": "^0.1.2", "@popperjs/core": "^2.11.8", "@release-it/conventional-changelog": "^8.0.1", - "@slickgrid-universal/composite-editor-component": "~5.4.0", - "@slickgrid-universal/custom-tooltip-plugin": "~5.4.0", - "@slickgrid-universal/excel-export": "~5.4.0", - "@slickgrid-universal/graphql": "~5.4.0", - "@slickgrid-universal/odata": "~5.4.0", - "@slickgrid-universal/rxjs-observable": "~5.4.0", - "@slickgrid-universal/text-export": "~5.4.0", + "@slickgrid-universal/composite-editor-component": "~5.5.0", + "@slickgrid-universal/custom-tooltip-plugin": "~5.5.0", + "@slickgrid-universal/excel-export": "~5.5.0", + "@slickgrid-universal/graphql": "~5.5.0", + "@slickgrid-universal/odata": "~5.5.0", + "@slickgrid-universal/rxjs-observable": "~5.5.0", + "@slickgrid-universal/text-export": "~5.5.0", "@types/dompurify": "^3.0.5", "@types/fnando__sparkline": "^0.3.7", "@types/i18next-xhr-backend": "^1.4.2", "@types/jest": "^29.5.12", - "@types/node": "^20.14.14", + "@types/node": "^22.1.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@types/sortablejs": "^1.15.8", @@ -163,7 +163,7 @@ "style-loader": "4.0.0", "ts-jest": "^29.2.4", "ts-loader": "^9.5.1", - "typescript": "^5.5.3", + "typescript": "^5.5.4", "typescript-eslint": "^8.0.1", "webpack": "^5.93.0", "webpack-cli": "^5.1.4", @@ -176,4 +176,4 @@ "resolutions": { "caniuse-lite": "1.0.30001649" } -} +} \ No newline at end of file diff --git a/src/examples/slickgrid/App.tsx b/src/examples/slickgrid/App.tsx index f480a3b..f451574 100644 --- a/src/examples/slickgrid/App.tsx +++ b/src/examples/slickgrid/App.tsx @@ -37,6 +37,8 @@ import Example34 from './Example34'; import Example35 from './Example35'; import Example36 from './Example36'; import Example37 from './Example37'; +import Example38 from './Example38'; +import Example39 from './Example39'; const routes: Array<{ path: string; route: string; component: any; title: string; }> = [ { path: 'example1', route: '/example1', component: , title: '1- Basic Grid / 2 Grids' }, @@ -74,6 +76,8 @@ const routes: Array<{ path: string; route: string; component: any; title: string { path: 'example35', route: '/example35', component: , title: '35- Row Based Editing' }, { path: 'example36', route: '/example36', component: , title: '36- Excel Export Formulas' }, { path: 'example37', route: '/example37', component: , title: '37- Footer Totals Row' }, + { path: 'example38', route: '/example38', component: , title: '38- Infinite Scroll with OData' }, + { path: 'example39', route: '/example39', component: , title: '39- Infinite Scroll with GraphQL' }, ]; export default function Routes() { diff --git a/src/examples/slickgrid/Example38.tsx b/src/examples/slickgrid/Example38.tsx new file mode 100644 index 0000000..c5de2c4 --- /dev/null +++ b/src/examples/slickgrid/Example38.tsx @@ -0,0 +1,547 @@ +import { format as dateFormatter } from '@formkit/tempo'; +import { GridOdataService, type OdataServiceApi } from '@slickgrid-universal/odata'; +import React from 'react'; + +import { + Aggregators, + type Column, + FieldType, + Filters, + type GridOption, + type Grouping, + type Metrics, + type OnRowCountChangedEventArgs, + SlickgridReact, + type SlickgridReactInstance, + SortComparers, +} from '../../slickgrid-react'; + +import './example38.scss'; +import type BaseSlickGridState from './state-slick-grid-base'; + +const sampleDataRoot = 'assets/data'; +const CARET_HTML_ESCAPED = '%5E'; +const PERCENT_HTML_ESCAPED = '%25'; + +interface Status { text: string, class: string } + +interface State extends BaseSlickGridState { + metrics: Metrics; + odataQuery: string; + processing: boolean; + errorStatus: string; + isPageErrorTest: boolean; + status: Status; + tagDataClass: string; +} + +interface Props { } + +export default class Example38 extends React.Component { + reactGrid!: SlickgridReactInstance; + backendService: GridOdataService; + + constructor(public readonly props: Props) { + super(props); + this.backendService = new GridOdataService(); + this.state = { + gridOptions: undefined, + columnDefinitions: [], + dataset: [], + errorStatus: '', + metrics: {} as Metrics, + status: { class: '', text: '' }, + odataQuery: '', + processing: false, + isPageErrorTest: false, + tagDataClass: '', + }; + } + + componentDidMount() { + this.defineGrid(); + } + + reactGridReady(reactGrid: SlickgridReactInstance) { + this.reactGrid = reactGrid; + } + + getGridDefinition(): GridOption { + return { + enableAutoResize: true, + autoResize: { + container: '#demo-container', + rightPadding: 10 + }, + checkboxSelector: { + // you can toggle these 2 properties to show the "select all" checkbox in different location + hideInFilterHeaderRow: false, + hideInColumnTitleRow: true + }, + enableCellNavigation: true, + enableFiltering: true, + enableCheckboxSelector: true, + enableRowSelection: true, + enableGrouping: true, + presets: { + // NOTE: pagination preset is NOT supported with infinite scroll + // filters: [{ columnId: 'gender', searchTerms: ['female'] }] + }, + backendServiceApi: { + service: this.backendService, + options: { + // enable infinite via Boolean OR via { fetchSize: number } + infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25 + enableCount: true, + version: 4 + }, + onError: (error: Error) => { + this.setState((state: State) => ({ ...state, errorStatus: error.message })); + this.displaySpinner(false, true); + }, + preProcess: () => { + this.setState((state: State) => ({ ...state, errorStatus: '' })); + this.displaySpinner(true); + }, + process: (query) => this.getCustomerApiCall(query), + postProcess: (response) => { + this.setState( + (state: State) => ({ ...state, metrics: response.metrics }), + () => this.getCustomerCallback(response) + ); + this.displaySpinner(false); + } + } as OdataServiceApi + }; + } + + getColumnDefinitions(): Column[] { + return [ + { + id: 'name', name: 'Name', field: 'name', sortable: true, + type: FieldType.string, + filterable: true, + filter: { model: Filters.compoundInput } + }, + { + id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true, + filter: { + model: Filters.singleSelect, + collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }] + } + }, + { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true }, + { + id: 'category_name', name: 'Category', field: 'category/name', filterable: true, sortable: true, + formatter: (_row, _cell, _val, _colDef, dataContext) => dataContext['category']?.['name'] || '' + } + ]; + } + + defineGrid() { + const columnDefinitions = this.getColumnDefinitions(); + const gridOptions = this.getGridDefinition(); + + this.setState((state: State) => ({ + ...state, + columnDefinitions, + gridOptions, + })); + } + + displaySpinner(isProcessing: boolean, isError?: boolean) { + this.setState((state: State) => ({ ...state, processing: isProcessing })); + + if (isError) { + this.setState((state: State) => ({ ...state, status: { text: 'ERROR!!!', class: 'alert alert-danger' } })); + } else { + this.setState((state: State) => ({ + ...state, + status: (isProcessing) + ? { text: 'loading', class: 'alert alert-warning' } + : { text: 'finished', class: 'alert alert-success' } + })); + } + } + + getCustomerCallback(data: any) { + // totalItems property needs to be filled for pagination to work correctly + // however we need to force React to do a dirty check, doing a clone object will do just that + const totalItemCount: number = data['@odata.count']; + + this.setState((state: State) => ({ + ...state, + odataQuery: data['query'], + metrics: { ...state.metrics, totalItemCount } + })); + + // even if we're not showing pagination, it is still used behind the scene to fetch next set of data (next page basically) + // once pagination totalItems is filled, we can update the dataset + + // infinite scroll has an extra data property to determine if we hit an infinite scroll and there's still more data (in that case we need append data) + // or if we're on first data fetching (no scroll bottom ever occured yet) + if (!data.infiniteScrollBottomHit) { + // initial load not scroll hit yet, full dataset assignment + this.reactGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered + this.setState((state: State) => ({ + ...state, + dataset: data.value, + metrics: { ...state.metrics, itemCount: data.value.length } + })); + } else { + // scroll hit, for better perf we can simply use the DataView directly for better perf (which is better compare to replacing the entire dataset) + this.reactGrid.dataView?.addItems(data.value); + } + + // NOTE: you can get currently loaded item count via the `onRowCountChanged`slick event, see `refreshMetrics()` below + // OR you could also calculate it yourself or get it via: `this.sgb.dataView.getItemCount() === totalItemCount` + // console.log('is data fully loaded: ', this.sgb.dataView?.getItemCount() === totalItemCount); + } + + getCustomerApiCall(query: string) { + // in your case, you will call your WebAPI function (wich needs to return a Promise) + // for the demo purpose, we will call a mock WebAPI function + return this.getCustomerDataApiMock(query); + } + + /** + * This function is only here to mock a WebAPI call (since we are using a JSON file for the demo) + * in your case the getCustomer() should be a WebAPI function returning a Promise + */ + getCustomerDataApiMock(query: string): Promise { + // the mock is returning a Promise, just like a WebAPI typically does + return new Promise(resolve => { + const queryParams = query.toLowerCase().split('&'); + let top: number; + let skip = 0; + let orderBy = ''; + let countTotalItems = 100; + const columnFilters = {}; + + if (this.state.isPageErrorTest) { + this.setState((state: State) => ({ ...state, isPageErrorTest: false })); + throw new Error('Server timed out trying to retrieve data for the last page'); + } + + for (const param of queryParams) { + if (param.includes('$top=')) { + top = +(param.substring('$top='.length)); + if (top === 50000) { + throw new Error('Server timed out retrieving 50,000 rows'); + } + } + if (param.includes('$skip=')) { + skip = +(param.substring('$skip='.length)); + } + if (param.includes('$orderby=')) { + orderBy = param.substring('$orderby='.length); + } + if (param.includes('$filter=')) { + const filterBy = param.substring('$filter='.length).replace('%20', ' '); + if (filterBy.includes('matchespattern')) { + const regex = new RegExp(`matchespattern\\(([a-zA-Z]+),\\s'${CARET_HTML_ESCAPED}(.*?)'\\)`, 'i'); + const filterMatch = filterBy.match(regex) || []; + const fieldName = filterMatch[1].trim(); + (columnFilters as any)[fieldName] = { type: 'matchespattern', term: '^' + filterMatch[2].trim() }; + } + if (filterBy.includes('contains')) { + const filterMatch = filterBy.match(/contains\(([a-zA-Z/]+),\s?'(.*?)'/); + const fieldName = filterMatch![1].trim(); + (columnFilters as any)[fieldName] = { type: 'substring', term: filterMatch![2].trim() }; + } + if (filterBy.includes('substringof')) { + const filterMatch = filterBy.match(/substringof\('(.*?)',\s([a-zA-Z/]+)/); + const fieldName = filterMatch![2].trim(); + (columnFilters as any)[fieldName] = { type: 'substring', term: filterMatch![1].trim() }; + } + for (const operator of ['eq', 'ne', 'le', 'lt', 'gt', 'ge']) { + if (filterBy.includes(operator)) { + const re = new RegExp(`([a-zA-Z ]*) ${operator} '(.*?)'`); + const filterMatch = re.exec(filterBy); + if (Array.isArray(filterMatch)) { + const fieldName = filterMatch[1].trim(); + (columnFilters as any)[fieldName] = { type: operator, term: filterMatch[2].trim() }; + } + } + } + if (filterBy.includes('startswith') && filterBy.includes('endswith')) { + const filterStartMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/) || []; + const filterEndMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/) || []; + const fieldName = filterStartMatch[1].trim(); + (columnFilters as any)[fieldName] = { type: 'starts+ends', term: [filterStartMatch[2].trim(), filterEndMatch[2].trim()] }; + } else if (filterBy.includes('startswith')) { + const filterMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/); + const fieldName = filterMatch![1].trim(); + (columnFilters as any)[fieldName] = { type: 'starts', term: filterMatch![2].trim() }; + } else if (filterBy.includes('endswith')) { + const filterMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/); + const fieldName = filterMatch![1].trim(); + (columnFilters as any)[fieldName] = { type: 'ends', term: filterMatch![2].trim() }; + } + + // simulate a backend error when trying to sort on the "Company" field + if (filterBy.includes('company')) { + throw new Error('Server could not filter using the field "Company"'); + } + } + } + + // simulate a backend error when trying to sort on the "Company" field + if (orderBy.includes('company')) { + throw new Error('Server could not sort using the field "Company"'); + } + + // read the json and create a fresh copy of the data that we are free to modify + fetch(`${sampleDataRoot}/customers_100.json`) + .then(response => response.json()) + .then(response => { + let data = response as any[]; + + // Sort the data + if (orderBy?.length > 0) { + const orderByClauses = orderBy.split(','); + for (const orderByClause of orderByClauses) { + const orderByParts = orderByClause.split(' '); + const orderByField = orderByParts[0]; + + let selector = (obj: any): string => obj; + for (const orderByFieldPart of orderByField.split('/')) { + const prevSelector = selector; + selector = (obj: any) => { + return prevSelector(obj)[orderByFieldPart as any]; + }; + } + + const sort = orderByParts[1] ?? 'asc'; + switch (sort.toLocaleLowerCase()) { + case 'asc': + data = data.sort((a, b) => selector(a).localeCompare(selector(b))); + break; + case 'desc': + data = data.sort((a, b) => selector(b).localeCompare(selector(a))); + break; + } + } + } + + // Read the result field from the JSON response. + let firstRow = skip; + let filteredData = data; + if (columnFilters) { + for (const columnId in columnFilters) { + if (columnFilters.hasOwnProperty(columnId)) { + filteredData = filteredData.filter(column => { + const filterType = (columnFilters as any)[columnId].type; + const searchTerm = (columnFilters as any)[columnId].term; + let colId = columnId; + if (columnId?.indexOf(' ') !== -1) { + const splitIds = columnId.split(' '); + colId = splitIds[splitIds.length - 1]; + } + let filterTerm; + let col = column; + for (const part of colId.split('/')) { + filterTerm = (col as any)[part]; + col = filterTerm; + } + + if (filterTerm) { + const [term1, term2] = Array.isArray(searchTerm) ? searchTerm : [searchTerm]; + + switch (filterType) { + case 'eq': return filterTerm.toLowerCase() === term1; + case 'ne': return filterTerm.toLowerCase() !== term1; + case 'le': return filterTerm.toLowerCase() <= term1; + case 'lt': return filterTerm.toLowerCase() < term1; + case 'gt': return filterTerm.toLowerCase() > term1; + case 'ge': return filterTerm.toLowerCase() >= term1; + case 'ends': return filterTerm.toLowerCase().endsWith(term1); + case 'starts': return filterTerm.toLowerCase().startsWith(term1); + case 'starts+ends': return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2); + case 'substring': return filterTerm.toLowerCase().includes(term1); + case 'matchespattern': return new RegExp((term1 as string).replace(new RegExp(PERCENT_HTML_ESCAPED, 'g'), '.*'), 'i').test(filterTerm); + } + } + }); + } + } + countTotalItems = filteredData.length; + } + + // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query + if (firstRow > filteredData.length) { + query = query.replace(`$skip=${firstRow}`, ''); + firstRow = 0; + } + const updatedData = filteredData.slice(firstRow, firstRow + top!); + + setTimeout(() => { + const backendResult: any = { query }; + backendResult['value'] = updatedData; + backendResult['@odata.count'] = countTotalItems; + + resolve(backendResult); + }, 150); + }); + }); + } + + groupByGender() { + this.reactGrid?.dataView?.setGrouping({ + getter: 'gender', + formatter: (g) => `Gender: ${g.value} (${g.count} items)`, + comparer: (a, b) => SortComparers.string(a.value, b.value), + aggregators: [ + new Aggregators.Sum('gemder') + ], + aggregateCollapsed: false, + lazyTotalsCalculation: true + } as Grouping); + + // you need to manually add the sort icon(s) in UI + this.reactGrid?.slickGrid.setSortColumns([{ columnId: 'duration', sortAsc: true }]); + this.reactGrid?.slickGrid.invalidate(); // invalidate all rows and re-render + } + + clearAllFiltersAndSorts() { + if (this.reactGrid?.gridService) { + this.reactGrid.gridService.clearAllFiltersAndSorts(); + } + } + + refreshMetrics(args: OnRowCountChangedEventArgs) { + const itemCount = this.reactGrid.dataView?.getFilteredItemCount() || 0; + if (args?.current >= 0) { + this.setState((state: State) => ({ + ...state, + metrics: { ...state.metrics, itemCount }, + tagDataClass: itemCount === this.state.metrics.totalItemCount + ? 'fully-loaded' + : 'partial-load' + })); + } + } + + setFiltersDynamically() { + // we can Set Filters Dynamically (or different filters) afterward through the FilterService + this.reactGrid.filterService.updateFilters([ + { columnId: 'gender', searchTerms: ['female'] }, + ]); + } + + setSortingDynamically() { + this.reactGrid.sortService.updateSorting([ + { columnId: 'name', direction: 'DESC' }, + ]); + } + + + // THE FOLLOWING METHODS ARE ONLY FOR DEMO PURPOSES DO NOT USE THIS CODE + // --- + + render() { + return !this.state.gridOptions ? '' : ( +
+
+

+ Example 38: OData (v4) Backend Service with Infinite Scroll + + see  + + code + + +

+
+
+
+
    +
  • + Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. + In its simplest form, the more the user scrolls down, the more rows get loaded. + If we reached the end of the dataset and there is no more data to load, then we'll assume to have the entire dataset loaded in memory. + This contrast with the regular Pagination approach which will hold only hold data for 1 page at a time. +
    • +
  • NOTES
    • +
      +
    1. + presets.pagination is not supported with Infinite Scroll and will revert to the first page, + simply because since we keep appending data, we always have to start from index zero (no offset). +
      2. +
    2. + Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next batch). +
      3. +
    3. + Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page). +
      4. +
    +
+
+
+
+ {this.state.errorStatus &&
+ Backend Error: {this.state.errorStatus} +
} +
+
+ +
+
+
+ Status: {this.state.status.text} + {this.state.processing && + + } +
+
+
+
+ OData Query: {this.state.odataQuery} +
+
+
+ +
+
+ + + + + + {this.state.metrics &&
<>Metrics: + {this.state.metrics?.endTime ? dateFormatter(this.state.metrics.endTime, 'DD MMM, h:mm:ss a') : ''} — + {this.state.metrics.itemCount} + of + {this.state.metrics.totalItemCount} items + + All Data Loaded!!! + + +
} +
+
+ + this.reactGridReady($event.detail)} + onRowCountChanged={$event => this.refreshMetrics($event.detail.args)} + /> +
+
+ ); + } +} + diff --git a/src/examples/slickgrid/Example39.tsx b/src/examples/slickgrid/Example39.tsx new file mode 100644 index 0000000..19afd6d --- /dev/null +++ b/src/examples/slickgrid/Example39.tsx @@ -0,0 +1,496 @@ +import { format as dateFormatter } from '@formkit/tempo'; +import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi } from '@slickgrid-universal/graphql'; +import i18next, { type TFunction } from 'i18next'; +import React from 'react'; +import { withTranslation } from 'react-i18next'; +import { + FieldType, + Filters, + type Metrics, + type MultipleSelectOption, + type OnRowCountChangedEventArgs, + SlickgridReact, + type SlickgridReactInstance, +} from '../../slickgrid-react'; + +import type BaseSlickGridState from './state-slick-grid-base'; +import './example39.scss'; + +interface Status { text: string, class: string } +interface Props { + t: TFunction; +} + +interface State extends BaseSlickGridState { + graphqlQuery: string, + processing: boolean, + selectedLanguage: string, + metrics: Metrics, + status: Status, + serverWaitDelay: number, + tagDataClass: string, +} + +const sampleDataRoot = 'assets/data'; +const GRAPHQL_QUERY_DATASET_NAME = 'users'; +const FAKE_SERVER_DELAY = 250; + +function unescapeAndLowerCase(val: string) { + return val.replace(/^"/, '').replace(/"$/, '').toLowerCase(); +} + +class Example39 extends React.Component { + reactGrid!: SlickgridReactInstance; + graphqlService = new GraphqlService(); + + constructor(public readonly props: Props) { + super(props); + const defaultLang = 'en'; + + this.state = { + gridOptions: undefined, + columnDefinitions: [], + dataset: [], + metrics: {} as Metrics, + processing: false, + graphqlQuery: '', + selectedLanguage: defaultLang, + status: {} as Status, + serverWaitDelay: FAKE_SERVER_DELAY, // server simulation with default of 250ms but 50ms for Cypress tests + tagDataClass: '', + }; + + i18next.changeLanguage(defaultLang); + } + + componentDidMount() { + this.defineGrid(); + } + + reactGridReady(reactGrid: SlickgridReactInstance) { + this.reactGrid = reactGrid; + } + + getColumnsDefinition() { + return [ + { + id: 'name', field: 'name', nameKey: 'NAME', width: 60, + type: FieldType.string, + sortable: true, + filterable: true, + filter: { + model: Filters.compoundInput, + } + }, + { + id: 'gender', field: 'gender', nameKey: 'GENDER', filterable: true, sortable: true, width: 60, + filter: { + model: Filters.singleSelect, + collection: [{ value: '', label: '' }, { value: 'male', labelKey: 'MALE', }, { value: 'female', labelKey: 'FEMALE', }] + } + }, + { + id: 'company', field: 'company', nameKey: 'COMPANY', width: 60, + sortable: true, + filterable: true, + filter: { + model: Filters.multipleSelect, + customStructure: { + label: 'company', + value: 'company' + }, + collectionSortBy: { + property: 'company', + sortDesc: false + }, + collectionAsync: fetch(`${sampleDataRoot}/customers_100.json`).then(e => e.json()), + filterOptions: { + filter: true // adds a filter on top of the multi-select dropdown + } as MultipleSelectOption + } + }, + ]; + } + + defineGrid() { + const columnDefinitions = this.getColumnsDefinition(); + const gridOptions = this.getGridOptions(); + + this.setState((props: Props, state: any) => { + return { + ...state, + columnDefinitions, + gridOptions + }; + }); + } + + getGridOptions() { + return { + enableAutoResize: true, + autoResize: { + container: '#demo-container', + rightPadding: 10 + }, + enableFiltering: true, + enableCellNavigation: true, + enableTranslate: true, + createPreHeaderPanel: true, + showPreHeaderPanel: true, + preHeaderPanelHeight: 28, + i18n: i18next, + gridMenu: { + resizeOnShowHeaderRow: true, + }, + backendServiceApi: { + // we need to disable default internalPostProcess so that we deal with either replacing full dataset or appending to it + disableInternalPostProcess: true, + service: this.graphqlService, + options: { + datasetName: GRAPHQL_QUERY_DATASET_NAME, // the only REQUIRED property + addLocaleIntoQuery: true, // optionally add current locale into the query + extraQueryArguments: [{ // optionally add some extra query arguments as input query arguments + field: 'userId', + value: 123 + }], + // enable infinite via Boolean OR via { fetchSize: number } + infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25 + }, + // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init + // onInit: (query) => this.getCustomerApiCall(query) + preProcess: () => this.displaySpinner(true), + process: (query) => this.getCustomerApiCall(query), + postProcess: (result: GraphqlPaginatedResult) => { + const metrics = result.metrics as Metrics; + + this.setState((state: State) => ({ + ...state, + metrics, + })); + + this.displaySpinner(false); + this.getCustomerCallback(result); + } + } as GraphqlServiceApi + }; + } + + clearAllFiltersAndSorts() { + if (this.reactGrid?.gridService) { + this.reactGrid.gridService.clearAllFiltersAndSorts(); + } + } + + displaySpinner(isProcessing: boolean) { + const newStatus = (isProcessing) + ? { text: 'processing...', class: 'alert alert-danger' } + : { text: 'finished', class: 'alert alert-success' }; + + this.setState((state: any) => { + return { + ...state, + status: newStatus, + processing: isProcessing, + }; + }); + } + + getCustomerCallback(result: any) { + const { nodes, totalCount } = result.data[GRAPHQL_QUERY_DATASET_NAME]; + if (this.reactGrid) { + this.setState((state: State) => ({ + ...state, + metrics: { ...state.metrics, totalItemCount: totalCount } + })); + + // even if we're not showing pagination, it is still used behind the scene to fetch next set of data (next page basically) + // once pagination totalItems is filled, we can update the dataset + + // infinite scroll has an extra data property to determine if we hit an infinite scroll and there's still more data (in that case we need append data) + // or if we're on first data fetching (no scroll bottom ever occured yet) + if (!result.infiniteScrollBottomHit) { + // initial load not scroll hit yet, full dataset assignment + this.reactGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered + this.setState((state: State) => ({ + ...state, + dataset: nodes, + metrics: { ...state.metrics, itemCount: nodes.length } + })); + } else { + // scroll hit, for better perf we can simply use the DataView directly for better perf (which is better compare to replacing the entire dataset) + this.reactGrid.dataView?.addItems(nodes); + } + + // NOTE: you can get currently loaded item count via the `onRowCountChanged`slick event, see `refreshMetrics()` below + // OR you could also calculate it yourself or get it via: `this.reactGrid?.dataView.getItemCount() === totalItemCount` + // console.log('is data fully loaded: ', this.reactGrid?.dataView?.getItemCount() === totalItemCount); + } + } + + /** + * Calling your GraphQL backend server should always return a Promise of type GraphqlPaginatedResult + * + * @param query + * @return Promise + */ + getCustomerApiCall(query: string): Promise { + // in your case, you will call your WebAPI function (wich needs to return a Promise) + // for the demo purpose, we will call a mock WebAPI function + return this.getCustomerDataApiMock(query); + } + + getCustomerDataApiMock(query: string): Promise { + return new Promise(resolve => { + let firstCount = 0; + let offset = 0; + let orderByField = ''; + let orderByDir = ''; + + fetch(`${sampleDataRoot}/customers_100.json`) + .then(e => e.json()) + .then((data: any) => { + let filteredData: Array<{ id: number; name: string; gender: string; company: string; category: { id: number; name: string; }; }> = data; + if (query.includes('first:')) { + const topMatch = query.match(/first:([0-9]+),/) || []; + firstCount = +topMatch[1]; + } + if (query.includes('offset:')) { + const offsetMatch = query.match(/offset:([0-9]+),/) || []; + offset = +offsetMatch[1]; + } + if (query.includes('orderBy:')) { + const [_, field, dir] = /orderBy:\[{field:([a-zA-Z/]+),direction:(ASC|DESC)}\]/gi.exec(query) || []; + orderByField = field || ''; + orderByDir = dir || ''; + } + if (query.includes('orderBy:')) { + const [_, field, dir] = /orderBy:\[{field:([a-zA-Z/]+),direction:(ASC|DESC)}\]/gi.exec(query) || []; + orderByField = field || ''; + orderByDir = dir || ''; + } + if (query.includes('filterBy:')) { + const regex = /{field:(\w+),operator:(\w+),value:([0-9a-z',"\s]*)}/gi; + + // loop through all filters + let matches; + while ((matches = regex.exec(query)) !== null) { + const field = matches[1] || ''; + const operator = matches[2] || ''; + const value = matches[3] || ''; + + let [term1, term2] = value.split(','); + + if (field && operator && value !== '') { + filteredData = filteredData.filter((dataContext: any) => { + const dcVal = dataContext[field]; + // remove any double quotes & lowercase the terms + term1 = unescapeAndLowerCase(term1); + term2 = unescapeAndLowerCase(term2 || ''); + + switch (operator) { + case 'EQ': return dcVal.toLowerCase() === term1; + case 'NE': return dcVal.toLowerCase() !== term1; + case 'LE': return dcVal.toLowerCase() <= term1; + case 'LT': return dcVal.toLowerCase() < term1; + case 'GT': return dcVal.toLowerCase() > term1; + case 'GE': return dcVal.toLowerCase() >= term1; + case 'EndsWith': return dcVal.toLowerCase().endsWith(term1); + case 'StartsWith': return dcVal.toLowerCase().startsWith(term1); + case 'Starts+Ends': return dcVal.toLowerCase().startsWith(term1) && dcVal.toLowerCase().endsWith(term2); + case 'Contains': return dcVal.toLowerCase().includes(term1); + case 'Not_Contains': return !dcVal.toLowerCase().includes(term1); + case 'IN': + const terms = value.toLocaleLowerCase().split(','); + for (const term of terms) { + if (dcVal.toLocaleLowerCase() === unescapeAndLowerCase(term)) { + return true; + } + } + break; + } + }); + } + } + } + + // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query + let firstRow = offset; + if (firstRow > filteredData.length) { + query = query.replace(`offset:${firstRow}`, ''); + firstRow = 0; + } + + // sorting when defined + const selector = (obj: any) => orderByField ? obj[orderByField] : obj; + switch (orderByDir.toUpperCase()) { + case 'ASC': + filteredData = filteredData.sort((a, b) => selector(a).localeCompare(selector(b))); + break; + case 'DESC': + filteredData = filteredData.sort((a, b) => selector(b).localeCompare(selector(a))); + break; + } + + // return data subset (page) + const updatedData = filteredData.slice(firstRow, firstRow + firstCount); + + // in your case, you will call your WebAPI function (wich needs to return a Promise) + // for the demo purpose, we will call a mock WebAPI function + const mockedResult = { + // the dataset name is the only unknown property + // will be the same defined in your GraphQL Service init, in our case GRAPHQL_QUERY_DATASET_NAME + data: { + [GRAPHQL_QUERY_DATASET_NAME]: { + nodes: updatedData, + totalCount: filteredData.length, + }, + }, + }; + + setTimeout(() => { + this.setState((state: State) => ({ + ...state, + graphqlQuery: this.state.gridOptions!.backendServiceApi!.service.buildQuery() + })); + resolve(mockedResult); + }, this.state.serverWaitDelay); + }); + }); + } + + refreshMetrics(args: OnRowCountChangedEventArgs) { + const itemCount = this.reactGrid.dataView?.getFilteredItemCount() || 0; + if (args?.current >= 0) { + this.setState((state: State) => ({ + ...state, + metrics: { ...state.metrics, itemCount }, + tagDataClass: itemCount === this.state.metrics.totalItemCount + ? 'fully-loaded' + : 'partial-load' + })); + } + } + + serverDelayChanged(e: React.FormEvent) { + const newDelay = +((e.target as HTMLInputElement)?.value ?? ''); + this.setState((state: State) => ({ ...state, serverWaitDelay: newDelay })); + } + + async switchLanguage() { + const nextLanguage = (this.state.selectedLanguage === 'en') ? 'fr' : 'en'; + await i18next.changeLanguage(nextLanguage); + this.setState((state: State) => ({ ...state, selectedLanguage: nextLanguage })); + } + + render() { + return !this.state.gridOptions ? '' : ( +
+
+

+ Example 39: GraphQL Backend Service with Infinite Scroll + + see  + + code + + +

+ +
+
+
    +
  • + Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. + In its simplest form, the more the user scrolls down, the more rows get loaded. + If we reached the end of the dataset and there is no more data to load, then we'll assume to have the entire dataset loaded in memory. + This contrast with the regular Pagination approach which will hold only hold data for 1 page at a time. +
    • +
  • NOTES
    • +
      +
    1. + presets.pagination is not supported with Infinite Scroll and will revert to the first page, + simply because since we keep appending data, we always have to start from index zero (no offset). +
      2. +
    2. + Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next batch). +
      3. +
    3. + Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page). +
      4. +
    +
+
+
+ +
+
+
+ Status: {this.state.status.text} + {this.state.processing ? + + : ''} +
+ +
+
+ + + this.serverDelayChanged($event)} + title="input a fake timer delay to simulate slow server response" /> +
+
+ +
+
+ + Locale: + + {this.state.selectedLanguage + '.json'} + +
+
+
+ {this.state.metrics &&
<>Metrics: + {this.state.metrics?.endTime ? dateFormatter(this.state.metrics.endTime, 'DD MMM, h:mm:ss a') : ''} — + {this.state.metrics.itemCount} + of + {this.state.metrics.totalItemCount} items + + All Data Loaded!!! + + +
} +
+
+
+ GraphQL Query: {this.state.graphqlQuery} +
+
+
+ + this.reactGridReady($event.detail)} + onRowCountChanged={$event => this.refreshMetrics($event.detail.args)} + /> +
+
+ ); + } +} + +export default withTranslation()(Example39); diff --git a/src/examples/slickgrid/example38.scss b/src/examples/slickgrid/example38.scss new file mode 100644 index 0000000..b1af851 --- /dev/null +++ b/src/examples/slickgrid/example38.scss @@ -0,0 +1,8 @@ +.demo38 { + .badge { + display: none; + &.fully-loaded { + display: inline-flex; + } + } +} \ No newline at end of file diff --git a/src/examples/slickgrid/example39.scss b/src/examples/slickgrid/example39.scss new file mode 100644 index 0000000..0d7fa4e --- /dev/null +++ b/src/examples/slickgrid/example39.scss @@ -0,0 +1,8 @@ +.demo39 { + .badge { + display: none; + &.fully-loaded { + display: inline-flex; + } + } +} \ No newline at end of file diff --git a/src/slickgrid-react/components/slickgrid-react.tsx b/src/slickgrid-react/components/slickgrid-react.tsx index 1627a6d..d0ab759 100644 --- a/src/slickgrid-react/components/slickgrid-react.tsx +++ b/src/slickgrid-react/components/slickgrid-react.tsx @@ -5,6 +5,7 @@ import React from 'react'; import { // interfaces/types type AutocompleterEditor, + type BackendService, type BackendServiceApi, type BackendServiceOption, type Column, @@ -116,6 +117,7 @@ export class SlickgridReact extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component { + this.backendUtilityService.setInfiniteScrollBottomHit(true); + + // even if we're not showing pagination, we still use pagination service behind the scene + // to keep track of the scroll position and fetch next set of data (aka next page) + // we also need a flag to know if we reached the of the dataset or not (no more pages) + this.paginationService.goToNextPage().then(hasNext => { + if (!hasNext) { + this.backendUtilityService.setInfiniteScrollBottomHit(false); + } + }); + }; + this.gridOptions.backendServiceApi.onScrollEnd = onScrollEnd; + + // subscribe to SlickGrid onScroll to determine when reaching the end of the scroll bottom position + // run onScrollEnd() method when that happens + this._eventHandler.subscribe(this.grid.onScroll, (_e, args) => { + const viewportElm = args.grid.getViewportNode()!; + if ( + ['mousewheel', 'scroll'].includes(args.triggeredBy || '') + && this.paginationService?.totalItems + && args.scrollTop > 0 + && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight + ) { + if (!this._scrollEndCalled) { + onScrollEnd(); + this._scrollEndCalled = true; + } + } + }); + + // use postProcess to identify when scrollEnd process is finished to avoid calling the scrollEnd multiple times + // we also need to keep a ref of the user's postProcess and call it after our own postProcess + const orgPostProcess = this.gridOptions.backendServiceApi.postProcess; + this.gridOptions.backendServiceApi.postProcess = (processResult: any) => { + this._scrollEndCalled = false; + if (orgPostProcess) { + orgPostProcess(processResult); + } + }; } } @@ -1046,7 +1113,7 @@ export class SlickgridReact extends React.Component extends React.Component extends React.Component extends React.Component extends React.Component { + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example38`); + cy.get('h2').should('contain', 'Example 38: OData (v4) Backend Service with Infinite Scroll'); + }); + + describe('when "enableCount" is set', () => { + it('should have default OData query', () => { + cy.get('[data-test=alert-odata-query]').should('exist'); + cy.get('[data-test=alert-odata-query]').should('contain', 'OData Query'); + + // wait for the query to finish + cy.get('[data-test=status]').should('contain', 'finished'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30`); + }); + }); + + it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30`); + }); + }); + + it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a new total of 90 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '90'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=60`); + }); + }); + + it('should do one last scroll to reach the end of the data and have a full total of 100 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '90'); + + cy.get('[data-test="data-loaded-tag"]') + .should('be.hidden'); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '100'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=90`); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('be.visible'); + + cy.get('[data-test="data-loaded-tag"]') + .should('have.class', 'fully-loaded'); + }); + + it('should sort by Name column and expect dataset to restart at index zero and have a total of 30 items', () => { + cy.get('[data-test="data-loaded-tag"]') + .should('have.class', 'fully-loaded'); + + cy.get('[data-id="name"]') + .click(); + + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc`); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + }); + + it('should scroll to bottom again and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30&$orderby=Name asc`); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + }); + + it('should change Gender filter to "female" and expect dataset to restart at index zero and have a total of 30 items', () => { + cy.get('.ms-filter.filter-gender:visible').click(); + + cy.get('[data-name="filter-gender"].ms-drop') + .find('li:visible:nth(2)') + .contains('female') + .click(); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc&$filter=(Gender eq 'female')`); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + }); + + it('should scroll to bottom again and expect next batch to be only 20 females appended to current dataset for a total of 50 items found in DB', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '50'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30&$orderby=Name asc&$filter=(Gender eq 'female')`); + }); + }); + + it('should "Group by Gender" and expect 30 items grouped', () => { + cy.get('[data-test="clear-filters-sorting"]').click(); + cy.get('[data-test="group-by-gender"]').click(); + + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('top'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30`); + }); + + cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Gender: [female|male]/); + }); + + it('should scroll to the bottom "Group by Gender" and expect 30 more items for a total of 60 items grouped', () => { + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('top'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$skip=30`); + }); + + cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Gender: [female|male]/); + }); + + it('should sort by Name column again and expect dataset to restart at index zero and have a total of 30 items still having Group Gender', () => { + cy.get('[data-id="name"]') + .click(); + + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('[data-test=odata-query-result]') + .should(($span) => { + expect($span.text()).to.eq(`$count=true&$top=30&$orderby=Name asc`); + }); + + cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1); + cy.get(`[style="top: 0px;"] > .slick-cell:nth(0) .slick-group-title`).contains(/Gender: [female|male]/); + }); + }); +}); diff --git a/test/cypress/e2e/example39.cy.ts b/test/cypress/e2e/example39.cy.ts new file mode 100644 index 0000000..1cd6f3e --- /dev/null +++ b/test/cypress/e2e/example39.cy.ts @@ -0,0 +1,172 @@ +import { removeWhitespaces } from '../plugins/utilities'; + +describe('Example 39 - Infinite Scroll with GraphQL', () => { + it('should display Example title', () => { + cy.visit(`${Cypress.config('baseUrl')}/example39`); + cy.get('h2').should('contain', 'Example 39: GraphQL Backend Service with Infinite Scroll'); + }); + + it('should use fake smaller server wait delay for faster E2E tests', () => { + cy.get('[data-test="server-delay"]') + .clear() + .type('20'); + }); + + it('should have default GraphQL query', () => { + cy.get('[data-test=alert-graphql-query]').should('exist'); + cy.get('[data-test=alert-graphql-query]').should('contain', 'GraphQL Query'); + + // wait for the query to finish + cy.get('[data-test=status]').should('contain', 'finished'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); + }); + }); + + it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:30,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); + }); + }); + + it('should scroll to bottom of the grid and expect next batch of 30 items appended to current dataset for a new total of 90 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '90'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:60,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); + }); + }); + + it('should do one last scroll to reach the end of the data and have a full total of 100 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '90'); + + cy.get('[data-test="data-loaded-tag"]') + .should('be.hidden'); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '100'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:90,locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('be.visible'); + + cy.get('[data-test="data-loaded-tag"]') + .should('have.class', 'fully-loaded'); + }); + + it('should sort by Name column and expect dataset to restart at index zero and have a total of 30 items', () => { + cy.get('[data-test="data-loaded-tag"]') + .should('have.class', 'fully-loaded'); + + cy.get('[data-id="name"]') + .click(); + + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0,orderBy:[{field:name,direction:ASC}],locale:"en",userId:123) { + totalCount, nodes { id,name,gender,company } } }`)); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + }); + + it('should scroll to bottom again and expect next batch of 30 items appended to current dataset for a total of 60 items', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '60'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:30,orderBy:[{field:name,direction:ASC}],locale:"en",userId:123) { + totalCount, nodes { id,name,gender,company } } }`)); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + }); + + it('should change Gender filter to "female" and expect dataset to restart at index zero and have a total of 30 items', () => { + cy.get('.ms-filter.filter-gender:visible').click(); + + cy.get('[data-name="filter-gender"].ms-drop') + .find('li:visible:nth(2)') + .contains('Female') + .click(); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:0, + orderBy:[{field:name,direction:ASC}], + filterBy:[{field:gender,operator:EQ,value:"female"}],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); + }); + + cy.get('[data-test="data-loaded-tag"]') + .should('not.have.class', 'fully-loaded'); + }); + + it('should scroll to bottom again and expect next batch to be only 20 females appended to current dataset for a total of 50 items found in DB', () => { + cy.get('[data-test="itemCount"]') + .should('have.text', '30'); + + cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left') + .scrollTo('bottom'); + + cy.get('[data-test="itemCount"]') + .should('have.text', '50'); + + cy.get('[data-test=graphql-query-result]') + .should(($span) => { + const text = removeWhitespaces($span.text()); // remove all white spaces + expect(text).to.eq(removeWhitespaces(`query { users (first:30,offset:30, + orderBy:[{field:name,direction:ASC}], + filterBy:[{field:gender,operator:EQ,value:"female"}],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company } } }`)); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 67e5451..e1ff1f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1030,20 +1030,20 @@ dependencies: "@sinonjs/commons" "^3.0.0" -"@slickgrid-universal/binding@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-5.4.0.tgz#b23c154efe45ba48ad99b305632d4ec9493ac1fc" - integrity sha512-4u2n/B8tmeUaaoC5+mB3W6QGaUHiDZUWklnb8r3tvwo86GV60LA+GNgGxl9ireCsqY1F4b0MtZ63ut7dYmyHnA== +"@slickgrid-universal/binding@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-5.5.0.tgz#08501d484ed95380a4e63e3669d28e1bf9a4e2b7" + integrity sha512-AQwwoZIOX1ei//dBLLAmNRID9F32OHIi4eXM80IMPdIu3YQuJYXz0lgbCK6F7lSrXzIMjPdMuFDYZG5Ov7LnIQ== -"@slickgrid-universal/common@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-5.4.0.tgz#094ab1d90d2e58ed0b3a2bf6a80f0d28095bb0fa" - integrity sha512-8wQB8wjAk25BD4I+cYgJ8XO/VRCgOHq0gZcb0zbzLS/qmEe6LwLK+gmSm7mW30COy47GoQ/fXU+19cZJ0WRSrA== +"@slickgrid-universal/common@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-5.5.0.tgz#dfca5e8a59f67fa7b13cd89d2bb0dca681c713ad" + integrity sha512-gERhBeRqe5uVtlJETiiz6+ENN3zwuFV1UnZp5cd1knwbmhM2tpNaED0gO1lyxSVSxvnEClUgsQCL6gs3syxegg== dependencies: "@formkit/tempo" "^0.1.2" - "@slickgrid-universal/binding" "~5.4.0" - "@slickgrid-universal/event-pub-sub" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/binding" "~5.5.0" + "@slickgrid-universal/event-pub-sub" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" "@types/sortablejs" "^1.15.8" autocompleter "^9.3.0" dequal "^2.0.3" @@ -1051,102 +1051,102 @@ multiple-select-vanilla "^3.2.2" sortablejs "^1.15.2" un-flatten-tree "^2.0.12" - vanilla-calendar-picker "^2.11.7" + vanilla-calendar-picker "^2.11.8" -"@slickgrid-universal/composite-editor-component@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-5.4.0.tgz#b15e64f97fac416fef159823b529cf8ec1e06b77" - integrity sha512-qAmAn0XTZNtQVS4kfm5jF/z51kbZ9VAFYmLFX6rCNC149IA1pio+NscLck/dNTcZHNA0V+m11TlzWtzF/6qDLg== +"@slickgrid-universal/composite-editor-component@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-5.5.0.tgz#4be1d028ca95f7c44e4c8d4e9599ba22962e102c" + integrity sha512-mm6CpfVOEuRSRLMqK6eg214Z+PnTzUOnW5mnekKbcW0XkdnwTCyYxM70eIxdzCsYSL6zcUYMdWOOc5YTlfA6Wg== dependencies: - "@slickgrid-universal/binding" "~5.4.0" - "@slickgrid-universal/common" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/binding" "~5.5.0" + "@slickgrid-universal/common" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" -"@slickgrid-universal/custom-footer-component@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-5.4.0.tgz#7b6703d78d573b096458222ed85fa22250a0bf8a" - integrity sha512-OMumhx6O8vI2/G/Vb21LuwBhJ+fFF0deTNFCbOVyRZuhr2xZSzIfOwDQ8fQqNU/jQUvoKPrA64v/hGwdiHW/Vw== +"@slickgrid-universal/custom-footer-component@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-5.5.0.tgz#4d7ff3478a01d0c38dca2e758c78a68ef9088f29" + integrity sha512-y4MviGTfqPO7wbQdNf39+FLSw0W0b0A5vYPi2ZfPd7QxLrzviYGI1upZmGEk4/wd+quiC2wKWZDWTwY1XKRZOA== dependencies: "@formkit/tempo" "^0.1.2" - "@slickgrid-universal/binding" "~5.4.0" - "@slickgrid-universal/common" "~5.4.0" + "@slickgrid-universal/binding" "~5.5.0" + "@slickgrid-universal/common" "~5.5.0" -"@slickgrid-universal/custom-tooltip-plugin@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-5.4.0.tgz#1940c51fcc5764df02f83bf0cf167d94ed8c23d2" - integrity sha512-d0AROMINi6SipHiBvnt0kkvlmHgOQynIizsajrLaFfayNscdfYw6phKXoausDukFOVpnaZUv/bLupwt3+DuEoA== +"@slickgrid-universal/custom-tooltip-plugin@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-5.5.0.tgz#5bad18f3e42069684cd01916cd049469d1accd83" + integrity sha512-6MPKZumDcn1t3DKNam/OM6E6OFOWXgYQwHAVYHZqd3Y1XHTVch69QngRLHvn4KJ3q9luukqVW6hq0tsjH2RtNg== dependencies: - "@slickgrid-universal/common" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" -"@slickgrid-universal/empty-warning-component@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-5.4.0.tgz#fa27e8e792b9bf53b65bffc4437bba8034ae1db4" - integrity sha512-6zIMREbiR9b8DWGXMcGdishSCBUXA1L9kd1YenW39t8DdgRA7iStuXgnUqFbWEzORcKQNtIDiKU7l8ylLM5j2w== +"@slickgrid-universal/empty-warning-component@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-5.5.0.tgz#6feb83b7502db076ebceb5fe47f466c1cc59e8ae" + integrity sha512-iYRORauRzBdDd0pNgoapqNAWhOzrQ0xzuDheVQ2trfNTMZbT+UWBUHERCqOceidK9TTg5U1ukOG452eg4Jcnwg== dependencies: - "@slickgrid-universal/common" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" -"@slickgrid-universal/event-pub-sub@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/event-pub-sub/-/event-pub-sub-5.4.0.tgz#7dfd5cc9dfca188744b9ef7a6c5c9fb264734fef" - integrity sha512-OwFeZbOi/SP4kcXlLoOlodehyTSfRIc8y5IkgtAhRYyJgYIVt+Xrepn8CBvKrofHc3zDzV1tvqVdnBnZUJRDdA== +"@slickgrid-universal/event-pub-sub@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/event-pub-sub/-/event-pub-sub-5.5.0.tgz#f2baec9d09c7fb404ecf7b5f99c29623c94d8cab" + integrity sha512-5nhXnS2oJZTUQAOt8WX6YQz0mhdSbY1CDAMrIc32QoDEFRQRuxBOEw3tqAwWq8CLTE7eXSyhldVbBiTgumXSzA== dependencies: - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/utils" "~5.5.0" -"@slickgrid-universal/excel-export@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-5.4.0.tgz#04dce3ac02502880baf53a0d07cbb1559b223287" - integrity sha512-tcD27eG5fqN6OYAXRfe/4EOwDmO+KU9pdsFSEoelea0f61bT6z6o5dcrFxFLB1sAcR13ysF14Cgy/6Zws2sNcQ== +"@slickgrid-universal/excel-export@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-5.5.0.tgz#3a878139020c52d7a279b23938ea00aab33a53cb" + integrity sha512-kTmpdBxoZOEEO17PMNp42U/eLE6XhuTpfoPU2/j2e0nOBhs4u6GBLd0zQnotHRRrH00cyRz6W/uoM2PZg/y6qg== dependencies: - "@slickgrid-universal/common" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" excel-builder-vanilla "^3.0.1" -"@slickgrid-universal/graphql@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-5.4.0.tgz#9134c39e5dcd6465bbb8d1e2ad5717b6eac13382" - integrity sha512-D3p8Ack0oTQNRckkJ3O0S3qp31LiZ+cXYhjCmsUGiIZjp8Mr8QW6s9+tt2CIdHVzpLbc2F2AjCaRhintBCMdTw== +"@slickgrid-universal/graphql@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-5.5.0.tgz#76bba394568856a4eb02ef1f8f3a47f8c21f3aa3" + integrity sha512-WnHFRdxS4a4qcbw61gEgXcwXgjCdbHf8+04xoexPAHVV3TfE6VeIei6oXgGh5/zTavd+IZ7TsWMjxe80FQt/mA== dependencies: - "@slickgrid-universal/common" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" -"@slickgrid-universal/odata@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-5.4.0.tgz#3bd4b0ffc548ebe1cf40e48efe11736a5e8b6273" - integrity sha512-pYenT4bUPeAWu19NNvcORfnQJ0K7U1YIV8+oQ4VxBLP8PKdrGFK6ZPUAbZQDywWqRkCovoM425qM6icX2VFyWQ== +"@slickgrid-universal/odata@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-5.5.0.tgz#d7369de9f6ba90fd49c0e4dbcdc4ed219b7386f5" + integrity sha512-mg/YW24SCkI28gLouwEFcpsCLf6nXwdOsqHCozP5r9YOHPsr0fH+zxrhvf6B7MqtB6YXyaVpuzoWG2p2BhrFZQ== dependencies: - "@slickgrid-universal/common" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" -"@slickgrid-universal/pagination-component@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-5.4.0.tgz#f03404fffbbd79edf6b38cb4bd94b2b31666d76a" - integrity sha512-y/4Mol01MqQEmT4tpRlBpMCNIYBm1q2Vm9MhPC7RcYL5Pyt9IAP8Rki2MDKo5CQrfzh28W0+jXYgUsBLU2yVGA== +"@slickgrid-universal/pagination-component@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-5.5.0.tgz#734319be231af707579ffb5af5fc1632cfd63ebc" + integrity sha512-GoiVNgMOMSMx4pwpGmbXYk/E25EEFbVkaJFWYmkcKwpoHyyMaswl1oMuG12U+lGASrcJbQ8e4wBCnmjLLjKicA== dependencies: - "@slickgrid-universal/binding" "~5.4.0" - "@slickgrid-universal/common" "~5.4.0" + "@slickgrid-universal/binding" "~5.5.0" + "@slickgrid-universal/common" "~5.5.0" -"@slickgrid-universal/rxjs-observable@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-5.4.0.tgz#4ce05357f28f4dd8b013281b04bdc5f11d793f6d" - integrity sha512-jFI0ijW1By3V93CNXO95RbFb3aFNGbMhqoxg8YNx7GjWRLPxmFrRKx5CAFsUENmRDkQPp/TBsHu/gLL0Fk298w== +"@slickgrid-universal/rxjs-observable@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-5.5.0.tgz#5ffb612653a1586697c1564ab46ed97bb275f739" + integrity sha512-sBN1AecVDI2h6yJ5jrjG2JIV/kKB2TRKP+8MiHCWGeLeErlvqP/rQH7jLH6my2zbz3J5rSnkuItiiLEon96D5w== dependencies: - "@slickgrid-universal/common" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" rxjs "^7.8.1" -"@slickgrid-universal/text-export@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-5.4.0.tgz#2db797850d5e51c5436d9fcbb575ca0e2d3b40bb" - integrity sha512-qHN+5z3jkOh6nsXw2cPpyUZ67GQdH/1wGnZKkQznfrsuFJBV1ND/nGpMZHzAvNiK2yUMqDAMKA5F/jvxSYZuDw== +"@slickgrid-universal/text-export@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-5.5.0.tgz#c4ca8a57bd565c4235e5348461da73da04328524" + integrity sha512-gMxei8nlMYPmcGPwtmKW1GmFC2zqVGqwZXUl/OeFtIHp0IMtUaztZcCmxC4WJWOEzgxqZMofE0pKIYpUv+zliA== dependencies: - "@slickgrid-universal/common" "~5.4.0" - "@slickgrid-universal/utils" "~5.4.0" + "@slickgrid-universal/common" "~5.5.0" + "@slickgrid-universal/utils" "~5.5.0" text-encoding-utf-8 "^1.0.2" -"@slickgrid-universal/utils@~5.4.0": - version "5.4.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/utils/-/utils-5.4.0.tgz#a673e4b9a5712e020d936f008860a8463442630f" - integrity sha512-1+FNvArDSzG+CyU1gulvqIEYg5z8fQBdvhQPrPq5lJVuQTJBrmefspRANDtWa6WOY2rdOmff50nGdG5P3WondA== +"@slickgrid-universal/utils@~5.5.0": + version "5.5.0" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/utils/-/utils-5.5.0.tgz#0e3c4373de0ee2bcb6a287b5dcc27bf13675cff7" + integrity sha512-wExXsBsSV+VKQR7y+37hbaHXCzvR3Gpwz86BipL+Mj2dTSXLp5Ucobt8taZHAVEj4+VD2V1Uwm1GLEFOPmgJ7Q== "@szmarczak/http-timer@^5.0.1": version "5.0.1" @@ -1400,12 +1400,12 @@ dependencies: undici-types "~5.26.4" -"@types/node@^20.14.14": - version "20.14.14" - resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.14.tgz#6b655d4a88623b0edb98300bb9dd2107225f885e" - integrity sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ== +"@types/node@^22.1.0": + version "22.1.0" + resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b" + integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw== dependencies: - undici-types "~5.26.4" + undici-types "~6.13.0" "@types/normalize-package-data@^2.4.1": version "2.4.4" @@ -8771,16 +8771,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -8907,14 +8898,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -9313,10 +9297,10 @@ typescript-eslint@^8.0.1: "@typescript-eslint/parser" "8.0.1" "@typescript-eslint/utils" "8.0.1" -typescript@^5.5.3: - version "5.5.3" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.3.tgz#e1b0a3c394190838a0b168e771b0ad56a0af0faa" - integrity sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ== +typescript@^5.5.4: + version "5.5.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba" + integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q== uglify-js@^3.1.4: version "3.17.4" @@ -9343,6 +9327,11 @@ undici-types@~5.26.4: resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== +undici-types@~6.13.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5" + integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg== + unicorn-magic@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.1.0.tgz#1bb9a51c823aaf9d73a8bfcd3d1a23dde94b0ce4" @@ -9471,10 +9460,10 @@ validate-npm-package-license@^3.0.4: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -vanilla-calendar-picker@^2.11.7: - version "2.11.7" - resolved "https://registry.yarnpkg.com/vanilla-calendar-picker/-/vanilla-calendar-picker-2.11.7.tgz#466f2147d3fa7e85e524cb1363899c35f58056d6" - integrity sha512-nTHYdZUEeHRh6xUorJ3sJ/i7HWgjJwsuojOBZWXzL4H0C20yWJ+1rOT+d0D6wSYtbTkdU4PZMY82KlquhFb7rw== +vanilla-calendar-picker@^2.11.8: + version "2.11.8" + resolved "https://registry.yarnpkg.com/vanilla-calendar-picker/-/vanilla-calendar-picker-2.11.8.tgz#9645f833bd9f4d886b66676570a049f387ef4b1b" + integrity sha512-MK+9v1bERnjYRhNxE6DxsUg1h1e+yjHuu+R0Sd2K1LNR261gnyShRTBxEOOzJl1O1M9XL8gMga/IJPc6ldUoCg== vary@~1.1.2: version "1.1.2" @@ -9847,7 +9836,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -9865,15 +9854,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"