From af7ffa3878f2a600f0b119c50cf707adaf4605e8 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 16:48:03 -0800
Subject: [PATCH] Allow date dropdowns to use new formatter

---
 .../date-dropdown.component.html              |  4 ++--
 .../date-dropdown/date-dropdown.component.ts  | 22 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 90cdc134e..2cb0749ac 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -20,7 +20,7 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
                     [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
@@ -43,7 +43,7 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
                     [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index e21b28312..9f74a49ad 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -4,6 +4,7 @@ import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { SettingsService } from 'src/app/services/settings.service';
+import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter';
 
 export interface DateSelection {
@@ -25,9 +26,11 @@ const LAST_YEAR = 3
   ]
 })
 export class DateDropdownComponent implements OnInit, OnDestroy {
+  private settings: SettingsService
 
   constructor(settings: SettingsService) {
-    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
+    this.settings = settings
+    this.datePlaceHolder = this.settings.getLocalizedDateInputFormat()
   }
 
   quickFilters = [
@@ -110,6 +113,23 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
   }
 
+  onFocusOut() {
+    this.dateAfter = this.maybePadString(this.dateAfter)
+    this.dateBefore = this.maybePadString(this.dateBefore)
+  }
+
+  maybePadString(value): string {
+    // Allow dates to be specified without 'padding' e.g. 2/3
+    if (!value || value.length == 10) return value; // null or already formatted
+    if ([',','.','/','-'].some(sep => value.includes(sep))) {
+      let valArr = value.split(/[\.,\/-]+/)
+      valArr = valArr.map(segment => segment.padStart(2,'0'))
+      let dateFormatter = new LocalizedDateParserFormatter(this.settings)
+      value = dateFormatter.preformatDateInput(valArr.join(''))
+    }
+    return value
+  }
+
   clearBefore() {
     this.dateBefore = null
     this.onChange()