neo.mjs 8.6.1 → 8.7.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.6.1'
+         * @member {String} version='8.7.0'
          */
-        version: '8.6.1'
+        version: '8.7.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-21",
+      "datePublished": "2025-01-23",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.6.1'
+                html  : 'v8.7.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.6.1'
+         * @member {String} version='8.7.0'
          */
-        version: '8.6.1'
+        version: '8.7.0'
     }
 
     /**

package/examples/table/nestedRecordFields/MainContainer.mjs

@@ -39,7 +39,11 @@ class MainContainer extends Viewport {
                 {dataField: 'githubId',       text: 'Github Id'},
                 {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
                 {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
-            ]
+            ],
+
+            viewConfig: {
+                highlightModifiedCells: true
+            }
         }]
     }
 

package/examples/table/nestedRecordFields/MainModel.mjs

@@ -6,8 +6,14 @@ import Model from '../../../src/data/Model.mjs';
  */
 class MainModel extends Model {
     static config = {
-        className: 'Neo.examples.table.container.MainModel',
-
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainModel',
+        /**
+         * @member {Object[]} fields
+         */
         fields: [{
             name: 'annotations',
             type: 'Object',
@@ -20,6 +26,9 @@ class MainModel extends Model {
         }, {
             name: 'country',
             type: 'String'
+        }, {
+            name: 'edit',
+            type: 'String'
         }, {
             name: 'githubId',
             type: 'String'
@@ -34,7 +43,11 @@ class MainModel extends Model {
                 name: 'lastname',
                 type: 'String'
             }]
-        }]
+        }],
+        /**
+         * @member {Boolean} trackModifiedFields=true
+         */
+        trackModifiedFields: true
     }
 }
 

package/examples/table/nestedRecordFields/MainStore.mjs

@@ -7,7 +7,7 @@ import Store from '../../../src/data/Store.mjs';
  */
 class MainStore extends Store {
     static config = {
-        className  : 'Neo.examples.table.container.MainStore',
+        className  : 'Neo.examples.table.nestedRecordFields.MainStore',
         keyProperty: 'githubId',
         model      : Model,
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.6.1",
+    "version": "8.7.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/table/View.scss

@@ -8,6 +8,24 @@
     }
 
     .neo-table-row {
+        .neo-table-cell {
+            position: relative;
+
+            &.neo-is-modified {
+                &:after {
+                    border-color: transparent orange transparent transparent;
+                    border-style: solid;
+                    border-width: 0 10px 10px 0;
+                    content     : '';
+                    height      : 0;
+                    position    : absolute;
+                    right       : 0;
+                    top         : -1px;
+                    width       : 0;
+                }
+            }
+        }
+
         &:hover {
             .neo-table-cell {
                 background-color: var(--table-cell-background-color-hover);

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.6.1'
+     * @default '8.7.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.6.1'
+    version: '8.7.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/data/RecordFactory.mjs

@@ -2,7 +2,9 @@ import Base   from '../core/Base.mjs';
 import Logger from '../util/Logger.mjs';
 import Model  from './Model.mjs';
 
-const dataSymbol = Symbol.for('data');
+const
+    dataSymbol         = Symbol.for('data'),
+    originalDataSymbol = Symbol.for('originalData');
 
 let instance;
 
@@ -18,12 +20,6 @@ class RecordFactory extends Base {
          * @protected
          */
         className: 'Neo.data.RecordFactory',
-        /**
-         * The internal record prefix for original field values.
-         * Only used in case the model has trackModifiedFields set to true.
-         * @member {String} ovPrefix='ov_'
-         */
-        ovPrefix: 'ov_',
         /**
          * @member {String} recordNamespace='Neo.data.record'
          */
@@ -70,10 +66,9 @@ class RecordFactory extends Base {
                         value = instance.parseRecordValue(me, field, value);
 
                         if (!Neo.isEqual(value, oldValue)) {
-                            instance.setRecordData(fieldPath, model, me, value);
+                            instance.setRecordData({fieldName: fieldPath, model, record: me, value});
 
-                            me._isModified = true;
-                            me._isModified = instance.isModified(me, model.trackModifiedFields);
+                            me._isModified = me.isModified;
 
                             instance.onRecordChange({
                                 fields: [{name: fieldPath, oldValue, value}],
@@ -85,13 +80,6 @@ class RecordFactory extends Base {
                 }
             };
 
-            // adding the original value of each field
-            if (model.trackModifiedFields) {
-                properties[instance.ovPrefix + field.name] = {
-                    value
-                }
-            }
-
             Object.defineProperties(me, properties)
         }
     }
@@ -132,9 +120,61 @@ class RecordFactory extends Base {
 
                     [dataSymbol] = {}
 
+                    get isModified() {
+                        let me = this;
+
+                        if (model.trackModifiedFields) {
+                            return Neo.isEqual(me[dataSymbol], me[originalDataSymbol])
+                        }
+
+                        return me._isModified
+                    }
+
+                    /**
+                     * @param {Object} config
+                     */
                     constructor(config) {
-                        this.setSilent(config);
-                        this._isModified = false
+                        let me = this;
+
+                        if (model.trackModifiedFields) {
+                            me[originalDataSymbol] = {};
+                            me.setOriginal(config)
+                        }
+
+                        me.setSilent(config); // We do not want to fire change events when constructing
+                        me._isModified = false
+                    }
+
+                    /**
+                     * @param {String} fieldName
+                     * @returns {Boolean|null} null in case the model does not use trackModifiedFields, true in case a change was found
+                     */
+                    isModifiedField(fieldName) {
+                        let me = this;
+
+                        // Check if the field getter does exist
+                        if (!me.__proto__.hasOwnProperty(fieldName)) {
+                            Logger.logError('The record does not contain the field', fieldName, me)
+                        }
+
+                        if (model.trackModifiedFields) {
+                            let dataScope, originalDataScope;
+
+                            if (model.hasNestedFields && fieldName.includes('.')) {
+                                let nsArray = fieldName.split('.');
+
+                                fieldName         = nsArray.pop();
+                                dataScope         = Neo.ns(nsArray, false, me[dataSymbol]);
+                                originalDataScope = Neo.ns(nsArray, false, me[originalDataSymbol])
+                            } else {
+                                dataScope         = me[dataSymbol];
+                                originalDataScope = me[originalDataSymbol]
+                            }
+
+                            return !Neo.isEqual(dataScope[fieldName], originalDataScope[fieldName])
+                        }
+
+                        return null
                     }
 
                     /**
@@ -142,7 +182,17 @@ class RecordFactory extends Base {
                      * @param {Object} fields
                      */
                     set(fields) {
-                        instance.setRecordFields(model, this, fields)
+                        instance.setRecordFields({fields, model, record: this})
+                    }
+
+                    /**
+                     * If the model uses trackModifiedFields, we will store the original data
+                     * for tracking the dirty state (changed fields)
+                     * @param {Object} fields
+                     * @protected
+                     */
+                    setOriginal(fields) {
+                        instance.setRecordFields({fields, model, record: this, silent: true, useOriginalData: true})
                     }
 
                     /**
@@ -150,7 +200,7 @@ class RecordFactory extends Base {
                      * @param {Object} fields
                      */
                     setSilent(fields) {
-                        instance.setRecordFields(model, this, fields, true)
+                        instance.setRecordFields({fields, model, record: this, silent: true})
                     }
 
                     /**
@@ -180,28 +230,10 @@ class RecordFactory extends Base {
 
     /**
      * @param {Object} record
-     * @param {Boolean} trackModifiedFields
      * @returns {Boolean} true in case a change was found
      */
-    isModified(record, trackModifiedFields) {
-        if (trackModifiedFields) {
-            let fields = Object.keys(record),
-                i      = 0,
-                len    = fields.length,
-                field;
-
-            for (; i < len; i++) {
-                field = fields[i];
-
-                if (!Neo.isEqual(record[field], record[this.ovPrefix + field])) {
-                    return true
-                }
-            }
-
-            return false
-        }
-
-        return record._isModified
+    isModified(record) {
+        return record.isModified
     }
 
     /**
@@ -210,17 +242,7 @@ class RecordFactory extends Base {
      * @returns {Boolean|null} null in case the model does not use trackModifiedFields, true in case a change was found
      */
     isModifiedField(record, fieldName) {
-        if (!record.hasOwnProperty(fieldName)) {
-            Logger.logError('The record does not contain the field', fieldName, record)
-        }
-
-        let modifiedField = this.ovPrefix + fieldName;
-
-        if (record.hasOwnProperty(modifiedField)) {
-            return !Neo.isEqual(record[fieldName], record[modifiedField])
-        }
-
-        return null
+        return record.isModifiedField(fieldName)
     }
 
     /**
@@ -229,7 +251,7 @@ class RecordFactory extends Base {
      * @returns {Boolean}
      */
     isRecord(record) {
-        return record?.isRecord
+        return record?.isRecord || false
     }
 
     /**
@@ -252,7 +274,7 @@ class RecordFactory extends Base {
      * @param {Object} recordConfig=null
      * @returns {*}
      */
-    parseRecordValue(record, field, value, recordConfig=null) {!field && console.log(record, value);
+    parseRecordValue(record, field, value, recordConfig=null) {
         if (field.calculate) {
             return field.calculate(record, field, recordConfig)
         }
@@ -322,34 +344,40 @@ class RecordFactory extends Base {
     }
 
     /**
-     * @param {String} fieldName
-     * @param {Neo.data.Model} model
-     * @param {Record} record
-     * @param {*} value
+     * @param {Object}         data
+     * @param {String}         data.fieldName
+     * @param {Neo.data.Model} data.model
+     * @param {Record}         data.record
+     * @param {Boolean}        data.useOriginalData=false true will apply changes to the originalData symbol
+     * @param {*}              data.value
      * @protected
      */
-    setRecordData(fieldName, model, record, value) {
+    setRecordData({fieldName, model, record, useOriginalData=false, value}) {
+        let scope = useOriginalData ? originalDataSymbol : dataSymbol;
+
         if (model.hasNestedFields && fieldName.includes('.')) {
             let ns, nsArray;
 
             nsArray   = fieldName.split('.');
             fieldName = nsArray.pop();
-            ns        = Neo.ns(nsArray, true, record[dataSymbol]);
+            ns        = Neo.ns(nsArray, true, record[scope]);
 
             ns[fieldName] = value
         } else {
-            record[dataSymbol][fieldName] = value
+            record[scope][fieldName] = value
         }
     }
 
     /**
-     * @param {Neo.data.Model} model
-     * @param {Object} record
-     * @param {Object} fields
-     * @param {Boolean} silent=false
-     * @param {Object[]} changedFields=[] Internal flag
+     * @param {Object}         data
+     * @param {Object[]}       data.changedFields=[] Internal flag
+     * @param {Object}         data.fields
+     * @param {Neo.data.Model} data.model
+     * @param {Object}         data.record
+     * @param {Boolean}        data.silent=false
+     * @param {Boolean}        data.useOriginalData=false true will apply changes to the originalData symbol
      */
-    setRecordFields(model, record, fields, silent=false, changedFields=[]) {
+    setRecordFields({changedFields=[], fields, model, record, silent=false, useOriginalData=false}) {
         let {fieldsMap} = model,
             fieldExists, oldValue;
 
@@ -358,16 +386,26 @@ class RecordFactory extends Base {
 
             if (Neo.isObject(value) && !fieldExists) {
                 Object.entries(value).forEach(([childKey, childValue]) => {
-                    this.setRecordFields(model, record, {[`${key}.${childKey}`]: childValue}, true, changedFields)
+                    this.setRecordFields({
+                        changedFields,
+                        fields: {[`${key}.${childKey}`]: childValue},
+                        model,
+                        record,
+                        silent: true,
+                        useOriginalData
+                    })
                 })
             } else if (fieldExists) {
                 oldValue = record[key];
                 value    = instance.parseRecordValue(record, model.getField(key), value);
 
                 if (!Neo.isEqual(oldValue, value)) {
-                    instance.setRecordData(key, model, record, value);
+                    instance.setRecordData({fieldName: key, model, record, useOriginalData, value});
+
+                    if (!useOriginalData) {
+                        record._isModified = true
+                    }
 
-                    record._isModified = true;
                     changedFields.push({name: key, oldValue, value})
                 }
             }

package/src/form/field/ComboBox.mjs

@@ -410,7 +410,8 @@ class ComboBox extends Picker {
 
             // List might not exist until the picker is created
             let {list}           = me,
-                {selectionModel} = list;
+                {selectionModel} = list,
+                index            = store.indexOf(record);
 
             // On show, set the active item to be the current selected record or the first
             if (record) {
@@ -420,12 +421,8 @@ class ComboBox extends Picker {
                 selectionModel.suspendEvents = false
             }
 
-            me.timeout(100).then(() => {
-                let index = store.indexOf(record);
-
-                list._focusIndex = -1; // silent update to ensure afterSetFocusIndex() always gets called
-                list.focusIndex  = index > -1 ? index : 0
-            })
+            list._focusIndex = -1; // silent update to ensure afterSetFocusIndex() always gets called
+            list.focusIndex  = index > -1 ? index : 0
         }
         // Filtered down to nothing - hide picker if it has been created.
         else {

package/src/list/Base.mjs

@@ -256,13 +256,7 @@ class List extends Component {
      * @protected
      */
     afterSetFocusIndex(value, oldValue) {
-        let me = this;
-
-        if (Neo.isNumber(value)) {
-            Neo.main.addon.Navigator.navigateTo([me.getHeaderlessIndex(value), me.navigator])
-        } else if (value) {
-            Neo.main.addon.Navigator.navigateTo([me.getItemId(value[me.getKeyProperty()]), me.navigator])
-        }
+        value !== null && this.updateItemFocus(value)
     }
 
     /**
@@ -846,6 +840,32 @@ class List extends Component {
             }
         }
     }
+
+    /**
+     *
+     * @param {Number|Object} value
+     * @returns {Promise<void>}
+     */
+    async updateItemFocus(value) {
+        let me           = this,
+            {navigateTo} = Neo.main.addon.Navigator;
+
+        if (me.mounted) {
+            if (Neo.isNumber(value)) {
+                navigateTo([me.getHeaderlessIndex(value), me.navigator])
+            } else if (value) {
+                navigateTo([me.getItemId(value[me.getKeyProperty()]), me.navigator])
+            }
+        } else {
+            me.on('mounted', () => {
+                // We could subscribe multiple times before getting mounted,
+                // so only trigger the callback for the last focusIndex
+                if (value === me.focusIndex) {
+                    me.updateItemFocus(me.focusIndex)
+                }
+            }, me, {once: true})
+        }
+    }
 }
 
 export default Neo.setupClass(List);

package/src/table/View.mjs

@@ -32,6 +32,10 @@ class View extends Component {
          * @protected
          */
         containerId: null,
+        /**
+         * @member {Boolean} highlightModifiedCells_=false
+         */
+        highlightModifiedCells_: false,
         /**
          * @member {Object} recordVnodeMap={}
          */
@@ -150,6 +154,12 @@ class View extends Component {
             cellCls.push('neo-' + column.cellAlign)
         }
 
+        if (me.highlightModifiedCells && me.store.model.trackModifiedFields) {
+            if (record.isModifiedField(dataField)) {
+                cellCls.push('neo-is-modified')
+            }
+        }
+
         if (!cellId) {
             // todo: remove the else part as soon as all tables use stores (examples table)
             if (hasStore) {