fix(editors): add saveOutputType to finally have proper save format (#535)

- we now have 3 available types to use with the Date Editors formatting
1. `type` (data input format),
2. `outputType` (picker display format)
3. `saveOutputType` (save format)

Author: ghiscoding

src/app/examples/grid-editor.component.ts

@@ -272,7 +272,9 @@ export class GridEditorComponent implements OnInit {
         filter: { model: Filters.compoundDate },
         formatter: Formatters.dateIso,
         exportWithFormatter: true,
-        type: FieldType.date,
+        type: FieldType.date,              // dataset cell input format
+        // outputType: FieldType.dateUs,   // date picker format
+        saveOutputType: FieldType.dateUtc, // save output date formattype: FieldType.date,
         editor: {
           model: Editors.date,
           // override any of the Flatpickr options through "editorOptions"

src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts

@@ -210,36 +210,64 @@ describe('DateEditor', () => {
 
         expect(editor.isValueChanged()).toBe(false);
       });
+
+      it('should return False when input date is invalid', () => {
+        mockItemData = { id: 1, startDate: '1900-02-32', isActive: true };
+        mockColumn.type = FieldType.dateUs;
+        mockColumn.internalColumnEditor.editorOptions = { allowInput: true }; // change to allow input value only for testing purposes
+
+        editor = new DateEditor(editorArguments);
+        editor.loadValue(mockItemData);
+        const editorInputElm = divContainer.querySelector<HTMLInputElement>('input.flatpickr-alt-input');
+        editorInputElm.value = '1900-02-32';
+        editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
+
+        expect(editor.isValueChanged()).toBe(false);
+      });
     });
 
     describe('applyValue method', () => {
-      it('should apply the value to the startDate property when it passes validation', () => {
+      it('should apply the value to the startDate property with ISO format when no "outputType" is defined and when it passes validation', () => {
         mockColumn.internalColumnEditor.validator = null;
-        mockColumn.type = FieldType.dateTimeIsoAmPm;
+        mockColumn.type = FieldType.date;
         mockItemData = { id: 1, startDate: '2001-04-05T11:33:42.000Z', isActive: true };
 
-        const newDate = '2001-01-02T16:02:02.000+05:00';
+        const newDate = new Date(Date.UTC(2001, 0, 2, 16, 2, 2, 0));
         editor = new DateEditor(editorArguments);
         editor.applyValue(mockItemData, newDate);
 
-        expect(mockItemData).toEqual({ id: 1, startDate: moment(newDate, 'YYYY-MM-DD hh:mm:ss a').toDate(), isActive: true });
+        expect(mockItemData).toEqual({ id: 1, startDate: moment(newDate).format('YYYY-MM-DD'), isActive: true });
       });
 
-      it('should apply the value to the startDate property with a field having dot notation (complex object) that passes validation', () => {
+      it('should apply the value to the startDate property with "outputType" format with a field having dot notation (complex object) that passes validation', () => {
         mockColumn.internalColumnEditor.validator = null;
-        mockColumn.type = FieldType.dateTimeIsoAmPm;
+        mockColumn.type = FieldType.date;
+        mockColumn.outputType = FieldType.dateTimeIsoAmPm;
         mockColumn.field = 'employee.startDate';
-        mockItemData = { id: 1, employee: { startDate: new Date(Date.UTC(2001, 3, 5, 16, 11, 33, 0)) }, isActive: true };
+        mockItemData = { id: 1, employee: { startDate: '2001-04-05T11:33:42.000Z' }, isActive: true };
+
+        const newDate = new Date(Date.UTC(2001, 0, 2, 16, 2, 2, 0));
+        editor = new DateEditor(editorArguments);
+        editor.applyValue(mockItemData, newDate);
+
+        expect(mockItemData).toEqual({ id: 1, employee: { startDate: moment(newDate).format('YYYY-MM-DD hh:mm:ss a') }, isActive: true });
+      });
+
+      it('should apply the value to the startDate property with output format defined by "saveOutputType" when it passes validation', () => {
+        mockColumn.internalColumnEditor.validator = null;
+        mockColumn.type = FieldType.date;
+        mockColumn.saveOutputType = FieldType.dateTimeIsoAmPm;
+        mockItemData = { id: 1, startDate: '2001-04-05T11:33:42.000Z', isActive: true };
 
-        const newDate = '2001-01-02T16:02:02.000+05:00';
+        const newDate = new Date(Date.UTC(2001, 0, 2, 16, 2, 2, 0));
         editor = new DateEditor(editorArguments);
         editor.applyValue(mockItemData, newDate);
 
-        expect(mockItemData).toEqual({ id: 1, employee: { startDate: moment(newDate, 'YYYY-MM-DD hh:mm:ss a').toDate() }, isActive: true });
+        expect(mockItemData).toEqual({ id: 1, startDate: moment(newDate).format('YYYY-MM-DD hh:mm:ss a'), isActive: true });
       });
 
       it('should return item data with an empty string in its value when it fails the custom validation', () => {
-        mockColumn.internalColumnEditor.validator = (value: any, args: EditorArgs) => {
+        mockColumn.internalColumnEditor.validator = (value: any) => {
           if (value.length > 10) {
             return { valid: false, msg: 'Must be at least 10 chars long.' };
           }

src/app/modules/angular-slickgrid/editors/dateEditor.ts

@@ -96,6 +96,7 @@ export class DateEditor implements Editor {
       const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
       const title = this.columnEditor && this.columnEditor.title || '';
       this.defaultDate = (this.args.item) ? this.args.item[this.columnDef.field] : null;
+      const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateUtc);
       const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateUtc);
       let currentLocale = this._translate && this._translate.currentLang || this.gridOptions.locale || 'en';
       if (currentLocale && currentLocale.length > 2) {
@@ -106,12 +107,10 @@ export class DateEditor implements Editor {
         defaultDate: this.defaultDate as string,
         altInput: true,
         altFormat: outputFormat,
-        dateFormat: outputFormat,
+        dateFormat: inputFormat,
         closeOnSelect: false,
         locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en',
-        onChange: (selectedDates: Date[] | Date, dateStr: string, instance: any) => {
-          this.save();
-        },
+        onChange: () => this.save(),
         errorHandler: () => {
           // do nothing, Flatpickr is a little too sensitive and will throw an error when provided date is lower than minDate so just disregard the error completely
         }
@@ -174,26 +173,33 @@ export class DateEditor implements Editor {
 
   applyValue(item: any, state: any) {
     const fieldName = this.columnDef && this.columnDef.field;
-    const outputTypeFormat = mapMomentDateFormatWithFieldType((this.columnDef && (this.columnDef.outputType || this.columnDef.type)) || FieldType.dateUtc);
-    const isComplexObject = fieldName.indexOf('.') > 0; // is the field a complex object, "address.streetNumber"
-
-    // validate the value before applying it (if not valid we'll set an empty string)
-    const validation = this.validate(state);
-    const newValue = (validation && validation.valid) ? moment(state, outputTypeFormat).toDate() : '';
-
-    // set the new value to the item datacontext
-    if (isComplexObject) {
-      setDeepValue(item, fieldName, newValue);
-    } else {
-      item[fieldName] = newValue;
+    if (fieldName !== undefined) {
+      const outputTypeFormat = mapMomentDateFormatWithFieldType((this.columnDef && (this.columnDef.outputType || this.columnDef.type)) || FieldType.dateUtc);
+      const saveTypeFormat = mapMomentDateFormatWithFieldType((this.columnDef && (this.columnDef.saveOutputType || this.columnDef.outputType || this.columnDef.type)) || FieldType.dateUtc);
+      const isComplexObject = fieldName.indexOf('.') > 0; // is the field a complex object, "address.streetNumber"
+
+      // validate the value before applying it (if not valid we'll set an empty string)
+      const validation = this.validate(state);
+      const newValue = (validation && validation.valid) ? moment(state, outputTypeFormat).format(saveTypeFormat) : '';
+
+      // set the new value to the item datacontext
+      if (isComplexObject) {
+        setDeepValue(item, fieldName, newValue);
+      } else {
+        item[fieldName] = newValue;
+      }
     }
   }
 
   isValueChanged() {
     const elmValue = this._$input.val();
+    const inputFormat = mapMomentDateFormatWithFieldType(this.columnDef && this.columnDef.type || FieldType.dateIso);
     const outputTypeFormat = mapMomentDateFormatWithFieldType((this.columnDef && (this.columnDef.outputType || this.columnDef.type)) || FieldType.dateUtc);
-    const elmDateStr = elmValue ? moment(elmValue, outputTypeFormat, false).format(outputTypeFormat) : '';
-    const orgDateStr = this.originalDate ? moment(this.originalDate, outputTypeFormat, false).format(outputTypeFormat) : '';
+    const elmDateStr = elmValue ? moment(elmValue, inputFormat, false).format(outputTypeFormat) : '';
+    const orgDateStr = this.originalDate ? moment(this.originalDate, inputFormat, false).format(outputTypeFormat) : '';
+    if (elmDateStr === 'Invalid date' || orgDateStr === 'Invalid date') {
+      return false;
+    }
 
     return (!(elmDateStr === '' && orgDateStr === '')) && (elmDateStr !== orgDateStr);
   }
@@ -232,8 +238,9 @@ export class DateEditor implements Editor {
       return '';
     }
 
+    const inputFormat = mapMomentDateFormatWithFieldType(this.columnDef && this.columnDef.type || FieldType.dateIso);
     const outputTypeFormat = mapMomentDateFormatWithFieldType((this.columnDef && (this.columnDef.outputType || this.columnDef.type)) || FieldType.dateIso);
-    const value = moment(domValue, outputTypeFormat, false).format(outputTypeFormat);
+    const value = moment(domValue, inputFormat, false).format(outputTypeFormat);
 
     return value;
   }

src/app/modules/angular-slickgrid/models/column.interface.ts

@@ -169,9 +169,18 @@ export interface Column<T = any> {
   /** an event that can be used for triggering an action after a cell click */
   onCellClick?: (e: KeyboardEvent | MouseEvent, args: OnEventArgs) => void;
 
-  /** column output type */
+  /**
+   * Column output type(e.g.Date Picker, the output format that we will see in the picker)
+   * NOTE: this is only currently used by the Editors / Filters with a Date Picker
+   */
   outputType?: FieldType;
 
+  /**
+   * Column Editor save format type (e.g. which date format to use when saving after choosing a date from the Date Editor picker)
+   * NOTE: this is only currently used by the Date Editor (date picker)
+   */
+  saveOutputType?: FieldType;
+
   /** if you want to pass custom paramaters to your Formatter/Editor or anything else */
   params?: any | any[];