From a5f0e8070ae4e4518c697828849a365f6a0fe9bd Mon Sep 17 00:00:00 2001
From: Alexander Flenniken <alflennik@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:01:45 -0500
Subject: [PATCH] Implement target date modal improvements (#835)

* Implement target date modal improvements

* Add esc support to target date modal
---
 .../DataManagement/DataManagementRow/index.jsx     |  8 ++++----
 client/components/common/BasicModal/index.jsx      | 14 +++++++++++---
 .../common/UpdateTargetDateModal/index.jsx         |  8 +++++++-
 client/utils/formatter.js                          |  6 +++---
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/client/components/DataManagement/DataManagementRow/index.jsx b/client/components/DataManagement/DataManagementRow/index.jsx
index 0a98a0311..97ae52bdd 100644
--- a/client/components/DataManagement/DataManagementRow/index.jsx
+++ b/client/components/DataManagement/DataManagementRow/index.jsx
@@ -9,7 +9,7 @@ import {
 } from '../queries';
 import { LoadingStatus, useTriggerLoad } from '../../common/LoadingStatus';
 import {
-    checkTimeBetweenDates,
+    checkDaysBetweenDates,
     convertDateToString,
     convertStringFormatToAnotherFormat
 } from '../../../utils/formatter';
@@ -843,18 +843,18 @@ const DataManagementRow = ({
                     let timeToTargetDate = 0;
                     if (currentDate > recommendedPhaseTargetDate) {
                         // Indicates that this is in the past
-                        timeToTargetDate = checkTimeBetweenDates(
+                        timeToTargetDate = checkDaysBetweenDates(
                             currentDate,
                             recommendedPhaseTargetDate
                         );
                         timeToTargetDate = -timeToTargetDate;
                     } else
-                        timeToTargetDate = checkTimeBetweenDates(
+                        timeToTargetDate = checkDaysBetweenDates(
                             recommendedPhaseTargetDate,
                             currentDate
                         );
 
-                    const daysBetweenDates = checkTimeBetweenDates(
+                    const daysBetweenDates = checkDaysBetweenDates(
                         currentDate,
                         latestVersion.candidatePhaseReachedAt
                     );
diff --git a/client/components/common/BasicModal/index.jsx b/client/components/common/BasicModal/index.jsx
index d9aed660f..420fdf18f 100644
--- a/client/components/common/BasicModal/index.jsx
+++ b/client/components/common/BasicModal/index.jsx
@@ -29,13 +29,18 @@ const BasicModal = ({
     handleAction = null,
     handleHide = null,
     staticBackdrop = false,
-    useOnHide = false
+    useOnHide = false,
+    initialFocusRef = null
 }) => {
     const headerRef = useRef();
 
     useEffect(() => {
         if (!show) return;
-        headerRef.current.focus();
+        if (initialFocusRef?.current) {
+            initialFocusRef.current.focus();
+        } else {
+            headerRef.current.focus();
+        }
     }, [show]);
 
     const id = useMemo(() => {
@@ -111,7 +116,10 @@ BasicModal.propTypes = {
     handleAction: PropTypes.func,
     handleHide: PropTypes.func,
     staticBackdrop: PropTypes.bool,
-    useOnHide: PropTypes.bool
+    useOnHide: PropTypes.bool,
+    initialFocusRef: PropTypes.shape({
+        current: PropTypes.any
+    })
 };
 
 export default BasicModal;
diff --git a/client/components/common/UpdateTargetDateModal/index.jsx b/client/components/common/UpdateTargetDateModal/index.jsx
index 0597a9970..07d67f9db 100644
--- a/client/components/common/UpdateTargetDateModal/index.jsx
+++ b/client/components/common/UpdateTargetDateModal/index.jsx
@@ -92,8 +92,11 @@ const UpdateTargetDateModal = ({
             content={
                 <ModalInnerSectionContainer>
                     <Form.Group className="form-group">
-                        <Form.Label>Target Date</Form.Label>
+                        <Form.Label htmlFor="target-date-input">
+                            Target Date
+                        </Form.Label>
                         <Form.Control
+                            id="target-date-input"
                             ref={dateTextRef}
                             type="text"
                             placeholder="DD-MM-YYYY"
@@ -118,6 +121,9 @@ const UpdateTargetDateModal = ({
             actionLabel={'Save'}
             handleAction={onSubmit}
             handleClose={handleClose}
+            useOnHide={true}
+            handleHide={handleClose}
+            initialFocusRef={dateTextRef}
         />
     );
 };
diff --git a/client/utils/formatter.js b/client/utils/formatter.js
index 6be2f3c2d..7951603bc 100644
--- a/client/utils/formatter.js
+++ b/client/utils/formatter.js
@@ -43,9 +43,9 @@ export const isValidDate = (date, format = 'DD-MM-YYYY') => {
     return moment(date, format).isValid();
 };
 
-export const checkTimeBetweenDates = (date, otherDate, unit = 'days') => {
+export const checkDaysBetweenDates = (date, otherDate) => {
     const _date = moment(date);
     const _otherDate = moment(otherDate);
-
-    return _date.diff(_otherDate, unit);
+    const hours = _date.diff(_otherDate, 'hours');
+    return Math.ceil(hours / 24);
 };