neo.mjs 8.29.0 → 8.31.0

package/src/data/Store.mjs

@@ -400,7 +400,7 @@ class Store extends Base {
     onCollectionMutate(opts) {
         let me = this;
 
-        if (me.configsApplied && !me.isLoading) {
+        if (me.isConstructed && !me.isLoading) {
             me.fire('load', me.items)
         }
     }
@@ -411,9 +411,8 @@ class Store extends Base {
     onCollectionSort() {
         let me = this;
 
-        if (me.configsApplied) {
-            // console.log('onCollectionSort', me.collection.items);
-            // me.fire('load', me.items);
+        if (me.isConstructed) {
+            //me.fire('load', me.items)
         }
     }
 
@@ -426,14 +425,18 @@ class Store extends Base {
         let me = this;
 
         if (me.data) {
-            me.afterSetData(me.data);
+            me.afterSetData(me.data)
         }
 
-        if (me.autoLoad) {
-            me.timeout(100).then(() => { // todo
+        // Being constructed does not mean that related afterSetStore() methods got executed
+        // => break the sync flow to ensure potential listeners got applied
+        Promise.resolve().then(() => {
+            if (me.getCount() > 0) {
+                me.fire('load', me.items)
+            } else if (me.autoLoad) {
                 me.load()
-            })
-        }
+            }
+        })
     }
 
     /**

package/src/grid/Container.mjs

@@ -22,7 +22,8 @@ class GridContainer extends BaseContainer {
         animatedChange: column.AnimatedChange,
         column        : column.Base,
         component     : column.Component,
-        index         : column.Index
+        index         : column.Index,
+        progress      : column.Progress
     }
     /**
      * @member {Object} delayable
@@ -321,6 +322,29 @@ class GridContainer extends BaseContainer {
         }
     }
 
+    /**
+     * Triggered after the store config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        let me        = this,
+            listeners = {
+                filter: me.onStoreFilter,
+                load  : me.onStoreLoad,
+                scope : me
+            };
+
+        value   ?.on(listeners);
+        oldValue?.un(listeners);
+
+        // in case we dynamically change the store, the view needs to get the new reference
+        if (me.view) {
+            me.view.store = value
+        }
+    }
+
     /**
      * Triggered before the columns config gets changed.
      * @param {Object[]} value
@@ -347,36 +371,13 @@ class GridContainer extends BaseContainer {
 
     /**
      * Triggered before the store config gets changed.
-     * @param {Neo.data.Store} value
-     * @param {Neo.data.Store} oldValue
+     * @param {Object|Neo.data.Store|null} value
+     * @param {Neo.data.Store}             oldValue
      * @protected
      */
     beforeSetStore(value, oldValue) {
-        oldValue?.destroy();
-
         if (value) {
-            let me = this,
-
-                listeners = {
-                    filter      : me.onStoreFilter,
-                    load        : me.onStoreLoad,
-                    recordChange: me.onStoreRecordChange,
-                    scope       : me
-                };
-
-            if (value instanceof Store) {
-                value.on(listeners);
-                value.getCount() > 0 && me.onStoreLoad(value.items)
-            } else {
-                value = ClassSystemUtil.beforeSetInstance(value, Store, {
-                    listeners
-                })
-            }
-
-            // in case we dynamically change the store, the view needs to get the new reference
-            if (me.view) {
-                me.view.store = value
-            }
+            value = ClassSystemUtil.beforeSetInstance(value, Store)
         }
 
         return value
@@ -475,24 +476,14 @@ class GridContainer extends BaseContainer {
         })
     }
 
-    /**
-     * @param {Array} inputData
-     */
-    createViewData(inputData) {
-        let me = this;
-
-        me.getVdomRoot()['aria-rowcount'] = inputData.length + 2; // 1 based & the header row counts as well
-        me.update();
-
-        me.view.createViewData()
-    }
-
     /**
      * @param args
      */
     destroy(...args) {
         let me = this;
 
+        me.store = null; // remove the listeners
+
         me.scrollManager.destroy();
 
         me.mounted && Neo.main.addon.ResizeObserver.unregister({
@@ -569,14 +560,14 @@ class GridContainer extends BaseContainer {
 
         me.store.sort(opts);
         me.removeSortingCss(opts.property);
-        me.onStoreLoad(me.store.items)
+        me.view.onStoreLoad()
     }
 
     /**
      *
      */
     onStoreFilter() {
-        this.onStoreLoad(this.store.items)
+        this.updateRowCount()
     }
 
     /**
@@ -586,37 +577,13 @@ class GridContainer extends BaseContainer {
     onStoreLoad(data) {
         let me = this;
 
-        if (me.rendered) {
-            me.createViewData(data);
-
-            me.timeout(50).then(() => {
-                Neo.main.DomAccess.scrollTo({
-                    direction: 'top',
-                    id       : me.view.vdom.id,
-                    value    : 0
-                })
-            })
+        me.updateRowCount();
 
-            if (me.store.sorters.length < 1) {
-                me.removeSortingCss()
-            }
+        if (me.store.sorters?.length < 1) {
+            me.removeSortingCss()
         }
     }
 
-    /**
-     * Gets triggered after changing the value of a record field.
-     * E.g. myRecord.foo = 'bar';
-     * @param {Object} opts
-     * @param {String} opts.field The name of the field which got changed
-     * @param {Neo.data.Model} opts.model The model instance of the changed record
-     * @param {*} opts.oldValue
-     * @param {Object} opts.record
-     * @param {*} opts.value
-     */
-    onStoreRecordChange(opts) {
-        this.view.onStoreRecordChange(opts)
-    }
-
     /**
      * @param {Boolean} silent=false
      * @returns {Promise<void>}
@@ -700,6 +667,16 @@ class GridContainer extends BaseContainer {
             })
         }
     }
+
+    /**
+     * @param {Boolean} silent=false
+     */
+    updateRowCount(silent=false) {
+        let me = this;
+
+        this.getVdomRoot()['aria-rowcount'] = me.store.getCount() + 2; // 1 based & the header row counts as well
+        !silent && this.update()
+    }
 }
 
 export default Neo.setupClass(GridContainer);

package/src/grid/ScrollManager.mjs

@@ -151,7 +151,7 @@ class ScrollManager extends Base {
 
         me.scrollTimeoutId = setTimeout(() => {
             view.isScrolling = false
-        }, 30);
+        }, 100);
 
         view.set({isScrolling: true, scrollTop});
 

package/src/grid/View.mjs

@@ -21,6 +21,10 @@ class GridView extends Component {
          * @protected
          */
         ntype: 'grid-view',
+        /**
+         * @member {Boolean} animatedRowSorting_=false
+         */
+        animatedRowSorting_: false,
         /**
          * Internal flag. Gets calculated when mounting the grid.Container
          * @member {Number} availableHeight_=0
@@ -93,6 +97,11 @@ class GridView extends Component {
          * @protected
          */
         mountedRows: [0, 0],
+        /**
+         * Optional config values for Neo.grid.plugin.AnimateRows
+         * @member {Object} pluginAnimateRowsConfig=null
+         */
+        pluginAnimateRowsConfig: null,
         /**
          * @member {String} role='rowgroup'
          */
@@ -204,6 +213,30 @@ class GridView extends Component {
         }])
     }
 
+    /**
+     * Triggered after the animatedRowSorting config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAnimatedRowSorting(value, oldValue) {
+        if (value && !this.getPlugin('grid-animate-rows')) {
+            import('./plugin/AnimateRows.mjs').then(module => {
+                let me      = this,
+                    plugins = me.plugins || [];
+
+                plugins.push({
+                    module  : module.default,
+                    appName : me.appName,
+                    windowId: me.windowId,
+                    ...me.pluginAnimateRowsConfig
+                });
+
+                me.plugins = plugins
+            })
+        }
+    }
+
     /**
      * Triggered after the availableHeight config got changed
      * @param {Number} value
@@ -364,6 +397,25 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
+    /**
+     * Triggered after the store config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        let me        = this,
+            listeners = {
+                filter      : me.onStoreFilter,
+                load        : me.onStoreLoad,
+                recordChange: me.onStoreRecordChange,
+                scope       : me
+            };
+
+        oldValue?.un(listeners);
+        value   ?.on(listeners);
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.cellId]
@@ -608,7 +660,8 @@ class GridView extends Component {
      * @param args
      */
     destroy(...args) {
-        this.store = null;
+        this.store = null; // remove the listeners
+
         super.destroy(...args)
     }
 
@@ -849,6 +902,33 @@ class GridView extends Component {
         this.fireRowEvent(data, 'rowDoubleClick')
     }
 
+    /**
+     *
+     */
+    onStoreFilter() {
+        this.onStoreLoad()
+    }
+
+    /**
+     * @param {Object[]} data
+     * @protected
+     */
+    onStoreLoad(data) {
+        let me = this;
+
+        me.createViewData();
+
+        if (me.mounted) {
+            me.timeout(50).then(() => {
+                Neo.main.DomAccess.scrollTo({
+                    direction: 'top',
+                    id       : me.vdom.id,
+                    value    : 0
+                })
+            })
+        }
+    }
+
     /**
      * @param {Object}         data
      * @param {Object[]}       data.fields Each field object contains the keys: name, oldValue, value

package/src/grid/column/Component.mjs

@@ -1,4 +1,3 @@
-import Button from '../../button/Base.mjs';
 import Column from './Base.mjs';
 
 /**
@@ -16,6 +15,20 @@ class Component extends Column {
          * @member {Function|Object|null} component=null
          */
         component: null,
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: null,
+        /**
+         * Components can delegate event listeners (or button handlers) into methods somewhere inside
+         * the view controller or component tree hierarchy.
+         *
+         * In this case, it is helpful to know what the related record is, so we are adding the record
+         * to the component as a property. By default, as 'record', but this config can change the property name.
+         * @member {String} recordProperty='record'
+         */
+        recordProperty: 'record',
         /**
          * @member {String} type='component'
          * @protected
@@ -29,9 +42,19 @@ class Component extends Column {
      */
     map = new Map()
 
+    /**
+     * Override as needed inside class extensions
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return config
+    }
+
     /**
      * @param {Object}             data
-     * @param {Neo.button.Base}    data.column
+     * @param {Neo.column.Base}    data.column
      * @param {Number}             data.columnIndex
      * @param {String}             data.dataField
      * @param {Neo.grid.Container} data.gridContainer
@@ -42,28 +65,36 @@ class Component extends Column {
      * @returns {*}
      */
     cellRenderer(data) {
-        let {gridContainer, rowIndex} = data,
-            {appName, view, windowId} = gridContainer,
-            me              = this,
-            id              = `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`,
-            component       = me.map.get(id),
-            componentConfig = me.component;
+        let {gridContainer, record, rowIndex} = data,
+            {appName, view, windowId}         = gridContainer,
+            me               = this,
+            {recordProperty} = me,
+            id               = me.getComponentId(rowIndex),
+            component        = me.map.get(id),
+            componentConfig  = me.component;
 
         if (Neo.typeOf(componentConfig) === 'Function') {
             componentConfig = componentConfig(data)
         }
 
+        componentConfig = me.applyRecordConfigs(componentConfig, record);
+
         if (component) {
             delete componentConfig.className;
             delete componentConfig.module;
             delete componentConfig.ntype;
 
+            componentConfig[recordProperty] = record;
+
             component.set(componentConfig)
         } else {
             component = Neo.create({
+                ...me.defaults,
                 ...componentConfig,
                 appName,
                 id,
+                parentComponent : view,
+                [recordProperty]: record,
                 windowId
             });
 
@@ -74,6 +105,17 @@ class Component extends Column {
 
         return component.createVdomReference()
     }
+
+    /**
+     * @param {Number} rowIndex
+     * @returns {String}
+     */
+    getComponentId(rowIndex) {
+        let me     = this,
+            {view} = me.parent;
+
+        return `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`
+    }
 }
 
 export default Neo.setupClass(Component);

package/src/grid/column/Progress.mjs

@@ -0,0 +1,42 @@
+import ComponentColumn   from './Component.mjs';
+import ProgressComponent from '../../component/Progress.mjs';
+
+/**
+ * @class Neo.grid.column.Progress
+ * @extends Neo.grid.column.Component
+ */
+class Progress extends ComponentColumn {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.column.Progress'
+         * @protected
+         */
+        className: 'Neo.grid.column.Progress',
+        /**
+         * @member {Object} defaults
+         * @protected
+         */
+        defaults: {
+            module: ProgressComponent
+        },
+        /**
+         * @member {String} type='progress'
+         * @protected
+         */
+        type: 'progress'
+    }
+
+    /**
+     * @param {Object} config
+     * @param {Record} record
+     * @returns {Object}
+     */
+    applyRecordConfigs(config, record) {
+        return {
+            value: record[this.dataField],
+            ...config
+        }
+    }
+}
+
+export default Neo.setupClass(Progress);

package/src/grid/column/_export.mjs

@@ -2,5 +2,6 @@ import AnimatedChange from './AnimatedChange.mjs';
 import Base           from './Base.mjs';
 import Component      from './Component.mjs';
 import Index          from './Index.mjs';
+import Progress       from './Progress.mjs';
 
-export {AnimatedChange, Base, Component, Index};
+export {AnimatedChange, Base, Component, Index, Progress};

package/src/grid/header/Button.mjs

@@ -176,7 +176,7 @@ class Button extends BaseButton {
         let me    = this,
             {cls} = me;
 
-        if (value === true) {
+        if (value) {
             NeoArray.remove(cls, 'neo-sort-hidden');
 
             me.addDomListeners({
@@ -211,7 +211,6 @@ class Button extends BaseButton {
      */
     destroy(...args) {
         this.filterField?.destroy();
-
         super.destroy(...args)
     }