[open-ils-commits] [GIT] Evergreen ILS branch master updated. e0e847784da1539a6644fcc711a3bda2240f57ee

[Evergreen Git]

This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "Evergreen ILS".

The branch, master has been updated
       via  e0e847784da1539a6644fcc711a3bda2240f57ee (commit)
      from  e85fb2909381632ab114f0d923aeda5089e37467 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.

- Log -----------------------------------------------------------------
commit e0e847784da1539a6644fcc711a3bda2240f57ee
Author: Galen Charlton <gmc at equinoxinitiative.org>
Date:   Mon Mar 25 15:21:46 2019 -0400

    LP#1831780: various improvements to the Angular date-select widget
    
    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()
    
    Sponsored-by: MassLNC
    Sponsored-by: Georgia Public Library Service
    Sponsored-by: Indiana State Library
    Sponsored-by: CW MARS
    Sponsored-by: King County Library System
    
    Signed-off-by: Galen Charlton <gmc at equinoxinitiative.org>
    Signed-off-by: Bill Erickson <berickxx at gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.css b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.css
new file mode 100644
index 0000000000..277f1314ce
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.css
@@ -0,0 +1,3 @@
+.eg-date-select {
+    max-width: 11em;
+}
diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
index 7e65f7628e..41425339a3 100644
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
@@ -1,16 +1,18 @@
 
-<div class="input-group">
-  <input
+<div class="input-group eg-date-select form-validated">
+  <input 
     class="form-control"
     ngbDatepicker
     #datePicker="ngbDatepicker"
     [attr.id]="domId.length ? domId : null"
     placeholder="yyyy-mm-dd"
     class="form-control"
+    container="body"
     name="{{fieldName}}"
     [disabled]="_disabled"
     [required]="required"
     [(ngModel)]="current"
+    (keyup.enter)="onDateEnter()"
     (dateSelect)="onDateSelect($event)"/>
   <div class="input-group-append">
     <button class="btn btn-outline-secondary" [disabled]="_disabled"
diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
index 625629026f..077058a6e8 100644
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
@@ -9,7 +9,8 @@ import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'eg-date-select',
-  templateUrl: './date-select.component.html'
+  templateUrl: './date-select.component.html',
+  styleUrls: ['date-select.component.css']
 })
 export class DateSelectComponent implements OnInit {
 
@@ -30,11 +31,35 @@ export class DateSelectComponent implements OnInit {
     @Output() onChangeAsDate: EventEmitter<Date>;
     @Output() onChangeAsIso: EventEmitter<string>;
     @Output() onChangeAsYmd: EventEmitter<string>;
+    @Output() onCleared: EventEmitter<string>;
+
+    // convenience methods to access current selected date
+    currentAsYmd(): string {
+        if (this.current == null) { return null; }
+        if (!this.isValidDate(this.current)) { return null; }
+        return `${this.current.year}-${String(this.current.month).padStart(2, '0')}-${String(this.current.day).padStart(2, '0')}`;
+    }
+    currentAsIso(): string {
+        if (this.current == null) { return null; }
+        if (!this.isValidDate(this.current)) { return null; }
+        const ymd = `${this.current.year}-${String(this.current.month).padStart(2, '0')}-${String(this.current.day).padStart(2, '0')}`;
+        const date = this.localDateFromYmd(ymd);
+        const iso = date.toISOString();
+        return iso;
+    }
+    currentAsDate(): Date {
+        if (this.current == null) { return null; }
+        if (!this.isValidDate(this.current)) { return null; }
+        const ymd = `${this.current.year}-${String(this.current.month).padStart(2, '0')}-${String(this.current.day).padStart(2, '0')}`;
+        const date = this.localDateFromYmd(ymd);
+        return date;
+    }
 
     constructor() {
         this.onChangeAsDate = new EventEmitter<Date>();
         this.onChangeAsIso = new EventEmitter<string>();
         this.onChangeAsYmd = new EventEmitter<string>();
+        this.onCleared = new EventEmitter<string>();
     }
 
     ngOnInit() {
@@ -55,8 +80,21 @@ export class DateSelectComponent implements OnInit {
         }
     }
 
+    isValidDate(dt: NgbDateStruct): dt is NgbDateStruct {
+        return (<NgbDateStruct>dt).year !== undefined;
+    }
+
+    onDateEnter() {
+        if (this.current === null) {
+            this.onCleared.emit('cleared');
+        } else if (this.isValidDate(this.current)) {
+            this.onDateSelect(this.current);
+        }
+        // ignoring invalid input for now
+    }
+
     onDateSelect(evt) {
-        const ymd = `${evt.year}-${evt.month}-${evt.day}`;
+        const ymd = `${evt.year}-${String(evt.month).padStart(2, '0')}-${String(evt.day).padStart(2, '0')}`;
         const date = this.localDateFromYmd(ymd);
         const iso = date.toISOString();
         this.onChangeAsDate.emit(date);
@@ -71,6 +109,15 @@ export class DateSelectComponent implements OnInit {
         return new Date(
             Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
     }
+
+    reset() {
+        this.current = {
+            year: null,
+            month: null,
+            day: null
+        };
+    }
+
 }
 
 
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 10424f2722..0ffd6b576a 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -89,6 +89,10 @@ h5 {font-size: .95rem}
     line-height: inherit;
 }
 
+.input-group .mat-icon-in-button {
+    font-size: .88rem !important; /* useful for buttons that cuddle up with inputs */
+}
+
 .material-icons {
   /** default is 24px which is pretty chunky */
   font-size: 22px;

-----------------------------------------------------------------------

Summary of changes:
 .../share/date-select/date-select.component.css    |  3 ++
 .../share/date-select/date-select.component.html   |  6 ++-
 .../app/share/date-select/date-select.component.ts | 51 +++++++++++++++++++++-
 Open-ILS/src/eg2/src/styles.css                    |  4 ++
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/share/date-select/date-select.component.css


hooks/post-receive
-- 
Evergreen ILS