Implement target date modal improvements (#835)

* Implement target date modal improvements * Add esc support to target date modal
w3c · Nov 20, 2023 · a5f0e80 · a5f0e80
1 parent 662303d
commit a5f0e80
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
 };