fix(locales): fix some Locales not showing up when not using I18N (#300)

* fix(locales): fix some Locales not showing up when not using I18N

src/aurelia-slickgrid/custom-elements/__tests__/slick-pagination-without-i18n.spec.ts

@@ -3,7 +3,7 @@ import { EventAggregator } from 'aurelia-event-aggregator';
 import { StageComponent } from 'aurelia-testing';
 import { PLATFORM } from 'aurelia-pal';
 
-import { Locale } from '../../models';
+import { GridOption, Locale } from '../../models';
 import { PaginationService } from '../../services';
 
 function removeExtraSpaces(textS: string) {
@@ -57,9 +57,8 @@ describe('Slick-Pagination Component without I18N', () => {
       ])
       .inView(view)
       .boundTo({
-        enableTranslate: true,
+        gridOptions: { enableTranslate: true },
         paginationService: paginationServiceStub,
-        locales: mockLocales,
       });
 
     customElement.bootstrap((aurelia) => {
@@ -77,9 +76,8 @@ describe('Slick-Pagination Component without I18N', () => {
 
     it('should throw an error when "enableTranslate" is set and I18N Service is not provided', async (done) => {
       try {
-        customElement.enableTranslate = true;
         await customElement.manuallyHandleLifecycle().create(bootstrap);
-        await customElement.bind({ enableTranslate: true, paginationService: paginationServiceStub });
+        await customElement.bind({ gridOptions: { enableTranslate: true } as GridOption, paginationService: paginationServiceStub });
         await customElement.attached();
         await customElement.detached();
       } catch (e) {

src/aurelia-slickgrid/custom-elements/__tests__/slick-pagination.spec.ts

@@ -80,7 +80,7 @@ describe('Slick-Pagination Component', () => {
       ])
       .inView(view)
       .boundTo({
-        enableTranslate: true,
+        gridOptions: { enableTranslate: true },
         paginationService: paginationServiceStub,
       });
 
@@ -91,7 +91,6 @@ describe('Slick-Pagination Component', () => {
       aurelia.container.registerInstance(PaginationService, paginationServiceStub);
       return aurelia;
     });
-
     await customElement.create(bootstrap);
   });
 
@@ -111,6 +110,7 @@ describe('Slick-Pagination Component', () => {
       const pageInfoFromTo = await customElement.waitForElement('.page-info-from-to');
       const pageInfoTotalItems = await customElement.waitForElement('.page-info-total-items');
 
+      expect(i18n.getLocale()).toBe('fr');
       expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span>de');
       expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe('<span data-test="total-items">100</span> éléments');
     });
@@ -180,11 +180,11 @@ describe('Slick-Pagination Component', () => {
     it('should create a the Slick-Pagination component in the DOM and expect different locale when changed', async (done) => {
       i18n.setLocale('en');
       ea.publish('i18n:locale:changed', 'en');
-      expect(i18n.getLocale()).toBe('en');
 
       setTimeout(async () => {
         const pageInfoFromTo = await customElement.waitForElement('.page-info-from-to');
         const pageInfoTotalItems = await customElement.waitForElement('.page-info-total-items');
+        expect(i18n.getLocale()).toBe('en');
         expect(removeExtraSpaces(pageInfoFromTo.innerHTML)).toBe(`<span data-test="item-from">5</span>-<span data-test="item-to">10</span>of`);
         expect(removeExtraSpaces(pageInfoTotalItems.innerHTML)).toBe(`<span data-test="total-items">100</span> items`);
         done();

src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.html

@@ -6,9 +6,8 @@
 
     <!-- Pagination section under the grid -->
     <slick-pagination id="slickPagingContainer-${gridId}" if.bind="showPagination"
-                      pagination-service.bind="paginationService"
-                      enable-translate.bind="gridOptions.enableTranslate"
-                      locales.bind="locales">
+                      grid-options.bind="gridOptions"
+                      pagination-service.bind="paginationService">
     </slick-pagination>
 
     <!-- Custom Footer section under the grid -->

src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts

@@ -101,8 +101,7 @@ export class AureliaSlickgridCustomElement {
   serviceList: any[] = [];
   subscriptions: Subscription[] = [];
   paginationData: {
-    enableTranslate: boolean;
-    locales: Locale;
+    gridOptions: GridOption;
     paginationService: PaginationService;
   };
 
@@ -167,8 +166,7 @@ export class AureliaSlickgridCustomElement {
   private initializePaginationService(paginationOptions: Pagination) {
     if (this.gridOptions) {
       this.paginationData = {
-        enableTranslate: this.gridOptions.enableTranslate || false,
-        locales: this.locales,
+        gridOptions: this.gridOptions,
         paginationService: this.paginationService,
       };
       this.paginationService.totalItems = this.totalItems;
@@ -1015,7 +1013,7 @@ export class AureliaSlickgridCustomElement {
 
   /** Translate all Custom Footer Texts (footer with metrics) */
   private translateCustomFooterTexts() {
-    if (this.i18n && this.i18n.tr) {
+    if (this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale()) {
       const customFooterOptions = this.gridOptions && this.gridOptions.customFooterOptions || {};
       customFooterOptions.metricTexts = customFooterOptions.metricTexts || {};
       for (const propName of Object.keys(customFooterOptions.metricTexts)) {

src/aurelia-slickgrid/custom-elements/slick-pagination.ts

@@ -2,29 +2,28 @@ import { bindable, inject, Optional } from 'aurelia-framework';
 import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
 import { I18N } from 'aurelia-i18n';
 
-import { Locale } from '../models/index';
+import { GridOption, Locale } from '../models/index';
 import { PaginationService } from '../services/pagination.service';
 import { disposeAllSubscriptions } from '../services/utilities';
+import { Constants } from '../constants';
 
 @inject(EventAggregator, Optional.of(I18N))
 export class SlickPaginationCustomElement {
   // we need to pass this service as a binding because it's transient and it must be created (then passed through the binding) in the Aurelia-Slickgrid custom element
   @bindable() paginationService: PaginationService;
-  @bindable() enableTranslate: boolean;
-  @bindable() locales: Locale;
+  @bindable() gridOptions: GridOption;
 
+  private _enableTranslate = false;
+  private _locales: Locale;
   private _subscriptions: Subscription[] = [];
 
   // text translations (handled by i18n or by custom locale)
-  textItemsPerPage: string;
-  textItems: string;
-  textOf: string;
-  textPage: string;
+  textItemsPerPage = 'items per page';
+  textItems = 'items';
+  textOf = 'of';
+  textPage = 'Page';
 
-  constructor(private globalEa: EventAggregator, private i18n: I18N) {
-    // when using I18N, we'll translate necessary texts in the UI
-    this.translatePaginationTexts(this.locales);
-  }
+  constructor(private globalEa: EventAggregator, private i18n: I18N) { }
 
   get availablePageSizes(): number[] {
     return this.paginationService.availablePageSizes;
@@ -60,15 +59,19 @@ export class SlickPaginationCustomElement {
     return this.paginationService.totalItems;
   }
 
-  bind() {
-    if (this.enableTranslate && (!this.i18n || !this.i18n.tr)) {
+  bind(bindings: { gridOptions: GridOption; paginationService: PaginationService; }) {
+    const gridOptions: GridOption = this.gridOptions || bindings && bindings.gridOptions || {};
+    this._enableTranslate = gridOptions && gridOptions.enableTranslate || false;
+    this._locales = gridOptions && gridOptions.locales || Constants.locales;
+
+    if (this._enableTranslate && (!this.i18n || !this.i18n.tr)) {
       throw new Error('[Aurelia-Slickgrid] requires "I18N" to be installed and configured when the grid option "enableTranslate" is enabled.');
     }
-    this.translatePaginationTexts(this.locales);
+    this.translatePaginationTexts(this._locales);
 
-    if (this.enableTranslate && this.globalEa && this.globalEa.subscribe) {
+    if (this._enableTranslate && this.globalEa && this.globalEa.subscribe) {
       this._subscriptions.push(
-        this.globalEa.subscribe('i18n:locale:changed', () => this.translatePaginationTexts(this.locales))
+        this.globalEa.subscribe('i18n:locale:changed', () => this.translatePaginationTexts(this._locales))
       );
     }
   }
@@ -110,7 +113,7 @@ export class SlickPaginationCustomElement {
 
   /** Translate all the texts shown in the UI, use I18N service when available or custom locales when service is null */
   private translatePaginationTexts(locales: Locale) {
-    if (this.i18n && this.i18n.tr) {
+    if (this._enableTranslate && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale()) {
       this.textItemsPerPage = this.i18n.tr('ITEMS_PER_PAGE');
       this.textItems = this.i18n.tr('ITEMS');
       this.textOf = this.i18n.tr('OF');

src/aurelia-slickgrid/editors/dateEditor.ts

@@ -80,11 +80,11 @@ export class DateEditor implements Editor {
       const columnId = this.columnDef && this.columnDef.id;
       const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
       const title = this.columnEditor && this.columnEditor.title || '';
-      const gridOptions = this.args.grid.getOptions() as GridOption;
+      const gridOptions = (this.args.grid.getOptions() || {}) as GridOption;
       this.defaultDate = (this.args.item) ? this.args.item[this.columnDef.field] : null;
       const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso);
       const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || FieldType.dateUtc);
-      let currentLocale = this.i18n && this.i18n.getLocale && this.i18n.getLocale() || 'en';
+      let currentLocale = this.i18n && this.i18n.getLocale && this.i18n.getLocale() || gridOptions.locale || 'en';
       if (currentLocale.length > 2) {
         currentLocale = currentLocale.substring(0, 2);
       }

src/aurelia-slickgrid/editors/longTextEditor.ts

@@ -72,9 +72,17 @@ export class LongTextEditor implements Editor {
   }
 
   init(): void {
+    let cancelText = '';
+    let saveText = '';
+    if (this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale()) {
+      cancelText = this.i18n.tr('CANCEL');
+      saveText = this.i18n.tr('SAVE');
+    } else {
+      cancelText = this._locales && this._locales.TEXT_CANCEL;
+      saveText = this._locales && this._locales.TEXT_SAVE;
+    }
+
     const columnId = this.columnDef && this.columnDef.id;
-    const cancelText = this.i18n && this.i18n.tr && this.i18n.tr('CANCEL') || this._locales && this._locales.TEXT_CANCEL;
-    const saveText = this.i18n && this.i18n.tr && this.i18n.tr('SAVE') || this._locales && this._locales.TEXT_SAVE;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
     const title = this.columnEditor && this.columnEditor.title || '';
     const $container = $('body');

src/aurelia-slickgrid/editors/selectEditor.ts

@@ -16,6 +16,7 @@ import {
   EditorValidatorOutput,
   FieldType,
   GridOption,
+  Locale,
   MultipleSelectOption,
   SelectOption,
 } from './../models/index';
@@ -62,8 +63,11 @@ export class SelectEditor implements Editor {
   /** Do we translate the label? */
   enableTranslateLabel: boolean;
 
+  /** Locales */
+  private _locales: Locale;
+
   /** Event Subscriptions */
-  _subscriptions: Subscription[] = [];
+  private _subscriptions: Subscription[] = [];
 
   // flag to signal that the editor is destroying itself, helps prevent
   // commit changes from being called twice and erroring
@@ -77,7 +81,10 @@ export class SelectEditor implements Editor {
       throw new Error('[Aurelia-Slickgrid] Something is wrong with this grid, an Editor must always have valid arguments.');
     }
     this.grid = args.grid;
-    this.gridOptions = this.grid.getOptions() as GridOption;
+    this.gridOptions = (this.grid.getOptions() || {}) as GridOption;
+
+    // get locales provided by user in main file or else use default English locales via the Constants
+    this._locales = this.gridOptions.locales || Constants.locales;
 
     // provide the name attribute to the DOM element which will be needed to auto-adjust drop position (dropup / dropdown)
     const columnId = this.columnDef && this.columnDef.id;
@@ -106,10 +113,16 @@ export class SelectEditor implements Editor {
       libOptions.okButton = true;
       libOptions.selectAllDelimiter = ['', ''];
 
-      if (this.i18n && this.i18n.tr) {
+      if (this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale()) {
         libOptions.countSelected = this.i18n.tr('X_OF_Y_SELECTED');
         libOptions.allSelected = this.i18n.tr('ALL_SELECTED');
         libOptions.selectAllText = this.i18n.tr('SELECT_ALL');
+        libOptions.okButtonText = this.i18n.tr('OK');
+      } else {
+        libOptions.countSelected = this._locales && this._locales.TEXT_X_OF_Y_SELECTED;
+        libOptions.allSelected = this._locales && this._locales.TEXT_ALL_SELECTED;
+        libOptions.selectAllText = this._locales && this._locales.TEXT_SELECT_ALL;
+        libOptions.okButtonText = this._locales && this._locales.TEXT_OK;
       }
     }
 

src/aurelia-slickgrid/extensions/cellMenuExtension.ts

@@ -166,10 +166,10 @@ export class CellMenuExtension implements Extension {
 
           // translate their titles only if they have a titleKey defined
           if (columnDef.cellMenu.commandTitleKey) {
-            columnDef.cellMenu.commandTitle = this.i18n && this.i18n.tr && this.i18n.tr(columnDef.cellMenu.commandTitleKey) || this._locales && this._locales.TEXT_COMMANDS || columnDef.cellMenu.commandTitle;
+            columnDef.cellMenu.commandTitle = this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr(columnDef.cellMenu.commandTitleKey) || this._locales && this._locales.TEXT_COMMANDS || columnDef.cellMenu.commandTitle;
           }
           if (columnDef.cellMenu.optionTitleKey) {
-            columnDef.cellMenu.optionTitle = this.i18n && this.i18n.tr && this.i18n.tr(columnDef.cellMenu.optionTitleKey) || columnDef.cellMenu.optionTitle;
+            columnDef.cellMenu.optionTitle = this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr(columnDef.cellMenu.optionTitleKey) || columnDef.cellMenu.optionTitle;
           }
 
           // translate both command/option items (whichever is provided)

src/aurelia-slickgrid/extensions/contextMenuExtension.ts

@@ -153,11 +153,11 @@ export class ContextMenuExtension implements Extension {
       const menuOptions: Partial<ContextMenu> = {};
 
       if (contextMenu.commandTitleKey) {
-        contextMenu.commandTitle = this.i18n && this.i18n.tr && this.i18n.tr(contextMenu.commandTitleKey) || contextMenu.commandTitle;
+        contextMenu.commandTitle = this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr(contextMenu.commandTitleKey) || contextMenu.commandTitle;
         menuOptions.commandTitle = contextMenu.commandTitle;
       }
       if (contextMenu.optionTitleKey) {
-        contextMenu.optionTitle = this.i18n && this.i18n.tr && this.i18n.tr(contextMenu.optionTitleKey) || contextMenu.optionTitle;
+        contextMenu.optionTitle = this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr(contextMenu.optionTitleKey) || contextMenu.optionTitle;
         menuOptions.optionTitle = contextMenu.optionTitle;
       }
       const originalCommandItems = this._userOriginalContextMenu && Array.isArray(this._userOriginalContextMenu.commandItems) ? this._userOriginalContextMenu.commandItems : [];

src/aurelia-slickgrid/extensions/extensionUtility.ts

@@ -99,21 +99,21 @@ export class ExtensionUtility {
     const title = picker && picker[propName];
     const titleKey = picker && picker[`${propName}Key`];
 
-    if (titleKey && this.i18n && this.i18n.tr) {
+    if (titleKey && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale()) {
       output = this.i18n.tr(titleKey || ' ');
     } else {
       switch (propName) {
         case 'customTitle':
-          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.tr('COMMANDS') || locales && locales.TEXT_COMMANDS;
+          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr('COMMANDS') || locales && locales.TEXT_COMMANDS;
           break;
         case 'columnTitle':
-          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.tr('COLUMNS') || locales && locales.TEXT_COLUMNS;
+          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr('COLUMNS') || locales && locales.TEXT_COLUMNS;
           break;
         case 'forceFitTitle':
-          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.tr('FORCE_FIT_COLUMNS') || locales && locales.TEXT_FORCE_FIT_COLUMNS;
+          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr('FORCE_FIT_COLUMNS') || locales && locales.TEXT_FORCE_FIT_COLUMNS;
           break;
         case 'syncResizeTitle':
-          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.tr('SYNCHRONOUS_RESIZE') || locales && locales.TEXT_SYNCHRONOUS_RESIZE;
+          output = title || enableTranslate && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr('SYNCHRONOUS_RESIZE') || locales && locales.TEXT_SYNCHRONOUS_RESIZE;
           break;
         default:
           output = title;
@@ -145,7 +145,7 @@ export class ExtensionUtility {
     if (Array.isArray(items)) {
       for (const item of items) {
         if (item[inputKey]) {
-          item[outputKey] = this.i18n && this.i18n.tr && this.i18n.tr(item[inputKey]);
+          item[outputKey] = this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale() && this.i18n.tr(item[inputKey]);
         }
       }
     }
@@ -163,7 +163,7 @@ export class ExtensionUtility {
     // get locales provided by user in main file or else use default English locales via the Constants
     const locales = gridOptions && gridOptions.locales || Constants.locales;
 
-    if (gridOptions.enableTranslate && this.i18n && this.i18n.tr) {
+    if (gridOptions.enableTranslate && this.i18n && this.i18n.tr && this.i18n.getLocale && this.i18n.getLocale()) {
       text = this.i18n.tr(translationKey || ' ');
     } else if (locales && locales.hasOwnProperty(localeKey)) {
       text = locales[localeKey];

src/aurelia-slickgrid/filters/compoundDateFilter.ts

@@ -169,7 +169,7 @@ export class CompoundDateFilter implements Filter {
     const userFilterOptions = (this.columnFilter && this.columnFilter.filterOptions || {}) as FlatpickrOption;
 
     // get current locale, if user defined a custom locale just use or get it the Translate Service if it exist else just use English
-    let currentLocale = (userFilterOptions && userFilterOptions.locale) || (this.i18n && this.i18n.getLocale && this.i18n.getLocale()) || 'en';
+    let currentLocale = (userFilterOptions && userFilterOptions.locale) || (this.i18n && this.i18n.getLocale && this.i18n.getLocale()) || this.gridOptions.locale || 'en';
     if (currentLocale && currentLocale.length > 2) {
       currentLocale = currentLocale.substring(0, 2);
     }