Skip to content

Commit

Permalink
fix(footer): add correct implementation of locale usage in custom footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Apr 26, 2021
1 parent de8fbcc commit 5dcac2f
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 29 deletions.
57 changes: 57 additions & 0 deletions src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ const treeDataServiceStub = {
describe('App Component', () => {
let fixture: ComponentFixture<AngularSlickgridComponent>;
let component: AngularSlickgridComponent;
let translate: TranslateService;

beforeEach(waitForAsync(() => {
// @ts-ignore
Expand Down Expand Up @@ -191,6 +192,24 @@ describe('App Component', () => {
// create the component
fixture = TestBed.createComponent(AngularSlickgridComponent);
component = fixture.debugElement.componentInstance;
translate = TestBed.inject(TranslateService);

translate.setTranslation('fr', {
ITEMS: 'éléments',
ITEMS_PER_PAGE: 'éléments par page',
ITEMS_SELECTED: 'éléments sélectionnés',
OF: 'de',
PAGE: 'Page',
PAGE_X_OF_Y: 'page {{x}} de {{y}}',
});
translate.setTranslation('en', {
ITEMS: 'items',
ITEMS_PER_PAGE: 'items per page',
ITEMS_SELECTED: 'items selected',
OF: 'of',
PAGE: 'Page',
PAGE_X_OF_Y: 'page {{x}} of {{y}}',
});

// setup bindable properties
component.gridId = 'grid1';
Expand Down Expand Up @@ -347,6 +366,44 @@ describe('App Component', () => {
expect(leftFooterElm.innerHTML).toContain('1 items selected');
});

it('should display row selection count in French on the left side footer section after triggering "onSelectedRowsChanged" event when using "fr" as locale', () => {
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];

translate.use('fr');
component.gridOptions = {
enablePagination: false,
enableTranslate: true,
showCustomFooter: true,
enableCheckboxSelector: true,
} as GridOption;
fixture.detectChanges();
component.columnDefinitions = mockColDefs;
component.grid.setSelectionModel(new Slick.CellSelectionModel());
component.grid.onSelectedRowsChanged.notify({ rows: [1], previousSelectedRows: [] });
fixture.detectChanges();

const gridContainerElm = document.querySelector('.slickgrid-container') as HTMLDivElement;
const gridPaneElm = document.querySelector('.gridPane') as HTMLDivElement;
const footerContainerElm = document.querySelector('div.slick-custom-footer') as HTMLDivElement;
let leftFooterElm = document.querySelector('div.slick-custom-footer > div.left-footer') as HTMLSpanElement;
const rightFooterElm = document.querySelector('div.slick-custom-footer > div.metrics') as HTMLSpanElement;

expect(gridPaneElm.id).toBe('slickGridContainer-grid1');
expect(gridContainerElm.id).toBe('grid1');
expect(footerContainerElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm).toBeTruthy();
expect(component.gridOptions.customFooterOptions!.leftFooterText).toBe('1 éléments sélectionnés');
expect(leftFooterElm.innerHTML).toContain('1 éléments sélectionnés');

component.grid.onSelectedRowsChanged.notify({ rows: [1, 2, 3, 4, 5], previousSelectedRows: [] });
fixture.detectChanges();
leftFooterElm = document.querySelector('div.slick-custom-footer > div.left-footer') as HTMLSpanElement;

expect(component.gridOptions.customFooterOptions!.leftFooterText).toBe('5 éléments sélectionnés');
expect(leftFooterElm.innerHTML).toContain('5 éléments sélectionnés');
});

it('should not not display row selection count after triggering "onSelectedRowsChanged" event when "hideRowSelectionCount" is set to True', () => {
const mockColDefs = [{ id: 'name', field: 'name', editor: undefined, internalColumnEditor: {} }];

Expand Down
2 changes: 1 addition & 1 deletion src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
*ngIf="metrics && !customFooterOptions.hideMetrics">
<span *ngIf="!customFooterOptions.hideLastUpdateTimestamp">
<span>{{customFooterOptions.metricTexts?.lastUpdate}}</span>

{{metrics.endTime | date: customFooterOptions.dateFormat}}
<span class="separator">{{customFooterOptions.metricSeparator}}</span>
</span>
Expand All @@ -28,3 +27,4 @@
</div>
</div>
</div>

26 changes: 20 additions & 6 deletions src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,12 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
private _hideHeaderRowAfterPageLoad = false;
private _isGridInitialized = false;
private _isDatasetInitialized = false;
private _isLeftFooterOriginallyEmpty = false;
private _isLeftFooterDisplayingSelectionRowCount = false;
private _isPaginationInitialized = false;
private _isLocalGrid = true;
private _paginationOptions: Pagination | undefined;
private _selectedRowCount = 0;
private slickEmptyWarning: SlickEmptyWarningComponent;
dataView: any | null;
grid: any | null;
Expand Down Expand Up @@ -846,10 +849,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
this._dataset = this._dataset || [];
this.gridOptions = this.mergeGridOptions(this.gridOptions);
this._paginationOptions = this.gridOptions.pagination;
this.locales = this.gridOptions && this.gridOptions.locales || Constants.locales;
this.backendServiceApi = this.gridOptions && this.gridOptions.backendServiceApi;
this.locales = this.gridOptions?.locales ?? Constants.locales;
this.backendServiceApi = this.gridOptions?.backendServiceApi;
this.createBackendApiInternalPostProcessCallback(this.gridOptions);
this._isLocalGrid = !this.backendServiceApi; // considered a local grid if it doesn't have a backend service set
this._isLeftFooterOriginallyEmpty = !(this.gridOptions.customFooterOptions?.leftFooterText);

if (!this.customDataView) {
const dataviewInlineFilters = this.gridOptions.dataView && this.gridOptions.dataView.inlineFilters || false;
Expand Down Expand Up @@ -1171,10 +1175,12 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
*/
private optionallyShowCustomFooterWithMetrics() {
if (this.gridOptions) {
const customFooterOptions = this.gridOptions.customFooterOptions;
this.registerOnSelectedRowsChangedWhenEnabled(customFooterOptions);

if (this.gridOptions.enableTranslate) {
this.translateCustomFooterTexts();
} else if (this.gridOptions.customFooterOptions) {
const customFooterOptions = this.gridOptions.customFooterOptions;
} else if (customFooterOptions) {
customFooterOptions.metricTexts = customFooterOptions.metricTexts || {};
customFooterOptions.metricTexts.lastUpdate = customFooterOptions.metricTexts.lastUpdate || this.locales && this.locales.TEXT_LAST_UPDATE || 'TEXT_LAST_UPDATE';
customFooterOptions.metricTexts.items = customFooterOptions.metricTexts.items || this.locales && this.locales.TEXT_ITEMS || 'TEXT_ITEMS';
Expand All @@ -1199,12 +1205,15 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
*/
private registerOnSelectedRowsChangedWhenEnabled(customFooterOptions?: CustomFooterOption) {
const isRowSelectionEnabled = this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection;
if (isRowSelectionEnabled && customFooterOptions && (!customFooterOptions.hideRowSelectionCount && !customFooterOptions.leftFooterText)) {
if (isRowSelectionEnabled && customFooterOptions && (!customFooterOptions.hideRowSelectionCount && this._isLeftFooterOriginallyEmpty)) {
this._isLeftFooterDisplayingSelectionRowCount = true;
const selectedCountText = customFooterOptions.metricTexts?.itemsSelected ?? this.locales?.TEXT_ITEMS_SELECTED ?? 'TEXT_ITEMS_SELECTED';
customFooterOptions.leftFooterText = `0 ${selectedCountText}`;

this._eventHandler.subscribe(this.grid.onSelectedRowsChanged, (_e: any, args: { rows: number[]; previousSelectedRows: number[]; }) => {
customFooterOptions.leftFooterText = `${args.rows.length || 0} ${selectedCountText}`;
this._selectedRowCount = args.rows.length;
const selectedCountText2 = customFooterOptions.metricTexts?.itemsSelected ?? this.locales?.TEXT_ITEMS_SELECTED ?? 'TEXT_ITEMS_SELECTED';
customFooterOptions.leftFooterText = `${this._selectedRowCount} ${selectedCountText2}`;
});
}
}
Expand Down Expand Up @@ -1247,6 +1256,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
(customFooterOptions.metricTexts as any)[propNameWithoutKey] = this.translate.instant((customFooterOptions.metricTexts as any)[propName] || ' ');
}
}

// when we're display row selection count on left footer, we also need to translate that text with its count
if (this._isLeftFooterDisplayingSelectionRowCount) {
customFooterOptions.leftFooterText = `${this._selectedRowCount} ${customFooterOptions.metricTexts!.itemsSelected}`;
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/app/modules/angular-slickgrid/global-grid-options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ export const GlobalGridOptions: Partial<GridOption> = {
metricTexts: {
items: 'items',
itemsKey: 'ITEMS',
itemsSelected: 'items selected',
itemsSelectedKey: 'ITEMS_SELECTED',
of: 'of',
ofKey: 'OF',
itemsSelected: 'items selected',
itemsSelectedKey: 'ITEMS_SELECTED'
}
},
dataView: {
Expand Down
70 changes: 50 additions & 20 deletions test/cypress/integration/example12.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,28 @@ describe('Example 12: Localization (i18n)', () => {
.each(($child, index) => expect($child.text()).to.eq(fullEnglishTitles[index]));
});

it('should have 0 row selection count shown in the grid left footer', () => {
cy.get('#slickGridContainer-grid12')
.find('.slick-custom-footer')
.find('div.left-footer')
.should($span => {
const text = removeExtraSpaces($span.text()); // remove all white spaces
expect(text).to.eq(`0 items selected`);
});
});

it('should have some metrics shown in the grid right footer', () => {
cy.get('#slickGridContainer-grid12')
.find('.slick-custom-footer')
.find('.right-footer')
.should($span => {
const text = removeExtraSpaces($span.text()); // remove all white spaces
const now = new Date();
const dateFormatted = moment(now).format('YYYY-MM-DD, hh:mm a');
expect(text).to.eq(`Last Update ${dateFormatted} | 1500 of 1500 items`);
});
});

it('should filter certain tasks with the word "ask 1" and expect filter to use contain/include text', () => {
const tasks = ['Task 1', 'Task 10', 'Task 11', 'Task 12'];

Expand All @@ -62,7 +84,7 @@ describe('Example 12: Localization (i18n)', () => {
it('should reset filters and switch locale to French', () => {
cy.get('#grid12')
.find('button.slick-gridmenu-button')
.trigger('click');
.click();

cy.get(`.slick-gridmenu:visible`)
.find('.slick-gridmenu-item')
Expand All @@ -85,14 +107,25 @@ describe('Example 12: Localization (i18n)', () => {
.each(($child, index) => expect($child.text()).to.eq(fullFrenchTitles[index]));
});

it('should have some metrics shown in the grid footer', () => {
it('should have 0 row selection count shown in the grid left footer', () => {
cy.get('#slickGridContainer-grid12')
.find('.slick-custom-footer')
.find('div.left-footer')
.should($span => {
const text = removeExtraSpaces($span.text()); // remove all white spaces
expect(text).to.eq(`0 éléments sélectionnés`);
});
});

it('should have some metrics shown in the grid right footer', () => {
cy.get('#slickGridContainer-grid12')
.find('.slick-custom-footer')
.find('.right-footer')
.should($span => {
const dateTime = moment().format('YYYY-MM-DD, hh:mm a');
const now = new Date();
const text = removeExtraSpaces($span.text()); // remove all white spaces
expect(text).to.eq(`Dernière mise à jour ${dateTime} | 1500 de 1500 éléments`);
const dateFormatted = moment(now).format('YYYY-MM-DD, hh:mm a');
expect(text).to.eq(`Dernière mise à jour ${dateFormatted} | 1500 de 1500 éléments`);
});
});

Expand Down Expand Up @@ -120,7 +153,7 @@ describe('Example 12: Localization (i18n)', () => {
it('should reset filters before filtering duration', () => {
cy.get('#grid12')
.find('button.slick-gridmenu-button')
.trigger('click');
.click();

cy.get(`.slick-gridmenu:visible`)
.find('.slick-gridmenu-item')
Expand Down Expand Up @@ -175,7 +208,7 @@ describe('Example 12: Localization (i18n)', () => {

cy.get('#grid12')
.find('button.slick-gridmenu-button')
.trigger('click');
.click();

cy.get(`.slick-gridmenu:visible`)
.find('.slick-gridmenu-item')
Expand Down Expand Up @@ -267,19 +300,6 @@ describe('Example 12: Localization (i18n)', () => {
.contains('Task 4');
});

it('should have some metrics shown in the grid footer', () => {
const now = new Date();

cy.get('#slickGridContainer-grid12')
.find('.slick-custom-footer')
.find('.right-footer')
.should($span => {
const dateTime = moment().format('YYYY-MM-DD, hh:mm a');
const text = removeExtraSpaces($span.text()); // remove all white spaces
expect(text).to.eq(`Last Update ${dateTime} | 447 of 1500 items`);
});
});

it('should scroll back to the top and expect to see "Task 1497" still selected', () => {
cy.get('#slickGridContainer-grid12').as('grid12');

Expand All @@ -290,7 +310,7 @@ describe('Example 12: Localization (i18n)', () => {
cy.get('@grid12')
.find('.slick-viewport-top.slick-viewport-left')
.scrollTo('top')
.wait(25);
.wait(10);

cy.get('@grid12')
.find('.slick-row')
Expand All @@ -304,5 +324,15 @@ describe('Example 12: Localization (i18n)', () => {
.filter('.slick-cell.selected.true:nth(1)')
.contains('Task 1497');
});

it('should have 2 row selection count shown in the grid left footer', () => {
cy.get('#slickGridContainer-grid12')
.find('.slick-custom-footer')
.find('div.left-footer')
.should($span => {
const text = removeExtraSpaces($span.text()); // remove all white spaces
expect(text).to.eq(`2 items selected`);
});
});
});
});

0 comments on commit 5dcac2f

Please sign in to comment.