From d3e42e570ff4b14ec5675021d0c9798faab47365 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Wed, 19 Dec 2018 16:31:41 +0200 Subject: [PATCH 1/5] feat(igx-grid): Add locale property to igx-grid, #3455 # Conflicts: # CHANGELOG.md # projects/igniteui-angular/src/lib/grids/README.md --- CHANGELOG.md | 1 + .../src/lib/calendar/calendar.component.ts | 6 ++--- .../lib/date-picker/date-picker.component.ts | 14 ++++------ .../igniteui-angular/src/lib/grids/README.md | 1 + .../src/lib/grids/cell.component.html | 2 +- .../grid-filtering-row.component.html | 2 +- .../filtering/grid-filtering-row.component.ts | 4 --- .../src/lib/grids/grid-base.component.ts | 21 +++++++++++++++ .../lib/grids/grid/grid-filtering-ui.spec.ts | 26 +++++++++++++++++++ 9 files changed, 59 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c3ff4f70e0..06c3c4a3073 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ All notable changes for each version of this project will be documented in this - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983)) - Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled. - `clearSummaryCache()` and `recalculateSummaries()` methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed. + - `locale` property added. If not set, it returns browser's languge. All child components will use it as locale. - **Breaking change** `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of `IgxSummaryResult` with proper length. - `IgxIconModule`: - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated. diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index 5bb9d3abe59..fab1af6b0dc 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts @@ -142,7 +142,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor { /** * Gets the `locale` of the calendar. - * Default value is `"en"`. + * By default the browser's language is used. * ```typescript * let locale = this.calendar.locale; * ``` @@ -156,7 +156,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor { /** * Sets the `locale` of the calendar. * Expects a valid BCP 47 language tag. - * Default value is `"en"`. + * By default the browser's language is used. * ```html * * ``` @@ -610,7 +610,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor { /** *@hidden */ - private _locale = 'en'; + private _locale = window.navigator.language; /** *@hidden */ diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index f1ac34d5ace..b086b5fc417 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -148,12 +148,12 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi public labelVisibility = true; /** - *An @Input property that sets locales. Default locale is en. + *An @Input property that sets locales. By default the browser's language is used. *```html * *``` */ - @Input() public locale: string = Constants.DEFAULT_LOCALE_DATE; + @Input() public locale: string = window.navigator.language; /** *An @Input property that sets on which day the week starts. @@ -677,8 +677,8 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi }); } - private _setLocaleToDate(value: Date, locale: string = Constants.DEFAULT_LOCALE_DATE): string { - return value.toLocaleDateString(locale); + private _setLocaleToDate(value: Date): string { + return value.toLocaleDateString(this.locale); } /** @@ -687,7 +687,7 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi * @param date passed date */ private _customFormatChecker(formatter: (_: Date) => string, date: Date) { - return this.formatter ? this.formatter(date) : this._setLocaleToDate(date, this.locale); + return this.formatter ? this.formatter(date) : this._setLocaleToDate(date); } private _onTouchedCallback: () => void = () => { }; @@ -695,10 +695,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi private _onChangeCallback: (_: Date) => void = () => { }; } -class Constants { - public static readonly DEFAULT_LOCALE_DATE = 'en'; -} - /** * The IgxDatePickerModule provides the {@link IgxDatePickerComponent} inside your application. */ diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index f9e58e5a17c..93f3e07a04a 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -186,6 +186,7 @@ Below is the list of all inputs that the developers may set to configure the gri |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. | |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. | |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels. | +|`locale`| string | Determines the locale of the grid. By default returns browser's language. | ### Outputs diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index b24af170912..98344e440b6 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -22,7 +22,7 @@ - + diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html index 1a1d212c20c..1178764961d 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html @@ -36,7 +36,7 @@ - + ; diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 74fa509ebb0..ad63fa1235e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -187,6 +187,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements private _resourceStrings = CurrentResourceStrings.GridResStrings; private _emptyGridMessage = null; private _emptyFilteredGridMessage = null; + private _locale = null; /** * An accessor that sets the resource strings. * By default it uses EN resources. @@ -292,6 +293,26 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements } } + /** + * Returns the locale of the grid. + * If not set, returns browser's language. + */ + @Input() + get locale(): string { + if (this._locale) { + return this._locale; + } else { + return window.navigator.language; + } + } + + /** + * Sets the locale of the grid. + */ + set locale(value) { + this._locale = value; + } + /** * Returns an array of objects containing the filtered data in the `IgxGridComponent`. * ```typescript diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 775cc8bb78a..5b7b61e5275 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -2752,6 +2752,32 @@ describe('IgxGrid - Filtering Row UI actions', () => { filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); expect(filteringRow).toBeNull(); })); + + it('should correctly apply locale to datePicker.', fakeAsync(() => { + const fix = TestBed.createComponent(IgxGridFilteringMCHComponent); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + grid.locale = 'de-DE'; + + const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent)); + const dateCellChip = initialChips[3].nativeElement; + + dateCellChip.click(); + fix.detectChanges(); + + const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent)); + const input = filteringRow.query(By.directive(IgxInputDirective)); + + input.nativeElement.click(); + tick(); + fix.detectChanges(); + + const calendar = fix.debugElement.query(By.css('igx-calendar')); + const sundayLabel = calendar.nativeElement.children[1].children[1].children[0].innerText; + + expect(sundayLabel).toEqual('So'); + })); }); export class CustomFilter extends IgxFilteringOperand { From dbc2a732d2d82c9753bea5e4302617c5c0f2504b Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Thu, 20 Dec 2018 13:59:59 +0200 Subject: [PATCH 2/5] feat(igx-grid): Take locale into account for cells' values, #3455 --- .../src/lib/grids/cell.component.html | 2 +- .../grids/filtering/grid-filtering.service.ts | 8 ++++---- .../src/lib/grids/grid.common.ts | 16 ++++++++++++---- .../lib/grids/tree-grid/tree-cell.component.html | 4 ++-- 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 98344e440b6..3995a7d527e 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -4,7 +4,7 @@
{{ formatter ? formatter(value) : value }}
 -
{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}
+
{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}
 diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 0de6d013d96..a5d05658a6b 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -9,8 +9,8 @@ import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { IForOfState } from '../../directives/for-of/for_of.directive'; import { IgxGridFilterConditionPipe } from '../grid-common.pipes'; -import { TitleCasePipe, DatePipe } from '@angular/common'; -import { IgxColumnComponent, IgxColumnGroupComponent } from '../grid'; +import { TitleCasePipe } from '@angular/common'; +import { IgxColumnComponent, IgxColumnGroupComponent, IgxDatePipeComponent } from '../grid'; const FILTERING_ICONS_FONT_SET = 'filtering-icons'; @@ -38,7 +38,7 @@ export class IgxFilteringService implements OnDestroy { private columnToExpressionsMap = new Map(); private filterPipe = new IgxGridFilterConditionPipe(); private titlecasePipe = new TitleCasePipe(); - private datePipe = new DatePipe(window.navigator.language); + private datePipe = new IgxDatePipeComponent(window.navigator.language); private columnStartIndex = -1; public gridId: string; @@ -286,7 +286,7 @@ export class IgxFilteringService implements OnDestroy { if (expression.condition.isUnary) { return this.grid.resourceStrings[`igx_grid_filter_${expression.condition.name}`] || expression.condition.name; } else if (expression.searchVal instanceof Date) { - return this.datePipe.transform(expression.searchVal); + return this.datePipe.transform(expression.searchVal, this.grid.locale); } else { return expression.searchVal; } diff --git a/projects/igniteui-angular/src/lib/grids/grid.common.ts b/projects/igniteui-angular/src/lib/grids/grid.common.ts index f4b666386ad..0dcbe07ac17 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.common.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.common.ts @@ -553,9 +553,13 @@ export class IgxDatePipeComponent extends DatePipe implements PipeTransform { // D.P. constructor duplication due to es6 compilation, might be obsolete in the future super(locale); } - transform(value: any): string { + transform(value: any, locale: string): string { if (value && value instanceof Date) { - return super.transform(value); + if (locale) { + return super.transform(value, 'mediumDate', undefined, locale); + } else { + return super.transform(value); + } } else { return value; } @@ -572,9 +576,13 @@ export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransfor // D.P. constructor duplication due to es6 compilation, might be obsolete in the future super(locale); } - transform(value: any): string { + transform(value: any, locale: string): string { if (value && typeof value === 'number') { - return super.transform(value); + if (locale) { + return super.transform(value, undefined, locale); + } else { + return super.transform(value); + } } else { return value; } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 785ee533a03..8dce6564a0b 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -4,7 +4,7 @@
{{ formatter ? formatter(value) : value }}
-
{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}
+
{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}
 @@ -22,7 +22,7 @@ - + From b1bdd3fca796d19341e20f85a283ee25d75f85db Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Thu, 20 Dec 2018 14:00:15 +0200 Subject: [PATCH 3/5] feat(igx-grid): Take locale into account for summary' values, #3455 --- .../src/lib/grids/summaries/summary-cell.component.html | 2 +- .../src/lib/grids/summaries/summary-cell.component.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html index 6b429e970ff..4dfc94a49d4 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html @@ -12,7 +12,7 @@ {{ summary.label }} - {{ columnDatatype === 'number' ? (summary.summaryResult | igxdecimal) : columnDatatype === 'date' ? (summary.summaryResult | igxdate) : (summary.summaryResult) }} + {{ columnDatatype === 'number' ? (summary.summaryResult | igxdecimal: grid.locale) : columnDatatype === 'date' ? (summary.summaryResult | igxdate: grid.locale) : (summary.summaryResult) }} diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts index 60119a30d6a..c6e7b25759f 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts @@ -180,7 +180,10 @@ export class IgxSummaryCellComponent { return this.column.grid.defaultRowHeight; } - private get grid() { + /** + * @hidden + */ + public get grid() { return (this.column.grid as any); } From ecbf5d617a0935f6def5b78caa8ad3491e6df75a Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Thu, 20 Dec 2018 14:50:19 +0200 Subject: [PATCH 4/5] test(igx-grid): Add locales for de-DE, #3455 --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 5b7b61e5275..05eaa43f39c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -25,6 +25,8 @@ import { SortingDirection } from '../../data-operations/sorting-expression.inter import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy'; import { IgxGridHeaderGroupComponent } from '../grid-header-group.component'; import { changei18n, getCurrentResourceStrings } from '../../core/i18n/resources'; +import { registerLocaleData } from '@angular/common'; +import localeDE from '@angular/common/locales/de'; const FILTER_UI_ROW = 'igx-grid-filtering-row'; @@ -2755,6 +2757,7 @@ describe('IgxGrid - Filtering Row UI actions', () => { it('should correctly apply locale to datePicker.', fakeAsync(() => { const fix = TestBed.createComponent(IgxGridFilteringMCHComponent); + registerLocaleData(localeDE); fix.detectChanges(); const grid = fix.componentInstance.grid; From 8d8541d8b6f7f2f12025c8cc866b090dc8bb2738 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Wed, 9 Jan 2019 12:01:49 +0200 Subject: [PATCH 5/5] chore(igx-grid): Fix typo and make little refactoring, #3455 --- CHANGELOG.md | 2 +- .../src/lib/grids/filtering/grid-filtering.service.ts | 9 ++++++++- projects/igniteui-angular/src/lib/grids/grid.common.ts | 4 +++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 79079996747..483b26f85fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,7 +26,7 @@ All notable changes for each version of this project will be documented in this - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983)) - Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled. - `clearSummaryCache()` and `recalculateSummaries()` methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed. - - `locale` property added. If not set, it returns browser's languge. All child components will use it as locale. + - `locale` property added. If not set, it returns browser's language. All child components will use it as locale. - **Breaking change** `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of `IgxSummaryResult` with proper length. - `IgxIconModule`: - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated. diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index a5d05658a6b..d8a2e665d33 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -38,7 +38,7 @@ export class IgxFilteringService implements OnDestroy { private columnToExpressionsMap = new Map(); private filterPipe = new IgxGridFilterConditionPipe(); private titlecasePipe = new TitleCasePipe(); - private datePipe = new IgxDatePipeComponent(window.navigator.language); + private _datePipe: IgxDatePipeComponent; private columnStartIndex = -1; public gridId: string; @@ -76,6 +76,13 @@ export class IgxFilteringService implements OnDestroy { return this.gridAPI.get(this.gridId); } + public get datePipe(): IgxDatePipeComponent { + if (!this._datePipe) { + this._datePipe = new IgxDatePipeComponent(this.grid.locale); + } + return this._datePipe; + } + /** * Subscribe to grid's events. */ diff --git a/projects/igniteui-angular/src/lib/grids/grid.common.ts b/projects/igniteui-angular/src/lib/grids/grid.common.ts index b2cacf3be43..8ffaa5a4634 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.common.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.common.ts @@ -26,6 +26,8 @@ import { ConnectedPositioningStrategy } from '../services'; import { getPointFromPositionsSettings, VerticalAlignment, PositionSettings } from '../services/overlay/utilities'; import { scaleInVerBottom, scaleInVerTop } from '../animations/main'; +const DEFAULT_DATE_FORMAT = 'mediumDate'; + /** * @hidden */ @@ -577,7 +579,7 @@ export class IgxDatePipeComponent extends DatePipe implements PipeTransform { transform(value: any, locale: string): string { if (value && value instanceof Date) { if (locale) { - return super.transform(value, 'mediumDate', undefined, locale); + return super.transform(value, DEFAULT_DATE_FORMAT, undefined, locale); } else { return super.transform(value); }