Skip to content

Commit

Permalink
fix(translations): HeaderMenu & Date Filters not translating (#58)
Browse files Browse the repository at this point in the history
* fix(translations): HeaderMenu & Date Filters not translating
  • Loading branch information
ghiscoding authored Aug 4, 2020
1 parent b4f277d commit 9416c4d
Show file tree
Hide file tree
Showing 18 changed files with 79 additions and 41 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,4 @@ dist-demo
**/test-report.xml
**/testresult.xml
**/test-results.xml
test/cypress/screenshots
10 changes: 5 additions & 5 deletions examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
Original file line number Diff line number Diff line change
Expand Up @@ -198,16 +198,16 @@ export class Example7 {

// you can dynamically add your column to your column definitions
// and then use the spread operator [...cols] OR slice to force the framework to review the changes
this.columnDefinitions.push(newCol);
this.sgb.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]
this.sgb.columnDefinitions.push(newCol);
this.sgb.columnDefinitions = this.sgb.columnDefinitions.slice(); // or use spread operator [...cols]

// NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
// you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
// for example if you use the Checkbox Selector (row selection), you MUST use the code below
/*
const allColumns = this.slickerGridInstance.gridService.getAllColumnDefinitions();
allColumns.push(newCol);
this.slickgridLwc.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for framework to do dirty checking
const allColumns = this.sgb.gridService.getAllColumnDefinitions();
allColumns.push(newCol);
this.sgb.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for framework to do dirty checking
*/
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export class Example10 {
id: 'gender', field: 'gender', nameKey: 'GENDER', filterable: true, sortable: true, width: 60, columnGroupKey: 'CUSTOMER_INFORMATION',
filter: {
model: Filters.singleSelect,
collection: [{ value: '', label: '' }, { value: 'male', label: 'Male', }, { value: 'female', label: 'Female', }]
collection: [{ value: '', label: '' }, { value: 'male', labelKey: 'MALE', }, { value: 'female', labelKey: 'FEMALE', }]
}
},
{
Expand Down
4 changes: 0 additions & 4 deletions packages/common/src/extensions/headerMenuExtension.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ declare const Slick: SlickNamespace;
export class HeaderMenuExtension implements Extension {
private _addon: SlickHeaderMenu | null;
private _eventHandler: SlickEventHandler;
private _locales: Locale;

constructor(
private extensionUtility: ExtensionUtility,
Expand Down Expand Up @@ -69,9 +68,6 @@ export class HeaderMenuExtension implements Extension {
}

if (this.sharedService && this.sharedService.slickGrid && this.sharedService.gridOptions) {
// get locales provided by user in main file or else use default English locales via the Constants
this._locales = this.sharedService.gridOptions && this.sharedService.gridOptions.locales || Constants.locales;

// dynamically import the SlickGrid plugin (addon) with RequireJS
this.extensionUtility.loadExtensionDynamically(ExtensionName.headerMenu);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ describe('AutoCompleteFilter', () => {
callback: jest.fn()
};

filter = new AutoCompleteFilter(collectionService);
filter = new AutoCompleteFilter(translaterService, collectionService);
});

afterEach(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ describe('SelectFilter', () => {
callback: jest.fn()
};

filter = new MultipleSelectFilter(collectionService, translateService);
filter = new MultipleSelectFilter(translateService, collectionService);
});

afterEach(() => {
Expand All @@ -65,7 +65,7 @@ describe('SelectFilter', () => {

it('should be a multiple-select filter', () => {
mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
filter = new MultipleSelectFilter(collectionService, translateService);
filter = new MultipleSelectFilter(translateService, collectionService);
filter.init(filterArguments);
const filterCount = divContainer.querySelectorAll('select.ms-filter.search-filter.filter-gender').length;

Expand Down
6 changes: 3 additions & 3 deletions packages/common/src/filters/__tests__/selectFilter.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('SelectFilter', () => {
callback: jest.fn()
};

filter = new SelectFilter(collectionService, translateService);
filter = new SelectFilter(translateService, collectionService);
});

afterEach(() => {
Expand Down Expand Up @@ -108,7 +108,7 @@ describe('SelectFilter', () => {
translateService = undefined;
mockColumn.filter.enableTranslateLabel = true;
mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
filter = new SelectFilter(collectionService, translateService);
filter = new SelectFilter(translateService, collectionService);
filter.init(filterArguments);
} catch (e) {
expect(e.toString()).toContain(`[select-filter] The Translate Service is required for the Select Filter to work correctly when "enableTranslateLabel" is set.`);
Expand All @@ -127,7 +127,7 @@ describe('SelectFilter', () => {

it('should be a multiple-select filter by default when it is not specified in the constructor', () => {
mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
filter = new SelectFilter(collectionService, translateService);
filter = new SelectFilter(translateService, collectionService);
filter.init(filterArguments);
const filterCount = divContainer.querySelectorAll('select.ms-filter.search-filter.filter-gender').length;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('SelectFilter', () => {
callback: jest.fn()
};

filter = new SelectFilter(collectionServiceStub, translateService);
filter = new SelectFilter(translateService, collectionServiceStub);
});

afterEach(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ describe('SelectFilter', () => {
callback: jest.fn()
};

filter = new SingleSelectFilter(collectionService, translateService);
filter = new SingleSelectFilter(translateService, collectionService);
});

afterEach(() => {
Expand All @@ -67,7 +67,7 @@ describe('SelectFilter', () => {

it('should be a single-select filter', () => {
mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
filter = new SingleSelectFilter(collectionService, translateService);
filter = new SingleSelectFilter(translateService, collectionService);
filter.init(filterArguments);
const filterCount = divContainer.querySelectorAll('select.ms-filter.search-filter.filter-gender').length;

Expand Down
3 changes: 2 additions & 1 deletion packages/common/src/filters/autoCompleteFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
} from './../interfaces/index';
import { CollectionService } from '../services/collection.service';
import { getDescendantProperty } from '../services/utilities';
import { TranslaterService } from '../services/translater.service';

export class AutoCompleteFilter implements Filter {
private _autoCompleteOptions: AutocompleteOption;
Expand Down Expand Up @@ -50,7 +51,7 @@ export class AutoCompleteFilter implements Filter {
/**
* Initialize the Filter
*/
constructor(protected collectionService: CollectionService) { }
constructor(protected translaterService: TranslaterService, protected collectionService: CollectionService) { }

/** Getter for the Autocomplete Option */
get autoCompleteOptions(): Partial<AutocompleteOption> {
Expand Down
8 changes: 2 additions & 6 deletions packages/common/src/filters/compoundDateFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,8 @@ export class CompoundDateFilter implements Filter {

// step 3, subscribe to the keyup event and run the callback when that happens
// also add/remove "filled" class for styling purposes
this.$filterInputElm.keyup((e: any) => {
this.onTriggerEvent(e);
});
this.$selectOperatorElm.change((e: any) => {
this.onTriggerEvent(e);
});
this.$filterInputElm.keyup((event: Event) => this.onTriggerEvent(event));
this.$selectOperatorElm.change((event: Event) => this.onTriggerEvent(event));
}

/**
Expand Down
6 changes: 2 additions & 4 deletions packages/common/src/filters/dateRangeFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,7 @@ export class DateRangeFilter implements Filter {

// step 3, subscribe to the keyup event and run the callback when that happens
// also add/remove "filled" class for styling purposes
this.$filterInputElm.keyup((e: any) => {
this.onTriggerEvent(e);
});
this.$filterInputElm.keyup((e: Event) => this.onTriggerEvent(e));

}

Expand Down Expand Up @@ -198,7 +196,7 @@ export class DateRangeFilter implements Filter {
wrap: true,
closeOnSelect: true,
locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en',
onChange: (selectedDates: Date[] | Date, dateStr: string, instance: any) => {
onChange: (selectedDates: Date[] | Date, _dateStr: string, _instance: any) => {
if (Array.isArray(selectedDates)) {
this._currentDates = selectedDates;
const outFormat = mapMomentDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateIso);
Expand Down
6 changes: 3 additions & 3 deletions packages/common/src/filters/filterFactory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export class FilterFactory {
*/
private _options: any;

constructor(private config: SlickgridConfig, private collectionService: CollectionService, private translaterService?: TranslaterService) {
constructor(private config: SlickgridConfig, private translaterService?: TranslaterService, private collectionService?: CollectionService) {
this._options = this.config.options;
}

Expand All @@ -18,12 +18,12 @@ export class FilterFactory {
let filter: Filter | undefined;

if (columnFilter && columnFilter.model) {
filter = typeof columnFilter.model === 'function' ? new columnFilter.model(this.collectionService, this.translaterService) : columnFilter.model;
filter = typeof columnFilter.model === 'function' ? new columnFilter.model(this.translaterService, this.collectionService) : columnFilter.model;
}

// fallback to the default filter
if (!filter && this._options.defaultFilter) {
filter = new this._options.defaultFilter(this.collectionService, this.translaterService);
filter = new this._options.defaultFilter(this.translaterService, this.collectionService);
}

return filter;
Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/filters/multipleSelectFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export class MultipleSelectFilter extends SelectFilter {
/**
* Initialize the Filter
*/
constructor(protected collectionService: CollectionService, protected translaterService: TranslaterService) {
super(collectionService, translaterService, true);
constructor(protected translaterService: TranslaterService, protected collectionService: CollectionService) {
super(translaterService, collectionService, true);
}
}
2 changes: 1 addition & 1 deletion packages/common/src/filters/selectFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class SelectFilter implements Filter {
/**
* Initialize the Filter
*/
constructor(protected collectionService: CollectionService, protected translaterService: TranslaterService, isMultipleSelect = true) {
constructor(protected translaterService: TranslaterService, protected collectionService: CollectionService, isMultipleSelect = true) {
this._isMultipleSelect = isMultipleSelect;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/common/src/filters/singleSelectFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export class SingleSelectFilter extends SelectFilter {
/**
* Initialize the Filter
*/
constructor(protected collectionService: CollectionService, protected translaterService: TranslaterService) {
super(collectionService, translaterService, false);
constructor(protected translaterService: TranslaterService, protected collectionService: CollectionService) {
super(translaterService, collectionService, false);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ export class SlickVanillaGridBundle {
this.sharedService = new SharedService();
this.collectionService = new CollectionService(this.translaterService);
this.extensionUtility = new ExtensionUtility(this.sharedService, this.translaterService);
const filterFactory = new FilterFactory(slickgridConfig, this.collectionService, this.translaterService);
const filterFactory = new FilterFactory(slickgridConfig, this.translaterService, this.collectionService);
this.filterService = new FilterService(filterFactory, this._eventPubSubService, this.sharedService);
this.resizerService = new ResizerService(this._eventPubSubService);
this.sortService = new SortService(this.sharedService, this._eventPubSubService);
Expand Down Expand Up @@ -380,11 +380,18 @@ export class SlickVanillaGridBundle {
this.dataView = new Slick.Data.DataView(dataViewOptions);
this._eventPubSubService.publish('onDataviewCreated', this.dataView);
}

// for convenience to the user, we provide the property "editor" as an Angular-Slickgrid editor complex object
// however "editor" is used internally by SlickGrid for it's own Editor Factory
// so in our lib we will swap "editor" and copy it into a new property called "internalColumnEditor"
// then take back "editor.model" and make it the new "editor" so that SlickGrid Editor Factory still works
this._columnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(this._columnDefinitions);

// save reference for all columns before they optionally become hidden/visible
this.sharedService.allColumns = this._columnDefinitions;
this.sharedService.visibleColumns = this._columnDefinitions;
this.extensionService.createExtensionsBeforeGridCreation(this._columnDefinitions, this._gridOptions);

this._columnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(this._columnDefinitions);
this.slickGrid = new Slick.Grid(gridContainerElm, this.dataView, this._columnDefinitions, this._gridOptions);
this.sharedService.dataView = this.dataView;
this.sharedService.slickGrid = this.slickGrid;
Expand Down Expand Up @@ -935,6 +942,7 @@ export class SlickVanillaGridBundle {
updateColumnDefinitionsList(newColumnDefinitions: Column[]) {
// map/swap the internal library Editor to the SlickGrid Editor factory
newColumnDefinitions = this.swapInternalEditorToSlickGridFactoryEditor(newColumnDefinitions);

if (this._gridOptions.enableTranslate) {
this.extensionService.translateColumnHeaders(false, newColumnDefinitions);
} else {
Expand Down Expand Up @@ -1115,7 +1123,9 @@ export class SlickVanillaGridBundle {
if (column.editor?.collectionAsync) {
this.loadEditorCollectionAsync(column);
}
const columnEditor = column.editor as ColumnEditor;

// if there's already an internalColumnEditor we'll use it, else it would be inside the editor
const columnEditor = column.internalColumnEditor || column.editor as ColumnEditor;

return { ...column, editor: columnEditor?.model, internalColumnEditor: { ...columnEditor } };
});
Expand Down
36 changes: 36 additions & 0 deletions test/cypress/integration/example10.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ describe('Example 10 - GraphQL Grid', () => {
.should('have.css', 'height', '275px');
});

it('should have English Text inside some of the Filters', () => {
cy.get('.search-filter.filter-gender .ms-choice > span')
.contains('Male');

cy.get('.flatpickr-input')
.should('contain.value', 'to'); // date range will contains (y to z) or in French (y au z)
});

it('should have GraphQL query with defined Grid Presets', () => {
cy.get('.search-filter.filter-name select')
.should('not.have.value');
Expand Down Expand Up @@ -414,5 +422,33 @@ describe('Example 10 - GraphQL Grid', () => {
.children()
.each(($child, index) => expect($child.text()).to.eq(expectedGroupTitles[index]));
});

it('should have French Text inside some of the Filters', () => {
cy.get('.search-filter.filter-gender .ms-choice > span')
.contains('Masculin');

cy.get('.flatpickr-input')
.should('contain.value', 'au'); // date range will contains (y to z) or in French (y au z)
});

it('should display Pagination in French', () => {
cy.get('.text-item-per-page')
.contains('éléments par page');

cy.get('.text-of')
.contains('de');

cy.get('.item-from')
.contains('1');

cy.get('.item-to')
.contains('30');

cy.get('.total-items')
.contains('100');

cy.get('.text-items')
.contains('éléments');
});
});
});

0 comments on commit 9416c4d

Please sign in to comment.