neo.mjs 7.7.0 → 7.9.0

package/apps/shareddialog/view/MainContainerController.mjs

@@ -2,6 +2,7 @@ import Component           from '../../../src/component/Base.mjs';
 import ComponentController from '../../../src/controller/Component.mjs';
 import ComponentManager    from '../../../src/manager/Component.mjs';
 import DemoDialog          from './DemoDialog.mjs';
+import DragProxyComponent  from '../../../src/draggable/DragProxyComponent.mjs';
 import NeoArray            from '../../../src/util/Array.mjs';
 import Rectangle           from '../../../src/util/Rectangle.mjs';
 
@@ -16,63 +17,53 @@ class MainContainerController extends ComponentController {
          * @protected
          */
         className: 'SharedDialog.view.MainContainerController',
-        /**
-         * @member {String[]} connectedApps=[]
-         */
-        connectedApps: [],
-        /**
-         * @member {String} currentTheme='neo-theme-light'
-         */
-        currentTheme: 'neo-theme-light',
-        /**
-         * @member {String} dockedWindowAppName='SharedDialog2'
-         */
-        dockedWindowAppName: 'SharedDialog2',
-        /**
-         * @member {Number|null} dockedWindowId=null
-         */
-        dockedWindowId: null,
-        /**
-         * @member {Neo.component.Base|null} dockedWindowProxy=null
-         */
-        dockedWindowProxy: null,
         /**
          * Valid values: bottom, left, right, top
          * @member {String} dockedWindowSide_='right'
          */
         dockedWindowSide_: 'right',
-        /**
-         * @member {Number} dockedWindowSize=500
-         */
-        dockedWindowSize: 620,
-        /**
-         * @member {Object} dialogRect=null
-         */
-        dialogRect: null,
-        /**
-         * @member {Object} dragStartWindowRect=null
-         */
-        dragStartWindowRect: null,
-        /**
-         * @member {Number|null} targetWindowSize=0
-         */
-        targetWindowSize: 0
     }
 
     /**
-     * The App worker will receive connect & disconnect events inside the SharedWorkers context
+     * @member {String[]} connectedApps=[]
      */
-    onConstructed() {
-        super.onConstructed();
-
-        let me = this;
-
-        Neo.currentWorker.on({
-            connect   : me.onAppConnect,
-            disconnect: me.onAppDisconnect,
-            scope     : me
-        })
-    }
+    connectedApps = []
+    /**
+     * @member {String} currentTheme='neo-theme-light'
+     */
+    currentTheme = 'neo-theme-light'
+    /**
+     * @member {String} dockedWindowAppName='SharedDialog2'
+     */
+    dockedWindowAppName = 'SharedDialog2'
+    /**
+     * @member {Number|null} dockedWindowId=null
+     */
+    dockedWindowId = null
+    /**
+     * @member {Neo.component.Base|null} dockedWindowProxy=null
+     */
+    dockedWindowProxy = null
+    /**
+     * @member {Number} dockedWindowSize=500
+     */
+    dockedWindowSize = 620
+    /**
+     * @member {Object} dialogRect=null
+     */
+    dialogRect = null
+    /**
+     * @member {Object} dragStartWindowRect=null
+     */
+    dragStartWindowRect = null
+    /**
+     * @member {String|null} previousTheme=null
+     */
+    previousTheme = null
+    /**
+     * @member {Number|null} targetWindowSize=0
+     */
+    targetWindowSize = 0
 
     /**
      * Triggered after the dockedWindowSide config got changed
@@ -103,7 +94,7 @@ class MainContainerController extends ComponentController {
             animateTargetId    : data.component.id,
             appName,
             boundaryContainerId: null,
-            cls                : [me.currentTheme, 'neo-dialog', 'neo-panel', 'neo-container'],
+            cls                : [me.currentTheme],
             height             : 200,
             width              : 300,
             windowId,
@@ -128,7 +119,7 @@ class MainContainerController extends ComponentController {
 
         if (me.dockedWindowProxy) {
             me.dockedWindowProxy.destroy(true);
-            me.dockedWindowProxy = null;
+            me.dockedWindowProxy = null
         }
     }
 
@@ -177,9 +168,9 @@ class MainContainerController extends ComponentController {
     }
 
     /**
-     * @param {Boolean} enable
+     * @param {Boolean} enable=true
      */
-    enableOpenDialogButtons(enable) {
+    enableOpenDialogButtons(enable=true) {
         this.getOpenDialogButtons().forEach(button => {
             button.disabled = !enable
         })
@@ -196,9 +187,7 @@ class MainContainerController extends ComponentController {
      *
      */
     getOpenDialogButtons() {
-        return ComponentManager.find({
-            flag: 'open-dialog-button'
-        })
+        return ComponentManager.find({flag: 'open-dialog-button'})
     }
 
     /**
@@ -221,9 +210,8 @@ class MainContainerController extends ComponentController {
      * @return {{left: String, top: String}}
      */
     getProxyPosition(proxyRect, side, fullyIncludeIntoWindow=false) {
-        let me                  = this,
-            dragStartWindowRect = me.dragStartWindowRect,
-            targetWindowSize    = me.targetWindowSize,
+        let me                                      = this,
+            {dragStartWindowRect, targetWindowSize} = me,
             left, top;
 
         switch(side) {
@@ -312,16 +300,16 @@ class MainContainerController extends ComponentController {
      * @param {Number} data.windowId
      */
     onAppConnect(data) {
-        let me   = this,
-            name = data.appName;
+        let me                  = this,
+            {appName, windowId} = data;
 
-        NeoArray.add(me.connectedApps, name);
+        NeoArray.add(me.connectedApps, appName);
 
-        if (name !== 'SharedDialog' && me.currentTheme !== 'neo-theme-light') {
-            me.switchThemeForApp(name, me.currentTheme)
+        if (appName !== 'SharedDialog' && me.currentTheme !== 'neo-theme-light') {
+            me.switchThemeForApp(windowId)
         }
 
-        if (name === me.dockedWindowAppName) {
+        if (appName === me.dockedWindowAppName) {
             me.dockedWindowId = data.windowId;
             me.getOpenDockedWindowButton().disabled = true
         }
@@ -334,29 +322,46 @@ class MainContainerController extends ComponentController {
      * @param {String} data.appName
      */
     onAppDisconnect(data) {
-        let me   = this,
-            name = data.appName;
+        let me                                = this,
+            {connectedApps, dialog, windowId} = me,
+            name                              = data.appName;
 
         if (name === 'SharedDialog') {
             // we want to close all popup windows, which equals to all connected apps minus the main app
-            NeoArray.remove(me.connectedApps, 'SharedDialog');
+            NeoArray.remove(connectedApps, 'SharedDialog');
 
             Neo.Main.windowClose({
-                names: me.connectedApps
+                names: connectedApps,
+                windowId
             })
-        } else {
-            NeoArray.remove(me.connectedApps, name);
+        } if (name === me.dockedWindowAppName) {
+            NeoArray.remove(connectedApps, name);
 
-            Neo.main.addon.WindowPosition.unregisterWindow({
-                name: name
-            })
-        }
+            Neo.main.addon.WindowPosition.unregisterWindow({name, windowId});
+
+            if (dialog && dialog.windowId !== windowId) {
+                me.enableOpenDialogButtons()
+            }
 
-        if (name === me.dockedWindowAppName) {
             me.getOpenDockedWindowButton().disabled = false
         }
     }
 
+    /**
+     * The App worker will receive connect & disconnect events inside the SharedWorkers context
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        Neo.currentWorker.on({
+            connect   : me.onAppConnect,
+            disconnect: me.onAppDisconnect,
+            scope     : me
+        })
+    }
+
     /**
      * @param {Object} data
      */
@@ -368,7 +373,8 @@ class MainContainerController extends ComponentController {
      *
      */
     onDialogClose() {
-        this.enableOpenDialogButtons(true)
+        this.enableOpenDialogButtons(true);
+        this.dialog = null
     }
 
     /**
@@ -383,11 +389,10 @@ class MainContainerController extends ComponentController {
      */
     onDragEnd(data) {
         if (this.hasDockedWindow()) {
-            let me                  = this,
-                dialog              = me.dialog,
-                dragStartWindowRect = me.dragStartWindowRect,
-                proxyRect           = Rectangle.moveTo(me.dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
-                side                = me.dockedWindowSide;
+            let me        = this,
+                {dialog, dragStartWindowRect} = me,
+                proxyRect = Rectangle.moveTo(me.dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
+                side      = me.dockedWindowSide;
 
             if (dialog.appName === me.dockedWindowAppName) {
                 side = me.getOppositeSide(me.dockedWindowSide)
@@ -409,7 +414,7 @@ class MainContainerController extends ComponentController {
     onDragMove(data) {
         if (this.hasDockedWindow()) {
             let me        = this,
-                 {dialogRect, dragStartWindowRect, dockedWindowAppName, dockedWindowId} = me,
+                {dialogRect, dragStartWindowRect, dockedWindowAppName, dockedWindowId} = me,
                 proxyRect = Rectangle.moveTo(dialogRect, data.clientX - data.offsetX, data.clientY - data.offsetY),
                 side      = me.dockedWindowSide,
                 proxyPosition, vdom;
@@ -437,14 +442,12 @@ class MainContainerController extends ComponentController {
                     });
 
                     me.dockedWindowProxy = Neo.create({
-                        module    : Component,
-                        appName   : dockedWindowAppName,
-                        autoMount : true,
-                        autoRender: true,
-                        cls       : ['neo-dialog', 'neo-panel', 'neo-dragproxy'],
-                        parentId  : 'document.body',
-                        vdom      : vdom,
-                        windowId  : dockedWindowId
+                        module          : DragProxyComponent,
+                        appName         : dockedWindowAppName,
+                        cls             : ['neo-dialog', 'neo-panel', 'neo-container'],
+                        moveInMainThread: false,
+                        vdom            : vdom,
+                        windowId        : dockedWindowId
                     });
 
                     // The other window has most likely not loaded The dialog JS module yet,
@@ -472,7 +475,7 @@ class MainContainerController extends ComponentController {
     onDragStart(data) {
         if (this.hasDockedWindow()) {
             let me               = this,
-                appName          = me.component.appName,
+                {appName}        = me.component,
                 dockedHorizontal = me.dockedWindowSide === 'left' || me.dockedWindowSide === 'right';
 
             me.dialogRect = data.dragElementRect;
@@ -583,35 +586,34 @@ class MainContainerController extends ComponentController {
             theme      = 'neo-theme-light';
         }
 
+        me.previousTheme = me.currentTheme;
+        me.currentTheme  = theme;
+
         me.connectedApps.forEach(appName => {
-            me.switchThemeForApp(appName, theme)
+            me.switchThemeForApp(Neo.apps[appName].windowId)
         });
 
-        button.set({
-            iconCls: iconCls,
-            text   : buttonText
-        });
+        button.set({iconCls, text: buttonText});
 
         if (dialog) {
             cls = dialog.cls;
 
-            NeoArray.removeAdd(cls, me.currentTheme, theme);
+            NeoArray.removeAdd(cls, me.previousTheme, me.currentTheme);
 
             dialog.cls = cls
         }
-
-        me.currentTheme = theme
     }
 
     /**
-     * @param {String} appName
-     * @param {String} theme
+     * @param {Number} windowId
      */
-    switchThemeForApp(appName, theme) {
+    switchThemeForApp(windowId) {
+        let {currentTheme, previousTheme} = this;
+
         Neo.main.DomAccess.setBodyCls({
-            appName: appName,
-            add    : [theme],
-            remove : [this.currentTheme]
+            add    : [currentTheme],
+            remove : previousTheme ? [previousTheme]: [],
+            windowId
         })
     }
 

package/buildScripts/webpack/json/myApps.template.json

@@ -4,10 +4,10 @@
         "Covid",
         "Docs",
         "Form",
-        "Krausest",
         "Portal",
         "RealWorld",
         "RealWorld2",
+        "Route",
         "SharedCovid",
         "SharedDialog"
     ]

package/examples/ServiceWorker.mjs

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

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -0,0 +1,127 @@
+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.table.nestedRecordFields.EditUserDialog
+ * @extends Neo.dialog.Base
+ */
+class EditUserDialog extends Dialog {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.model.dialog.EditUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.model.dialog.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) {
+        this.record.country = data.value.code
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFirstnameFieldChange(data) {
+        this.record.user.firstname = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onLastnameFieldChange(data) {
+        this.record.user.lastname = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectedFieldChange(data) {
+        this.record.annotations.selected = data.value
+    }
+}
+
+export default Neo.setupClass(EditUserDialog);

package/examples/table/nestedRecordFields/MainContainer.mjs

@@ -0,0 +1,113 @@
+import Button             from '../../../src/button/Base.mjs';
+import MainContainerModel from './MainContainerModel.mjs';
+import TableContainer     from '../../../src/table/Container.mjs';
+import Viewport           from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainContainer',
+        /**
+         * @member {Object|String} layout='fit'
+         */
+        layout: 'fit',
+        /**
+         * @member {Neo.model.Component} model=MainContainerModel
+         */
+        model: MainContainerModel,
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: TableContainer,
+            bind  : {store : 'stores.mainStore'},
+
+            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'}
+            ]
+        }]
+    }
+
+    /**
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getModel().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, windowId} = me,
+            {record}                    = button;
+
+        if (!dialog) {
+            import('./EditUserDialog.mjs').then(module => {
+                me.dialog = Neo.create({
+                    module         : module.default,
+                    animateTargetId: button.id,
+                    appName,
+                    model          : {parent: me.getModel()},
+                    record,
+                    windowId
+                })
+            })
+        } else {
+            dialog.animateTargetId = button.id;
+            dialog.record          = record;
+
+            dialog.show()
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    editRenderer({column, index, record, tableContainer}) {
+        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: tableContainer.id,
+                record,
+                text    : 'Edit',
+                windowId
+            }));
+
+        return button.vdom
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/table/nestedRecordFields/MainContainerModel.mjs

@@ -0,0 +1,61 @@
+import MainStore from './MainStore.mjs';
+import Model     from '../../../src/model/Component.mjs';
+import Store     from '../../../src/data/Store.mjs';
+
+const countrySymbol = Symbol.for('country');
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainerModel'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainContainerModel',
+        /**
+         * @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(MainContainerModel);