From 1ddad84985f918fb97b745a406f51c00f4f0d9e4 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 13 Dec 2020 11:23:21 -0800
Subject: [PATCH] Fix visual clearing of date field

---
 .../filter-dropdown-date.component.html       |  2 +-
 .../filter-dropdown-date.component.ts         | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
index a80e1c491..0a3dc7057 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html
@@ -1,6 +1,6 @@
   <div class="btn-group" ngbDropdown role="group">
   <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>
-    <ng-container *ngIf="_dateBefore || _dateAfter">
+    <ng-container *ngIf="dateBefore || dateAfter">
       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
       </svg>
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
index 206dbe2c3..41cf97bb9 100644
--- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
+++ b/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts
@@ -38,20 +38,24 @@ export class FilterDropdownDateComponent {
 
   ngOnChanges(changes: SimpleChange) {
     // this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
-    let dateString: string
+    let dateString: string = ''
     let dateAfterChange: SimpleChange = changes['dateAfter']
     let dateBeforeChange: SimpleChange = changes['dateBefore']
 
-    if (dateAfterChange && dateAfterChange.currentValue && this.dpAfter) {
-      let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
+    if (this.dpBefore && this.dpAfter) {
       let dpAfterElRef: ElementRef = this.dpAfter['_elRef']
-      dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
-      dpAfterElRef.nativeElement.value = dateString
-    } else if (dateBeforeChange && dateBeforeChange.currentValue && this.dpBefore) {
-      let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
       let dpBeforeElRef: ElementRef = this.dpBefore['_elRef']
-      dateString = `${dateBeforeChange.currentValue.year}-${dateBeforeChange.currentValue.month.toString().padStart(2,'0')}-${dateBeforeChange.currentValue.day.toString().padStart(2,'0')}`
-      dpBeforeElRef.nativeElement.value = dateString
+
+      if (dateAfterChange && dateAfterChange.currentValue) {
+        let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct
+        dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}`
+      } else if (dateBeforeChange && dateBeforeChange.currentValue) {
+        let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct
+        dateString = `${dateBeforeChange.currentValue.year}-${dateBeforeChange.currentValue.month.toString().padStart(2,'0')}-${dateBeforeChange.currentValue.day.toString().padStart(2,'0')}`
+      } else {
+        dpAfterElRef.nativeElement.value = dateString
+        dpBeforeElRef.nativeElement.value = dateString
+      }
     }
   }