Merge branch '32-gridwithfilter-go-button' into 'master'

Resolve "revisit the UI of the GridWithFilter"

Closes #32

See merge request !42

static/plugin_dbui/CHANGELOG

@@ -2,6 +2,10 @@
 
 HEAD
 
+   - Minor release
+   - Improve the user interface of the GridWithFilter component.
+     It is now possible to trigger the grid filtering by pressing th Go button.
+
 0.9.8.3 (Oct 2017)
    - Minor release.
    - Update linked comboBox to sort displayed values in alphabetic order.

static/plugin_dbui/VERSION

-0.9.8.2
\ No newline at end of file
+0.9.8.3
\ No newline at end of file

static/plugin_dbui/src/grid/Filter.js

@@ -46,6 +46,29 @@ Ext.define("Dbui.grid.Filter", {
         }
     },
 
+    /**
+     * @cfg{number} dateFieldBufferChange
+     * Reschedule the handler "onChange" after the specifed nunmber of
+     * milliseconds.  If the event fires again within that time,
+     * the original handler is not invoked, but the new handler
+     * is scheduled in its place. This parameter is used for fields:
+     * "numberfield", "textfield", "textarea" and "textareafield".
+     *
+     */
+     dateFieldBufferChange: 2000,
+
+    /**
+     * @cfg{number} textFieldBufferChange
+     * Reschedule the handler "onChange" after the specifed nunmber of
+     * milliseconds.  If the event fires again within that time,
+     * the original handler is not invoked, but the new handler
+     * is scheduled in its place. This parameter is used for fields:
+     * "datefield" and "timefield".
+     *
+     */
+     textFieldBufferChange: 1000,
+
+
     // Private object containing where clause related to the filter request.
     // this is used when running with a buffered store.
     filterConditions: {},
@@ -72,9 +95,6 @@ Ext.define("Dbui.grid.Filter", {
 
         // initialise the base class
         me.callParent(arguments);
-
-        // setup trigers
-        me.setTrigger();
     },
 
     // private method requires by the Ext JS component model
@@ -94,8 +114,11 @@ Ext.define("Dbui.grid.Filter", {
     /**
      * Bind the grid filter to the grid
      * @param {Ext.grid.Panel} grid
+     * @param {Boolean} onChange
+     * Grid filtering is activate as soon as one field of the selector
+     * change (true) or when the Go button is pressed (false)
      */
-    bind: function (grid) {
+    bind: function (grid, onChange) {
 
         "use strict";
 
@@ -105,6 +128,11 @@ Ext.define("Dbui.grid.Filter", {
 
         me.grid = grid;
 
+        // setup triggers when the content of one field is change
+        if (onChange) {
+            me.setTrigger();
+        }
+
         // clicking the reset button of the grid reset the filter's fields.
         if (buttons && buttons[0] && buttons[0].menu) {
             buttonReset = buttons[0].menu.getComponent("buttonReset");
@@ -249,6 +277,27 @@ Ext.define("Dbui.grid.Filter", {
         }
     },
 
+    /**
+     * Handler to filter the store by using field values
+     *
+     */
+    onGo: function() {
+
+        "use strict";
+        var me = this;
+
+        if (me.grid.remoteAction) {
+            Dbui.getFields(me).forEach(function (field) {
+                me.remoteFiltering(field);
+            });
+
+        } else {
+            Dbui.getFields(me).forEach(function (field) {
+                me.localFiltering(field);
+            });
+        }
+    },
+
     /**
      * Handler to reset the filter and the store content
      */
@@ -264,6 +313,9 @@ Ext.define("Dbui.grid.Filter", {
 
         // reset the grid
         me.grid.reset();
+
+        // focus on the first field
+        me.child("field").focus();
     },
 
     /**
@@ -349,7 +401,7 @@ Ext.define("Dbui.grid.Filter", {
             case "datefield":
             case "timefield":
                 field.on("change", me.onChange, me, {
-                    buffer: 1000
+                    buffer: me.dateFieldBufferChange
                 });
                 break;
 
@@ -358,7 +410,7 @@ Ext.define("Dbui.grid.Filter", {
             case "textarea":
             case "textareafield":
                 field.on("change", me.onChange, me, {
-                    buffer: 500
+                    buffer: me.textFieldBufferChange
                 });
                 break;
 

static/plugin_dbui/src/panel/GridWithFilter.js

@@ -15,10 +15,22 @@ Ext.define("Dbui.panel.GridWithFilter", {
         "Ext.LoadMask"
     ],
 
+    /**
+     * @cfg {Boolean}
+     * Filter the grid as soon as one field of the selector is changed
+     * otherwise when the Go button is pressed
+     */
+    filterOnChange: false,
+
     // private short cuts
     filter: null,
     grid: null,
 
+    // private key map
+    keyMap: {
+        ENTER: "onEnterKey"
+    },
+
     // Private properties for internationalization
     textLoad: "Loading...",
 
@@ -35,14 +47,22 @@ Ext.define("Dbui.panel.GridWithFilter", {
         // bind the filter to the grid
         me.filter = me.selectorPanel.child("xgridfilter");
         me.grid = me.mainPanel.child("xgrid");
-        me.filter.bind(me.grid);
+        me.filter.bind(me.grid, me.filterOnChange);
 
         // connect buttons
-        me.goButton.hide();
+        if (me.filterOnChange) {
+            me.keyMapEnabled = false;
+            me.goButton.hide();
+
+        } else {
+            me.goButton.on("click", me.filter.onGo, me.filter);
+        }
+
         me.resetButton.on("click", me.filter.onReset, me.filter);
 
         // collapse the selectorPanel
         me.selectorPanel.collapsed = true;
+        me.selectorPanel.on("expand", me.onSelectorExpand, me);
 
         // Mask the GridFilter during loading
         me.grid.getView().loadMask = Ext.create("Ext.LoadMask", {
@@ -57,9 +77,47 @@ Ext.define("Dbui.panel.GridWithFilter", {
 
         var me = this;
 
+        if (!me.filterOnChange) {
+            me.goButton.un("click", me.filter.onGo, me.filter);
+        }
+
+        me.selectorPanel.un("expand", me.onSelectorExpand, me);
         me.resetButton.un("click", me.filter.onReset, me.filter);
         me.callParent(arguments);
-    }
+    },
 
     // jshint strict: true
+
+    /**
+     * Handler to click on the Go button when the ENTER key is pressed
+     *
+     */
+    onEnterKey: function () {
+
+        "use strict";
+        var me = this;
+
+        // do it only when the panel is expanded but not collpased
+        if (!me.selectorPanel.getCollapsed()) {
+            me.goButton.click();
+        }
+    },
+
+    /**
+     * Handler to focus on the first field of the filter
+     * when the selector is expand
+     *
+     */
+    onSelectorExpand: function () {
+
+        "use strict";
+        var me = this,
+            firstField = me.filter.child("field");
+
+        if (Ext.isEmpty(firstField)) {
+            return;
+        }
+
+        firstField.focus();
+    }
 });
\ No newline at end of file