@openmrs/esm-fast-data-entry-app 1.0.1-pre.10 → 1.0.1-pre.102

package/src/group-form-entry-workflow/GroupSessionWorkspace.tsx

@@ -0,0 +1,247 @@
+import {
+  getGlobalStore,
+  useConfig,
+  useSession,
+  useStore,
+} from "@openmrs/esm-framework";
+import { Button } from "@carbon/react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import PatientCard from "../patient-card/PatientCard";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import FormBootstrap from "../FormBootstrap";
+import useStartVisit from "../hooks/useStartVisit";
+import CompleteModal from "../CompleteModal";
+import CancelModal from "../CancelModal";
+
+const formStore = getGlobalStore("ampath-form-state");
+
+const WorkflowNavigationButtons = () => {
+  const context = useContext(GroupFormWorkflowContext);
+  const {
+    activeFormUuid,
+    submitForNext,
+    patientUuids,
+    activePatientUuid,
+    workflowState,
+  } = context;
+  const store = useStore(formStore);
+  const formState = store[activeFormUuid];
+  const navigationDisabled =
+    (formState !== "ready" || workflowState !== "EDIT_FORM") &&
+    formState !== "readyWithValidationErrors";
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  const [completeModalOpen, setCompleteModalOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const isLastPatient =
+    activePatientUuid === patientUuids[patientUuids.length - 1];
+
+  const handleClickNext = () => {
+    if (
+      workflowState === "EDIT_FORM" ||
+      formState === "readyWithValidationErrors"
+    ) {
+      submitForNext();
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button
+          kind="primary"
+          onClick={handleClickNext}
+          disabled={navigationDisabled}
+        >
+          {isLastPatient
+            ? t("saveForm", "Save Form")
+            : t("nextPatient", "Next Patient")}
+        </Button>
+        <Button kind="secondary" onClick={() => setCompleteModalOpen(true)}>
+          {t("saveAndComplete", "Save & Complete")}
+        </Button>
+        <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal
+        open={cancelModalOpen}
+        setOpen={setCancelModalOpen}
+        context={context}
+      />
+      <CompleteModal
+        open={completeModalOpen}
+        setOpen={setCompleteModalOpen}
+        context={context}
+        validateFirst={false}
+      />
+    </>
+  );
+};
+
+const GroupSessionWorkspace = () => {
+  const { groupSessionConcepts } = useConfig();
+  const { t } = useTranslation();
+  const {
+    patientUuids,
+    activePatientUuid,
+    encounters,
+    activeEncounterUuid,
+    activeVisitUuid,
+    activeFormUuid,
+    saveEncounter,
+    activeSessionMeta,
+    groupVisitTypeUuid,
+    updateVisitUuid,
+    submitForNext,
+    workflowState,
+  } = useContext(GroupFormWorkflowContext);
+
+  const { sessionLocation } = useSession();
+  const [encounter, setEncounter] = useState(null);
+  const [visit, setVisit] = useState(null);
+
+  const {
+    saveVisit,
+    updateEncounter,
+    success: visitSaveSuccess,
+  } = useStartVisit({
+    showSuccessNotification: false,
+    showErrorNotification: true,
+  });
+
+  // 0. user clicks "next patient" in WorkflowNavigationButtons
+  // which triggers submitForNext() if workflowState === "EDIT_FORM"
+
+  // 1. save the new visit uuid and start form submission
+  useEffect(() => {
+    if (
+      visitSaveSuccess &&
+      visitSaveSuccess.data.patient.uuid === activePatientUuid
+    ) {
+      setVisit(visitSaveSuccess.data);
+      // Update visit UUID on workflow
+      updateVisitUuid(visitSaveSuccess.data.uuid);
+    }
+  }, [
+    visitSaveSuccess,
+    updateVisitUuid,
+    activeVisitUuid,
+    activePatientUuid,
+    visit,
+    setVisit,
+  ]);
+
+  // 2. If there's no active visit, trigger the creation of a new one
+  const handleEncounterCreate = useCallback(
+    (payload) => {
+      // Create a visit with the same date as the encounter being saved
+      if (!activeVisitUuid) {
+        saveVisit({
+          patientUuid: activePatientUuid,
+          startDatetime: activeSessionMeta.sessionDate,
+          stopDatetime: activeSessionMeta.sessionDate,
+          visitType: groupVisitTypeUuid,
+          location: sessionLocation?.uuid,
+        });
+      }
+      const obsTime = new Date(activeSessionMeta.sessionDate);
+      payload.obs.forEach((item, index) => {
+        payload.obs[index] = {
+          ...item,
+          groupMembers: item.groupMembers?.map((mem) => ({
+            ...mem,
+            obsDatetime: obsTime.toISOString(),
+          })),
+          obsDatetime: obsTime.toISOString(),
+        };
+      });
+      // If this is a newly created encounter and visit, add session concepts to encounter payload.
+      if (!activeVisitUuid) {
+        Object.entries(groupSessionConcepts).forEach(([field, uuid]) => {
+          payload.obs.push({
+            concept: uuid,
+            value: activeSessionMeta?.[field],
+          });
+        });
+      }
+      payload.location = sessionLocation?.uuid;
+      payload.encounterDatetime = obsTime.toISOString();
+    },
+    [
+      activePatientUuid,
+      activeVisitUuid,
+      activeSessionMeta,
+      groupSessionConcepts,
+      groupVisitTypeUuid,
+      saveVisit,
+      sessionLocation,
+    ]
+  );
+
+  // 3. Update encounter so that it belongs to the created visit
+  useEffect(() => {
+    if (encounter && visit && encounter.patient?.uuid === visit.patient?.uuid) {
+      updateEncounter({ uuid: encounter.uuid, visit: visit.uuid });
+    }
+  }, [encounter, updateEncounter, visit]);
+
+  // 4. Once form has been posted, save the new encounter uuid so we can edit it later
+  const handlePostResponse = useCallback(
+    (encounter) => {
+      if (encounter && encounter.uuid) {
+        saveEncounter(encounter.uuid);
+        setEncounter(encounter);
+      }
+    },
+    [saveEncounter]
+  );
+
+  const switchPatient = useCallback(
+    (patientUuid) => {
+      submitForNext(patientUuid);
+    },
+    [submitForNext]
+  );
+
+  if (workflowState === "NEW_GROUP_SESSION") return null;
+
+  return (
+    <div className={styles.workspace}>
+      <div className={styles.formMainContent}>
+        <div className={styles.formContainer}>
+          <FormBootstrap
+            patientUuid={activePatientUuid}
+            encounterUuid={activeEncounterUuid}
+            {...{
+              formUuid: activeFormUuid,
+              handlePostResponse,
+              handleEncounterCreate,
+            }}
+          />
+        </div>
+        <div className={styles.rightPanel}>
+          <h4>{t("formsFilled", "Forms filled")}</h4>
+          <div className={styles.patientCardsSection}>
+            {patientUuids?.map((patientUuid) => (
+              <PatientCard
+                key={patientUuid}
+                {...{
+                  patientUuid,
+                  activePatientUuid,
+                  editEncounter: switchPatient,
+                  encounters,
+                }}
+              />
+            ))}
+          </div>
+          <WorkflowNavigationButtons />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GroupSessionWorkspace;

package/src/group-form-entry-workflow/SessionDetailsForm.tsx

@@ -0,0 +1,131 @@
+import {
+  Layer,
+  Tile,
+  TextInput,
+  TextArea,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
+import React, { useContext } from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
+import { AttendanceTable } from "./attendance-table";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import useGetPatients from "../hooks/useGetPatients";
+
+const SessionDetailsForm = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
+
+  const { patientUuids } = useContext(GroupFormWorkflowContext);
+  const { patients, isLoading } = useGetPatients(patientUuids);
+
+  return (
+    <div>
+      {!isLoading && (
+        <div className={styles.formSection}>
+          <h4>{t("sessionDetails", "1. Session details")}</h4>
+          <div>
+            <p>
+              {t(
+                "allFieldsRequired",
+                "All fields are required unless marked optional"
+              )}
+            </p>
+          </div>
+          <Layer>
+            <Tile className={styles.formSectionTile}>
+              <Layer>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "1.5rem",
+                  }}
+                >
+                  <TextInput
+                    id="text"
+                    type="text"
+                    labelText={t("sessionName", "Session Name")}
+                    {...register("sessionName", { required: true })}
+                    invalid={errors.sessionName}
+                    invalidText={"This field is required"}
+                  />
+                  <TextInput
+                    id="text"
+                    type="text"
+                    labelText={t("practitionerName", "Practitioner Name")}
+                    {...register("practitionerName", { required: true })}
+                    invalid={errors.practitionerName}
+                    invalidText={"This field is required"}
+                  />
+                  <Controller
+                    name="sessionDate"
+                    control={control}
+                    rules={{ required: true }}
+                    render={({ field }) => (
+                      <DatePicker
+                        datePickerType="single"
+                        size="md"
+                        maxDate={new Date()}
+                        {...field}
+                      >
+                        <DatePickerInput
+                          id="session-date"
+                          labelText={t("sessionDate", "Session Date")}
+                          placeholder="mm/dd/yyyy"
+                          size="md"
+                          invalid={errors.sessionDate}
+                          invalidText={"This field is required"}
+                        />
+                      </DatePicker>
+                    )}
+                  />
+                  <TextArea
+                    id="text"
+                    type="text"
+                    labelText={t("sessionNotes", "Session Notes")}
+                    {...register("sessionNotes", { required: true })}
+                    invalid={errors.sessionNotes}
+                    invalidText={"This field is required"}
+                  />
+                </div>
+              </Layer>
+            </Tile>
+          </Layer>
+          <h4>{t("sessionParticipants", "2. Session participants")}</h4>
+          <div>
+            <p>
+              {t(
+                "markAbsentPatients",
+                "The patients in this group. Patients that are not present in the session should be marked as absent."
+              )}
+            </p>
+          </div>
+          <Layer>
+            <Tile className={styles.formSectionTile}>
+              <Layer>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "1.5rem",
+                  }}
+                >
+                  <AttendanceTable patients={patients} />
+                </div>
+              </Layer>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SessionDetailsForm;

package/src/group-form-entry-workflow/SessionMetaWorkspace.tsx

@@ -0,0 +1,107 @@
+import { Button } from "@carbon/react";
+import React, { useContext, useEffect, useState } from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import CancelModal from "../CancelModal";
+import SessionDetailsForm from "./SessionDetailsForm";
+
+const NewGroupWorkflowButtons = () => {
+  const { t } = useTranslation();
+  const context = useContext(GroupFormWorkflowContext);
+  const { workflowState, patientUuids } = context;
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button kind="secondary" type="submit" disabled={!patientUuids.length}>
+          {t("createNewSession", "Create New Session")}
+        </Button>
+        <Button
+          kind="tertiary"
+          onClick={() => {
+            setCancelModalOpen(true);
+          }}
+        >
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal
+        open={cancelModalOpen}
+        setOpen={setCancelModalOpen}
+        context={context}
+      />
+    </>
+  );
+};
+
+const GroupIdField = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    setValue,
+  } = useFormContext();
+  const { activeGroupUuid } = useContext(GroupFormWorkflowContext);
+
+  useEffect(() => {
+    if (activeGroupUuid) setValue("groupUuid", activeGroupUuid);
+  }, [activeGroupUuid, setValue]);
+
+  return (
+    <>
+      <input
+        hidden
+        {...register("groupUuid", {
+          value: activeGroupUuid,
+          required: t("chooseGroupError", "Please choose a group."),
+        })}
+      />
+      {errors.groupUuid && !activeGroupUuid && (
+        <div className={styles.formError}>
+          {errors.groupUuid.message as string}
+        </div>
+      )}
+    </>
+  );
+};
+
+const SessionMetaWorkspace = () => {
+  const { t } = useTranslation();
+  const { setSessionMeta, workflowState } = useContext(
+    GroupFormWorkflowContext
+  );
+  const methods = useForm();
+
+  const onSubmit = (data) => {
+    const { sessionDate, ...rest } = data;
+    setSessionMeta({ ...rest, sessionDate: sessionDate[0] });
+  };
+
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <div className={styles.workspace}>
+          <div className={styles.formMainContent}>
+            <div className={styles.formContainer}>
+              <SessionDetailsForm />
+            </div>
+            <div className={styles.rightPanel}>
+              <h4>{t("newGroupSession", "New Group Session")}</h4>
+              <GroupIdField />
+              <hr style={{ width: "100%" }} />
+              <NewGroupWorkflowButtons />
+            </div>
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default SessionMetaWorkspace;

package/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx

@@ -0,0 +1,144 @@
+import React, { useCallback, useContext, useMemo, useState } from "react";
+import { Edit } from "@carbon/react/icons";
+
+import {
+  Checkbox,
+  SkeletonText,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Button,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+import AddGroupModal from "../../add-group-modal/AddGroupModal";
+
+const PatientRow = ({ patient }) => {
+  const { patientUuids, addPatientUuid, removePatientUuid } = useContext(
+    GroupFormWorkflowContext
+  );
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  const handleOnChange = (e, { checked }) => {
+    if (checked) {
+      addPatientUuid(patient.id);
+    } else {
+      removePatientUuid(patient.id);
+    }
+  };
+
+  if (!patient) {
+    return (
+      <TableRow>
+        <TableCell>
+          <SkeletonText />
+        </TableCell>
+        <TableCell>
+          <SkeletonText />
+        </TableCell>
+        <TableCell>
+          <Checkbox diabled />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        {patient.display ||
+          patient.displayName ||
+          [givenName, familyName].join(" ")}
+      </TableCell>
+      <TableCell>{identifier}</TableCell>
+      <TableCell>
+        <Checkbox
+          checked={patientUuids.includes(patient.id)}
+          labelText={patient.id}
+          hideLabel
+          id={`${identifier}-attendance-checkbox`}
+          onChange={handleOnChange}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const AttendanceTable = ({ patients }) => {
+  const { t } = useTranslation();
+  const { activeGroupUuid, activeGroupName, activeGroupMembers } = useContext(
+    GroupFormWorkflowContext
+  );
+
+  const [isOpen, setOpen] = useState(false);
+
+  const headers = [
+    t("name", "Name"),
+    t("identifier", "Patient ID"),
+    t("patientIsPresent", "Patient is present"),
+  ];
+
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onPostSubmit = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const newArr = useMemo(() => {
+    return activeGroupMembers.map(function (value) {
+      const patient = patients.find((patient) => patient.id === value);
+      return { uuid: value, ...patient };
+    });
+  }, [activeGroupMembers, patients]);
+
+  if (!activeGroupUuid) {
+    return <div>{t("selectGroupFirst", "Please select a group first")}</div>;
+  }
+
+  return (
+    <div>
+      <span style={{ flexGrow: 1 }} />
+      <Button kind="ghost" onClick={() => setOpen(true)}>
+        {t("editGroup", "Edit Group")}&nbsp;
+        <Edit size={20} />
+      </Button>
+      <AddGroupModal
+        {...{
+          cohortUuid: activeGroupUuid,
+          patients: newArr,
+          isCreate: false,
+          groupName: activeGroupName,
+          isOpen: isOpen,
+          handleCancel: handleCancel,
+          onPostSubmit: onPostSubmit,
+        }}
+      />
+      <Table>
+        <TableHead>
+          <TableRow>
+            {headers.map((header, index) => (
+              <TableHeader key={index}>{header}</TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {activeGroupMembers.map((patientUuid, index) => {
+            const patient = patients.find(
+              (patient) => patient.id === patientUuid
+            );
+            return <PatientRow patient={patient} key={index} />;
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
+
+export default AttendanceTable;

package/src/group-form-entry-workflow/attendance-table/index.ts

@@ -0,0 +1 @@
+export { default as AttendanceTable } from "./AttendanceTable";

package/src/group-form-entry-workflow/{group-banner/GroupBanner.test.tsx → group-display-header/GroupDisplayHeader.test.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import GroupBanner from "./GroupBanner";
+import GroupDisplayHeader from "./GroupDisplayHeader";
 
 describe("PatientBanner", () => {
   it("renders placeholder information when no data is present", () => {
-    render(<GroupBanner />);
+    render(<GroupDisplayHeader />);
   });
 });

package/src/group-form-entry-workflow/{group-banner/GroupBanner.tsx → group-display-header/GroupDisplayHeader.tsx}

@@ -1,12 +1,19 @@
 import React, { useContext } from "react";
-import { Events } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import { Events, Close } from "@carbon/react/icons";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
 
-const GroupBanner = () => {
-  const { activeGroupName, activeGroupUuid, patientUuids, activeSessionMeta } =
-    useContext(GroupFormWorkflowContext);
+const GroupDisplayHeader = () => {
+  const {
+    activeGroupName,
+    activeGroupUuid,
+    patientUuids,
+    activeSessionMeta,
+    unsetGroup,
+    destroySession,
+  } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
 
   if (!activeGroupUuid) {
@@ -38,8 +45,19 @@ const GroupBanner = () => {
           </div>
         </div>
       )}
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Button kind="ghost" onClick={() => unsetGroup()}>
+          {t("changeGroup", "Choose a different group")} <Close size={20} />
+        </Button>
+      </span>
+      <span>
+        <Button kind="ghost" onClick={() => destroySession()}>
+          {t("cancel", "Cancel")} <Close size={20} />
+        </Button>
+      </span>
     </div>
   );
 };
 
-export default GroupBanner;
+export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-display-header/index.ts

@@ -0,0 +1,3 @@
+import GroupDisplayHeader from "./GroupDisplayHeader";
+
+export default GroupDisplayHeader;