Merge pull request #8284 from IgniteUI/hanastasov/fix-issue-8195-10.1.x

IgxDatePipe handle Date strings, localize Date summaries

Author: rkaraivanov

CHANGELOG.md

@@ -7,6 +7,21 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxDatePicker`
     - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - 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 {
+        const pipeArgs: IColumnPipeArgs = {
+            format: 'longDate',
+            timezone: 'UTC'
+        }
+        operate(columnData: any[], allData = [], fieldName, locale: string): IgxSummaryResult[] {
+            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.
 
 ## 10.1.0
 

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

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

@@ -42,7 +42,10 @@ import {
     IgxCollapsibleIndicatorTemplateDirective,
     IgxFilterCellTemplateDirective
 } from './templates.directive';
-import { MRLResizeColumnInfo, MRLColumnSizeInfo } from './interfaces';
+import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
+
+const DEFAULT_DATE_FORMAT = 'mediumDate';
+const DEFAULT_DIGITS_INFO = '1.0-3';
 
 /**
  * **Ignite UI for Angular Column** -
@@ -1180,6 +1183,37 @@ export class IgxColumnComponent implements AfterContentInit {
         return this._visibleWhenCollapsed;
     }
 
+    private _pipeArgs: IColumnPipeArgs = { format: DEFAULT_DATE_FORMAT, digitsInfo: DEFAULT_DIGITS_INFO };
+    /**
+     * Provide parameters for DatePipe and DecimalPipe to customize the display format 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._pipeArgs = Object.assign(this._pipeArgs, value);
+        this.grid.summaryService.clearSummaryCache();
+        (this.grid as any)._pipeTrigger++;
+        this.grid.notifyChanges();
+    }
+    get pipeArgs(): IColumnPipeArgs {
+        return this._pipeArgs;
+    }
+
+
     /**
      * @hidden
      * @internal

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

@@ -1,6 +1,9 @@
 import { IgxColumnComponent } from './column.component';
 
-
+/**
+ * @hidden
+ * @internal
+ */
 export interface MRLColumnSizeInfo {
     ref: IgxColumnComponent;
     width: number;
@@ -9,7 +12,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
@@ -43,6 +44,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,
@@ -23,8 +21,6 @@ import {
 
 @NgModule({
     declarations: [
-        IgxDatePipeComponent,
-        IgxDecimalPipeComponent,
         IgxGridFilterConditionPipe,
         IgxGridTransactionPipe,
         IgxGridNotGroupedPipe,
@@ -43,8 +39,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

@@ -110,7 +110,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"
@@ -194,7 +194,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

@@ -1036,6 +1036,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
      */