Add time and date time column types (#9334)

* feat(IgxCell): initial implementation of time and dateTime columns #7678

* feat(*): add sorting for time colimn #7678

* chore(*): update moving sample to have time and dateTime columns

* feat(filtering):  add resources for time and dateTime columns in filtering #7678

* feat(advancedFiltering): add filter template for time and dateTime columns #7678

* feat(Filtering): add filter template for time and dateTime columns #7678

* feat(Summary): add summary operand fot time column #7678

* feat(Filtering): add filtering conditions for time and dateTime columns #7678

* fix(filtering): filter data correctly #7678

* chore(*): fix build problem

* chore(*): fix tree grid fitering strategy

* chore(*): address testing comments

* chore(IgxCell): fix editing for time columns

* fix(IgxGrid): fix overlay warnings thrown on scroll #7678

* chore(*): Add test for filtering condition

* chore(*): Fix expect's for +2 new columns

* chore(*): add +2 new columns

* chore(*): Fix flickering test with kb navigation

* chore(*): Remove redundant getDateParts

* chore(*): Add dateTime filtering conditions

Co-authored-by: Zdravko Kolev <[email protected]>

Author: ddincheva

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -10,6 +10,7 @@ export interface IGridResourceStrings {
     igx_grid_filter_row_placeholder?: string;
     igx_grid_filter_row_boolean_placeholder?: string;
     igx_grid_filter_row_date_placeholder?: string;
+    igx_grid_filter_row_time_placeholder?: string;
     igx_grid_filter_operator_and?: string;
     igx_grid_complex_filter?: string;
     igx_grid_filter_operator_or?: string;
@@ -25,6 +26,10 @@ export interface IGridResourceStrings {
     igx_grid_filter_notNull?: string;
     igx_grid_filter_before?: string;
     igx_grid_filter_after?: string;
+    igx_grid_filter_at?: string;
+    igx_grid_filter_not_at?: string;
+    igx_grid_filter_at_before?: string;
+    igx_grid_filter_at_after?: string;
     igx_grid_filter_today?: string;
     igx_grid_filter_yesterday?: string;
     igx_grid_filter_thisMonth?: string;
@@ -136,6 +141,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_filter_row_placeholder: 'Add filter value',
     igx_grid_filter_row_boolean_placeholder: 'All',
     igx_grid_filter_row_date_placeholder: 'Pick up date',
+    igx_grid_filter_row_time_placeholder: 'Pick up time',
     igx_grid_filter_operator_and: 'And',
     igx_grid_filter_operator_or: 'Or',
     igx_grid_complex_filter: 'Complex Filter',
@@ -151,6 +157,10 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_filter_notNull: 'Not Null',
     igx_grid_filter_before: 'Before',
     igx_grid_filter_after: 'After',
+    igx_grid_filter_at: 'At',
+    igx_grid_filter_not_at: 'Not At',
+    igx_grid_filter_at_before: 'At or Before',
+    igx_grid_filter_at_after: 'At or After',
     igx_grid_filter_today: 'Today',
     igx_grid_filter_yesterday: 'Yesterday',
     igx_grid_filter_thisMonth: 'This Month',

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -25,6 +25,8 @@ export const DataType = mkenum({
     Number: 'number',
     Boolean: 'boolean',
     Date: 'date',
+    DateTime: 'dateTime',
+    Time: 'time',
     Currency: 'currency',
     Percent: 'percent'
 });

projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts

@@ -372,7 +372,179 @@ export class IgxDateFilteringOperand extends IgxFilteringOperand {
         return searchVal.has(target.toISOString());
     }
 
-    private validateInputData(target: Date) {
+    protected validateInputData(target: Date) {
+        if (!(target instanceof Date)) {
+            throw new Error('Could not perform filtering on \'date\' column because the datasource object type is not \'Date\'.');
+        }
+    }
+}
+
+export class IgxDateTimeFilteringOperand extends IgxDateFilteringOperand {
+    protected constructor() {
+        super();
+        let index = this.operations.indexOf(this.condition('equals'));
+        this.operations.splice(index, 1);
+        index = this.operations.indexOf(this.condition('doesNotEqual'));
+        this.operations.splice(index, 1);
+        this.operations = [{
+            name: 'equals',
+            isUnary: false,
+            iconName: 'equals',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return false;
+                }
+                this.validateInputData(target);
+                const targetp = IgxDateTimeFilteringOperand.getDateParts(target, 'yMdhms');
+                const searchp = IgxDateTimeFilteringOperand.getDateParts(searchVal, 'yMdhms');
+                return targetp.year === searchp.year &&
+                    targetp.month === searchp.month &&
+                    targetp.day === searchp.day &&
+                    targetp.hours === searchp.hours &&
+                    targetp.minutes === searchp.minutes &&
+                    targetp.seconds === searchp.seconds;
+            }
+        }, {
+            name: 'doesNotEqual',
+            isUnary: false,
+            iconName: 'not-equal',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return true;
+                }
+                this.validateInputData(target);
+                const targetp = IgxDateTimeFilteringOperand.getDateParts(target, 'yMdhms');
+                const searchp = IgxDateTimeFilteringOperand.getDateParts(searchVal, 'yMdhms');
+                return targetp.year !== searchp.year ||
+                    targetp.month !== searchp.month ||
+                    targetp.day !== searchp.day ||
+                    targetp.hours !== searchp.hours ||
+                    targetp.minutes !== searchp.minutes ||
+                    targetp.seconds !== searchp.seconds;
+            }
+        }].concat(this.operations);
+    }
+}
+
+export class IgxTimeFilteringOperand extends IgxFilteringOperand {
+    protected constructor() {
+        super();
+        this.operations = [{
+            name: 'at',
+            isUnary: false,
+            iconName: 'equals',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return false;
+                }
+                this.validateInputData(target);
+                const targetp = IgxDateFilteringOperand.getDateParts(target, 'hms');
+                const searchp = IgxDateFilteringOperand.getDateParts(searchVal, 'hms');
+                return targetp.hours === searchp.hours &&
+                    targetp.minutes === searchp.minutes &&
+                    targetp.seconds === searchp.seconds;
+            }
+        }, {
+            name: 'not_at',
+            isUnary: false,
+            iconName: 'not-equal',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return true;
+                }
+                this.validateInputData(target);
+                const targetp = IgxDateFilteringOperand.getDateParts(target, 'hms');
+                const searchp = IgxDateFilteringOperand.getDateParts(searchVal, 'hms');
+                return targetp.hours !== searchp.hours ||
+                    targetp.minutes !== searchp.minutes ||
+                    targetp.seconds !== searchp.seconds;
+            }
+        }, {
+            name: 'before',
+            isUnary: false,
+            iconName: 'is-before',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return false;
+                }
+
+                this.validateInputData(target);
+                const targetn = IgxDateFilteringOperand.getDateParts(target, 'hms');
+                const search = IgxDateFilteringOperand.getDateParts(searchVal, 'hms');
+
+                return targetn.hours < search.hours ? true : targetn.hours === search.hours && targetn.minutes < search.minutes ?
+                    true : targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds < search.seconds;
+            }
+        }, {
+            name: 'after',
+            isUnary: false,
+            iconName: 'is-after',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return false;
+                }
+
+                this.validateInputData(target);
+                const targetn = IgxDateFilteringOperand.getDateParts(target, 'hms');
+                const search = IgxDateFilteringOperand.getDateParts(searchVal, 'hms');
+
+                return targetn.hours > search.hours ? true : targetn.hours === search.hours && targetn.minutes > search.minutes ?
+                    true : targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds > search.seconds;
+            }
+        }, {
+            name: 'at_before',
+            isUnary: false,
+            iconName: 'is-before',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return false;
+                }
+
+                this.validateInputData(target);
+                const targetn = IgxDateFilteringOperand.getDateParts(target, 'hms');
+                const search = IgxDateFilteringOperand.getDateParts(searchVal, 'hms');
+                return (targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds === search.seconds) ||
+                targetn.hours < search.hours ? true : targetn.hours === search.hours && targetn.minutes < search.minutes ?
+                    true : targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds < search.seconds;
+            }
+        }, {
+            name: 'at_after',
+            isUnary: false,
+            iconName: 'is-after',
+            logic: (target: Date, searchVal: Date) => {
+                if (!target) {
+                    return false;
+                }
+
+                this.validateInputData(target);
+                const targetn = IgxDateFilteringOperand.getDateParts(target, 'hms');
+                const search = IgxDateFilteringOperand.getDateParts(searchVal, 'hms');
+                return (targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds === search.seconds) ||
+                    targetn.hours > search.hours ? true : targetn.hours === search.hours && targetn.minutes > search.minutes ?
+                    true : targetn.hours === search.hours && targetn.minutes === search.minutes && targetn.seconds > search.seconds;
+            }
+        }, {
+            name: 'empty',
+            isUnary: true,
+            iconName: 'is-empty',
+            logic: (target: Date) => target === null || target === undefined
+        }, {
+            name: 'notEmpty',
+            isUnary: true,
+            iconName: 'not-empty',
+            logic: (target: Date) => target !== null && target !== undefined
+        }].concat(this.operations);
+    }
+
+
+    protected findValueInSet(target: any, searchVal: Set<any>) {
+        if (!target) {
+            return false;
+        }
+        return searchVal.has(target);
+    }
+
+    protected validateInputData(target: Date) {
         if (!(target instanceof Date)) {
             throw new Error('Could not perform filtering on \'date\' column because the datasource object type is not \'Date\'.');
         }

projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts

@@ -4,6 +4,7 @@ import { resolveNestedPath, parseDate } from '../core/utils';
 import { GridType } from '../grids/common/grid.interface';
 
 const DateType = 'date';
+const TimeType = 'time';
 
 export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree,
@@ -25,9 +26,9 @@ export class NoopFilteringStrategy implements IFilteringStrategy {
 }
 
 export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
-    public findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, grid?: GridType): boolean {
+    public findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean {
         const cond = expr.condition;
-        const val = this.getFieldValue(rec, expr.fieldName, isDate, grid);
+        const val = this.getFieldValue(rec, expr.fieldName, isDate, isTime, grid);
         return cond.logic(val, expr.searchVal, expr.ignoreCase);
     }
 
@@ -59,9 +60,10 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
                 return true;
             } else {
                 const expression = expressions as IFilteringExpression;
-                const isDate = grid && grid.getColumnByName(expression.fieldName) ?
-                    grid.getColumnByName(expression.fieldName).dataType === DateType : false;
-                return this.findMatchByExpression(rec, expression, isDate, grid);
+                const column = grid && grid.getColumnByName(expression.fieldName);
+                const isDate = column ? column.dataType === DateType : false;
+                const isTime = column ? column.dataType === TimeType : false;
+                return this.findMatchByExpression(rec, expression, isDate, isTime, grid);
             }
         }
 
@@ -71,7 +73,7 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
     public abstract filter(data: any[], expressionsTree: IFilteringExpressionsTree,
         advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): any[];
 
-    protected abstract getFieldValue(rec: any, fieldName: string, isDate?: boolean, grid?: GridType): any;
+    protected abstract getFieldValue(rec: any, fieldName: string, isDate?: boolean, isTime?: boolean, grid?: GridType): any;
 }
 
 export class FilteringStrategy extends BaseFilteringStrategy {
@@ -104,9 +106,9 @@ export class FilteringStrategy extends BaseFilteringStrategy {
         return res;
     }
 
-    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false): any {
+    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false): any {
         let value = resolveNestedPath(rec, fieldName);
-        value = value && isDate ? parseDate(value) : value;
+        value = value && (isDate || isTime) ? parseDate(value) : value;
         return value;
     }
 }
@@ -126,13 +128,12 @@ export class FormattedValuesFilteringStrategy extends FilteringStrategy {
         return !this.fields || this.fields.length === 0 || this.fields.some(f => f === fieldName);
     }
 
-    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, grid?: GridType): any {
+    protected getFieldValue(rec: any, fieldName: string, isDate: boolean = false, isTime: boolean = false, grid?: GridType): any {
         const column = grid.getColumnByName(fieldName);
         let value = resolveNestedPath(rec, fieldName);
 
         value = column.formatter && this.shouldApplyFormatter(fieldName) ?
-            column.formatter(value) :
-            value && isDate ? parseDate(value) : value;
+            column.formatter(value) : value && (isDate || isTime) ? parseDate(value) : value;
 
         return value;
     }

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -9,14 +9,16 @@ import { getHierarchy, isHierarchyMatch } from './operations';
 import { GridType } from '../grids/common/grid.interface';
 
 const DATE_TYPE = 'date';
-
+const TIME_TYPE = 'time';
+const DATE_TIME_TYPE = 'dateTime';
 export interface ISortingStrategy {
     sort: (data: any[],
            fieldName: string,
            dir: SortingDirection,
            ignoreCase: boolean,
            valueResolver: (obj: any, key: string, isDate?: boolean) => any,
-           isDate?: boolean) => any[];
+           isDate?: boolean,
+           isTime?: boolean) => any[];
 }
 
 export class DefaultSortingStrategy implements ISortingStrategy {
@@ -33,10 +35,11 @@ export class DefaultSortingStrategy implements ISortingStrategy {
                 dir: SortingDirection,
                 ignoreCase: boolean,
                 valueResolver: (obj: any, key: string, isDate?: boolean) => any,
-                isDate?: boolean) {
+                isDate?: boolean,
+                isTime?: boolean) {
         const key = fieldName;
         const reverse = (dir === SortingDirection.Desc ? -1 : 1);
-        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate);
+        const cmpFunc = (obj1, obj2) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate, isTime);
         return this.arraySort(data, cmpFunc);
     }
 
@@ -59,10 +62,11 @@ export class DefaultSortingStrategy implements ISortingStrategy {
                              key: string,
                              reverse: number,
                              ignoreCase: boolean,
-                             valueResolver: (obj: any, key: string, isDate?: boolean) => any,
-                             isDate: boolean) {
-        let a = valueResolver(obj1, key, isDate);
-        let b = valueResolver(obj2, key, isDate);
+                             valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any,
+                             isDate: boolean,
+                             isTime: boolean) {
+        let a = valueResolver(obj1, key, isDate, isTime);
+        let b = valueResolver(obj2, key, isDate, isTime);
         if (ignoreCase) {
             a = a && a.toLowerCase ? a.toLowerCase() : a;
             b = b && b.toLowerCase ? b.toLowerCase() : b;
@@ -107,13 +111,14 @@ export class IgxSorting implements IGridSortingStrategy {
         let result = [];
         while (i < data.length) {
             const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
-            const isDate = column?.dataType === DATE_TYPE;
+            const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
+            const isTime = column?.dataType === TIME_TYPE;
             const group = this.groupedRecordsByExpression(data, i, expressions[level], isDate);
             const groupRow: IGroupByRecord = {
                 expression: expressions[level],
                 level,
                 records: cloneArray(group),
-                value: this.getFieldValue(group[0], expressions[level].fieldName, isDate),
+                value: this.getFieldValue(group[0], expressions[level].fieldName, isDate, isTime),
                 groupParent: parent,
                 groups: [],
                 height: grid ? grid.renderedRowHeight : null,
@@ -154,8 +159,15 @@ export class IgxSorting implements IGridSortingStrategy {
         return result;
     }
 
-    protected getFieldValue(obj: any, key: string, isDate: boolean = false): any {
-        return isDate ? parseDate(resolveNestedPath(obj, key)) : resolveNestedPath(obj, key);
+    protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
+        let resolvedValue = resolveNestedPath(obj, key);
+        if (isDate || isTime) {
+            const date = parseDate(resolvedValue);
+            resolvedValue  = isTime ?
+                new Date().setHours(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()) : date;
+
+        }
+        return resolvedValue;
     }
 
     private groupedRecordsByExpression(data: any[],
@@ -197,9 +209,10 @@ export class IgxSorting implements IGridSortingStrategy {
         if (!expr.strategy) {
             expr.strategy = DefaultSortingStrategy.instance();
         }
-        const isDate = grid && grid.getColumnByName(expr.fieldName) ?
-            grid.getColumnByName(expr.fieldName).dataType === DATE_TYPE : false;
-        data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate);
+        const column = grid?.getColumnByName(expr.fieldName);
+        const isDate = column?.dataType === DATE_TYPE || column?.dataType === DATE_TIME_TYPE;
+        const isTime = column?.dataType === TIME_TYPE;
+        data = expr.strategy.sort(data, expr.fieldName, expr.dir, expr.ignoreCase, this.getFieldValue, isDate, isTime);
         if (expressionIndex === exprsLen - 1) {
             return data;
         }