feat: allow overriding readOnly behavior of dateEditor

realted issue #1684
ghiscoding · Sep 19, 2024 · d4da489 · d4da489
1 parent b7c2061
commit d4da489
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example11.ts b/examples/vite-demo-vanilla-bundle/src/examples/example11.ts
@@ -175,7 +175,7 @@ export default class Example11 {
         type: FieldType.date, outputType: FieldType.dateIso,
         filterable: true,
         filter: { model: Filters.compoundDate },
-        editor: { model: Editors.date, massUpdate: true },
+        editor: { model: Editors.date, massUpdate: true, disabled: false, readOnly: false },
       },
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true, minWidth: 80,
@@ -293,7 +293,7 @@ export default class Example11 {
             }
           } else if ((event.target as HTMLElement).classList.contains('mdi-check-underline')) {
             this.slickerGridInstance?.gridService.updateItem({ ...dataContext, completed: true });
-            alert(`The "${dataContext.title}" is now Completed`);
+            alert(`The "${dataContext.start}" is now Completed`);
           }
         }
       },

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -36,6 +36,7 @@ export class DateEditor implements Editor {
   protected _lastTriggeredByClearDate = false;
   protected _originalDate?: string;
   protected _pickerMergedOptions!: IOptions;
+  protected _lastInputKeyEvent?: KeyboardEvent;
   calendarInstance?: VanillaCalendar;
   defaultDate?: string;
   hasTimePicker = false;
@@ -185,7 +186,7 @@ export class DateEditor implements Editor {
           title: this.columnEditor && this.columnEditor.title || '',
           className: inputCssClasses.replace(/\./g, ' '),
           dataset: { input: '', defaultdate: this.defaultDate },
-          readOnly: true,
+          readOnly: this.columnEditor.readOnly === false ? false : true,
         },
         this._editorInputGroupElm
       );
@@ -202,6 +203,18 @@ export class DateEditor implements Editor {
         });
       }
 
+      this._bindEventService.bind(this._inputElm, 'keydown', ((event: KeyboardEvent) => {
+        if (this.columnEditor.readOnly !== false) {
+          return;
+        }
+
+        this._isValueTouched = true;
+        this._lastInputKeyEvent = event;
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.stopImmediatePropagation();
+        }
+      }) as EventListener);
+
       queueMicrotask(() => {
         this.calendarInstance = new VanillaCalendar(this._inputElm, this._pickerMergedOptions);
         this.calendarInstance.init();
@@ -349,6 +362,11 @@ export class DateEditor implements Editor {
     let isChanged = false;
     const elmDateStr = this.getValue();
 
+    const lastEventKey = this._lastInputKeyEvent?.key;
+    if (this.columnEditor.readOnly === false && this.columnEditor?.alwaysSaveOnEnterKey && lastEventKey === 'Enter') {
+      return true;
+    }
+
     if (this.columnDef) {
       isChanged = this._lastTriggeredByClearDate || (!(elmDateStr === '' && this._originalDate === '')) && (elmDateStr !== this._originalDate);
     }

diff --git a/packages/common/src/interfaces/columnEditor.interface.ts b/packages/common/src/interfaces/columnEditor.interface.ts
@@ -128,6 +128,11 @@ export interface ColumnEditor {
    */
   required?: boolean;
 
+  /**
+   * only applicable for dateEditors. If explicitely set to false, it will allow to enter a new date in the input field.
+   */
+  readOnly?: boolean;
+
   /**
    * defaults to 'object', how do we want to serialize the editor value to the resulting dataContext object when using a complex object?
    * Currently only applies to Single/Multiple Select Editor.