@openmrs/esm-fast-data-entry-app 1.0.0-pre.53 → 1.0.0-pre.59

package/src/context/FormWorkflowReducer.ts

@@ -1,76 +1,274 @@
+import { navigate } from "@openmrs/esm-framework";
+import { initialWorkflowState } from "./FormWorkflowContext";
+
+export const fdeWorkflowStorageVersion = "1.0.12";
+export const fdeWorkflowStorageName = "openmrs:fastDataEntryWorkflowState";
+const persistData = (data) => {
+  localStorage.setItem(fdeWorkflowStorageName, JSON.stringify(data));
+};
+
+const initialFormState = {
+  workflowState: "NEW_PATIENT",
+  activePatientUuid: null,
+  activeEncounterUuid: null,
+  patientUuids: [],
+  encounters: {},
+};
+
 const reducer = (state, action) => {
   switch (action.type) {
-    case "ADD_PATIENT":
-      return {
-        ...state,
-        patientUuids: [...state.patientUuids, action.patientUuid],
-        activePatientUuid: action.patientUuid,
-        activeEncounterUuid: null,
-        workflowState: "EDIT_FORM",
-      };
-    case "OPEN_PATIENT_SEARCH":
-      // this will need to be updated once AMPATH hook is available
-      return {
+    case "INITIALIZE_WORKFLOW_STATE": {
+      const savedData = localStorage.getItem(fdeWorkflowStorageName);
+      const savedDataObject = savedData ? JSON.parse(savedData) : {};
+      let newState: { [key: string]: unknown } = {};
+      const newPatient = action.newPatientUuid
+        ? {
+            activePatientUuid: action.newPatientUuid,
+            workflowState: "EDIT_FORM",
+          }
+        : {};
+
+      if (
+        savedData &&
+        savedDataObject["_storageVersion"] === fdeWorkflowStorageVersion
+      ) {
+        // there is localStorage data and it is still valid
+        newState = {
+          ...savedDataObject,
+          activeFormUuid: action.activeFormUuid,
+          forms: {
+            ...savedDataObject.forms,
+            // initialize this particular form if it hasn't been created already
+            [action.activeFormUuid]: {
+              ...initialFormState,
+              ...savedDataObject.forms[action.activeFormUuid],
+              // if we receive activePatientUuid from a query parameter use that one
+              ...newPatient,
+              patientUuids:
+                savedDataObject.forms[action.activeFormUuid]?.patientUuids ||
+                initialFormState.patientUuids,
+            },
+          },
+        };
+        if (
+          action.newPatientUuid &&
+          !newState.forms[action.activeFormUuid].patientUuids.includes(
+            action.newPatientUuid
+          )
+        ) {
+          newState.forms[action.activeFormUuid].patientUuids.push(
+            action.newPatientUuid
+          );
+        }
+      } else {
+        // no localStorage data, or we should void it
+        newState = {
+          ...initialWorkflowState,
+          _storageVersion: fdeWorkflowStorageVersion,
+          forms: {
+            [action.activeFormUuid]: initialFormState,
+          },
+          activeFormUuid: action.activeFormUuid,
+        };
+      }
+      persistData(newState);
+      return { ...newState };
+    }
+    case "ADD_PATIENT": {
+      const newState = {
         ...state,
-        activePatientUuid: null,
-        activeEncounterUuid: null,
-        workflowState: "NEW_PATIENT",
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            patientUuids: [
+              ...state.forms[state.activeFormUuid].patientUuids,
+              action.patientUuid,
+            ],
+            activePatientUuid: action.patientUuid,
+            activeEncounterUuid: null,
+            workflowState: "EDIT_FORM",
+          },
+        },
       };
-    case "SAVE_ENCOUNTER":
-      return {
+      persistData(newState);
+      return newState;
+    }
+    case "OPEN_PATIENT_SEARCH": {
+      const newState = {
         ...state,
-        encounters: {
-          ...state.encounters,
-          [state.activePatientUuid]: action.encounterUuid,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            activePatientUuid: null,
+            activeEncounterUuid: null,
+            workflowState: "NEW_PATIENT",
+          },
         },
-        activePatientUuid: null,
-        activeEncounterUuid: null,
-        workflowState:
-          state.workflowState === "SUBMIT_FOR_NEXT"
-            ? "NEW_PATIENT"
-            : state.workflowState === "SUBMIT_FOR_REVIEW"
-            ? "REVIEW"
-            : state.workflowState,
       };
-    case "EDIT_ENCOUNTER":
-      return {
+      // the persist here is optional...
+      persistData(newState);
+      return newState;
+    }
+    case "SAVE_ENCOUNTER": {
+      if (
+        state.forms[state.activeFormUuid].workflowState ===
+        "SUBMIT_FOR_COMPLETE"
+      ) {
+        const { [state.activeFormUuid]: activeForm, ...formRest } = state.forms;
+        const newState = {
+          ...state,
+          forms: formRest,
+          activeFormUuid: null,
+        };
+        persistData(newState);
+        // eslint-disable-next-line
+        navigate({ to: "${openmrsSpaBase}/forms" });
+        return newState;
+      } else {
+        const newState = {
+          ...state,
+          forms: {
+            ...state.forms,
+            [state.activeFormUuid]: {
+              ...state.forms[state.activeFormUuid],
+              encounters: {
+                ...state.forms[state.activeFormUuid].encounters,
+                [state.forms[state.activeFormUuid].activePatientUuid]:
+                  action.encounterUuid,
+              },
+              activePatientUuid: null,
+              activeEncounterUuid: null,
+              workflowState:
+                state.forms[state.activeFormUuid].workflowState ===
+                "SUBMIT_FOR_NEXT"
+                  ? "NEW_PATIENT"
+                  : state.forms[state.activeFormUuid].workflowState ===
+                    "SUBMIT_FOR_REVIEW"
+                  ? "REVIEW"
+                  : state.forms[state.activeFormUuid].workflowState,
+            },
+          },
+        };
+        persistData(newState);
+        return newState;
+      }
+    }
+    case "EDIT_ENCOUNTER": {
+      const newState = {
         ...state,
-        activeEncounterUuid: state.encounters[action.patientUuid],
-        activePatientUuid: action.patientUuid,
-        workflowState: "EDIT_FORM",
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            activeEncounterUuid:
+              state.forms[state.activeFormUuid].encounters[action.patientUuid],
+            activePatientUuid: action.patientUuid,
+            workflowState: "EDIT_FORM",
+          },
+        },
       };
+      persistData(newState);
+      return newState;
+    }
     case "SUBMIT_FOR_NEXT":
+      // this state should not be persisted
       window.dispatchEvent(
         new CustomEvent("ampath-form-action", {
-          detail: { formUuid: state.formUuid, action: "onSubmit" },
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "onSubmit",
+          },
         })
       );
       return {
         ...state,
-        workflowState: "SUBMIT_FOR_NEXT",
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "SUBMIT_FOR_NEXT",
+          },
+        },
       };
     case "SUBMIT_FOR_REVIEW":
+      // this state should not be persisted
       window.dispatchEvent(
         new CustomEvent("ampath-form-action", {
-          detail: { formUuid: state.formUuid, action: "onSubmit" },
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "onSubmit",
+          },
         })
       );
       return {
         ...state,
-        workflowState: "SUBMIT_FOR_REVIEW",
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "SUBMIT_FOR_REVIEW",
+          },
+        },
       };
-    case "UPDATE_FORM_UUID":
+    case "SUBMIT_FOR_COMPLETE":
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent("ampath-form-action", {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "onSubmit",
+          },
+        })
+      );
       return {
         ...state,
-        formUuid: action.formUuid,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "SUBMIT_FOR_COMPLETE",
+          },
+        },
       };
-    case "GO_TO_REVIEW":
-      return {
+    case "GO_TO_REVIEW": {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            activeEncounterUuid: null,
+            activePatientUuid: null,
+            workflowState: "REVIEW",
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case "DESTROY_SESSION": {
+      const { [state.activeFormUuid]: activeForm, ...formRest } = state.forms;
+      const newState = {
+        ...state,
+        forms: formRest,
+        activeFormUuid: null,
+      };
+      persistData(newState);
+      return newState;
+    }
+    case "CLOSE_SESSION": {
+      const newState = {
         ...state,
-        activeEncounterUuid: null,
-        activePatientUuid: null,
-        workflowState: "REVIEW",
+        activeFormUuid: null,
       };
+      persistData(newState);
+      return newState;
+    }
     default:
       return state;
   }

package/src/form-entry-workflow/FormEntryWorkflow.tsx

@@ -3,8 +3,14 @@ import {
   getGlobalStore,
   useStore,
 } from "@openmrs/esm-framework";
-import { Button } from "carbon-components-react";
-import React, { useContext } from "react";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "carbon-components-react";
+import React, { useContext, useState } from "react";
 import { useHistory } from "react-router-dom";
 import FormBootstrap from "../FormBootstrap";
 import PatientCard from "../patient-card/PatientCard";
@@ -19,48 +25,116 @@ import WorkflowReview from "../workflow-review";
 
 const formStore = getGlobalStore("ampath-form-state");
 
-const WorkflowNavigationButtons = () => {
-  const {
-    formUuid,
-    submitForReview,
-    submitForNext,
-    workflowState,
-    goToReview,
-  } = useContext(FormWorkflowContext);
+const CancelModal = ({ open, setOpen }) => {
+  const { destroySession, closeSession } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
   const history = useHistory();
+
+  const discard = () => {
+    destroySession();
+    setOpen(false);
+    history.push("/");
+  };
+
+  const saveAndClose = () => {
+    closeSession();
+    setOpen(false);
+    history.push("/");
+  };
+
+  return (
+    <ComposedModal open={open}>
+      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
+      <ModalBody>
+        {t(
+          "cancelExplanation",
+          "You will lose any unsaved changes on the current form. Do you want to discard the current session?"
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => setOpen(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="danger" onClick={discard}>
+          {t("discard", "Discard")}
+        </Button>
+        <Button kind="primary" onClick={saveAndClose}>
+          {t("saveSession", "Save Session")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+const CompleteModal = ({ open, setOpen }) => {
+  const { submitForComplete } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
+
+  const completeSession = () => {
+    submitForComplete();
+    setOpen(false);
+  };
+
+  return (
+    <ComposedModal open={open}>
+      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
+      <ModalBody>
+        {t(
+          "saveExplanation",
+          "Do you want to save the current form and exit the workflow?"
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => setOpen(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="primary" onClick={completeSession}>
+          {t("complete", "Complete")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+const WorkflowNavigationButtons = () => {
+  const { activeFormUuid, submitForNext, workflowState, destroySession } =
+    useContext(FormWorkflowContext);
   const store = useStore(formStore);
-  const formState = store[formUuid];
+  const formState = store[activeFormUuid];
   const navigationDisabled = formState !== "ready";
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  const [completeModalOpen, setCompleteModalOpen] = useState(false);
   const { t } = useTranslation();
 
+  if (!workflowState) return null;
+
   return (
-    <div className={styles.rightPanelActionButtons}>
-      <Button
-        kind="primary"
-        onClick={() => submitForNext()}
-        disabled={navigationDisabled || workflowState === "NEW_PATIENT"}
-      >
-        {t("nextPatient", "Next Patient")}
-      </Button>
-      <Button
-        kind="secondary"
-        disabled={navigationDisabled}
-        onClick={
-          workflowState === "NEW_PATIENT"
-            ? () => goToReview()
-            : () => submitForReview()
-        }
-      >
-        {t("reviewSave", "Review & Save")}
-      </Button>
-      <Button
-        kind="tertiary"
-        onClick={() => history.push("/")}
-        disabled={navigationDisabled}
-      >
-        {t("cancel", "Cancel")}
-      </Button>
-    </div>
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button
+          kind="primary"
+          onClick={() => submitForNext()}
+          disabled={navigationDisabled || workflowState === "NEW_PATIENT"}
+        >
+          {t("nextPatient", "Next Patient")}
+        </Button>
+        <Button
+          kind="secondary"
+          onClick={
+            workflowState === "NEW_PATIENT"
+              ? () => destroySession()
+              : () => setCompleteModalOpen(true)
+          }
+        >
+          {t("saveAndComplete", "Save & Complete")}
+        </Button>
+        <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} />
+    </>
   );
 };
 
@@ -70,7 +144,7 @@ const FormWorkspace = () => {
     activePatientUuid,
     activeEncounterUuid,
     saveEncounter,
-    formUuid,
+    activeFormUuid,
   } = useContext(FormWorkflowContext);
   const { t } = useTranslation();
 
@@ -94,7 +168,7 @@ const FormWorkspace = () => {
               patientUuid={activePatientUuid}
               encounterUuid={activeEncounterUuid}
               {...{
-                formUuid,
+                formUuid: activeFormUuid,
                 handlePostResponse,
               }}
             />

package/src/form-entry-workflow/styles.scss

@@ -59,8 +59,5 @@
   & button {
     width: 100%;
     text-decoration: "none";
-    & :hover {
-      background-color: $carbon--gray-30;
-    }
   }
 }

package/src/forms-page/FormsPage.tsx

@@ -6,6 +6,10 @@ import { useGetAllForms } from "../hooks";
 import FormsTable from "../forms-table";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
+import {
+  fdeWorkflowStorageName,
+  fdeWorkflowStorageVersion,
+} from "../context/FormWorkflowReducer";
 
 // helper function useful for debugging
 // given a list of forms, it will organize into permissions
@@ -41,6 +45,18 @@ const FormsPage = () => {
   const { formCategories, formCategoriesToShow } = config;
   const { forms, isLoading, error } = useGetAllForms();
   const cleanRows = prepareRowsForTable(forms);
+  const savedData = localStorage.getItem(fdeWorkflowStorageName);
+  const activeForms = [];
+  if (
+    savedData &&
+    JSON.parse(savedData)?.["_storageVersion"] === fdeWorkflowStorageVersion
+  ) {
+    Object.entries(JSON.parse(savedData).forms).forEach(
+      ([formUuid, form]: [string, { [key: string]: unknown }]) => {
+        if (form.workflowState) activeForms.push(formUuid);
+      }
+    );
+  }
 
   const categoryRows = formCategoriesToShow.map((name) => {
     const category = formCategories.find((category) => category.name === name);
@@ -61,11 +77,14 @@ const FormsPage = () => {
             cleanRows ? cleanRows?.length : "??"
           })`}
         >
-          <FormsTable rows={cleanRows} {...{ error, isLoading }} />
+          <FormsTable rows={cleanRows} {...{ error, isLoading, activeForms }} />
         </Tab>
         {categoryRows?.map((category, index) => (
           <Tab label={`${category.name} (${category.rows.length})`} key={index}>
-            <FormsTable rows={category.rows} {...{ error, isLoading }} />
+            <FormsTable
+              rows={category.rows}
+              {...{ error, isLoading, activeForms }}
+            />
           </Tab>
         ))}
       </Tabs>

package/src/forms-table/FormsTable.tsx

@@ -19,7 +19,7 @@ import { Link } from "react-router-dom";
 import EmptyState from "../empty-state/EmptyState";
 import styles from "./styles.scss";
 
-const FormsTable = ({ rows, error, isLoading }) => {
+const FormsTable = ({ rows, error, isLoading, activeForms }) => {
   const { t } = useTranslation();
 
   const formsHeader = [
@@ -39,7 +39,13 @@ const FormsTable = ({ rows, error, isLoading }) => {
 
   const augmenteRows = rows?.map((row) => ({
     ...row,
-    actions: <Link to={row.uuid}>{t("fillForm", "Fill Form")}</Link>,
+    actions: (
+      <Link to={row.uuid}>
+        {activeForms.includes(row.uuid)
+          ? t("resumeSession", "Resume Session")
+          : t("fillForm", "Fill Form")}
+      </Link>
+    ),
     actions2: (
       <Link to="#" className={styles.inactiveLink}>
         {t("startGroupSession", "Start Group Session")}

package/src/patient-card/PatientCard.tsx

@@ -1,3 +1,4 @@
+import { CheckmarkOutline16, WarningAlt16 } from "@carbon/icons-react";
 import { SkeletonText } from "carbon-components-react";
 import React, { useContext } from "react";
 import FormWorkflowContext from "../context/FormWorkflowContext";
@@ -18,7 +19,8 @@ const CardContainer = ({ onClick = () => undefined, active, children }) => {
 };
 
 const PatientCard = ({ patientUuid }) => {
-  const { activePatientUuid, editEncounter } = useContext(FormWorkflowContext);
+  const { activePatientUuid, editEncounter, encounters } =
+    useContext(FormWorkflowContext);
   const patient = useGetPatient(patientUuid);
   const givenName = patient?.name?.[0]?.given?.[0];
   const familyName = patient?.name?.[0]?.family;
@@ -39,13 +41,22 @@ const PatientCard = ({ patientUuid }) => {
       onClick={active ? () => undefined : () => editEncounter(patientUuid)}
       active={active}
     >
-      <div className={styles.identifier}>{identifier}</div>
-      <div
-        className={`${styles.displayName} ${
-          active && styles.activeDisplayName
-        }`}
-      >
-        {givenName} {familyName}
+      <div className={styles.patientInfo}>
+        <div className={styles.identifier}>{identifier}</div>
+        <div
+          className={`${styles.displayName} ${
+            active && styles.activeDisplayName
+          }`}
+        >
+          {givenName} {familyName}
+        </div>
+      </div>
+      <div>
+        {patientUuid in encounters ? (
+          <CheckmarkOutline16 className={styles.statusSuccess} />
+        ) : (
+          <WarningAlt16 className={styles.statusWarning} />
+        )}
       </div>
     </CardContainer>
   );

package/src/patient-card/styles.scss

@@ -4,6 +4,7 @@
 
 .cardContainer {
   padding: $spacing-05;
+  display: flex;
 }
 
 .skeletonText {
@@ -29,3 +30,15 @@
     background-color: $carbon--gray-40;
   }
 }
+
+.patientInfo {
+  flex-grow: 1;
+}
+
+.statusSuccess {
+  fill: $support-02;
+}
+
+.statusWarning  {
+  fill: $support-03;
+}