selection.grid.RowModel: switch to store record ids instead of row DOM ids #6671

Author: tobiu

src/grid/View.mjs

@@ -181,10 +181,6 @@ class GridView extends Component {
     get selectedRows() {
         let {selectionModel} = this;
 
-        if (selectionModel.ntype === 'selection-grid-rowmodel') {
-            return selectionModel.items
-        }
-
         if (selectionModel.ntype?.includes('row')) {
             return selectionModel.selectedRows
         }
@@ -578,6 +574,7 @@ class GridView extends Component {
             gridContainer = me.parent,
             {columns}     = gridContainer,
             id            = me.getRowId(rowIndex),
+            recordId      = record[me.store.getKeyProperty()],
             rowCls        = me.getRowClass(record, rowIndex),
             config, column, columnPosition,  gridRow, i;
 
@@ -586,20 +583,15 @@ class GridView extends Component {
         }
 
         if (selectedRows && record[me.selectedRecordField]) {
-            NeoArray.add(selectedRows, id)
-        }
-
-        if (selectedRows?.includes(id)) {
-            rowCls.push('neo-selected');
-            gridContainer.fire('select', {record})
+            NeoArray.add(selectedRows, recordId)
         }
 
         gridRow = {
             id,
             'aria-rowindex': rowIndex + 2, // header row => 1, first body row => 2
             cls            : rowCls,
             cn             : [],
-            data           : {recordId: record[me.store.getKeyProperty()]},
+            data           : {recordId},
             role           : 'row',
 
             style: {
@@ -608,6 +600,12 @@ class GridView extends Component {
             }
         };
 
+        if (selectedRows?.includes(recordId)) {
+            rowCls.push('neo-selected');
+            gridRow['aria-selected'] = true;
+            gridContainer.fire('select', {record})
+        }
+
         for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
             column = columns.getAt(i);
             config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});

src/selection/grid/BaseModel.mjs

@@ -1,4 +1,5 @@
-import Model from '../Model.mjs';
+import Model    from '../Model.mjs';
+import NeoArray from '../../util/Array.mjs';
 
 /**
  * Abstract base class for all grid related selection models
@@ -12,7 +13,13 @@ class BaseModel extends Model {
          * @member {String} className='Neo.selection.grid.BaseModel'
          * @protected
          */
-        className: 'Neo.selection.grid.BaseModel'
+        className: 'Neo.selection.grid.BaseModel',
+        /**
+         * Storing the record ids
+         * @member {Number[]|String[]} selectedRows=[]
+         * @protected
+         */
+        selectedRows: []
     }
 
     /**
@@ -23,6 +30,53 @@ class BaseModel extends Model {
         return this.view.parent.columns.items.map(column => column.dataField)
     }
 
+    /**
+     * @param {Boolean} [silent=false] true to prevent a vdom update
+     */
+    deselectAllRows(silent=false) {
+        let me     = this,
+            items  = [...me.selectedRows],
+            {view} = me;
+
+        if (items.length) {
+            items.forEach(item => {
+                me.deselectRow(item, true)
+            });
+
+            if (!silent && items.length > 0) {
+                view.update()
+            }
+
+            me.fire('selectionChange', {
+                selection: me.selectedRows
+            })
+        } else if (!silent) {
+            me.fire('noChange')
+        }
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @param {Boolean}       [silent=false]
+     */
+    deselectRow(recordId, silent=false) {
+        let me      = this,
+            {view}  = me,
+            {store} = view,
+            record  = store.get(recordId),
+            rowId   = view.getRowId(store.indexOf(record)),
+            node    = view.getVdomChild(rowId);
+
+        if (node) {
+            node.cls = NeoArray.remove(node.cls || [], me.selectedCls);
+            delete node['aria-selected']
+        }
+
+        me.selectedRows = [recordId];
+
+        !silent && view.update()
+    }
+
     /**
      * Get the record for a given event path
      * @param {Object[]} path
@@ -61,6 +115,48 @@ class BaseModel extends Model {
 
         return false
     }
+
+    /**
+     * @param {Number|String} recordId
+     * @returns {Boolean} true in case the row is selected
+     */
+    isSelectedRow(recordId) {
+        return this.selectedRows.includes(recordId)
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @param {Boolean}       [silent=false]
+     */
+    selectRow(recordId, silent=false) {
+        let me      = this,
+            {view}  = me,
+            {store} = view,
+            record  = store.get(recordId),
+            rowId   = view.getRowId(store.indexOf(record)),
+            node    = view.getVdomChild(rowId);
+
+        if (me.singleSelect) {
+            me.deselectAllRows(true)
+        }
+
+        if (node) {
+            node.cls = NeoArray.add(node.cls || [], me.selectedCls);
+            node['aria-selected'] = true
+        }
+
+        me.selectedRows = [recordId];
+
+        !silent && view.update()
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @param {Boolean}       [silent=false]
+     */
+    toggleRowSelection(recordId, silent=false) {
+        this[this.isSelectedRow(recordId) ? 'deselectRow' : 'selectRow'](recordId, silent)
+    }
 }
 
 export default Neo.setupClass(BaseModel);

src/selection/grid/RowModel.mjs

@@ -20,13 +20,7 @@ class RowModel extends BaseModel {
          * @member {String} cls='neo-selection-rowmodel'
          * @protected
          */
-        cls: 'neo-selection-rowmodel',
-        /**
-         * Storing the record ids
-         * @member {Number[]|String[]} selectedRows=[]
-         * @protected
-         */
-        selectedRows: []
+        cls: 'neo-selection-rowmodel'
     }
 
     /**
@@ -79,14 +73,11 @@ class RowModel extends BaseModel {
             {view}       = me,
             {store}      = view,
             countRecords = store.getCount(),
-            currentIndex = 0,
-            newIndex, record, rowId;
-
-        if (me.hasSelection()) {
-            currentIndex = store.indexOf(view.getRecordByRowId(me.items[0]))
-        }
-
-        newIndex = (currentIndex + step) % countRecords;
+            keyProperty  = store.getKeyProperty(),
+            recordId     = me.selectedRows[0] || store.getAt(0)[keyProperty],
+            record       = store.get(recordId),
+            index        = store.indexOf(record),
+            newIndex     = (index + step) % countRecords;
 
         while (newIndex < 0) {
             newIndex += countRecords
@@ -97,12 +88,12 @@ class RowModel extends BaseModel {
         if (me.hasAnnotations(record)) {
             me.updateAnnotations(record)
         } else {
-            rowId = view.getRowId(record);
+            recordId = record[keyProperty];
 
-            if (rowId) {
-                me.select(rowId);
+            if (recordId) {
+                me.selectRow(recordId);
 
-                view.scrollByRows(currentIndex, step);
+                view.scrollByRows(index, step);
                 view.fire('select', {record})
             }
         }
@@ -116,19 +107,17 @@ class RowModel extends BaseModel {
             id     = data.currentTarget,
             {view} = me,
             record = id && me.getRecord(data.path, id),
-            isSelected;
+            recordId;
 
         if (record) {
             if (me.hasAnnotations(record)) {
                 me.updateAnnotations(record)
             } else {
-                me.toggleSelection(id);
-
-                isSelected = me.isSelected(id);
+                recordId = record[view.store.getKeyProperty()];
 
-                !isSelected && view.onDeselect?.(record);
+                me.toggleRowSelection(recordId);
 
-                view.fire(isSelected ? 'select' : 'deselect', {record})
+                view.fire(me.isSelectedRow(recordId) ? 'select' : 'deselect', {record})
             }
         }
     }