neo.mjs 8.7.0 → 8.8.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.7.0'
+         * @member {String} version='8.8.0'
          */
-        version: '8.7.0'
+        version: '8.8.0'
     }
 
     /**

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-23",
+      "datePublished": "2025-01-25",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.7.0'
+                html  : 'v8.8.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.7.0'
+         * @member {String} version='8.8.0'
          */
-        version: '8.7.0'
+        version: '8.8.0'
     }
 
     /**

package/examples/grid/nestedRecordFields/EditUserDialog.mjs

@@ -0,0 +1,154 @@
+import CheckBox     from '../../../src/form/field/CheckBox.mjs';
+import CountryField from '../../../src/form/field/Country.mjs';
+import Dialog       from '../../../src/dialog/Base.mjs';
+import TextField    from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.EditUserDialog
+ * @extends Neo.dialog.Base
+ */
+class EditUserDialog extends Dialog {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.EditUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.EditUserDialog',
+        /**
+         * @member {String} closeAction='hide'
+         */
+        closeAction: 'hide',
+        /**
+         * @member {Object} containerConfig={style:{padding:'1em'}}
+         */
+        containerConfig: {
+            style: {
+                padding: '1em'
+            }
+        },
+        /**
+         * @member {Boolean} modal=true
+         */
+        modal: true,
+        /**
+         * @member {Record|null} record_=null
+         */
+        record_: null,
+        /**
+         * @member {String} title='Edit User'
+         */
+        title: 'Edit User',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            flex      : 'none',
+            labelWidth: 110
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Firstname',
+            listeners: {change: 'up.onFirstnameFieldChange'},
+            reference: 'firstname-field'
+        }, {
+            module   : TextField,
+            labelText: 'Lastname',
+            listeners: {change: 'up.onLastnameFieldChange'},
+            reference: 'lastname-field'
+        }, {
+            module    : CountryField,
+            bind      : {store: 'stores.countries'},
+            labelText : 'Country',
+            listeners : {change: 'up.onCountryFieldChange'},
+            reference : 'country-field',
+            valueField: 'code'
+        }, {
+            module   : CheckBox,
+            labelText: 'Selected',
+            listeners: {change: 'up.onSelectedFieldChange'},
+            reference: 'selected-field',
+            style    : {marginTop: '1em'}
+        }]
+    }
+
+    /**
+     * Triggered after the record config got changed
+     * @param {Record|null} value
+     * @param {Record|null} oldValue
+     * @protected
+     */
+    async afterSetRecord(value, oldValue) {
+        if (value) {
+            let me       = this,
+                {record} = me;
+
+            // ensure the store has its data
+            await me.timeout(20);
+
+            me.getItem('country-field')  .value   = record.country;
+            me.getItem('firstname-field').value   = record['user.firstname'];
+            me.getItem('lastname-field') .value   = record['user.lastname'];
+            me.getItem('selected-field') .checked = record['annotations.selected'];
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCountryFieldChange(data) {
+        // You can also access the internal setter directly:
+        // this.record.country = data.value.code
+        // Using the API allows bulk changes
+
+        this.record.set({country: data.value.code})
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFirstnameFieldChange(data) {
+        // You can also access the internal setter directly:
+        // this.record['user.firstname'] = data.value
+        // Using the API allows bulk changes
+        this.record.set({user: {firstname: data.value}})
+
+
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onLastnameFieldChange(data) {
+        // You can also access the internal setter directly:
+        // this.record['user.lastname'] = data.value
+        // Using the API allows bulk changes
+        this.record.set({user: {lastname: data.value}})
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectedFieldChange(data) {
+        let me    = this,
+            store = me.getStateProvider().getStore('mainStore');
+
+        if (data.value === false) {
+            // You can also access the internal setter directly:
+            // me.record['annotations.selected'] = false
+            // Using the API allows bulk changes
+            me.record.set({annotations: {selected: false}})
+        } else {
+            // Assuming we want to support a single row selection
+            store.items.forEach(record => {
+                record.set({annotations: {
+                    selected: record === me.record ? data.value : false
+                }})
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(EditUserDialog);

package/examples/grid/nestedRecordFields/MainModel.mjs

@@ -0,0 +1,54 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.MainModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'annotations',
+            type: 'Object',
+
+            fields: [{
+                name        : 'selected',
+                type        : 'Boolean',
+                defaultValue: false
+            }]
+        }, {
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'edit',
+            type: 'String'
+        }, {
+            name: 'githubId',
+            type: 'String'
+        }, {
+            name: 'user',
+            type: 'Object',
+
+            fields: [{
+                name: 'firstname',
+                type: 'String'
+            }, {
+                name: 'lastname',
+                type: 'String'
+            }]
+        }],
+        /**
+         * @member {Boolean} trackModifiedFields=true
+         */
+        trackModifiedFields: true
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/grid/nestedRecordFields/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.grid.nestedRecordFields.MainStore',
+        keyProperty: 'githubId',
+        model      : Model,
+
+        data: [{
+            country : 'DE',
+            githubId: 'tobiu',
+
+            user: {
+                firstname: 'Tobias',
+                lastname : 'Uhlig'
+            }
+        }, {
+            annotations: {
+                selected: true
+            },
+
+            country : 'US',
+            githubId: 'rwaters',
+
+            user: {
+                firstname: 'Rich',
+                lastname : 'Waters'
+            }
+        }, {
+            country : 'DE',
+            githubId: 'mrsunshine',
+
+            user: {
+                firstname: 'Nils',
+                lastname : 'Dehl'
+            }
+        }, {
+            country : 'US',
+            githubId: 'camtnbikerrwc',
+
+            user: {
+                firstname: 'Gerard',
+                lastname : 'Horan'
+            }
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/grid/nestedRecordFields/Viewport.mjs

@@ -0,0 +1,152 @@
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import Button                from '../../../src/button/Base.mjs';
+import GridContainer         from '../../../src/grid/Container.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.Viewport',
+        /**
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         */
+        stateProvider: ViewportStateProvider,
+        /**
+         * @member {Object} style={padding:'1em'}
+         */
+        style: {padding: '1em'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype    : 'toolbar',
+            flex     : 'none',
+            reference: 'switch-theme-button',
+            style    : {marginBottom: '1em'},
+
+            items: ['->', {
+                handler: 'up.onSwitchThemeButtonClick',
+                iconCls: 'fas fa-moon',
+                text   : 'Dark Theme'
+            }]
+        }, {
+            module: GridContainer,
+            bind  : {store : 'stores.mainStore'},
+
+            columnDefaults: {
+                width: 200
+            },
+
+            columns: [
+                {dataField: 'user.firstname', text: 'Firstname'},
+                {dataField: 'user.lastname',  text: 'Lastname'},
+                {dataField: 'githubId',       text: 'Github Id'},
+                {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
+                {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
+            ],
+
+            viewConfig: {
+                highlightModifiedCells: true
+            }
+        }]
+    }
+
+    /**
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getStateProvider().getStore('countries');
+
+        if (countryStore.getCount() > 0) {
+            return countryStore.get(record.country).name
+        }
+
+        return ''
+    }
+
+    /**
+     * @param {Object} data
+     */
+    editButtonHandler(data) {
+        let me       = this,
+            button   = data.component,
+            {appName, dialog, theme, windowId} = me,
+            {record} = button;
+
+        if (!dialog) {
+            import('./EditUserDialog.mjs').then(module => {
+                me.dialog = Neo.create({
+                    module         : module.default,
+                    animateTargetId: button.id,
+                    appName,
+                    stateProvider  : {parent: me.getStateProvider()},
+                    record,
+                    theme,
+                    windowId
+                })
+            })
+        } else {
+            dialog.animateTargetId = button.id;
+            dialog.record          = record;
+
+            dialog.show()
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    editRenderer({column, gridContainer, index, record}) {
+        let me                  = this,
+            {appName, windowId} = me,
+            widgetId            = `${column.id}-widget-${index}`,
+            button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
+                module  : Button,
+                appName,
+                handler : 'up.editButtonHandler',
+                parentId: gridContainer.id,
+                record,
+                text    : 'Edit',
+                windowId
+            }));
+
+        me.view.updateDepth = -1;
+
+        return button.createVdomReference()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSwitchThemeButtonClick(data) {
+        let me          = this,
+            button      = data.component,
+            isDarkTheme = me.theme === 'neo-theme-dark',
+            theme       = isDarkTheme ? 'neo-theme-light' : 'neo-theme-dark';
+
+        button.set({
+            iconCls: isDarkTheme ? 'fa fa-moon' : 'fa fa-sun',
+            text   : isDarkTheme ? 'Dark Theme' : 'Light Theme'
+        });
+
+        me.theme = theme;
+
+        if (me.dialog) {
+            me.dialog.theme = theme
+        }
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/grid/nestedRecordFields/ViewportStateProvider.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 dataSymbol = Symbol.for('data');
+
+/**
+ * @class Neo.examples.grid.nestedRecordFields.ViewportStateProvider
+ * @extends Neo.state.Provider
+ */
+class ViewportStateProvider extends StateProvider {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.nestedRecordFields.ViewportStateProvider'
+         * @protected
+         */
+        className: 'Neo.examples.grid.nestedRecordFields.ViewportStateProvider',
+        /**
+         * @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[dataSymbol].country = null;
+
+                record.country = country
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(ViewportStateProvider);

package/examples/grid/nestedRecordFields/app.mjs

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

package/examples/grid/nestedRecordFields/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: Nested Record Fields</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/grid/nestedRecordFields/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/grid/nestedRecordFields/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"]
+}

package/examples/table/nestedRecordFields/{MainContainer.mjs → Viewport.mjs}

@@ -1,35 +1,42 @@
-import Button                     from '../../../src/button/Base.mjs';
-import MainContainerStateProvider from './MainContainerStateProvider.mjs';
-import TableContainer             from '../../../src/table/Container.mjs';
-import Viewport                   from '../../../src/container/Viewport.mjs';
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import Button                from '../../../src/button/Base.mjs';
+import TableContainer        from '../../../src/table/Container.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
 
 /**
- * @class Neo.examples.table.nestedRecordFields.MainContainer
+ * @class Neo.examples.table.nestedRecordFields.Viewport
  * @extends Neo.container.Viewport
  */
-class MainContainer extends Viewport {
+class Viewport extends BaseViewport {
     static config = {
         /**
-         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainer'
+         * @member {String} className='Neo.examples.table.nestedRecordFields.Viewport'
          * @protected
          */
-        className: 'Neo.examples.table.nestedRecordFields.MainContainer',
+        className: 'Neo.examples.table.nestedRecordFields.Viewport',
         /**
-         * @member {Object|String} layout='fit'
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
          */
-        layout: 'fit',
+        stateProvider: ViewportStateProvider,
         /**
-         * @member {Neo.state.Provider} stateProvider=MainContainerStateProvider
+         * @member {Object} style={padding:'1em'}
          */
-        stateProvider: MainContainerStateProvider,
-        /**
-         * @member {Object} style={padding:'20px'}
-         */
-        style: {padding: '20px'},
+        style: {padding: '1em'},
         /**
          * @member {Object[]} items
          */
         items: [{
+            ntype    : 'toolbar',
+            flex     : 'none',
+            reference: 'switch-theme-button',
+            style    : {marginBottom: '1em'},
+
+            items: ['->', {
+                handler: 'up.onSwitchThemeButtonClick',
+                iconCls: 'fas fa-moon',
+                text   : 'Dark Theme'
+            }]
+        }, {
             module: TableContainer,
             bind  : {store : 'stores.mainStore'},
 
@@ -69,10 +76,10 @@ class MainContainer extends Viewport {
      * @param {Object} data
      */
     editButtonHandler(data) {
-        let me                          = this,
-            button                      = data.component,
-            {appName, dialog, windowId} = me,
-            {record}                    = button;
+        let me       = this,
+            button   = data.component,
+            {appName, dialog, theme, windowId} = me,
+            {record} = button;
 
         if (!dialog) {
             import('./EditUserDialog.mjs').then(module => {
@@ -82,6 +89,7 @@ class MainContainer extends Viewport {
                     appName,
                     stateProvider  : {parent: me.getStateProvider()},
                     record,
+                    theme,
                     windowId
                 })
             })
@@ -114,6 +122,27 @@ class MainContainer extends Viewport {
 
         return button.createVdomReference()
     }
+
+    /**
+     * @param {Object} data
+     */
+    onSwitchThemeButtonClick(data) {
+        let me          = this,
+            button      = data.component,
+            isDarkTheme = me.theme === 'neo-theme-dark',
+            theme       = isDarkTheme ? 'neo-theme-light' : 'neo-theme-dark';
+
+        button.set({
+            iconCls: isDarkTheme ? 'fa fa-moon' : 'fa fa-sun',
+            text   : isDarkTheme ? 'Dark Theme' : 'Light Theme'
+        });
+
+        me.theme = theme;
+
+        if (me.dialog) {
+            me.dialog.theme = theme
+        }
+    }
 }
 
-export default Neo.setupClass(MainContainer);
+export default Neo.setupClass(Viewport);