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

package/src/FormBootstrap.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from "react";
+import { detach, ExtensionSlot } from "@openmrs/esm-framework";
+import useGetPatient from "./hooks/useGetPatient";
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dose: number;
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  orderNumber: number;
+  display: string;
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderer: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  auditInfo: {
+    dateVoided: string;
+  };
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: unknown;
+  obsDatetime: string;
+}
+
+export interface Encounter {
+  uuid: string;
+  encounterDatetime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<Observation>;
+  orders: Array<Order>;
+}
+interface FormParams {
+  formUuid: string;
+  patientUuid: string;
+  visitUuid?: string;
+  visitTypeUuid?: string;
+  encounterUuid?: string;
+  showDiscardSubmitButtons?: boolean;
+  handlePostResponse?: (Encounter) => void;
+  handleEncounterCreate?: (Object) => void;
+  handleOnValidate?: (boolean) => void;
+}
+
+const FormBootstrap = ({
+  formUuid,
+  patientUuid,
+  visitUuid,
+  visitTypeUuid,
+  encounterUuid,
+  handlePostResponse,
+  handleEncounterCreate,
+  handleOnValidate,
+}: FormParams) => {
+  const patient = useGetPatient(patientUuid);
+
+  useEffect(() => {
+    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>
+      {showForm && formUuid && patientUuid && patient && (
+        <ExtensionSlot
+          name="form-widget-slot"
+          state={{
+            view: "form",
+            formUuid,
+            visitUuid: visitUuid ?? "",
+            visitTypeUuid: visitTypeUuid ?? "",
+            patientUuid,
+            patient,
+            encounterUuid: encounterUuid ?? "",
+            closeWorkspace: () => undefined,
+            handlePostResponse,
+            handleEncounterCreate,
+            handleOnValidate,
+            showDiscardSubmitButtons: false,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FormBootstrap;

package/src/Root.tsx

@@ -1,13 +1,24 @@
 import React from "react";
-import { BrowserRouter, Route } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { appPath } from "./constant";
-import FormsRoot from "./forms/FormsRoot";
+const FormsPage = React.lazy(() => import("./forms-page"));
+const FormEntryWorkflow = React.lazy(() => import("./form-entry-workflow"));
+const GroupFormEntryWorkflow = React.lazy(
+  () => import("./group-form-entry-workflow")
+);
 
 const Root = () => {
   return (
     <main>
       <BrowserRouter basename={appPath}>
-        <Route path="/:tab?" component={FormsRoot} />
+        <Routes>
+          <Route path="/" element={<FormsPage />} />
+          <Route path="/form/:formUuid" element={<FormEntryWorkflow />} />
+          <Route
+            path="/groupform/:formUuid"
+            element={<GroupFormEntryWorkflow />}
+          />
+        </Routes>
       </BrowserRouter>
     </main>
   );

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

@@ -0,0 +1,288 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  ComposedModal,
+  Button,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  TextInput,
+  FormLabel,
+} from "@carbon/react";
+import { TrashCan } from "@carbon/react/icons";
+import { useTranslation } from "react-i18next";
+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>
+        <Button
+          kind="tertiary"
+          size="sm"
+          hasIconOnly
+          onClick={onClickHandler}
+          renderIcon={TrashCan}
+          tooltipAlignment="start"
+          tooltipPosition="top"
+          iconDescription={t("remove", "Remove")}
+        />
+      </span>
+      <span className={styles.patientName}>{patientDisplay}</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}>
+          {errors.name === "required"
+            ? t("groupNameError", "Please enter a group name.")
+            : errors.name}
+        </p>
+      )}
+      <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 className={styles.patientList}>
+          {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: "secondary",
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const AddGroupModal = ({
+  patients = undefined,
+  isCreate = undefined,
+  groupName = "",
+  cohortUuid = undefined,
+  isOpen,
+  handleCancel,
+  onPostSubmit,
+}) => {
+  const { setGroup } = useContext(GroupFormWorkflowContext);
+  const { t } = useTranslation();
+  const [errors, setErrors] = useState({});
+  const [name, setName] = useState(groupName);
+  const [patientList, setPatientList] = useState(patients || []);
+  const { post, result, error } = usePostCohort();
+
+  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()) {
+      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}>
+      <ComposedModal open={isOpen} onClose={handleCancel}>
+        <ModalHeader>
+          {isCreate
+            ? t("createNewGroup", "Create New Group")
+            : t("editGroup", "Edit 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}>
+            {isCreate ? t("createGroup", "Create Group") : t("save", "Save")}
+          </Button>
+        </ModalFooter>
+      </ComposedModal>
+    </div>
+  );
+};
+
+export default AddGroupModal;

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

@@ -0,0 +1,45 @@
+@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;
+   align-items: center;
+   width: "100%";
+   &:nth-child(odd) {
+    background-color: colors.$gray-20;
+  }
+}
+
+.patientName {
+  flex-grow: 1;
+  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

@@ -1,46 +1,100 @@
-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"],
+  },
+  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 = {
+  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>;
 };