feat: Refactor DevRank Controls: Split Search & Reorder Fields (#9057)

Author: tobiu

apps/devrank/store/Contributors.mjs

@@ -1,16 +1,47 @@
-import Contributor from '../model/Contributor.mjs';
-import Store       from '../../../src/data/Store.mjs';
+import ContributorModel from '../model/Contributor.mjs';
+import Store            from '../../../src/data/Store.mjs';
 
+/**
+ * @class DevRank.store.Contributors
+ * @extends Neo.data.Store
+ */
 class Contributors extends Store {
     static config = {
+        /**
+         * @member {String} className='DevRank.store.Contributors'
+         * @protected
+         */
         className: 'DevRank.store.Contributors',
-        model    : Contributor,
+        /**
+         * @member {Neo.data.Model} model=ContributorModel
+         */
+        model: ContributorModel,
+        /**
+         * @member {String} keyProperty='login'
+         */
         keyProperty: 'login',
-        autoLoad : true,
-        url      : '../../apps/devrank/resources/users.json',
-        sorters  : [
+        /**
+         * @member {Boolean} autoLoad=true
+         */
+        autoLoad: true,
+        /**
+         * @member {Object[]} filters
+         */
+        filters: [
+            {property: 'location', operator: 'like', value: null},
+            {property: 'login',    operator: 'like', value: null},
+            {property: 'name',     operator: 'like', value: null}
+        ],
+        /**
+         * @member {Object[]} sorters
+         */
+        sorters: [
             {property: 'total_contributions', direction: 'DESC'}
-        ]
+        ],
+        /**
+         * @member {String} url='../../apps/devrank/resources/users.json'
+         */
+        url: '../../apps/devrank/resources/users.json'
     }
 }
 

apps/devrank/view/ControlsContainer.mjs

@@ -40,21 +40,33 @@ class ControlsContainer extends Container {
                 layout: 'vbox',
 
                 items: [{
+                    module       : Country,
+                    clearable    : true,
+                    labelPosition: 'inline',
+                    labelText    : 'Country',
+                    listeners    : {change: 'up.onFilterChange'},
+                    name         : 'location',
+                    showFlags    : true,
+                    style        : {marginTop: '.3em'},
+                    width        : 200
+                }, {
                     ntype        : 'textfield',
                     clearable    : true,
                     editable     : true,
                     labelPosition: 'inline',
-                    labelText    : 'Search User',
-                    listeners    : {change: 'up.onSearchFieldChange'},
-                    name         : 'search',
+                    labelText    : 'Username',
+                    listeners    : {change: 'up.onFilterChange'},
+                    name         : 'login',
                     style        : {marginTop: '.3em'},
                     width        : 200
                 }, {
-                    module       : Country,
+                    ntype        : 'textfield',
                     clearable    : true,
+                    editable     : true,
                     labelPosition: 'inline',
-                    labelText    : 'Country',
-                    showFlags    : true,
+                    labelText    : 'Fullname',
+                    listeners    : {change: 'up.onFilterChange'},
+                    name         : 'name',
                     style        : {marginTop: '.3em'},
                     width        : 200
                 }, {
@@ -142,12 +154,8 @@ class ControlsContainer extends Container {
     /**
      * @param {Object} data
      */
-    async onSearchFieldChange(data) {
-        let me = this;
-
-        // Simple single-field filter for now
-        // We can expand this to search multiple fields if needed
-        me.grid.store.getFilter('login').value = data.value;
+    onFilterChange(data) {
+        this.grid.store.getFilter(data.component.name).value = data.value
     }
 
     /**