feat(translate): add namespace prefix + separator grid option

ghiscoding · May 27, 2020 · 90b1b2e · 90b1b2e
1 parent a30723d
commit 90b1b2e
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 57 deletions.
diff --git a/packages/common/src/editors/floatEditor.ts b/packages/common/src/editors/floatEditor.ts
@@ -1,4 +1,3 @@
-import { Constants } from '../constants';
 import { KeyCode } from '../enums/index';
 import { Column, ColumnEditor, Editor, EditorArguments, EditorValidator, EditorValidatorOutput } from '../interfaces/index';
 import { setDeepValue, getDescendantProperty } from '../services/utilities';

diff --git a/packages/common/src/editors/longTextEditor.ts b/packages/common/src/editors/longTextEditor.ts
@@ -11,7 +11,7 @@ import {
   HtmlElementPosition,
   Locale,
 } from '../interfaces/index';
-import { getDescendantProperty, getHtmlElementOffset, setDeepValue } from '../services/utilities';
+import { getDescendantProperty, getHtmlElementOffset, getTranslationPrefix, setDeepValue } from '../services/utilities';
 import { TranslaterService } from '../services/translater.service';
 import { textValidator } from '../editorValidators/textValidator';
 
@@ -83,8 +83,9 @@ export class LongTextEditor implements Editor {
     let cancelText = '';
     let saveText = '';
     if (this._translater && this._translater.translate && this._translater.getCurrentLocale && this._translater.getCurrentLocale()) {
-      cancelText = this._translater.translate('CANCEL');
-      saveText = this._translater.translate('SAVE');
+      const translationPrefix = getTranslationPrefix(this.gridOptions);
+      cancelText = this._translater.translate(`${translationPrefix}CANCEL`);
+      saveText = this._translater.translate(`${translationPrefix}SAVE`);
     } else {
       cancelText = this._locales && this._locales.TEXT_CANCEL;
       saveText = this._locales && this._locales.TEXT_SAVE;

diff --git a/packages/common/src/editors/selectEditor.ts b/packages/common/src/editors/selectEditor.ts
@@ -17,7 +17,7 @@ import {
   SelectOption,
 } from './../interfaces/index';
 import { CollectionService, findOrDefault, TranslaterService } from '../services/index';
-import { charArraysEqual, getDescendantProperty, htmlEncode, setDeepValue } from '../services/utilities';
+import { charArraysEqual, getDescendantProperty, getTranslationPrefix, htmlEncode, setDeepValue } from '../services/utilities';
 
 // using external non-typed js libraries
 declare const $: any;
@@ -119,10 +119,11 @@ export class SelectEditor implements Editor {
       libOptions.selectAllDelimiter = ['', ''];
 
       if (this._translaterService && this._translaterService.translate && this._translaterService.getCurrentLocale && this._translaterService.getCurrentLocale()) {
-        libOptions.countSelected = this._translaterService.translate('X_OF_Y_SELECTED');
-        libOptions.allSelected = this._translaterService.translate('ALL_SELECTED');
-        libOptions.selectAllText = this._translaterService.translate('SELECT_ALL');
-        libOptions.okButtonText = this._translaterService.translate('OK');
+        const translationPrefix = getTranslationPrefix(this.gridOptions);
+        libOptions.countSelected = this._translaterService.translate(`${translationPrefix}X_OF_Y_SELECTED`);
+        libOptions.allSelected = this._translaterService.translate(`${translationPrefix}ALL_SELECTED`);
+        libOptions.selectAllText = this._translaterService.translate(`${translationPrefix}SELECT_ALL`);
+        libOptions.okButtonText = this._translaterService.translate(`${translationPrefix}OK`);
       } else {
         libOptions.countSelected = this._locales && this._locales.TEXT_X_OF_Y_SELECTED;
         libOptions.allSelected = this._locales && this._locales.TEXT_ALL_SELECTED;

diff --git a/packages/common/src/extensions/contextMenuExtension.ts b/packages/common/src/extensions/contextMenuExtension.ts
@@ -18,6 +18,7 @@ import { exportWithFormatterWhenDefined } from '../services/export-utilities';
 import { ExportService } from '../services/export.service';
 import { ExcelExportService } from '../services/excelExport.service';
 import { SharedService } from '../services/shared.service';
+import { getTranslationPrefix } from '../services/utilities';
 import { TranslaterService } from '..';
 
 // using external non-typed js libraries
@@ -174,9 +175,9 @@ export class ContextMenuExtension implements Extension {
   private addMenuCustomCommands(originalCustomItems: Array<MenuCommandItem | 'divider'>) {
     const menuCustomItems: Array<MenuCommandItem | 'divider'> = [];
     const gridOptions = this.sharedService && this.sharedService.gridOptions || {};
-    const contextMenu = gridOptions && gridOptions.contextMenu;
-    const dataView = this.sharedService && this.sharedService.dataView;
-    const grid = this.sharedService && this.sharedService.grid;
+    const contextMenu = gridOptions?.contextMenu;
+    const dataView = this.sharedService?.dataView;
+    const translationPrefix = getTranslationPrefix(gridOptions);
 
     // show context menu: Copy (cell value)
     if (contextMenu && !contextMenu.hideCopyCellValueCommand) {
@@ -185,7 +186,7 @@ export class ContextMenuExtension implements Extension {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconCopyCellValueCommand || 'fa fa-clone',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist('COPY', 'TEXT_COPY'),
+            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}COPY`, 'TEXT_COPY'),
             disabled: false,
             command: commandName,
             positionOrder: 50,
@@ -213,7 +214,7 @@ export class ContextMenuExtension implements Extension {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconExportCsvCommand || 'fa fa-download',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist('EXPORT_TO_CSV', 'TEXT_EXPORT_TO_CSV'),
+            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPORT_TO_CSV`, 'TEXT_EXPORT_TO_CSV'),
             disabled: false,
             command: commandName,
             positionOrder: 51,
@@ -235,7 +236,7 @@ export class ContextMenuExtension implements Extension {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist('EXPORT_TO_EXCEL', 'TEXT_EXPORT_TO_EXCEL'),
+            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPORT_TO_EXCEL`, 'TEXT_EXPORT_TO_EXCEL'),
             disabled: false,
             command: commandName,
             positionOrder: 52,
@@ -255,7 +256,7 @@ export class ContextMenuExtension implements Extension {
         menuCustomItems.push(
           {
             iconCssClass: contextMenu.iconExportTextDelimitedCommand || 'fa fa-download',
-            title: this.extensionUtility.translateWhenEnabledAndServiceExist('EXPORT_TO_TAB_DELIMITED', 'TEXT_EXPORT_TO_TAB_DELIMITED'),
+            title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPORT_TO_TAB_DELIMITED`, 'TEXT_EXPORT_TO_TAB_DELIMITED'),
             disabled: false,
             command: commandName,
             positionOrder: 53,
@@ -284,7 +285,7 @@ export class ContextMenuExtension implements Extension {
           menuCustomItems.push(
             {
               iconCssClass: contextMenu.iconClearGroupingCommand || 'fa fa-times',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist('CLEAR_ALL_GROUPING', 'TEXT_CLEAR_ALL_GROUPING'),
+              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}CLEAR_ALL_GROUPING`, 'TEXT_CLEAR_ALL_GROUPING'),
               disabled: false,
               command: commandName,
               positionOrder: 55,
@@ -306,7 +307,7 @@ export class ContextMenuExtension implements Extension {
           menuCustomItems.push(
             {
               iconCssClass: contextMenu.iconCollapseAllGroupsCommand || 'fa fa-compress',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist('COLLAPSE_ALL_GROUPS', 'TEXT_COLLAPSE_ALL_GROUPS'),
+              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}COLLAPSE_ALL_GROUPS`, 'TEXT_COLLAPSE_ALL_GROUPS'),
               disabled: false,
               command: commandName,
               positionOrder: 56,
@@ -337,7 +338,7 @@ export class ContextMenuExtension implements Extension {
           menuCustomItems.push(
             {
               iconCssClass: contextMenu.iconExpandAllGroupsCommand || 'fa fa-expand',
-              title: this.extensionUtility.translateWhenEnabledAndServiceExist('EXPAND_ALL_GROUPS', 'TEXT_EXPAND_ALL_GROUPS'),
+              title: this.extensionUtility.translateWhenEnabledAndServiceExist(`${translationPrefix}EXPAND_ALL_GROUPS`, 'TEXT_EXPAND_ALL_GROUPS'),
               disabled: false,
               command: commandName,
               positionOrder: 57,

diff --git a/packages/common/src/extensions/extensionUtility.ts b/packages/common/src/extensions/extensionUtility.ts
@@ -3,6 +3,7 @@ import { Constants } from '../constants';
 import { ExtensionName } from '../enums/extensionName.enum';
 import { SharedService } from '../services/shared.service';
 import { TranslaterService } from '../services';
+import { getTranslationPrefix } from '../services/utilities';
 
 declare function require(name: string): any;
 
@@ -94,22 +95,24 @@ export class ExtensionUtility {
 
     const title = picker && picker[propName];
     const titleKey = picker && picker[`${propName}Key`];
+    const gridOptions = this.sharedService.gridOptions;
+    const translationPrefix = getTranslationPrefix(gridOptions);
 
     if (titleKey && this.translaterService && this.translaterService.translate) {
       output = this.translaterService.translate(titleKey || ' ');
     } else {
       switch (propName) {
         case 'customTitle':
-          output = title || enableTranslate && this.translaterService && this.translaterService.getCurrentLocale && this.translaterService.translate && this.translaterService.translate('COMMANDS' || ' ') || locales && locales.TEXT_COMMANDS;
+          output = title || enableTranslate && this.translaterService?.getCurrentLocale && this.translaterService?.translate(`${translationPrefix}COMMANDS` || ' ') || locales?.TEXT_COMMANDS;
           break;
         case 'columnTitle':
-          output = title || enableTranslate && this.translaterService && this.translaterService.getCurrentLocale && this.translaterService.translate && this.translaterService.translate('COLUMNS' || ' ') || locales && locales.TEXT_COLUMNS;
+          output = title || enableTranslate && this.translaterService?.getCurrentLocale && this.translaterService?.translate(`${translationPrefix}COLUMNS` || ' ') || locales?.TEXT_COLUMNS;
           break;
         case 'forceFitTitle':
-          output = title || enableTranslate && this.translaterService && this.translaterService.getCurrentLocale && this.translaterService.translate && this.translaterService.translate('FORCE_FIT_COLUMNS' || ' ') || locales && locales.TEXT_FORCE_FIT_COLUMNS;
+          output = title || enableTranslate && this.translaterService?.getCurrentLocale && this.translaterService?.translate(`${translationPrefix}FORCE_FIT_COLUMNS` || ' ') || locales?.TEXT_FORCE_FIT_COLUMNS;
           break;
         case 'syncResizeTitle':
-          output = title || enableTranslate && this.translaterService && this.translaterService.getCurrentLocale && this.translaterService.translate && this.translaterService.translate('SYNCHRONOUS_RESIZE' || ' ') || locales && locales.TEXT_SYNCHRONOUS_RESIZE;
+          output = title || enableTranslate && this.translaterService?.getCurrentLocale && this.translaterService?.translate(`${translationPrefix}SYNCHRONOUS_RESIZE` || ' ') || locales?.TEXT_SYNCHRONOUS_RESIZE;
           break;
         default:
           output = title;

diff --git a/packages/common/src/extensions/gridMenuExtension.ts b/packages/common/src/extensions/gridMenuExtension.ts
@@ -22,6 +22,7 @@ import { SortService } from '../services/sort.service';
 import { SharedService } from '../services/shared.service';
 import { TranslaterService } from '../services/translater.service';
 import { refreshBackendDataset } from '../services/backend-utilities';
+import { getTranslationPrefix } from '../services/utilities';
 
 // using external non-typed js libraries
 declare const Slick: any;
@@ -199,6 +200,8 @@ export class GridMenuExtension implements Extension {
   private addGridMenuCustomCommands(originalCustomItems: Array<GridMenuItem | 'divider'>) {
     const backendApi = this.sharedService.gridOptions.backendServiceApi || null;
     const gridMenuCustomItems: Array<GridMenuItem | 'divider'> = [];
+    const gridOptions = this.sharedService.gridOptions;
+    const translationPrefix = getTranslationPrefix(gridOptions);
 
     if (this.sharedService.gridOptions && (this.sharedService.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad)) {
       // show grid menu: Clear all Filters
@@ -208,7 +211,7 @@ export class GridMenuExtension implements Extension {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
-              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('CLEAR_ALL_FILTERS') : this._locales && this._locales.TEXT_CLEAR_ALL_FILTERS,
+              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}CLEAR_ALL_FILTERS`) : this._locales && this._locales.TEXT_CLEAR_ALL_FILTERS,
               disabled: false,
               command: commandName,
               positionOrder: 50
@@ -224,7 +227,7 @@ export class GridMenuExtension implements Extension {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.sharedService.gridOptions.gridMenu.iconToggleFilterCommand || 'fa fa-random',
-              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('TOGGLE_FILTER_ROW') : this._locales && this._locales.TEXT_TOGGLE_FILTER_ROW,
+              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}TOGGLE_FILTER_ROW`) : this._locales && this._locales.TEXT_TOGGLE_FILTER_ROW,
               disabled: false,
               command: commandName,
               positionOrder: 52
@@ -234,13 +237,13 @@ export class GridMenuExtension implements Extension {
       }
 
       // show grid menu: refresh dataset
-      if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideRefreshDatasetCommand /* && backendApi */) {
+      if (backendApi && this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideRefreshDatasetCommand) {
         const commandName = 'refresh-dataset';
         if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.sharedService.gridOptions.gridMenu.iconRefreshDatasetCommand || 'fa fa-refresh',
-              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('REFRESH_DATASET') : this._locales && this._locales.TEXT_REFRESH_DATASET,
+              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}REFRESH_DATASET`) : this._locales && this._locales.TEXT_REFRESH_DATASET,
               disabled: false,
               command: commandName,
               positionOrder: 56
@@ -258,7 +261,7 @@ export class GridMenuExtension implements Extension {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.sharedService.gridOptions.gridMenu.iconTogglePreHeaderCommand || 'fa fa-random',
-              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('TOGGLE_PRE_HEADER_ROW') : this._locales && this._locales.TEXT_TOGGLE_PRE_HEADER_ROW,
+              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}TOGGLE_PRE_HEADER_ROW`) : this._locales && this._locales.TEXT_TOGGLE_PRE_HEADER_ROW,
               disabled: false,
               command: commandName,
               positionOrder: 52
@@ -276,7 +279,7 @@ export class GridMenuExtension implements Extension {
           gridMenuCustomItems.push(
             {
               iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
-              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('CLEAR_ALL_SORTING') : this._locales && this._locales.TEXT_CLEAR_ALL_SORTING,
+              title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}CLEAR_ALL_SORTING`) : this._locales && this._locales.TEXT_CLEAR_ALL_SORTING,
               disabled: false,
               command: commandName,
               positionOrder: 51
@@ -293,7 +296,7 @@ export class GridMenuExtension implements Extension {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportCsvCommand || 'fa fa-download',
-            title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('EXPORT_TO_CSV') : this._locales && this._locales.TEXT_EXPORT_TO_CSV,
+            title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}EXPORT_TO_CSV`) : this._locales && this._locales.TEXT_EXPORT_TO_CSV,
             disabled: false,
             command: commandName,
             positionOrder: 53
@@ -309,7 +312,7 @@ export class GridMenuExtension implements Extension {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
-            title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('EXPORT_TO_EXCEL') : this._locales && this._locales.TEXT_EXPORT_TO_EXCEL,
+            title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}EXPORT_TO_EXCEL`) : this._locales && this._locales.TEXT_EXPORT_TO_EXCEL,
             disabled: false,
             command: commandName,
             positionOrder: 54
@@ -325,7 +328,7 @@ export class GridMenuExtension implements Extension {
         gridMenuCustomItems.push(
           {
             iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportTextDelimitedCommand || 'fa fa-download',
-            title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate('EXPORT_TO_TAB_DELIMITED') : this._locales && this._locales.TEXT_EXPORT_TO_TAB_DELIMITED,
+            title: this.sharedService.gridOptions.enableTranslate ? this.translaterService.translate(`${translationPrefix}EXPORT_TO_TAB_DELIMITED`) : this._locales && this._locales.TEXT_EXPORT_TO_TAB_DELIMITED,
             disabled: false,
             command: commandName,
             positionOrder: 55