CARDS-1761: Adapt React Date / Time pickers

Addressed codereview comments
data-team-uhn · Aug 16, 2022 · f0ef933 · f0ef933
1 parent a180990
commit f0ef933
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 35 deletions.
diff --git a/modules/data-entry/src/main/frontend/src/dataHomepage/FilterComponents/DateFilter.jsx b/modules/data-entry/src/main/frontend/src/dataHomepage/FilterComponents/DateFilter.jsx
@@ -73,9 +73,6 @@ const DateFilter = forwardRef((props, ref) => {
             variant="standard"
             inputRef={ref}
             className={classes.answerField}
-            InputLabelProps={{
-              shrink: true,
-            }}
             InputProps={{
               className: classes.answerField
             }}

diff --git a/modules/data-entry/src/main/frontend/src/dataHomepage/FilterComponents/TextFilter.jsx b/modules/data-entry/src/main/frontend/src/dataHomepage/FilterComponents/TextFilter.jsx
@@ -54,9 +54,6 @@ const TextFilter = forwardRef((props, ref) => {
     <TextField
       variant="standard"
       className={classes.answerField}
-      InputLabelProps={{
-      shrink: true,
-      }}
       InputProps={{
       className: classes.answerField
       }}

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/DateQuestion.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/DateQuestion.jsx
@@ -146,9 +146,6 @@ function DateQuestion(props) {
         renderInput={ (params) =>
           <TextField
             variant="standard"
-            InputLabelProps={{
-              shrink: true,
-            }}
             InputProps={{
               className: classes.textField
             }}
@@ -166,15 +163,26 @@ function DateQuestion(props) {
       {...props}
       >
       {pageActive && <>
-        { error && <Typography color='error'>{errorMessage}</Typography> }
-        {getDateField(false, displayedDate)}
-        { /* If this is an interval, allow the user to select a second date */
-        type === DateQuestionUtilities.INTERVAL_TYPE &&
-        <React.Fragment>
-          <span className={classes.mdash}>&mdash;</span>
-          {getDateField(true, displayedEndDate)}
-        </React.Fragment>
+        { error &&
+          <Typography
+            component="p"
+            color='error'
+            className={classes.answerInstructions}
+            variant="caption"
+          >
+          { errorMessage }
+        </Typography>
         }
+        <div className={classes.range}>
+          {getDateField(false, displayedDate)}
+          { /* If this is an interval, allow the user to select a second date */
+          type === DateQuestionUtilities.INTERVAL_TYPE &&
+          <React.Fragment>
+            <span className="separator">&mdash;</span>
+            {getDateField(true, displayedEndDate)}
+          </React.Fragment>
+          }
+        </div>
       </>}
       <Answer
         answers={outputAnswers}

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/QuestionnaireStyle.jsx
@@ -118,13 +118,14 @@ const questionnaireStyle = theme => ({
     },
     range: {
         display: "flex",
-        alignItems: "flex-start",
+        alignItems: "baseline",
         "& .MuiInputBase-root" : {
             minWidth: "110px !important",
             width: "110px",
         },
         "& .separator" : {
             padding: theme.spacing(0.5, 1),
+            margin: theme.spacing(0, 1),
         }
     },
     cardHeaderButton: {

diff --git a/modules/data-entry/src/main/frontend/src/questionnaire/TimeQuestion.jsx b/modules/data-entry/src/main/frontend/src/questionnaire/TimeQuestion.jsx
@@ -58,7 +58,7 @@ function TimeQuestion(props) {
   let {existingAnswer, classes, pageActive, ...rest} = props;
   let {text, lowerLimit, upperLimit, errorText, minAnswers, dateFormat} = {dateFormat: "mm:ss", ...props.questionDefinition, ...props};
   let currentStartValue = (existingAnswer && existingAnswer[1].value && DateTime.fromFormat(existingAnswer[1].value, dateFormat).isValid)
-    ? DateTime.fromFormat(existingAnswer[1].value, dateFormat) : undefined;
+    ? DateTime.fromFormat(existingAnswer[1].value, dateFormat) : null;
   const [selectedTime, changeTime] = useState(currentStartValue);
   const [error, setError] = useState(undefined);
   const defaultErrorMessage = errorText || "Please enter a valid time";
@@ -81,7 +81,7 @@ function TimeQuestion(props) {
       >
       {
         pageActive && <>
-          {error && <Typography color='error' className={classes.datePickerError}>{errorMessage}</Typography>}
+          {error && <Typography component="p" color='error' className={classes.datePickerError}>{errorMessage}</Typography>}
           <LocalizationProvider dateAdapter={AdapterLuxon}>
             <TimePicker
               ampm={false}
@@ -91,9 +91,6 @@ function TimeQuestion(props) {
               inputFormat={dateFormat}
               mask={isMinuteSeconds ? "__:__" : "__:__:__"}
               openTo={isMinuteSeconds ? "minutes" : "hours"}
-              InputLabelProps={{
-                shrink: true,
-              }}
               InputProps={{
                 className: classes.textField
               }}

diff --git a/modules/downtime-warning-banner/src/main/frontend/src/DowntimeWarningConfiguration.jsx b/modules/downtime-warning-banner/src/main/frontend/src/DowntimeWarningConfiguration.jsx
@@ -47,8 +47,8 @@ function DowntimeWarningConfiguration() {
 
   // The configuration values
   const [ enabled, setEnabled ] = useState(false);
-  const [ fromDate, setFromDate ] = useState();
-  const [ toDate, setToDate ] = useState();
+  const [ fromDate, setFromDate ] = useState(null);
+  const [ toDate, setToDate ] = useState(null);
   const [ dateRangeIsInvalid, setDateRangeIsInvalid ] = useState(false);
 
   // Tracking unsaved changes
@@ -61,7 +61,7 @@ function DowntimeWarningConfiguration() {
   let readDowntimeWarningSettings = (json) => {
     setEnabled(json.enabled == 'true');
     json.fromDate && setFromDate(DateTime.fromFormat(json.fromDate, dateFormat));
-    json.toDate && setToDate(DateTime.fromFormat(json.toDate));
+    json.toDate && setToDate(DateTime.fromFormat(json.toDate, dateFormat));
   }
 
   let buildConfigData = (formData) => {
@@ -91,9 +91,6 @@ function DowntimeWarningConfiguration() {
         renderInput={ (params) =>
           <TextField
             variant="standard"
-            InputLabelProps={{
-              shrink: true,
-            }}
             InputProps={{
               className: classes.textField
             }}
@@ -129,10 +126,10 @@ function DowntimeWarningConfiguration() {
               />
             </ListItem>
             <ListItem key="fromDate">
-              {getDateField("Start of maintenance", fromDate || undefined, setFromDate)}
+              {getDateField("Start of maintenance", fromDate, setFromDate)}
             </ListItem>
             <ListItem key="toDate">
-              {getDateField("End of maintenance", toDate || undefined, setToDate)}
+              {getDateField("End of maintenance", toDate, setToDate)}
             </ListItem>
           </List>
     </AdminConfigScreen>

diff --git a/proms-resources/frontend/src/main/frontend/src/proms/PatientIdentification.jsx b/proms-resources/frontend/src/main/frontend/src/proms/PatientIdentification.jsx
@@ -34,6 +34,7 @@ import {
   List,
   ListItem,
   Link,
+  TextField,
   Typography,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
@@ -42,7 +43,11 @@ import AppointmentIcon from '@mui/icons-material/Event';
 
 import ToUDialog from "./ToUDialog.jsx";
 
-import DropdownsDatePicker from "../components/DropdownsDatePicker.jsx";
+import DateQuestionUtilities from "../questionnaire/DateQuestionUtilities";
+
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import FormattedText from "../components/FormattedText.jsx";
 
 const useStyles = makeStyles(theme => ({
@@ -116,7 +121,7 @@ function PatientIdentification(props) {
   const { onSuccess, displayText, theme } = props;
 
   // The values entered by the user
-  const [ dob, setDob ] = useState();
+  const [ dob, setDob ] = useState(null);
   const [ mrn, setMrn ] = useState();
   const [ hc, setHc ] = useState();
 
@@ -139,6 +144,9 @@ function PatientIdentification(props) {
 
   const [ mrnHelperOpen, setMrnHelperOpen ] = useState(false);
 
+  const dateFormat = DateQuestionUtilities.defaultDateFormat;
+  const views = DateQuestionUtilities.getPickerViews(dateFormat);
+
   const classes = useStyles();
 
   const sanitizeHC = (str) => {
@@ -288,8 +296,27 @@ function PatientIdentification(props) {
               <Typography>Enter the following information for identification</Typography>
             }
             </div>
-            <InputLabel htmlFor="j_dob" shrink={true} className={classes.dateLabel}>Date of birth</InputLabel>
-            <DropdownsDatePicker id="j_dob" name="j_dob" formatDate onDateChange={setDob} autoFocus fullWidth/>
+            <LocalizationProvider dateAdapter={AdapterLuxon}>
+              <DateTimePicker
+                id="j_dob"
+                name="j_dob"
+                views={views}
+                inputFormat={dateFormat}
+                label="Date of birth"
+                value={dob}
+                onChange={(value) => setDob(value.toFormat(dateFormat))}
+                renderInput={ (params) =>
+                  <TextField
+                    variant="standard"
+                    InputProps={{
+                      className: classes.textField
+                    }}
+                    helperText={null}
+                    {...params}
+                  />
+                }
+              />
+            </LocalizationProvider>
             <Grid container direction="row" alignItems="flex-end" spacing={3} wrap="nowrap" justifyContent="space-between" className={classes.identifierContainer}>
               <Grid item>
                 <FormControl variant="standard" margin="normal" fullWidth>

diff --git a/test-resources/src/main/resources/SLING-INF/content/Questionnaires/DateFormatsTest.xml b/test-resources/src/main/resources/SLING-INF/content/Questionnaires/DateFormatsTest.xml
@@ -408,4 +408,76 @@
 			<type>String</type>
 		</property>
 	</node>
+	<node>
+		<name>timeminutesseconds</name>
+		<primaryNodeType>cards:Question</primaryNodeType>
+		<property>
+			<name>text</name>
+			<value>Minute Second</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>dataType</name>
+			<value>time</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>dateFormat</name>
+			<value>mm:ss</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>maxAnswers</name>
+			<value>1</value>
+			<type>Long</type>
+		</property>
+	</node>
+	<node>
+		<name>timehoursminutes</name>
+		<primaryNodeType>cards:Question</primaryNodeType>
+		<property>
+			<name>text</name>
+			<value>Hour Minute</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>dataType</name>
+			<value>time</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>dateFormat</name>
+			<value>HH:mm</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>maxAnswers</name>
+			<value>1</value>
+			<type>Long</type>
+		</property>
+	</node>
+	<node>
+		<name>timehoursminutesseconds</name>
+		<primaryNodeType>cards:Question</primaryNodeType>
+		<property>
+			<name>text</name>
+			<value>Hour Minute Second</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>dataType</name>
+			<value>time</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>dateFormat</name>
+			<value>HH:mm:ss</value>
+			<type>String</type>
+		</property>
+		<property>
+			<name>maxAnswers</name>
+			<value>1</value>
+			<type>Long</type>
+		</property>
+	</node>
 </node>