-
-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(footer): add Footer Totals Row and fix footer styling (#1576)
- this new demo was mainly doable before but this PR also includes CSS styling fixes for the footer totals to show up correctly including fixes for the Dark Mode as well
- Loading branch information
1 parent
4398f1d
commit 809903a
Showing
9 changed files
with
260 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
examples/vite-demo-vanilla-bundle/src/examples/example24.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <h3 class="title is-3"> | ||
| Example 24 - Footer Totals Row | ||
| <span class="subtitle">(with Salesforce Theme)</span> | ||
| <span class="d-inline-flex"> | ||
| <button class="button is-small" onclick.delegate="toggleDarkMode()" data-test="toggle-dark-mode"> | ||
| <span class="mdi mdi-theme-light-dark"></span> | ||
| <span> Toggle Light/Dark</span> | ||
| </button> | ||
| </span> | ||
|
|
||
| <div class="subtitle code-link"> | ||
| <span class="is-size-6">see</span> | ||
| <a class="is-size-5" target="_blank" | ||
| href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/vite-demo-vanilla-bundle/src/examples/example24.ts"> | ||
| <span class="mdi mdi-link-variant"></span> code | ||
| </a> | ||
| </div> | ||
| </h3> | ||
|
|
||
| <h6 class="title is-6 italic"> | ||
| Display a totals row at the end of the grid. | ||
| </h6> | ||
|
|
||
| <div class="grid24"> | ||
| </div> |
143 changes: 143 additions & 0 deletions
143
examples/vite-demo-vanilla-bundle/src/examples/example24.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| import { type Column, Editors, FieldType, type GridOption, SlickEventHandler, } from '@slickgrid-universal/common'; | ||
| import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle'; | ||
|
|
||
| import { ExampleGridOptions } from './example-grid-options'; | ||
| import { BindingEventService } from '@slickgrid-universal/binding'; | ||
|
|
||
| const NB_ITEMS = 100; | ||
|
|
||
| export default class Example20 { | ||
| private _bindingEventService: BindingEventService; | ||
| private _darkMode = false; | ||
| private _eventHandler: SlickEventHandler; | ||
|
|
||
| columnDefinitions: Column[] = []; | ||
| dataset: any[] = []; | ||
| gridOptions!: GridOption; | ||
| gridContainerElm: HTMLDivElement; | ||
| sgb: SlickVanillaGridBundle; | ||
|
|
||
| constructor() { | ||
| this._bindingEventService = new BindingEventService(); | ||
| } | ||
|
|
||
| attached() { | ||
| this._eventHandler = new SlickEventHandler(); | ||
|
|
||
| // define the grid options & columns and then create the grid itself | ||
| this.defineGrid(); | ||
|
|
||
| // mock some data (different in each dataset) | ||
| this.dataset = this.getData(NB_ITEMS); | ||
| this.gridContainerElm = document.querySelector<HTMLDivElement>('.grid24') as HTMLDivElement; | ||
|
|
||
| this.sgb = new Slicker.GridBundle(document.querySelector('.grid24') as HTMLDivElement, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset); | ||
| this.updateAllTotals(); | ||
|
|
||
| // bind any of the grid events | ||
| this._bindingEventService.bind(this.gridContainerElm, 'oncolumnsreordered', this.handleOnColumnsReordered.bind(this)); | ||
| this._bindingEventService.bind(this.gridContainerElm, 'oncellchange', this.handleOnCellChange.bind(this)); | ||
|
|
||
| document.body.classList.add('salesforce-theme'); | ||
| } | ||
|
|
||
| dispose() { | ||
| this._eventHandler.unsubscribeAll(); | ||
| this.sgb?.dispose(); | ||
| this.gridContainerElm.remove(); | ||
| document.querySelector('.demo-container')?.classList.remove('dark-mode'); | ||
| document.body.setAttribute('data-theme', 'light'); | ||
| } | ||
|
|
||
| /* Define grid Options and Columns */ | ||
| defineGrid() { | ||
| const columnDefs: Column[] = []; | ||
| for (let i = 0; i < 10; i++) { | ||
| columnDefs.push({ | ||
| id: i, | ||
| name: String.fromCharCode('A'.charCodeAt(0) + i), | ||
| field: String(i), | ||
| type: FieldType.number, | ||
| width: 58, | ||
| editor: { model: Editors.integer } | ||
| }); | ||
| } | ||
| this.columnDefinitions = columnDefs; | ||
|
|
||
| this.gridOptions = { | ||
| autoEdit: true, | ||
| autoCommitEdit: true, | ||
| editable: true, | ||
| darkMode: this._darkMode, | ||
| gridHeight: 450, | ||
| gridWidth: 800, | ||
| enableCellNavigation: true, | ||
| rowHeight: 33, | ||
| createFooterRow: true, | ||
| showFooterRow: true, | ||
| footerRowHeight: 35 | ||
| }; | ||
| } | ||
|
|
||
| getData(itemCount: number) { | ||
| // mock a dataset | ||
| const datasetTmp: any[] = []; | ||
| for (let i = 0; i < itemCount; i++) { | ||
| const d = (datasetTmp[i] = {} as any); | ||
| d.id = i; | ||
| for (let j = 0; j < this.columnDefinitions.length; j++) { | ||
| d[j] = Math.round(Math.random() * 10); | ||
| } | ||
| } | ||
|
|
||
| return datasetTmp; | ||
| } | ||
|
|
||
| handleOnCellChange(e) { | ||
| const args = e?.detail?.args; | ||
| this.updateTotal(args.cell); | ||
| } | ||
|
|
||
| handleOnColumnsReordered() { | ||
| this.updateAllTotals(); | ||
| } | ||
|
|
||
| toggleDarkMode() { | ||
| this._darkMode = !this._darkMode; | ||
| this.toggleBodyBackground(); | ||
| this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode }; | ||
| this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode }); | ||
| this.updateAllTotals(); | ||
| } | ||
|
|
||
| toggleBodyBackground() { | ||
| if (this._darkMode) { | ||
| document.body.setAttribute('data-theme', 'dark'); | ||
| document.querySelector('.demo-container')?.classList.add('dark-mode'); | ||
| } else { | ||
| document.body.setAttribute('data-theme', 'light'); | ||
| document.querySelector('.demo-container')?.classList.remove('dark-mode'); | ||
| } | ||
| } | ||
|
|
||
| updateAllTotals() { | ||
| let columnIdx = this.sgb.slickGrid?.getColumns().length || 0; | ||
| while (columnIdx--) { | ||
| this.updateTotal(columnIdx); | ||
| } | ||
| } | ||
|
|
||
| updateTotal(cell: number) { | ||
| const columnId = this.sgb.slickGrid?.getColumns()[cell].id as number; | ||
|
|
||
| let total = 0; | ||
| let i = this.dataset.length; | ||
| while (i--) { | ||
| total += (parseInt(this.dataset[i][columnId], 10) || 0); | ||
| } | ||
| const columnElement = this.sgb.slickGrid?.getFooterRowColumn(columnId); | ||
| if (columnElement) { | ||
| columnElement.textContent = `Sum: ${total}`; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -128,4 +128,7 @@ input.is-narrow { | |
| } | ||
| .justify-center { | ||
| justify-content: center; | ||
| } | ||
| .italic { | ||
| font-style: italic; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| describe('Example 24 - Footer Totals Row', () => { | ||
| const fullTitles = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; | ||
| const GRID_ROW_HEIGHT = 33; | ||
|
|
||
| it('should display Example title', () => { | ||
| cy.visit(`${Cypress.config('baseUrl')}/example24`); | ||
| cy.get('h3').should('contain', 'Example 24 - Footer Totals Row'); | ||
| cy.get('h3 span.subtitle').should('contain', '(with Salesforce Theme)'); | ||
| }); | ||
|
|
||
| it('should have exact Column Header Titles in the grid', () => { | ||
| cy.get('.grid24') | ||
| .find('.slick-header-columns:nth(0)') | ||
| .children() | ||
| .each(($child, index) => expect($child.text()).to.eq(fullTitles[index])); | ||
| }); | ||
|
|
||
| it('should have a total sum displayed in the footer for each column', () => { | ||
| for (let i = 0; i < 10; i++) { | ||
| cy.get(`.slick-footerrow-columns .slick-footerrow-column:nth(${i})`) | ||
| .should($span => { | ||
| const totalStr = $span.text(); | ||
| const totalVal = Number(totalStr.replace('Sum: ', '')); | ||
|
|
||
| expect(totalStr).to.contain('Sum:'); | ||
| expect(totalVal).to.gte(400); | ||
| }); | ||
|
|
||
| } | ||
| }); | ||
|
|
||
| it('should be able to increase cell value by a number of 5 and expect column sum to be increased by 5 as well', () => { | ||
| let cellVal = 0; | ||
| let totalVal = 0; | ||
| const increasingVal = 50; | ||
|
|
||
| cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`) | ||
| .should($span => { | ||
| cellVal = Number($span.text()); | ||
| expect(cellVal).to.gte(0); | ||
| }); | ||
| cy.get('.slick-footerrow-columns .slick-footerrow-column:nth(0)') | ||
| .should($span => { | ||
| totalVal = parseInt($span.text().replace('Sum: ', '')); | ||
| expect(totalVal).to.gte(400); | ||
| }); | ||
|
|
||
| cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).click(); | ||
| cy.get('.editor-0').type(`${increasingVal}{enter}`); | ||
| cy.wait(1); | ||
|
|
||
| cy.get('.slick-footerrow-columns .slick-footerrow-column:nth(0)') | ||
| .should($span => { | ||
| const newTotalVal = parseInt($span.text().replace('Sum: ', '')); | ||
| expect(newTotalVal).to.eq(totalVal - cellVal + increasingVal); | ||
| }); | ||
| }); | ||
| }); |