neo.mjs 8.0.0-beta.2 → 8.0.1

package/src/grid/View.mjs

@@ -1,4 +1,5 @@
 import Component from '../component/Base.mjs';
+import NeoArray  from '../util/Array.mjs';
 import VDomUtil  from '../util/VDom.mjs';
 
 /**
@@ -20,7 +21,46 @@ class View extends Component {
         /**
          * @member {String[]} baseCls=['neo-grid-view']
          */
-        baseCls: ['neo-grid-view']
+        baseCls: ['neo-grid-view'],
+        /**
+         * Define which model field contains the value of colspan definitions
+         * @member {String} colspanField='colspan'
+         */
+        colspanField: 'colspan',
+        /**
+         * @member {String|null} containerId=null
+         * @protected
+         */
+        containerId: null,
+        /**
+         * @member {Object} recordVnodeMap={}
+         */
+        recordVnodeMap: {},
+        /**
+         * @member {String} selectedRecordField='annotations.selected'
+         */
+        selectedRecordField: 'annotations.selected',
+        /**
+         * @member {Neo.data.Store|null} store=null
+         */
+        store: null,
+        /**
+         * @member {Boolean} useRowRecordIds=true
+         */
+        useRowRecordIds: true
+    }
+
+    /**
+     * @member {String[]} selectedRows
+     */
+    get selectedRows() {
+        let gridContainer = this.parent;
+
+        if (gridContainer.selectionModel.ntype === 'selection-grid-rowmodel') {
+            return gridContainer.selectionModel.items
+        }
+
+        return []
     }
 
     /**
@@ -45,149 +85,211 @@ class View extends Component {
     }
 
     /**
-     * @param {Array} inputData
+     * @param {Object} data
+     * @param {String} [data.cellId]
+     * @param {Object} data.column
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Number} data.index
+     * @param {Object} data.record
+     * @returns {Object}
      */
-    createViewData(inputData) {
-        let me         = this,
-            amountRows = inputData.length,
-            container  = me.parent,
-            columns    = container.items[0].items,
-            colCount   = columns.length,
-            data       = [],
-            i          = 0,
-            {vdom}     = me,
-            cellCls, cellStyle, config, column, dockLeftMargin, dockRightMargin, id, index, j, rendererOutput,
-            record, rendererValue, selectedRows, trCls;
-
-        me.recordVnodeMap = {}; // remove old data
-
-        if (container.selectionModel?.ntype === 'selection-grid-rowmodel') {
-            selectedRows = container.selectionModel.items || []
+    applyRendererOutput(data) {
+        let {cellId, column, gridContainer, index, record} = data,
+            me          = this,
+            cellCls     = ['neo-grid-cell'],
+            colspan     = record[me.colspanField],
+            {dataField} = column,
+            fieldValue  = Neo.ns(dataField, false, record),
+            cellConfig, rendererOutput;
+
+        if (fieldValue === null || fieldValue === undefined) {
+            fieldValue = ''
         }
 
-        for (; i < amountRows; i++) {
-            record = inputData[i];
-            id     = me.getRowId(record, i);
-
-            me.recordVnodeMap[id] = i;
+        rendererOutput = column.renderer.call(column.rendererScope || gridContainer, {
+            column,
+            dataField,
+            gridContainer,
+            index,
+            record,
+            value: fieldValue
+        });
 
-            trCls = me.getTrClass(record, i);
+        switch (Neo.typeOf(rendererOutput)) {
+            case 'Object': {
+                if (rendererOutput.html) {
+                    rendererOutput.cls && cellCls.push(...rendererOutput.cls);
+                } else {
+                    rendererOutput = [rendererOutput];
+                }
+                break
+            }
+            case 'Date':
+            case 'Number':
+            case 'String': {
+                rendererOutput = {
+                    cls : cellCls,
+                    html: rendererOutput?.toString()
+                };
+                break
+            }
+        }
 
-            if (selectedRows?.includes(id)) {
-                trCls.push('neo-selected');
+        if (rendererOutput === null || rendererOutput === undefined) {
+            rendererOutput = ''
+        }
 
-                Neo.getComponent(me.containerId).fire('select', {
-                    record
-                })
-            }
+        if (column.cellAlign !== 'left') {
+            cellCls.push('neo-' + column.cellAlign)
+        }
 
-            data.push({
-                id,
-                cls     : trCls,
-                cn      : [],
-                tabIndex: '-1'
-            });
+        if (!cellId) {
+            cellId = me.getCellId(record, column.dataField)
+        }
 
-            dockLeftMargin  = 0;
-            dockRightMargin = 0;
+        cellConfig = {
+            id      : cellId,
+            cls     : cellCls,
+            style   : rendererOutput.style || {},
+            tabIndex: '-1'
+        };
 
-            j = 0;
+        if (column.width) {
+            cellConfig.style.minWidth = `${column.width}px`
+        }
 
-            for (; j < colCount; j++) {
-                column         = columns[j];
-                rendererValue  = Neo.ns(column.field, false, record);
+        if (colspan && Object.keys(colspan).includes(dataField)) {
+            cellConfig.colspan = colspan[dataField]
+        }
 
-                if (rendererValue === null || rendererValue === undefined) {
-                    rendererValue = ''
-                }
+        if (Neo.typeOf(rendererOutput) === 'Object') {
+            cellConfig.innerHTML = rendererOutput.html  || ''
+        } else {
+            cellConfig.cn = rendererOutput
+        }
 
-                rendererOutput = column.renderer.call(column.rendererScope || container, {
-                    column,
-                    field: column.field,
-                    index: i,
-                    record,
-                    value: rendererValue
-                });
+        return cellConfig
+    }
 
-                cellCls = rendererOutput?.cls || ['neo-grid-cell'];
+    /**
+     * @param {Object} opts
+     * @param {Object} opts.record
+     * @param {Number} [opts.rowIndex]
+     * @returns {Object}
+     */
+    createRow({record, rowIndex}) {
+        if (!Neo.isNumber(rowIndex)) {
+            rowIndex = this.store.indexOf(record)
+        }
 
-                if (column.align !== 'left') {
-                    cellCls.push('neo-' + column.align)
-                }
+        let me              = this,
+            gridContainer   = me.parent,
+            colspan         = record[me.colspanField],
+            colspanKeys     = colspan && Object.keys(colspan),
+            columns         = gridContainer.items[0].items,
+            colCount        = columns.length,
+            dockLeftMargin  = 0,
+            dockRightMargin = 0,
+            id              = me.getRowId(record, rowIndex),
+            {selectedRows}  = me,
+            trCls           = me.getTrClass(record, rowIndex),
+            config, column, columnIndex, gridRow, i;
+
+        me.recordVnodeMap[id] = rowIndex;
+
+        if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+            NeoArray.add(selectedRows, id)
+        }
 
-                if (!Neo.isObject(rendererOutput)) {
-                    rendererOutput = {
-                        cls : cellCls,
-                        html: rendererOutput?.toString()
-                    }
-                }
+        if (selectedRows?.includes(id)) {
+            trCls.push('neo-selected');
 
-                cellStyle = rendererOutput.style || {};
+            me.parent.fire('select', {
+                record
+            })
+        }
 
-                if (column.width) {
-                    cellStyle.minWidth = `${column.width}px`
-                }
+        gridRow = {
+            id,
+            cls     : trCls,
+            cn      : [],
+            tabIndex: '-1'
+        };
 
-                config = {
-                    id       : me.getCellId(record, column.field),
-                    cls      : cellCls,
-                    innerHTML: rendererOutput.html  || '',
-                    style    : cellStyle,
-                    tabIndex : '-1'
-                };
+        for (i=0; i < colCount; i++) {
+            column = columns[i];
+            config = me.applyRendererOutput({column, gridContainer, index: rowIndex, record});
 
-                if (column.dock) {
-                    config.cls = ['neo-locked', ...config.cls || []];
+            if (column.dock) {
+                config.cls = ['neo-locked', ...config.cls || []];
 
-                    if (column.dock === 'left') {
-                        config.style.left = dockLeftMargin + 'px';
-                        dockLeftMargin += column.width
-                    }
+                if (column.dock === 'left') {
+                    config.style.left = dockLeftMargin + 'px';
+                    dockLeftMargin += (column.width + 1) // todo: borders fix
                 }
+            }
 
-                if (column.flex) {
-                    config.style.width = '100%'
-                }
+            if (column.flex) {
+                config.style.width = '100%'
+            }
 
-                data[i].cn.push(config)
+            gridRow.cn.push(config);
+
+            if (colspanKeys?.includes(column.dataField)) {
+                i += (colspan[column.dataField] - 1)
             }
+        }
 
-            j = 0;
+        for (i=0; i < colCount; i++) {
+            columnIndex = colCount - i -1;
+            column      = columns[columnIndex];
 
-            for (; j < colCount; j++) {
-                index  = colCount - j -1;
-                column = columns[index];
+            if (column.dock === 'right') {
+                gridRow.cn[columnIndex].style.right = dockRightMargin + 'px';
+                dockRightMargin += (column.width + 1) // todo: borders fix
+            }
 
-                if (column.dock === 'right') {
-                    data[i].cn[index].style.right = dockRightMargin + 'px';
-                    dockRightMargin += (column.width + 1) // todo: borders fix
-                }
+            if (colspanKeys?.includes(column.dataField)) {
+                i += (colspan[column.dataField] - 1)
             }
         }
 
-        vdom.cn = data;
+        // the dock margins are the same for each row
+        rowIndex === 0 && Object.assign(gridContainer, {dockLeftMargin, dockRightMargin});
 
-        container.dockLeftMargin  = dockLeftMargin;
-        container.dockRightMargin = dockRightMargin;
+        return gridRow
+    }
+
+    /**
+     * @param {Object[]} inputData
+     */
+    createViewData(inputData) {
+        let me             = this,
+            amountRows     = inputData.length,
+            i              = 0,
+            rows           = [],
+            {selectedRows} = me;
+
+        for (; i < amountRows; i++) {
+            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
+        }
+
+        me.vdom.cn = rows;
 
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
-                // this logic only works for selection.table.RowModel
-                Neo.main.DomAccess.scrollToTableRow({
-                    appName: me.appName,
-                    id     : selectedRows[0]
-                })
+                // this logic only works for selection.grid.RowModel
+                Neo.main.DomAccess.scrollToTableRow({appName: me.appName, id: selectedRows[0]})
             }
         })
     }
 
     /**
-     * @param {Boolean} updateParentVdom
-     * @param {Boolean} silent
+     * @param args
      */
-    destroy(updateParentVdom, silent) {
+    destroy(...args) {
         this.store = null;
-        super.destroy(updateParentVdom, silent)
+        super.destroy(...args)
     }
 
     /**
@@ -196,11 +298,11 @@ class View extends Component {
      */
     fireCellEvent(data, eventName) {
         let me        = this,
-            {id}      = data.target,
+            id        = data.currentTarget,
             dataField = me.getCellDataField(id),
             record    = me.getRecord(id);
 
-        me.parent.fire(eventName, {id: me, data, dataField, record})
+        me.parent.fire(eventName, {data, dataField, record, view: me})
     }
 
     /**
@@ -209,10 +311,10 @@ class View extends Component {
      */
     fireRowEvent(data, eventName) {
         let me     = this,
-            {id}   = data.target,
+            id     = data.currentTarget,
             record = me.getRecord(id);
 
-        me.parent.fire(eventName, {id: me, data, record})
+        me.parent.fire(eventName, {data, record, view: me})
     }
 
     /**
@@ -225,15 +327,39 @@ class View extends Component {
 
     /**
      * @param {Object} record
-     * @param {String} field
+     * @param {String} dataField
      * @returns {String}
      */
-    getCellId(record, field) {
-        return this.id + '__' + record[this.store.keyProperty] + '__' + field
+    getCellId(record, dataField) {
+        return this.id + '__' + record[this.store.keyProperty] + '__' + dataField
+    }
+
+    /**
+     * Get a grid column or column index by a given field name
+     * @param {String} field
+     * @param {Boolean} returnIndex=false
+     * @returns {Object|Number|null}
+     */
+    getColumn(field, returnIndex=false) {
+        let container = this.parent,
+            columns   = container.headerToolbar.items,
+            i         = 0,
+            len       = columns.length,
+            column;
+
+        for (; i < len; i++) {
+            column = columns[i];
+
+            if (column.dataField === field) {
+                return returnIndex ? i : column
+            }
+        }
+
+        return null
     }
 
     /**
-     * Get the matching record by passing a row id, a cell id or an id inside a table cell.
+     * Get the matching record by passing a row id, a cell id or an id inside a grid cell.
      * @param {String} nodeId
      * @returns {Object|null}
      */
@@ -243,7 +369,7 @@ class View extends Component {
             node, parentNodes;
 
         if (record) {
-            return record
+            return record;
         }
 
         parentNodes = VDomUtil.getParentNodes(me.vdom, nodeId);
@@ -273,7 +399,15 @@ class View extends Component {
      * @returns {String}
      */
     getRowId(record, index) {
-        return `${this.id}__tr__${record[this.store.keyProperty]}`
+        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')
+        }
     }
 
     /**
@@ -322,24 +456,43 @@ class View extends Component {
      * @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
+    onStoreRecordChange({fields, model, record}) {
+        let me               = this,
+            fieldNames       = fields.map(field => field.name),
+            needsUpdate      = false,
+            gridContainer    = me.parent,
+            {selectionModel} = gridContainer,
+            {vdom}           = me,
+            cellId, cellNode, column, index, scope;
+
+        if (fieldNames.includes(me.colspanField)) {
+            index = me.store.indexOf(record);
+            me.vdom.cn[index] = me.createRow({record, rowIndex: index});
+            me.update()
+        } else {
+            fields.forEach(field => {
+                if (field.name === me.selectedRecordField) {
+                    if (selectionModel.ntype === 'selection-grid-rowmodel') {
+                        selectionModel[field.value ? 'select' : 'deselect'](me.getRowId(record))
+                    }
+                } else {
+                    cellId   = me.getCellId(record, field.name);
+                    cellNode = VDomUtil.find(vdom, cellId);
+
+                    // the vdom might not exist yet => nothing to do in this case
+                    if (cellNode?.vdom) {
+                        column      = me.getColumn(field.name);
+                        index       = cellNode.index;
+                        needsUpdate = true;
+                        scope       = column.rendererScope || gridContainer;
+
+                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, gridContainer, index, record})
+                    }
+                }
             })
-        });
+        }
 
-        deltas.length > 0 && Neo.applyDeltas(me.appName, deltas)
+        needsUpdate && me.update()
     }
 }