[PATCH proxmox-widget-toolkit v2 05/43] form: date time field: track value like other form fields

[Christian Ebner <c.ebner@proxmox.com>]

The value was only kept in the view model and every change of it
fired a change event with just the new value, without ever checking
the dirty state. Forms thus never got a dirtychange event and did not
notice that the field was modified, for example for enabling the
reset button of edit windows.

Keep the value via the form field mixin, so changes go through its
change detection, which fires change and dirtychange events as for
any other form field. Values are compared by their timestamp, and
values that are not dates are parsed, for example timestamps in
milliseconds, while invalid ones are treated as no value.

The change event now passes the field, new and old value, like other
form fields do, instead of only the new value.

Signed-off-by: Christian Ebner <c.ebner@proxmox.com>
---
 src/form/DateTimeField.js | 47 ++++++++++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/form/DateTimeField.js b/src/form/DateTimeField.js
index 1f1fa7f..edb984a 100644
--- a/src/form/DateTimeField.js
+++ b/src/form/DateTimeField.js
@@ -110,17 +110,34 @@ Ext.define('Proxmox.DateTimeField', {
     },
 
     config: {
-        value: null,
         submitFormat: 'U',
         disabled: false,
     },
 
+    parseDatetime: function (value) {
+        if (value === undefined || value === null || value === '') {
+            return null;
+        }
+        let date = Ext.isDate(value) ? value : new Date(value);
+        return Number.isNaN(date.getTime()) ? null : date;
+    },
+
     setValue: function (value) {
-        this.getViewModel().set('datetime', value);
+        let me = this;
+        me.value = me.parseDatetime(value);
+        me.getViewModel().set('datetime', me.value);
+        me.checkChange();
+        return me;
     },
 
     getValue: function () {
-        return this.getViewModel().get('datetime');
+        return this.value ?? null;
+    },
+
+    isEqual: function (value1, value2) {
+        let time1 = value1 ? value1.getTime() : null;
+        let time2 = value2 ? value2.getTime() : null;
+        return time1 === time2;
     },
 
     getSubmitValue: function () {
@@ -138,8 +155,17 @@ Ext.define('Proxmox.DateTimeField', {
         return { [me.getName()]: value };
     },
 
+    onChange: function (newValue) {
+        let me = this;
+        if (me.validateOnChange) {
+            me.validate();
+        }
+        me.checkDirty();
+        me.publishState('value', newValue);
+    },
+
     setMinValue: function (value) {
-        this.getViewModel().set('minDatetime', value);
+        this.getViewModel().set('minDatetime', this.parseDatetime(value));
     },
 
     getMinValue: function () {
@@ -147,7 +173,7 @@ Ext.define('Proxmox.DateTimeField', {
     },
 
     setMaxValue: function (value) {
-        this.getViewModel().set('maxDatetime', value);
+        this.getViewModel().set('maxDatetime', this.parseDatetime(value));
     },
 
     getMaxValue: function () {
@@ -158,9 +184,7 @@ Ext.define('Proxmox.DateTimeField', {
         let me = this;
         me.callParent();
 
-        let vm = me.getViewModel();
-        vm.set('datetime', me.config.value);
-        me.resetOriginalValue();
+        me.initField();
 
         if (me.minValue) {
             me.setMinValue(me.minValue);
@@ -169,11 +193,8 @@ Ext.define('Proxmox.DateTimeField', {
             me.setMaxValue(me.maxValue);
         }
 
-        // Propagate state change to binding
-        vm.bind('{datetime}', function (value) {
-            me.publishState('value', value);
-            me.fireEvent('change', value);
-        });
+        // propagate changes made via the inner date and time fields
+        me.getViewModel().bind('{datetime}', (value) => me.setValue(value));
     },
 
     items: [
-- 
2.47.3