Skip to content

Commit

Permalink
fix(footer): add correct implemtation of locale usage in custom footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Apr 24, 2021
1 parent 9c30b69 commit 6e18bf9
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 49 deletions.
8 changes: 8 additions & 0 deletions examples/webpack-demo-vanilla-bundle/src/examples/example07.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,14 @@ <h3 class="title is-3">
<span class="icon mdi mdi-close"></span>
<span>Clear Filters</span>
</button>
<span style="margin-left: 20px">
<button class="button is-small" onclick.delegate="switchLanguage()" data-test="language-button">
Switch Language
</button>
<b>Locale:</b>
<span style="font-style: italic" data-test="selected-locale" innerhtml.bind="selectedLanguageFile">
</span>
</span>
</div>

<br />
Expand Down
32 changes: 25 additions & 7 deletions examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
} from '@slickgrid-universal/common';
import { ExcelExportService } from '@slickgrid-universal/excel-export';
import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
import { TranslateService } from '../translate.service';

import { ExampleGridOptions } from './example-grid-options';

Expand All @@ -20,9 +21,17 @@ export class Example7 {
dataset: any[];
sgb: SlickVanillaGridBundle;
duplicateTitleHeaderCount = 1;
selectedLanguage: string;
selectedLanguageFile: string;
translateService: TranslateService;

constructor() {
this._bindingEventService = new BindingEventService();
// get the Translate Service from the window object,
// it might be better with proper Dependency Injection but this project doesn't have any at this point
this.translateService = (<any>window).TranslateService;
this.selectedLanguage = this.translateService.getCurrentLanguage();
this.selectedLanguageFile = `${this.selectedLanguage}.json`;
}

attached() {
Expand All @@ -42,31 +51,31 @@ export class Example7 {
initializeGrid() {
this.columnDefinitions = [
{
id: 'title', name: 'Title', field: 'title', filterable: true, editor: { model: Editors.longText, required: true, alwaysSaveOnEnterKey: true },
id: 'title', nameKey: 'TITLE', field: 'title', filterable: true, editor: { model: Editors.longText, required: true, alwaysSaveOnEnterKey: true },
},
{
id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
id: 'duration', nameKey: 'DURATION', field: 'duration', sortable: true, filterable: true,
type: 'number', editor: { model: Editors.text, alwaysSaveOnEnterKey: true, },
formatter: (_row: number, _cell: number, value: any) => value > 1 ? `${value} days` : `${value} day`,
},
{
id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: 'number',
id: 'percentComplete', nameKey: 'PERCENT_COMPLETE', field: 'percentComplete', type: 'number',
filterable: true, sortable: true, editor: { model: Editors.slider, minValue: 0, maxValue: 100, },
},
{
id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso,
id: 'start', nameKey: 'START', field: 'start', formatter: Formatters.dateIso,
filterable: true, sortable: true,
filter: { model: Filters.compoundDate },
editor: { model: Editors.date }, type: FieldType.date,/* outputType: FieldType.dateUs, */ saveOutputType: FieldType.dateUtc,
},
{
id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso,
id: 'finish', nameKey: 'FINISH', field: 'finish', formatter: Formatters.dateIso,
filterable: true, sortable: true,
filter: { model: Filters.compoundDate },
editor: { model: Editors.date }, type: FieldType.dateIso, saveOutputType: FieldType.dateUtc,
},
{
id: 'effort-driven', name: 'Completed', field: 'effortDriven', formatter: Formatters.checkmarkMaterial,
id: 'effort-driven', nameKey: 'COMPLETED', field: 'effortDriven', formatter: Formatters.checkmarkMaterial,
filterable: true, sortable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
Expand Down Expand Up @@ -177,6 +186,8 @@ export class Example7 {
sanitizeDataExport: true
},
enableFiltering: true,
enableTranslate: true,
translater: this.translateService, // pass the TranslateService instance to the grid
registerExternalResources: [new ExcelExportService()],
enableCellNavigation: true,
enableCheckboxSelector: true,
Expand Down Expand Up @@ -338,10 +349,17 @@ export class Example7 {
}
}

async switchLanguage() {
const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
await this.translateService.use(nextLanguage);
this.selectedLanguage = nextLanguage;
this.selectedLanguageFile = `${this.selectedLanguage}.json`;
}

dynamicallyAddTitleHeader() {
const newCol = {
id: `title${this.duplicateTitleHeaderCount++}`,
name: 'Title',
nameKey: 'TITLE',
field: 'title',
editor: {
model: Editors.text,
Expand Down
87 changes: 63 additions & 24 deletions packages/vanilla-bundle/src/components/__tests__/slick-footer.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,11 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"><span><span class="last-update">some last update 2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span> some of </span><span class="total-count">99</span><span> some items </span>
<span class="timestamp"><span><span class="text-last-update">some last update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span>
<span class="separator"> | </span></span></span>
<span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
</div>`));
});

Expand All @@ -130,10 +131,10 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"></span>
<span class="item-count">7</span><span> some of </span><span class="total-count">99</span><span> some items </span>
<span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
</div>`));
});

Expand All @@ -154,10 +155,10 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"></span>
<span class="item-count">7</span><span> some items </span>
<span class="item-count">7</span><span class="text-items">some items</span>
</div>`));
});

Expand All @@ -176,10 +177,11 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"><span><span class="last-update">Last Update 2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span> of </span><span class="total-count">99</span><span> items </span>
<span class="timestamp"><span><span class="text-last-update">Last Update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span>
<span class="separator"> | </span></span></span>
<span class="item-count">7</span><span class="text-of">of</span><span class="total-count">99</span><span class="text-items">items</span>
</div>`));
});

Expand All @@ -200,10 +202,10 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"><span><span class="last-update">Dernière mise à jour 2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span> de </span><span class="total-count">99</span><span> éléments </span>
<span class="timestamp"><span><span class="text-last-update">Dernière mise à jour</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span class="text-of">de</span><span class="total-count">99</span><span class="text-items">éléments</span>
</div>`));
});

Expand All @@ -223,10 +225,10 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('custom left footer text');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"><span><span class="last-update">some last update 2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span> some of </span><span class="total-count">99</span><span> some items </span>
<span class="timestamp"><span><span class="text-last-update">some last update</span><span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
</div>`));
});

Expand All @@ -246,10 +248,11 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('1 items selected');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"><span><span class="last-update">some last update 2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span> some of </span><span class="total-count">99</span><span> some items </span>
<span class="timestamp"><span><span class="text-last-update">some last update</span>
<span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
</div>`));

gridStub.onSelectedRowsChanged.notify({ rows: [1, 2, 3, 4, 5], grid: gridStub, previousSelectedRows: [] });
Expand All @@ -273,11 +276,47 @@ describe('Slick-Footer Component', () => {
expect(leftFooterElm).toBeTruthy();
expect(rightFooterElm).toBeTruthy();
expect(leftFooterElm.innerHTML).toBe('');
expect(rightFooterElm.innerHTML).toBe(removeExtraSpaces(
`<div class="right-footer metrics ">
<span class="timestamp"><span><span class="last-update">some last update 2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span> some of </span><span class="total-count">99</span><span> some items </span>
</div>`));
expect(removeExtraSpaces(rightFooterElm.innerHTML)).toBe(removeExtraSpaces(
`<div class="right-footer metrics "><span class="timestamp"><span><span class="text-last-update">some last update</span>
<span class="last-update-timestamp">2019-05-03, 12:00:01am</span><span class="separator"> | </span></span></span>
<span class="item-count">7</span><span class="text-of">some of</span><span class="total-count">99</span><span class="text-items">some items</span>
</div>`));
});

it('should display row selection count on the left side footer section after triggering "onSelectedRowsChanged" event', () => {
mockGridOptions.enableCheckboxSelector = true;
component = new SlickFooterComponent(gridStub, mockGridOptions.customFooterOptions as CustomFooterOption, translateService);
component.renderFooter(div);
gridStub.onSelectedRowsChanged.notify({ rows: [1], previousSelectedRows: [], grid: gridStub, });

expect(component).toBeTruthy();
expect(component.leftFooterText).toEqual('1 items selected');

gridStub.onSelectedRowsChanged.notify({ rows: [1, 2, 3, 4, 5], previousSelectedRows: [], grid: gridStub, });
expect(component.leftFooterText).toEqual('5 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', () => {
translateService.use('fr');
(mockGridOptions.customFooterOptions as CustomFooterOption).metricTexts = { itemsKey: 'ITEMS', itemsSelectedKey: 'ITEMS_SELECTED', lastUpdateKey: 'LAST_UPDATE', ofKey: 'OF' };
mockGridOptions.enableTranslate = true;
mockGridOptions.enableCheckboxSelector = true;
component = new SlickFooterComponent(gridStub, mockGridOptions.customFooterOptions as CustomFooterOption, translateService);
component.renderFooter(div);

gridStub.onSelectedRowsChanged.notify({ rows: [1], previousSelectedRows: [], grid: gridStub, });
expect(component.leftFooterText).toEqual('1 éléments sélectionnés');

gridStub.onSelectedRowsChanged.notify({ rows: [1, 2, 3, 4, 5], previousSelectedRows: [], grid: gridStub, });
expect(component.leftFooterText).toEqual('5 éléments sélectionnés');
});

it('should not display row selection count after triggering "onSelectedRowsChanged" event if "hideRowSelectionCount" is set to True', () => {
mockGridOptions.enableCheckboxSelector = true;
mockGridOptions.customFooterOptions.hideRowSelectionCount = true;
component.renderFooter(div);
gridStub.onSelectedRowsChanged.notify({ rows: [1], previousSelectedRows: [], grid: gridStub, });
expect(component.leftFooterText).toBe('0 items selected');
});
});
});
4 changes: 3 additions & 1 deletion packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1370,8 +1370,9 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
const transGroupingColSpanSpy = jest.spyOn(groupingAndColspanServiceStub, 'translateGroupingAndColSpan');
const setHeaderRowSpy = jest.spyOn(mockGrid, 'setHeaderRowVisibility');

component.gridOptions = { enableTranslate: true, createPreHeaderPanel: false, enableDraggableGrouping: false } as unknown as GridOption;
component.gridOptions = { enableTranslate: true, createPreHeaderPanel: false, enableDraggableGrouping: false, showCustomFooter: true } as unknown as GridOption;
component.initialization(divContainer, slickEventHandler);
const transCustomFooterSpy = jest.spyOn(component.slickFooter, 'translateCustomFooterTexts'); // footer gets created after init

eventPubSubService.publish('onLanguageChange', { language: 'fr' });

Expand All @@ -1384,6 +1385,7 @@ describe('Slick-Vanilla-Grid-Bundle Component instantiated via Constructor', ()
expect(transContextMenuSpy).toHaveBeenCalled();
expect(transGridMenuSpy).toHaveBeenCalled();
expect(transHeaderMenuSpy).toHaveBeenCalled();
expect(transCustomFooterSpy).toHaveBeenCalled();
done();
});
});
Expand Down
Loading

0 comments on commit 6e18bf9

Please sign in to comment.