neo.mjs 4.0.16 → 4.0.19

package/examples/toolbar/paging/store/Users.mjs

@@ -20,10 +20,23 @@ class Users extends Store {
          * @member {Boolean} autoLoad=true
          */
         autoLoad: true,
+        /**
+         * True to sort the collection items when adding / inserting new ones
+         * @member {Boolean} autoSort=false
+         */
+        autoSort: false,
         /**
          * @member {Neo.data.Model} model=UserModel
          */
         model: UserModel,
+        /**
+         * @member {Boolean} remoteFilter=true
+         */
+        remoteFilter: true,
+        /**
+         * @member {Boolean} remoteSort=true
+         */
+        remoteSort: true,
         /**
          * @member {Object[]} sorters
          */

package/examples/toolbar/paging/view/MainContainer.mjs

@@ -10,13 +10,22 @@ import Viewport                from '../../../../src/container/Viewport.mjs';
  */
 class MainContainer extends Viewport {
     static getConfig() {return {
-        className : 'Neo.examples.toolbar.paging.view.MainContainer',
-        autoMount : true,
+        /**
+         * @member {String} className='Neo.examples.toolbar.paging.view.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.toolbar.paging.view.MainContainer',
+        /**
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Neo.controller.Component} controller=MainContainerController
+         */
         controller: MainContainerController,
-        layout    : {ntype: 'vbox', align: 'stretch'},
-        model     : MainContainerModel,
-        style     : {padding: '20px'},
-
+        /**
+         * @member {Object[]} items
+         */
         items: [{
             ntype: 'toolbar',
             flex : 'none',
@@ -24,6 +33,11 @@ class MainContainer extends Viewport {
                 handler: 'onAddUserButtonClick',
                 iconCls: 'fa fa-circle-plus',
                 text   : 'Add User'
+            }, {
+                handler: 'onShowFiltersButtonClick',
+                iconCls: 'fa fa-filter',
+                style  : {marginLeft: '2px'},
+                text   : 'Show Filters'
             }]
         }, {
             module      : UserTableContainer,
@@ -35,7 +49,19 @@ class MainContainer extends Viewport {
             module: PagingToolbar,
             bind  : {store: 'stores.users'},
             flex  : 'none'
-        }]
+        }],
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch'},
+        /**
+         * @member {Neo.model.Component} model=MainContainerModel
+         */
+        model: MainContainerModel,
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'}
     }}
 }
 

package/examples/toolbar/paging/view/MainContainerController.mjs

@@ -37,6 +37,15 @@ class MainContainerController extends ComponentController {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onShowFiltersButtonClick(data) {
+        let userTable = this.getReference('user-table');
+
+        userTable.showHeaderFilters = !userTable.showHeaderFilters;
+    }
+
     /**
      * Sending messages through a WebSocket inside the data worker
      * @param {Object} data

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.16",
+    "version": "4.0.19",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -35,8 +35,8 @@
     "homepage": "https://neomjs.github.io/pages/",
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.1.1",
-        "@material/mwc-button": "^0.26.0",
-        "@material/mwc-textfield": "^0.26.0",
+        "@material/mwc-button": "^0.26.1",
+        "@material/mwc-textfield": "^0.26.1",
         "autoprefixer": "^10.4.7",
         "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",

package/src/Neo.mjs

@@ -396,7 +396,7 @@ Neo = globalThis.Neo = Object.assign({
     },
 
     /**
-     * Maps a className string into a global namespace
+     * Maps a className string into a given or global namespace
      * @example
      * Neo.ns('Neo.button.Base', true);
      * // =>

package/src/collection/Base.mjs

@@ -41,13 +41,13 @@ class Base extends CoreBase {
         /**
          * When filtering the collection for the first time, allItems will become a new collection for the unfiltered
          * state, using this id as the sourceCollectionId
-         * @member {Neo.collection.Base|null} allItems
+         * @member {Neo.collection.Base|null} allItems=null
          * @protected
          */
         allItems: null,
         /**
          * True to sort the collection items when adding / inserting new ones
-         * @member {Boolean} autoSort
+         * @member {Boolean} autoSort=true
          */
         autoSort: true,
         /**
@@ -352,11 +352,9 @@ class Base extends CoreBase {
             }
         });
 
-        if (Array.isArray(oldValue)) {
-            oldValue.forEach(key => {
-                key.destroy();
-            });
-        }
+        oldValue?.forEach(key => {
+            key.destroy();
+        });
 
         return value;
     }
@@ -515,7 +513,7 @@ class Base extends CoreBase {
                 if (hasTransformValue) {
                     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Sorting_with_map
                     mappedItems = items.map((item, index) => {
-                        obj = {index: index};
+                        obj = {index};
                         i   = 0;
 
                         for (; i < countSorters; i++) {
@@ -597,6 +595,42 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Needed for remote filtering
+     * @returns {Object[]}
+     */
+    exportFilters() {
+        let me      = this,
+            filters = [],
+            filter;
+
+        me.filters?.forEach(key => {
+            filter = key.export();
+
+            filter && filters.push(filter);
+        });
+
+        return filters;
+    }
+
+    /**
+     * Needed for remote sorting
+     * @returns {Object[]}
+     */
+    exportSorters() {
+        let me      = this,
+            sorters = [],
+            sorter;
+
+        me.sorters?.forEach(key => {
+            sorter = key.export();
+
+            sorter && sorters.push(sorter);
+        });
+
+        return sorters;
+    }
+
     /**
      * @protected
      */

package/src/collection/Filter.mjs

@@ -140,6 +140,23 @@ class Filter extends Base {
         return this.beforeSetEnumValue(value, oldValue, 'operator');
     }
 
+    /**
+     * Needed for remote filtering
+     * @returns {Object|null}
+     */
+    export() {
+        let me       = this,
+            operator = me.operator,
+            property = me.property,
+            value    = me.value;
+
+        if (!me.filterBy) {
+            return {operator, property, value};
+        }
+
+        return null;
+    }
+
     /**
      * @param value
      * @param oldValue

package/src/collection/Sorter.mjs

@@ -27,7 +27,7 @@ class Sorter extends Base {
          */
         ntype: 'sorter',
         /**
-         * Internal config which mapps the direction ASC to 1, -1 otherwise
+         * Internal config which maps the direction ASC to 1, -1 otherwise
          * @member {Number} directionMultiplier=1
          * @protected
          */
@@ -121,6 +121,22 @@ class Sorter extends Base {
         return 0;
     }
 
+    /**
+     * Needed for remote sorting
+     * @returns {Object|null}
+     */
+    export() {
+        let me        = this,
+            direction = me.direction,
+            property  = me.property;
+
+        if (!me.sortBy && direction && property) {
+            return {direction, property};
+        }
+
+        return null;
+    }
+
     /**
      * @param {*} value
      * @returns {*} value

package/src/data/Store.mjs

@@ -162,6 +162,21 @@ class Store extends Base {
         }
     }
 
+    /**
+     * @param {Object[]} value
+     * @param {Object[]} oldValue
+     * @protected
+     */
+    afterSetFilters(value, oldValue) {
+        super.afterSetFilters(value, oldValue);
+
+        let me = this;
+
+        me._currentPage = 1; // silent update
+
+        oldValue && me.remoteFilter && me.load();
+    }
+
     /**
      * @param value
      * @param oldValue
@@ -196,6 +211,21 @@ class Store extends Base {
         }
     }
 
+    /**
+     * @param {Object[]} value
+     * @param {Object[]} oldValue
+     * @protected
+     */
+    afterSetSorters(value, oldValue) {
+        super.afterSetSorters(value, oldValue);
+
+        let me = this;
+
+        me._currentPage = 1; // silent update
+
+        oldValue && me.remoteSort && me.load();
+    }
+
     /**
      * @param {Object|String|null} value
      * @param {Object|String|null} oldValue
@@ -237,8 +267,6 @@ class Store extends Base {
                     value[index] = RecordFactory.createRecord(me.model, key);
                 }
             });
-
-            // console.log('beforeSetData', value);
         }
 
         return value;
@@ -265,9 +293,7 @@ class Store extends Base {
      * @returns {Neo.data.Model}
      */
     beforeSetModel(value, oldValue) {
-        if (oldValue) {
-            oldValue.destroy();
-        }
+        oldValue?.destroy();
 
         return ClassSystemUtil.beforeSetInstance(value, Model);
     }
@@ -280,7 +306,16 @@ class Store extends Base {
     }
 
     load() {
-        let me = this;
+        let me = this,
+            params = {page: me.currentPage, pageSize: me.pageSize};
+
+        if (me.remoteFilter) {
+            params.filters = me.exportFilters();
+        }
+
+        if (me.remoteSort) {
+            params.sorters = me.exportSorters();
+        }
 
         if (me.api) {
             let apiArray = me.api.read.split('.'),
@@ -290,10 +325,7 @@ class Store extends Base {
             if (!service) {
                 console.log('Api is not defined', this);
             } else {
-                service[fn]({
-                    page    : me.currentPage,
-                    pageSize: me.pageSize
-                }).then(response => {
+                service[fn](params).then(response => {
                     if (response.success) {
                         me.totalCount = response.totalCount;
                         me.data       = response.data; // fires the load event
@@ -301,8 +333,10 @@ class Store extends Base {
                 });
             }
         } else {
+            params.url = me.url;
+
             Neo.Xhr.promiseJson({
-                url: me.url
+                url: params
             }).catch(err => {
                 console.log('Error for Neo.Xhr.request', err, me.id);
             }).then(data => {
@@ -355,6 +389,21 @@ class Store extends Base {
         }
     }
 
+    /**
+     * @param {Object} opts
+     * @protected
+     */
+    onFilterChange(opts) {
+        let me = this;
+
+        if (me.remoteFilter) {
+            me._currentPage = 1; // silent update
+            me.load();
+        } else {
+            super.onFilterChange(opts);
+        }
+    }
+
     /**
      * Gets triggered after changing the value of a record field.
      * E.g. myRecord.foo = 'bar';
@@ -371,28 +420,30 @@ class Store extends Base {
     }
 
     /**
-     * @param {Object} opts
+     * @param {Object} opts={}
      * @param {String} opts.direction
      * @param {String} opts.property
      */
     sort(opts={}) {
         let me = this;
 
-        if (me.remoteSort) {
-            // todo
-        } else {
-            // console.log('sort', opts.property, opts.direction, me.configsApplied);
-
-            if (me.configsApplied) {
-                if (opts.direction) {
-                    me.sorters = [{
-                        direction: opts.direction,
-                        property : opts.property
-                    }];
-                } else {
+        me._currentPage = 1; // silent update
+
+        if (me.configsApplied) {
+            if (opts.direction) {
+                me.sorters = [{
+                    direction: opts.direction,
+                    property : opts.property
+                }];
+            } else {
+                if (!me.remoteSort) {
                     me.startUpdate();
                     me.clear();
-                    me.sorters = [];
+                }
+
+                me.sorters = [];
+
+                if (!me.remoteSort) {
                     me.add([...me.initialData]);
                     me.endUpdate();
                     me.fire('sort');

package/src/main/addon/Mwc.mjs

@@ -49,7 +49,7 @@ class Mwc extends Base {
         if (Neo.config.environment === 'development') {
             import(
                 /* webpackIgnore: true */
-                'https://unpkg.com/@material/mwc-button@0.23.0-canary.78b1eaac.0/mwc-button.js?module'
+                'https://unpkg.com/@material/mwc-button@0.26.1/mwc-button.js?module'
             );
         } else {
             // dist/development & dist/production
@@ -64,7 +64,7 @@ class Mwc extends Base {
         if (Neo.config.environment === 'development') {
             import(
                 /* webpackIgnore: true */
-                'https://unpkg.com/@material/mwc-textfield@0.23.0-canary.fe7cca31.0/mwc-textfield.js?module'
+                'https://unpkg.com/@material/mwc-textfield@0.26.1/mwc-textfield.js?module'
             );
         } else {
             // dist/development & dist/production

package/src/table/header/Button.mjs

@@ -178,12 +178,10 @@ class Button extends BaseButton {
             return;
         }
 
-        if (me.mounted) {
-            me.fire('sort', {
-                direction: value,
-                property : me.dataField
-            });
-        }
+        me.mounted && me.fire('sort', {
+            direction: value,
+            property : me.dataField
+        });
     }
 
     /**
@@ -243,9 +241,7 @@ class Button extends BaseButton {
      *
      */
     destroy(...args) {
-        if (this.filterField) {
-            this.filterField.destroy();
-        }
+        this.filterField?.destroy();
 
         super.destroy(...args);
     }
@@ -378,7 +374,7 @@ class Button extends BaseButton {
 
                 filters.push({
                     property: me.dataField,
-                    operator: operator,
+                    operator,
                     value   : null,
                     ...me.filterConfig
                 });
@@ -415,7 +411,7 @@ class Button extends BaseButton {
                 filters.push({
                     property: me.dataField,
                     operator: 'like',
-                    value   : value,
+                    value,
                     ...me.filterConfig
                 });
 

package/src/table/header/Toolbar.mjs

@@ -87,7 +87,7 @@ class Toolbar extends BaseToolbar {
             // todo: only add px if number
             if (item.maxWidth) {style.maxWidth = item.maxWidth + 'px'}
             if (item.minWidth) {style.minWidth = item.minWidth + 'px'}
-            if (item.width)    {style.width    = item.width + 'px'}
+            if (item.width)    {style.width    = item.width    + 'px'}
 
             if (item.dock) {
                 item.vdom.cls = ['neo-locked'];

package/src/toolbar/Paging.mjs

@@ -237,6 +237,8 @@ class Paging extends Toolbar {
     onStoreLoad() {
         let me = this;
 
+        me.currentPage = me.store.currentPage;
+
         me.updateNavigationButtons();
         me.updatePagesText();
         me.updateTotalText();