Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 8f24d2d

Browse files
Ghislain BeaulacGhislain Beaulac
Ghislain Beaulac
authored and
Ghislain Beaulac
committed
feat(translate): add optional Locale functionality
- user will be able to provide Locale set through "locales" grid option, that is directly in the App Module (with forRoot) or in any component using the grid
1 parent 5eb1ec1 commit 8f24d2d

File tree

13 files changed

+245
-115
lines changed

13 files changed

+245
-115
lines changed

‎src/app/modules/angular-slickgrid/constants.ts

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
1+
import { Locale } from './models/locale.interface';
2+
13
export class Constants {
2-
static TEXT_ALL_SELECTED = 'All Selected';
3-
static TEXT_CANCEL = 'Cancel';
4-
static TEXT_CLEAR_ALL_FILTERS = 'Clear All Filters';
5-
static TEXT_CLEAR_ALL_SORTING = 'Clear All Sorting';
6-
static TEXT_CONTAINS = 'Contains';
7-
static TEXT_COLUMNS = 'Columns';
8-
static TEXT_COMMANDS = 'Commands';
9-
static TEXT_EQUALS = 'Equals';
10-
static TEXT_ENDS_WITH = 'Ends With';
11-
static TEXT_EXPORT_IN_CSV_FORMAT = 'Export in CSV format';
12-
static TEXT_EXPORT_IN_TEXT_FORMAT = 'Export in Text format (Tab delimited)';
13-
static TEXT_FORCE_FIT_COLUMNS = 'Force fit columns';
14-
static TEXT_GROUP_BY = 'Group By';
15-
static TEXT_HIDE_COLUMN = 'Hide Column';
16-
static TEXT_REFRESH_DATASET = 'Refresh Dataset';
17-
static TEXT_REMOVE_FILTER = 'Remove Filter';
18-
static TEXT_REMOVE_SORT = 'Remove Sort';
19-
static TEXT_SAVE = 'Save';
20-
static TEXT_SELECT_ALL = 'Select All';
21-
static TEXT_SYNCHRONOUS_RESIZE = 'Synchronous resize';
22-
static TEXT_SORT_ASCENDING = 'Sort Ascending';
23-
static TEXT_SORT_DESCENDING = 'Sort Descending';
24-
static TEXT_STARTS_WITH = 'Starts With';
25-
static TEXT_TOGGLE_FILTER_ROW = 'Toggle Filter Row';
26-
static TEXT_TOGGLE_PRE_HEADER_ROW = 'Toggle Pre-Header Row';
27-
static TEXT_X_OF_Y_SELECTED = '# of % selected';
4+
static locales: Locale = {
5+
TEXT_ALL_SELECTED: 'All Selected',
6+
TEXT_CANCEL: 'Cancel',
7+
TEXT_CLEAR_ALL_FILTERS: 'Clear All Filters',
8+
TEXT_CLEAR_ALL_SORTING: 'Clear All Sorting',
9+
TEXT_CONTAINS: 'Contains',
10+
TEXT_COLUMNS: 'Columns',
11+
TEXT_COMMANDS: 'Commands',
12+
TEXT_EQUALS: 'Equals',
13+
TEXT_ENDS_WITH: 'Ends With',
14+
TEXT_EXPORT_IN_CSV_FORMAT: 'Export in CSV format',
15+
TEXT_EXPORT_IN_TEXT_FORMAT: 'Export in Text format (Tab delimited)',
16+
TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
17+
TEXT_GROUP_BY: 'Group By',
18+
TEXT_HIDE_COLUMN: 'Hide Column',
19+
TEXT_OK: 'OK',
20+
TEXT_REFRESH_DATASET: 'Refresh Dataset',
21+
TEXT_REMOVE_FILTER: 'Remove Filter',
22+
TEXT_REMOVE_SORT: 'Remove Sort',
23+
TEXT_SAVE: 'Save',
24+
TEXT_SELECT_ALL: 'Select All',
25+
TEXT_SYNCHRONOUS_RESIZE: 'Synchronous resize',
26+
TEXT_SORT_ASCENDING: 'Sort Ascending',
27+
TEXT_SORT_DESCENDING: 'Sort Descending',
28+
TEXT_STARTS_WITH: 'Starts With',
29+
TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
30+
TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
31+
TEXT_X_OF_Y_SELECTED: '# of % selected',
32+
};
2833
static VALIDATION_REQUIRED_FIELD = 'Field is required';
2934
static VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number';
3035
static VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number';

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
EditorValidatorOutput,
99
GridOption,
1010
HtmlElementPosition,
11-
KeyCode
11+
KeyCode,
12+
Locale
1213
} from './../models/index';
1314

1415
// using external non-typed js libraries
@@ -20,6 +21,7 @@ declare var $: any;
2021
* KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
2122
*/
2223
export class LongTextEditor implements Editor {
24+
private _locales: Locale;
2325
$textarea: any;
2426
$wrapper: any;
2527
defaultValue: any;
@@ -36,6 +38,8 @@ export class LongTextEditor implements Editor {
3638
if (options && options.i18n instanceof TranslateService) {
3739
this._translate = options.i18n;
3840
}
41+
// get locales provided by user in forRoot or else use default English locales via the Constants
42+
this._locales = this.gridOptions && this.gridOptions.locales || Constants.locales;
3943

4044
this.init();
4145
}
@@ -63,8 +67,8 @@ export class LongTextEditor implements Editor {
6367
const columnId = this.columnDef && this.columnDef.id;
6468
const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
6569
const title = this.columnEditor && this.columnEditor.title || '';
66-
const cancelText = this._translate && this._translate.instant && this._translate.instant('CANCEL') || Constants.TEXT_CANCEL;
67-
const saveText = this._translate && this._translate.instant && this._translate.instant('SAVE') || Constants.TEXT_SAVE;
70+
const cancelText = this._translate && this._translate.instant && this._translate.instant('CANCEL') || this._locales && this._locales.TEXT_CANCEL;
71+
const saveText = this._translate && this._translate.instant && this._translate.instant('SAVE') || this._locales && this._locales.TEXT_SAVE;
6872
const $container = $('body');
6973

7074
this.$wrapper = $(`<div class="slick-large-editor-text editor-${columnId}" />`).appendTo($container);

‎src/app/modules/angular-slickgrid/extensions/extensionUtility.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import { Injectable, Optional } from '@angular/core';
22
import { TranslateService } from '@ngx-translate/core';
33
import { Constants } from '../constants';
4-
import { ExtensionName } from '../models/index';
4+
import { ExtensionName, Locale } from '../models/index';
55
import { SharedService } from '../services/shared.service';
66

77
declare function require(name: string);
88

99
@Injectable()
1010
export class ExtensionUtility {
11+
private _locales: Locale;
12+
1113
constructor(private sharedService: SharedService, @Optional() private translate: TranslateService) {
1214
if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableTranslate && (!this.translate || !this.translate.instant)) {
1315
throw new Error('[Angular-Slickgrid] requires "ngx-translate" to be installed and configured when the grid option "enableTranslate" is enabled.');
1416
}
17+
// get locales provided by user in forRoot or else use default English locales via the Constants
18+
this._locales = this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.locales || Constants.locales;
1519
}
1620

1721
/**
@@ -87,21 +91,21 @@ export class ExtensionUtility {
8791
const title = picker && picker[propName];
8892
const titleKey = picker && picker[`${propName}Key`];
8993

90-
if (titleKey) {
94+
if (titleKey && this.translate && this.translate.instant) {
9195
output = this.translate.instant(titleKey || ' ');
9296
} else {
9397
switch (propName) {
9498
case 'customTitle':
95-
output = title || (enableTranslate ? this.translate.instant('COMMANDS') : Constants.TEXT_COMMANDS);
99+
output = title || (enableTranslate ? this.translate.instant('COMMANDS' || ' ') : this._locales && this._locales.TEXT_COMMANDS);
96100
break;
97101
case 'columnTitle':
98-
output = title || (enableTranslate ? this.translate.instant('COLUMNS') : Constants.TEXT_COLUMNS);
102+
output = title || (enableTranslate ? this.translate.instant('COLUMNS' || ' ') : this._locales && this._locales.TEXT_COLUMNS);
99103
break;
100104
case 'forceFitTitle':
101-
output = title || (enableTranslate ? this.translate.instant('FORCE_FIT_COLUMNS') : Constants.TEXT_FORCE_FIT_COLUMNS);
105+
output = title || (enableTranslate ? this.translate.instant('FORCE_FIT_COLUMNS' || ' ') : this._locales && this._locales.TEXT_FORCE_FIT_COLUMNS);
102106
break;
103107
case 'syncResizeTitle':
104-
output = title || (enableTranslate ? this.translate.instant('SYNCHRONOUS_RESIZE') : Constants.TEXT_SYNCHRONOUS_RESIZE);
108+
output = title || (enableTranslate ? this.translate.instant('SYNCHRONOUS_RESIZE' || ' ') : this._locales && this._locales.TEXT_SYNCHRONOUS_RESIZE);
105109
break;
106110
default:
107111
output = title;

‎src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
GridOption,
1212
GridMenu,
1313
GridMenuItem,
14+
Locale,
1415
SlickEventHandler,
1516
} from '../models';
1617
import { ExportService } from '../services/export.service';
@@ -29,6 +30,7 @@ export class GridMenuExtension implements Extension {
2930
private _addon: any;
3031
private _areVisibleColumnDifferent = false;
3132
private _eventHandler: SlickEventHandler;
33+
private _locales: Locale;
3234
private _userOriginalGridMenu: GridMenu;
3335

3436
constructor(
@@ -72,6 +74,9 @@ export class GridMenuExtension implements Extension {
7274
this._userOriginalGridMenu = { ...this.sharedService.gridOptions.gridMenu };
7375

7476
if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu) {
77+
// get locales provided by user in forRoot or else use default English locales via the Constants
78+
this._locales = this.sharedService.gridOptions && this.sharedService.gridOptions.locales || Constants.locales;
79+
7580
// dynamically import the SlickGrid plugin (addon) with RequireJS
7681
this.extensionUtility.loadExtensionDynamically(ExtensionName.gridMenu);
7782
this.sharedService.gridOptions.gridMenu = { ...this.getDefaultGridMenuOptions(), ...this.sharedService.gridOptions.gridMenu };
@@ -231,7 +236,7 @@ export class GridMenuExtension implements Extension {
231236
gridMenuCustomItems.push(
232237
{
233238
iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
234-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('CLEAR_ALL_FILTERS') : Constants.TEXT_CLEAR_ALL_FILTERS,
239+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('CLEAR_ALL_FILTERS') : this._locales && this._locales.TEXT_CLEAR_ALL_FILTERS,
235240
disabled: false,
236241
command: 'clear-filter',
237242
positionOrder: 50
@@ -244,7 +249,7 @@ export class GridMenuExtension implements Extension {
244249
gridMenuCustomItems.push(
245250
{
246251
iconCssClass: this.sharedService.gridOptions.gridMenu.iconToggleFilterCommand || 'fa fa-random',
247-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('TOGGLE_FILTER_ROW') : Constants.TEXT_TOGGLE_FILTER_ROW,
252+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('TOGGLE_FILTER_ROW') : this._locales && this._locales.TEXT_TOGGLE_FILTER_ROW,
248253
disabled: false,
249254
command: 'toggle-filter',
250255
positionOrder: 52
@@ -257,7 +262,7 @@ export class GridMenuExtension implements Extension {
257262
gridMenuCustomItems.push(
258263
{
259264
iconCssClass: this.sharedService.gridOptions.gridMenu.iconRefreshDatasetCommand || 'fa fa-refresh',
260-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('REFRESH_DATASET') : Constants.TEXT_REFRESH_DATASET,
265+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('REFRESH_DATASET') : this._locales && this._locales.TEXT_REFRESH_DATASET,
261266
disabled: false,
262267
command: 'refresh-dataset',
263268
positionOrder: 54
@@ -272,7 +277,7 @@ export class GridMenuExtension implements Extension {
272277
gridMenuCustomItems.push(
273278
{
274279
iconCssClass: this.sharedService.gridOptions.gridMenu.iconTogglePreHeaderCommand || 'fa fa-random',
275-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('TOGGLE_PRE_HEADER_ROW') : Constants.TEXT_TOGGLE_PRE_HEADER_ROW,
280+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('TOGGLE_PRE_HEADER_ROW') : this._locales && this._locales.TEXT_TOGGLE_PRE_HEADER_ROW,
276281
disabled: false,
277282
command: 'toggle-preheader',
278283
positionOrder: 52
@@ -287,7 +292,7 @@ export class GridMenuExtension implements Extension {
287292
gridMenuCustomItems.push(
288293
{
289294
iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
290-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('CLEAR_ALL_SORTING') : Constants.TEXT_CLEAR_ALL_SORTING,
295+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('CLEAR_ALL_SORTING') : this._locales && this._locales.TEXT_CLEAR_ALL_SORTING,
291296
disabled: false,
292297
command: 'clear-sorting',
293298
positionOrder: 51
@@ -301,7 +306,7 @@ export class GridMenuExtension implements Extension {
301306
gridMenuCustomItems.push(
302307
{
303308
iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportCsvCommand || 'fa fa-download',
304-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('EXPORT_TO_CSV') : Constants.TEXT_EXPORT_IN_CSV_FORMAT,
309+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('EXPORT_TO_CSV') : this._locales && this._locales.TEXT_EXPORT_IN_CSV_FORMAT,
305310
disabled: false,
306311
command: 'export-csv',
307312
positionOrder: 53
@@ -313,7 +318,7 @@ export class GridMenuExtension implements Extension {
313318
gridMenuCustomItems.push(
314319
{
315320
iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportTextDelimitedCommand || 'fa fa-download',
316-
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('EXPORT_TO_TAB_DELIMITED') : Constants.TEXT_EXPORT_IN_TEXT_FORMAT,
321+
title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant('EXPORT_TO_TAB_DELIMITED') : this._locales && this._locales.TEXT_EXPORT_IN_TEXT_FORMAT,
317322
disabled: false,
318323
command: 'export-text-delimited',
319324
positionOrder: 54

‎src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
HeaderMenuItem,
1212
HeaderMenuOnCommandArgs,
1313
HeaderMenuOnBeforeMenuShowArgs,
14+
Locale,
1415
SlickEventHandler,
1516
} from '../models/index';
1617
import { FilterService } from '../services/filter.service';
@@ -25,6 +26,7 @@ declare var Slick: any;
2526
export class HeaderMenuExtension implements Extension {
2627
private _addon: any;
2728
private _eventHandler: SlickEventHandler;
29+
private _locales: Locale;
2830

2931
constructor(
3032
private extensionUtility: ExtensionUtility,
@@ -64,6 +66,9 @@ export class HeaderMenuExtension implements Extension {
6466
*/
6567
register(): any {
6668
if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
69+
// get locales provided by user in forRoot or else use default English locales via the Constants
70+
this._locales = this.sharedService.gridOptions && this.sharedService.gridOptions.locales || Constants.locales;
71+
6772
// dynamically import the SlickGrid plugin (addon) with RequireJS
6873
this.extensionUtility.loadExtensionDynamically(ExtensionName.headerMenu);
6974
this.sharedService.gridOptions.headerMenu = { ...this.getDefaultHeaderMenuOptions(), ...this.sharedService.gridOptions.headerMenu };
@@ -123,15 +128,15 @@ export class HeaderMenuExtension implements Extension {
123128
if (columnHeaderMenuItems.filter((item: HeaderMenuItem) => item.command === 'sort-asc').length === 0) {
124129
columnHeaderMenuItems.push({
125130
iconCssClass: headerMenuOptions.iconSortAscCommand || 'fa fa-sort-asc',
126-
title: options.enableTranslate ? this.translate.instant('SORT_ASCENDING') : Constants.TEXT_SORT_ASCENDING,
131+
title: options.enableTranslate ? this.translate.instant('SORT_ASCENDING') : this._locales && this._locales.TEXT_SORT_ASCENDING,
127132
command: 'sort-asc',
128133
positionOrder: 50
129134
});
130135
}
131136
if (columnHeaderMenuItems.filter((item: HeaderMenuItem) => item.command === 'sort-desc').length === 0) {
132137
columnHeaderMenuItems.push({
133138
iconCssClass: headerMenuOptions.iconSortDescCommand || 'fa fa-sort-desc',
134-
title: options.enableTranslate ? this.translate.instant('SORT_DESCENDING') : Constants.TEXT_SORT_DESCENDING,
139+
title: options.enableTranslate ? this.translate.instant('SORT_DESCENDING') : this._locales && this._locales.TEXT_SORT_DESCENDING,
135140
command: 'sort-desc',
136141
positionOrder: 51
137142
});
@@ -145,7 +150,7 @@ export class HeaderMenuExtension implements Extension {
145150
if (!headerMenuOptions.hideClearSortCommand && columnHeaderMenuItems.filter((item: HeaderMenuItem) => item.command === 'clear-sort').length === 0) {
146151
columnHeaderMenuItems.push({
147152
iconCssClass: headerMenuOptions.iconClearSortCommand || 'fa fa-unsorted',
148-
title: options.enableTranslate ? this.translate.instant('REMOVE_SORT') : Constants.TEXT_REMOVE_SORT,
153+
title: options.enableTranslate ? this.translate.instant('REMOVE_SORT') : this._locales && this._locales.TEXT_REMOVE_SORT,
149154
command: 'clear-sort',
150155
positionOrder: 54
151156
});
@@ -157,7 +162,7 @@ export class HeaderMenuExtension implements Extension {
157162
if (!headerMenuOptions.hideClearFilterCommand && columnHeaderMenuItems.filter((item: HeaderMenuItem) => item.command === 'clear-filter').length === 0) {
158163
columnHeaderMenuItems.push({
159164
iconCssClass: headerMenuOptions.iconClearFilterCommand || 'fa fa-filter',
160-
title: options.enableTranslate ? this.translate.instant('REMOVE_FILTER') : Constants.TEXT_REMOVE_FILTER,
165+
title: options.enableTranslate ? this.translate.instant('REMOVE_FILTER') : this._locales && this._locales.TEXT_REMOVE_FILTER,
161166
command: 'clear-filter',
162167
positionOrder: 53
163168
});
@@ -168,7 +173,7 @@ export class HeaderMenuExtension implements Extension {
168173
if (headerMenuOptions && !headerMenuOptions.hideColumnHideCommand && columnHeaderMenuItems.filter((item: HeaderMenuItem) => item.command === 'hide').length === 0) {
169174
columnHeaderMenuItems.push({
170175
iconCssClass: headerMenuOptions.iconColumnHideCommand || 'fa fa-times',
171-
title: options.enableTranslate ? this.translate.instant('HIDE_COLUMN') : Constants.TEXT_HIDE_COLUMN,
176+
title: options.enableTranslate ? this.translate.instant('HIDE_COLUMN') : this._locales && this._locales.TEXT_HIDE_COLUMN,
172177
command: 'hide',
173178
positionOrder: 55
174179
});
@@ -229,19 +234,19 @@ export class HeaderMenuExtension implements Extension {
229234
columnHeaderMenuItems.forEach((item) => {
230235
switch (item.command) {
231236
case 'clear-filter':
232-
item.title = this.translate.instant('REMOVE_FILTER') || Constants.TEXT_REMOVE_FILTER;
237+
item.title = this.translate.instant('REMOVE_FILTER') || this._locales && this._locales.TEXT_REMOVE_FILTER;
233238
break;
234239
case 'clear-sort':
235-
item.title = this.translate.instant('REMOVE_SORT') || Constants.TEXT_REMOVE_SORT;
240+
item.title = this.translate.instant('REMOVE_SORT') || this._locales && this._locales.TEXT_REMOVE_SORT;
236241
break;
237242
case 'sort-asc':
238-
item.title = this.translate.instant('SORT_ASCENDING') || Constants.TEXT_SORT_ASCENDING;
243+
item.title = this.translate.instant('SORT_ASCENDING') || this._locales && this._locales.TEXT_SORT_ASCENDING;
239244
break;
240245
case 'sort-desc':
241-
item.title = this.translate.instant('SORT_DESCENDING') || Constants.TEXT_SORT_DESCENDING;
246+
item.title = this.translate.instant('SORT_DESCENDING') || this._locales && this._locales.TEXT_SORT_DESCENDING;
242247
break;
243248
case 'hide':
244-
item.title = this.translate.instant('HIDE_COLUMN') || Constants.TEXT_HIDE_COLUMN;
249+
item.title = this.translate.instant('HIDE_COLUMN') || this._locales && this._locales.TEXT_HIDE_COLUMN;
245250
break;
246251
}
247252

0 commit comments

Comments
 (0)