neo.mjs 8.4.2 → 8.6.0

package/src/data/Model.mjs

@@ -1,4 +1,5 @@
-import Base from '../core/Base.mjs';
+import Base          from '../core/Base.mjs';
+import RecordFactory from './RecordFactory.mjs';
 
 /**
  * @class Neo.data.Model
@@ -17,9 +18,9 @@ class Model extends Base {
          */
         ntype: 'model',
         /**
-         * @member {Array|null} fields=null
+         * @member {Object[]|null} fields_=null
          */
-        fields: null,
+        fields_: null,
         /**
          * @member {String} keyProperty_='id'
          */
@@ -38,23 +39,80 @@ class Model extends Base {
         trackModifiedFields: false
     }
 
+    /**
+     * @member {Map} fieldsMap=new Map()
+     * @protected
+     */
+    fieldsMap = new Map()
+    /**
+     * @member {Boolean} hasNestedFields=false
+     * @protected
+     */
+    hasNestedFields = false
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        RecordFactory.createRecordClass(this)
+    }
+
+    /**
+     Triggered after the fields config got changed
+     * @param {Object[]|null} value
+     * @param {Object[]|null} oldValue
+     * @protected
+     */
+    afterSetFields(value, oldValue) {
+        if (value) {
+            let me = this;
+
+            me.updateFieldsMap(value);
+
+            // Fields can get changed multiple times before the model instance is getting constructed.
+            // We only need the latest state before construction & honor run-time changes.
+            if (me.isConstructed) {
+                RecordFactory.createRecordClass(me, true)
+            }
+        }
+    }
+
     /**
      * Finds a field config by a given field name
      * @param {String} name
      * @returns {Object|null} The field config object or null if no match was found
      */
     getField(name) {
-        let me  = this,
-            i   = 0,
-            len = me.fields?.length || 0;
+        return this.fieldsMap.get(name) || null
+    }
 
-        for (; i < len; i++) {
-            if (me.fields[i].name === name) {
-                return me.fields[i]
-            }
+    /**
+     * @param {Object[]} fields
+     * @param {Boolean} isRoot=true
+     * @param {String} path=''
+     */
+    updateFieldsMap(fields, isRoot=true, path='') {
+        let me          = this,
+            {fieldsMap} = me,
+            fieldName;
+
+        if (isRoot) {
+            fieldsMap.clear();
+            me.hasNestedFields = false
         }
 
-        return null
+        fields.forEach(field => {
+            fieldName = path + field.name
+
+            // Assuming that nested fields contain the full path as the name, we do not need a prefix.
+            if (field.fields) {
+                me.hasNestedFields = true;
+                me.updateFieldsMap(field.fields, false, field.name + '.')
+            } else {
+                fieldsMap.set(fieldName, field)
+            }
+        })
     }
 }
 

package/src/data/RecordFactory.mjs

@@ -2,6 +2,8 @@ import Base   from '../core/Base.mjs';
 import Logger from '../util/Logger.mjs';
 import Model  from './Model.mjs';
 
+const dataSymbol = Symbol.for('data');
+
 let instance;
 
 /**
@@ -35,57 +37,46 @@ class RecordFactory extends Base {
 
     /**
      * @param {Object} data
-     * @param {Object} data.config
      * @param {Object} data.field
      * @param {Neo.data.RecordFactory} data.me
      * @param {Neo.data.Model} data.model
      * @param {String} data.path=''
      */
-    createField({config, field, me, model, path=''}) {
-        let value     = Neo.ns(field.mapping || field.name, false, config),
-            fieldName = field.name.split('.').pop(),
-            symbol    = Symbol.for(fieldName),
-            fieldPath, parsedValue, properties;
+    createField({field, me, model, path=''}) {
+        let fieldName = field.name,
+            fieldPath = path === '' ? fieldName : `${path}.${fieldName}`,
+            properties;
 
         if (field.fields) {
             field.fields.forEach(childField => {
-                fieldPath = path.split('.');
-                fieldPath = fieldPath.filter(Boolean);
-                fieldPath.push(field.name);
-
-                this.createField({config, field: childField, me, model, path: fieldPath.join('.')})
+                this.createField({field: childField, me, model, path: fieldPath})
             })
         } else {
-            if (value === undefined && Object.hasOwn(field, 'defaultValue')) {
-                value = field.defaultValue
-            }
-
-            parsedValue = instance.parseRecordValue(me, field, value, config);
-
             properties = {
-                [symbol]: {
-                    value   : Neo.clone(parsedValue, true),
-                    writable: true
-                },
-                [fieldName]: {
+                [fieldPath]: {
                     configurable: true,
                     enumerable  : true,
                     get() {
-                        return this[symbol]
+                        if (model.hasNestedFields) {
+                            return Neo.ns(fieldPath, false, this[dataSymbol])
+                        }
+
+                        return this[dataSymbol][fieldName]
                     },
                     set(value) {
-                        let oldValue = this[symbol];
+                        let me       = this,
+                            oldValue = me[dataSymbol][fieldName];
 
                         value = instance.parseRecordValue(me, field, value);
 
                         if (!Neo.isEqual(value, oldValue)) {
-                            this[symbol] = value;
+                            instance.setRecordData(fieldPath, model, me, value);
 
                             me._isModified = true;
                             me._isModified = instance.isModified(me, model.trackModifiedFields);
 
                             instance.onRecordChange({
-                                fields: [{name: field.name, oldValue, value}],
+                                fields: [{name: fieldPath, oldValue, value}],
                                 model,
                                 record: me
                             })
@@ -97,11 +88,11 @@ class RecordFactory extends Base {
             // adding the original value of each field
             if (model.trackModifiedFields) {
                 properties[instance.ovPrefix + field.name] = {
-                    value: parsedValue
+                    value
                 }
             }
 
-            Object.defineProperties(path ? Neo.ns(path, true, me) : me, properties)
+            Object.defineProperties(me, properties)
         }
     }
 
@@ -122,37 +113,28 @@ class RecordFactory extends Base {
 
     /**
      * @param {Neo.data.Model} model
+     * @param {Boolean} overwrite=false
      * @returns {Object}
      */
-    createRecordClass(model) {
+    createRecordClass(model, overwrite=false) {
         if (model instanceof Model) {
             let className = `${this.recordNamespace}.${model.className}.${model.id}`,
                 ns        = Neo.ns(className),
                 key, nsArray, cls;
 
-            if (!ns) {
+            if (!ns || overwrite) {
                 nsArray = className.split('.');
                 key     = nsArray.pop();
                 ns      = Neo.ns(nsArray, true);
                 cls     = ns[key] = class Record {
                     // We do not want to minify the ctor class name in dist/production
-                    static name = 'Record'
+                    static name = 'Record';
+
+                    [dataSymbol] = {}
 
                     constructor(config) {
-                        let me = this;
-
-                        Object.defineProperties(me, {
-                            _isModified: {
-                                value   : false,
-                                writable: true
-                            }
-                        });
-
-                        if (Array.isArray(model.fields)) {
-                            model.fields.forEach(field => {
-                                instance.createField({config, field, me, model})
-                            })
-                        }
+                        this.setSilent(config);
+                        this._isModified = false
                     }
 
                     /**
@@ -170,8 +152,22 @@ class RecordFactory extends Base {
                     setSilent(fields) {
                         instance.setRecordFields(model, this, fields, true)
                     }
+
+                    /**
+                     * When using JSON.stringify(this), we want to get the raw data
+                     * @returns {Object}
+                     */
+                    toJSON() {
+                        return this[dataSymbol]
+                    }
                 };
 
+                if (Array.isArray(model.fields)) {
+                    model.fields.forEach(field => {
+                        instance.createField({field, me: cls.prototype, model})
+                    })
+                }
+
                 Object.defineProperty(cls.prototype, 'isRecord', {value: true});
                 Object.defineProperty(cls, 'isClass', {value: true});
 
@@ -256,7 +252,7 @@ class RecordFactory extends Base {
      * @param {Object} recordConfig=null
      * @returns {*}
      */
-    parseRecordValue(record, field, value, recordConfig=null) {
+    parseRecordValue(record, field, value, recordConfig=null) {!field && console.log(record, value);
         if (field.calculate) {
             return field.calculate(record, field, recordConfig)
         }
@@ -325,24 +321,55 @@ class RecordFactory extends Base {
         return value
     }
 
+    /**
+     * @param {String} fieldName
+     * @param {Neo.data.Model} model
+     * @param {Record} record
+     * @param {*} value
+     * @protected
+     */
+    setRecordData(fieldName, model, record, value) {
+        if (model.hasNestedFields && fieldName.includes('.')) {
+            let ns, nsArray;
+
+            nsArray   = fieldName.split('.');
+            fieldName = nsArray.pop();
+            ns        = Neo.ns(nsArray, true, record[dataSymbol]);
+
+            ns[fieldName] = value
+        } else {
+            record[dataSymbol][fieldName] = value
+        }
+    }
+
     /**
      * @param {Neo.data.Model} model
      * @param {Object} record
      * @param {Object} fields
      * @param {Boolean} silent=false
+     * @param {Object[]} changedFields=[] Internal flag
      */
-    setRecordFields(model, record, fields, silent=false) {
-        let changedFields = [],
-            oldValue;
+    setRecordFields(model, record, fields, silent=false, changedFields=[]) {
+        let {fieldsMap} = model,
+            fieldExists, oldValue;
 
         Object.entries(fields).forEach(([key, value]) => {
-            oldValue = record[key];
-            value    = instance.parseRecordValue(record, model.getField(key), value);
+            fieldExists = fieldsMap.has(key);
 
-            if (!Neo.isEqual(oldValue, value)) {
-                record[Symbol.for(key)] = value; // silent update
-                record._isModified = true;
-                changedFields.push({name: key, oldValue, value})
+            if (Neo.isObject(value) && !fieldExists) {
+                Object.entries(value).forEach(([childKey, childValue]) => {
+                    this.setRecordFields(model, record, {[`${key}.${childKey}`]: childValue}, true, changedFields)
+                })
+            } 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);
+
+                    record._isModified = true;
+                    changedFields.push({name: key, oldValue, value})
+                }
             }
         });
 

package/src/data/Store.mjs

@@ -197,8 +197,7 @@ class Store extends Base {
      */
     afterSetModel(value, oldValue) {
         if (value) {
-            value.storeId = this.id;
-            RecordFactory.createRecordClass(value)
+            value.storeId = this.id
         }
     }
 

package/src/dialog/Base.mjs

@@ -414,6 +414,8 @@ class Dialog extends Panel {
         // rendered outside the visible area
         await me.render(true);
 
+        await me.timeout(30);
+
         let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
 
         // Move to cover the animation target

package/src/grid/Container.mjs

@@ -1,7 +1,6 @@
 import BaseContainer   from '../container/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
 import GridView        from './View.mjs';
-import RowModel        from '../selection/grid/RowModel.mjs';
 import Store           from '../data/Store.mjs';
 import * as header     from './header/_export.mjs';
 
@@ -58,11 +57,6 @@ class GridContainer extends BaseContainer {
          * @member {String|null} headerToolbarId_=null
          */
         headerToolbarId_: null,
-        /**
-         * Additional used keys for the selection model
-         * @member {Object} keys
-         */
-        keys: {},
         /**
          * @member {String} layout='base'
          */
@@ -81,10 +75,6 @@ class GridContainer extends BaseContainer {
          * @protected
          */
         scrollbarId_: null,
-        /**
-         * @member {Neo.selection.Model} selectionModel_=null
-         */
-        selectionModel_: null,
         /**
          * @member {Boolean} showHeaderFilters_=false
          */
@@ -294,16 +284,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * Triggered after the selectionModel config got changed
-     * @param {Neo.selection.Model} value
-     * @param {Neo.selection.Model} oldValue
-     * @protected
-     */
-    afterSetSelectionModel(value, oldValue) {
-        this.rendered && value.register(this)
-    }
-
     /**
      * Triggered after the showHeaderFilters config got changed
      * @param {Boolean} value
@@ -352,18 +332,6 @@ class GridContainer extends BaseContainer {
         return value || oldValue
     }
 
-    /**
-     * Triggered before the selectionModel config gets changed.
-     * @param {Neo.selection.Model} value
-     * @param {Neo.selection.Model} oldValue
-     * @protected
-     */
-    beforeSetSelectionModel(value, oldValue) {
-        oldValue?.destroy();
-
-        return ClassSystemUtil.beforeSetInstance(value, RowModel)
-    }
-
     /**
      * Triggered before the store config gets changed.
      * @param {Neo.data.Store} value
@@ -534,14 +502,6 @@ class GridContainer extends BaseContainer {
         return `${this.id}__wrapper`
     }
 
-    /**
-     *
-     */
-    onConstructed() {
-        super.onConstructed();
-        this.selectionModel?.register(this)
-    }
-
     /**
      * @param {Object} data
      */

package/src/grid/View.mjs

@@ -1,6 +1,8 @@
-import Component from '../component/Base.mjs';
-import NeoArray  from '../util/Array.mjs';
-import VDomUtil  from '../util/VDom.mjs';
+import ClassSystemUtil from '../util/ClassSystem.mjs';
+import Component       from '../component/Base.mjs';
+import NeoArray        from '../util/Array.mjs';
+import RowModel        from '../selection/grid/RowModel.mjs';
+import VDomUtil        from '../util/VDom.mjs';
 
 /**
  * @class Neo.grid.View
@@ -75,9 +77,10 @@ class GridView extends Component {
          */
         isScrolling_: false,
         /**
-         * @member {Object} recordVnodeMap={}
+         * Additional used keys for the selection model
+         * @member {Object} keys
          */
-        recordVnodeMap: {},
+        keys: {},
         /**
          * @member {String} role='rowgroup'
          */
@@ -91,6 +94,10 @@ class GridView extends Component {
          * @member {Object} scrollPosition_={x:0,y:0}
          */
         scrollPosition_: {x: 0, y: 0},
+        /**
+         * @member {Neo.selection.Model} selectionModel_=null
+         */
+        selectionModel_: null,
         /**
          * @member {String} selectedRecordField='annotations.selected'
          */
@@ -103,10 +110,6 @@ class GridView extends Component {
          * @member {Neo.data.Store|null} store_=null
          */
         store_: null,
-        /**
-         * @member {Boolean} useRowRecordIds=true
-         */
-        useRowRecordIds: true,
         /**
          * Stores the indexes of the first & last painted columns
          * @member {Number[]} visibleColumns_=[0,0]
@@ -121,7 +124,7 @@ class GridView extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {cn: [
+        {tabIndex: '-1', cn: [
             {cn: []},
             {cls: 'neo-grid-scrollbar'}
         ]}
@@ -143,10 +146,10 @@ class GridView extends Component {
      * @member {String[]} selectedRows
      */
     get selectedRows() {
-        let {gridContainer} = this;
+        let {selectionModel} = this;
 
-        if (gridContainer.selectionModel.ntype === 'selection-grid-rowmodel') {
-            return gridContainer.selectionModel.items
+        if (selectionModel.ntype === 'selection-grid-rowmodel') {
+            return selectionModel.items
         }
 
         return []
@@ -319,6 +322,16 @@ class GridView extends Component {
         }
     }
 
+    /**
+     * Triggered after the selectionModel config got changed
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
+     */
+    afterSetSelectionModel(value, oldValue) {
+        this.rendered && value.register(this)
+    }
+
     /**
      * Triggered after the startIndex config got changed
      * @param {Number} value
@@ -375,7 +388,7 @@ class GridView extends Component {
             cellCls     = ['neo-grid-cell'],
             colspan     = record[me.colspanField],
             {dataField} = column,
-            fieldValue  = Neo.ns(dataField, false, record),
+            fieldValue  = record[dataField],
             cellConfig, rendererOutput;
 
         if (fieldValue === null || fieldValue === undefined) {
@@ -428,8 +441,7 @@ class GridView extends Component {
             id             : cellId,
             cls            : cellCls,
             role           : 'gridcell',
-            style          : rendererOutput.style || {},
-            tabIndex       : '-1'
+            style          : rendererOutput.style || {}
         };
 
         if (column.width) {
@@ -449,6 +461,18 @@ class GridView extends Component {
         return cellConfig
     }
 
+    /**
+     * Triggered before the selectionModel config gets changed.
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
+     */
+    beforeSetSelectionModel(value, oldValue) {
+        oldValue?.destroy();
+
+        return ClassSystemUtil.beforeSetInstance(value, RowModel)
+    }
+
     /**
      * @param {Object} opts
      * @param {Object} opts.record
@@ -467,13 +491,11 @@ class GridView extends Component {
             trCls    = me.getTrClass(record, rowIndex),
             config, column, endIndex, gridRow, i, startIndex;
 
-        me.recordVnodeMap[id] = rowIndex;
-
         if (rowIndex % 2 !== 0) {
             trCls.push('neo-even')
         }
 
-        if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+        if (selectedRows && record[me.selectedRecordField]) {
             NeoArray.add(selectedRows, id)
         }
 
@@ -491,7 +513,6 @@ class GridView extends Component {
             cls            : trCls,
             cn             : [],
             role           : 'row',
-            tabIndex       : '-1',
 
             style: {
                 height   : me.rowHeight + 'px',
@@ -657,27 +678,28 @@ class GridView extends Component {
 
     /**
      * @param {String} rowId
-     * @returns {Object}
+     * @returns {Record}
      */
     getRecordByRowId(rowId) {
-        return this.store.getAt(this.recordVnodeMap[rowId])
+        let recordId = rowId.split('__')[2],
+            {store}  = this,
+            {model}  = store,
+            keyField = model?.getField(store.getKeyProperty()),
+            keyType  = keyField?.type?.toLowerCase();
+
+        if (keyType === 'int' || keyType === 'integer') {
+            recordId = parseInt(recordId)
+        }
+
+        return store.get(recordId)
     }
 
     /**
      * @param {Object} record
-     * @param {Number} [index]
      * @returns {String}
      */
-    getRowId(record, index) {
-        let me      = this,
-            {store} = me;
-
-        if (me.useRowRecordIds) {
-            return `${me.id}__tr__${record[store.keyProperty]}`
-        } else {
-            index = Neo.isNumber(index) ? index : store.indexOf(record);
-            return me.vdom.cn[index]?.id || Neo.getId('tr')
-        }
+    getRowId(record) {
+        return `${this.id}__tr__${record[this.store.getKeyProperty()]}`
     }
 
     /**
@@ -727,6 +749,14 @@ class GridView extends Component {
         this.fireCellEvent(data, 'cellDoubleClick')
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+        this.selectionModel?.register(this)
+    }
+
     /**
      * @param {Object} data
      */
@@ -768,7 +798,7 @@ class GridView extends Component {
      * @param {Neo.data.Model} opts.model The model instance of the changed record
      * @param {Object} opts.record
      */
-    onStoreRecordChange({fields, model, record}) {
+    onStoreRecordChange({fields, record}) {
         let me               = this,
             fieldNames       = fields.map(field => field.name),
             needsUpdate      = false,

package/src/grid/header/Button.mjs

@@ -426,9 +426,9 @@ class Button extends BaseButton {
         if (store) {
             filter = store.getFilter(me.dataField);
             model  = store.model;
-            field  = model && model.getField(me.dataField);
+            field  = model.getField(me.dataField);
 
-            if (value && field.type.toLowerCase() === 'date') {
+            if (value && field?.type.toLowerCase() === 'date') {
                 value = new Date(value)
             }
 

package/src/grid/header/Toolbar.mjs

@@ -106,7 +106,8 @@ class Toolbar extends BaseToolbar {
      *
      */
     createItems() {
-        let me = this;
+        let me        = this,
+            {mounted} = me;
 
         me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
@@ -130,7 +131,8 @@ class Toolbar extends BaseToolbar {
         });
 
         me.promiseUpdate().then(() => {
-            me.mounted && me.passSizeToView()
+            // To prevent duplicate calls, we need to check the mounted state before the update call
+            mounted && me.passSizeToView()
         })
     }