From 3a53fd0246beedf060319a39328390d2b077af34 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Fri, 4 Jan 2019 11:56:16 +0200 Subject: [PATCH 1/2] feat(igx-grid): Add locale property to igx-grid, #3455 --- CHANGELOG.md | 4 +++ .../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 | 4 +-- .../grid-filtering-row.component.html | 2 +- .../filtering/grid-filtering-row.component.ts | 4 --- .../grids/filtering/grid-filtering.service.ts | 8 ++--- .../src/lib/grids/grid-base.component.ts | 21 ++++++++++++++ .../src/lib/grids/grid.common.ts | 16 +++++++--- .../lib/grids/grid/grid-filtering-ui.spec.ts | 29 +++++++++++++++++++ .../summaries/summary-cell.component.html | 2 +- .../grids/summaries/summary-cell.component.ts | 5 +++- .../grids/tree-grid/tree-cell.component.html | 4 +-- 14 files changed, 89 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd4d4546ab7..78fd8c3be27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes for each version of this project will be documented in this file. ## 7.1.1 +### Features +- `igxGrid` + - `locale` property added. If not set, it returns browser's languge. All child components will use it as locale. + ### Bug Fixes * onSortingDone is not fired when sorting indicator of a header in the group by area is clicked ([#3257](https://github.com/IgniteUI/igniteui-angular/issues/3257)) 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..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) }}
 @@ -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/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-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 40e1bb6fad8..3f4c5449570 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.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/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index b6e858f7f6a..2619e838d7c 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'; @@ -2752,6 +2754,33 @@ 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); + registerLocaleData(localeDE); + 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 { 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 bb027d18311..d35fd3d5638 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 @@ -165,7 +165,10 @@ export class IgxSummaryCellComponent { return this.column.grid.defaultRowHeight; } - private get grid() { + /** + * @hidden + */ + public get grid() { return (this.column.grid as any); } 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 1edcf9b1a710db85d556dc75599c6a4f501af265 Mon Sep 17 00:00:00 2001 From: Stefan Stoyanov Date: Mon, 7 Jan 2019 16:48:54 +0200 Subject: [PATCH 2/2] 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 | 3 ++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78fd8c3be27..f0bb65c0db1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ All notable changes for each version of this project will be documented in this ## 7.1.1 ### Features - `igxGrid` - - `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. ### Bug Fixes 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 0dcbe07ac17..38746010f8a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid.common.ts +++ b/projects/igniteui-angular/src/lib/grids/grid.common.ts @@ -26,6 +26,7 @@ import { ConnectedPositioningStrategy } from '../services'; import { getPointFromPositionsSettings, VerticalAlignment, PositionSettings } from '../services/overlay/utilities'; import { scaleInVerBottom, scaleInVerTop } from '../animations/main'; +const DEFAULT_DATE_FORMAT = 'mediumDate'; /** * @hidden */ @@ -556,7 +557,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); }