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

package/src/context/GroupFormWorkflowContext.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useMemo, useReducer } from "react";
+import reducer from "./GroupFormWorkflowReducer";
+import { useParams } from "react-router-dom";
+import { Type } from "@openmrs/esm-framework";
+interface ParamTypes {
+  formUuid?: string;
+}
+
+export interface GroupType {
+  id: string;
+  name: string;
+  members: Array<Type.Object>;
+}
+export interface MetaType {
+  sessionName: string;
+  sessionDate: string;
+  practitionerName: string;
+  sessionNotes: string;
+}
+
+const initialActions = {
+  setGroup: (group: GroupType) => undefined,
+  setSessionMeta: (meta: MetaType) => undefined,
+  openPatientSearch: () => undefined,
+  saveEncounter: (encounterUuid: string | number) => undefined,
+  editEncounter: (patientUuid: string | number) => undefined,
+  submitForNext: () => undefined,
+  submitForReview: () => undefined,
+  submitForComplete: () => undefined,
+  goToReview: () => undefined,
+  destroySession: () => undefined,
+  closeSession: () => undefined,
+};
+
+export const initialWorkflowState = {
+  // activeFormUuid and forms are the only two real values stored at state root level
+  activeFormUuid: null, // the corrently open form
+  forms: {}, // object containing all forms session data
+  // the following fields will be available in context but are not stored at the
+  //     state root level, but refer to nested values for the current
+  //     aciveFormUuid
+  workflowState: null, // pseudo field from state[activeFormUuid].workflowState
+  activePatientUuid: null, // pseudo field from state[activeFormUuid].activePatientUuid
+  activeEncounterUuid: null, // pseudo field from state[activeFormUuid].encounterUuid
+  patientUuids: [], // pseudo field from state[activeFormUuid].patientUuids
+  encounters: {}, // pseudo field from state[activeFormUuid].encounters
+  activeGroupUuid: null, // pseudo field from state[activeFormUuid].groupUuid
+  activeGroupName: null, // pseudo field from state[activeFormUuid].groupname
+  activeSessionMeta: {
+    sessionName: null,
+    practitionerName: null,
+    sessionDate: null,
+    sessionNotes: null,
+  },
+};
+
+const GroupFormWorkflowContext = React.createContext({
+  ...initialWorkflowState,
+  ...initialActions,
+});
+
+const GroupFormWorkflowProvider = ({ children }) => {
+  const { formUuid } = useParams() as ParamTypes;
+  const activeFormUuid = formUuid.split("&")[0];
+  const [state, dispatch] = useReducer(reducer, {
+    ...initialWorkflowState,
+    ...initialActions,
+  });
+
+  const actions = useMemo(
+    () => ({
+      initializeWorkflowState: ({ activeFormUuid }) =>
+        dispatch({
+          type: "INITIALIZE_WORKFLOW_STATE",
+          activeFormUuid,
+        }),
+      setGroup: (group) => dispatch({ type: "SET_GROUP", group }),
+      setSessionMeta: (meta) => dispatch({ type: "SET_SESSION_META", meta }),
+      openPatientSearch: () => dispatch({ type: "OPEN_PATIENT_SEARCH" }),
+      saveEncounter: (encounterUuid) =>
+        dispatch({
+          type: "SAVE_ENCOUNTER",
+          encounterUuid,
+        }),
+      submitForNext: () => dispatch({ type: "SUBMIT_FOR_NEXT" }),
+      submitForComplete: () => dispatch({ type: "SUBMIT_FOR_COMPLETE" }),
+      editEncounter: (patientUuid) =>
+        dispatch({ type: "EDIT_ENCOUNTER", patientUuid }),
+      goToReview: () => dispatch({ type: "GO_TO_REVIEW" }),
+      destroySession: () => dispatch({ type: "DESTROY_SESSION" }),
+      closeSession: () => dispatch({ type: "CLOSE_SESSION" }),
+    }),
+    []
+  );
+
+  // if formUuid isn't a part of state yet, grab it from the url params
+  // this is the entry into the workflow system
+  useEffect(() => {
+    if (state?.workflowState === null && activeFormUuid) {
+      actions.initializeWorkflowState({ activeFormUuid });
+    }
+  }, [activeFormUuid, state?.workflowState, actions]);
+
+  return (
+    <GroupFormWorkflowContext.Provider
+      value={{
+        ...state,
+        ...actions,
+        workflowState:
+          state.forms?.[state.activeFormUuid]?.workflowState ??
+          initialWorkflowState.workflowState,
+        activePatientUuid:
+          state.forms?.[state.activeFormUuid]?.activePatientUuid ??
+          initialWorkflowState.activePatientUuid,
+        activeEncounterUuid:
+          state.forms?.[state.activeFormUuid]?.activeEncounterUuid ??
+          initialWorkflowState.activeEncounterUuid,
+        patientUuids:
+          state.forms?.[state.activeFormUuid]?.patientUuids ??
+          initialWorkflowState.patientUuids,
+        encounters:
+          state.forms?.[state.activeFormUuid]?.encounters ??
+          initialWorkflowState.encounters,
+        activeGroupUuid:
+          state.forms?.[state.activeFormUuid]?.groupUuid ??
+          initialWorkflowState.activeGroupUuid,
+        activeGroupName:
+          state.forms?.[state.activeFormUuid]?.groupName ??
+          initialWorkflowState.activeGroupName,
+        activeSessionMeta:
+          state.forms?.[state.activeFormUuid]?.sessionMeta ??
+          initialWorkflowState.activeSessionMeta,
+      }}
+    >
+      {children}
+    </GroupFormWorkflowContext.Provider>
+  );
+};
+
+export default GroupFormWorkflowContext;
+export { GroupFormWorkflowProvider };

package/src/context/GroupFormWorkflowReducer.ts

@@ -0,0 +1,272 @@
+import { navigate } from "@openmrs/esm-framework";
+import { initialWorkflowState } from "./FormWorkflowContext";
+
+export const fdeGroupWorkflowStorageVersion = "1.0.5";
+export const fdeGroupWorkflowStorageName =
+  "openmrs:fastDataEntryGroupWorkflowState";
+const persistData = (data) => {
+  localStorage.setItem(fdeGroupWorkflowStorageName, JSON.stringify(data));
+};
+
+const initialFormState = {
+  workflowState: "NEW_GROUP_SESSION",
+  groupUuid: null,
+  groupName: null,
+  activePatientUuid: null,
+  activeEncounterUuid: null,
+  patientUuids: [],
+  encounters: {},
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "INITIALIZE_WORKFLOW_STATE": {
+      const savedData = localStorage.getItem(fdeGroupWorkflowStorageName);
+      const savedDataObject = savedData ? JSON.parse(savedData) : {};
+      let newState: { [key: string]: unknown } = {};
+      if (
+        savedData &&
+        savedDataObject["_storageVersion"] === fdeGroupWorkflowStorageVersion
+      ) {
+        // there is localStorage data and it is still valid
+        const thisSavedForm = savedDataObject.forms?.[action.activeFormUuid];
+        // set active patient to the last one we were on
+        const activePatientUuid =
+          thisSavedForm?.activePatientUuid ||
+          // or set it to the first member in the list
+          thisSavedForm?.patientUuids?.[0] ||
+          // something probably went wrong...
+          null;
+        newState = {
+          ...savedDataObject,
+          // set current form to this one
+          activeFormUuid: action.activeFormUuid,
+          forms: {
+            ...savedDataObject.forms,
+            // initialize this particular form if it hasn't been created already
+            [action.activeFormUuid]: {
+              ...initialFormState,
+              ...thisSavedForm,
+              activePatientUuid: activePatientUuid,
+              activeEncounterUuid:
+                thisSavedForm?.encounters?.[activePatientUuid] || null,
+            },
+          },
+        };
+      } else {
+        // no localStorage data, or we should void it
+        newState = {
+          ...initialWorkflowState,
+          _storageVersion: fdeGroupWorkflowStorageVersion,
+          forms: {
+            [action.activeFormUuid]: initialFormState,
+          },
+          activeFormUuid: action.activeFormUuid,
+        };
+      }
+      persistData(newState);
+      return newState;
+    }
+
+    case "SET_GROUP": {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            groupUuid: action.group.id,
+            groupName: action.group.name,
+            patientUuids: action.group.members.map((member) => member.uuid),
+            activePatientUuid: null,
+            activeEncounterUuid: null,
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case "SET_SESSION_META": {
+      // requires that group is already entered and contains patientUuids
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            sessionMeta: action.meta,
+            activePatientUuid:
+              state.forms[state.activeFormUuid].patientUuids?.[0],
+            activeEncounterUuid:
+              state.forms[state.activeFormUuid].encounters[
+                state.forms[state.activeFormUuid].patientUuids?.[0]
+              ] || null,
+            workflowState: "EDIT_FORM",
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+
+    case "SAVE_ENCOUNTER": {
+      const thisForm = state.forms[state.activeFormUuid];
+      if (thisForm.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 if (thisForm.workflowState === "SUBMIT_FOR_NEXT") {
+        const nextPatientUuid =
+          thisForm.patientUuids[
+            Math.min(
+              thisForm.patientUuids.indexOf(thisForm.activePatientUuid) + 1,
+              thisForm.patientUuids.length - 1
+            )
+          ];
+        const newState = {
+          ...state,
+          forms: {
+            ...state.forms,
+            [state.activeFormUuid]: {
+              ...thisForm,
+              encounters: {
+                ...thisForm.encounters,
+                [thisForm.activePatientUuid]: action.encounterUuid,
+              },
+              activePatientUuid: nextPatientUuid,
+              activeEncounterUuid: thisForm.encounters[nextPatientUuid] || null,
+              workflowState: "EDIT_FORM",
+            },
+          },
+        };
+        persistData(newState);
+        return newState;
+      } else return state;
+    }
+    case "EDIT_ENCOUNTER": {
+      const newState = {
+        ...state,
+        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.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "onSubmit",
+          },
+        })
+      );
+      return {
+        ...state,
+        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.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "onSubmit",
+          },
+        })
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "SUBMIT_FOR_REVIEW",
+          },
+        },
+      };
+    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,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "SUBMIT_FOR_COMPLETE",
+          },
+        },
+      };
+    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,
+        activeFormUuid: null,
+      };
+      persistData(newState);
+      return newState;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/empty-state/EmptyState.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Tile } from "carbon-components-react";
+import { Tile, Layer } from "@carbon/react";
 import styles from "./styles.scss";
 import { useLayoutType } from "@openmrs/esm-framework";
 import { EmptyDataIllustration } from "./EmptyDataIllustration";
@@ -15,13 +15,17 @@ const EmptyState: React.FC<EmptyStateProps> = ({
   const isTablet = useLayoutType() === "tablet";
 
   return (
-    <Tile light className={styles.tile}>
-      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-        <h4>{headerTitle}</h4>
-      </div>
-      <EmptyDataIllustration />
-      <p className={styles.content}>{displayText}</p>
-    </Tile>
+    <Layer>
+      <Tile className={styles.tile}>
+        <div
+          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
+        >
+          <h4>{headerTitle}</h4>
+        </div>
+        <EmptyDataIllustration />
+        <p className={styles.content}>{displayText}</p>
+      </Tile>
+    </Layer>
   );
 };
 

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

@@ -9,37 +9,37 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-} from "carbon-components-react";
+} from "@carbon/react";
 import React, { useContext, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useNavigate } 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 PatientSearchHeader from "./patient-search-header";
 import { useTranslation } from "react-i18next";
 import FormWorkflowContext, {
   FormWorkflowProvider,
 } from "../context/FormWorkflowContext";
-import WorkflowReview from "../workflow-review";
+import WorkflowReview from "./workflow-review";
+import PatientBanner from "./patient-banner";
 
 const formStore = getGlobalStore("ampath-form-state");
 
 const CancelModal = ({ open, setOpen }) => {
   const { destroySession, closeSession } = useContext(FormWorkflowContext);
   const { t } = useTranslation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const discard = () => {
-    destroySession();
+  const discard = async () => {
+    await destroySession();
     setOpen(false);
-    history.push("/");
+    navigate("../");
   };
 
-  const saveAndClose = () => {
-    closeSession();
+  const saveAndClose = async () => {
+    await closeSession();
     setOpen(false);
-    history.push("/");
+    navigate("../");
   };
 
   return (
@@ -145,6 +145,8 @@ const FormWorkspace = () => {
     activeEncounterUuid,
     saveEncounter,
     activeFormUuid,
+    editEncounter,
+    encounters,
   } = useContext(FormWorkflowContext);
   const { t } = useTranslation();
 
@@ -177,7 +179,15 @@ const FormWorkspace = () => {
             <h4>Forms filled</h4>
             <div className={styles.patientCardsSection}>
               {patientUuids.map((patientUuid) => (
-                <PatientCard patientUuid={patientUuid} key={patientUuid} />
+                <PatientCard
+                  key={patientUuid}
+                  {...{
+                    patientUuid,
+                    activePatientUuid,
+                    editEncounter,
+                    encounters,
+                  }}
+                />
               ))}
             </div>
             <WorkflowNavigationButtons />

package/src/{form-review-card → form-entry-workflow/form-review-card}/FormReviewCard.tsx

@@ -1,8 +1,8 @@
-import { Accordion, AccordionItem, Button } from "carbon-components-react";
+import { Accordion, AccordionItem, Button } from "@carbon/react";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
-import FormWorkflowContext from "../context/FormWorkflowContext";
-import { useGetPatient, useGetEncounter } from "../hooks";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
+import { useGetPatient, useGetEncounter } from "../../hooks";
 import styles from "./styles.scss";
 
 const FormReviewCard = ({ patientUuid }) => {

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

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

package/src/{patient-banner → form-entry-workflow/patient-banner}/PatientBanner.tsx

@@ -1,10 +1,10 @@
 import { age, ExtensionSlot } from "@openmrs/esm-framework";
-import { SkeletonPlaceholder, SkeletonText } from "carbon-components-react";
+import { SkeletonPlaceholder, SkeletonText } from "@carbon/react";
 import React, { useContext } from "react";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
-import useGetPatient from "../hooks/useGetPatient";
-import FormWorkflowContext from "../context/FormWorkflowContext";
+import useGetPatient from "../../hooks/useGetPatient";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
 
 const SkeletonPatientInfo = () => {
   return (

package/src/{patient-banner → form-entry-workflow/patient-banner}/styles.scss

@@ -1,15 +1,16 @@
+@use '@carbon/styles/scss/spacing';
+// @use '@carbon/colors';
+@use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
-@import '~carbon-components/src/globals/scss/vars';
-@import '~carbon-components/src/globals/scss/mixins';
 
 .container {
-  height: $spacing-11;
+  height: spacing.$spacing-11;
   display: flex;
   align-items: center;
   background-color: $ui-02;
   border-top: 0.0125rem solid $ui-03;
   border-bottom: 0.0125rem solid $ui-03;
-  padding: 0 $spacing-05;
+  padding: 0 spacing.$spacing-05;
 }
 
 .photoPlaceholder {
@@ -18,7 +19,7 @@
 }
 
 .patientName {
-  @include carbon--type-style('productive-heading-03');
+  @include type.type-style('heading-03');
   font-weight: 600;
 }
 
@@ -33,12 +34,12 @@
   & > button {
     min-height: 2rem;
   }
-  @include carbon--type-style('body-short-02');
+  @include type.type-style('body-compact-02');
   color: $text-02;
   column-gap: 0.8rem;
 }
 
 .patientEditBtn {
   color: $ui-05;
-  margin: $spacing-03;
+  margin: spacing.$spacing-03;
 }