--- /dev/null
+= Angular Grid Tools & Infrastructure Improvements =
+:toc:
+
+indexterm:[Grids]
+indexterm:[Angular]
+
+The work for Sprint 0 of Acquisitions to Angular, merged as part of 3.4, created and improved several tools and infrastructure pieces that can be used throughout the Evergreen ILS.
+
+The Angular sandbox available at */eg2/en-US/staff/sandbox* has been updated to include working examples of grid results filtering, the IDL data source extensions to eg-combobox, and eg-help-popover.
+
+== Improvements to grid refresh after editing ==
+
+There is now an option for eg-grid to remember the user’s current place when paging through a grid, even after a refresh or edit. This option is available to all grids using eg-grid but requires developer action to enable for each existing grid enabled. New grids added in the course of future Angular Acquisitions projects will enable this option by default. If necessary for a specific grid, developers will remain able to specify that a grid forget the user’s place.
+
+== eg-combobox widget ==
+
+The eg-combobox widget has been extended to add options to automatically create a data source for IDL classes, reducing the amount of boilerplate code that developers need to write. In other words, these new options will allow retrieval from an IDL class by simply naming that class, as opposed to having to create a custom source.
+
+Developers can invoke this option for an eg-combobox by supplying an idlClass attribute, e.g.,
+
+----
+<eg-combobox
+ placeholder="Combobox with @idlClass = 'csp'"
+ [idlClass]="'csp'"
+ [asyncSupportsEmptyTermClick]="true">
+----
+
+In cases where a given data source is small, e.g., has a couple hundred entries at most, the eg-combobox widget now also has an option activated by the `asyncSupportsEmptyTermClick` property to allow the user to use a dropdown button to see initial results from a dynamic source without the need to enter text.
+
+== eg-help-popover widget ==
+
+A widget similar to the AngularJS egHelpPopover widget has been created for Angular. The popover can be accessed by selecting the question-mark icon, or with the keyboard by using tab to navigate to the icon and then pressing enter.
+
+== Cross-tab communications support ==
+
+The Angular sandbox page has been extended with an example for developers on how to use _BroadcastChannel_ to enable communications between related Evergreen browser tabs - specifically, between a tab (tab B) and the tab that opened it (tab A).
\ No newline at end of file
--- /dev/null
+= Angular Column Filters =
+:toc:
+
+indexterm:[Column Filters]
+indexterm:[Angular]
+
+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.
+
+image::media/filters.png[Example of column header filters]
+
+Various column filters can be used in combination with one another to provide a highly specific list.
+
+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.
+
+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.
+
+image::media/operator.png[Operator Button]
+
+If you select the *Operator Button* you will see that each column also has an *Apply Filter* and a *Clear Filter* button.
+
+image::media/applyclear_buttons.png[Apply Filter and Clear Filter Buttons]
+
+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.
+
+Operator options are different depending on the column type.
+
+The example below shows the entry box with a value of “Car” and the Operator selected is _Starts with_.
+
+image::media/filter_startswith.png[Example of Starts With filter]
+
+The results of this filter are shown below. A column with a filter in place will show the Operator Button styled blue.
+
+image::media/filter_results_startswith.png[Results of Starts With filter]
+
+Columns which use a text type have operators for:
+
+* Is exactly
+* Is not
+* Contains
+* Does not contain
+* Starts with
+* Ends with
+* Exists
+* Does not exist
+* Is less than
+* Is greater than
+* Is less than or equal to
+* Is greater than or equal to
+
+Columns which use a date or numeric type have operators for:
+
+* Is exactly
+* Is not
+* Exists
+* Does not exist
+* Is less than
+* Is greater than
+* Is less than or equal to
+* Is greater than or equal to
+
+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.
+
+Date columns also have a _Between_ operator.
+
+Columns which are Boolean have operators for:
+
+* Any
+* True
+* False
+
+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.
+
+image::media/orgunit_filter.png[Organizational Unit Filter]
+
+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.
+
+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.
+
+image::media/incorrect_date.png[Invalid Date Entry]
+
+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.
+
+There is also a *Remove Filters* button available which will remove all currently applied filters in the grid.
+
+image::media/removefilters.png[Remove All Filters]
+
+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.
+
+image::media/asc_sort.png[Column sort by ascending values]
+
+As part of this project, several improvements were made to existing Angular widgets to support the grid filtering feature:
+
+* The date selector now has better visual styling.
+* The date selector now supports hitting the enter key to enable an action once a date has been entered.
+* The date selector now highlights when an incorrectly-formatted date has been entered by the user.
+* The date selector and org unit selector widgets now offer methods for code to readily reset their states and fetch the current entered value.
+* The patron date of birth field could be incorrectly displayed by the Angular client; this is now fixed.
\ No newline at end of file
projects / evergreen-equinox.git / commitdiff
