Merge pull request #8251 from IgniteUI/use-ngDateDecimalPipes-master

Use default Angular Date and Decimal Pipe, localize grid summaries

Author: zdrawku

CHANGELOG.md

@@ -48,7 +48,7 @@ All notable changes for each version of this project will be documented in this
     - `cellEditExit` is a new event that fires when cell exits edit mode
     - `rowEditExit` is a new event that fires when row exits edit mode
     - Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
-    - Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
+    - Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
         - `beginAddRow` method which starts the adding row UI.
         - `beginAddChild` method which starts the adding child UI.
         ```typescript
@@ -63,6 +63,22 @@ All notable changes for each version of this project will be documented in this
             </igx-action-strip>
         </igx-tree-grid>
         ```
+    - A new `locale` and `pipeArgs` parameters are introduced in the `operate` method exposed by the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`, which exposes the grid locale. Use the `locale` parameter to get localized summary data (as per the grid locale. If not passed, `locale` defaults to `'en-US'`). Use the `pipeArgs` parameter only if you want to customize the format of the date and numeric values that will be returned.
+    ```typescript
+    class MySummary extends IgxDateSummaryOperand {
+        operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
+            const pipeArgs: IColumnPipeArgs = {
+                format: 'longDate',
+                timezone: 'UTC',
+                digitsInfo: '1.1-2'
+            }
+            const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
+            return result;
+        }
+    }
+    ```  
+    - A new `pipeArgs` input property is exposed by the `IgxColumnComponent`, which is used to pass arguments to the Angular `DatePipe` and `DecimalPipe`, to format the display for date and numeric columns.
+    ```typescript
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -19,9 +19,9 @@
             formatter
                 ? (value | columnFormatter: formatter)
                 : column.dataType === 'number'
-                ? (value | igxdecimal: grid.locale)
+                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'date'
-                ? (value | igxdate: grid.locale)
+                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
                 : value
         "
         [row]="rowData"
@@ -32,9 +32,9 @@
             formatter
                 ? (value | columnFormatter: formatter)
                 : column.dataType === "number"
-                ? (value | igxdecimal: grid.locale)
+                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === "date"
-                ? (value | igxdate: grid.locale)
+                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
                 : column.dataType === "boolean"
                 ? ""
                 : value
@@ -50,7 +50,7 @@
     [cssClass]="highlightClass"
     [activeCssClass]="activeHighlightClass"
     [groupName]="gridID"
-    [value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
+    [value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'date' ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : value"
     [row]="rowData"
     [column]="this.column.field"
     [containerClass]="'igx-grid__td-text'"

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -43,10 +43,13 @@ import {
     IgxCollapsibleIndicatorTemplateDirective,
     IgxFilterCellTemplateDirective
 } from './templates.directive';
-import { MRLResizeColumnInfo, MRLColumnSizeInfo } from './interfaces';
+import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
 import { DropPosition } from '../moving/moving.service';
 import { IgxColumnGroupComponent } from './column-group.component';
 
+const DEFAULT_DATE_FORMAT = 'mediumDate';
+const DEFAULT_DIGITS_INFO = '1.0-3';
+
 /**
  * **Ignite UI for Angular Column** -
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html#columns-configuration)
@@ -1187,6 +1190,37 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
         return this._visibleWhenCollapsed;
     }
 
+    private _columnPipeArgs: IColumnPipeArgs = { format: DEFAULT_DATE_FORMAT, digitsInfo: DEFAULT_DIGITS_INFO };
+    /**
+     * @remarks
+     * Pass optional parameters for DatePipe and/or DecimalPipe to format the display value for date and numeric columns.
+     * Accepts an `IColumnPipeArgs` object with any of the `format`, `timezone` and `digitsInfo` properties.
+     * For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe
+     * @example
+     * ```typescript
+     * const pipeArgs: IColumnPipeArgs = {
+     *      format: 'longDate',
+     *      timezone: 'UTC',
+     *      digitsInfo: '1.1-2'
+     * }
+     * ```
+     * ```html
+     * <igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
+     * <igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>
+     * ```
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    set pipeArgs(value: IColumnPipeArgs) {
+        this._columnPipeArgs = Object.assign(this._columnPipeArgs, value);
+        this.grid.summaryService.clearSummaryCache();
+        (this.grid as any)._pipeTrigger++;
+        this.grid.notifyChanges();
+    }
+    get pipeArgs(): IColumnPipeArgs {
+        return this._columnPipeArgs;
+    }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/grids/columns/interfaces.ts

@@ -1,6 +1,10 @@
 import { IgxColumnComponent } from './column.component';
 
 
+/**
+ * @hidden
+ * @internal
+ */
 export interface MRLColumnSizeInfo {
     ref: IgxColumnComponent;
     width: number;
@@ -9,7 +13,26 @@ export interface MRLColumnSizeInfo {
     widthSetByUser: boolean;
 }
 
+/**
+ * @hidden
+ * @internal
+ */
 export interface MRLResizeColumnInfo {
     target: IgxColumnComponent;
     spanUsed: number;
 }
+
+export interface IColumnPipeArgs {
+    /** The date/time components that a date column will display, using predefined options or a custom format string. */
+    format?: string;
+    /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
+    timezone?: string;
+    /**
+     * Decimal representation options, specified by a string in the following format:
+     * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
+     * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
+     * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
+     * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
+     */
+    digitsInfo?: string;
+}

projects/igniteui-angular/src/lib/grids/common/column.interface.ts

@@ -2,6 +2,7 @@ import { TemplateRef } from '@angular/core';
 import { DataType } from '../../data-operations/data-util';
 import { ISortingStrategy } from '../../data-operations/sorting-strategy';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { IColumnPipeArgs } from '../columns/interfaces';
 
 /**
  * @hidden
@@ -44,5 +45,6 @@ export interface ColumnType {
     topLevelParent?: ColumnType;
     parent?: ColumnType;
     hasLastPinnedChildColumn: boolean;
+    pipeArgs: IColumnPipeArgs;
     getGridTemplate(isRow: boolean, isIE: boolean): string;
 }

projects/igniteui-angular/src/lib/grids/common/grid-pipes.module.ts

@@ -9,8 +9,6 @@ import {
     IgxGridCellStyleClassesPipe,
     IgxGridPaginatorOptionsPipe,
     IgxHasVisibleColumnsPipe,
-    IgxDatePipeComponent,
-    IgxDecimalPipeComponent,
     IgxGridRowPinningPipe,
     IgxColumnActionEnabledPipe,
     IgxFilterActionColumnsPipe,
@@ -24,8 +22,6 @@ import {
 
 @NgModule({
     declarations: [
-        IgxDatePipeComponent,
-        IgxDecimalPipeComponent,
         IgxGridFilterConditionPipe,
         IgxGridTransactionPipe,
         IgxGridNotGroupedPipe,
@@ -45,8 +41,6 @@ import {
         IgxColumnFormatterPipe
     ],
     exports: [
-        IgxDatePipeComponent,
-        IgxDecimalPipeComponent,
         IgxGridFilterConditionPipe,
         IgxGridTransactionPipe,
         IgxGridNotGroupedPipe,

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -4,6 +4,9 @@ import { EventEmitter } from '@angular/core';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IGridResourceStrings } from '../../core/i18n/grid-resources';
 import { ISortingExpression } from '../../data-operations/sorting-expression.interface';
+import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
+import { TransactionService, Transaction, State } from '../../services/public_api';
+import { ITreeGridRecord } from '../tree-grid/public_api';
 
 export interface IGridDataBindable {
     data: any[];
@@ -46,6 +49,8 @@ export interface GridType extends IGridDataBindable {
     summariesRowList: any;
     headerContainer: any;
     dataView: any[];
+    transactions: TransactionService<Transaction, State>;
+    defaultSummaryHeight: number;
 
     rowInEditMode: any;
     rowEditTabs: any;
@@ -56,6 +61,8 @@ export interface GridType extends IGridDataBindable {
 
     sortingExpressions: ISortingExpression[];
     sortingExpressionsChange: EventEmitter<ISortingExpression[]>;
+    filteringExpressionsTree: IFilteringExpressionsTree;
+    filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
     advancedFilteringExpressionsTree: IFilteringExpressionsTree;
     advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
 
@@ -66,6 +73,22 @@ export interface GridType extends IGridDataBindable {
     isColumnGrouped(fieldName: string): boolean;
     isDetailRecord(rec: any): boolean;
     isGroupByRecord(rec: any): boolean;
+    notifyChanges(repaint: boolean): void;
+}
+
+/**
+ * An interface describing a Flat Grid type
+ */
+export interface FlatGridType extends GridType {
+    groupingExpressions: IGroupingExpression[];
+    groupingExpressionsChange: EventEmitter<IGroupingExpression[]>;
+}
+
+/**
+ * An interface describing a Tree Grid type
+ */
+export interface TreeGridType extends GridType {
+    records: Map<any, ITreeGridRecord>;
 }
 
 export interface GridSVGIcon {

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -1,10 +1,9 @@
-import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
+import { Pipe, PipeTransform, Inject } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { DataUtil } from '../../data-operations/data-util';
 import { cloneArray, resolveNestedPath } from '../../core/utils';
 import { GridType } from './grid.interface';
-import { DatePipe, DecimalPipe } from '@angular/common';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from './enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
@@ -163,60 +162,6 @@ export class IgxHasVisibleColumnsPipe implements PipeTransform {
 
 }
 
-
-/**
- * @hidden
- * @internal
- */
-@Pipe({
-    name: 'igxdate'
-})
-export class IgxDatePipeComponent extends DatePipe implements PipeTransform {
-
-    private readonly DEFAULT_DATE_FORMAT = 'mediumDate';
-
-    constructor(@Inject(LOCALE_ID) locale: string) {
-        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-        super(locale);
-    }
-    transform(value: any, locale: string): string {
-        if (value && value instanceof Date) {
-            if (locale) {
-                return super.transform(value, this.DEFAULT_DATE_FORMAT, undefined, locale);
-            } else {
-                return super.transform(value);
-            }
-        } else {
-            return value;
-        }
-    }
-}
-
-/**
- * @hidden
- * @internal
- */
-@Pipe({
-    name: 'igxdecimal'
-})
-export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransform {
-    constructor(@Inject(LOCALE_ID) locale: string) {
-        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-        super(locale);
-    }
-    transform(value: any, locale: string): string {
-        if (value && typeof value === 'number') {
-            if (locale) {
-                return super.transform(value, undefined, locale);
-            } else {
-                return super.transform(value);
-            }
-        } else {
-            return value;
-        }
-    }
-}
-
 /**
  * @hidden
  */

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -108,7 +108,7 @@ <h6 class="igx-filter-empty__title">
                         {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}
                     </span>
                     <span igxSuffix *ngIf="!expressionItem.expression.condition.isUnary">
-                        {{ isDate(expressionItem.expression.searchVal) ? (expressionItem.expression.searchVal | igxdate:grid.locale) : expressionItem.expression.searchVal }}
+                        {{ isDate(expressionItem.expression.searchVal) ? (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):getTimezone(expressionItem.expression.fieldName):grid.locale) : expressionItem.expression.searchVal }}
                     </span>
                 </igx-chip>
                 <div class="igx-filter-tree__expression-actions"
@@ -191,7 +191,7 @@ <h6 class="igx-filter-empty__title">
                                     (click)="openDialog(dropDownTarget.element.nativeElement)"
                                     [placeholder]="grid.resourceStrings.igx_grid_filter_row_date_placeholder"
                                     autocomplete="off"
-                                    [value]="value | igxdate: grid.locale"
+                                    [value]="value | date:selectedColumn.pipeArgs.format:selectedColumn.pipeArgs.timezone:grid.locale"
                                     [readonly]="true"
                                     [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"/>
                         </igx-input-group>

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -1038,6 +1038,20 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         this._overlayComponentId = overlayComponentId;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public getFormat(field: string) {
+        return this.grid.getColumnByName(field).pipeArgs.format;
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public getTimezone(field: string) {
+        return this.grid.getColumnByName(field).pipeArgs.timezone;
+    }
+
     /**
      * @hidden @internal
      */