From c73c6cbca9780b77f35ca9b37313f05290e6bfac Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Thu, 11 Jul 2024 08:32:25 +0200
Subject: [PATCH] fix: time interval simple input sync

Sync was broken in 587679a35d3ce5f5622034cc161df8f02f0dc1a5

Fixes #377
---
 CHANGELOG.md                              |  1 +
 app/scripts/components/datetime-picker.ts | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7be99f7bb..d62b75e2b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
 ### Fixed
 
 - News were sometimes not shown immediately after fetch
+- In Extended search, the time interval component was ignoring the simple input fields [#377](https://github.com/spraakbanken/korp-frontend/issues/377)
 
 ## [9.6.0] - 2024-05-27
 
diff --git a/app/scripts/components/datetime-picker.ts b/app/scripts/components/datetime-picker.ts
index 6630c9e7d..91254b853 100644
--- a/app/scripts/components/datetime-picker.ts
+++ b/app/scripts/components/datetime-picker.ts
@@ -1,5 +1,5 @@
 /** @format */
-import angular, { type IComponentController, type IScope } from "angular"
+import angular, { type ui, type IComponentController, type IScope } from "angular"
 import { html } from "@/util"
 import moment, { type Moment } from "moment"
 
@@ -20,7 +20,7 @@ angular.module("korpApp").component("datetimePicker", {
                         uib-datepicker
                         class="well well-sm"
                         ng-model="date"
-                        datepicker-options="$ctrl.datepickerOptions"
+                        datepicker-options="datepickerOptions"
                     ></div>
 
                     <div class="flex items-center justify-center">
@@ -51,17 +51,18 @@ angular.module("korpApp").component("datetimePicker", {
         function ($scope: DatetimePickerScope) {
             const $ctrl = this as DatetimePickerController
 
-            $ctrl.$onInit = () => {
+            $scope.datepickerOptions = { startingDay: 1 }
+
+            $ctrl.$onChanges = (changes) => {
                 // Sync incoming values to internal model
-                $scope.date = $ctrl.dateModel
-                $scope.time = $ctrl.timeModel
+                if (changes.dateModel) $scope.date = changes.dateModel.currentValue
+                if (changes.timeModel) $scope.time = changes.timeModel.currentValue
 
-                $ctrl.datepickerOptions = {
-                    minDate: $ctrl.minDate,
-                    maxDate: $ctrl.maxDate,
-                    initDate: $ctrl.minDate,
-                    startingDay: 1,
+                if (changes.minDate) {
+                    $scope.datepickerOptions.minDate = changes.minDate.currentValue
+                    $scope.datepickerOptions.initDate = changes.minDate.currentValue
                 }
+                if (changes.maxDate) $scope.datepickerOptions.maxDate = changes.maxDate.currentValue
             }
 
             // Report changes from datepicker/timepicker upwards
@@ -100,5 +101,6 @@ type DatetimePickerScope = IScope & {
     date: Date
     time: Date
     combined: Moment
+    datepickerOptions: ui.bootstrap.IDatepickerConfig
     handleClick: (event: JQuery.ClickEvent) => void
 }