From 88979dac068a43b9d01a0818eb7a1614683480a1 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 11 Mar 2025 01:26:53 -0400 Subject: [PATCH 1/3] fix: Row Detail should also work with fixed grid height or no autoHeight --- .../slickgrid/Example45-detail-view.tsx | 2 +- src/examples/slickgrid/Example45.tsx | 3 +- .../slickgrid/example45-detail-view.scss | 11 +- .../extensions/slickRowDetailView.ts | 110 ++++++++++-------- test/cypress/e2e/example45.cy.ts | 84 ++++++------- 5 files changed, 101 insertions(+), 109 deletions(-) diff --git a/src/examples/slickgrid/Example45-detail-view.tsx b/src/examples/slickgrid/Example45-detail-view.tsx index 537b081..c69f1e6 100644 --- a/src/examples/slickgrid/Example45-detail-view.tsx +++ b/src/examples/slickgrid/Example45-detail-view.tsx @@ -122,7 +122,7 @@ export class Example45DetailView extends React.Component

{this.props.model.companyName} - Order Details (id: {this.props.model.id})

-
+
{!this.state.showGrid ? '' : { return { autoResize: { container: '#demo-container', - rightPadding: 10 + autoHeight: false, // works with/without autoHeight + rightPadding: 10, }, enableFiltering: true, enableRowDetailView: true, diff --git a/src/examples/slickgrid/example45-detail-view.scss b/src/examples/slickgrid/example45-detail-view.scss index 0a9ee5b..e37c02c 100644 --- a/src/examples/slickgrid/example45-detail-view.scss +++ b/src/examples/slickgrid/example45-detail-view.scss @@ -1,10 +1,3 @@ -.detail-label { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 4px; -} - -label { - font-weight: 600; +.innergrid { + --slick-header-menu-display: inline-block; } diff --git a/src/slickgrid-react/extensions/slickRowDetailView.ts b/src/slickgrid-react/extensions/slickRowDetailView.ts index 19e1a87..4cf7027 100644 --- a/src/slickgrid-react/extensions/slickRowDetailView.ts +++ b/src/slickgrid-react/extensions/slickRowDetailView.ts @@ -1,5 +1,6 @@ import { addToArrayWhenNotExists, + createDomElement, type EventSubscription, type OnBeforeRowDetailToggleArgs, type OnRowBackToViewportRangeArgs, @@ -70,7 +71,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { do { const view = this._views.pop(); if (view) { - this.disposeView(view); + this.disposeViewByItem(view); } } while (this._views.length > 0); } @@ -106,11 +107,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods) if (!this.gridOptions.rowDetailView.preTemplate) { this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent; - this.addonOptions.preTemplate = () => this._grid.sanitizeHtmlString(`
`) as string; + this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` }); } if (!this.gridOptions.rowDetailView.postTemplate) { this._component = this.gridOptions?.rowDetailView?.viewComponent; - this.addonOptions.postTemplate = (itemDetail: any) => this._grid.sanitizeHtmlString(`
`) as string; + this.addonOptions.postTemplate = (itemDetail: any) => + createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` }); } if (this._grid && this.gridOptions) { @@ -137,7 +139,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { this._preloadRoot?.unmount(); // triggers after backend called "onAsyncResponse.notify()" - await this.renderViewModel(args?.item); + this.renderViewModel(args?.item); if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') { this.rowDetailViewOptions.onAsyncEndUpdate(event, args); @@ -147,7 +149,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => { // display preload template & re-render all the other Detail Views after toggling // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event - await this.renderPreloadView(args.item); + this.renderPreloadView(args.item); if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') { this.rowDetailViewOptions.onAfterRowDetailToggle(event, args); @@ -166,7 +168,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => { // when row is back to viewport range, we will re-render the View Component(s) - await this.handleOnRowBackToViewportRange(event, args); + this.handleOnRowBackToViewportRange(event, args); if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') { this.rowDetailViewOptions.onRowBackToViewportRange(event, args); @@ -177,7 +179,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') { this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args); } - this.disposeView(args.item); + this.disposeViewByItem(args.item); }); this._eventHandler.subscribe(this.onRowOutOfViewportRange, (event, args) => { @@ -190,11 +192,11 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // hook some events needed by the Plugin itself // we need to redraw the open detail views if we change column position (column reorder) - this.eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this, false)); + this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents(false)); // on row selection changed, we also need to redraw if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) { - this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this, false)); + this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents(false)); } // on column sort/reorder, all row detail are collapsed so we can dispose of all the Views as well @@ -202,8 +204,15 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // on filter changed, we need to re-render all Views this._subscriptions.push( - this.eventPubSubService?.subscribe(['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'], this.redrawAllViewComponents.bind(this, false)), - this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => window.setTimeout(() => this.redrawAllViewComponents())), + this.eventPubSubService?.subscribe([ + 'onFilterChanged', + 'onGridMenuColumnsChanged', + 'onColumnPickerColumnsChanged', + 'onGridMenuClearAllFilters', + 'onGridMenuClearAllSorting' + ], + () => this.redrawAllViewComponents(true) + ), ); } } @@ -214,38 +223,36 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { /** Redraw (re-render) all the expanded row detail View Components */ async redrawAllViewComponents(forceRedraw = false) { - this.resetRenderedRows(); - const promises: Promise[] = []; - this._views.forEach((view) => { - if (!view.rendered || forceRedraw) { - forceRedraw && this.disposeViewComponent(view); - promises.push(this.redrawViewComponent(view)) - } + setTimeout(() => { + this.resetRenderedRows(); + this._views.forEach((view) => { + if (!view.rendered || forceRedraw) { + forceRedraw && this.disposeViewComponent(view); + this.redrawViewComponent(view) + } + }); }); - await Promise.all(promises); } /** Render all the expanded row detail View Components */ async renderAllViewModels() { - const promises: Promise[] = []; - Array.from(this._views) + this._views .filter((x) => x?.dataContext) - .forEach((x) => promises.push(this.renderViewModel(x.dataContext))); - await Promise.all(promises); + .forEach((x) => this.renderViewModel(x.dataContext)); } /** Redraw the necessary View Component */ - async redrawViewComponent(view: CreatedView) { - const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`); - if (containerElements?.length >= 0) { - await this.renderViewModel(view.dataContext); + redrawViewComponent(view: CreatedView) { + const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`); + if (containerElement) { + this.renderViewModel(view.dataContext); } } /** Render (or re-render) the View Component (Row Detail) */ - async renderPreloadView(item: any) { - const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`); - if (this._preloadComponent && containerElements?.length) { + renderPreloadView(item: any) { + const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`); + if (this._preloadComponent && containerElement) { // render row detail const bindableData = { model: item, @@ -255,18 +262,17 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { parent: this.rowDetailViewOptions?.parent, } as ViewModelBindableInputData; const detailContainer = document.createElement('section'); - containerElements[containerElements.length - 1]!.appendChild(detailContainer); + containerElement.appendChild(detailContainer); - const { root } = await createReactComponentDynamically(this._preloadComponent, detailContainer as HTMLElement, bindableData); + const { root } = createReactComponentDynamically(this._preloadComponent, detailContainer, bindableData); this._preloadRoot = root; } } /** Render (or re-render) the View Component (Row Detail) */ - async renderViewModel(item: any) { - const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`); - if (this._component && containerElements?.length) { - // render row detail + renderViewModel(item: any) { + const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`); + if (this._component && containerElement) { const bindableData = { model: item, addon: this, @@ -274,12 +280,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { dataView: this.dataView, parent: this.rowDetailViewOptions?.parent, } as ViewModelBindableInputData; - const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]); // load our Row Detail React Component dynamically, typically we would want to use `root.render()` after the preload component (last argument below) // BUT the root render doesn't seem to work and shows a blank element, so we'll use `createRoot()` every time even though it shows a console log in Dev // that is the only way I got it working so let's use it anyway and console warnings are removed in production anyway - const { root } = createReactComponentDynamically(this._component, containerElements[containerElements.length - 1] as HTMLElement, bindableData /*, viewObj?.root */); + const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]); + const { root } = createReactComponentDynamically(this._component, containerElement, bindableData); if (viewObj) { viewObj.root = root; viewObj.rendered = true; @@ -303,9 +309,10 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName); } - protected disposeView(item: any, removeFromArray = false): void { + protected disposeViewByItem(item: any, removeFromArray = false): void { const foundViewIdx = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]); - if (foundViewIdx >= 0 && this.disposeViewComponent(this._views[foundViewIdx])) { + if (foundViewIdx >= 0) { + this.disposeViewComponent(this._views[foundViewIdx]); if (removeFromArray) { this._views.splice(foundViewIdx, 1); } @@ -313,11 +320,12 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { } protected disposeViewComponent(expandedView: CreatedView): CreatedView | void { + expandedView.rendered = false; if (expandedView?.root) { - const container = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`); - if (container?.length) { + const container = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`); + if (container) { expandedView.root.unmount(); - container[0].textContent = ''; + container.textContent = ''; return expandedView; } } @@ -326,8 +334,8 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { /** * Just before the row get expanded or collapsed we will do the following * First determine if the row is expanding or collapsing, - * if it's expanding we will add it to our View Components reference array if we don't already have it - * or if it's collapsing we will remove it from our View Components reference array + * if it's expanding we will add it to our View Components reference array, + * if we don't already have it or if it's collapsing we will remove it from our View Components reference array */ protected handleOnBeforeRowDetailToggle(_e: SlickEventData, args: { grid: SlickGrid; item: any; }) { // expanding @@ -336,7 +344,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { this.addViewInfoToViewsRef(args.item, null); } else { // collapsing, so dispose of the View - this.disposeView(args.item, true); + this.disposeViewByItem(args.item, true); } } @@ -349,8 +357,8 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { rowIdsOutOfViewport: (string | number)[]; grid: SlickGrid; }) { - const viewModel = Array.from(this._views).find((x) => x.id === args.rowId); - if (viewModel) { + const viewModel = this._views.find((x) => x.id === args.rowId); + if (viewModel && !viewModel.rendered) { this.redrawViewComponent(viewModel); } } @@ -385,8 +393,10 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { } if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) { - throw new Error('[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' + - '(a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property'); + throw new Error( + '[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' + + `returns an item object that has an "${this.datasetIdPropName}" property` + ); } // notify the plugin with the new item details diff --git a/test/cypress/e2e/example45.cy.ts b/test/cypress/e2e/example45.cy.ts index bf9390e..c329a28 100644 --- a/test/cypress/e2e/example45.cy.ts +++ b/test/cypress/e2e/example45.cy.ts @@ -16,7 +16,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { .each(($child, index) => expect($child.text()).to.eq(rootGridTitles[index])); }); - it('should row detail height to 8 rows and change server delay to 40ms for faster testing', () => { + it('should set row detail height to 8 rows and change server delay to 40ms for faster testing', () => { cy.get('[data-test="detail-view-row-count"]').clear().type('8'); cy.get('[data-test="set-count-btn"]').click(); cy.get('[data-test="server-delay"]').type('{backspace}'); @@ -25,7 +25,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { it('should open the Row Detail of the 2nd row and expect to find an inner grid with all inner column titles', () => { cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', '- Order Details (id: 1)'); cy.get('#innergrid-1') .find('.slick-header-columns') @@ -35,12 +35,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { it('should sort 2nd Row Detail inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => { cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); - cy.get('#innergrid-1') - .find('.slick-header-column:nth(2)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .click(); + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') .should('be.visible') @@ -132,12 +127,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); - cy.get('#innergrid-1') - .find('.slick-header-column:nth(2)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .click(); + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') .should('be.visible') @@ -181,12 +171,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); - cy.get('#innergrid-1') - .find('.slick-header-column:nth(2)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .click(); + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') .should('be.visible') @@ -235,12 +220,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); - cy.get('#innergrid-1') - .find('.slick-header-column:nth(2)') - .trigger('mouseover') - .children('.slick-header-menu-button') - .invoke('show') - .click(); + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') .should('be.visible') @@ -264,7 +244,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`); - cy.get('#innergrid-2 .slick-header-column:nth(2)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click(); + cy.get('#innergrid-2 .slick-header-column:nth(2)').children('.slick-header-menu-button').click(); cy.get('#innergrid-2 .slick-header-menu .slick-menu-command-list') .should('be.visible') @@ -285,10 +265,11 @@ describe('Example 45 - Row Detail with inner Grid', () => { it('should go to the bottom end of the grid and open row 987', () => { cy.get('#grid45').type('{ctrl}{end}', { release: false }); - cy.wait(50); cy.get('.slick-row[data-row=1001] .detail-view-toggle').first().click(); - cy.get('#innergrid-987 .search-filter.filter-orderId').clear().type('>987'); + cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch'); + cy.get('@orderIdSearch').clear(); + cy.get('@orderIdSearch').type('>987'); cy.get('.slick-empty-data-warning').should('be.visible'); }); @@ -311,7 +292,9 @@ describe('Example 45 - Row Detail with inner Grid', () => { it('should go back to the bottom of the grid and still expect row detail 987 to be opened with same filter and no rows inside it', () => { cy.get('#grid45').type('{ctrl}{end}', { release: false }); - cy.get('#innergrid-987 .search-filter.filter-orderId').clear().type('>987'); + cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch'); + cy.get('@orderIdSearch').clear(); + cy.get('@orderIdSearch').type('>987'); cy.get('.slick-empty-data-warning').should('be.visible'); }); @@ -347,7 +330,9 @@ describe('Example 45 - Row Detail with inner Grid', () => { it('should change Row Detail panel height to 15, open 2nd and 3rd then execute PageDown twice', () => { ROW_DETAIL_PANEL_COUNT = 15; cy.get('[data-test="collapse-all-btn"]').click(); - cy.get('[data-test="detail-view-row-count"]').clear().type('15'); + cy.get('[data-test="detail-view-row-count"]').as('rowCount'); + cy.get('@rowCount').clear(); + cy.get('@rowCount').type('15'); cy.get('[data-test="set-count-btn"]').click(); cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); @@ -359,7 +344,7 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); // open 3rd row detail - cy.get(`.slick-row[data-row="${ROW_DETAIL_PANEL_COUNT - 1}"] .slick-cell:nth(0)`).click().wait(40); + cy.get(`.slick-row[data-row="14"] .slick-cell:nth(0)`).click().wait(40); // 3rd row detail cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); @@ -387,7 +372,9 @@ describe('Example 45 - Row Detail with inner Grid', () => { it('should change Row Detail panel height back to 8, open 2nd and 3rd and filter Company ID with "1..2" and expect only these 2 rows to be rendered in the grid', () => { ROW_DETAIL_PANEL_COUNT = 8; cy.get('[data-test="collapse-all-btn"]').click(); - cy.get('[data-test="detail-view-row-count"]').clear().type('8'); + cy.get('[data-test="detail-view-row-count"]').as('rowCount'); + cy.get('@rowCount').clear(); + cy.get('@rowCount').type('8'); cy.get('[data-test="set-count-btn"]').click(); cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); @@ -408,25 +395,26 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); cy.get('.search-filter.filter-companyId').type('1..2'); - cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should('have.length', ROW_DETAIL_PANEL_COUNT * 2); + cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( + 'have.length', + ROW_DETAIL_PANEL_COUNT * 2 + ); cy.get('.search-filter.filter-companyId').type('{backspace}2'); - cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should('have.length', ROW_DETAIL_PANEL_COUNT * 2); + cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( + 'have.length', + ROW_DETAIL_PANEL_COUNT * 2 + ); }); it('should clear Company ID filter and have all rows back in grid and rendered', () => { - cy.get('#grid45') - .find('button.slick-grid-menu-button') - .first() - .click({ force: true }); - - cy.get(`.slick-grid-menu:visible`) - .find('.slick-menu-item') - .first() - .find('span') - .contains('Clear all Filters') - .click(); + cy.get('#grid45').find('button.slick-grid-menu-button').first().click({ force: true }); + + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should('have.length.greaterThan', ROW_DETAIL_PANEL_COUNT * 2); + cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( + 'have.length.greaterThan', + ROW_DETAIL_PANEL_COUNT * 2 + ); // 2nd row detail cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); @@ -439,5 +427,5 @@ describe('Example 45 - Row Detail with inner Grid', () => { cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }) + }); }); From da7cca7191aae27d9631aa49d6728496142824d5 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 11 Mar 2025 21:50:54 -0400 Subject: [PATCH 2/3] chore: add more Cypress tests and fix Vue Row Detail --- src/examples/slickgrid/Example45.tsx | 26 +- .../extensions/slickRowDetailView.ts | 12 +- test/cypress/e2e/example45.cy.ts | 856 +++++++++--------- 3 files changed, 478 insertions(+), 416 deletions(-) diff --git a/src/examples/slickgrid/Example45.tsx b/src/examples/slickgrid/Example45.tsx index 09ece86..f2e364a 100644 --- a/src/examples/slickgrid/Example45.tsx +++ b/src/examples/slickgrid/Example45.tsx @@ -22,6 +22,7 @@ interface Props { } interface State extends BaseSlickGridState { detailViewRowCount: number; serverWaitDelay: number; + isUsingAutoHeight: boolean; isUsingInnerGridStatePresets: boolean; } @@ -37,6 +38,7 @@ export default class Example45 extends React.Component { dataset: this.getData(NB_ITEMS), detailViewRowCount: 9, serverWaitDelay: FAKE_SERVER_DELAY, + isUsingAutoHeight: false, isUsingInnerGridStatePresets: false, }; } @@ -173,7 +175,7 @@ export default class Example45 extends React.Component { return { autoResize: { container: '#demo-container', - autoHeight: false, // works with/without autoHeight + autoHeight: this.state.isUsingAutoHeight, // works with/without autoHeight rightPadding: 10, }, enableFiltering: true, @@ -250,6 +252,14 @@ export default class Example45 extends React.Component { return true; } + changeUsingResizerAutoHeight() { + const isUsingAutoHeight = !this.state.isUsingAutoHeight; + this.setState((state: State) => ({ ...state, isUsingAutoHeight })); + this.reactGrid.slickGrid?.setOptions({ autoResize: { ...this.state.gridOptions?.autoResize, autoHeight: isUsingAutoHeight } }); + this.reactGrid.resizerService.resizeGrid(); + return true; + } + closeAllRowDetail() { this.rowDetailInstance.collapseAll(); } @@ -351,6 +361,20 @@ export default class Example45 extends React.Component { Use Inner Grid State/Presets + +
diff --git a/src/slickgrid-react/extensions/slickRowDetailView.ts b/src/slickgrid-react/extensions/slickRowDetailView.ts index 4cf7027..42e8496 100644 --- a/src/slickgrid-react/extensions/slickRowDetailView.ts +++ b/src/slickgrid-react/extensions/slickRowDetailView.ts @@ -290,7 +290,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { viewObj.root = root; viewObj.rendered = true; } else { - this.addViewInfoToViewsRef(item, root); + this.upsertViewRefs(item, root); } } } @@ -299,13 +299,19 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // protected functions // ------------------ - protected addViewInfoToViewsRef(item: any, root: Root | null) { + protected upsertViewRefs(item: any, root: Root | null) { + const viewIdx = this._views.findIndex(obj => obj.id === item[this.datasetIdPropName]); const viewInfo: CreatedView = { id: item[this.datasetIdPropName], dataContext: item, root, rendered: !!root, }; + if (viewIdx >= 0) { + this._views[viewIdx] = viewInfo; + } else { + this._views.push(viewInfo); + } addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName); } @@ -341,7 +347,7 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView { // expanding if (args?.item?.__collapsed) { // expanding row detail - this.addViewInfoToViewsRef(args.item, null); + this.upsertViewRefs(args.item, null); } else { // collapsing, so dispose of the View this.disposeViewByItem(args.item, true); diff --git a/test/cypress/e2e/example45.cy.ts b/test/cypress/e2e/example45.cy.ts index c329a28..5deeb21 100644 --- a/test/cypress/e2e/example45.cy.ts +++ b/test/cypress/e2e/example45.cy.ts @@ -16,416 +16,448 @@ describe('Example 45 - Row Detail with inner Grid', () => { .each(($child, index) => expect($child.text()).to.eq(rootGridTitles[index])); }); - it('should set row detail height to 8 rows and change server delay to 40ms for faster testing', () => { - cy.get('[data-test="detail-view-row-count"]').clear().type('8'); - cy.get('[data-test="set-count-btn"]').click(); - cy.get('[data-test="server-delay"]').type('{backspace}'); - }); - - it('should open the Row Detail of the 2nd row and expect to find an inner grid with all inner column titles', () => { - cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); - - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', '- Order Details (id: 1)'); - - cy.get('#innergrid-1') - .find('.slick-header-columns') - .children() - .each(($child, index) => expect($child.text()).to.eq(innerGridTitles[index])); - }); - - it('should sort 2nd Row Detail inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => { - cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); - cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); - - cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') - .should('be.visible') - .children('.slick-menu-item:nth-of-type(3)') - .children('.slick-menu-content') - .should('contain', 'Sort Ascending') - .click(); - - cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); - - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should open 3rd row and still expect 2nd row to be sorted and filtered', () => { - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // 3rd row detail - cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', ''); - cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', ''); - cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist'); - - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should go at the bottom end of the grid, then back to top and expect all Row Details to be opened but reset to default', () => { - cy.get('#grid45').type('{ctrl}{end}', { release: false }); - cy.get('#grid45').type('{ctrl}{home}', { release: false }); - cy.wait(50); - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // 3rd row detail - cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', ''); - cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', ''); - cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should force redraw of all Row Details and expect same row details to be opened and opened', () => { - cy.get('[data-test="redraw-all-btn"]').click(); - cy.wait(10); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // 3rd row detail - cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', ''); - cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', ''); - cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should close all rows', () => { - cy.get('[data-test="collapse-all-btn"]').click(); - }); - - it('should open 2nd row and sort inner grid "Freight" column in ascending order and filter "Order ID" and "Ship City" with "m" and expect 2 sorted rows', () => { - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); - - cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); - - cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') - .should('be.visible') - .children('.slick-menu-item:nth-of-type(3)') - .children('.slick-menu-content') - .should('contain', 'Sort Ascending') - .click(); - - cy.get('#innergrid-1 .search-filter.filter-orderId').clear().type('>102'); - cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); - - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should open 1st row and expect 2nd row no longer be sorted neither filtered because it has to re-rendered', () => { - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - cy.get('#innergrid-1 .search-filter.filter-shipCity').should('have.value', ''); - cy.get('#innergrid-1 .slick-sort-indicator-asc').should('not.exist'); - - // default rows - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should close all rows', () => { - cy.get('[data-test="collapse-all-btn"]').click(); - }); - - it('should re-open 2nd row and sort inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => { - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); - - cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); - - cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') - .should('be.visible') - .children('.slick-menu-item:nth-of-type(3)') - .children('.slick-menu-content') - .should('contain', 'Sort Ascending') - .click(); - - cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); - - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should scroll down when the row detail is just barely visible and then scroll back up and still expect same filters/sorting', () => { - cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 350); - cy.wait(50); - cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); - - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should scroll down by 2 pages down and then scroll back up and no longer the same filters/sorting', () => { - cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 800); - cy.wait(50); - cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); - - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('not.contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.contain', 'Madrid'); - }); - - it('should close all rows and enable inner Grid State/Presets', () => { - cy.get('[data-test="collapse-all-btn"]').click(); - cy.get('[data-test="use-inner-grid-state-presets"]').click(); - }); - - it('should open again 2nd row and sort inner grid "Freight" column in ascending order & filter "Ship City" with "m" and expect 2 sorted rows', () => { - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); - - cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); - - cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') - .should('be.visible') - .children('.slick-menu-item:nth-of-type(3)') - .children('.slick-menu-content') - .should('contain', 'Sort Ascending') - .click(); - - cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); - - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should open again 3rd row and sort inner grid "Freight" column in ascending order & filter "Order ID" and "Ship City" with "m" and expect 2 sorted rows', () => { - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`); - - cy.get('#innergrid-2 .slick-header-column:nth(2)').children('.slick-header-menu-button').click(); - - cy.get('#innergrid-2 .slick-header-menu .slick-menu-command-list') - .should('be.visible') - .children('.slick-menu-item:nth-of-type(3)') - .children('.slick-menu-content') - .should('contain', 'Sort Ascending') - .click(); - - cy.get('#innergrid-2 .search-filter.filter-orderId').clear().type('>102'); - cy.get('#innergrid-2 .search-filter.filter-shipCity').clear().type('m*'); - - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should go to the bottom end of the grid and open row 987', () => { - cy.get('#grid45').type('{ctrl}{end}', { release: false }); - cy.get('.slick-row[data-row=1001] .detail-view-toggle').first().click(); - - cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch'); - cy.get('@orderIdSearch').clear(); - cy.get('@orderIdSearch').type('>987'); - cy.get('.slick-empty-data-warning').should('be.visible'); - }); - - it('should go again back to top of the grid and now expect that all Row Details are still opened AND their filters/sorting are kept and reapplied', () => { - cy.get('#grid45').type('{ctrl}{home}', { release: false }); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should go back to the bottom of the grid and still expect row detail 987 to be opened with same filter and no rows inside it', () => { - cy.get('#grid45').type('{ctrl}{end}', { release: false }); - - cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch'); - cy.get('@orderIdSearch').clear(); - cy.get('@orderIdSearch').type('>987'); - cy.get('.slick-empty-data-warning').should('be.visible'); - }); - - it('should go back to the top of the grid once more and close 3nd row and still expect same rows in both row details', () => { - cy.get('#grid45').type('{ctrl}{home}', { release: false }); - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) - .click() - .wait(40); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should change Row Detail panel height to 15, open 2nd and 3rd then execute PageDown twice', () => { - ROW_DETAIL_PANEL_COUNT = 15; - cy.get('[data-test="collapse-all-btn"]').click(); - cy.get('[data-test="detail-view-row-count"]').as('rowCount'); - cy.get('@rowCount').clear(); - cy.get('@rowCount').type('15'); - cy.get('[data-test="set-count-btn"]').click(); - - cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // open 3rd row detail - cy.get(`.slick-row[data-row="14"] .slick-cell:nth(0)`).click().wait(40); - - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - cy.get('#grid45').type('{pageDown}{pageDown}', { release: false }); - cy.wait(50); - cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 350); - - // expect same grid details for both grids - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); - - it('should change Row Detail panel height back to 8, open 2nd and 3rd and filter Company ID with "1..2" and expect only these 2 rows to be rendered in the grid', () => { - ROW_DETAIL_PANEL_COUNT = 8; - cy.get('[data-test="collapse-all-btn"]').click(); - cy.get('[data-test="detail-view-row-count"]').as('rowCount'); - cy.get('@rowCount').clear(); - cy.get('@rowCount').type('8'); - cy.get('[data-test="set-count-btn"]').click(); - - cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // open 3rd row detail - cy.get(`.slick-row[data-row="9"] .slick-cell:nth(0)`).click().wait(40); - - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - cy.get('.search-filter.filter-companyId').type('1..2'); - cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( - 'have.length', - ROW_DETAIL_PANEL_COUNT * 2 - ); - cy.get('.search-filter.filter-companyId').type('{backspace}2'); - cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( - 'have.length', - ROW_DETAIL_PANEL_COUNT * 2 - ); - }); - - it('should clear Company ID filter and have all rows back in grid and rendered', () => { - cy.get('#grid45').find('button.slick-grid-menu-button').first().click({ force: true }); - - cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); - - cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( - 'have.length.greaterThan', - ROW_DETAIL_PANEL_COUNT * 2 - ); - - // 2nd row detail - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - - // 3rd row detail - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); - cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); - }); + for (const isUsingAutoHeight of [true, false]) { + describe(`using autoHeight: "${isUsingAutoHeight}"`, () => { + it(`should toggle autoHeight checkbox to ${isUsingAutoHeight}`, () => { + if (isUsingAutoHeight) { + cy.get('[data-test="use-auto-height"]').check(); + } else { + cy.get('[data-test="use-auto-height"]').uncheck(); + } + }); + + it('should set row detail height to 8 rows and change server delay to 40ms for faster testing', () => { + cy.get('[data-test="detail-view-row-count"]').clear().type('8'); + cy.get('[data-test="set-count-btn"]').click(); + cy.get('[data-test="server-delay"]').type('{backspace}'); + }); + + it('should open the Row Detail of the 2nd row and expect to find an inner grid with all inner column titles', () => { + cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); + + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', '- Order Details (id: 1)'); + + cy.get('#innergrid-1') + .find('.slick-header-columns') + .children() + .each(($child, index) => expect($child.text()).to.eq(innerGridTitles[index])); + }); + + it('should sort 2nd Row Detail inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => { + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); + + cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') + .should('be.visible') + .children('.slick-menu-item:nth-of-type(3)') + .children('.slick-menu-content') + .should('contain', 'Sort Ascending') + .click(); + + cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); + + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should open 3rd row and still expect 2nd row to be sorted and filtered', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // 3rd row detail + cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', ''); + cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', ''); + cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist'); + + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should go at the bottom end of the grid, then back to top and expect all Row Details to be opened but reset to default', () => { + cy.get('#grid45').type('{ctrl}{end}', { release: false }); + cy.get('#grid45').type('{ctrl}{home}', { release: false }); + cy.wait(50); + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // 3rd row detail + cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', ''); + cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', ''); + cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should force redraw of all Row Details and expect same row details to be opened and opened', () => { + cy.get('[data-test="redraw-all-btn"]').click(); + cy.wait(10); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // 3rd row detail + cy.get('#innergrid-2 .search-filter.filter-orderId').should('have.value', ''); + cy.get('#innergrid-2 .search-filter.filter-shipCity').should('have.value', ''); + cy.get('#innergrid-2 .slick-sort-indicator-asc').should('not.exist'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should close all rows', () => { + cy.get('[data-test="collapse-all-btn"]').click(); + }); + + it('should open 2nd row and sort inner grid "Freight" column in ascending order and filter "Order ID" and "Ship City" with "m" and expect 2 sorted rows', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); + + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); + + cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') + .should('be.visible') + .children('.slick-menu-item:nth-of-type(3)') + .children('.slick-menu-content') + .should('contain', 'Sort Ascending') + .click(); + + cy.get('#innergrid-1 .search-filter.filter-orderId').clear().type('>102'); + cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); + + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should open 1st row and expect 2nd row no longer be sorted neither filtered because it has to re-rendered', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 0}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + cy.get('#innergrid-1 .search-filter.filter-shipCity').should('have.value', ''); + cy.get('#innergrid-1 .slick-sort-indicator-asc').should('not.exist'); + + // default rows + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10261'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Rio de Janeiro'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should close all rows', () => { + cy.get('[data-test="collapse-all-btn"]').click(); + }); + + it('should re-open 2nd row and sort inner grid "Freight" column in ascending order and filter "Ship City" with "m" and expect 2 sorted rows', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); + + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); + + cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') + .should('be.visible') + .children('.slick-menu-item:nth-of-type(3)') + .children('.slick-menu-content') + .should('contain', 'Sort Ascending') + .click(); + + cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); + + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should scroll down when the row detail is just barely visible and then scroll back up and still expect same filters/sorting', () => { + cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 350); + cy.wait(50); + cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); + + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should scroll down by 2 pages down and then scroll back up and no longer the same filters/sorting', () => { + cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 800); + cy.wait(50); + cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 0); + + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('not.contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.contain', 'Madrid'); + }); + + it('should close all rows and enable inner Grid State/Presets', () => { + cy.get('[data-test="collapse-all-btn"]').click(); + cy.get('[data-test="use-inner-grid-state-presets"]').click(); + }); + + it('should open again 2nd row and sort inner grid "Freight" column in ascending order & filter "Ship City" with "m" and expect 2 sorted rows', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${1})`); + + cy.get('#innergrid-1').find('.slick-header-column:nth(2)').children('.slick-header-menu-button').click(); + + cy.get('#innergrid-1 .slick-header-menu .slick-menu-command-list') + .should('be.visible') + .children('.slick-menu-item:nth-of-type(3)') + .children('.slick-menu-content') + .should('contain', 'Sort Ascending') + .click(); + + cy.get('#innergrid-1 .search-filter.filter-shipCity').clear().type('m*'); + + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should open again 3rd row and sort inner grid "Freight" column in ascending order & filter "Order ID" and "Ship City" with "m" and expect 2 sorted rows', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + cy.get('.slick-cell + .dynamic-cell-detail').find('h4').should('contain', `- Order Details (id: ${2})`); + + cy.get('#innergrid-2 .slick-header-column:nth(2)').children('.slick-header-menu-button').click(); + + cy.get('#innergrid-2 .slick-header-menu .slick-menu-command-list') + .should('be.visible') + .children('.slick-menu-item:nth-of-type(3)') + .children('.slick-menu-content') + .should('contain', 'Sort Ascending') + .click(); + + cy.get('#innergrid-2 .search-filter.filter-orderId').clear().type('>102'); + cy.get('#innergrid-2 .search-filter.filter-shipCity').clear().type('m*'); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should close and reopen the 3rd row and expect same filtered and sorted rows', () => { + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`).as( + '3rdRow' + ); + cy.get('@3rdRow').click(); + cy.get('@3rdRow').click(); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should go to the bottom end of the grid and open row 987', () => { + cy.get('#grid45').type('{ctrl}{end}', { release: false }); + + cy.get('.slick-row[data-row=1001] .detail-view-toggle').first().click(); + + cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch'); + cy.get('@orderIdSearch').clear(); + cy.get('@orderIdSearch').type('>987'); + cy.get('.slick-empty-data-warning').should('be.visible'); + }); + + it('should go again back to top of the grid and now expect that all Row Details are still opened AND their filters/sorting are kept and reapplied', () => { + cy.get('#grid45').type('{ctrl}{home}', { release: false }); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should go back to the bottom of the grid and still expect row detail 987 to be opened with same filter and no rows inside it', () => { + cy.get('#grid45').type('{ctrl}{end}', { release: false }); + + cy.get('#innergrid-987 .search-filter.filter-orderId').as('orderIdSearch'); + cy.get('@orderIdSearch').clear(); + cy.get('@orderIdSearch').type('>987'); + cy.get('.slick-empty-data-warning').should('be.visible'); + }); + + it('should go back to the top of the grid once more and close 3nd row and still expect same rows in both row details', () => { + cy.get('#grid45').type('{ctrl}{home}', { release: false }); + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * (1 * (ROW_DETAIL_PANEL_COUNT + 1))}px;"] .slick-cell:nth(0)`) + .click() + .wait(40); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should change Row Detail panel height to 15, open 2nd and 3rd then execute PageDown twice', () => { + ROW_DETAIL_PANEL_COUNT = 15; + cy.get('[data-test="collapse-all-btn"]').click(); + cy.get('[data-test="detail-view-row-count"]').as('rowCount'); + cy.get('@rowCount').clear(); + cy.get('@rowCount').type('15'); + cy.get('[data-test="set-count-btn"]').click(); + + cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // open 3rd row detail + cy.get(`.slick-row[data-row="14"] .slick-cell:nth(0)`).click().wait(40); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + cy.get('#grid45').type('{pageDown}{pageDown}', { release: false }); + cy.wait(50); + cy.get('#grid45 .slick-viewport-top.slick-viewport-left').first().scrollTo(0, 350); + + // expect same grid details for both grids + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should change Row Detail panel height back to 8, open 2nd and 3rd and filter Company ID with "1..2" and expect only these 2 rows to be rendered in the grid', () => { + ROW_DETAIL_PANEL_COUNT = 8; + cy.get('[data-test="collapse-all-btn"]').click(); + cy.get('[data-test="detail-view-row-count"]').as('rowCount'); + cy.get('@rowCount').clear(); + cy.get('@rowCount').type('8'); + cy.get('[data-test="set-count-btn"]').click(); + + cy.get('.slick-cell.detail-view-toggle:nth(1)').click().wait(40); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // open 3rd row detail + cy.get(`.slick-row[data-row="9"] .slick-cell:nth(0)`).click().wait(40); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + cy.get('.search-filter.filter-companyId').type('1..2'); + cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( + 'have.length', + ROW_DETAIL_PANEL_COUNT * 2 + ); + cy.get('.search-filter.filter-companyId').type('{backspace}2'); + cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( + 'have.length', + ROW_DETAIL_PANEL_COUNT * 2 + ); + }); + + it('should clear Company ID filter and have all rows back in grid and rendered', () => { + cy.get('#grid45').find('button.slick-grid-menu-button').first().click({ force: true }); + + cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click(); + + cy.get('#grid45 .slick-row:not(#innergrid-1 .slick-row,#innergrid-2 .slick-row)').should( + 'have.length.greaterThan', + ROW_DETAIL_PANEL_COUNT * 2 + ); + + // 2nd row detail + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-1 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + + // 3rd row detail + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', '10281'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Madrid'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', '10267'); + cy.get(`#innergrid-2 [style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'München'); + }); + + it('should reload page on first describe run', () => { + if (isUsingAutoHeight) { + cy.reload(); + } + }); + }); + } }); From 0c8316f5063b6fc2719233a78d3d27c84c00e96a Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 18 Mar 2025 22:23:09 -0400 Subject: [PATCH 3/3] chore(deps): update all dependencies --- package.json | 26 ++++----- yarn.lock | 158 +++++++++++++++++++++++++-------------------------- 2 files changed, 92 insertions(+), 92 deletions(-) diff --git a/package.json b/package.json index b44fea3..bffcb08 100644 --- a/package.json +++ b/package.json @@ -81,12 +81,12 @@ "/src/slickgrid-react" ], "dependencies": { - "@slickgrid-universal/common": "~5.13.0", - "@slickgrid-universal/custom-footer-component": "~5.13.0", - "@slickgrid-universal/empty-warning-component": "~5.13.0", + "@slickgrid-universal/common": "~5.13.1", + "@slickgrid-universal/custom-footer-component": "~5.13.1", + "@slickgrid-universal/empty-warning-component": "~5.13.1", "@slickgrid-universal/event-pub-sub": "~5.13.0", - "@slickgrid-universal/pagination-component": "~5.13.0", - "@slickgrid-universal/row-detail-view-plugin": "~5.13.0", + "@slickgrid-universal/pagination-component": "~5.13.1", + "@slickgrid-universal/row-detail-view-plugin": "~5.13.1", "dequal": "^2.0.3", "i18next": "^23.16.8", "sortablejs": "^1.15.6" @@ -96,18 +96,18 @@ }, "devDependencies": { "@4tw/cypress-drag-drop": "^2.3.0", - "@faker-js/faker": "^9.5.1", + "@faker-js/faker": "^9.6.0", "@fnando/sparkline": "^0.3.10", "@formkit/tempo": "^0.1.2", "@popperjs/core": "^2.11.8", "@release-it/conventional-changelog": "^10.0.0", - "@slickgrid-universal/composite-editor-component": "~5.13.0", - "@slickgrid-universal/custom-tooltip-plugin": "~5.13.0", - "@slickgrid-universal/excel-export": "~5.13.0", - "@slickgrid-universal/graphql": "~5.13.0", - "@slickgrid-universal/odata": "~5.13.0", - "@slickgrid-universal/rxjs-observable": "~5.13.0", - "@slickgrid-universal/text-export": "~5.13.0", + "@slickgrid-universal/composite-editor-component": "~5.13.1", + "@slickgrid-universal/custom-tooltip-plugin": "~5.13.1", + "@slickgrid-universal/excel-export": "~5.13.1", + "@slickgrid-universal/graphql": "~5.13.1", + "@slickgrid-universal/odata": "~5.13.1", + "@slickgrid-universal/rxjs-observable": "~5.13.1", + "@slickgrid-universal/text-export": "~5.13.1", "@types/fnando__sparkline": "^0.3.7", "@types/i18next-xhr-backend": "^1.4.2", "@types/node": "^22.13.10", diff --git a/yarn.lock b/yarn.lock index 4795e99..af86b6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -411,17 +411,17 @@ "@eslint/core" "^0.12.0" levn "^0.4.1" -"@excel-builder-vanilla/types@^3.0.14": - version "3.0.14" - resolved "https://registry.yarnpkg.com/@excel-builder-vanilla/types/-/types-3.0.14.tgz#162fd36f21c100c4046903c0e11d335ed82c0de9" - integrity sha512-9gq9hPPdVGzz/3fESgVW6WlxienIxpr83QnGS364cRPmzxg3cZQewZvKns2DFYfLLMxBLH3L6PperVqInR+0ag== +"@excel-builder-vanilla/types@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@excel-builder-vanilla/types/-/types-3.1.0.tgz#be205a970454f1f41b55fbf2cae75375d56b25bf" + integrity sha512-BcCMAFI3XtuJ0AUnkCIP3SSyz7tn3kNp32Ew3JTxCpkluVDgty1AIIr7hUngHhNdwNx6WkFOyniJz/KIYJtcTQ== dependencies: fflate "^0.8.2" -"@faker-js/faker@^9.5.1": - version "9.5.1" - resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.5.1.tgz#1f32fb726db5f539415455cadbc93c9fb457e42d" - integrity sha512-0fzMEDxkExR2cn731kpDaCCnBGBUOIXEi2S1N5l8Hltp6aPf4soTMJ+g4k8r2sI5oB+rpwIW8Uy/6jkwGpnWPg== +"@faker-js/faker@^9.6.0": + version "9.6.0" + resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.6.0.tgz#64235d20330b142eef3d1d1638ba56c083b4bf1d" + integrity sha512-3vm4by+B5lvsFPSyep3ELWmZfE3kicDtmemVpuwl1yH7tqtnHdsA6hG8fbXedMVdkzgtvzWoRgjSB4Q+FHnZiw== "@fnando/sparkline@^0.3.10": version "0.3.10" @@ -1034,12 +1034,12 @@ resolved "https://registry.yarnpkg.com/@slickgrid-universal/binding/-/binding-5.12.2.tgz#102dc7db985dc3c52cfd13a176153f385f15a5b0" integrity sha512-o7dTmmW4DVBZi01VQHjO/cIJEH5RNz+rIrnQKwldTRoKC05vKOQTF/vuQAqTkhI7YHzFaspfvdy92oagEt5niw== -"@slickgrid-universal/common@5.13.0", "@slickgrid-universal/common@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-5.13.0.tgz#6971844b4b939a3b59bbea6de098d6b23d81aa02" - integrity sha512-iP1pN25uSAIoLrDnhmTt3uX+QQAL7+GPfbO/qA7zQYSP0vtP1VRtx4aA/l8g7gHvA+KMAmN+k4kybVq2LOeGFg== +"@slickgrid-universal/common@5.13.1", "@slickgrid-universal/common@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/common/-/common-5.13.1.tgz#2dc8a2a7f930a520a5cea9e021a0fda5852b3482" + integrity sha512-RqJpUG6vk2XI76+QKPwe1+2aYry1GOZ+aq+7gtzLL+jktKPY/mw/h8I1IV+24slUBs7naXz04Ar/NWkcOQ61og== dependencies: - "@excel-builder-vanilla/types" "^3.0.14" + "@excel-builder-vanilla/types" "^3.1.0" "@formkit/tempo" "^0.1.2" "@slickgrid-universal/binding" "5.12.2" "@slickgrid-universal/event-pub-sub" "5.13.0" @@ -1048,43 +1048,43 @@ "@types/trusted-types" "^2.0.7" autocompleter "^9.3.2" dequal "^2.0.3" - multiple-select-vanilla "^3.4.4" + multiple-select-vanilla "^3.5.0" sortablejs "^1.15.6" un-flatten-tree "^2.0.12" vanilla-calendar-pro "^2.9.10" -"@slickgrid-universal/composite-editor-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-5.13.0.tgz#d968ee28b0ba8f30b3795d6490c635cdca8ce1f0" - integrity sha512-1PU5Cf5AUnR6szMbM4Adi9s7d/bNs+93vyzPUl3X7yChyG3yr36L318NImseuLYUSG5eom5p32lEybfcFwbCvA== +"@slickgrid-universal/composite-editor-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/composite-editor-component/-/composite-editor-component-5.13.1.tgz#ba784a24bb8f310fce1ad2afcb5eaed9a3db0598" + integrity sha512-xhdjBnrSjIzEwXWn5Ra1xPfewKfrTzlpTi/KLq8cbf5RRZSXiXEcDtd76x4NeSfRqMJKOMh5c0Do7xDR+oAaOg== dependencies: "@slickgrid-universal/binding" "5.12.2" - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/custom-footer-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-5.13.0.tgz#b18479ffde9aa4b12d5ff801c28778fadf7fe968" - integrity sha512-3pFxtT686N++BqjQc1tgc8gRmmO3S+plTRKnmG2QEu4YjL44gUAnSdch0mHNfAo/wztvombw1CbtNu1UJsyolg== +"@slickgrid-universal/custom-footer-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-footer-component/-/custom-footer-component-5.13.1.tgz#d61f87b7e9e1f1329b937134daa3bbfbd1e506d0" + integrity sha512-LcWnkWv4zTYSJKES5wdtnKmFnF0MYp2sqvSns0bqN/fEzJXlUwFxMINLJ5KLdnzB2V4gLlQP7HZrDsXuDlc+Bw== dependencies: "@formkit/tempo" "^0.1.2" "@slickgrid-universal/binding" "5.12.2" - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" -"@slickgrid-universal/custom-tooltip-plugin@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-5.13.0.tgz#3f4319d8d01d865c6b17077052547cc15f88c9e6" - integrity sha512-uvRI3xISJhl75cH1201a3roIJipv2mdc0I0SE2PumhR4gBg3gha3dYVbmt/XBLSD3V6qpid1fTmxYZIAwvWAwQ== +"@slickgrid-universal/custom-tooltip-plugin@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/custom-tooltip-plugin/-/custom-tooltip-plugin-5.13.1.tgz#05fcabd0b1441d0332a3ff8753684033f03e5ed6" + integrity sha512-JrMzLij4TLq+cnhtqQZ6wOq0H1Ta8ZxyeuPBVGD0V5xhPwW3DBC101gqRV9wrefo0NaoQHqCtJHD4vtfJ2q7NQ== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/empty-warning-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-5.13.0.tgz#0c857db68692f80f077e9f1cc983960f4fd707c8" - integrity sha512-YsMCRz8dqapDSAxYuOSN+BCaiWjk1aR85eNpD00uu11DU0bE+hZbP2nqmUscerDAT+5BLF6GJzAdE+J9TjV2mQ== +"@slickgrid-universal/empty-warning-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/empty-warning-component/-/empty-warning-component-5.13.1.tgz#92bdf8c9cbc29c03c2df4fa2078b4d82d4c8fe07" + integrity sha512-Nufo3FgBFmrHam7ijhwwP/VUNrH7dp8ZhVwSdndPgfl/WbYID9KUwZI4P3Yx6ml0KNJ2OEzHW1RfxIsGxr5M9A== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/event-pub-sub@5.13.0", "@slickgrid-universal/event-pub-sub@~5.13.0": version "5.13.0" @@ -1093,61 +1093,61 @@ dependencies: "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/excel-export@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-5.13.0.tgz#6f87b9747c9073ba068974fa19d477dae5e293ec" - integrity sha512-6uPHhy25pxkj/XKCDghvQTnrDRsoEc1d/vsp9HDgoxbpIy7vKnBLqDAT+pnT+1n4R0nZsnyqEhnrIgV+k+d0Ew== +"@slickgrid-universal/excel-export@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/excel-export/-/excel-export-5.13.1.tgz#7660f22a7706ce3a5df574482b4c1b54ef8454af" + integrity sha512-k9PPHp2Er+a3kU4ZDbh6MPDK/a/n/WW9UYBmFWVJrmPcNGP+OwMN/N2RGV99i/einDzT6PleFfIsDvzF0ZnE/g== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" - excel-builder-vanilla "^3.0.14" + excel-builder-vanilla "^3.1.0" -"@slickgrid-universal/graphql@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-5.13.0.tgz#c8326b4b98147deed322598355627e755c25cf93" - integrity sha512-OX73GJ9bgvM0yv1EHbrel+RHIu6pDQ7TccSLs3fgtHkdWAqvJzrB54uOZRDHupgXnedajc+UkL3Exj3yBAjr/w== +"@slickgrid-universal/graphql@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/graphql/-/graphql-5.13.1.tgz#1aa1315ea0eef93c352ef912d0568b9db6526ef4" + integrity sha512-W8Z2Y1j6umnARmOhqRLF42RhqfkrbQhGGr8ETvhuCVoqJIjvxVGVU1jeVqKcIXCMU6La01V8rOmGDWInnqG+mg== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/odata@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-5.13.0.tgz#89491508872f3b0430a90eb0a04516b5d548b2cc" - integrity sha512-ko2Wjja1S//AYrrNTSs4Bi+X3Ha6fdGt3t9RTUY36EznSp9lCORuZsXB5Y9TZTPE+URIyV2JfIiC6IyIb8Pblg== +"@slickgrid-universal/odata@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/odata/-/odata-5.13.1.tgz#2c5120b30e57f6b077f2390ae17b0309c1640a6d" + integrity sha512-0t8DRy6gfcUGhWryu9MgR41RzHn1prpA9Ks7P2w35WZwxRE94oc0qdeoPfzPQKSFi6m9OsDryVM4FDYuq5ig3A== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/pagination-component@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-5.13.0.tgz#f462437786789208a9501355a2e0e6c3bde489be" - integrity sha512-Ripo9qYvTrH/hXRHnN2OPE6vPbV3j6HSacbh6UXPFb1LWl2fHxoi49iZMrdZh7w+k2F3ElentmcjAQ3OA3FFwQ== +"@slickgrid-universal/pagination-component@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/pagination-component/-/pagination-component-5.13.1.tgz#4a334fb62c839bde5b3d32ee314ead885a46b4c3" + integrity sha512-05z68g0gP03gPbzYkH4+RtJlqNiz5PJAu/cjjPNzxk0OY6Jk/BdQTSYHmf0jBJEteORn+df7JIwjYHRjagtwGg== dependencies: "@slickgrid-universal/binding" "5.12.2" - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" -"@slickgrid-universal/row-detail-view-plugin@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/row-detail-view-plugin/-/row-detail-view-plugin-5.13.0.tgz#70ff434c80e953559e4b3ebb7082e8b65dcda699" - integrity sha512-dYQYZdHSZ5QF/J13UZFZD9KzDu6z2z0E7iWe3HU9lEhR66vE+byNyM7JWfb1n8mDP/3x4agsn3QoEbKNwOPyDQ== +"@slickgrid-universal/row-detail-view-plugin@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/row-detail-view-plugin/-/row-detail-view-plugin-5.13.1.tgz#ac8f4cdfae7b1444e8c39224cfb5c9eb7ea6a772" + integrity sha512-IEXNoT6MDVNUExuiIpsg+RtCoycCOBdF4JbfFQKf3P8G9S/7LA/Y2A3UAVR+CHl5pC1ZobKAvEtrXIKnD0y54Q== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" -"@slickgrid-universal/rxjs-observable@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-5.13.0.tgz#0389360177e91573d7c4ef3b5ac726428cd9072a" - integrity sha512-rUtNusMx4wrnCqIU3G0JrD5JQ9PKIprtKp9i1FN6tvGPBmRO3upR7EXURGquCE/DYS9m0OR+SqtX0tfhqJh5wA== +"@slickgrid-universal/rxjs-observable@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/rxjs-observable/-/rxjs-observable-5.13.1.tgz#9f6ba54b26fd9ac2c240b7aaba6f8f6f2adb1610" + integrity sha512-AqSUeYkMaK+GGiONM10nO+9nJimDO4XPe/wQAEHvG6X/oNnVyekzOl3yxmo2kNmDs6R3qo1Sx6BQkIcO71nIow== dependencies: - "@slickgrid-universal/common" "5.13.0" - rxjs "^7.8.1" + "@slickgrid-universal/common" "5.13.1" + rxjs "^7.8.2" -"@slickgrid-universal/text-export@~5.13.0": - version "5.13.0" - resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-5.13.0.tgz#dc300dffec88c53dfb13d89f1fccf6ebd41c3844" - integrity sha512-innFVhDtfDyHPSgB7ibGyqL9gOhIS86duf0lfBbj1hmPP1MUgtKcK9vb0x54TlI3estNzPXp4Kf4iSHL5XZd+Q== +"@slickgrid-universal/text-export@~5.13.1": + version "5.13.1" + resolved "https://registry.yarnpkg.com/@slickgrid-universal/text-export/-/text-export-5.13.1.tgz#e87a877600dd121a547d1c440529681282ff1e3e" + integrity sha512-EAdlKKMf6AvoV0ohd/5NbhcOjwxh7uyT13RDnL/8l560HMq8/nAJMXg+9h+V2cDZk7xcvXLYyBUABWSna/xlhA== dependencies: - "@slickgrid-universal/common" "5.13.0" + "@slickgrid-universal/common" "5.13.1" "@slickgrid-universal/utils" "5.12.0" text-encoding-utf-8 "^1.0.2" @@ -2991,10 +2991,10 @@ eventemitter2@6.4.7: resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d" integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg== -excel-builder-vanilla@^3.0.14: - version "3.0.14" - resolved "https://registry.yarnpkg.com/excel-builder-vanilla/-/excel-builder-vanilla-3.0.14.tgz#622775c71652fc1e96487543a3239cbb7912eae9" - integrity sha512-lXjyxAVVSwkHIikzCpQq+ydtrXWIGec/x6f5IzZV30BvW30i1adzNISSuq+OZqMuxbffKgmH0wgRkvSrl9WHgg== +excel-builder-vanilla@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/excel-builder-vanilla/-/excel-builder-vanilla-3.1.0.tgz#e67d860f7afa0be0249779d77a5739c4e47c2a41" + integrity sha512-98HxjD4iAJ+Noqfrwhk8Enol3cbZi9YyfkBozJJpwFJPmibEgH6TWURENSX5ugWs+ihruRDAWCsmFXc05eJcDA== dependencies: fflate "^0.8.2" @@ -4444,10 +4444,10 @@ ms@^2.1.1, ms@^2.1.3: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== -multiple-select-vanilla@^3.4.4: - version "3.4.4" - resolved "https://registry.yarnpkg.com/multiple-select-vanilla/-/multiple-select-vanilla-3.4.4.tgz#84c58c8cef280ff8f1f47586aa3bafd727f63210" - integrity sha512-V59lF9bCmLrmGiqmvhoGNS99wnwCHk58La7JawlYl74glm6+YDgS/y9UdGSnoP6QaPJMany4oPzuOtWk45VCUg== +multiple-select-vanilla@^3.5.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/multiple-select-vanilla/-/multiple-select-vanilla-3.5.0.tgz#4679f5ff29879a7a7233f95e90a8abaee16a2698" + integrity sha512-ifIrnWqsRtbE5O8uBUV9/+LeX0CT0yVwYcEzdX8Bwa88nVkACrHEUE1m5JfURPa6+7YRN47b94Hp37N59eow7g== dependencies: "@types/trusted-types" "^2.0.7"