fix(editor): autocommit should not save if value is the same as before

- certain Editors were triggering a save when clicking/opening the Editor when autocommit was enabled even though the value if the field was the same since we just opened the editor.
ghiscoding · Oct 18, 2019 · a07d239 · a07d239
1 parent 5089bf9
commit a07d239
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts
@@ -187,19 +187,21 @@ describe('DateEditor', () => {
         mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
 
         editor = new DateEditor(editorArguments);
+        editor.loadValue(mockItemData);
         editor.focus();
         const editorInputElm = divContainer.querySelector<HTMLInputElement>('input.flatpickr');
-        editorInputElm.value = '2001-01-02T16:02:02.239Z';
+        editorInputElm.value = '2024-04-02T16:02:02.239Z';
         editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
 
         expect(editor.isValueChanged()).toBe(true);
       });
 
-      it('should return True when date in the picker is the same as the current date', () => {
+      it('should return False when date in the picker is the same as the current date', () => {
         mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
         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 = '2001-01-02T11:02:02.000Z';
         editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
@@ -307,6 +309,7 @@ describe('DateEditor', () => {
 
         editor = new DateEditor(editorArguments);
         editor.loadValue(mockItemData);
+        editor.setValue('2022-03-02T16:02:02.000+05:00');
         editor.save();
 
         expect(spy).toHaveBeenCalled();
@@ -319,6 +322,7 @@ describe('DateEditor', () => {
 
         editor = new DateEditor(editorArguments);
         editor.loadValue(mockItemData);
+        editor.setValue('2022-03-02T16:02:02.000+05:00');
         editor.save();
 
         expect(spy).toHaveBeenCalled();

diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/sliderEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/sliderEditor.spec.ts
@@ -194,8 +194,8 @@ describe('SliderEditor', () => {
       mockColumn.internalColumnEditor.params = { hideSliderNumber: false };
       mockItemData = { id: 1, price: 32, isActive: true };
       editor = new SliderEditor(editorArguments);
-      editor.setValue(17);
       editor.loadValue(mockItemData);
+      editor.setValue(17);
 
       const editorElm = divContainer.querySelector('.slider-container.slider-editor');
       const editorNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
@@ -209,8 +209,11 @@ describe('SliderEditor', () => {
 
     describe('isValueChanged method', () => {
       it('should return True when previously dispatched change event is a different slider input number', () => {
+        mockColumn.internalColumnEditor.params = { sliderStartValue: 5 };
+        mockItemData = { id: 1, price: 32, isActive: true };
         editor = new SliderEditor(editorArguments);
-        editor.setValue(17);
+        editor.loadValue(mockItemData);
+        editor.setValue(45);
 
         const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
         editorElm.dispatchEvent(new CustomEvent('change'));
@@ -219,8 +222,9 @@ describe('SliderEditor', () => {
       });
 
       it('should return False when previously dispatched change event is the same as default (0) slider input number', () => {
+        mockItemData = { id: 1, price: 0, isActive: true };
         editor = new SliderEditor(editorArguments);
-        editor.setValue(0);
+        editor.loadValue(mockItemData);
 
         const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
         editorElm.dispatchEvent(new CustomEvent('change'));
@@ -229,8 +233,9 @@ describe('SliderEditor', () => {
       });
 
       it('should return False when previously dispatched change event is the same as default (0) slider input number but provided as a string', () => {
+        mockItemData = { id: 1, price: '0', isActive: true };
         editor = new SliderEditor(editorArguments);
-        editor.setValue('0');
+        editor.loadValue(mockItemData);
 
         const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
         editorElm.dispatchEvent(new CustomEvent('change'));
@@ -240,8 +245,9 @@ describe('SliderEditor', () => {
 
       it('should return False when previously dispatched change event is the same input number as "sliderStartValue" provided by the user', () => {
         mockColumn.internalColumnEditor.params = { sliderStartValue: 5 };
+        mockItemData = { id: 1, price: 5, isActive: true };
         editor = new SliderEditor(editorArguments);
-        editor.setValue(5);
+        editor.loadValue(mockItemData);
 
         const editorElm = divContainer.querySelector<HTMLInputElement>('.slider-editor input.editor-price');
         editorElm.dispatchEvent(new CustomEvent('change'));
@@ -364,6 +370,7 @@ describe('SliderEditor', () => {
 
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
+        editor.setValue(35);
         editor.save();
 
         expect(spy).toHaveBeenCalled();
@@ -376,6 +383,7 @@ describe('SliderEditor', () => {
 
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
+        editor.setValue(35);
         editor.save();
 
         expect(spy).toHaveBeenCalled();
@@ -400,6 +408,7 @@ describe('SliderEditor', () => {
 
         editor = new SliderEditor(editorArguments);
         editor.loadValue(mockItemData);
+        editor.setValue(35);
         const spySave = jest.spyOn(editor, 'save');
         const editorElm = editor.editorDomElement;
 

diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts
@@ -34,6 +34,7 @@ export class DateEditor implements Editor {
 
   flatInstance: any;
   defaultDate: string;
+  originalDate: string;
 
   /** SlickGrid Grid object */
   grid: any;
@@ -183,7 +184,12 @@ export class DateEditor implements Editor {
   }
 
   isValueChanged() {
-    return (!(this._$input.val() === '' && this.defaultDate == null)) && (this._$input.val() !== this.defaultDate);
+    const elmValue = this._$input.val();
+    const outputFormat = mapMomentDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso);
+    const elmDateStr = elmValue ? moment(elmValue).format(outputFormat) : '';
+    const orgDateStr = this.originalDate ? moment(this.originalDate).format(outputFormat) : '';
+
+    return (!(elmDateStr === '' && orgDateStr === '')) && (elmDateStr !== orgDateStr);
   }
 
   loadValue(item: any) {
@@ -194,7 +200,7 @@ export class DateEditor implements Editor {
 
     if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
       const value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
-      this.defaultDate = value;
+      this.originalDate = value;
       this.flatInstance.setDate(value);
       this.show();
       this.focus();

diff --git a/src/app/modules/angular-slickgrid/editors/sliderEditor.ts b/src/app/modules/angular-slickgrid/editors/sliderEditor.ts
@@ -15,6 +15,7 @@ export class SliderEditor implements Editor {
   private _$editorElm: any;
   private _$input: any;
   $sliderNumber: any;
+  defaultValue: any;
   originalValue: any;
 
   /** SlickGrid Grid object */
@@ -127,7 +128,7 @@ export class SliderEditor implements Editor {
 
   isValueChanged() {
     const elmValue = this._$input.val();
-    return (!(elmValue === '' && this.originalValue === null)) && (+elmValue !== this.originalValue);
+    return (!(elmValue === '' && this.originalValue === undefined)) && (+elmValue !== this.originalValue);
   }
 
   loadValue(item: any) {
@@ -139,8 +140,9 @@ export class SliderEditor implements Editor {
     if (item && this.columnDef && (item.hasOwnProperty(fieldName) || isComplexObject)) {
       let value = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
       if (value === '' || value === null || value === undefined) {
-        value = this.originalValue; // load default value when item doesn't have any value
+        value = this.defaultValue; // load default value when item doesn't have any value
       }
+      this.originalValue = +value;
       this._$input.val(value);
       this.$sliderNumber.html(value);
     }
@@ -211,7 +213,7 @@ export class SliderEditor implements Editor {
     const maxValue = this.columnEditor.hasOwnProperty('maxValue') ? this.columnEditor.maxValue : DEFAULT_MAX_VALUE;
     const defaultValue = this.editorParams.hasOwnProperty('sliderStartValue') ? this.editorParams.sliderStartValue : minValue;
     const step = this.columnEditor.hasOwnProperty('valueStep') ? this.columnEditor.valueStep : DEFAULT_STEP;
-    this.originalValue = defaultValue;
+    this.defaultValue = defaultValue;
 
     if (this.editorParams.hideSliderNumber) {
       return `