Skip to content

Commit

Permalink
Merge pull request #3549 from IgniteUI/sstoyanov/grid-locale-master
Browse files Browse the repository at this point in the history
Add locale property to igx-grid - master
  • Loading branch information
kdinev authored Jan 10, 2019
2 parents a6d2a83 + 8d8541d commit 50d66b1
Show file tree
Hide file tree
Showing 14 changed files with 95 additions and 31 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +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 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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
* ```
Expand All @@ -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
* <igx-calendar [locale] = "de"></igx-calendar>
* ```
Expand Down Expand Up @@ -610,7 +610,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
/**
*@hidden
*/
private _locale = 'en';
private _locale = window.navigator.language;
/**
*@hidden
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,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
*<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>
*```
*/
@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.
Expand Down Expand Up @@ -675,8 +675,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);
}

/**
Expand All @@ -685,18 +685,14 @@ 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 = () => { };

private _onChangeCallback: (_: Date) => void = () => { };
}

class Constants {
public static readonly DEFAULT_LOCALE_DATE = 'en';
}

/**
* The IgxDatePickerModule provides the {@link IgxDatePickerComponent} inside your application.
*/
Expand Down
1 change: 1 addition & 0 deletions projects/igniteui-angular/src/lib/grids/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/grids/cell.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
</ng-container>
<ng-template #default>
<div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}</div>
<div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
</ng-template>
</ng-template>
<ng-template #inlineEditor let-cell="cell">
Expand All @@ -22,7 +22,7 @@
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
</ng-container>
<ng-container *ngIf="column.dataType === 'date'">
<igx-date-picker (onSelection)="editValue = $event" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-date-picker>
<igx-date-picker (onSelection)="editValue = $event" [locale]="grid.locale" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-date-picker>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="template; context: context">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
</ng-template>

<ng-template #defaultDateUI>
<igx-date-picker tabindex="0" [(ngModel)]="value" [locale]="locale" (onClose)="datePickerClose()">
<igx-date-picker tabindex="0" [(ngModel)]="value" [locale]="filteringService.grid.locale" (onClose)="datePickerClose()">
<ng-template igxDatePickerTemplate let-openDialog="openDialog" let-displayData="displayData">
<igx-input-group type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true">
<igx-prefix #inputGroupPrefix
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
this.filter();
}

get locale() {
return window.navigator.language;
}

@ViewChild('defaultFilterUI', { read: TemplateRef })
protected defaultFilterUI: TemplateRef<any>;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -38,7 +38,7 @@ export class IgxFilteringService implements OnDestroy {
private columnToExpressionsMap = new Map<string, ExpressionUI[]>();
private filterPipe = new IgxGridFilterConditionPipe();
private titlecasePipe = new TitleCasePipe();
private datePipe = new DatePipe(window.navigator.language);
private _datePipe: IgxDatePipeComponent;
private columnStartIndex = -1;

public gridId: string;
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -286,7 +293,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;
}
Expand Down
21 changes: 21 additions & 0 deletions projects/igniteui-angular/src/lib/grids/grid-base.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
18 changes: 14 additions & 4 deletions projects/igniteui-angular/src/lib/grids/grid.common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down Expand Up @@ -574,9 +576,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, DEFAULT_DATE_FORMAT, undefined, locale);
} else {
return super.transform(value);
}
} else {
return value;
}
Expand All @@ -593,9 +599,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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<span class="igx-grid-summary__label" title="{{ summary.label }}">{{ translateSummary(summary) }}</span>
<span class="igx-grid-summary__result" title="{{ summary.summaryResult }}">
{{ 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) }}
</span>
</div>
</ng-container>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
</ng-container>
<ng-template #default>
<div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}</div>
<div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
</ng-template>
</ng-template>
<ng-template #inlineEditor let-cell="cell">
Expand All @@ -22,7 +22,7 @@
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
</ng-container>
<ng-container *ngIf="column.dataType === 'date'">
<igx-date-picker (onSelection)="editValue = $event" [value]="editValue" [labelVisibility]="false"></igx-date-picker>
<igx-date-picker (onSelection)="editValue = $event" [locale]="grid.locale" [value]="editValue" [labelVisibility]="false"></igx-date-picker>
</ng-container>
</ng-template>
<ng-container *ngIf="!inEditMode">
Expand Down

0 comments on commit 50d66b1

Please sign in to comment.