fix(locales): fix some Locales not showing up when not using Translate (#392)

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

Author: ghiscoding

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -1273,9 +1273,9 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
             leftContainerClass: 'col-xs-12 col-sm-5',
             metricSeparator: '|',
             metricTexts: {
-              items: 'ITEMS',
+              items: 'items',
               itemsKey: 'ITEMS',
-              of: 'OF',
+              of: 'of',
               ofKey: 'OF',
             },
             rightContainerClass: 'col-xs-6 col-sm-7',

src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts

@@ -3,7 +3,7 @@ import { By } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 
 import { SlickPaginationComponent } from '../slick-pagination.component';
-import { Locale, ServicePagination } from '../../models';
+import { GridOption, ServicePagination } from '../../models';
 import { PaginationService } from '../../services';
 
 const paginationServiceStub = {
@@ -56,13 +56,7 @@ describe('without ngx-translate', () => {
       pageSizes: [5, 10, 15, 20],
       totalItems: 100,
     };
-    component.enableTranslate = false;
-    component.locales = {
-      TEXT_ITEMS_PER_PAGE: 'items per page',
-      TEXT_ITEMS: 'items',
-      TEXT_OF: 'of',
-      TEXT_PAGE: 'page'
-    } as Locale;
+    component.gridOptions = { enableTranslate: false } as GridOption;
 
     paginationServiceStub.onPaginationChanged.next(mockServicePagination);
     fixture.detectChanges();
@@ -81,16 +75,17 @@ describe('without ngx-translate', () => {
 
   it('should throw an error when "enableTranslate" is set and Translate Service is not provided', (done) => {
     try {
-      component.enableTranslate = true;
+      component.gridOptions.enableTranslate = true;
       component.constructor();
+      component.ngOnInit();
     } catch (e) {
       expect(e.toString()).toContain('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
       done();
     }
   });
 
   it('should have defined locale and expect new text in the UI', (done) => {
-    component.enableTranslate = false;
+    component.gridOptions.enableTranslate = false;
     fixture.detectChanges();
 
     setTimeout(() => {

src/app/modules/angular-slickgrid/components/__tests__/slick-pagination.component.spec.ts

@@ -4,7 +4,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 
 import { SlickPaginationComponent } from '../slick-pagination.component';
-import { ServicePagination } from '../../models';
+import { GridOption, ServicePagination } from '../../models';
 import { PaginationService } from '../../services';
 
 const paginationServiceStub = {
@@ -87,7 +87,8 @@ describe('App Component', () => {
         pageSizes: [5, 10, 15, 20],
         totalItems: 100,
       };
-      component.enableTranslate = true;
+      component.gridOptions = { enableTranslate: true } as GridOption;
+      component.ngOnInit();
       paginationServiceStub.onPaginationChanged.next(mockServicePagination);
       fixture.detectChanges();
     });
@@ -110,12 +111,14 @@ describe('App Component', () => {
     });
 
     it('should create a the Slick-Pagination component in the DOM', () => {
+      component.gridOptions = { enableTranslate: true } as GridOption;
       fixture.detectChanges();
 
       const elm = document.querySelector('.slick-pagination');
       const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
       const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
 
+      expect(translate.currentLang).toBe('fr');
       expect(elm.innerHTML).toContain('slick-pagination-nav');
       expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> de ');
       expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> éléments ');

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.html

@@ -3,8 +3,7 @@
   </div>
 
   <!-- Pagination section under the grid -->
-  <slick-pagination id="slickPagingContainer-{{gridId}}" *ngIf="showPagination"
-    [enableTranslate]="gridOptions.enableTranslate" [locales]="locales">
+  <slick-pagination id="slickPagingContainer-{{gridId}}" *ngIf="showPagination" [gridOptions]="gridOptions">
   </slick-pagination>
 
   <!-- Custom Footer section under the grid -->

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -139,8 +139,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   showPagination = false;
   totalItems = 0;
   paginationData: {
-    enableTranslate: boolean;
-    locales: Locale;
+    gridOptions: GridOption;
   };
   subscriptions: Subscription[] = [];
 
@@ -664,8 +663,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   private initializePaginationService(paginationOptions: Pagination) {
     if (this.gridOptions) {
       this.paginationData = {
-        enableTranslate: this.gridOptions.enableTranslate,
-        locales: this.locales,
+        gridOptions: this.gridOptions,
       };
       this.paginationService.totalItems = this.totalItems;
       this.paginationService.init(this.grid, this.dataView, paginationOptions, this.backendServiceApi);
@@ -987,7 +985,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
   /** Translate all Custom Footer Texts (footer with metrics) */
   private translateCustomFooterTexts() {
-    if (this.translate && this.translate.instant) {
+    if (this.translate && this.translate.instant && this.translate.currentLang) {
       const customFooterOptions = this.gridOptions && this.gridOptions.customFooterOptions || {};
       customFooterOptions.metricTexts = customFooterOptions.metricTexts || {};
       for (const propName of Object.keys(customFooterOptions.metricTexts)) {

src/app/modules/angular-slickgrid/components/slick-pagination.component.ts

@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnDestroy, Optional, Output, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 
-import { Locale, Pagination } from './../models/index';
+import { Constants } from '../constants';
+import { GridOption, Locale } from './../models/index';
 import { PaginationService } from '../services/pagination.service';
 import { unsubscribeAllObservables } from '../services/utilities';
 
@@ -11,29 +12,20 @@ import { unsubscribeAllObservables } from '../services/utilities';
   templateUrl: './slick-pagination.component.html'
 })
 export class SlickPaginationComponent implements OnDestroy, OnInit {
-  private subscriptions: Subscription[] = [];
+  @Input() gridOptions: GridOption;
 
-  @Input() enableTranslate: boolean;
-  @Input() locales: Locale;
+  private subscriptions: Subscription[] = [];
+  private _enableTranslate = false;
+  private _locales: Locale;
 
   // text translations (handled by ngx-translate or by custom locale)
-  textItemsPerPage: string;
-  textItems: string;
-  textOf: string;
-  textPage: string;
+  textItemsPerPage = 'items per page';
+  textItems = 'items';
+  textOf = 'of';
+  textPage = 'Page';
 
   /** Constructor */
-  constructor(private paginationService: PaginationService, @Optional() private translate: TranslateService) {
-    if (this.enableTranslate && !this.translate) {
-      throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
-    }
-
-    // translate all the text using ngx-translate or custom locales
-    this.translateAllUiTexts(this.locales);
-    if (translate && translate.onLangChange) {
-      this.subscriptions.push(this.translate.onLangChange.subscribe(() => this.translateAllUiTexts(this.locales)));
-    }
-  }
+  constructor(private paginationService: PaginationService, @Optional() private translate: TranslateService) { }
 
   get availablePageSizes(): number[] {
     return this.paginationService.availablePageSizes;
@@ -71,7 +63,20 @@ export class SlickPaginationComponent implements OnDestroy, OnInit {
   }
 
   ngOnInit() {
-    this.translateAllUiTexts(this.locales);
+    const gridOptions: GridOption = this.gridOptions || {};
+    this._enableTranslate = gridOptions && gridOptions.enableTranslate || false;
+    this._locales = gridOptions && gridOptions.locales || Constants.locales;
+
+    if (this._enableTranslate && !this.translate) {
+      throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
+    }
+
+    this.translateAllUiTexts(this._locales);
+
+    // translate all the text using ngx-translate or custom locales
+    if (this._enableTranslate && this.translate && this.translate.onLangChange) {
+      this.subscriptions.push(this.translate.onLangChange.subscribe(() => this.translateAllUiTexts(this._locales)));
+    }
   }
 
   changeToFirstPage(event: any) {
@@ -119,7 +124,7 @@ export class SlickPaginationComponent implements OnDestroy, OnInit {
 
   /** Translate all the texts shown in the UI, use ngx-translate service when available or custom locales when service is null */
   private translateAllUiTexts(locales: Locale) {
-    if (this.translate && this.translate.instant) {
+    if (this._enableTranslate && this.translate && this.translate.instant && this.translate.currentLang) {
       this.textItemsPerPage = this.translate.instant('ITEMS_PER_PAGE');
       this.textItems = this.translate.instant('ITEMS');
       this.textOf = this.translate.instant('OF');

src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts

@@ -63,6 +63,7 @@ describe('DateEditor', () => {
       SAVE: 'Sauvegarder',
     });
     translate.setDefaultLang('en');
+    translate.use('en');
 
     mockColumn = { id: 'startDate', field: 'startDate', editable: true, editor: { model: Editors.date }, internalColumnEditor: {} } as Column;
 

src/app/modules/angular-slickgrid/editors/__tests__/longTextEditor.spec.ts

@@ -62,6 +62,7 @@ describe('LongTextEditor', () => {
       SAVE: 'Sauvegarder',
     });
     translate.setDefaultLang('fr');
+    translate.use('fr');
 
     mockColumn = { id: 'title', field: 'title', editable: true, editor: { model: Editors.longText }, internalColumnEditor: {} } as Column;
 

src/app/modules/angular-slickgrid/editors/__tests__/multipleSelectEditor.spec.ts

@@ -64,6 +64,7 @@ describe('SelectEditor', () => {
       SAVE: 'Sauvegarder',
     });
     translate.setDefaultLang('fr');
+    translate.use('fr');
 
     mockColumn = { id: 'gender', field: 'gender', editable: true, editor: { model: Editors.multipleSelect }, internalColumnEditor: {} } as Column;
 

src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts

@@ -64,6 +64,7 @@ describe('SelectEditor', () => {
       SAVE: 'Sauvegarder',
     });
     translate.setDefaultLang('fr');
+    translate.use('fr');
 
     mockColumn = { id: 'gender', field: 'gender', editable: true, editor: { model: Editors.multipleSelect }, internalColumnEditor: {} } as Column;
 

src/app/modules/angular-slickgrid/editors/__tests__/singleSelectEditor.spec.ts

@@ -64,6 +64,7 @@ describe('SelectEditor', () => {
       SAVE: 'Sauvegarder',
     });
     translate.setDefaultLang('fr');
+    translate.use('fr');
 
     mockColumn = { id: 'gender', field: 'gender', editable: true, editor: { model: Editors.multipleSelect }, internalColumnEditor: {} } as Column;
 

src/app/modules/angular-slickgrid/editors/dateEditor.ts

@@ -47,7 +47,7 @@ export class DateEditor implements Editor {
       throw new Error('[Angular-SlickGrid] Something is wrong with this grid, an Editor must always have valid arguments.');
     }
     this.grid = args.grid;
-    this.gridOptions = args.grid && args.grid.getOptions() as GridOption;
+    this.gridOptions = (args.grid && args.grid.getOptions() || {}) as GridOption;
     const options = this.gridOptions || this.args.column.params || {};
     if (options && options.i18n instanceof TranslateService) {
       this._translate = options.i18n;
@@ -93,7 +93,7 @@ export class DateEditor implements Editor {
       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._translate && this._translate.currentLang || 'en';
+      let currentLocale = this._translate && this._translate.currentLang || this.gridOptions.locale || 'en';
       if (currentLocale && currentLocale.length > 2) {
         currentLocale = currentLocale.substring(0, 2);
       }

src/app/modules/angular-slickgrid/editors/longTextEditor.ts

@@ -78,11 +78,19 @@ export class LongTextEditor implements Editor {
   }
 
   init(): void {
+    let cancelText = '';
+    let saveText = '';
+    if (this._translate && this._translate.instant && this._translate.currentLang) {
+      cancelText = this._translate.instant('CANCEL');
+      saveText = this._translate.instant('SAVE');
+    } else {
+      cancelText = this._locales && this._locales.TEXT_CANCEL;
+      saveText = this._locales && this._locales.TEXT_SAVE;
+    }
+
     const columnId = this.columnDef && this.columnDef.id;
     const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
     const title = this.columnEditor && this.columnEditor.title || '';
-    const cancelText = this._translate && this._translate.instant && this._translate.instant('CANCEL') || this._locales && this._locales.TEXT_CANCEL;
-    const saveText = this._translate && this._translate.instant && this._translate.instant('SAVE') || this._locales && this._locales.TEXT_SAVE;
     const $container = $('body');
 
     this._$wrapper = $(`<div class="slick-large-editor-text editor-${columnId}" />`).appendTo($container);

src/app/modules/angular-slickgrid/editors/selectEditor.ts

@@ -15,6 +15,7 @@ import {
   EditorValidatorOutput,
   FieldType,
   GridOption,
+  Locale,
   MultipleSelectOption,
   SelectOption,
 } from './../models/index';
@@ -64,8 +65,11 @@ export class SelectEditor implements Editor {
   /** Do we translate the label? */
   enableTranslateLabel: boolean;
 
+  /** Locales */
+  protected _locales: Locale;
+
   /** Observable Subscriptions */
-  _subscriptions: Subscription[] = [];
+  protected _subscriptions: Subscription[] = [];
 
   // flag to signal that the editor is destroying itself, helps prevent
   // commit changes from being called twice and erroring
@@ -85,12 +89,15 @@ export class SelectEditor implements Editor {
       throw new Error('[Angular-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;
     const options = this.gridOptions || this.args.column.params || {};
     if (options && options.i18n instanceof TranslateService) {
       this._translate = options.i18n;
     }
 
+    // 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 fieldId = this.columnDef && this.columnDef.id;
     this.elementName = `editor-${fieldId}`;
@@ -118,10 +125,15 @@ export class SelectEditor implements Editor {
       libOptions.okButton = true;
       libOptions.selectAllDelimiter = ['', ''];
 
-      if (this._translate) {
+      if (this._translate && this._translate.instant && this._translate.currentLang) {
         libOptions.countSelected = this._translate.instant('X_OF_Y_SELECTED');
         libOptions.allSelected = this._translate.instant('ALL_SELECTED');
         libOptions.selectAllText = this._translate.instant('SELECT_ALL');
+      } 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/app/modules/angular-slickgrid/extensions/cellMenuExtension.ts

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

src/app/modules/angular-slickgrid/extensions/contextMenuExtension.ts

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