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

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

@@ -0,0 +1,209 @@
+import React, { useCallback, useContext, useState } from "react";
+import {
+  ComposedModal,
+  Button,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  TextInput,
+  FormLabel,
+} from "@carbon/react";
+import { Add, Close } from "@carbon/react/icons";
+import { useTranslation } from "react-i18next";
+import { ExtensionSlot } from "@openmrs/esm-framework";
+import styles from "./styles.scss";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+
+const MemExtension = React.memo(ExtensionSlot);
+
+const PatientRow = ({ patient, removePatient }) => {
+  const { t } = useTranslation();
+  return (
+    <li key={patient.uuid} className={styles.patientRow}>
+      <span className={styles.patientName}>{patient?.display}</span>
+      <span>
+        <Button
+          kind="tertiary"
+          size="sm"
+          onClick={() => removePatient(patient.uuid)}
+          renderIcon={Close}
+          tooltipPosition="right"
+        >
+          {t("remove", "Remove")}
+        </Button>
+      </span>
+    </li>
+  );
+};
+
+const NewGroupForm = (props) => {
+  const {
+    name,
+    setName,
+    patientList,
+    updatePatientList,
+    errors,
+    validate,
+    removePatient,
+  } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        rowGap: "1rem",
+      }}
+    >
+      <TextInput
+        labelText={t("newGroupName", "New Group Name")}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onBlur={() => validate("name")}
+      />
+      {errors?.name && (
+        <p className={styles.formError}>
+          {t("groupNameError", "Please enter a group name.")}
+        </p>
+      )}
+      <FormLabel>Patients in group</FormLabel>
+      {errors?.patientList && (
+        <p className={styles.formError}>
+          {t("noPatientError", "Please enter at least one patient.")}
+        </p>
+      )}
+      {!errors?.patientList && (
+        <ul>
+          {patientList?.map((patient, index) => (
+            <PatientRow
+              patient={patient}
+              removePatient={removePatient}
+              key={index}
+            />
+          ))}
+        </ul>
+      )}
+
+      <FormLabel>Search for patients to add to group</FormLabel>
+      <div className={styles.searchBar}>
+        <MemExtension
+          extensionSlotName="patient-search-bar-slot"
+          state={{
+            selectPatientAction: updatePatientList,
+            buttonProps: {
+              kind: "primary",
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const AddGroupModal = () => {
+  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 removePatient = useCallback(
+    (patientUuid: string) =>
+      setPatientList((patientList) =>
+        patientList.filter((patient) => patient.uuid !== patientUuid)
+      ),
+    [setPatientList]
+  );
+
+  const validate = useCallback(
+    (field?: string | undefined) => {
+      let valid = true;
+      if (field) {
+        valid = field === "name" ? !!name : !!patientList.length;
+        setErrors((errors) => ({
+          ...errors,
+          [field]: valid ? null : "required",
+        }));
+      } else {
+        if (!name) {
+          setErrors((errors) => ({ ...errors, name: "required" }));
+          valid = false;
+        } else {
+          setErrors((errors) => ({ ...errors, name: null }));
+        }
+        if (!patientList.length) {
+          setErrors((errors) => ({ ...errors, patientList: "required" }));
+          valid = false;
+        } else {
+          setErrors((errors) => ({ ...errors, patientList: null }));
+        }
+      }
+      return valid;
+    },
+    [name, patientList.length]
+  );
+
+  const updatePatientList = useCallback(
+    (patient) => {
+      setPatientList((patientList) => {
+        if (!patientList.find((p) => p.uuid === patient.uuid)) {
+          return [...patientList, patient];
+        } else {
+          return patientList;
+        }
+      });
+      setErrors((errors) => ({ ...errors, patientList: null }));
+    },
+    [setPatientList]
+  );
+
+  const handleSubmit = () => {
+    if (validate()) {
+      setGroup({ id: "1234", name: name, members: patientList });
+    }
+  };
+
+  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>
+        <ModalBody>
+          <NewGroupForm
+            {...{
+              name,
+              setName,
+              patientList,
+              updatePatientList,
+              errors,
+              validate,
+              removePatient,
+            }}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={handleCancel}>
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button kind="primary" onClick={handleSubmit}>
+            {t("createGroup", "Create Group")}
+          </Button>
+        </ModalFooter>
+      </ComposedModal>
+    </div>
+  );
+};
+
+export default AddGroupModal;

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

@@ -0,0 +1,35 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+
+.modal {
+  :global(.cds--modal) {
+    z-index: 90;
+  }
+  :global(.cds--modal-container) {
+    height: 600px;
+  }
+  :global(.cds--modal-content) {
+    height: 100%;
+  }
+}
+
+.searchBar > div > div > div {
+  width: 100%
+}
+
+.formError {
+  color: red;
+}
+
+.patientRow {
+   display: flex;
+   width: "100%";
+}
+
+.patientName {
+  flex-grow: 1;
+  padding: spacing.$spacing-02;
+  &:hover {
+    background-color: colors.$gray-20;
+  }
+}

package/src/config-schema.ts

@@ -1,46 +1,78 @@
-import { Type, validator } from "@openmrs/esm-framework";
+import { Type } from "@openmrs/esm-framework";
 
 /**
- * This is the config schema. It expects a configuration object which
- * looks like this:
+ * This is the config schema.
  *
- * ```json
- * { "casualGreeting": true, "whoToGreet": ["Mom"] }
- * ```
- *
- * In OpenMRS Microfrontends, all config parameters are optional. Thus,
- * all elements must have a reasonable default. A good default is one
- * that works well with the reference application.
- *
- * To understand the schema below, please read the configuration system
- * documentation:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- * Note especially the section "How do I make my module configurable?"
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
- * and the Schema Reference
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
  */
+
 export const configSchema = {
-  casualGreeting: {
-    _type: Type.Boolean,
-    _default: false,
-    _description: "Whether to use a casual greeting (or a formal one).",
-  },
-  whoToGreet: {
+  formCategories: {
     _type: Type.Array,
-    _default: ["World"],
     _description:
-      "Who should be greeted. Names will be separated by a comma and space.",
+      "Organize forms into categories. A form can belong to multiple categories.",
     _elements: {
-      _type: Type.String,
+      name: {
+        _type: Type.String,
+        _description: "Category name",
+      },
+      forms: {
+        _type: Type.Array,
+        _description: "List of forms for this category.",
+        _elements: {
+          formUUID: {
+            _type: Type.UUID,
+            _description: "UUID of form",
+          },
+          name: {
+            _type: Type.String,
+            _description: "Name of form",
+          },
+        },
+      },
     },
-    _validators: [
-      validator((v) => v.length > 0, "At least one person must be greeted."),
+    _default: [
+      {
+        name: "ICRC Forms",
+        forms: [
+          {
+            formUUID: "0cefb866-110c-4f16-af58-560932a1db1f",
+            name: "Adult Triage",
+          },
+        ],
+      },
+      {
+        name: "Distress Scales",
+        forms: [
+          {
+            formUUID: "9f26aad4-244a-46ca-be49-1196df1a8c9a",
+            name: "POC Sample Form 1",
+          },
+        ],
+      },
     ],
   },
+  formCategoriesToShow: {
+    _type: Type.Array,
+    _description: "Forms to show by default on the forms app home page.",
+    _elements: {
+      _type: Type.String,
+      _description: "Name of category",
+    },
+    _default: ["ICRC Forms", "Distress Scales"],
+  },
+};
+
+export type Form = {
+  formUUID: Type.UUID;
+  name: Type.String;
+};
+
+export type Category = {
+  name: string;
+  forms: Array<Form>;
 };
 
 export type Config = {
-  casualGreeting: boolean;
-  whoToGreet: Array<String>;
+  formCategories: Array<Category>;
+  formCategoriesToShow: Array<string>;
 };

package/src/context/FormWorkflowContext.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useMemo, useReducer } from "react";
+import reducer from "./FormWorkflowReducer";
+import { useParams, useLocation } from "react-router-dom";
+interface ParamTypes {
+  formUuid?: string;
+}
+
+const initialActions = {
+  addPatient: (uuid: string | number) => 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
+};
+
+const FormWorkflowContext = React.createContext({
+  ...initialWorkflowState,
+  ...initialActions,
+});
+
+const FormWorkflowProvider = ({ children }) => {
+  const { formUuid } = useParams() as ParamTypes;
+  const activeFormUuid = formUuid.split("&")[0];
+  const { search } = useLocation();
+  const newPatientUuid = new URLSearchParams(search).get("patientUuid");
+  const [state, dispatch] = useReducer(reducer, {
+    ...initialWorkflowState,
+    ...initialActions,
+  });
+
+  const actions = useMemo(
+    () => ({
+      initializeWorkflowState: ({ activeFormUuid, newPatientUuid }) =>
+        dispatch({
+          type: "INITIALIZE_WORKFLOW_STATE",
+          activeFormUuid,
+          newPatientUuid,
+        }),
+      addPatient: (patientUuid) =>
+        dispatch({ type: "ADD_PATIENT", patientUuid }),
+      openPatientSearch: () => dispatch({ type: "OPEN_PATIENT_SEARCH" }),
+      saveEncounter: (encounterUuid) =>
+        dispatch({
+          type: "SAVE_ENCOUNTER",
+          encounterUuid,
+        }),
+      submitForNext: () => dispatch({ type: "SUBMIT_FOR_NEXT" }),
+      submitForReview: () => dispatch({ type: "SUBMIT_FOR_REVIEW" }),
+      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, newPatientUuid });
+    }
+  }, [activeFormUuid, newPatientUuid, state?.workflowState, actions]);
+
+  return (
+    <FormWorkflowContext.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,
+      }}
+    >
+      {children}
+    </FormWorkflowContext.Provider>
+  );
+};
+
+export default FormWorkflowContext;
+export { FormWorkflowProvider };