angular: improvements to date-select

Bug #1831780 reported by Galen Charlton on 2019-06-05
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Evergreen
Wishlist
Unassigned

Bug Description

This bug aggregates various improvements to the Angular date-select component:

    Styling
    -------
    - the widget is now narrower
    - the widget now enables form validation styles; in particular,
      entry of an incorrectly-formatted date is now highlighted
    - the calendar drop-down is now allowed to overflow the containing
      element when expanded, making it easier to embed the date
      selector in other controls
    - the calendar button (and any material icons button that's part of
      an input group) now has the same default font size as main text,
      making the overall date-select look cleaner

    API
    ---
    - add a reset() method
    - hitting enter in the text box can now triggers emitting date
      change events
    - a new onCleared event is emitted if the suer hits enter on an
      empty input
    - onChangeAsYmd() now pads month and day to two digits apiece,
      making the result conform to ISO 8601 and thus more easily
      plugged into queries.
    - adds the following methods to retrieve the current date; these
      are meant to be used via local template references in parent
      templates:

      currentAsYmd()
      currentAsIso()
      currentAsDate()

This is part of a project to prepare for converting some acquisitions interfaces to Angular. Work on this bug was sponsored by MassLNC, Georgia Public Library Service, Indiana State Library, CW MARS, and King County Library System.

Galen Charlton (gmc) on 2019-06-05
Changed in evergreen:
milestone: none → 3.4-beta1
Galen Charlton (gmc) wrote :

Patch(es) for this are available as part of the following branch:

working/collab/gmcharlt/angular-widget-improvements-2019-06
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/gmcharlt/angular-widget-improvements-2019-06

tags: added: angular pullrequest
Jane Sandberg (sandbej) wrote :

Thanks for this patch, Galen. These are good changes. The container="body" change helped with overflow issues in cases like this:

<ngb-accordion>
  <ngb-panel title="1">
    <ng-template ngbPanelContent>
      <eg-date-select></eg-date-select>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

However, it also seems to have introduced an issue when eg-date-select is embedded in a modal (such as the fmeditor). For example, see Administration > Server Administration > Hard Due Date Changes > New Hard Due Date. Somehow, we need to have the popup attach nearby the input in the DOM in cases like these.

Galen Charlton (gmc) wrote :

Thanks for the catch, Jane!

It looks like the underlying z-index issue is fixed in ng-bootstrap commit https://github.com/ng-bootstrap/ng-bootstrap/commit/00ee594f81079d56e3e7c47420a004625a4fd668, which is first available in ng-boostrap release 4.1.2.

Updating package.json to use ^4.1.2 for ng-bootstrap did not seem to immediately blow anything up and fixed the issue with embedding the date-picker in the modal. Consequently, I'm inclined to pull further on the string of updating ng-bootstrap, which I was planning to do anyway, rather than trying to play with managing the z-index in eg-date-select.

Galen Charlton (gmc) wrote :
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers