@openmrs/esm-fast-data-entry-app 1.0.0-pre.34 → 1.0.0-pre.41

package/src/context/FormWorkflowReducer.ts

@@ -6,6 +6,7 @@ const reducer = (state, action) => {
         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
@@ -13,6 +14,7 @@ const reducer = (state, action) => {
         ...state,
         activePatientUuid: null,
         activeEncounterUuid: null,
+        workflowState: "NEW_PATIENT",
       };
     case "SAVE_ENCOUNTER":
       return {
@@ -23,12 +25,51 @@ const reducer = (state, action) => {
         },
         activePatientUuid: null,
         activeEncounterUuid: null,
+        workflowState:
+          state.workflowState === "SUBMIT_FOR_NEXT"
+            ? "NEW_PATIENT"
+            : state.workflowState === "SUBMIT_FOR_REVIEW"
+            ? "REVIEW"
+            : state.workflowState,
       };
     case "EDIT_ENCOUNTER":
       return {
         ...state,
         activeEncounterUuid: state.encounters[action.patientUuid],
         activePatientUuid: action.patientUuid,
+        workflowState: "EDIT_FORM",
+      };
+    case "SUBMIT_FOR_NEXT":
+      window.dispatchEvent(
+        new CustomEvent("ampath-form-action", {
+          detail: { formUuid: state.formUuid, action: "onSubmit" },
+        })
+      );
+      return {
+        ...state,
+        workflowState: "SUBMIT_FOR_NEXT",
+      };
+    case "SUBMIT_FOR_REVIEW":
+      window.dispatchEvent(
+        new CustomEvent("ampath-form-action", {
+          detail: { formUuid: state.formUuid, action: "onSubmit" },
+        })
+      );
+      return {
+        ...state,
+        workflowState: "SUBMIT_FOR_REVIEW",
+      };
+    case "UPDATE_FORM_UUID":
+      return {
+        ...state,
+        formUuid: action.formUuid,
+      };
+    case "GO_TO_REVIEW":
+      return {
+        ...state,
+        activeEncounterUuid: null,
+        activePatientUuid: null,
+        workflowState: "REVIEW",
       };
     default:
       return state;

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

@@ -1,28 +1,80 @@
-import { ExtensionSlot } from "@openmrs/esm-framework";
+import {
+  ExtensionSlot,
+  getGlobalStore,
+  useStore,
+} from "@openmrs/esm-framework";
 import { Button } from "carbon-components-react";
-import React, { useContext, useState } from "react";
-import { useHistory, useParams } from "react-router-dom";
+import React, { useContext } from "react";
+import { useHistory } from "react-router-dom";
 import FormBootstrap from "../FormBootstrap";
 import PatientCard from "../patient-card/PatientCard";
 import PatientBanner from "../patient-banner";
 import styles from "./styles.scss";
 import PatientSearchHeader from "../patient-search-header";
 import { useTranslation } from "react-i18next";
-import FormWorkflowContext from "../context/FormWorkflowContext";
+import FormWorkflowContext, {
+  FormWorkflowProvider,
+} from "../context/FormWorkflowContext";
+import WorkflowReview from "../workflow-review";
 
 interface ParamTypes {
   formUuid: string;
 }
 
-const FormEntryWorkflow = () => {
-  const { formUuid } = useParams() as ParamTypes;
+const formStore = getGlobalStore("ampath-form-state");
+
+const WorkflowNavigationButtons = () => {
+  const {
+    formUuid,
+    submitForReview,
+    submitForNext,
+    workflowState,
+    goToReview,
+  } = useContext(FormWorkflowContext);
   const history = useHistory();
+  const store = useStore(formStore);
+  const formState = store[formUuid];
+  const navigationDisabled = formState !== "ready";
+  const { t } = useTranslation();
+
+  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>
+  );
+};
+
+const FormWorkspace = () => {
   const {
     patientUuids,
     activePatientUuid,
     activeEncounterUuid,
-    openPatientSearch,
     saveEncounter,
+    formUuid,
   } = useContext(FormWorkflowContext);
   const { t } = useTranslation();
 
@@ -33,56 +85,66 @@ const FormEntryWorkflow = () => {
   };
 
   return (
-    <div>
-      <div className={styles.breadcrumbsContainer}>
-        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
-      </div>
-      {!activePatientUuid && <PatientSearchHeader />}
-      {activePatientUuid && <PatientBanner patientUuid={activePatientUuid} />}
-      <div className={styles.workspaceWrapper}>
-        <div className={styles.workspace}>
-          {!patientUuids.length && (
-            <div className={styles.selectPatientMessage}>
-              {t("selectPatientFirst", "Please select a patient first")}
-            </div>
-          )}
-          {!!patientUuids.length && (
-            <div className={styles.formMainContent}>
-              <div className={styles.formContainer}>
-                <FormBootstrap
-                  patientUuid={activePatientUuid}
-                  encounterUuid={activeEncounterUuid}
-                  {...{
-                    formUuid,
-                    handlePostResponse,
-                  }}
-                />
-              </div>
-              <div className={styles.rightPanel}>
-                <h4>Forms filled</h4>
-                <div className={styles.patientCardsSection}>
-                  {patientUuids.map((patientUuid) => (
-                    <PatientCard patientUuid={patientUuid} key={patientUuid} />
-                  ))}
-                </div>
-                <div className={styles.rightPanelActionButtons}>
-                  <Button kind="primary" onClick={() => openPatientSearch()}>
-                    {t("nextPatient", "Next Patient")}
-                  </Button>
-                  <Button kind="secondary" disabled>
-                    {t("reviewSave", "Review & Save")}
-                  </Button>
-                  <Button kind="tertiary" onClick={() => history.push("/")}>
-                    {t("cancel", "Cancel")}
-                  </Button>
-                </div>
-              </div>
+    <div className={styles.workspace}>
+      {!patientUuids.length && (
+        <div className={styles.selectPatientMessage}>
+          {t("selectPatientFirst", "Please select a patient first")}
+        </div>
+      )}
+      {!!patientUuids.length && (
+        <div className={styles.formMainContent}>
+          <div className={styles.formContainer}>
+            <FormBootstrap
+              patientUuid={activePatientUuid}
+              encounterUuid={activeEncounterUuid}
+              {...{
+                formUuid,
+                handlePostResponse,
+              }}
+            />
+          </div>
+          <div className={styles.rightPanel}>
+            <h4>Forms filled</h4>
+            <div className={styles.patientCardsSection}>
+              {patientUuids.map((patientUuid) => (
+                <PatientCard patientUuid={patientUuid} key={patientUuid} />
+              ))}
             </div>
-          )}
+            <WorkflowNavigationButtons />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
 
-export default FormEntryWorkflow;
+const FormEntryWorkflow = () => {
+  const { workflowState } = useContext(FormWorkflowContext);
+  return (
+    <>
+      <div className={styles.breadcrumbsContainer}>
+        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+      </div>
+      {workflowState === "REVIEW" && <WorkflowReview />}
+      {workflowState !== "REVIEW" && (
+        <>
+          <PatientSearchHeader />
+          <PatientBanner />
+          <div className={styles.workspaceWrapper}>
+            <FormWorkspace />
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+const FormEntryWorkflowWrapper = () => {
+  return (
+    <FormWorkflowProvider>
+      <FormEntryWorkflow />
+    </FormWorkflowProvider>
+  );
+};
+
+export default FormEntryWorkflowWrapper;

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

@@ -4,9 +4,9 @@
 
 
 .breadcrumbsContainer > div > div > nav {
-  background-color: white;
-  padding: 0.5rem;
-  border-bottom: 1px solid $openmrs-background-grey;
+  background-color: $ui-02;
+  padding: $spacing-04 $spacing-05;
+  height: $spacing-08;
 }
 
 .workspaceWrapper {
@@ -27,28 +27,35 @@
 .formMainContent {
   display: flex;
   text-align: center;
-  margin-top: 1rem;
+  margin-top: $spacing-05;
+  column-gap: $spacing-05;
 }
 
 .formContainer {
   flex-grow: 1;
   max-height: calc(100vh - 14rem);
+  overflow-y: scroll;
+}
+
+.formContainer :global(.bx--form-item) :global(.question-area) {
+  max-width: 100%;
 }
 
 .rightPanel {
   width: 13rem;
   text-align: left;
+  overflow-y: scroll;
 }
 
 .patientCardsSection {
-  margin: 1rem 0;
+  margin: $spacing-05 0;
   border-bottom: 1px solid $carbon--gray-10;
 }
 
 .rightPanelActionButtons {
   display: flex;
   flex-direction: column;
-  row-gap: 0.5rem;
+  row-gap: $spacing-03;
   & button {
     width: 100%;
     text-decoration: "none";

package/src/form-review-card/FormReviewCard.tsx

@@ -0,0 +1,50 @@
+import { Accordion, AccordionItem, Button } from "carbon-components-react";
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import FormWorkflowContext from "../context/FormWorkflowContext";
+import { useGetPatient, useGetEncounter } from "../hooks";
+import styles from "./styles.scss";
+
+const FormReviewCard = ({ patientUuid }) => {
+  const { encounters, editEncounter } = useContext(FormWorkflowContext);
+  const patient = useGetPatient(patientUuid);
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+  const encounterUuid = encounters?.[patientUuid];
+  const { encounter } = useGetEncounter(encounterUuid);
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.formReviewCard}>
+      <Accordion align="start">
+        <AccordionItem
+          title={
+            <>
+              <span className={styles.identifier}>{identifier}</span>
+              <span className={styles.displayName}>
+                {givenName} {familyName}
+              </span>
+            </>
+          }
+          className={styles.accordionItem}
+        >
+          {encounter && encounter?.obs && encounter.obs?.length && (
+            <div className={styles.dataField}>
+              <ul>
+                {encounter.obs.map((obs, index) => (
+                  <li key={index}>{obs.display}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <Button kind="primary" onClick={() => editEncounter(patientUuid)}>
+            {t("goToForm", "Go To Form")}
+          </Button>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
+export default FormReviewCard;

package/src/form-review-card/index.ts

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

package/src/form-review-card/styles.scss

@@ -0,0 +1,38 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+
+.formReviewCard {
+  background-color: $ui-02;
+  padding: $spacing-02;
+}
+
+.formReviewCard :global(.bx--accordion) :global(.bx--accordion__item) {
+  border: none;
+}
+
+.formReviewCard :global(.bx--accordion__title) {
+  display: flex;
+  align-items: baseline;
+  column-gap: $spacing-05;
+}
+
+.formReviewCard :global(.bx--accordion__content) {
+  padding: $spacing-03;
+}
+
+.dataField {
+  @include carbon--type-style('code-02');
+  background-color: $ui-01;
+  padding: $spacing-03;
+}
+
+.displayName {
+  @include carbon--type-style('productive-heading-02');
+  font-weight: bold;
+}
+
+.identifier {
+  @include carbon--type-style('body-short-01')
+}

package/src/forms-table/FormsTable.tsx

@@ -1,3 +1,4 @@
+import { ErrorState } from "@openmrs/esm-framework";
 import {
   DataTable,
   DataTableSkeleton,
@@ -49,12 +50,9 @@ const FormsTable = ({ rows, error, isLoading }) => {
   if (isLoading) return <DataTableSkeleton />;
   if (error) {
     return (
-      <EmptyState
+      <ErrorState
         headerTitle={t("errorLoadingData", "Error Loading Data")}
-        displayText={`${t(
-          "dataErrorMessage",
-          "Something went wrong loading data from the server."
-        )} "${error?.response?.status}: ${error?.response?.statusText}"`}
+        error={error}
       />
     );
   }

package/src/hooks/index.ts

@@ -1,4 +1,6 @@
 import useGetAllForms from "./useGetAllForms";
 import useGetPatient from "./useGetPatient";
+import useFormState from "./useFormState";
+import useGetEncounter from "./useGetEncounter";
 
-export { useGetAllForms, useGetPatient };
+export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };

package/src/hooks/useFormState.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const useFormState = (formUuid) => {
+  const [state, setState] = useState(null);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.detail?.formUuid === formUuid) {
+        setState(e.detail?.state);
+      }
+    };
+
+    window.addEventListener("ampath-form-state", handler);
+
+    return () => {
+      window.removeEventListener("ampath-form-state", handler);
+    };
+  }, [formUuid]);
+
+  return state;
+};
+
+export default useFormState;

package/src/hooks/useGetEncounter.ts

@@ -0,0 +1,22 @@
+import { fetchCurrentPatient, openmrsFetch } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+
+const encounterUrl = "/ws/rest/v1/encounter/";
+
+const useGetEncounter = (encounterUuid) => {
+  const url = `${encounterUrl}${encounterUuid}`;
+  const { data, error } = useSWR(url, async () => {
+    const res = await openmrsFetch(url);
+    const encounter = res.data || null;
+    return encounter;
+  });
+
+  return {
+    encounter: data,
+    isLoading: !error && data,
+    error,
+  };
+};
+
+export default useGetEncounter;

package/src/patient-banner/PatientBanner.test.tsx

@@ -4,6 +4,6 @@ import PatientBanner from "./PatientBanner";
 
 describe("PatientBanner", () => {
   it("renders placeholder information when no data is present", () => {
-    render(<PatientBanner patientUuid={null} />);
+    render(<PatientBanner />);
   });
 });