From 1379c039b889dbd151ad9abb20b46d7339188716 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 13 Dec 2020 02:03:59 -0800
Subject: [PATCH] Workaround for infinte loop breaks two way binding for date
 picker initialization

---
 .../filter-dropdown-date.component.ts         | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

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 abe15072e..206dbe2c3 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
@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, OnChanges, SimpleChange } from '@angular/core';
 import { FilterRule } from 'src/app/data/filter-rule';
 import { ObjectWithId } from 'src/app/data/object-with-id';
-import { NgbDate, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-filter-dropdown-date',
@@ -25,6 +25,9 @@ export class FilterDropdownDateComponent {
   @Output()
   dateAfterSet = new EventEmitter()
 
+  @ViewChild('dpAfter') dpAfter: NgbDatepicker
+  @ViewChild('dpBefore') dpBefore: NgbDatepicker
+
   _dateBefore: NgbDateStruct
   _dateAfter: NgbDateStruct
 
@@ -33,6 +36,25 @@ export class FilterDropdownDateComponent {
     return NgbDate.from({year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate()})
   }
 
+  ngOnChanges(changes: SimpleChange) {
+    // this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
+    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
+      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
+    }
+  }
+
   setDateQuickFilter(range: any) {
     this._dateAfter = this._dateBefore = undefined
     let date = new Date()