docs/modules/admin/pages/staff_client-column_filters.adoc

   1 = Angular Column Filters =
   2 :toc:
   3
   4 indexterm:[Column Filters]
   5 indexterm:[Angular]
   6
   7 As of 3.4, the Angular eg-grid has been enhanced by adding a new per-column filtering widget with many new features. This widget allows column headers as well as the filter bar to remain visible, or frozen, at the top of the screen if one scrolls down the grid.
   8
   9 image::media/filters.png[Example of column header filters]
  10
  11 Various column filters can be used in combination with one another to provide a highly specific list.
  12
  13 For text-based columns, the filtering provided in this widget is case-sensitive by default. Future development could add a trigram index on selected columns as needed in order to permit case-insensitive filtering on those columns. Fully case-insensitive filtering can result in speed issues, particularly where large database tables are involved, and it is advised that future developers balance the needs of case-insensitive search with potential performance concerns.
  14
  15 Each column in the filter bar has an *Operator Button* and an *Entry Box*. The Operator Button is shown on the left in the image below, and the Entry Box on the right.
  16
  17 image::media/operator.png[Operator Button]
  18
  19 If you select the *Operator Button* you will see that each column also has an *Apply Filter* and a *Clear Filter* button.
  20
  21 image::media/applyclear_buttons.png[Apply Filter and Clear Filter Buttons]
  22
  23 To apply a filter, enter text, date, or numeric value in the *Entry Box* then press Enter or select Apply Filter. The type of entry will depend on which column type is being used. Most columns use a default operator of _Is exactly_. For columns using a combobox, selector, or Boolean value, the filter will be applied upon selection of a value and you do not need to press Enter or select Apply Filter.
  24
  25 Operator options are different depending on the column type.
  26
  27 The example below shows the entry box with a value of “Car” and the Operator selected is _Starts with_.
  28
  29 image::media/filter_startswith.png[Example of Starts With filter]
  30
  31 The results of this filter are shown below. A column with a filter in place will show the Operator Button styled blue.
  32
  33 image::media/filter_results_startswith.png[Results of Starts With filter]
  34
  35 Columns which use a text type have operators for:
  36
  37 * Is exactly
  38 * Is not
  39 * Contains
  40 * Does not contain
  41 * Starts with
  42 * Ends with
  43 * Exists
  44 * Does not exist
  45 * Is less than
  46 * Is greater than
  47 * Is less than or equal to
  48 * Is greater than or equal to
  49
  50 Columns which use a date or numeric type have operators for:
  51
  52 * Is exactly
  53 * Is not
  54 * Exists
  55 * Does not exist
  56 * Is less than
  57 * Is greater than
  58 * Is less than or equal to
  59 * Is greater than or equal to
  60
  61 For both of the above operator sets, _Exists_ indicates a value that is not NULL and _Does not exist_ indicates a value that is NULL.
  62
  63 Date columns also have a _Between_ operator.
  64
  65 Columns which are Boolean have operators for:
  66
  67 * Any
  68 * True
  69 * False
  70
  71 Columns which use an Organizational Unit combobox have operators for _Is (or includes)_ and _Is not (or excludes)_. This filter also includes the ability to select Organizational Unit ancestors and/or descendants as part of the filter. The combobox will accept typeahead entry and also will show an Organization Unit dropdown if you click in the entry box.
  72
  73 image::media/orgunit_filter.png[Organizational Unit Filter]
  74
  75 NOTE: Be aware that when using Operator types such as _Contains_, _Starts with_, or _Ends with_ there is a risk of invoking a full table scan and thus the possibility of a noticeable slowness in retrieval. This risk is less likely for _Starts with_, as many text columns already have database indexes that lend themselves to left-anchored searches.
  76
  77 As of this writing, columns with a date data type will only accept typed entry in YYYY-MM-DD format and do not honor the date.format Organizational Unit Setting. This is a known bug. If an invalid date is entered into the Entry Box, the box will have red styling on the left to indicate this as shown in the image below.
  78
  79 image::media/incorrect_date.png[Invalid Date Entry]
  80
  81 To clear a filter, select the *Clear Filter* button. You may also delete the value in the entry box and press Enter if in a text column -- other columns do not require Enter, as noted above.
  82
  83 There is also a *Remove Filters* button available which will remove all currently applied filters in the grid.
  84
  85 image::media/removefilters.png[Remove All Filters]
  86
  87 Clicking a column header will sort the column by ascending value, and show an up arrow in the column header. Clicking the header a second time will sort by descending value, and show a down arrow in the column header. A column sorted ascending is shown below.
  88
  89 image::media/asc_sort.png[Column sort by ascending values]
  90
  91 As part of this project, several improvements were made to existing Angular widgets to support the grid filtering feature:
  92
  93 * The date selector now has better visual styling.
  94 * The date selector now supports hitting the enter key to enable an action once a date has been entered.
  95 * The date selector now highlights when an incorrectly-formatted date has been entered by the user.
  96 * The date selector and org unit selector widgets now offer methods for code to readily reset their states and fetch the current entered value.
  97 * The patron date of birth field could be incorrectly displayed by the Angular client; this is now fixed.