Enable grid state, Fixes #314

admin/columns/Columns.js

@@ -7,7 +7,6 @@
 
 import {fileColFactory} from '@xh/hoist/columns/Utils.js';
 
-
 /**
  * Shared columns for the admin client.
  */

cmp/grid/ColChooser.js

@@ -16,7 +16,7 @@ import {Icon} from '@xh/hoist/icon';
 export class ColChooser extends Component {
 
     render() {
-        const {isOpen, lrModel} = this.model;
+        const {isOpen, gridModel, lrModel} = this.model;
 
         if (!isOpen) return null;
 
@@ -29,6 +29,12 @@ export class ColChooser extends Component {
             items: [
                 leftRightChooser({model: lrModel, height: 300}),
                 toolbar(
+                    button({
+                        text: 'Reset',
+                        icon: Icon.undo({cls: 'xh-red'}),
+                        omit: !gridModel.stateModel,
+                        onClick: this.restoreDefaults
+                    }),
                     filler(),
                     button({
                         text: 'Cancel',
@@ -50,5 +56,14 @@ export class ColChooser extends Component {
         this.onClose();
     }
 
+    restoreDefaults = () => {
+        const {model} = this,
+            {stateModel} = model.gridModel;
+
+        stateModel.resetStateAsync().then(() => {
+            model.syncChooserData();
+        });
+    }
+
 }
 export const colChooser = elemFactory(ColChooser);

cmp/grid/ColChooserModel.js

@@ -11,10 +11,10 @@ import {LeftRightChooserModel} from '@xh/hoist/cmp/leftrightchooser';
 @HoistModel()
 export class ColChooserModel {
 
-    gridModel = null
-    lrModel = null
+    gridModel = null;
+    lrModel = null;
 
-    @observable isOpen = false
+    @observable isOpen = false;
 
     constructor(gridModel) {
         this.gridModel = gridModel;

cmp/grid/Grid.js

@@ -85,7 +85,8 @@ class Grid extends Component {
             onSelectionChanged: this.onSelectionChanged,
             onSortChanged: this.onSortChanged,
             onGridSizeChanged: this.onGridSizeChanged,
-            onComponentStateChanged: this.onComponentStateChanged
+            onComponentStateChanged: this.onComponentStateChanged,
+            onDragStopped: this.onDragStopped
         };
 
         this.addAutorun(this.syncSelection);
@@ -271,6 +272,11 @@ class Grid extends Component {
         this.model.setSortBy(ev.api.getSortModel());
     }
 
+    onDragStopped = (ev) => {
+        const gridColumns = ev.api.columnController.gridColumns;
+        this.model.syncColumnOrder(gridColumns);
+    }
+
     onGridSizeChanged = (ev) => {
         ev.api.sizeColumnsToFit();
     }

cmp/grid/GridModel.js

@@ -8,9 +8,10 @@ import {XH, HoistModel} from '@xh/hoist/core';
 import {action, observable} from '@xh/hoist/mobx';
 import {StoreSelectionModel} from '@xh/hoist/data';
 import {StoreContextMenu} from '@xh/hoist/cmp/contextmenu';
-import {defaults, castArray, find, isString, isPlainObject, orderBy} from 'lodash';
+import {defaults, castArray, find, isEqual, isString, isPlainObject, orderBy} from 'lodash';
 
 import {ColChooserModel} from './ColChooserModel';
+import {GridStateModel} from './GridStateModel';
 
 /**
  * Core Model for a Grid, specifying the grid's data store, column definitions,
@@ -24,6 +25,7 @@ export class GridModel {
     selModel = null;
     contextMenuFn = null;
     colChooserModel = null;
+    stateModel = null;
 
     @observable.ref agApi = null;
     @observable.ref columns = [];
@@ -49,8 +51,6 @@ export class GridModel {
     /**
      * @param {BaseStore} store - store containing the data for the grid.
      * @param {Object[]} columns - collection of column specifications.
-     * @param {(StoreSelectionModel|Object|String)} [selModel] - selection model to use,
-     *      config to create one, or 'mode' property for a selection model.
      * @param {string} [emptyText] - empty text to display if grid has no records. Can be valid HTML.
      *      Defaults to null, in which case no empty text will be shown.
      * @param {Object[]} [sortBy] - one or more sorters to apply to store data.
@@ -59,6 +59,10 @@ export class GridModel {
      * @param {string} [groupBy] - Column ID by which to group.
      * @param {boolean} [enableColChooser] - true to setup support for column chooser UI and
      *      install a default context menu item to launch the chooser.
+     * @param {(StoreSelectionModel|Object|String)} [selModel] - selection model to use,
+     *      config to create one, or 'mode' property for a selection model.
+     * @param {(GridStateModel|Object|String)} [stateModel] - state model to use,
+     *      config to create one, or xhStateId property for a state model
      * @param {function} [contextMenuFn] - closure returning a StoreContextMenu().
      */
     constructor({
@@ -69,13 +73,12 @@ export class GridModel {
         sortBy = [],
         groupBy = null,
         enableColChooser = false,
+        stateModel = null,
         contextMenuFn = () => this.defaultContextMenu()
     }) {
         this.store = store;
         this.columns = columns;
         this.contextMenuFn = contextMenuFn;
-
-        this.selModel = this.parseSelModel(selModel, store);
         this.emptyText = emptyText;
 
         if (enableColChooser) {
@@ -84,6 +87,9 @@ export class GridModel {
 
         this.setGroupBy(groupBy);
         this.setSortBy(sortBy);
+
+        this.selModel = this.initSelModel(selModel, store);
+        this.stateModel = this.initStateModel(stateModel);
     }
 
     exportDataAsExcel(params) {
@@ -129,9 +135,18 @@ export class GridModel {
         this.agApi = agApi;
     }
 
+    /**
+     * Set row grouping
+     *
+     * This method is no-op if provided a field without a corresponding column.
+     * A falsey field argument will remove grouping entirely.
+     */
     @action
     setGroupBy(field) {
-        const cols = this.columns;
+        const cols = this.columns,
+            groupCol = find(cols, {field});
+
+        if (field && !groupCol) return;
 
         cols.forEach(it => {
             if (it.rowGroup) {
@@ -140,17 +155,19 @@ export class GridModel {
             }
         });
 
-        if (field) {
-            const col = find(cols, {field});
-            if (col) {
-                col.rowGroup = true;
-                col.hide = true;
-            }
+        if (groupCol) {
+            groupCol.rowGroup = true;
+            groupCol.hide = true;
         }
-        
+
         this.columns = [...cols];
     }
 
+    /**
+     * Set sort by column
+     *
+     * This method is no-op if provided any sorters without a corresponding column
+     */
     @action
     setSortBy(sortBy) {
         // Normalize string, and partially specified values
@@ -161,9 +178,13 @@ export class GridModel {
             return it;
         });
 
+        const sortIsValid = sortBy.every(it => find(this.columns, {colId: it.colId}));
+        if (!sortIsValid) return;
+
         this.sortBy = sortBy;
     }
 
+
     /** Load the underlying store. */
     loadAsync(...args) {
         return this.store.loadAsync(...args);
@@ -190,6 +211,24 @@ export class GridModel {
         }
     }
 
+    syncColumnOrder(agColumns) {
+        // Check for no-op
+        const xhColumns = this.columns,
+            newIdOrder = agColumns.map(it => it.colId),
+            oldIdOrder = xhColumns.map(it => it.colId),
+            orderChanged = !isEqual(newIdOrder, oldIdOrder);
+
+        if (!orderChanged) return;
+
+        const orderedCols = [];
+        agColumns.forEach(gridCol => {
+            const col = find(xhColumns, {colId: gridCol.colId});
+            orderedCols.push(col);
+        });
+
+        this.setColumns(orderedCols);
+    }
+
     //-----------------------
     // Implementation
     //-----------------------
@@ -203,8 +242,7 @@ export class GridModel {
         }
     }
 
-
-    parseSelModel(selModel, store) {
+    initSelModel(selModel, store) {
         if (selModel instanceof StoreSelectionModel) {
             return selModel;
         }
@@ -217,13 +255,33 @@ export class GridModel {
         let mode = 'single';
         if (isString(selModel)) {
             mode = selModel;
-        } else  if (selModel === null) {
+        } else if (selModel === null) {
             mode = 'disabled';
         }
 
         return new StoreSelectionModel({mode, store});
     }
 
+    initStateModel(stateModel) {
+        if (!stateModel) return;
+        let ret;
+
+        if (stateModel instanceof GridStateModel) {
+            ret = stateModel;
+        }
+
+        if (isPlainObject(stateModel)) {
+            ret = new GridStateModel(stateModel);
+        }
+
+        if (isString(stateModel)) {
+            ret = new GridStateModel({xhStateId: stateModel});
+        }
+
+        ret.init(this);
+        return ret;
+    }
+
     destroy() {
         XH.safeDestroy(this.colChooserModel);
         // TODO: How are Stores destroyed?