diff --git a/README.md b/README.md index 3da1eb728..4fe57fcb9 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ For a full compatibility table of Aurelia-Slickgrid with Slickgrid-Universal, yo There are also 2 new Themes, Material & Salesforce that are available as well and if you wish to use SVG then take a look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/aurelia-slickgrid/styling/svg-icons). #### Working Demos -For a complete set of working demos (over 30 examples), we strongly suggest you to clone the [Aurelia-Slickgrid Demos](https://github.com/ghiscoding/aurelia-slickgrid-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 both the [Bootstrap 5 demo](https://ghiscoding.github.io/aurelia-slickgrid) and [Bootstrap 5 demo (single Locale)](https://ghiscoding.github.io/aurelia-slickgrid-demos). +For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Aurelia-Slickgrid Demos](https://github.com/ghiscoding/aurelia-slickgrid-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 both the [Bootstrap 5 demo](https://ghiscoding.github.io/aurelia-slickgrid) and [Bootstrap 5 demo (single Locale)](https://ghiscoding.github.io/aurelia-slickgrid-demos). For a complete working set of demos, you can clone the [Aurelia-Slickgrid Demos](https://github.com/ghiscoding/aurelia-slickgrid-demos) repository (instructions are provided in the demo repo). This repo provides multiple samples (RequireJS, WebPack, CLI, ...) and it is also worth to know that the 2 WebPacks demos are updated frequently since they are the actual live GitHub [Bootstrap 5 demo (single Locale)](https://ghiscoding.github.io/aurelia-slickgrid-demos/#/slickgrid) / [Bootstrap 5 demo](https://ghiscoding.github.io/aurelia-slickgrid). diff --git a/docs/TOC.md b/docs/TOC.md index 5b3018258..e9cb8c6a0 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 Detail](grid-functionalities/row-detail.md) diff --git a/docs/grid-functionalities/infinite-scroll.md b/docs/grid-functionalities/infinite-scroll.md new file mode 100644 index 000000000..88518bd92 --- /dev/null +++ b/docs/grid-functionalities/infinite-scroll.md @@ -0,0 +1,151 @@ +## 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/aurelia-slickgrid/#/slickgrid/example38) / [Demo ViewModel](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example38.ts) + +[OData Backend Service - Demo Page](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example39) / [Demo ViewModel](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example39.ts) + +[GraphQL Backend Service - Demo Page](https://ghiscoding.github.io/aurelia-slickgrid/#/slickgrid/example40) / [Demo ViewModel](https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example40.ts) + +> ![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. + +##### View +```html + + +``` + +```ts +export class Example { + scrollEndCalled = false; + + // 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.aureliaGrid.dataView?.getItemCount() || 0; + const newItems = this.loadData(startIdx, FETCH_SIZE); + this.aureliaGrid.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.aureliaGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered + this.aureliaGrid.dataView?.setItems(newData); + this.aureliaGrid.dataView?.reSort(); + } + } +} +``` + +--- + +## 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. + +##### View +```html + + +``` + +```ts +export class Example { + 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.aureliaGrid.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.aureliaGrid.dataView?.addItems(data.value); + } + } +} +``` diff --git a/package.json b/package.json index f5932edc7..831d13578 100644 --- a/package.json +++ b/package.json @@ -48,9 +48,9 @@ "@jest/types": "^29.6.3", "@lerna-lite/cli": "^3.8.0", "@lerna-lite/publish": "^3.8.0", - "@slickgrid-universal/common": "^5.4.0", + "@slickgrid-universal/common": "^5.5.0", "@types/jest": "^29.5.12", - "@types/node": "^20.14.14", + "@types/node": "^22.1.0", "conventional-changelog-conventionalcommits": "^7.0.2", "cross-env": "^7.0.3", "cypress": "^13.13.2", @@ -72,7 +72,7 @@ "rimraf": "^5.0.10", "rxjs": "^7.8.1", "ts-jest": "^29.2.4", - "typescript": "^5.5.3", + "typescript": "^5.5.4", "typescript-eslint": "^8.0.1" }, "packageManager": "pnpm@8.15.9" diff --git a/packages/aurelia-slickgrid/package.json b/packages/aurelia-slickgrid/package.json index 38d1b2a38..bfd0591da 100644 --- a/packages/aurelia-slickgrid/package.json +++ b/packages/aurelia-slickgrid/package.json @@ -53,13 +53,13 @@ "@aurelia/runtime": "^2.0.0-beta.20", "@aurelia/runtime-html": "^2.0.0-beta.20", "@formkit/tempo": "^0.1.2", - "@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/row-detail-view-plugin": "~5.4.0", - "@slickgrid-universal/utils": "~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", + "@slickgrid-universal/row-detail-view-plugin": "~5.5.0", + "@slickgrid-universal/utils": "~5.5.0", "dequal": "^2.0.3", "sortablejs": "^1.15.2" }, @@ -69,6 +69,6 @@ "dompurify": "^3.1.6", "rimraf": "^5.0.10", "tslib": "^2.6.3", - "typescript": "^5.5.3" + "typescript": "^5.5.4" } } diff --git a/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts b/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts index 45e1e0f16..3684cdb7d 100644 --- a/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts +++ b/packages/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts @@ -1,5 +1,6 @@ +// interfaces/types import type { - // interfaces/types + BackendService, AutocompleterEditor, BackendServiceApi, BackendServiceOption, @@ -100,6 +101,7 @@ export class AureliaSlickgridCustomElement { protected _isLocalGrid = true; protected _paginationOptions: Pagination | undefined; protected _registeredResources: ExternalResource[] = []; + protected _scrollEndCalled = false; protected _columnDefinitionObserver?: ICollectionObserver<'array'>; protected _columnDefinitionsSubscriber: ICollectionSubscriber = { handleCollectionChange: this.columnDefinitionsHandler.bind(this) @@ -230,6 +232,10 @@ export class AureliaSlickgridCustomElement { this.containerService.registerInstance('TreeDataService', this.treeDataService); } + get backendService(): BackendService | undefined { + return this.gridOptions.backendServiceApi?.service; + } + get eventHandler(): SlickEventHandler { return this._eventHandler; } @@ -298,7 +304,10 @@ export class AureliaSlickgridCustomElement { this.backendServiceApi = this.gridOptions?.backendServiceApi; this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set - this.createBackendApiInternalPostProcessCallback(this.gridOptions); + // unless specified, we'll create an internal postProcess callback (currently only available for GraphQL) + if (this.gridOptions.backendServiceApi && !this.gridOptions.backendServiceApi?.disableInternalPostProcess) { + this.createBackendApiInternalPostProcessCallback(this.gridOptions); + } if (!this.customDataView) { const dataviewInlineFilters = this.gridOptions.dataView && this.gridOptions.dataView.inlineFilters || false; @@ -463,7 +472,7 @@ export class AureliaSlickgridCustomElement { dispose: this.disposeInstance.bind(this), // return all available Services (non-singleton) - backendService: this.gridOptions?.backendServiceApi?.service, + backendService: this.backendService, eventPubSubService: this._eventPubSubService, filterService: this.filterService, gridEventService: this.gridEventService, @@ -505,6 +514,9 @@ export class AureliaSlickgridCustomElement { }); this.serviceList = []; + // dispose backend service when defined and a dispose method exists + this.backendService?.dispose?.(); + // dispose all registered external resources this.disposeExternalResources(); @@ -637,8 +649,8 @@ export class AureliaSlickgridCustomElement { /** * Define our internal Post Process callback, it will execute internally after we get back result from the Process backend call - * For now, this is GraphQL Service ONLY feature and it will basically - * refresh the Dataset & Pagination without having the user to create his own PostProcess every time + * Currently ONLY available with the GraphQL Backend Service. + * The behavior is to refresh the Dataset & Pagination without requiring the user to create his own PostProcess every time */ createBackendApiInternalPostProcessCallback(gridOptions: GridOption) { const backendApi = gridOptions?.backendServiceApi; @@ -796,7 +808,7 @@ export class AureliaSlickgridCustomElement { backendApiService.updateSorters(undefined, sortColumns); } // Pagination "presets" - if (backendApiService.updatePagination && gridOptions.presets.pagination) { + if (backendApiService.updatePagination && gridOptions.presets.pagination && !this.hasBackendInfiniteScroll()) { const { pageNumber, pageSize } = gridOptions.presets.pagination; backendApiService.updatePagination(pageNumber, pageSize); } @@ -840,6 +852,56 @@ export class AureliaSlickgridCustomElement { } }); } + + // when user enables Infinite Scroll + if (backendApi.service.options?.infiniteScroll) { + this.addBackendInfiniteScrollCallback(); + } + } + } + + protected addBackendInfiniteScrollCallback(): void { + if (this.grid && this.gridOptions.backendServiceApi && this.hasBackendInfiniteScroll() && !this.gridOptions.backendServiceApi?.onScrollEnd) { + const onScrollEnd = () => { + 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); + } + }; } } @@ -940,7 +1002,7 @@ export class AureliaSlickgridCustomElement { } // display the Pagination component only after calling this refresh data first, we call it here so that if we preset pagination page number it will be shown correctly - this.showPagination = (this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))) ? true : false; + this.showPagination = !!(this.gridOptions && (this.gridOptions.enablePagination || (this.gridOptions.backendServiceApi && this.gridOptions.enablePagination === undefined))); if (this._paginationOptions && this.gridOptions?.pagination && this.gridOptions?.backendServiceApi) { const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this._paginationOptions); @@ -992,10 +1054,14 @@ export class AureliaSlickgridCustomElement { * Check if there's any Pagination Presets defined in the Grid Options, * if there are then load them in the paginationOptions object */ - setPaginationOptionsWhenPresetDefined(gridOptions: GridOption, paginationOptions: Pagination): Pagination { + protected setPaginationOptionsWhenPresetDefined(gridOptions: GridOption, paginationOptions: Pagination): Pagination { if (gridOptions.presets?.pagination && gridOptions.pagination) { - paginationOptions.pageSize = gridOptions.presets.pagination.pageSize; - paginationOptions.pageNumber = gridOptions.presets.pagination.pageNumber; + if (this.hasBackendInfiniteScroll()) { + console.warn('[Aurelia-Slickgrid] `presets.pagination` is not supported with Infinite Scroll, reverting to first page.'); + } else { + paginationOptions.pageSize = gridOptions.presets.pagination.pageSize; + paginationOptions.pageNumber = gridOptions.presets.pagination.pageNumber; + } } return paginationOptions; } @@ -1261,16 +1327,22 @@ export class AureliaSlickgridCustomElement { } } + hasBackendInfiniteScroll(gridOptions?: GridOption): boolean { + return !!(gridOptions || this.gridOptions).backendServiceApi?.service.options?.infiniteScroll; + } + protected mergeGridOptions(gridOptions: GridOption): GridOption { gridOptions.gridId = this.gridId; gridOptions.gridContainerId = `slickGridContainer-${this.gridId}`; - // if we have a backendServiceApi and the enablePagination is undefined, we'll assume that we do want to see it, else get that defined value - gridOptions.enablePagination = ((gridOptions.backendServiceApi && gridOptions.enablePagination === undefined) ? true : gridOptions.enablePagination) || false; - // use extend to deep merge & copy to avoid immutable properties being changed in GlobalGridOptions after a route change const options = extend(true, {}, GlobalGridOptions, gridOptions) as GridOption; + // if we have a backendServiceApi and the enablePagination is undefined, we'll assume that we do want to see it, else get that defined value + if (!this.hasBackendInfiniteScroll(gridOptions)) { + gridOptions.enablePagination = !!((gridOptions.backendServiceApi && gridOptions.enablePagination === undefined) ? true : gridOptions.enablePagination); + } + // using copy extend to do a deep clone has an unwanted side on objects and pageSizes but ES6 spread has other worst side effects // so we will just overwrite the pageSizes when needed, this is the only one causing issues so far. // On a deep extend, Object and Array are extended, but object wrappers on primitive types such as String, Boolean, and Number are not. @@ -1409,9 +1481,7 @@ export class AureliaSlickgridCustomElement { this.slickPagination.renderPagination(this.elm.querySelector('div') as HTMLDivElement); this._isPaginationInitialized = true; } else if (!showPagination) { - if (this.slickPagination) { - this.slickPagination.dispose(); - } + this.slickPagination?.dispose(); this._isPaginationInitialized = false; } } diff --git a/packages/demo/package.json b/packages/demo/package.json index 5dfd7dbc0..fc33de1b0 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -43,15 +43,15 @@ "@fnando/sparkline": "^0.3.10", "@formkit/tempo": "^0.1.2", "@popperjs/core": "^2.11.8", - "@slickgrid-universal/common": "^5.4.0", - "@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/row-detail-view-plugin": "^5.4.0", - "@slickgrid-universal/rxjs-observable": "^5.4.0", - "@slickgrid-universal/text-export": "^5.4.0", + "@slickgrid-universal/common": "^5.5.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/row-detail-view-plugin": "^5.5.0", + "@slickgrid-universal/rxjs-observable": "^5.5.0", + "@slickgrid-universal/text-export": "^5.5.0", "aurelia": "^2.0.0-beta.20", "aurelia-slickgrid": "workspace:*", "bootstrap": "^5.3.3", @@ -66,7 +66,7 @@ "@types/dompurify": "^3.0.5", "@types/fnando__sparkline": "^0.3.7", "@types/jest": "^29.5.12", - "@types/node": "^20.14.14", + "@types/node": "^22.1.0", "@types/sortablejs": "^1.15.8", "aurelia-polyfills": "^1.3.4", "autoprefixer": "^10.4.20", @@ -90,7 +90,7 @@ "ts-loader": "^9.5.1", "ts-node": "^10.9.2", "tslib": "^2.6.3", - "typescript": "^5.5.3", + "typescript": "^5.5.4", "webpack": "^5.93.0", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", diff --git a/packages/demo/src/examples/slickgrid/example38.html b/packages/demo/src/examples/slickgrid/example38.html new file mode 100644 index 000000000..6fb9f79d1 --- /dev/null +++ b/packages/demo/src/examples/slickgrid/example38.html @@ -0,0 +1,103 @@ +
+

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

+ +
+ +
+ +
+
+
+ Backend Error: +
+
+
+ +
+
+
+ Status: ${status.text} + + + +
+
+
+
+ OData Query: ${odataQuery} +
+
+
+ +
+
+ + + + + +
+ Metrics: + + ${metrics.endTime | dateFormat: 'DD MMM, h:mm:ss a'} — + ${metrics.itemCount} + of + ${metrics.totalItemCount} + items + + All Data Loaded!!! +
+
+
+ + + +
diff --git a/packages/demo/src/examples/slickgrid/example38.scss b/packages/demo/src/examples/slickgrid/example38.scss new file mode 100644 index 000000000..b1af851ed --- /dev/null +++ b/packages/demo/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/packages/demo/src/examples/slickgrid/example38.ts b/packages/demo/src/examples/slickgrid/example38.ts new file mode 100644 index 000000000..d891bf39a --- /dev/null +++ b/packages/demo/src/examples/slickgrid/example38.ts @@ -0,0 +1,395 @@ +import { IHttpClient } from '@aurelia/fetch-client'; +import { newInstanceOf, resolve } from '@aurelia/kernel'; +import { GridOdataService, type OdataServiceApi } from '@slickgrid-universal/odata'; +import { + type AureliaGridInstance, + Aggregators, + type Column, + FieldType, + Filters, + type GridOption, + type Grouping, + type Metrics, + type OnRowCountChangedEventArgs, + SortComparers, +} from 'aurelia-slickgrid'; + +import './example38.scss'; + +const sampleDataRoot = 'assets/data'; +const CARET_HTML_ESCAPED = '%5E'; +const PERCENT_HTML_ESCAPED = '%25'; + +export class Example38 { + aureliaGrid: AureliaGridInstance; + backendService: GridOdataService; + columnDefinitions!: Column[]; + gridOptions!: GridOption; + dataset: any[] = []; + isPageErrorTest = false; + metrics!: Partial; + tagDataClass = ''; + odataQuery = ''; + processing = false; + errorStatus = ''; + errorStatusClass = 'hidden'; + status = { text: 'processing...', class: 'alert alert-danger' }; + + constructor(readonly http: IHttpClient = resolve(newInstanceOf(IHttpClient))) { + this.backendService = new GridOdataService(); + this.initializeGrid(); + } + + aureliaGridReady(aureliaGrid: AureliaGridInstance) { + this.aureliaGrid = aureliaGrid; + } + + initializeGrid() { + this.columnDefinitions = [ + { + 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'] || '' + } + ]; + + this.gridOptions = { + 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, + headerMenu: { + hideFreezeColumnsCommand: false, + }, + 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.errorStatus = error.message; + this.errorStatusClass = 'visible notification is-light is-danger is-small is-narrow'; + this.displaySpinner(false, true); + }, + preProcess: () => { + this.errorStatus = ''; + this.errorStatusClass = 'hidden'; + this.displaySpinner(true); + }, + process: (query) => this.getCustomerApiCall(query), + postProcess: (response) => { + this.metrics = response.metrics; + 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, + }; + } + + displaySpinner(isProcessing: boolean, isError?: boolean) { + this.processing = isProcessing; + if (isError) { + this.status = { text: 'ERROR!!!', class: 'alert alert-danger' }; + } else { + this.status = (isProcessing) + ? { text: 'loading', class: 'alert alert-warning' } + : { text: 'finished', class: 'alert alert-success' }; + } + } + + getCustomerCallback(data: { '@odata.count': number; infiniteScrollBottomHit: boolean; metrics: Metrics; query: string; value: any[]; }) { + // totalItems property needs to be filled for pagination to work correctly + // however we need to force a dirty check, doing a clone object will do just that + 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.aureliaGrid.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.aureliaGrid.dataView?.addItems(data.value); + } + + this.odataQuery = data['query']; + + // 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 { + this.errorStatusClass = 'hidden'; + + // the mock is returning a Promise, just like a WebAPI typically does + return new Promise((resolve) => { + const queryParams = query.toLowerCase().split('&'); + let top = 0; + let skip = 0; + let orderBy = ''; + let countTotalItems = 100; + const columnFilters: any = {}; + + if (this.isPageErrorTest) { + this.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[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[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[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[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[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[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[fieldName] = { type: 'ends', term: filterMatch[2].trim() }; + } + + // simular 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"'); + } + + this.http.fetch(`${sampleDataRoot}/customers_100.json`) + .then(e => e.json()) + .then((data: 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[columnId].type; + const searchTerm = columnFilters[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[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).replaceAll(PERCENT_HTML_ESCAPED, '.*'), '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; + + // console.log('Backend Result', backendResult); + resolve(backendResult); + }, 100); + }); + }); + } + + groupByGender() { + this.aureliaGrid?.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.aureliaGrid?.slickGrid.setSortColumns([{ columnId: 'duration', sortAsc: true }]); + this.aureliaGrid?.slickGrid.invalidate(); // invalidate all rows and re-render + } + + clearAllFiltersAndSorts() { + if (this.aureliaGrid?.gridService) { + this.aureliaGrid.gridService.clearAllFiltersAndSorts(); + } + } + + setFiltersDynamically() { + // we can Set Filters Dynamically (or different filters) afterward through the FilterService + this.aureliaGrid?.filterService.updateFilters([ + { columnId: 'gender', searchTerms: ['female'] }, + ]); + } + + refreshMetrics(args: OnRowCountChangedEventArgs) { + if (args?.current >= 0) { + this.metrics.itemCount = this.aureliaGrid.dataView?.getFilteredItemCount() || 0; + this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount + ? 'fully-loaded' + : 'partial-load'; + } + } + + setSortingDynamically() { + this.aureliaGrid?.sortService.updateSorting([ + { columnId: 'name', direction: 'DESC' }, + ]); + } +} diff --git a/packages/demo/src/examples/slickgrid/example39.html b/packages/demo/src/examples/slickgrid/example39.html new file mode 100644 index 000000000..53adde957 --- /dev/null +++ b/packages/demo/src/examples/slickgrid/example39.html @@ -0,0 +1,101 @@ +
+

+ Example 39: GraphQL Backend Service with Infinite Scroll + + + 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: ${status.text} + + + +
+ +
+
+ + + +
+
+
+
+ + Locale: + + ${selectedLanguage + '.json'} + +
+
+
+
+ Metrics: + + ${metrics.endTime | dateFormat: 'DD MMM, h:mm:ss a'} — + ${metrics.itemCount} + of + ${metrics.totalItemCount} + items + + All Data Loaded!!! +
+
+ +
+
+ GraphQL Query: +
+
+
+
+ + + +
diff --git a/packages/demo/src/examples/slickgrid/example39.scss b/packages/demo/src/examples/slickgrid/example39.scss new file mode 100644 index 000000000..0d7fa4e43 --- /dev/null +++ b/packages/demo/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/packages/demo/src/examples/slickgrid/example39.ts b/packages/demo/src/examples/slickgrid/example39.ts new file mode 100644 index 000000000..7a455b181 --- /dev/null +++ b/packages/demo/src/examples/slickgrid/example39.ts @@ -0,0 +1,340 @@ +import { I18N } from '@aurelia/i18n'; +import { IHttpClient } from '@aurelia/fetch-client'; +import { newInstanceOf, resolve } from '@aurelia/kernel'; +import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi, } from '@slickgrid-universal/graphql'; +import { + type AureliaGridInstance, + type Column, + FieldType, + Filters, + type GridOption, + type Metrics, + type MultipleSelectOption, + type OnRowCountChangedEventArgs, +} from 'aurelia-slickgrid'; + +import './example39.scss'; + +const sampleDataRoot = 'assets/data'; + +const GRAPHQL_QUERY_DATASET_NAME = 'users'; +const FAKE_SERVER_DELAY = 250; + +function unescapeAndLowerCase(val: string) { + return val.replace(/^"/, '').replace(/"$/, '').toLowerCase(); +} + +export class Example39 { + private _darkMode = false; + aureliaGrid: AureliaGridInstance; + backendService!: GraphqlService; + columnDefinitions!: Column[]; + gridOptions!: GridOption; + dataset: any[] = []; + metrics!: Partial; + tagDataClass = ''; + graphqlQuery = '...'; + processing = false; + selectedLanguage: string; + status = { text: 'processing...', class: 'alert alert-danger' }; + serverWaitDelay = FAKE_SERVER_DELAY; // server simulation with default of 250ms but 50ms for Cypress tests + + constructor(readonly http: IHttpClient = resolve(newInstanceOf(IHttpClient)), private readonly i18n: I18N = resolve(I18N)) { + this.backendService = new GraphqlService(); + // always start with English for Cypress E2E tests to be consistent + const defaultLang = 'en'; + this.i18n.setLocale(defaultLang); + this.selectedLanguage = defaultLang; + this.initializeGrid(); + } + + aureliaGridReady(aureliaGrid: AureliaGridInstance) { + this.aureliaGrid = aureliaGrid; + } + + initializeGrid() { + this.columnDefinitions = [ + { + 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: this.http.fetch(`${sampleDataRoot}/customers_100.json`).then(e => e.json()), + filterOptions: { + filter: true // adds a filter on top of the multi-select dropdown + } as MultipleSelectOption + } + }, + ]; + + this.gridOptions = { + enableAutoResize: true, + autoResize: { + container: '#demo-container', + rightPadding: 10 + }, + enableAutoTooltip: true, + autoTooltipOptions: { + enableForHeaderCells: true + }, + enableTranslate: true, + i18n: this.i18n, + enableFiltering: true, + enableCellNavigation: true, + multiColumnSort: false, + 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.backendService, + 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) => { + this.metrics = { + endTime: new Date(), + totalItemCount: result.data[GRAPHQL_QUERY_DATASET_NAME].totalCount || 0, + } + this.displaySpinner(false); + this.getCustomerCallback(result); + } + } as GraphqlServiceApi + }; + } + + clearAllFiltersAndSorts() { + if (this.aureliaGrid?.gridService) { + this.aureliaGrid.gridService.clearAllFiltersAndSorts(); + } + } + + displaySpinner(isProcessing: boolean) { + this.processing = isProcessing; + this.status = (isProcessing) + ? { text: 'processing...', class: 'alert alert-danger' } + : { text: 'finished', class: 'alert alert-success' }; + } + + getCustomerCallback(result: any) { + const { nodes, totalCount } = result.data[GRAPHQL_QUERY_DATASET_NAME]; + if (this.aureliaGrid) { + this.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.aureliaGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered + this.dataset = nodes; + this.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.aureliaGrid.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.aureliaGrid?.dataView.getItemCount() === totalItemCount` + // console.log('is data fully loaded: ', this.aureliaGrid?.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 = ''; + + this.http.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.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery(); + resolve(mockedResult); + }, this.serverWaitDelay); + }); + }); + } + + refreshMetrics(args: OnRowCountChangedEventArgs) { + if (args?.current >= 0) { + this.metrics.itemCount = this.aureliaGrid.dataView?.getFilteredItemCount() || 0; + this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount + ? 'fully-loaded' + : 'partial-load'; + } + } + + async switchLanguage() { + const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en'; + await this.i18n.setLocale(nextLanguage); + this.selectedLanguage = nextLanguage; + } + + toggleDarkMode() { + this._darkMode = !this._darkMode; + this.toggleBodyBackground(); + this.aureliaGrid.slickGrid?.setOptions({ darkMode: this._darkMode }); + } + + toggleBodyBackground() { + if (this._darkMode) { + document.querySelector('.panel-wm-content')!.classList.add('dark-mode'); + document.querySelector('#demo-container')!.dataset.bsTheme = 'dark'; + } else { + document.querySelector('.panel-wm-content')!.classList.remove('dark-mode'); + document.querySelector('#demo-container')!.dataset.bsTheme = 'light'; + } + } +} diff --git a/packages/demo/src/my-app.ts b/packages/demo/src/my-app.ts index 2b880049d..636b4e7a6 100644 --- a/packages/demo/src/my-app.ts +++ b/packages/demo/src/my-app.ts @@ -42,6 +42,8 @@ export class MyApp { { path: 'example35', component: () => import('./examples/slickgrid/example35'), title: '35- Row Based Editing' }, { path: 'example36', component: () => import('./examples/slickgrid/example36'), title: '36- Excel Export Formulas' }, { path: 'example37', component: () => import('./examples/slickgrid/example37'), title: '37- Footer Totals Row' }, + { path: 'example38', component: () => import('./examples/slickgrid/example38'), title: '38- Infinite Scroll with OData' }, + { path: 'example39', component: () => import('./examples/slickgrid/example39'), title: '39- Infinite Scroll with GraphQL' }, { path: 'home', component: () => import('./home-page'), title: 'Home' }, ]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 24c73d964..ef283dff0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,19 +31,19 @@ importers: version: 29.6.3 '@lerna-lite/cli': specifier: ^3.8.0 - version: 3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.3) + version: 3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.4) '@lerna-lite/publish': specifier: ^3.8.0 - version: 3.8.0(typescript@5.5.3) + version: 3.8.0(typescript@5.5.4) '@slickgrid-universal/common': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@types/jest': specifier: ^29.5.12 version: 29.5.12 '@types/node': - specifier: ^20.14.14 - version: 20.14.14 + specifier: ^22.1.0 + version: 22.1.0 conventional-changelog-conventionalcommits: specifier: ^7.0.2 version: 7.0.2 @@ -76,10 +76,10 @@ importers: version: 15.9.0 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + version: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-cli: specifier: ^29.7.0 - version: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + version: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 @@ -106,13 +106,13 @@ importers: version: 7.8.1 ts-jest: specifier: ^29.2.4 - version: 29.2.4(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.3) + version: 29.2.4(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.4) typescript: - specifier: ^5.5.3 - version: 5.5.3 + specifier: ^5.5.4 + version: 5.5.4 typescript-eslint: specifier: ^8.0.1 - version: 8.0.1(eslint@9.8.0)(typescript@5.5.3) + version: 8.0.1(eslint@9.8.0)(typescript@5.5.4) packages/aurelia-slickgrid: dependencies: @@ -129,26 +129,26 @@ importers: specifier: ^0.1.2 version: 0.1.2 '@slickgrid-universal/common': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 '@slickgrid-universal/custom-footer-component': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 '@slickgrid-universal/empty-warning-component': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 '@slickgrid-universal/event-pub-sub': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 '@slickgrid-universal/pagination-component': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 '@slickgrid-universal/row-detail-view-plugin': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 '@slickgrid-universal/utils': - specifier: ~5.4.0 - version: 5.4.0 + specifier: ~5.5.0 + version: 5.5.0 aurelia: specifier: ^2.0.0-beta.20 version: 2.0.0-beta.20 @@ -175,8 +175,8 @@ importers: specifier: ^2.6.3 version: 2.6.3 typescript: - specifier: ^5.5.3 - version: 5.5.3 + specifier: ^5.5.4 + version: 5.5.4 packages/demo: dependencies: @@ -214,32 +214,32 @@ importers: specifier: ^2.11.8 version: 2.11.8 '@slickgrid-universal/common': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/composite-editor-component': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/custom-tooltip-plugin': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/excel-export': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/graphql': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/odata': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/row-detail-view-plugin': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/rxjs-observable': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 '@slickgrid-universal/text-export': - specifier: ^5.4.0 - version: 5.4.0 + specifier: ^5.5.0 + version: 5.5.0 aurelia: specifier: ^2.0.0-beta.20 version: 2.0.0-beta.20 @@ -264,7 +264,7 @@ importers: version: 2.0.0-beta.20 '@aurelia/ts-jest': specifier: ^2.0.0-beta.20 - version: 2.0.0-beta.20(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.3) + version: 2.0.0-beta.20(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.4) '@aurelia/webpack-loader': specifier: ^2.0.0-beta.20 version: 2.0.0-beta.20 @@ -278,8 +278,8 @@ importers: specifier: ^29.5.12 version: 29.5.12 '@types/node': - specifier: ^20.14.14 - version: 20.14.14 + specifier: ^22.1.0 + version: 22.1.0 '@types/sortablejs': specifier: ^1.15.8 version: 1.15.8 @@ -324,7 +324,7 @@ importers: version: 8.4.41 postcss-loader: specifier: ^8.1.1 - version: 8.1.1(postcss@8.4.41)(typescript@5.5.3)(webpack@5.93.0) + version: 8.1.1(postcss@8.4.41)(typescript@5.5.4)(webpack@5.93.0) rimraf: specifier: ^5.0.10 version: 5.0.10 @@ -342,16 +342,16 @@ importers: version: 4.0.0(webpack@5.93.0) ts-loader: specifier: ^9.5.1 - version: 9.5.1(typescript@5.5.3)(webpack@5.93.0) + version: 9.5.1(typescript@5.5.4)(webpack@5.93.0) ts-node: specifier: ^10.9.2 - version: 10.9.2(@types/node@20.14.14)(typescript@5.5.3) + version: 10.9.2(@types/node@22.1.0)(typescript@5.5.4) tslib: specifier: ^2.6.3 version: 2.6.3 typescript: - specifier: ^5.5.3 - version: 5.5.3 + specifier: ^5.5.4 + version: 5.5.4 webpack: specifier: ^5.93.0 version: 5.93.0(webpack-cli@5.1.4) @@ -449,7 +449,7 @@ packages: '@aurelia/runtime-html': 2.0.0-beta.20 modify-code: 2.1.3 parse5: 7.1.2 - typescript: 5.5.3 + typescript: 5.5.4 dev: true /@aurelia/route-recognizer@2.0.0-beta.20: @@ -513,7 +513,7 @@ packages: '@aurelia/template-compiler': 2.0.0-beta.20 dev: true - /@aurelia/ts-jest@2.0.0-beta.20(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.3): + /@aurelia/ts-jest@2.0.0-beta.20(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.4): resolution: {integrity: sha512-HGOpwuASfZzGFMlKWKFnGA80l/5nwxndjDDTByoNaGz3F4bgKTNwd5OAjkXQWHk7nKAH3RzukPf4HYsJ2jJZbA==} engines: {node: '>=14.17.0'} dependencies: @@ -522,7 +522,7 @@ packages: '@aurelia/platform': 2.0.0-beta.20 '@aurelia/plugin-conventions': 2.0.0-beta.20 '@aurelia/runtime': 2.0.0-beta.20 - ts-jest: 29.2.4(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.3) + ts-jest: 29.2.4(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.4) transitivePeerDependencies: - '@babel/core' - '@jest/transform' @@ -1109,7 +1109,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 chalk: 4.1.2 jest-message-util: 29.7.0 jest-util: 29.7.0 @@ -1130,14 +1130,14 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.9.0 exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + jest-config: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -1165,7 +1165,7 @@ packages: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 jest-mock: 29.7.0 dev: true @@ -1192,7 +1192,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 20.14.14 + '@types/node': 22.1.0 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -1225,7 +1225,7 @@ packages: '@jest/transform': 29.7.0 '@jest/types': 29.6.3 '@jridgewell/trace-mapping': 0.3.25 - '@types/node': 20.14.14 + '@types/node': 22.1.0 chalk: 4.1.2 collect-v8-coverage: 1.0.2 exit: 0.1.2 @@ -1313,7 +1313,7 @@ packages: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 20.14.14 + '@types/node': 22.1.0 '@types/yargs': 17.0.32 chalk: 4.1.2 dev: true @@ -1366,7 +1366,7 @@ packages: resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==} dev: true - /@lerna-lite/cli@3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.3): + /@lerna-lite/cli@3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.4): resolution: {integrity: sha512-Flv2ITNfS4dTXG8I44P3R2kuY8x6i5rN9uGxkLY0lnNzjlMy0FU0CXchUrGlzfmP+e7bzhDRmvV7dQMeYoZ1mg==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -1391,11 +1391,11 @@ packages: '@lerna-lite/watch': optional: true dependencies: - '@lerna-lite/core': 3.8.0(typescript@5.5.3) - '@lerna-lite/init': 3.8.0(typescript@5.5.3) + '@lerna-lite/core': 3.8.0(typescript@5.5.4) + '@lerna-lite/init': 3.8.0(typescript@5.5.4) '@lerna-lite/npmlog': 3.8.0 - '@lerna-lite/publish': 3.8.0(typescript@5.5.3) - '@lerna-lite/version': 3.8.0(@lerna-lite/publish@3.8.0)(typescript@5.5.3) + '@lerna-lite/publish': 3.8.0(typescript@5.5.4) + '@lerna-lite/version': 3.8.0(@lerna-lite/publish@3.8.0)(typescript@5.5.4) dedent: 1.5.3 dotenv: 16.4.5 import-local: 3.2.0 @@ -1408,7 +1408,7 @@ packages: - typescript dev: true - /@lerna-lite/core@3.8.0(typescript@5.5.3): + /@lerna-lite/core@3.8.0(typescript@5.5.4): resolution: {integrity: sha512-0ObizEznKsABbEFGKnt6wyfB1+IGFShMF4nmUfLsYHFw9OXZ0J3HZPPScS/kLBCzti3QfP79OWh+X0FrxacAGA==} engines: {node: ^18.0.0 || >=20.0.0} dependencies: @@ -1420,7 +1420,7 @@ packages: chalk: 5.3.0 clone-deep: 4.0.1 config-chain: 1.1.13 - cosmiconfig: 9.0.0(typescript@5.5.3) + cosmiconfig: 9.0.0(typescript@5.5.4) dedent: 1.5.3 execa: 8.0.1 fs-extra: 11.2.0 @@ -1447,11 +1447,11 @@ packages: - typescript dev: true - /@lerna-lite/init@3.8.0(typescript@5.5.3): + /@lerna-lite/init@3.8.0(typescript@5.5.4): resolution: {integrity: sha512-TPOitzDHXlrzfKLo4ZdvMdCHsupb4DsqgniVioq+09mduGW1lIh+BYp9C2TyXEWBqnaMQkf4uIZ3oFwye/rDiA==} engines: {node: ^18.0.0 || >=20.0.0} dependencies: - '@lerna-lite/core': 3.8.0(typescript@5.5.3) + '@lerna-lite/core': 3.8.0(typescript@5.5.4) fs-extra: 11.2.0 p-map: 7.0.2 write-json-file: 6.0.0 @@ -1477,14 +1477,14 @@ packages: wide-align: 1.1.5 dev: true - /@lerna-lite/publish@3.8.0(typescript@5.5.3): + /@lerna-lite/publish@3.8.0(typescript@5.5.4): resolution: {integrity: sha512-JyC65BfVa0dtGBJeCcIIDLCJT8nWP1vh/FEeXmSmAjrYLuja2FWoFuemVW301bk3JZiejMD+nW8nauXUJbal6w==} engines: {node: ^18.0.0 || >=20.0.0} dependencies: - '@lerna-lite/cli': 3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.3) - '@lerna-lite/core': 3.8.0(typescript@5.5.3) + '@lerna-lite/cli': 3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.4) + '@lerna-lite/core': 3.8.0(typescript@5.5.4) '@lerna-lite/npmlog': 3.8.0 - '@lerna-lite/version': 3.8.0(@lerna-lite/publish@3.8.0)(typescript@5.5.3) + '@lerna-lite/version': 3.8.0(@lerna-lite/publish@3.8.0)(typescript@5.5.4) '@npmcli/arborist': 7.5.4 '@npmcli/package-json': 5.2.0 byte-size: 9.0.0 @@ -1517,12 +1517,12 @@ packages: - typescript dev: true - /@lerna-lite/version@3.8.0(@lerna-lite/publish@3.8.0)(typescript@5.5.3): + /@lerna-lite/version@3.8.0(@lerna-lite/publish@3.8.0)(typescript@5.5.4): resolution: {integrity: sha512-G395hZQQdzUHeIeGrYet8FuvZofahmukbhrKadlMal1Xz25kpzYG0yNPSXu2VKKjwip2KZixfmIDB35vRyFcHQ==} engines: {node: ^18.0.0 || >=20.0.0} dependencies: - '@lerna-lite/cli': 3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.3) - '@lerna-lite/core': 3.8.0(typescript@5.5.3) + '@lerna-lite/cli': 3.8.0(@lerna-lite/publish@3.8.0)(@lerna-lite/version@3.8.0)(typescript@5.5.4) + '@lerna-lite/core': 3.8.0(typescript@5.5.4) '@lerna-lite/npmlog': 3.8.0 '@octokit/plugin-enterprise-rest': 6.0.1 '@octokit/rest': 21.0.1 @@ -1953,17 +1953,17 @@ packages: '@sinonjs/commons': 3.0.1 dev: true - /@slickgrid-universal/binding@5.4.0: - resolution: {integrity: sha512-4u2n/B8tmeUaaoC5+mB3W6QGaUHiDZUWklnb8r3tvwo86GV60LA+GNgGxl9ireCsqY1F4b0MtZ63ut7dYmyHnA==} + /@slickgrid-universal/binding@5.5.0: + resolution: {integrity: sha512-AQwwoZIOX1ei//dBLLAmNRID9F32OHIi4eXM80IMPdIu3YQuJYXz0lgbCK6F7lSrXzIMjPdMuFDYZG5Ov7LnIQ==} - /@slickgrid-universal/common@5.4.0: - resolution: {integrity: sha512-8wQB8wjAk25BD4I+cYgJ8XO/VRCgOHq0gZcb0zbzLS/qmEe6LwLK+gmSm7mW30COy47GoQ/fXU+19cZJ0WRSrA==} + /@slickgrid-universal/common@5.5.0: + resolution: {integrity: sha512-gERhBeRqe5uVtlJETiiz6+ENN3zwuFV1UnZp5cd1knwbmhM2tpNaED0gO1lyxSVSxvnEClUgsQCL6gs3syxegg==} engines: {node: ^18.0.0 || >=20.0.0} 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 @@ -1971,95 +1971,95 @@ packages: 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: - resolution: {integrity: sha512-qAmAn0XTZNtQVS4kfm5jF/z51kbZ9VAFYmLFX6rCNC149IA1pio+NscLck/dNTcZHNA0V+m11TlzWtzF/6qDLg==} + /@slickgrid-universal/composite-editor-component@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/custom-footer-component@5.4.0: - resolution: {integrity: sha512-OMumhx6O8vI2/G/Vb21LuwBhJ+fFF0deTNFCbOVyRZuhr2xZSzIfOwDQ8fQqNU/jQUvoKPrA64v/hGwdiHW/Vw==} + /@slickgrid-universal/custom-footer-component@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/custom-tooltip-plugin@5.4.0: - resolution: {integrity: sha512-d0AROMINi6SipHiBvnt0kkvlmHgOQynIizsajrLaFfayNscdfYw6phKXoausDukFOVpnaZUv/bLupwt3+DuEoA==} + /@slickgrid-universal/custom-tooltip-plugin@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/empty-warning-component@5.4.0: - resolution: {integrity: sha512-6zIMREbiR9b8DWGXMcGdishSCBUXA1L9kd1YenW39t8DdgRA7iStuXgnUqFbWEzORcKQNtIDiKU7l8ylLM5j2w==} + /@slickgrid-universal/empty-warning-component@5.5.0: + resolution: {integrity: sha512-iYRORauRzBdDd0pNgoapqNAWhOzrQ0xzuDheVQ2trfNTMZbT+UWBUHERCqOceidK9TTg5U1ukOG452eg4Jcnwg==} dependencies: - '@slickgrid-universal/common': 5.4.0 + '@slickgrid-universal/common': 5.5.0 dev: false - /@slickgrid-universal/event-pub-sub@5.4.0: - resolution: {integrity: sha512-OwFeZbOi/SP4kcXlLoOlodehyTSfRIc8y5IkgtAhRYyJgYIVt+Xrepn8CBvKrofHc3zDzV1tvqVdnBnZUJRDdA==} + /@slickgrid-universal/event-pub-sub@5.5.0: + resolution: {integrity: sha512-5nhXnS2oJZTUQAOt8WX6YQz0mhdSbY1CDAMrIc32QoDEFRQRuxBOEw3tqAwWq8CLTE7eXSyhldVbBiTgumXSzA==} dependencies: - '@slickgrid-universal/utils': 5.4.0 + '@slickgrid-universal/utils': 5.5.0 - /@slickgrid-universal/excel-export@5.4.0: - resolution: {integrity: sha512-tcD27eG5fqN6OYAXRfe/4EOwDmO+KU9pdsFSEoelea0f61bT6z6o5dcrFxFLB1sAcR13ysF14Cgy/6Zws2sNcQ==} + /@slickgrid-universal/excel-export@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/graphql@5.4.0: - resolution: {integrity: sha512-D3p8Ack0oTQNRckkJ3O0S3qp31LiZ+cXYhjCmsUGiIZjp8Mr8QW6s9+tt2CIdHVzpLbc2F2AjCaRhintBCMdTw==} + /@slickgrid-universal/graphql@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/odata@5.4.0: - resolution: {integrity: sha512-pYenT4bUPeAWu19NNvcORfnQJ0K7U1YIV8+oQ4VxBLP8PKdrGFK6ZPUAbZQDywWqRkCovoM425qM6icX2VFyWQ==} + /@slickgrid-universal/odata@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/pagination-component@5.4.0: - resolution: {integrity: sha512-y/4Mol01MqQEmT4tpRlBpMCNIYBm1q2Vm9MhPC7RcYL5Pyt9IAP8Rki2MDKo5CQrfzh28W0+jXYgUsBLU2yVGA==} + /@slickgrid-universal/pagination-component@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/row-detail-view-plugin@5.4.0: - resolution: {integrity: sha512-VyT23J2zQeDcxu+6c0OBuzJoDKS06YLSGCSGnqFQNy0PgUdroJ6xqCowZcy4vrXEr88uFo0mqHTxa70Bz1w5AA==} + /@slickgrid-universal/row-detail-view-plugin@5.5.0: + resolution: {integrity: sha512-D+AIkj0XpH4ZHc++O4zKqVTpAAXX+n9/4RxkpoIDkVBGuWubu9unb6TTnNqkMyOAxnn08RSYj6IIDQKtUsipbg==} 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 dev: false - /@slickgrid-universal/rxjs-observable@5.4.0: - resolution: {integrity: sha512-jFI0ijW1By3V93CNXO95RbFb3aFNGbMhqoxg8YNx7GjWRLPxmFrRKx5CAFsUENmRDkQPp/TBsHu/gLL0Fk298w==} + /@slickgrid-universal/rxjs-observable@5.5.0: + resolution: {integrity: sha512-sBN1AecVDI2h6yJ5jrjG2JIV/kKB2TRKP+8MiHCWGeLeErlvqP/rQH7jLH6my2zbz3J5rSnkuItiiLEon96D5w==} dependencies: - '@slickgrid-universal/common': 5.4.0 + '@slickgrid-universal/common': 5.5.0 rxjs: 7.8.1 dev: false - /@slickgrid-universal/text-export@5.4.0: - resolution: {integrity: sha512-qHN+5z3jkOh6nsXw2cPpyUZ67GQdH/1wGnZKkQznfrsuFJBV1ND/nGpMZHzAvNiK2yUMqDAMKA5F/jvxSYZuDw==} + /@slickgrid-universal/text-export@5.5.0: + resolution: {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 dev: false - /@slickgrid-universal/utils@5.4.0: - resolution: {integrity: sha512-1+FNvArDSzG+CyU1gulvqIEYg5z8fQBdvhQPrPq5lJVuQTJBrmefspRANDtWa6WOY2rdOmff50nGdG5P3WondA==} + /@slickgrid-universal/utils@5.5.0: + resolution: {integrity: sha512-wExXsBsSV+VKQR7y+37hbaHXCzvR3Gpwz86BipL+Mj2dTSXLp5Ucobt8taZHAVEj4+VD2V1Uwm1GLEFOPmgJ7Q==} /@tootallnate/once@2.0.0: resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==} @@ -2128,26 +2128,26 @@ packages: resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} dependencies: '@types/connect': 3.4.38 - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/bonjour@3.5.13: resolution: {integrity: sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/connect-history-api-fallback@1.5.4: resolution: {integrity: sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==} dependencies: '@types/express-serve-static-core': 4.17.43 - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/connect@3.4.38: resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/dompurify@3.0.5: @@ -2177,7 +2177,7 @@ packages: /@types/express-serve-static-core@4.17.43: resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 '@types/qs': 6.9.14 '@types/range-parser': 1.2.7 '@types/send': 0.17.4 @@ -2200,13 +2200,13 @@ packages: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: '@types/minimatch': 5.1.2 - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/graceful-fs@4.1.9: resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/html-minifier-terser@6.1.0: @@ -2220,7 +2220,7 @@ packages: /@types/http-proxy@1.17.14: resolution: {integrity: sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/istanbul-lib-coverage@2.0.6: @@ -2249,7 +2249,7 @@ packages: /@types/jsdom@20.0.1: resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 '@types/tough-cookie': 4.0.5 parse5: 7.1.2 dev: true @@ -2277,19 +2277,13 @@ packages: /@types/mute-stream@0.0.4: resolution: {integrity: sha512-CPM9nzrCPPJHQNA9keH9CVkVI+WR5kMa+7XEs5jcGQ0VoAGnLv242w8lIVgwAEfmE4oufJRaTc9PNLQl0ioAow==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/node-forge@1.3.11: resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==} dependencies: - '@types/node': 20.14.14 - dev: true - - /@types/node@20.14.14: - resolution: {integrity: sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ==} - dependencies: - undici-types: 5.26.5 + '@types/node': 22.1.0 dev: true /@types/node@22.1.0: @@ -2318,7 +2312,7 @@ packages: resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==} dependencies: '@types/mime': 1.3.5 - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/serve-index@1.9.4: @@ -2332,7 +2326,7 @@ packages: dependencies: '@types/http-errors': 2.0.4 '@types/mime': 3.0.4 - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/sinonjs__fake-timers@8.1.1: @@ -2346,7 +2340,7 @@ packages: /@types/sockjs@0.3.36: resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/sortablejs@1.15.8: @@ -2370,7 +2364,7 @@ packages: /@types/ws@8.5.10: resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true /@types/yargs-parser@21.0.3: @@ -2387,11 +2381,11 @@ packages: resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==} requiresBuild: true dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 dev: true optional: true - /@typescript-eslint/eslint-plugin@8.0.1(@typescript-eslint/parser@8.0.1)(eslint@9.8.0)(typescript@5.5.3): + /@typescript-eslint/eslint-plugin@8.0.1(@typescript-eslint/parser@8.0.1)(eslint@9.8.0)(typescript@5.5.4): resolution: {integrity: sha512-5g3Y7GDFsJAnY4Yhvk8sZtFfV6YNF2caLzjrRPUBzewjPCaj0yokePB4LJSobyCzGMzjZZYFbwuzbfDHlimXbQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: @@ -2403,22 +2397,22 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.11.0 - '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.3) + '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.4) '@typescript-eslint/scope-manager': 8.0.1 - '@typescript-eslint/type-utils': 8.0.1(eslint@9.8.0)(typescript@5.5.3) - '@typescript-eslint/utils': 8.0.1(eslint@9.8.0)(typescript@5.5.3) + '@typescript-eslint/type-utils': 8.0.1(eslint@9.8.0)(typescript@5.5.4) + '@typescript-eslint/utils': 8.0.1(eslint@9.8.0)(typescript@5.5.4) '@typescript-eslint/visitor-keys': 8.0.1 eslint: 9.8.0 graphemer: 1.4.0 ignore: 5.3.1 natural-compare: 1.4.0 - ts-api-utils: 1.3.0(typescript@5.5.3) - typescript: 5.5.3 + ts-api-utils: 1.3.0(typescript@5.5.4) + typescript: 5.5.4 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@8.0.1(eslint@9.8.0)(typescript@5.5.3): + /@typescript-eslint/parser@8.0.1(eslint@9.8.0)(typescript@5.5.4): resolution: {integrity: sha512-5IgYJ9EO/12pOUwiBKFkpU7rS3IU21mtXzB81TNwq2xEybcmAZrE9qwDtsb5uQd9aVO9o0fdabFyAmKveXyujg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: @@ -2430,11 +2424,11 @@ packages: dependencies: '@typescript-eslint/scope-manager': 8.0.1 '@typescript-eslint/types': 8.0.1 - '@typescript-eslint/typescript-estree': 8.0.1(typescript@5.5.3) + '@typescript-eslint/typescript-estree': 8.0.1(typescript@5.5.4) '@typescript-eslint/visitor-keys': 8.0.1 debug: 4.3.4(supports-color@8.1.1) eslint: 9.8.0 - typescript: 5.5.3 + typescript: 5.5.4 transitivePeerDependencies: - supports-color dev: true @@ -2447,7 +2441,7 @@ packages: '@typescript-eslint/visitor-keys': 8.0.1 dev: true - /@typescript-eslint/type-utils@8.0.1(eslint@9.8.0)(typescript@5.5.3): + /@typescript-eslint/type-utils@8.0.1(eslint@9.8.0)(typescript@5.5.4): resolution: {integrity: sha512-+/UT25MWvXeDX9YaHv1IS6KI1fiuTto43WprE7pgSMswHbn1Jm9GEM4Txp+X74ifOWV8emu2AWcbLhpJAvD5Ng==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: @@ -2456,11 +2450,11 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 8.0.1(typescript@5.5.3) - '@typescript-eslint/utils': 8.0.1(eslint@9.8.0)(typescript@5.5.3) + '@typescript-eslint/typescript-estree': 8.0.1(typescript@5.5.4) + '@typescript-eslint/utils': 8.0.1(eslint@9.8.0)(typescript@5.5.4) debug: 4.3.4(supports-color@8.1.1) - ts-api-utils: 1.3.0(typescript@5.5.3) - typescript: 5.5.3 + ts-api-utils: 1.3.0(typescript@5.5.4) + typescript: 5.5.4 transitivePeerDependencies: - eslint - supports-color @@ -2471,7 +2465,7 @@ packages: engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} dev: true - /@typescript-eslint/typescript-estree@8.0.1(typescript@5.5.3): + /@typescript-eslint/typescript-estree@8.0.1(typescript@5.5.4): resolution: {integrity: sha512-8V9hriRvZQXPWU3bbiUV4Epo7EvgM6RTs+sUmxp5G//dBGy402S7Fx0W0QkB2fb4obCF8SInoUzvTYtc3bkb5w==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: @@ -2487,13 +2481,13 @@ packages: is-glob: 4.0.3 minimatch: 9.0.5 semver: 7.6.2 - ts-api-utils: 1.3.0(typescript@5.5.3) - typescript: 5.5.3 + ts-api-utils: 1.3.0(typescript@5.5.4) + typescript: 5.5.4 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@8.0.1(eslint@9.8.0)(typescript@5.5.3): + /@typescript-eslint/utils@8.0.1(eslint@9.8.0)(typescript@5.5.4): resolution: {integrity: sha512-CBFR0G0sCt0+fzfnKaciu9IBsKvEKYwN9UZ+eeogK1fYHg4Qxk1yf/wLQkLXlq8wbU2dFlgAesxt8Gi76E8RTA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: @@ -2502,7 +2496,7 @@ packages: '@eslint-community/eslint-utils': 4.4.0(eslint@9.8.0) '@typescript-eslint/scope-manager': 8.0.1 '@typescript-eslint/types': 8.0.1 - '@typescript-eslint/typescript-estree': 8.0.1(typescript@5.5.3) + '@typescript-eslint/typescript-estree': 8.0.1(typescript@5.5.4) eslint: 9.8.0 transitivePeerDependencies: - supports-color @@ -3844,7 +3838,7 @@ packages: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} dev: true - /cosmiconfig@9.0.0(typescript@5.5.3): + /cosmiconfig@9.0.0(typescript@5.5.4): resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==} engines: {node: '>=14'} peerDependencies: @@ -3857,10 +3851,10 @@ packages: import-fresh: 3.3.0 js-yaml: 4.1.0 parse-json: 5.2.0 - typescript: 5.5.3 + typescript: 5.5.4 dev: true - /create-jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2): + /create-jest@29.7.0(@types/node@22.1.0)(ts-node@10.9.2): resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -3869,7 +3863,7 @@ packages: chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + jest-config: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -4657,7 +4651,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.3) + '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.4) debug: 3.2.7(supports-color@8.1.1) eslint: 9.8.0 eslint-import-resolver-node: 0.3.9 @@ -4696,7 +4690,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.3) + '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.4) array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 array.prototype.flat: 1.3.2 @@ -6419,7 +6413,7 @@ packages: '@jest/expect': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 chalk: 4.1.2 co: 4.6.0 dedent: 1.5.3 @@ -6440,7 +6434,7 @@ packages: - supports-color dev: true - /jest-cli@29.7.0(@types/node@20.14.14)(ts-node@10.9.2): + /jest-cli@29.7.0(@types/node@22.1.0)(ts-node@10.9.2): resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -6454,10 +6448,10 @@ packages: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + create-jest: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + jest-config: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -6468,7 +6462,7 @@ packages: - ts-node dev: true - /jest-config@29.7.0(@types/node@20.14.14)(ts-node@10.9.2): + /jest-config@29.7.0(@types/node@22.1.0)(ts-node@10.9.2): resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: @@ -6483,7 +6477,7 @@ packages: '@babel/core': 7.24.3 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 babel-jest: 29.7.0(@babel/core@7.24.3) chalk: 4.1.2 ci-info: 3.9.0 @@ -6503,7 +6497,7 @@ packages: pretty-format: 29.7.0 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.2(@types/node@20.14.14)(typescript@5.5.3) + ts-node: 10.9.2(@types/node@22.1.0)(typescript@5.5.4) transitivePeerDependencies: - babel-plugin-macros - supports-color @@ -6550,7 +6544,7 @@ packages: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 '@types/jsdom': 20.0.1 - '@types/node': 20.14.14 + '@types/node': 22.1.0 jest-mock: 29.7.0 jest-util: 29.7.0 jsdom: 20.0.3 @@ -6567,7 +6561,7 @@ packages: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 jest-mock: 29.7.0 jest-util: 29.7.0 dev: true @@ -6581,7 +6575,7 @@ packages: jest: optional: true dependencies: - jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + jest: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-diff: 29.7.0 jest-get-type: 29.6.3 dev: true @@ -6597,7 +6591,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@types/graceful-fs': 4.1.9 - '@types/node': 20.14.14 + '@types/node': 22.1.0 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -6648,7 +6642,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 jest-util: 29.7.0 dev: true @@ -6703,7 +6697,7 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.11 @@ -6734,7 +6728,7 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 chalk: 4.1.2 cjs-module-lexer: 1.2.3 collect-v8-coverage: 1.0.2 @@ -6790,7 +6784,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 chalk: 4.1.2 ci-info: 3.9.0 graceful-fs: 4.2.11 @@ -6815,7 +6809,7 @@ packages: dependencies: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.14.14 + '@types/node': 22.1.0 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -6827,7 +6821,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true @@ -6836,13 +6830,13 @@ packages: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 20.14.14 + '@types/node': 22.1.0 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true - /jest@29.7.0(@types/node@20.14.14)(ts-node@10.9.2): + /jest@29.7.0(@types/node@22.1.0)(ts-node@10.9.2): resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -6855,7 +6849,7 @@ packages: '@jest/core': 29.7.0(ts-node@10.9.2) '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + jest-cli: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -8220,7 +8214,7 @@ packages: engines: {node: '>= 0.4'} dev: true - /postcss-loader@8.1.1(postcss@8.4.41)(typescript@5.5.3)(webpack@5.93.0): + /postcss-loader@8.1.1(postcss@8.4.41)(typescript@5.5.4)(webpack@5.93.0): resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==} engines: {node: '>= 18.12.0'} peerDependencies: @@ -8233,7 +8227,7 @@ packages: webpack: optional: true dependencies: - cosmiconfig: 9.0.0(typescript@5.5.3) + cosmiconfig: 9.0.0(typescript@5.5.4) jiti: 1.21.0 postcss: 8.4.41 semver: 7.6.0 @@ -9531,16 +9525,16 @@ packages: engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dev: true - /ts-api-utils@1.3.0(typescript@5.5.3): + /ts-api-utils@1.3.0(typescript@5.5.4): resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} engines: {node: '>=16'} peerDependencies: typescript: '>=4.2.0' dependencies: - typescript: 5.5.3 + typescript: 5.5.4 dev: true - /ts-jest@29.2.4(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.3): + /ts-jest@29.2.4(@babel/core@7.24.3)(@jest/types@29.6.3)(jest@29.7.0)(typescript@5.5.4): resolution: {integrity: sha512-3d6tgDyhCI29HlpwIq87sNuI+3Q6GLTTCeYRHCs7vDz+/3GCMwEtV9jezLyl4ZtnBgx00I7hm8PCP8cTksMGrw==} engines: {node: ^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0} hasBin: true @@ -9569,17 +9563,17 @@ packages: bs-logger: 0.2.6 ejs: 3.1.10 fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@20.14.14)(ts-node@10.9.2) + jest: 29.7.0(@types/node@22.1.0)(ts-node@10.9.2) jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6 semver: 7.6.2 - typescript: 5.5.3 + typescript: 5.5.4 yargs-parser: 21.1.1 dev: true - /ts-loader@9.5.1(typescript@5.5.3)(webpack@5.93.0): + /ts-loader@9.5.1(typescript@5.5.4)(webpack@5.93.0): resolution: {integrity: sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==} engines: {node: '>=12.0.0'} peerDependencies: @@ -9591,11 +9585,11 @@ packages: micromatch: 4.0.5 semver: 7.6.0 source-map: 0.7.4 - typescript: 5.5.3 + typescript: 5.5.4 webpack: 5.93.0(webpack-cli@5.1.4) dev: true - /ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.3): + /ts-node@10.9.2(@types/node@22.1.0)(typescript@5.5.4): resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==} hasBin: true peerDependencies: @@ -9614,14 +9608,14 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 20.14.14 + '@types/node': 22.1.0 acorn: 8.11.3 acorn-walk: 8.3.2 arg: 4.1.3 create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 5.5.3 + typescript: 5.5.4 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 dev: true @@ -9753,7 +9747,7 @@ packages: possible-typed-array-names: 1.0.0 dev: true - /typescript-eslint@8.0.1(eslint@9.8.0)(typescript@5.5.3): + /typescript-eslint@8.0.1(eslint@9.8.0)(typescript@5.5.4): resolution: {integrity: sha512-V3Y+MdfhawxEjE16dWpb7/IOgeXnLwAEEkS7v8oDqNcR1oYlqWhGH/iHqHdKVdpWme1VPZ0SoywXAkCqawj2eQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: @@ -9762,17 +9756,17 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/eslint-plugin': 8.0.1(@typescript-eslint/parser@8.0.1)(eslint@9.8.0)(typescript@5.5.3) - '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.3) - '@typescript-eslint/utils': 8.0.1(eslint@9.8.0)(typescript@5.5.3) - typescript: 5.5.3 + '@typescript-eslint/eslint-plugin': 8.0.1(@typescript-eslint/parser@8.0.1)(eslint@9.8.0)(typescript@5.5.4) + '@typescript-eslint/parser': 8.0.1(eslint@9.8.0)(typescript@5.5.4) + '@typescript-eslint/utils': 8.0.1(eslint@9.8.0)(typescript@5.5.4) + typescript: 5.5.4 transitivePeerDependencies: - eslint - supports-color dev: true - /typescript@5.5.3: - resolution: {integrity: sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==} + /typescript@5.5.4: + resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==} engines: {node: '>=14.17'} hasBin: true dev: true @@ -9797,10 +9791,6 @@ packages: which-boxed-primitive: 1.0.2 dev: true - /undici-types@5.26.5: - resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} - dev: true - /undici-types@6.13.0: resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==} dev: true @@ -9933,8 +9923,8 @@ packages: builtins: 5.0.1 dev: true - /vanilla-calendar-picker@2.11.7: - resolution: {integrity: sha512-nTHYdZUEeHRh6xUorJ3sJ/i7HWgjJwsuojOBZWXzL4H0C20yWJ+1rOT+d0D6wSYtbTkdU4PZMY82KlquhFb7rw==} + /vanilla-calendar-picker@2.11.8: + resolution: {integrity: sha512-MK+9v1bERnjYRhNxE6DxsUg1h1e+yjHuu+R0Sd2K1LNR261gnyShRTBxEOOzJl1O1M9XL8gMga/IJPc6ldUoCg==} /vary@1.1.2: resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} diff --git a/test/cypress/e2e/example38.cy.ts b/test/cypress/e2e/example38.cy.ts new file mode 100644 index 000000000..ca789fb19 --- /dev/null +++ b/test/cypress/e2e/example38.cy.ts @@ -0,0 +1,206 @@ +describe('Example 38 - Infinite Scroll with OData', () => { + 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 000000000..1cd6f3e24 --- /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 } } }`)); + }); + }); +});