neo.mjs 8.0.0 → 8.0.1

package/src/selection/grid/CellColumnRowModel.mjs

@@ -88,7 +88,7 @@ class CellColumnRowModel extends CellRowModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             {view}        = me,
-            fields        = view.columns.map(c => c.field),
+            fields        = view.columns.map(c => c.dataField),
             newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, tbodyNode;
 

package/src/selection/grid/CellModel.mjs

@@ -87,7 +87,7 @@ class CellModel extends BaseModel {
             {view}        = me,
             idArray       = data.path[0].id.split('__'),
             currentColumn = idArray[2],
-            dataFields    = view.columns.map(c => c.field),
+            dataFields    = view.columns.map(c => c.dataField),
             newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
             id;
 

package/src/selection/grid/ColumnModel.mjs

@@ -72,7 +72,7 @@ class ColumnModel extends BaseModel {
     static getColumnIndex(cellId, columns) {
         let idArray       = cellId.split('__'),
             currentColumn = idArray[2],
-            dataFields    = columns.map(c => c.field);
+            dataFields    = columns.map(c => c.dataField);
 
         return dataFields.indexOf(currentColumn)
     }
@@ -117,7 +117,7 @@ class ColumnModel extends BaseModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             {view}        = me,
-            fields        = view.columns.map(c => c.field),
+            fields        = view.columns.map(c => c.dataField),
             newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, id, tbodyNode;
 

package/src/table/Container.mjs

@@ -27,6 +27,11 @@ class Container extends BaseContainer {
          * @member {String[]} baseCls=['neo-table-container']
          */
         baseCls: ['neo-table-container'],
+        /**
+         * true uses table.plugin.CellEditing
+         * @member {Boolean} cellEditing_=false
+         */
+        cellEditing_: false,
         /**
          * Default configs for each column
          * @member {Object} columnDefaults=null
@@ -150,6 +155,30 @@ class Container extends BaseContainer {
         me.createColumns(me.columns)
     }
 
+    /**
+     * 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
@@ -350,9 +379,9 @@ class Container extends BaseContainer {
      * @returns {*}
      */
     createColumns(columns) {
-        let me             = this,
-            columnDefaults = me.columnDefaults,
-            sorters        = me.store?.sorters,
+        let me               = this,
+            {columnDefaults} = me,
+            sorters          = me.store?.sorters,
             renderer;
 
         if (!columns || !columns.length) {

package/src/table/View.mjs

@@ -131,6 +131,7 @@ class View extends Component {
                 }
                 break
             }
+            case 'Date':
             case 'Number':
             case 'String': {
                 rendererOutput = {
@@ -182,10 +183,14 @@ class View extends Component {
     /**
      * @param {Object} opts
      * @param {Object} opts.record
-     * @param {Number} opts.rowIndex
+     * @param {Number} [opts.rowIndex]
      * @returns {Object}
      */
-    createTableRow({record, rowIndex}) {
+    createRow({record, rowIndex}) {
+        if (!Neo.isNumber(rowIndex)) {
+            rowIndex = this.store.indexOf(record)
+        }
+
         let me              = this,
             tableContainer  = me.parent,
             colspan         = record[me.colspanField],
@@ -276,7 +281,7 @@ class View extends Component {
             {selectedRows} = me;
 
         for (; i < amountRows; i++) {
-            rows.push(me.createTableRow({record: inputData[i], rowIndex: i}))
+            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
         }
 
         me.vdom.cn = rows;
@@ -472,7 +477,7 @@ class View extends Component {
 
         if (fieldNames.includes(me.colspanField)) {
             index = me.store.indexOf(record);
-            me.vdom.cn[index] = me.createTableRow({record, rowIndex: index});
+            me.vdom.cn[index] = me.createRow({record, rowIndex: index});
             me.update()
         } else {
             fields.forEach(field => {

package/src/table/header/Toolbar.mjs

@@ -28,7 +28,7 @@ class Toolbar extends BaseToolbar {
          * @member {Object} itemDefaults={ntype : 'table-header-button'}
          */
         itemDefaults: {
-            ntype : 'table-header-button'
+            ntype: 'table-header-button'
         },
         /**
          * @member {Boolean} showHeaderFilters_=false
@@ -143,6 +143,20 @@ class Toolbar extends BaseToolbar {
         me.update()
     }
 
+    /**
+     * @param {String} dataField
+     * @returns {Neo.button.Base|null}
+     */
+    getColumn(dataField) {
+        for (const item of this.items) {
+            if (item.dataField === dataField) {
+                return item
+            }
+        }
+
+        return null
+    }
+
     /**
      * @param {String} dock
      * @returns {String} layoutConfig

package/src/table/plugin/CellEditing.mjs

@@ -0,0 +1,330 @@
+import Plugin    from '../../plugin/Base.mjs';
+import TextField from '../../form/field/Text.mjs';
+import VdomUtil  from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.table.plugin.CellEditing
+ * @extends Neo.plugin.Base
+ */
+class CellEditing extends Plugin {
+    static config = {
+        /**
+         * @member {String} className='Neo.table.plugin.CellEditing'
+         * @protected
+         */
+        className: 'Neo.table.plugin.CellEditing',
+        /**
+         * @member {String} ntype='plugin-table-cell-editing'
+         * @protected
+         */
+        ntype: 'plugin-table-cell-editing',
+        /**
+         * @member {String} cellCls='neo-table-cell'
+         */
+        cellCls: 'neo-table-cell',
+        /**
+         * @member {Boolean} disabled_=false
+         */
+        disabled_: false,
+        /**
+         * @member {String[]} editorCls=['neo-table-editor']
+         */
+        editorCls: ['neo-table-editor']
+    }
+
+    /**
+     * Storing editor instances per column
+     * @member {Object} editors={}
+     */
+    editors = {}
+    /**
+     * Storing the currently mounted editor
+     * @member {Neo.form.field.Base|null} mountedEditor=null
+     */
+    mountedEditor = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me               = this,
+            {owner}          = me,
+            {selectionModel} = owner;
+
+        owner.on({
+            cellDoubleClick     : me.onCellDoubleClick,
+            focusLeave          : me.onFocusLeave,
+            selectionModelChange: me.onSelectionModelChange,
+            scope               : me
+        });
+
+        // Connect an already registered selectionModel instance
+        if (Neo.typeOf(selectionModel) === 'NeoInstance') {
+            me.onSelectionModelChange({value: selectionModel})
+        }
+
+        owner.keys.add({
+            Enter: 'onTableKeyDown',
+            Space: 'onTableKeyDown',
+            scope: me
+        })
+    }
+
+    /**
+     * Triggered after the disabled config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDisabled(value, oldValue) {
+        oldValue && this.unmountEditor()
+    }
+
+    /**
+     * @param {args} args
+     */
+    destroy(...args) {
+        Object.values(this.editors).forEach(editor => {
+            editor.destroy(false, true)
+        });
+
+        super.destroy(...args)
+    }
+
+    /**
+     * @param {Object} record
+     * @param {String} dataField
+     * @returns {Promise<void>}
+     */
+    async mountEditor(record, dataField) {
+        if (this.disabled) {
+            return
+        }
+
+        let me                  = this,
+            {appName, windowId} = me,
+            {view}              = me.owner,
+            cellId              = view.getCellId(record, dataField),
+            cellNode            = VdomUtil.find(view.vdom, cellId).vdom,
+            column              = me.owner.headerToolbar.getColumn(dataField),
+            editor              = me.editors[dataField],
+            value               = record[dataField];
+
+        if (me.mountedEditor) {
+            await me.unmountEditor();
+            await me.timeout(10)
+        }
+
+        if (!column.editable) {
+            return
+        }
+
+        if (!editor) {
+            me.editors[dataField] = editor = Neo.create({
+                module   : TextField,
+                appName,
+                cls      : me.editorCls,
+                dataField,
+                hideLabel: true,
+                parentId : view.id,
+                record,
+                value,
+                windowId,
+
+                keys: {
+                    Enter : 'onEditorKeyEnter',
+                    Escape: 'onEditorKeyEscape',
+                    Tab   : 'onEditorKeyTab',
+                    scope : me
+                },
+
+                ...column.editor
+            })
+        } else {
+            editor.originalConfig.value = value;
+            editor.setSilent({record, value})
+        }
+
+        me.mountedEditor = editor;
+
+        cellNode.cn = [editor.createVdomReference()];
+        delete cellNode.innerHTML;
+
+        view.updateDepth = -1;
+
+        await view.promiseUpdate();
+
+        await me.timeout(10);
+
+        editor.focus()
+    }
+
+    /**
+     *
+     * @param {Object} data
+     * @param {Object} data.data
+     * @param {String} data.dataField
+     * @param {Object} data.record
+     * @param {Neo.table.View} data.view
+     * @returns {Promise<void>}
+     */
+    async onCellDoubleClick({data, dataField, record, view}) {
+        await this.mountEditor(record, dataField)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.form.field.Base} field
+     * @returns {Promise<void>}
+     */
+    async onEditorKeyEnter(data, field) {
+        let me = this;
+
+        await me.submitEditor();
+        await me.timeout(20);
+        me.selectCell(data)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.form.field.Base} field
+     * @returns {Promise<void>}
+     */
+    async onEditorKeyEscape(data, field) {
+        let me = this;
+
+        await me.unmountEditor();
+        await me.timeout(20);
+        me.selectCell(data)
+    }
+
+    /**
+     * @param {Object} event
+     * @param {Neo.form.field.Base} field
+     * @returns {Promise<void>}
+     */
+    async onEditorKeyTab(event, field) {
+        let me           = this,
+            {store}      = me.owner,
+            oldIndex     = store.indexOf(field.record),
+            countRecords = store.getCount(),
+            index        = (oldIndex + (event.altKey ? -1 : 1) + countRecords) % countRecords,
+            record       = store.getAt(index);
+
+        await me.submitEditor();
+        await me.mountEditor(record, field.dataField)
+    }
+
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onFocusLeave(data) {
+        await this.unmountEditor()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectionChange(data) {
+        // todo: Once we separate cell selections & focus, we can use this event to mount editors
+        // console.log('onSelectionChange', data);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectionModelChange(data) {
+        let selectionModel = data.value;
+
+        if (selectionModel.ntype.includes('cell')) {
+            selectionModel.on('selectionChange', this.onSelectionChange, this)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onTableKeyDown(data) {
+        let me        = this,
+            {target}  = data,
+            tableView = me.owner.view,
+            dataField, record;
+
+        if (!me.mountedEditor && target.cls?.includes('neo-selected')) {
+            dataField = tableView.getCellDataField(target.id);
+            record    = tableView.getRecord(target.id);
+
+            await me.mountEditor(record, dataField)
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.path
+     */
+    selectCell({path}) {
+        let me               = this,
+            {selectionModel} = me.owner,
+            i                = 0,
+            len              = path.length,
+            cellId;
+
+        for (; i < len; i++) {
+            if (path[i].cls?.includes(me.cellCls)) {
+                cellId = path[i].id;
+                break
+            }
+        }
+
+        if (cellId) {
+            selectionModel?.deselect(cellId, true); // the cell might still count as selected => silent deselect first
+            selectionModel?.select(cellId);
+            me.owner.focus(cellId)
+        }
+    }
+
+    /**
+     * If the field is valid:
+     * Updates the record field, in case the value of the editor changed,
+     * otherwise unmounts the editor
+     * @returns {Promise<void>}
+     */
+    async submitEditor() {
+        let me    = this,
+            field = me.mountedEditor;
+
+        if (field?.isValid()) {
+            if (field.isDirty) {
+                me.mountedEditor = null;
+                field.record[field.dataField] = field.getSubmitValue()
+            } else {
+                await me.unmountEditor()
+            }
+        }
+    }
+
+    /**
+     * @returns {Promise<void>}
+     */
+    async unmountEditor() {
+        if (!this.mountedEditor) {
+            return
+        }
+
+        let me        = this,
+            record    = me.mountedEditor.record,
+            tableView = me.owner.view,
+            rowIndex  = tableView.store.indexOf(record);
+
+        me.mountedEditor = null;
+
+        tableView.vdom.cn[rowIndex] = tableView.createRow({record, rowIndex});
+        await tableView.promiseUpdate()
+    }
+}
+
+export default Neo.setupClass(CellEditing);

package/src/util/KeyNavigation.mjs

@@ -75,10 +75,14 @@ class KeyNavigation extends Base {
             upperCaseKey = me.parseUpperCaseKey(upperCaseKey);
 
             me.keys.forEach(key => {
-                scope = Neo.get(key.scope);
+                scope = Neo.isString(key.scope) ? Neo.get(key.scope) : key.scope;
 
                 if (key.key.toUpperCase() === upperCaseKey) {
-                    scope[key.fn]?.apply(scope, [data])
+                    if (Neo.isFunction(key.fn)) {
+                        key.fn.apply(scope, [data, me.component])
+                    } else {
+                        scope[key.fn]?.apply(scope, [data, me.component])
+                    }
                 }
             })
         }
@@ -94,12 +98,14 @@ class KeyNavigation extends Base {
                 keyArray    = [];
 
             if (componentId) {
-                Object.entries(value).forEach(([key, value]) => {
-                    keyArray.push({
-                        fn   : value,
-                        key,
-                        scope: componentId // todo: support VCs later on
-                    })
+                Object.entries(value).forEach(([key, val]) => {
+                    if (key !== 'scope') {
+                        keyArray.push({
+                            fn   : val,
+                            key,
+                            scope: value.scope || componentId // todo: support VCs later on
+                        })
+                    }
                 });
 
                 value = keyArray