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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-fast-data-entry-app",
-  "version": "1.0.1-pre.10",
+  "version": "1.0.1-pre.101",
   "license": "MPL-2.0",
   "description": "An OpenMRS 3.x microfrontend",
   "browser": "dist/openmrs-esm-fast-data-entry-app.js",
@@ -17,12 +17,8 @@
     "test": "jest --config jest.config.json --passWithNoTests",
     "verify": "concurrently 'yarn:lint' 'yarn:test' 'yarn:typescript'",
     "coverage": "yarn test -- --coverage ",
-    "prepare": "husky install"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged && yarn verify"
-    }
+    "postinstall": "husky install",
+    "extract-translations": "i18next 'src/**/*.tsx' --config ./tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -45,6 +41,7 @@
   "peerDependencies": {
     "@carbon/react": "^1.9.0",
     "@openmrs/esm-framework": "*",
+    "lodash-es": "4.x",
     "react": "18.x",
     "react-dom": "18.x",
     "react-i18next": "11.x",
@@ -53,6 +50,7 @@
   "devDependencies": {
     "@carbon/react": "^1.9.0",
     "@openmrs/esm-framework": "next",
+    "@swc-node/loader": "^1.3.5",
     "@swc/core": "^1.2.245",
     "@swc/jest": "^0.2.22",
     "@testing-library/dom": "^7.20.0",
@@ -66,6 +64,7 @@
     "@types/webpack-env": "^1.16.0",
     "@typescript-eslint/parser": "^5.14.0",
     "concurrently": "^6.2.0",
+    "css-loader": "^6.8.1",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.1",
@@ -76,6 +75,7 @@
     "jest": "^28.1.3",
     "jest-cli": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "lodash-es": "^4.17.21",
     "openmrs": "next",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
@@ -85,13 +85,16 @@
     "react-router-dom": "^6.3.0",
     "semver": "^7.3.7",
     "swc-loader": "^0.2.3",
-    "swr": "^1.3.0",
     "typescript": "^4.7.3",
-    "webpack": "^5.73.0"
+    "webpack": "^5.73.0",
+    "webpack-cli": "^5.1.4"
   },
   "packageManager": "yarn@3.2.2",
   "dependencies": {
-    "react-hook-form": "^7.34.2"
+    "i18next": "^21.10.0",
+    "i18next-parser": "^6.6.0",
+    "react-hook-form": "^7.34.2",
+    "swr": "^2.1.3"
   },
   "stableVersion": "1.0.0"
 }

package/src/CancelModal.tsx

@@ -0,0 +1,48 @@
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const CancelModal = ({ open, setOpen, context }) => {
+  const { t } = useTranslation();
+
+  const onCancel = () => setOpen(false);
+
+  const onDiscard = async () => {
+    await context.destroySession();
+  };
+
+  const onSaveAndClose = async () => {
+    await context.closeSession();
+  };
+
+  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={onCancel}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="danger" onClick={onDiscard}>
+          {t("discard", "Discard")}
+        </Button>
+        <Button kind="primary" onClick={onSaveAndClose}>
+          {t("saveSession", "Save Session")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default CancelModal;

package/src/CompleteModal.tsx

@@ -0,0 +1,46 @@
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const CompleteModal = ({ open, setOpen, context, validateFirst = false }) => {
+  const { t } = useTranslation();
+
+  const onCancel = () => setOpen(false);
+
+  const onComplete = () => {
+    if (validateFirst) {
+      context.validateForComplete();
+    } else {
+      context.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={onCancel}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="primary" onClick={onComplete}>
+          {t("complete", "Complete")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+export default CompleteModal;

package/src/FormBootstrap.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { detach, ExtensionSlot } from "@openmrs/esm-framework";
 import useGetPatient from "./hooks/useGetPatient";
 
@@ -107,6 +107,7 @@ interface FormParams {
   showDiscardSubmitButtons?: boolean;
   handlePostResponse?: (Encounter) => void;
   handleEncounterCreate?: (Object) => void;
+  handleOnValidate?: (boolean) => void;
 }
 
 const FormBootstrap = ({
@@ -117,6 +118,7 @@ const FormBootstrap = ({
   encounterUuid,
   handlePostResponse,
   handleEncounterCreate,
+  handleOnValidate,
 }: FormParams) => {
   const patient = useGetPatient(patientUuid);
 
@@ -124,11 +126,23 @@ const FormBootstrap = ({
     return () => detach("form-widget-slot", "form-widget-slot");
   });
 
+  // FIXME This should not be necessary
+  const [showForm, setShowForm] = useState(true);
+
+  useEffect(() => {
+    if (patientUuid && formUuid && patient) {
+      setShowForm(false);
+      setTimeout(() => {
+        setShowForm(true);
+      });
+    }
+  }, [patientUuid, formUuid, patient]);
+
   return (
     <div>
-      {formUuid && patientUuid && patient && (
+      {showForm && formUuid && patientUuid && patient && (
         <ExtensionSlot
-          extensionSlotName="form-widget-slot"
+          name="form-widget-slot"
           state={{
             view: "form",
             formUuid,
@@ -140,6 +154,7 @@ const FormBootstrap = ({
             closeWorkspace: () => undefined,
             handlePostResponse,
             handleEncounterCreate,
+            handleOnValidate,
             showDiscardSubmitButtons: false,
           }}
         />

package/src/add-group-modal/AddGroupModal.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import {
   ComposedModal,
   Button,
@@ -8,30 +14,58 @@ import {
   TextInput,
   FormLabel,
 } from "@carbon/react";
-import { Add, Close } from "@carbon/react/icons";
+import { TrashCan } from "@carbon/react/icons";
 import { useTranslation } from "react-i18next";
-import { ExtensionSlot } from "@openmrs/esm-framework";
+import { ExtensionSlot, showToast } from "@openmrs/esm-framework";
 import styles from "./styles.scss";
 import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import { usePostCohort } from "../hooks";
 
 const MemExtension = React.memo(ExtensionSlot);
 
+const buildPatientDisplay = (patient) => {
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  let display = identifier ? identifier + " - " : "";
+  display += (givenName || "") + " " + (familyName || "");
+  return display.replace(/\s+/g, " ");
+};
+
 const PatientRow = ({ patient, removePatient }) => {
   const { t } = useTranslation();
+  const onClickHandler = useCallback(
+    () => removePatient(patient?.uuid),
+    [patient, removePatient]
+  );
+  const patientDisplay = useMemo(() => {
+    if (!patient) {
+      return "";
+    }
+
+    if (patient.display) {
+      return patient.display;
+    }
+
+    return buildPatientDisplay(patient);
+  }, [patient]);
+
   return (
-    <li key={patient.uuid} className={styles.patientRow}>
-      <span className={styles.patientName}>{patient?.display}</span>
+    <li key={patient?.uuid} className={styles.patientRow}>
       <span>
         <Button
           kind="tertiary"
           size="sm"
-          onClick={() => removePatient(patient.uuid)}
-          renderIcon={Close}
-          tooltipPosition="right"
-        >
-          {t("remove", "Remove")}
-        </Button>
+          hasIconOnly
+          onClick={onClickHandler}
+          renderIcon={TrashCan}
+          tooltipAlignment="start"
+          tooltipPosition="top"
+          iconDescription={t("remove", "Remove")}
+        />
       </span>
+      <span className={styles.patientName}>{patientDisplay}</span>
     </li>
   );
 };
@@ -64,17 +98,21 @@ const NewGroupForm = (props) => {
       />
       {errors?.name && (
         <p className={styles.formError}>
-          {t("groupNameError", "Please enter a group name.")}
+          {errors.name === "required"
+            ? t("groupNameError", "Please enter a group name.")
+            : errors.name}
         </p>
       )}
-      <FormLabel>Patients in group</FormLabel>
+      <FormLabel>
+        {patientList.length} {t("patientsInGroup", "Patients in group")}
+      </FormLabel>
       {errors?.patientList && (
         <p className={styles.formError}>
           {t("noPatientError", "Please enter at least one patient.")}
         </p>
       )}
       {!errors?.patientList && (
-        <ul>
+        <ul className={styles.patientList}>
           {patientList?.map((patient, index) => (
             <PatientRow
               patient={patient}
@@ -92,7 +130,7 @@ const NewGroupForm = (props) => {
           state={{
             selectPatientAction: updatePatientList,
             buttonProps: {
-              kind: "primary",
+              kind: "secondary",
             },
           }}
         />
@@ -101,17 +139,21 @@ const NewGroupForm = (props) => {
   );
 };
 
-const AddGroupModal = () => {
+const AddGroupModal = ({
+  patients = undefined,
+  isCreate = undefined,
+  groupName = "",
+  cohortUuid = undefined,
+  isOpen,
+  handleCancel,
+  onPostSubmit,
+}) => {
   const { setGroup } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
   const [errors, setErrors] = useState({});
-  const [name, setName] = useState("");
-  const [patientList, setPatientList] = useState([]);
-
-  const handleCancel = () => {
-    setOpen(false);
-  };
+  const [name, setName] = useState(groupName);
+  const [patientList, setPatientList] = useState(patients || []);
+  const { post, result, error } = usePostCohort();
 
   const removePatient = useCallback(
     (patientUuid: string) =>
@@ -165,21 +207,58 @@ const AddGroupModal = () => {
 
   const handleSubmit = () => {
     if (validate()) {
-      setGroup({ id: "1234", name: name, members: patientList });
+      post({
+        uuid: cohortUuid,
+        name: name,
+        cohortMembers: patientList.map((p) => ({ patient: p.uuid })),
+      });
+      if (onPostSubmit) {
+        onPostSubmit();
+      }
     }
   };
 
+  useEffect(() => {
+    if (result) {
+      setGroup({
+        ...result,
+        // the result doesn't come with cohortMembers.
+        // need to add it in based on our local state
+        cohortMembers: patientList.map((p) => ({ patient: { uuid: p.uuid } })),
+      });
+    }
+  }, [result, setGroup, patientList]);
+
+  useEffect(() => {
+    if (error) {
+      showToast({
+        kind: "error",
+        title: t("postError", "POST Error"),
+        description:
+          error.message ??
+          t("unknownPostError", "An unknown error occurred while saving data"),
+      });
+      if (error.fieldErrors) {
+        setErrors(
+          Object.fromEntries(
+            Object.entries(error.fieldErrors).map(([key, value]) => [
+              key,
+              value?.[0]?.message,
+            ])
+          )
+        );
+      }
+    }
+  }, [error, t]);
+
   return (
     <div className={styles.modal}>
-      <Button
-        onClick={() => setOpen(true)}
-        renderIcon={Add}
-        iconDescription="Add"
-      >
-        {t("createNewGroup", "Create New Group")}
-      </Button>
-      <ComposedModal open={open} onClose={() => setOpen(false)}>
-        <ModalHeader>{t("createNewGroup", "Create New Group")}</ModalHeader>
+      <ComposedModal open={isOpen} onClose={handleCancel}>
+        <ModalHeader>
+          {isCreate
+            ? t("createNewGroup", "Create New Group")
+            : t("editGroup", "Edit Group")}
+        </ModalHeader>
         <ModalBody>
           <NewGroupForm
             {...{
@@ -198,7 +277,7 @@ const AddGroupModal = () => {
             {t("cancel", "Cancel")}
           </Button>
           <Button kind="primary" onClick={handleSubmit}>
-            {t("createGroup", "Create Group")}
+            {isCreate ? t("createGroup", "Create Group") : t("save", "Save")}
           </Button>
         </ModalFooter>
       </ComposedModal>

package/src/add-group-modal/styles.scss

@@ -23,13 +23,23 @@
 
 .patientRow {
    display: flex;
+   align-items: center;
    width: "100%";
+   &:nth-child(odd) {
+    background-color: colors.$gray-20;
+  }
 }
 
 .patientName {
   flex-grow: 1;
-  padding: spacing.$spacing-02;
-  &:hover {
-    background-color: colors.$gray-20;
-  }
+  padding-left: spacing.$spacing-05;
+}
+
+.loading {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: spacing.$spacing-05;
 }

package/src/config-schema.ts

@@ -60,6 +60,28 @@ export const configSchema = {
     },
     _default: ["ICRC Forms", "Distress Scales"],
   },
+  groupSessionConcepts: {
+    sessionName: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Session Name",
+      _default: "e2559620-900b-4f66-ae41-0b9c4adfb654",
+    },
+    sessionDate: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Session Date",
+      _default: "ceaca505-6dff-4940-8a43-8c060a0924d7",
+    },
+    practitionerName: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Practitioner Name",
+      _default: "f1a2d58c-1a0e-4148-931a-aac224649fdc",
+    },
+    sessionNotes: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Session Notes",
+      _default: "fa8fedc0-c066-4da3-8dc1-2ad8621fc480",
+    },
+  },
 };
 
 export type Form = {

package/src/context/FormWorkflowContext.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useReducer } from "react";
 import reducer from "./FormWorkflowReducer";
 import { useParams, useLocation } from "react-router-dom";
+import useGetSystemSetting from "../hooks/useGetSystemSetting";
+import { useSession } from "@openmrs/esm-framework";
 interface ParamTypes {
   formUuid?: string;
 }
@@ -30,6 +32,8 @@ export const initialWorkflowState = {
   activeEncounterUuid: null, // pseudo field from state[activeFormUuid].encounterUuid
   patientUuids: [], // pseudo field from state[activeFormUuid].patientUuids
   encounters: {}, // pseudo field from state[activeFormUuid].encounters
+  singleSessionVisitTypeUuid: null,
+  userUuid: null, // UUID of the user to which this workflow state belongs to
 };
 
 const FormWorkflowContext = React.createContext({
@@ -38,6 +42,7 @@ const FormWorkflowContext = React.createContext({
 });
 
 const FormWorkflowProvider = ({ children }) => {
+  const { user } = useSession();
   const { formUuid } = useParams() as ParamTypes;
   const activeFormUuid = formUuid.split("&")[0];
   const { search } = useLocation();
@@ -46,6 +51,11 @@ const FormWorkflowProvider = ({ children }) => {
     ...initialWorkflowState,
     ...initialActions,
   });
+  const systemSetting = useGetSystemSetting(
+    "@openmrs/esm-fast-data-entry-app.groupSessionVisitTypeUuid"
+  );
+  const singleSessionVisitTypeUuid =
+    systemSetting?.result?.data?.results?.[0]?.value;
 
   const actions = useMemo(
     () => ({
@@ -54,6 +64,7 @@ const FormWorkflowProvider = ({ children }) => {
           type: "INITIALIZE_WORKFLOW_STATE",
           activeFormUuid,
           newPatientUuid,
+          userUuid: user.uuid,
         }),
       addPatient: (patientUuid) =>
         dispatch({ type: "ADD_PATIENT", patientUuid }),
@@ -72,7 +83,7 @@ const FormWorkflowProvider = ({ children }) => {
       destroySession: () => dispatch({ type: "DESTROY_SESSION" }),
       closeSession: () => dispatch({ type: "CLOSE_SESSION" }),
     }),
-    []
+    [user]
   );
 
   // if formUuid isn't a part of state yet, grab it from the url params
@@ -103,6 +114,7 @@ const FormWorkflowProvider = ({ children }) => {
         encounters:
           state.forms?.[state.activeFormUuid]?.encounters ??
           initialWorkflowState.encounters,
+        singleSessionVisitTypeUuid,
       }}
     >
       {children}

package/src/context/FormWorkflowReducer.ts

@@ -1,10 +1,13 @@
 import { navigate } from "@openmrs/esm-framework";
 import { initialWorkflowState } from "./FormWorkflowContext";
 
-export const fdeWorkflowStorageVersion = "1.0.13";
+export const fdeWorkflowStorageVersion = "1.1.0";
 export const fdeWorkflowStorageName = "openmrs:fastDataEntryWorkflowState";
 const persistData = (data) => {
-  localStorage.setItem(fdeWorkflowStorageName, JSON.stringify(data));
+  localStorage.setItem(
+    fdeWorkflowStorageName + ":" + data.userUuid,
+    JSON.stringify(data)
+  );
 };
 
 const initialFormState = {
@@ -18,7 +21,9 @@ const initialFormState = {
 const reducer = (state, action) => {
   switch (action.type) {
     case "INITIALIZE_WORKFLOW_STATE": {
-      const savedData = localStorage.getItem(fdeWorkflowStorageName);
+      const savedData = localStorage.getItem(
+        fdeWorkflowStorageName + ":" + action.userUuid
+      );
       const savedDataObject = savedData ? JSON.parse(savedData) : {};
       let newState: { [key: string]: unknown } = {};
       const newPatient = action.newPatientUuid
@@ -69,6 +74,7 @@ const reducer = (state, action) => {
             [action.activeFormUuid]: initialFormState,
           },
           activeFormUuid: action.activeFormUuid,
+          userUuid: action.userUuid,
         };
       }
       persistData(newState);
@@ -259,6 +265,8 @@ const reducer = (state, action) => {
         activeFormUuid: null,
       };
       persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: "${openmrsSpaBase}/forms" });
       return newState;
     }
     case "CLOSE_SESSION": {
@@ -267,6 +275,8 @@ const reducer = (state, action) => {
         activeFormUuid: null,
       };
       persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: "${openmrsSpaBase}/forms" });
       return newState;
     }
     default: