From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Mon, 1 Apr 2019 21:37:37 +0000 (-0700)
Subject: LP1816475: More work on the datetimepicker
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=44b1aa6a103757a61256d29da2348c0a3e3dff0d;p=working%2FEvergreen.git

LP1816475: More work on the datetimepicker

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---

diff --git a/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.html b/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.html
index 90a777cd55..8a6e8ca01a 100644
--- a/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.html
@@ -6,7 +6,8 @@
     class="form-control"
     [placeholder]="initialIso"
     [(ngModel)]="stringVersion"
-    (blur)="blurred($event)"
+    (blur)="handleInputChanged($event)"
+    (change)="handleInputChanged($event)"
     #dtPicker="ngbPopover"
     [ngbPopover]="dt"
     placement="bottom"
@@ -34,7 +35,7 @@
     </div>
     <ngb-datepicker
       [(ngModel)]="dateModel"
-      (ngModelChange)="modelChanged()"
+      (select)="handleDateChanged($event)"
       [footerTemplate]="time">
     </ngb-datepicker>
   </div>
@@ -42,7 +43,7 @@
 <ng-template #time>
   <ngb-timepicker name="time"
     [(ngModel)]="timeModel" [meridian]="true"
-    (ngModelChange)="modelChanged()"
+    (ngModelChange)="handleTimeChanged()"
     [spinners]="true"
     [hourStep]="1"
     [minuteStep]="minuteStep || 30" >
@@ -50,3 +51,4 @@
   <span *ngIf="showTZ" class="badge badge-info">{{ timezone || 'America/Los_Angeles'}}</span>
   <button i18n class="btn btn-success" (click)="dtPicker.close()">Choose time</button>
 </ng-template>
+
diff --git a/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.ts b/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.ts
index 825434c9f4..28205a87cf 100644
--- a/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/datetime-select/datetime-select.component.ts
@@ -35,46 +35,50 @@ export class DateTimeSelectComponent implements OnInit {
     }
 
     ngOnInit() {
-        const start = this.initialIso ? Moment(this.initialIso, this.timezone) : Moment(new Date(), this.timezone);
-        this.setDefaultDate(start);
-        this.setDefaultTime(start);
+        const start = this.initialIso ? Moment.tz(this.initialIso, Moment.ISO_8601, this.timezone) : Moment.tz([], this.timezone);
+        this.stringVersion = this.format.transform({value: start, datatype: 'timestamp', datePlusTime: true});
+        this.setDatePicker(start);
+        this.setTimePicker(start);
 
-        if (this.initialIso) {
-            this.modelChanged(null);
-        }
     }
 
-    setDefaultDate(start: any) {
-        this.dateModel = { year: start.year(), month: start.month() + 1, day: start.date() };
+    setDatePicker(current: Moment) {
+        this.dateModel = {
+            year: current.tz(this.timezone).year(),
+            month: current.tz(this.timezone).month() + 1,
+            day: current.tz(this.timezone).date() };
     }
 
-    setDefaultTime(start: any) {
-        const remainder = this.minuteStep - start.minute() % this.minuteStep,
-            final = Moment(start, this.timezone).add(remainder, 'minutes');
-
-        // Seed time model with current, rounding up to nearest minuteStep (does roll hour over if needed)
-        this.timeModel = { hour: final.hour(), minute: final.minute(), second: 0 };
+    setTimePicker(current: Moment) {
+        this.timeModel = {
+            hour: current.tz(this.timezone).hour(),
+            minute: current.tz(this.timezone).minute(),
+            second: 0 };
     }
 
+    handleDateChanged($event) {
+        const newDate = Moment.tz([$event.year, ($event.month - 1), $event.day,
+            this.timeModel.hour, this.timeModel.minute, 0], this.timezone);
+        this.stringVersion = this.format.transform({value: newDate, datatype: 'timestamp', datePlusTime: true});
+        this.onChangeAsMoment.emit(newDate);
+        this.onChangeAsIso.emit(newDate.toISOString());
+    }
 
-    blurred(event) {
-        this.modelChanged(event);
+    handleTimeChanged(event) {
+        const newDate = Moment.tz([this.dateModel.year, (this.dateModel.month - 1), this.dateModel.day,
+            this.timeModel.hour, this.timeModel.minute, 0], this.timezone);
+        this.stringVersion = this.format.transform({value: newDate, datatype: 'timestamp', datePlusTime: true});
+        this.onChangeAsMoment.emit(newDate);
+        this.onChangeAsIso.emit(newDate.toISOString());
     }
 
-    modelChanged(event) {
+    handleInputChanged(event) {
         let newDate: Moment;
 
-        if (event) { // if the change came from the input field
+        if (event) {
             newDate = this.format.momentizeDateTimeString(this.stringVersion, this.timezone);
-        } else {
-            newDate = Moment(new Date(this.dateModel.year, (this.dateModel.month - 1), this.dateModel.day,
-                this.timeModel.hour, this.timeModel.minute, this.timeModel.second), this.timezone);
-        }
-
-        if (newDate && !isNaN(newDate)) {
-            // Set the input field to the current value
-            this.stringVersion = this.format.transform({value: newDate, datatype: 'timestamp', datePlusTime: true});
-            // Update form passed in view value
+            this.setDatePicker(newDate);
+            this.setTimePicker(newDate);
             this.onChangeAsMoment.emit(newDate);
             this.onChangeAsIso.emit(newDate.toISOString());
         }
diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index a1c728e993..b758fd4b73 100644
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -52,6 +52,7 @@
                 domId="{{idPrefix}}-{{field.name}}"
                 (onChangeAsMoment)="field.validate(field.name, $event, record)"
                 [validatorError]="field.validatorError"
+                i18n-validatorError
                 [readOnly]="field.readOnly"
                 initialIso="{{record[field.name]()}}">
               </eg-datetime-select>