#6168 grid.Container: example app

examples/grid/cellEditing/MainContainer.mjs

@@ -0,0 +1,176 @@
+import CellColumnModel            from '../../../src/selection/grid/CellColumnModel.mjs';
+import CellColumnRowModel         from '../../../src/selection/grid/CellColumnRowModel.mjs';
+import CellModel                  from '../../../src/selection/grid/CellModel.mjs';
+import CellRowModel               from '../../../src/selection/grid/CellRowModel.mjs';
+import CheckBox                   from '../../../src/form/field/CheckBox.mjs';
+import CountryField               from '../../../src/form/field/Country.mjs';
+import ConfigurationViewport      from '../../ConfigurationViewport.mjs';
+import DateField                  from '../../../src/form/field/Date.mjs';
+import GridContainer              from '../../../src/grid/Container.mjs';
+import MainContainerStateProvider from './MainContainerStateProvider.mjs';
+import MainStore                  from './MainStore.mjs';
+import NumberField                from '../../../src/form/field/Number.mjs';
+import Radio                      from '../../../src/form/field/Radio.mjs';
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.grid.cellEditing.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 130,
+        configPanelFlex     : 1.5,
+        exampleComponentFlex: 3,
+        layout              : {ntype: 'hbox', align: 'stretch'},
+        stateProvider       : MainContainerStateProvider
+    }
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getStateProvider().getStore('countries');
+
+        if (countryStore.getCount() > 0) {
+            return countryStore.get(record.country).name
+        }
+
+        return ''
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    createConfigurationComponents() {
+        let me = this;
+
+        const selectionModelRadioDefaults = {
+            module        : Radio,
+            hideValueLabel: false,
+            labelText     : '',
+            name          : 'selectionModel',
+            width         : 350
+        };
+
+        return [{
+            module   : NumberField,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 800,
+            minValue : 225,
+            stepSize : 5,
+            value    : me.exampleComponent.height
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellmodel',
+            labelText     : 'selectionModel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'Cell'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            valueLabelText: 'Cell & Column'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellrowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            valueLabelText: 'Cell & Row'
+        }, {
+            ...selectionModelRadioDefaults,
+            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            valueLabelText: 'Cell & Column & Row'
+        }, {
+            module        : CheckBox,
+            checked       : me.exampleComponent.sortable,
+            hideLabel     : true,
+            listeners     : {change: me.onConfigChange.bind(me, 'sortable')},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'sortable'
+        }, {
+            module        : CheckBox,
+            checked       : false, // we can not access the lazy-loaded plugin yet
+            hideLabel     : true,
+            listeners     : {change: me.onPluginConfigChange.bind(me, 'disabled')},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'Disable CellEditing'
+        }]
+    }
+
+    /**
+     * @returns {Object}
+     */
+    createExampleComponent() {
+        return {
+            module        : GridContainer,
+            bind          : {store : 'stores.mainStore'},
+            cellEditing   : true,
+            parentId      : this.id,
+            selectionModel: CellModel,
+            store         : MainStore,
+
+            columnDefaults: {
+                editable: true
+            },
+
+            columns: [
+                {
+                    dataField: 'firstname',
+                    text     : 'Firstname'
+                }, {
+                    dataField: 'randomNumber',
+                    text     : 'Number (step 5)',
+
+                    editor: {
+                        module   : NumberField,
+                        clearable: false,
+                        maxValue : 100,
+                        minValue : 0,
+                        stepSize : 5
+                    }
+                }, {
+                    dataField: 'randomDate',
+                    renderer : ({value}) => new Intl.DateTimeFormat('default').format(value),
+                    text     : 'Random Date',
+
+                    editor: {
+                        module   : DateField,
+                        clearable: false,
+                        maxValue : '2024-12-20',
+                        minValue : '2024-12-10'
+                    }
+                }, {
+                    dataField: 'country',
+                    renderer : 'up.countryRenderer',
+                    text     : 'Country',
+
+                    editor: {
+                        module        : CountryField,
+                        bind          : {store: 'stores.countries'},
+                        clearable     : false,
+                        forceSelection: true,
+                        valueField    : 'code'
+                    }
+                }, {
+                    dataField: 'githubId',
+                    editable : false,
+                    text     : 'Github Id (Non-editable)'
+                },
+            ]
+        }
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onPluginConfigChange(config, opts) {
+        this.exampleComponent.getPlugin('grid-cell-editing')[config] = opts.value
+    }
+}
+
+export default Neo.setupClass(MainContainer);

examples/grid/cellEditing/MainContainerStateProvider.mjs

@@ -0,0 +1,62 @@
+import MainStore     from './MainStore.mjs';
+import StateProvider from '../../../src/state/Provider.mjs';
+import Store         from '../../../src/data/Store.mjs';
+
+const countrySymbol = Symbol.for('country');
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainContainerStateProvider
+ * @extends Neo.state.Provider
+ */
+class MainContainerStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.cellEditing.MainContainerStateProvider'
+         * @protected
+         */
+        className: 'Neo.examples.grid.cellEditing.MainContainerStateProvider',
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            countries: {
+                module     : Store,
+                autoLoad   : true,
+                keyProperty: 'code',
+                listeners  : {load: 'onCountryStoreLoad'},
+                url        : '../../../resources/examples/data/countries.json',
+
+                model: {
+                    fields: [
+                        {name: 'code'},
+                        {name: 'name'}
+                    ]
+                }
+            },
+            mainStore: MainStore
+        }
+    }
+
+    /**
+     * @param {Record[]} items
+     */
+    onCountryStoreLoad(items) {
+        let me        = this,
+            mainStore = me.getStore('mainStore'),
+            country;
+
+        // if the main table store is already loaded, the country field renderer had no data
+        if (mainStore.getCount() > 0) {
+            mainStore.items.forEach(record => {
+                country = record.country;
+
+                // hack resetting the current value to get a new record change
+                record[countrySymbol] = null;
+
+                record.country = country
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainerStateProvider);

examples/grid/cellEditing/MainModel.mjs

@@ -0,0 +1,30 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        className: 'Neo.examples.grid.cellEditing.MainModel',
+
+        fields: [{
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'githubId',
+            type: 'String'
+        }, {
+            name: 'randomNumber',
+            type: 'Int'
+        }, {
+            name: 'randomDate',
+            type: 'Date'
+        }]
+    }
+}
+
+export default Neo.setupClass(MainModel);

examples/grid/cellEditing/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.cellEditing.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.grid.cellEditing.MainStore',
+        keyProperty: 'githubId',
+        model      : Model,
+
+        data: [{
+            country     : 'DE',
+            firstname   : 'Tobias',
+            githubId    : 'tobiu',
+            randomDate  : '2024-12-20',
+            randomNumber: 100
+        }, {
+            country     : 'US',
+            firstname   : 'Rich',
+            githubId    : 'rwaters',
+            randomDate  : '2024-12-18',
+            randomNumber: 90
+        }, {
+            country     : 'DE',
+            firstname   : 'Nils',
+            githubId    : 'mrsunshine',
+            randomDate  : '2024-12-19',
+            randomNumber: 70
+        }, {
+            country     : 'US',
+            firstname   : 'Gerard',
+            githubId    : 'camtnbikerrwc',
+            randomDate  : '2024-12-17',
+            randomNumber: 80
+        }, {
+            country     : 'SK',
+            firstname   : 'Jozef',
+            githubId    : 'jsakalos',
+            randomDate  : '2024-12-16',
+            randomNumber: 60
+        }, {
+            country     : 'DE',
+            firstname   : 'Bastian',
+            githubId    : 'bhaustein',
+            randomDate  : '2024-12-15',
+            randomNumber: 50
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

examples/grid/cellEditing/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.grid.cellEditing'
+});

examples/grid/cellEditing/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Grid CellEditing</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

examples/grid/cellEditing/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/grid/cellEditing/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}