neo.mjs 8.0.0 → 8.1.0

package/src/grid/Container.mjs

@@ -1,15 +1,24 @@
 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 View            from './View.mjs';
 import * as header     from './header/_export.mjs';
 
 /**
  * @class Neo.grid.Container
  * @extends Neo.container.Base
  */
-class Container extends BaseContainer {
+class GridContainer extends BaseContainer {
+    /**
+     * @member {Object} delayable
+     * @protected
+     * @static
+     */
+    static delayable = {
+        onResize: {type: 'buffer', timer: 300}
+    }
+
     static config = {
         /**
          * @member {String} className='Neo.grid.Container'
@@ -23,57 +32,124 @@ class Container extends BaseContainer {
         ntype: 'grid-container',
         /**
          * @member {String[]} baseCls=['neo-grid-container']
+         * @protected
          */
         baseCls: ['neo-grid-container'],
+        /**
+         * true uses grid.plugin.CellEditing
+         * @member {Boolean} cellEditing_=false
+         */
+        cellEditing_: false,
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults=null
+         */
+        columnDefaults: null,
         /**
          * @member {Object[]} columns_=[]
          */
         columns_: [],
+        /**
+         * Configs for Neo.grid.header.Toolbar
+         * @member {Object|null} [headerToolbarConfig=null]
+         */
+        headerToolbarConfig: null,
+        /**
+         * @member {String|null} headerToolbarId_=null
+         */
+        headerToolbarId_: null,
         /**
          * Additional used keys for the selection model
-         * @member {Object} keys={}
+         * @member {Object} keys
          */
         keys: {},
         /**
          * @member {String} layout='base'
          */
         layout: 'base',
+        /**
+         * @member {String} role='grid'
+         */
+        role: 'grid',
+        /**
+         * Number in px
+         * @member {Number} rowHeight_=32
+         */
+        rowHeight_: 32,
+        /**
+         * @member {String|null} scrollbarId_=null
+         * @protected
+         */
+        scrollbarId_: null,
         /**
          * @member {Neo.selection.Model} selectionModel_=null
          */
         selectionModel_: null,
+        /**
+         * @member {Boolean} showHeaderFilters_=false
+         */
+        showHeaderFilters_: false,
+        /**
+         * @member {Boolean} sortable_=true
+         */
+        sortable_: true,
         /**
          * @member {Neo.data.Store} store_=null
          */
         store_: null,
+        /**
+         * Configs for Neo.grid.View
+         * @member {Object|null} [viewConfig=null]
+         */
+        viewConfig: null,
+        /**
+         * @member {String|null} viewId_=null
+         * @protected
+         */
+        viewId_: null,
+        /**
+         * @member {Array|null} items=null
+         * @protected
+         */
+        items: null,
         /**
          * @member {Object} _vdom={cls:['neo-grid-wrapper'],cn:[{cn:[]}]}
          */
         _vdom:
         {cls: ['neo-grid-wrapper'], cn: [
-            {cn: []}
+            {'aria-rowcount': 1, cn: []} // aria-rowcount includes the column headers
         ]}
     }
 
     /**
-     * Configs for Neo.grid.header.Toolbar
-     * @member {Object|null} [headerToolbarConfig=null]
+     * We do not need the first event to trigger logic, since afterSetMounted() handles this
+     * @member {Boolean}} initialResizeEvent=true
      */
-    headerToolbarConfig = null
+    initialResizeEvent = true
+
     /**
-     * @member {String|null} headerToolbarId_=null
+     * Convenience method to access the Neo.grid.header.Toolbar
+     * @returns {Neo.grid.header.Toolbar|null}
      */
-    headerToolbarId = null
+    get headerToolbar() {
+        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
+    }
+
     /**
-     * Configs for Neo.grid.View
-     * @member {Object|null} [viewConfig=null]
+     * Convenience method to access the Neo.grid.Scrollbar
+     * @returns {Neo.grid.Scrollbar|null}
      */
-    viewConfig = null
+    get scrollbar() {
+        return Neo.getComponent(this.scrollbarId) || Neo.get(this.scrollbarId)
+    }
+
     /**
-     * @member {String|null} viewId_=null
-     * @protected
+     * Convenience method to access the Neo.grid.View
+     * @returns {Neo.grid.View|null}
      */
-    viewId = null
+    get view() {
+        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
+    }
 
     /**
      * @param {Object} config
@@ -81,27 +157,124 @@ class Container extends BaseContainer {
     construct(config) {
         super.construct(config);
 
-        let me = this;
+        let me                 = this,
+            {rowHeight, store} = me;
 
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
+        me.scrollbarId     = Neo.getId('grid-scrollbar');
         me.viewId          = Neo.getId('grid-view');
 
         me.items = [{
             module           : header.Toolbar,
+            gridContainer    : me,
             id               : me.headerToolbarId,
             showHeaderFilters: me.showHeaderFilters,
+            sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module     : View,
+            module     : GridView,
             containerId: me.id,
             id         : me.viewId,
-            store      : me.store,
+            rowHeight,
+            store,
             ...me.viewConfig
         }];
 
-        me.vdom.id = me.id + 'wrapper';
+        me.vdom.id = me.getWrapperId();
+
+        me.createColumns(me.columns);
+
+        me.addDomListeners({
+            resize: me.onResize,
+            scroll: me.onScroll,
+            scope : me
+        })
+    }
+
+    /**
+     * Triggered after the cellEditing config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetCellEditing(value, oldValue) {
+        if (value) {
+            import('./plugin/CellEditing.mjs').then(module => {
+                let me                  = this,
+                    {appName, windowId} = me,
+                    plugins             = me.plugins || [];
+
+                plugins.push({
+                    module : module.default,
+                    appName,
+                    windowId
+                });
+
+                me.plugins = plugins
+            })
+        }
+    }
+
+    /**
+     * Triggered after the columns config got changed
+     * @param {Object[]|null} value
+     * @param {Object[]|null} oldValue
+     * @protected
+     */
+    afterSetColumns(value, oldValue) {
+        if (Array.isArray(oldValue) && oldValue.length > 0) {
+            let me              = this,
+                {headerToolbar} = me;
+
+            if (headerToolbar) {
+                headerToolbar.items = value;
+                headerToolbar.createItems()
+            }
+
+            me.view?.createViewData(me.store.items)
+        }
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me               = this,
+            {ResizeObserver} = Neo.main.addon,
+            resizeParams     = {id: me.id, windowId: me.windowId};
+
+        if (value) {
+            ResizeObserver.register(resizeParams);
+            me.passSizeToView()
+        } else if (!value && oldValue) { // unmount
+            me.initialResizeEvent = true;
+            ResizeObserver.unregister(resizeParams)
+        }
+    }
+
+    /**
+     * Triggered after the rowHeight config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetRowHeight(value, oldValue) {
+        if (value > 0) {
+            let {scrollbar, view} = this;
+
+            if (scrollbar) {
+                scrollbar.rowHeight = value
+            }
 
-        me.createColumns(me.columns)
+            if (view) {
+                view.rowHeight = value
+            }
+        }
     }
 
     /**
@@ -114,6 +287,30 @@ class Container extends BaseContainer {
         this.rendered && value.register(this)
     }
 
+    /**
+     * Triggered after the showHeaderFilters config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowHeaderFilters(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.headerToolbar.showHeaderFilters = value
+        }
+    }
+
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetSortable(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.headerToolbar.sortable = value
+        }
+    }
+
     /**
      * Triggered before the columns config gets changed.
      * @param {Object[]} value
@@ -128,6 +325,16 @@ class Container extends BaseContainer {
         return value
     }
 
+    /**
+     * Triggered before the headerToolbarId config gets changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetHeaderToolbarId(value, oldValue) {
+        return value || oldValue
+    }
+
     /**
      * Triggered before the selectionModel config gets changed.
      * @param {Neo.selection.Model} value
@@ -177,6 +384,39 @@ class Container extends BaseContainer {
         return value
     }
 
+    /**
+     * Triggered before the viewId config gets changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetViewId(value, oldValue) {
+        return value || oldValue
+    }
+
+    /**
+     * In case you want to update multiple existing records in parallel,
+     * using this method is faster than updating each record one by one.
+     * At least until we introduce row based vdom updates.
+     * @param {Object[]} records
+     */
+    bulkUpdateRecords(records) {
+        let {store, view} = this,
+            {keyProperty} = store;
+
+        if (view) {
+            view.silentVdomUpdate = true;
+
+            records.forEach(item => {
+                store.get(item[keyProperty])?.set(item)
+            });
+
+            view.silentVdomUpdate = false;
+
+            view.update()
+        }
+    }
+
     /**
      * @param {Object[]} columns
      * @returns {*}
@@ -188,7 +428,7 @@ class Container extends BaseContainer {
             renderer;
 
         if (!columns || !columns.length) {
-            Neo.logError('Attempting to create a grid.Container without defined columns', me.id)
+            Neo.logError('Attempting to create a grid.Container without defined columns', me.id);
         }
 
         columns.forEach(column => {
@@ -197,7 +437,7 @@ class Container extends BaseContainer {
             columnDefaults && Neo.assignDefaults(column, columnDefaults);
 
             if (column.dock && !column.width) {
-                Neo.logError('Attempting to create a docked column without a defined width', column, me.id)
+                Neo.logError('Attempting to create a docked column without a defined width', column, me.id);
             }
 
             if (renderer && Neo.isString(renderer) && me[renderer]) {
@@ -205,7 +445,7 @@ class Container extends BaseContainer {
             }
 
             if (sorters?.[0]) {
-                if (column.field === sorters[0].property) {
+                if (column.dataField === sorters[0].property) {
                     column.isSorted = sorters[0].direction
                 }
             }
@@ -222,10 +462,29 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @param {Object[]} inputData
+     * @param {Array} inputData
      */
     createViewData(inputData) {
-        this.getView().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.mounted && Neo.main.addon.ResizeObserver.unregister({
+            id      : me.id,
+            windowId: me.windowId
+        });
+
+        super.destroy(...args)
     }
 
     /**
@@ -243,13 +502,6 @@ class Container extends BaseContainer {
         return this.vdom.cn[0]
     }
 
-    /**
-     * @returns {Neo.grid.View}
-     */
-    getView() {
-        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
-    }
-
     /**
      * @override
      * @returns {Neo.vdom.VNode}
@@ -258,6 +510,13 @@ class Container extends BaseContainer {
         return this.vnode.childNodes[0]
     }
 
+    /**
+     * @returns {String}
+     */
+    getWrapperId() {
+        return `${this.id}__wrapper`
+    }
+
     /**
      *
      */
@@ -266,6 +525,30 @@ class Container extends BaseContainer {
         this.selectionModel?.register(this)
     }
 
+    /**
+     * @param {Object} data
+     */
+    async onResize(data) {
+        let me = this;
+
+        if (!me.initialResizeEvent) {
+            await me.passSizeToView(true);
+
+            me.view.updateVisibleColumns();
+
+            await me.headerToolbar.passSizeToView()
+        } else {
+            me.initialResizeEvent = false
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onScroll(data) {
+        this.view.scrollPosition = {x: data.scrollLeft, y: this.view.scrollPosition.y}
+    }
+
     /**
      * @param {Object} opts
      * @param {String} opts.direction
@@ -292,8 +575,7 @@ class Container extends BaseContainer {
      * @protected
      */
     onStoreLoad(data) {
-        let me = this,
-            listenerId;
+        let me = this;
 
         if (me.rendered) {
             me.createViewData(data);
@@ -302,12 +584,11 @@ class Container extends BaseContainer {
                 me.removeSortingCss()
             }
         } else {
-            listenerId = me.on('rendered', () => {
-                me.un('rendered', listenerId);
+            me.on('rendered', () => {
                 me.timeout(50).then(() => {
                     me.createViewData(data)
                 })
-            })
+            }, me, {once: true})
         }
     }
 
@@ -322,18 +603,34 @@ class Container extends BaseContainer {
      * @param {*} opts.value
      */
     onStoreRecordChange(opts) {
-        this.getView().onStoreRecordChange(opts)
+        this.view.onStoreRecordChange(opts)
     }
 
     /**
-     * @param {String} field
+     * @param {Boolean} silent=false
+     * @returns {Promise<void>}
+     */
+    async passSizeToView(silent=false) {
+        let me                          = this,
+            [containerRect, headerRect] = await me.getDomRect([me.id, me.headerToolbarId]);
+
+        me.view[silent ? 'setSilent' : 'set']({
+            availableHeight: containerRect.height - headerRect.height,
+            containerWidth : containerRect.width
+        })
+    }
+
+    /**
+     * @param {String} dataField
      * @protected
      */
-    removeSortingCss(field) {
-        this.items[0].items.forEach(column => {
-            column.field !== field && column.removeSortingCss()
+    removeSortingCss(dataField) {
+        this.headerToolbar.items.forEach(column => {
+            if (column.dataField !== dataField) {
+                column.removeSortingCss()
+            }
         })
     }
 }
 
-export default Neo.setupClass(Container);
+export default Neo.setupClass(GridContainer);