Improve filtering dates for specific operators

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 * Added `regexOption` and `caseSensitive` props to the `LogDisplayModel`. (Case-sensitive search
   requires `hoist-core >= v16.2.0`).
+* Improved filtering of `date` `fieldType` to end of day when operator is '>' or '<='. Developers
+  will need to indicate `localDate` as the `fieldSpec.fieldType` to trigger this behavior.
 
 ### 🎁 New Features
 

admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -10,7 +10,7 @@ import {FormModel} from '@xh/hoist/cmp/form';
 import {GridModel, TreeStyle} from '@xh/hoist/cmp/grid';
 import {HoistModel, LoadSpec, managed, XH} from '@xh/hoist/core';
 import {Cube, CubeFieldSpec, FieldSpec} from '@xh/hoist/data';
-import {fmtDate, fmtNumber} from '@xh/hoist/format';
+import {fmtNumber} from '@xh/hoist/format';
 import {action, computed, makeObservable} from '@xh/hoist/mobx';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import * as Col from '@xh/hoist/admin/columns';
@@ -129,20 +129,7 @@ export class ActivityTrackingModel extends HoistModel {
                 },
                 {
                     field: 'dateCreated',
-                    example: 'YYYY-MM-DD',
-                    valueParser: (v, op) => {
-                        let ret = moment(v, ['YYYY-MM-DD', 'YYYYMMDD'], true);
-                        if (!ret.isValid()) return null;
-
-                        // Note special handling for '>' & '<=' queries.
-                        if (['>', '<='].includes(op)) {
-                            ret = moment(ret).endOf('day');
-                        }
-
-                        return ret.toDate();
-                    },
-                    valueRenderer: v => fmtDate(v),
-                    ops: ['>', '>=', '<', '<=']
+                    fieldType: 'localDate'
                 }
             ],
             persistWith: this.persistWith

admin/tabs/activity/tracking/detail/ActivityDetailModel.ts

@@ -31,7 +31,21 @@ export class ActivityDetailModel extends HoistModel {
             sortBy: 'dateCreated|desc',
             colChooserModel: true,
             enableExport: true,
-            filterModel: true,
+            filterModel: {
+                fieldSpecs: [
+                    'username',
+                    'category',
+                    'msg',
+                    'device',
+                    'browser',
+                    'userAgent',
+                    'elapsed',
+                    {
+                        field: 'dateCreated',
+                        fieldType: 'localDate'
+                    }
+                ]
+            },
             exportOptions: {
                 columns: 'ALL',
                 filename: `${XH.appCode}-activity-detail`

cmp/filter/FilterChooserFieldSpec.ts

@@ -122,6 +122,11 @@ export class FilterChooserFieldSpec extends BaseFilterFieldSpec {
         if (!valueParser && (this.fieldType === 'int' || this.fieldType === 'number')) {
             return input => parseNumber(input);
         }
+
+        // Default date parser if fieldSpec's fieldType does not match source field's fieldType.
+        if (!valueParser && this.isMismatchedDateFieldType) {
+            return (v, op) => this.parseDate(v, op);
+        }
         return valueParser;
     }
 

data/Field.ts

@@ -145,7 +145,7 @@ export function parseFieldValue(
         case 'date':
             return isDate(val) ? val : new Date(val);
         case 'localDate':
-            return isLocalDate(val) ? val : LocalDate.get(val);
+            return isLocalDate(val) ? val : LocalDate.from(val);
     }
 
     throw XH.exception(`Unknown field type '${type}'`);

data/filter/BaseFilterFieldSpec.ts

@@ -7,6 +7,7 @@
 import {HoistBase} from '@xh/hoist/core';
 import {Field, Store, FieldFilter, FieldType, genDisplayName, View} from '@xh/hoist/data';
 import {isEmpty} from 'lodash';
+import moment from 'moment';
 import {FieldFilterOperator} from './Types';
 
 export interface BaseFilterFieldSpecConfig {
@@ -74,7 +75,9 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         this.forceSelection = forceSelection ?? false;
         this.values = values ?? (this.isBoolFieldType ? [true, false] : null);
         this.hasExplicitValues = !isEmpty(this.values);
-        this.enableValues = this.hasExplicitValues || (enableValues ?? this.isEnumerableByDefault);
+        this.enableValues =
+            !this.isMismatchedDateFieldType &&
+            (this.hasExplicitValues || (enableValues ?? this.isEnumerableByDefault));
     }
 
     /** Full Field derived from source. */
@@ -116,11 +119,6 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         return this.filterType === 'collection';
     }
 
-    get isDateBasedFieldType(): boolean {
-        const {fieldType} = this;
-        return fieldType === 'date' || fieldType === 'localDate';
-    }
-
     get isNumericFieldType(): boolean {
         const {fieldType} = this;
         return fieldType === 'int' || fieldType === 'number';
@@ -130,6 +128,20 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         return this.fieldType === 'bool';
     }
 
+    get isDateBasedFieldType(): boolean {
+        const {fieldType} = this;
+        return fieldType === 'date' || fieldType === 'localDate';
+    }
+
+    /**
+     * Detects difference in date-based fieldType defined on fieldSpec and source field, indicating
+     * custom value parsing for > and <= operators.
+     */
+    get isMismatchedDateFieldType(): boolean {
+        const sourceField = this.source.fields.find(f => f.name === this.field);
+        return this.fieldType === 'localDate' && sourceField.type === 'date';
+    }
+
     loadValues() {
         if (!this.hasExplicitValues && this.enableValues) {
             this.loadValuesFromSource();
@@ -149,6 +161,18 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         );
     }
 
+    parseDate(v: any, op: FieldFilterOperator): Date {
+        let ret = moment(v, ['YYYY-MM-DD', 'YYYYMMDD'], true);
+        if (!ret.isValid()) return null;
+
+        // Note special handling for '>' & '<=' queries.
+        if (['>', '<='].includes(op)) {
+            ret = ret.endOf('day');
+        }
+
+        return ret.toDate();
+    }
+
     //------------------------
     // Abstract
     //------------------------
@@ -165,6 +189,7 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
     private getDefaultOperators(): FieldFilterOperator[] {
         if (this.isBoolFieldType) return ['='];
         if (this.isCollectionType) return ['includes', 'excludes'];
+        if (this.isMismatchedDateFieldType) return ['>', '>=', '<', '<='];
         return this.isValueType
             ? ['=', '!=', 'like', 'not like', 'begins', 'ends']
             : ['>', '>=', '<', '<=', '=', '!='];

desktop/cmp/grid/impl/filter/custom/CustomRow.ts

@@ -82,7 +82,9 @@ const inputField = hoistCmp.factory<CustomRowModel>(({model}) => {
     } else if (fieldSpec.isDateBasedFieldType) {
         return dateInput({
             ...props,
-            valueType: fieldSpec.fieldType as 'localDate' | 'date'
+            valueType: fieldSpec.isMismatchedDateFieldType
+                ? 'date'
+                : (fieldSpec.fieldType as 'localDate' | 'date')
         });
     } else if (fieldSpec.supportsSuggestions(op as FieldFilterOperator)) {
         return select({

desktop/cmp/grid/impl/filter/custom/CustomRowModel.ts

@@ -28,7 +28,7 @@ export class CustomRowModel extends HoistModel {
     /** FieldFilter config output of this row. */
     @computed.struct
     get value(): FieldFilterSpec {
-        const {field} = this.fieldSpec;
+        const {field, isMismatchedDateFieldType} = this.fieldSpec;
 
         let op = this.op,
             value = this.inputVal;
@@ -39,6 +39,8 @@ export class CustomRowModel extends HoistModel {
         } else if (op === 'not blank') {
             op = '!=';
             value = null;
+        } else if (isMismatchedDateFieldType) {
+            value = this.fieldSpec.parseDate(value, op);
         } else if (isNil(value)) {
             return null;
         }