Feature Request: Enhanced Filtering Functions (Google Adwords Style Filter-Presets, Server-Side Bulk Editing & more)

[thebarty]

Hi guys,

I think the topic of "filtering table data" is a really important one for a great user-interface. This request is actually use-case linked to the Feature Request "Toggable Columns" (https://github.com/clevertech/YiiBooster/issues/145) as the user might want to set a filter on a column that is actually toggled to NOT being displayed. So it is a good idea to display the filter section as shown in the screenshots above the data-table (and not directly within the table-filters itself).

Furthermore it would be totally awesome to support bulk/mass edits for the selected items (see http://yii-booster.clevertech.biz/extended-grid.html "Bulk Actions").

The best reference for a great filtering-implementation I am aware of is the "Google Adwords" UI. Please took at the screenshots below to see how they did it.

The enhanced-filter-module should support the following functions:

COLUMN-TYPES:

• numbers (with compare types " = ", " > ", " < "
• string (with compare types "contains", "does not contain", "is", "starts with", "ends with")
• date (with compare types "after", "on", "before")
• date-range (with date-range picker)
• options (data-source: an array of options, compare-type: single-select & multi-select)

USER-INTERFACE

• ability to configure&appy a filter
• ability to save a configured filter as a preset
• ability to select a filter from a preset-list
• ability to trigger bulk/mass actions for the selected items

INTRODUCTION - this is how the google guys did it

Table Overview (no filter selected)

Active Filter-Section on top of the Data-Table

IN DETAIL - this is how the google guys did it

1. On top of the data-table there is a BUTTON "filter" (showing presets and the "create new filter" action:

2. When the user hits "create new filter" - A YELLOW CONFIGURATION AREA opens upon the data-table giving the user the option to configure his filter:

3. When configuring the filter the user can first SELECT THE COLUMN to apply a filter to. The dropdown-list contains the tabel-data column-names.

4. AFTER selecting a column the module will LOAD THE LINKED "compare type" suitable for the column type ( see the "COLUMN TYPE" list on top of this topic)

5. The third column shows how google does the COLUMN TYPE "Options"

6. The fourth column shows how google does the compare types for a column type of "Date"

7. The third column shows how google does the COLUMN TYPE "Options"

8. Date-Picker in action for a column-type "Date"

9. When selecting "save filter" - a text-input shows up for the user to input the filter-name

10. After saving the filter, the user can now select the filter from the "filter-button"