neo.mjs 4.1.0 → 4.2.0

package/src/grid/View.mjs

@@ -19,21 +19,216 @@ class View extends Component {
         /**
          * @member {Array} cls=['neo-grid-view']
          */
-        cls: ['neo-grid-view'],
-        /**
-         * @member {Object} _vdom
-         */
-        _vdom:
-        {cn: [
-            {cls: ['neo-grid-row'], cn: []}
-        ]}
+        cls: ['neo-grid-view']
     }}
 
     /**
-     * vdom.Helper should not compare ids for table rows by default
-     * @override
+     * @param {Array} inputData
+     */
+    createViewData(inputData) {
+        let me         = this,
+            amountRows = inputData.length,
+            container  = Neo.getComponent(me.parentId),
+            columns    = container.items[0].items,
+            colCount   = columns.length,
+            data       = [],
+            i          = 0,
+            vdom       = me.vdom,
+            cellCls, cellStyle, config, column, dockLeftMargin, dockRightMargin, id, index, j, rendererOutput,
+            record, rendererValue, selectedRows, trCls;
+
+        me.recordVnodeMap = {}; // remove old data
+
+        // console.log('createViewData', me.id, inputData);
+
+        if (container.selectionModel?.ntype === 'selection-table-rowmodel') {
+            selectedRows = container.selectionModel.items || [];
+        }
+
+        for (; i < amountRows; i++) {
+            record = inputData[i];
+            id = me.getRowId(record, i);
+
+            me.recordVnodeMap[id] = i;
+
+            trCls = me.getTrClass(record, i);
+
+            if (selectedRows?.includes(id)) {
+                trCls.push('neo-selected');
+
+                Neo.getComponent(me.containerId).fire('select', {
+                    record
+                });
+            }
+
+            data.push({
+                id,
+                cls     : trCls,
+                cn      : [],
+                tabIndex: '-1'
+            });
+
+            dockLeftMargin  = 0;
+            dockRightMargin = 0;
+
+            j = 0;
+
+            for (; j < colCount; j++) {
+                column         = columns[j];
+                rendererValue  = record[column.field];
+
+                if (rendererValue === undefined) {
+                    rendererValue = '';
+                }
+
+                rendererOutput = column.renderer.call(column.rendererScope || container, {
+                    field: column.field,
+                    index: i,
+                    record,
+                    value: rendererValue
+                });
+
+                cellCls = rendererOutput?.cls || ['neo-grid-cell'];
+
+                if (column.align !== 'left') {
+                    cellCls.push('neo-' + column.align);
+                }
+
+                if (!Neo.isObject(rendererOutput)) {
+                    rendererOutput = {
+                        cls : cellCls,
+                        html: rendererOutput?.toString()
+                    };
+                }
+
+                cellStyle = rendererOutput.style || {};
+
+                if (column.width) {
+                    cellStyle.minWidth = `${column.width}px`;
+                }
+
+                config = {
+                    id       : me.getCellId(record, column.field),
+                    cls      : rendererOutput.cls   || ['neo-grid-cell'],
+                    innerHTML: rendererOutput.html  || '',
+                    style    : cellStyle,
+                    tabIndex : '-1'
+                };
+
+                if (column.dock) {
+                    config.cls = ['neo-locked', ...config.cls || []];
+
+                    if (column.dock === 'left') {
+                        config.style.left = dockLeftMargin + 'px';
+                        dockLeftMargin += column.width;
+                    }
+                }
+
+                if (column.flex) {
+                    config.style.width = '100%';
+                }
+
+                data[i].cn.push(config);
+            }
+
+            j = 0;
+
+            for (; j < colCount; j++) {
+                index  = colCount - j -1;
+                column = columns[index];
+
+                if (column.dock === 'right') {
+                    data[i].cn[index].style.right = dockRightMargin + 'px';
+                    dockRightMargin += (column.width + 1); // todo: borders fix
+                }
+            }
+        }
+
+        vdom.cn = data;
+
+        container.dockLeftMargin  = dockLeftMargin;
+        container.dockRightMargin = dockRightMargin;
+
+        me.promiseVdomUpdate().then(() => {
+            if (selectedRows?.length > 0) {
+                // this logic only works for selection.table.RowModel
+                Neo.main.DomAccess.scrollToTableRow({id: selectedRows[0]});
+            }
+        });
+    }
+
+    /**
+     * @param {Boolean} updateParentVdom
+     * @param {Boolean} silent
+     */
+    destroy(updateParentVdom, silent) {
+        this.store = null;
+        super.destroy(updateParentVdom, silent);
+    }
+
+    /**
+     * @param {Object} record
+     * @param {String} field
+     * @returns {String}
+     */
+    getCellId(record, field) {
+        return this.id + '__' + record[this.store.keyProperty] + '__' + field;
+    }
+
+    /**
+     * @param {String} rowId
+     * @returns {Object}
      */
-    syncVdomIds() {}
+    getRecordByRowId(rowId) {
+        return this.store.getAt(this.recordVnodeMap[rowId]);
+    }
+
+    /**
+     * @param {Object} record
+     * @param {Number} [index]
+     * @returns {String}
+     */
+    getRowId(record, index) {
+        return `${this.id}__tr__${record[this.store.keyProperty]}`;
+    }
+
+    /**
+     * Override this method to apply custom CSS rules to grid rows
+     * @param {Object} record
+     * @param {Number} rowIndex
+     * @returns {String[]}
+     */
+    getTrClass(record, rowIndex) {
+        return ['neo-grid-row'];
+    }
+
+    /**
+     * Gets triggered after changing the value of a record field.
+     * E.g. myRecord.foo = 'bar';
+     * @param {Object} opts
+     * @param {Object[]} opts.fields Each field object contains the keys: name, oldValue, value
+     * @param {Neo.data.Model} opts.model The model instance of the changed record
+     * @param {Object} opts.record
+     */
+    onStoreRecordChange(opts) {
+        let me     = this,
+            deltas = [],
+            cellId, cellNode;
+
+        opts.fields.forEach(field => {
+            cellId   = me.getCellId(opts.record, field.name);
+            cellNode = me.getVdomChild(cellId);
+
+            cellNode.innerHTML = field.value; // keep the vdom in sync
+
+            deltas.push({
+                id       : cellId,
+                innerHTML: field.value
+            })
+        });
+
+        deltas.length > 0 && Neo.applyDeltas(me.appName, deltas);
+    }
 }
 
 Neo.applyClassConfig(View);

package/src/grid/header/Button.mjs

@@ -1,10 +1,21 @@
 import BaseButton from '../../button/Base.mjs';
+import NeoArray   from '../../util/Array.mjs';
 
 /**
  * @class Neo.grid.header.Button
  * @extends Neo.button.Base
  */
 class Button extends BaseButton {
+    /**
+     * Sort direction when clicking on an unsorted button
+     * @member {String} defaultSortDirection='ASC'
+     */
+    defaultSortDirection = 'ASC'
+    /**
+     * @member {String|null} field=null
+     */
+    field = null
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.grid.header.Button'
@@ -17,10 +28,124 @@ class Button extends BaseButton {
          */
         ntype: 'grid-header-button',
         /**
-         * @member {Array} cls=['neo-grid-header-button']
+         * @member {String[]} cls=['neo-grid-header-button']
+         */
+        cls: ['neo-grid-header-button'],
+        /**
+         * @member {String} iconCls='fa fa-arrow-circle-up'
+         */
+        iconCls: 'fa fa-arrow-circle-up',
+        /**
+         * @member {String} iconPosition='right'
+         */
+        iconPosition: 'right',
+        /**
+         * 'ASC', 'DESC' or null
+         * @member {String|null} isSorted_=null
+         * @protected
          */
-        cls: ['neo-grid-header-button']
+        isSorted_: null
     }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me           = this,
+            domListeners = me.domListeners;
+
+        domListeners.push({
+            click: me.onButtonClick,
+            scope: me
+        })
+
+        me.domListeners = domListeners;
+    }
+
+    /**
+     * Triggered after the isSorted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetIsSorted(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        switch(value) {
+            case null:
+                NeoArray.add(cls, 'neo-sort-hidden');
+                break;
+            case 'ASC':
+                NeoArray.remove(cls, 'neo-sort-desc');
+                NeoArray.remove(cls, 'neo-sort-hidden');
+                NeoArray.add(cls, 'neo-sort-asc');
+                break;
+            case 'DESC':
+                NeoArray.remove(cls, 'neo-sort-asc');
+                NeoArray.remove(cls, 'neo-sort-hidden');
+                NeoArray.add(cls, 'neo-sort-desc');
+                break;
+        }
+
+        me.cls = cls;
+
+        me.mounted && me.fire('sort', {
+            direction: value,
+            property : me.field
+        });
+    }
+
+    /**
+     * @protected
+     */
+    onButtonClick() {
+        let me = this,
+            map;
+
+        if (me.defaultSortDirection === 'DESC') {
+            map = {
+                ASC : null,
+                DESC: 'ASC',
+                null: 'DESC'
+            };
+        } else {
+            map = {
+                ASC : 'DESC',
+                DESC: null,
+                null: 'ASC'
+            };
+        }
+
+        me.isSorted = map[me.isSorted + ''];
+    }
+
+    /**
+     * @protected
+     */
+    removeSortingCss() {
+        let me  = this,
+            cls = me.cls;
+
+        NeoArray.add(cls, 'neo-sort-hidden');
+
+        me.cls       = cls;
+        me._isSorted = null;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.field
+     * @param {Number} data.index
+     * @param {Object} data.record
+     * @param {Number|String} data.value
+     * @returns {*}
+     */
+    renderer(data) {
+        return data.value;
+    }
 }
 
 Neo.applyClassConfig(Button);

package/src/grid/header/Toolbar.mjs

@@ -17,81 +17,69 @@ class Toolbar extends BaseToolbar {
          */
         ntype: 'grid-header-toolbar',
         /**
-         * @member {Array} cls=['neo-grid-header-toolbar']
+         * @member {Array} cls=['neo-grid-header-toolbar','neo-toolbar']
          */
-        cls: ['grid-header-toolbar'],
-        /**
-         * @member {String} _layout='base'
-         * @protected
-         */
-        _layout  : 'base',
+        cls: ['neo-grid-header-toolbar', 'neo-toolbar'],
         /**
          * @member {Object} itemDefaults={ntype:'grid-header-button'}
          * @protected
          */
         itemDefaults: {
             ntype: 'grid-header-button'
-        },
-        /**
-         * @member {Object} _vdom
-         * @protected
-         */
-        _vdom:
-        {cn: [
-            {cls: ['neo-grid-row'], cn: []}
-        ]}
+        }
     }}
 
     /**
-     * @param {Array} items
+     *
      */
-    createItems(items) {
-        let me = this,
-            cn = [],
-            i  = 0,
-            len, vdom;
+    createItems() {
+        let me = this;
+
+        me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
         super.createItems();
 
-        items = me.items;
-        len   = items.length;
-        vdom  = me.vdom;
+        let dockLeftWidth  = 0,
+            dockRightWidth = 0,
+            items          = me.items,
+            len            = items.length,
+            vdom           = me.vdom,
+            style;
 
-        for (; i < len; i++) {
-            cn.push(items[i]._vdom = {
-                cls: ['neo-grid-header-cell'],
-                cn : items[i].vdom
-            });
+        items.forEach((item, index) => {
+            style = item.wrapperStyle;
 
-            //items[i].vdom.cls = []; // remove the button cls from the th tag
-        }
+            // todo: only add px if number
+            if (item.maxWidth) {style.maxWidth = item.maxWidth + 'px'}
+            if (item.minWidth) {style.minWidth = item.minWidth + 'px'}
+            if (item.width)    {style.width    = item.width    + 'px'}
 
-        vdom.cn[0].cn = cn;
+            if (item.dock) {
+                item.vdom.cls.push('neo-locked');
 
-        me.vdom = vdom;
-    }
+                if (item.dock === 'left') {
+                    style.left = dockLeftWidth + 'px';
+                }
 
-    /**
-     * @param dock
-     * @returns {String} layoutConfig
-     * @override
-     */
-    getLayoutConfig(dock) {
-        return 'base';
-    }
+                dockLeftWidth += (item.width + 1); // todo: borders fix
+            }
 
-    /**
-     * @returns {Object}
-     */
-    getVdomRoot() {
-        return this.vdom.cn[0];
-    }
+            item.wrapperStyle = style;
 
-    /**
-     * @returns {Object}
-     */
-    getVnodeRoot() {
-        return this.vnode.childNodes[0];
+            // inverse loop direction
+            item = items[len - index -1];
+
+            if (item.dock === 'right') {
+                style = item.wrapperStyle;
+                style.right = dockRightWidth + 'px';
+
+                item.wrapperStyle = style;
+
+                dockRightWidth += (item.width + 1); // todo: borders fix
+            }
+        });
+
+        me.vdom = vdom;
     }
 }
 

package/src/selection/grid/CellColumnModel.mjs

@@ -0,0 +1,122 @@
+import CellModel   from './CellModel.mjs';
+import ColumnModel from './ColumnModel.mjs';
+import VDomUtil    from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.selection.grid.CellColumnModel
+ * @extends Neo.selection.grid.CellModel
+ */
+class CellColumnModel extends CellModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellColumnModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellColumnModel',
+        /**
+         * @member {String} ntype='selection-grid-cellcolumnmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellcolumnmodel',
+        /**
+         * @member {String} cls='neo-selection-cellcolumnmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellcolumnmodel',
+        /**
+         * @member {String} selectedColumnCellCls='selected-column-cell'
+         * @protected
+         */
+        selectedColumnCellCls: 'selected-column-cell',
+        /**
+         * @member {Array|null} selectedColumnCellIds=null
+         * @protected
+         */
+        selectedColumnCellIds: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        this.selectedColumnCellIds = [];
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAllCells(silent) {
+        let me      = this,
+            cellIds = [...me.selectedColumnCellIds],
+            view    = me.view,
+            vdom    = view.vdom;
+
+        cellIds.forEach(cellId => {
+            me.deselect(cellId, true, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        });
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = ColumnModel.getCellId(data.path),
+            columnNodeIds, index, tbodyNode;
+
+        if (id) {
+            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+
+            me.deselectAllCells(true);
+            me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        }
+
+        super.onCellClick(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            idArray       = ColumnModel.getCellId(data.path).split('__'),
+            currentColumn = idArray[2],
+            view          = me.view,
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            columnNodeIds, tbodyNode;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+
+        me.deselectAllCells(true);
+        me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+
+        super.onNavKeyColumn(data, step);
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        this.deselectAllCells();
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellColumnModel);
+
+export default CellColumnModel;