Skip to content

Commit

Permalink
feat: add onPreHeaderContextMenu for Column Picker usage (#368)
Browse files Browse the repository at this point in the history 
* feat: add onPreHeaderContextMenu for Column Picker usage
  • Loading branch information
@ghiscoding
ghiscoding authored Jun 29, 2024
1 parent 36c6f7b commit c5d16e2
Show file tree
Hide file tree
Showing 3 changed files with 292 additions and 155 deletions.
30 changes: 15 additions & 15 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,11 @@
"/src/slickgrid-react"
],
"dependencies": {
"@slickgrid-universal/common": "~5.2.0",
"@slickgrid-universal/custom-footer-component": "~5.2.0",
"@slickgrid-universal/empty-warning-component": "~5.2.0",
"@slickgrid-universal/event-pub-sub": "~5.2.0",
"@slickgrid-universal/pagination-component": "~5.2.0",
"@slickgrid-universal/common": "~5.3.2",
"@slickgrid-universal/custom-footer-component": "~5.3.2",
"@slickgrid-universal/empty-warning-component": "~5.3.2",
"@slickgrid-universal/event-pub-sub": "~5.3.0",
"@slickgrid-universal/pagination-component": "~5.3.2",
"dequal": "^2.0.3",
"i18next": "^23.11.5",
"sortablejs": "^1.15.2"
Expand All @@ -105,13 +105,13 @@
"@formkit/tempo": "^0.1.2",
"@popperjs/core": "^2.11.8",
"@release-it/conventional-changelog": "^8.0.1",
"@slickgrid-universal/composite-editor-component": "~5.2.0",
"@slickgrid-universal/custom-tooltip-plugin": "~5.2.0",
"@slickgrid-universal/excel-export": "~5.2.0",
"@slickgrid-universal/graphql": "~5.2.0",
"@slickgrid-universal/odata": "~5.2.0",
"@slickgrid-universal/rxjs-observable": "~5.2.0",
"@slickgrid-universal/text-export": "~5.2.0",
"@slickgrid-universal/composite-editor-component": "~5.3.2",
"@slickgrid-universal/custom-tooltip-plugin": "~5.3.2",
"@slickgrid-universal/excel-export": "~5.3.2",
"@slickgrid-universal/graphql": "~5.3.2",
"@slickgrid-universal/odata": "~5.3.2",
"@slickgrid-universal/rxjs-observable": "~5.3.2",
"@slickgrid-universal/text-export": "~5.3.2",
"@types/dompurify": "^3.0.5",
"@types/fnando__sparkline": "^0.3.7",
"@types/i18next-xhr-backend": "^1.4.2",
Expand All @@ -134,7 +134,7 @@
"cypress-real-events": "^1.13.0",
"dompurify": "^3.1.5",
"esbuild-loader": "^4.2.0",
"eslint": "^9.5.0",
"eslint": "^9.6.0",
"eslint-plugin-cypress": "^3.3.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^17.9.0",
Expand Down Expand Up @@ -166,7 +166,7 @@
"style-loader": "4.0.0",
"ts-jest": "^29.1.5",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"typescript": "^5.5.2",
"typescript-eslint": "^7.14.1",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
Expand All @@ -179,4 +179,4 @@
"resolutions": {
"caniuse-lite": "1.0.30001638"
}
}
}
153 changes: 153 additions & 0 deletions test/cypress/e2e/example18.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,4 +211,157 @@ describe('Example 18 - Draggable Grouping & Aggregators', () => {
cy.get('.grouping-selects select:nth(2)').should('not.have.value');
});
});

describe('Column Picker tests', () => {
it('should open Column Picker from 2nd header column and hide Title & Duration which will hide Common Factor Group as well', () => {
const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven'];

cy.get('#grid18')
.find('.slick-header-column:nth(1)')
.trigger('mouseover')
.trigger('contextmenu')
.invoke('show');

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children()
.each(($child, index) => {
if (index <= 5) {
expect($child.text()).to.eq(fullTitlesWithGroupNames[index]);
}
});

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children('li:nth-child(1)')
.children('label')
.should('contain', 'Title')
.click();

cy.get('.slick-column-picker .close')
.click();
});

it('should open Column Picker from 2nd header column name and hide Duration which will hide Common Factor Group as well', () => {
const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven'];

cy.get('#grid18')
.find('.slick-header-column:nth(1) .slick-column-name')
.trigger('mouseover')
.trigger('contextmenu')
.invoke('show');

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children()
.each(($child, index) => {
if (index <= 5) {
expect($child.text()).to.eq(fullTitlesWithGroupNames[index]);
}
});

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children('li:nth-child(2)')
.children('label')
.should('contain', 'Duration')
.click();

cy.get('.slick-column-picker .close')
.click();
});

it('should expect headers to be without Title/Duration and pre-headers without Common Factor Group header titles', () => {
const preHeadersWithoutFactor = ['Period', 'Analysis'];
const titlesWithoutTitleDuration = ['Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];

// Column Pre-Headers without Common Factor group
cy.get('#grid18')
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(titlesWithoutTitleDuration[index]));

// Column Headers without Title & Duration
cy.get('#grid18')
.find('.slick-preheader-panel .slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(preHeadersWithoutFactor[index]));
});

it('should open Column Picker from Pre-Header column and show again Title column', () => {
const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven'];

cy.get('#grid18')
.find('.slick-preheader-panel .slick-header-column:nth(1)')
.trigger('mouseover')
.trigger('contextmenu')
.invoke('show');

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children()
.each(($child, index) => {
if (index <= 5) {
expect($child.text()).to.eq(fullTitlesWithGroupNames[index]);
}
});

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children('li:nth-child(1)')
.children('label')
.should('contain', 'Title')
.click();

// close picker & reopen from a pre-header column name instead
cy.get('.slick-column-picker .close')
.click();
});

it('should open Column Picker from Pre-Header column name and show again Duration column', () => {
const fullTitlesWithGroupNames = ['Common Factor - Title', 'Common Factor - Duration', 'Period - Start', 'Period - Finish', 'Analysis - Cost', 'Analysis - % Complete', 'Analysis - Effort-Driven'];

cy.get('#grid18')
.find('.slick-preheader-panel .slick-header-column:nth(1)')
.trigger('mouseover')
.trigger('contextmenu')
.invoke('show');

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children()
.each(($child, index) => {
if (index <= 5) {
expect($child.text()).to.eq(fullTitlesWithGroupNames[index]);
}
});

cy.get('.slick-column-picker')
.find('.slick-column-picker-list')
.children('li:nth-child(2)')
.children('label')
.should('contain', 'Duration')
.click();

cy.get('.slick-column-picker .close')
.click();
});

it('should expect header titles to show again Title/Duration and pre-headers with Common Factor Group header titles', () => {
const preHeadersWithFactor = ['Common Factor', 'Period', 'Analysis', ''];
const titlesWithTitleDuration = ['Title', 'Duration', 'Start', 'Finish', 'Cost', '% Complete', 'Effort-Driven'];

// Column Pre-Headers without Common Factor group
cy.get('#grid18')
.find('.slick-header:not(.slick-preheader-panel) .slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(titlesWithTitleDuration[index]));

// Column Headers without Title & Duration
cy.get('#grid18')
.find('.slick-preheader-panel .slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(preHeadersWithFactor[index]));
});
});
});
Loading

0 comments on commit c5d16e2

Please sign in to comment.