fix(translations): HeaderMenu & Date Filters not translating (#58)

* fix(translations): HeaderMenu & Date Filters not translating

.gitignore

@@ -56,3 +56,4 @@ dist-demo
 **/test-report.xml
 **/testresult.xml
 **/test-results.xml
+test/cypress/screenshots

examples/webpack-demo-vanilla-bundle/src/examples/example07.ts

@@ -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
     */
   }
 

examples/webpack-demo-vanilla-bundle/src/examples/example10.ts

@@ -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', }]
         }
       },
       {

packages/common/src/extensions/headerMenuExtension.ts

@@ -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,
@@ -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);
 

packages/common/src/filters/__tests__/autoCompleteFilter.spec.ts

@@ -54,7 +54,7 @@ describe('AutoCompleteFilter', () => {
       callback: jest.fn()
     };
 
-    filter = new AutoCompleteFilter(collectionService);
+    filter = new AutoCompleteFilter(translaterService, collectionService);
   });
 
   afterEach(() => {

packages/common/src/filters/__tests__/multipleSelectFilter.spec.ts

@@ -56,7 +56,7 @@ describe('SelectFilter', () => {
       callback: jest.fn()
     };
 
-    filter = new MultipleSelectFilter(collectionService, translateService);
+    filter = new MultipleSelectFilter(translateService, collectionService);
   });
 
   afterEach(() => {
@@ -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;
 

packages/common/src/filters/__tests__/selectFilter.spec.ts

@@ -60,7 +60,7 @@ describe('SelectFilter', () => {
       callback: jest.fn()
     };
 
-    filter = new SelectFilter(collectionService, translateService);
+    filter = new SelectFilter(translateService, collectionService);
   });
 
   afterEach(() => {
@@ -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.`);
@@ -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;
 

packages/common/src/filters/__tests__/selectFilterNoLibLoaded.spec.ts

@@ -60,7 +60,7 @@ describe('SelectFilter', () => {
       callback: jest.fn()
     };
 
-    filter = new SelectFilter(collectionServiceStub, translateService);
+    filter = new SelectFilter(translateService, collectionServiceStub);
   });
 
   afterEach(() => {

packages/common/src/filters/__tests__/singleSelectFilter.spec.ts

@@ -58,7 +58,7 @@ describe('SelectFilter', () => {
       callback: jest.fn()
     };
 
-    filter = new SingleSelectFilter(collectionService, translateService);
+    filter = new SingleSelectFilter(translateService, collectionService);
   });
 
   afterEach(() => {
@@ -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;
 

packages/common/src/filters/autoCompleteFilter.ts

@@ -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;
@@ -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> {

packages/common/src/filters/compoundDateFilter.ts

@@ -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));
   }
 
   /**

packages/common/src/filters/dateRangeFilter.ts

@@ -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));
 
   }
 
@@ -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);

packages/common/src/filters/filterFactory.ts

@@ -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;
   }
 
@@ -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;

packages/common/src/filters/multipleSelectFilter.ts

@@ -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);
   }
 }

packages/common/src/filters/selectFilter.ts

@@ -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;
   }
 

packages/common/src/filters/singleSelectFilter.ts

@@ -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);
   }
 }

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -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);
@@ -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;
@@ -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 {
@@ -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 } };
     });

test/cypress/integration/example10.spec.js

@@ -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');
@@ -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');
+    });
   });
 });