feat: DateTime picker UI element for Facility level form

package.json

@@ -15,13 +15,17 @@
         "@dhis2/d2-i18n-extract": "1.0.8",
         "@dhis2/d2-i18n-generate": "1.2.0",
         "@dhis2/ui": "6.12.0",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
         "@eyeseetea/d2-api": "1.14.0",
         "@eyeseetea/d2-ui-components": "2.7.0",
         "@eyeseetea/feedback-component": "0.0.3",
         "@material-ui/core": "4.12.4",
         "@material-ui/icons": "4.11.3",
         "@material-ui/lab": "4.0.0-alpha.60",
         "@material-ui/styles": "4.11.5",
+        "@mui/material": "^5.15.0",
+        "@mui/x-date-pickers": "^6.18.4",
         "classnames": "2.3.1",
         "d2": "31.10.2",
         "d2-manifest": "1.0.0",

src/data/repositories/SurveyFormD2Repository.ts

@@ -4,6 +4,7 @@ import { Future } from "../../domain/entities/generic/Future";
 import {
     BooleanQuestion,
     DateQuestion,
+    DateTimeQuestion,
     NumberQuestion,
     Question,
     Questionnaire,
@@ -513,8 +514,7 @@ export class SurveyD2Repository implements SurveyRepository {
                 return singleLineTextQ;
             }
 
-            case "DATE":
-            case "DATETIME": {
+            case "DATE": {
                 const dateQ: DateQuestion = {
                     id: id,
                     code: code,
@@ -525,6 +525,20 @@ export class SurveyD2Repository implements SurveyRepository {
                 };
                 return dateQ;
             }
+
+            case "DATETIME": {
+                const dateQ: DateTimeQuestion = {
+                    id: id,
+                    code: code,
+                    text: formName,
+                    type: "datetime",
+                    value: dataValue
+                        ? new Date(dataValue as string).toISOString()
+                        : new Date().toISOString(),
+                    isVisible: hiddenFields.some(field => field === formName) ? false : true,
+                };
+                return dateQ;
+            }
         }
     }
 
@@ -794,19 +808,16 @@ export class SurveyD2Repository implements SurveyRepository {
             })
         ).flatMap(trackedEntities => {
             const surveys = trackedEntities.instances.map(trackedEntity => {
-                let parentPPSSurveyId = "";
-
-                trackedEntity.attributes?.forEach(attribute => {
-                    if (attribute.attribute === SURVEY_ID_FACILITY_LEVEL_DATAELEMENT_ID)
-                        parentPPSSurveyId = attribute.value;
-                });
+                const parentPPSSurveyId = trackedEntity.attributes?.find(
+                    attribute => attribute.attribute === SURVEY_ID_FACILITY_LEVEL_DATAELEMENT_ID
+                )?.value;
 
                 const survey: Survey = {
                     id: trackedEntity.trackedEntity ?? "",
                     name: trackedEntity.trackedEntity ?? "",
                     rootSurvey: {
-                        id: parentPPSSurveyId,
-                        name: parentPPSSurveyId, //TO DO get name from DHIS
+                        id: parentPPSSurveyId ?? "",
+                        name: parentPPSSurveyId ?? "", //TO DO get name from DHIS
                         surveyType: "",
                     },
                     startDate: trackedEntity.createdAt

src/domain/entities/Questionnaire.ts

@@ -55,7 +55,8 @@ export type Question =
     | NumberQuestion
     | TextQuestion
     | BooleanQuestion
-    | DateQuestion;
+    | DateQuestion
+    | DateTimeQuestion;
 
 export interface QuestionBase {
     id: Id;
@@ -100,6 +101,11 @@ export interface DateQuestion extends QuestionBase {
     value: Maybe<Date>;
 }
 
+export interface DateTimeQuestion extends QuestionBase {
+    type: "datetime";
+    value: Maybe<string>;
+}
+
 export interface QuestionOption extends NamedRef {
     code?: string;
 }

src/webapp/components/survey-questions/QuestionWidget.tsx

@@ -13,6 +13,7 @@ import YesNoWidget from "./widgets/YesNoWidget";
 import DatePickerWidget from "./widgets/DatePickerWidget";
 import { Maybe, assertUnreachable } from "../../../utils/ts-utils";
 import DropdownSelectWidget from "./widgets/DropdownSelectWidget";
+import DateTimePickerWidget from "./widgets/DateTimePickerWidget";
 
 export interface QuestionWidgetProps {
     onChange: (question: Question) => void;
@@ -88,6 +89,15 @@ export const QuestionWidget: React.FC<QuestionWidgetProps> = React.memo(props =>
                     disabled={disabled}
                 />
             );
+        case "datetime":
+            return (
+                <DateTimePickerWidget
+                    name={question.id}
+                    value={question.value}
+                    onChange={value => onChange(update(question, value))}
+                    disabled={disabled}
+                />
+            );
         default:
             assertUnreachable(type);
             return <></>;

src/webapp/components/survey-questions/widgets/DateTimePickerWidget.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+// @ts-ignore
+import { Maybe } from "../../../../types/utils";
+import { BaseWidgetProps } from "./BaseWidget";
+import { DateTimePicker } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+
+export interface DateTimePickerWidgetProps extends BaseWidgetProps<string> {
+    value: Maybe<string>;
+    name: string;
+}
+
+const DateTimePickerWidget: React.FC<DateTimePickerWidgetProps> = props => {
+    const { onChange: onValueChange, value } = props;
+
+    const [stateValue, setStateValue] = React.useState(value);
+    React.useEffect(() => setStateValue(value), [value]);
+
+    const notifyChange = React.useCallback(
+        (newValue: string) => {
+            setStateValue(newValue);
+            onValueChange(newValue);
+        },
+        [onValueChange]
+    );
+    return (
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DateTimePicker
+                key={props.name}
+                value={new Date(stateValue)}
+                disabled={props.disabled}
+                onChange={newValue => notifyChange(newValue?.toISOString() ?? "")}
+            />
+        </LocalizationProvider>
+    );
+};
+
+export default React.memo(DateTimePickerWidget);

src/webapp/components/survey/SurveyFormOUSelector.tsx

@@ -29,7 +29,10 @@ export const SurveyFormOUSelector: React.FC<SurveyFormOUSelectorProps> = ({
 
     const onOrgUnitChange = (orgUnitPaths: string[]) => {
         if (currentSurveyId) {
-            alert("Delete the Survey and create new one? Yes/No"); //TO DO : Replace with dialog after behaviour confirmation
+            snackbar.error(
+                "Cannot change the assigned country/hospital. Please delete the survey and create a new one."
+            );
+
             return;
         }
         if (orgUnitPaths[0]) {