@openmrs/esm-fast-data-entry-app 1.0.0-pre.19 → 1.0.0-pre.25

package/src/FormBootstrap.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import { 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: any;
+  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;
+  handlePostResponse?: (Encounter) => void;
+}
+
+const FormBootstrap = ({
+  formUuid,
+  patientUuid,
+  visitUuid,
+  visitTypeUuid,
+  encounterUuid,
+  handlePostResponse,
+}: FormParams) => {
+  const patient = useGetPatient(patientUuid);
+
+  return (
+    <div>
+      {formUuid && patientUuid && patient && (
+        <ExtensionSlot
+          extensionSlotName="form-widget-slot"
+          state={{
+            view: "form",
+            formUuid,
+            visitUuid: visitUuid ?? "",
+            visitTypeUuid: visitTypeUuid ?? "",
+            patientUuid,
+            patient,
+            encounterUuid: encounterUuid ?? "",
+            closeWorkspace: () => {},
+            handlePostResponse,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FormBootstrap;

package/src/Root.tsx

@@ -1,18 +1,21 @@
 import React from "react";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { appPath } from "./constant";
-const FormsRoot = React.lazy(() => import("./forms/FormsRoot"));
-const FormWorkflow = React.lazy(() => import("./forms/FormWorkflow"));
+import { FormWorkflowProvider } from "./context/FormWorkflowContext";
+const FormsPage = React.lazy(() => import("./forms-page"));
+const FormEntryWorkflow = React.lazy(() => import("./form-entry-workflow"));
 
 const Root = () => {
   return (
     <main>
-      <BrowserRouter basename={appPath}>
-        <Switch>
-          <Route exact path="/" children={<FormsRoot />} />
-          <Route path="/:formUuid?" children={<FormWorkflow />} />
-        </Switch>
-      </BrowserRouter>
+      <FormWorkflowProvider>
+        <BrowserRouter basename={appPath}>
+          <Switch>
+            <Route exact path="/" children={<FormsPage />} />
+            <Route path="/:formUuid?" children={<FormEntryWorkflow />} />
+          </Switch>
+        </BrowserRouter>
+      </FormWorkflowProvider>
     </main>
   );
 };

package/src/context/FormWorkflowContext.tsx

@@ -0,0 +1,40 @@
+import React, { useReducer } from "react";
+import reducer from "./FormWorkflowReducer";
+
+const initialState = {
+  patientUuids: [],
+  activePatientUuid: null,
+  activeEncounterUuid: null,
+  encounters: {},
+  addPatient: (uuid: string | number) => {},
+  openPatientSearch: () => {},
+  saveEncounter: (encounterUuid: string | number) => {},
+  editEncounter: (patientUuid: string | number) => {},
+};
+
+const FormWorkflowContext = React.createContext(initialState);
+
+const FormWorkflowProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const actions = {
+    addPatient: (patientUuid) =>
+      dispatch({ type: "ADD_PATIENT", patientUuid: patientUuid }),
+    openPatientSearch: () => dispatch({ type: "OPEN_PATIENT_SEARCH" }),
+    saveEncounter: (encounterUuid) =>
+      dispatch({
+        type: "SAVE_ENCOUNTER",
+        encounterUuid,
+      }),
+    editEncounter: (patientUuid) =>
+      dispatch({ type: "EDIT_ENCOUNTER", patientUuid }),
+  };
+  return (
+    <FormWorkflowContext.Provider value={{ ...state, ...actions }}>
+      {children}
+    </FormWorkflowContext.Provider>
+  );
+};
+
+export default FormWorkflowContext;
+export { FormWorkflowProvider };

package/src/context/FormWorkflowReducer.ts

@@ -0,0 +1,38 @@
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_PATIENT":
+      return {
+        ...state,
+        patientUuids: [...state.patientUuids, action.patientUuid],
+        activePatientUuid: action.patientUuid,
+        activeEncounterUuid: null,
+      };
+    case "OPEN_PATIENT_SEARCH":
+      // this will need to be updated once AMPATH hook is available
+      return {
+        ...state,
+        activePatientUuid: null,
+        activeEncounterUuid: null,
+      };
+    case "SAVE_ENCOUNTER":
+      return {
+        ...state,
+        encounters: {
+          ...state.encounters,
+          [state.activePatientUuid]: action.encounterUuid,
+        },
+        activePatientUuid: null,
+        activeEncounterUuid: null,
+      };
+    case "EDIT_ENCOUNTER":
+      return {
+        ...state,
+        activeEncounterUuid: state.encounters[action.patientUuid],
+        activePatientUuid: action.patientUuid,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/empty-state/EmptyDataIllustration.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={17.636}
+          cy={2.314}
+          r={1.175}
+        />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle
+          fill="#FFF"
+          fillRule="nonzero"
+          cx={40.218}
+          cy={9.755}
+          r={1.13}
+        />
+      </g>
+    </svg>
+  );
+};

package/src/empty-state/EmptyState.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Tile } from "carbon-components-react";
+import styles from "./styles.scss";
+import { useLayoutType } from "@openmrs/esm-framework";
+import { EmptyDataIllustration } from "./EmptyDataIllustration";
+
+export interface EmptyStateProps {
+  headerTitle: string;
+  displayText: string;
+}
+const EmptyState: React.FC<EmptyStateProps> = ({
+  headerTitle,
+  displayText,
+}) => {
+  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>
+  );
+};
+
+export default EmptyState;
+export { EmptyState };

package/src/empty-state/styles.scss

@@ -0,0 +1,55 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.action {
+  margin-bottom: $spacing-03;
+}
+
+.content {
+  @include carbon--type-style("productive-heading-01");
+  color: $text-02;
+  margin-top: $spacing-05;
+  margin-bottom: $spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include carbon--type-style('productive-heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: $spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}

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

@@ -0,0 +1,88 @@
+import { ExtensionSlot } from "@openmrs/esm-framework";
+import { Button } from "carbon-components-react";
+import React, { useContext, useState } from "react";
+import { useHistory, useParams } 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";
+
+interface ParamTypes {
+  formUuid: string;
+}
+
+const FormEntryWorkflow = () => {
+  const { formUuid } = useParams() as ParamTypes;
+  const history = useHistory();
+  const {
+    patientUuids,
+    activePatientUuid,
+    activeEncounterUuid,
+    openPatientSearch,
+    saveEncounter,
+  } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
+
+  const handlePostResponse = (encounter) => {
+    if (encounter && encounter.uuid) {
+      saveEncounter(encounter.uuid);
+    }
+  };
+
+  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>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FormEntryWorkflow;

package/src/form-entry-workflow/index.ts

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

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

@@ -0,0 +1,59 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+
+.breadcrumbsContainer > div > div > nav {
+  background-color: white;
+  padding: 0.5rem;
+  border-bottom: 1px solid $openmrs-background-grey;
+}
+
+.workspaceWrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.workspace {
+  width: 1100px;
+}
+
+.selectPatientMessage {
+  @include carbon--type-style('productive-heading-03');
+  margin: $spacing-07;
+  text-align: center;
+}
+
+.formMainContent {
+  display: flex;
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.formContainer {
+  flex-grow: 1;
+  max-height: calc(100vh - 14rem);
+}
+
+.rightPanel {
+  width: 13rem;
+  text-align: left;
+}
+
+.patientCardsSection {
+  margin: 1rem 0;
+  border-bottom: 1px solid $carbon--gray-10;
+}
+
+.rightPanelActionButtons {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+  & button {
+    width: 100%;
+    text-decoration: "none";
+    & :hover {
+      background-color: $carbon--gray-30;
+    }
+  }
+}

package/src/forms-page/FormsPage.tsx

@@ -0,0 +1,54 @@
+import { useConfig } from "@openmrs/esm-framework";
+import { Tab, Tabs } from "carbon-components-react";
+import React from "react";
+import { Config } from "../config-schema";
+import { useGetAllForms } from "../hooks";
+import FormsTable from "../forms-table";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+
+const cleanForms = (rawFormData) => {
+  if (rawFormData) {
+    return rawFormData?.map((form) => ({
+      ...form,
+      id: form.uuid,
+    }));
+  }
+  return null;
+};
+
+const FormsPage = () => {
+  const config = useConfig() as Config;
+  const { t } = useTranslation();
+  const { formCategories, formCategoriesToShow } = config;
+  const { forms, isLoading, error } = useGetAllForms();
+  const cleanRows = cleanForms(forms);
+
+  const categoryRows = formCategoriesToShow.map((name) => {
+    const category = formCategories.find((category) => category.name === name);
+    let rows = [];
+    if (category && cleanRows && cleanRows.length) {
+      const uuids = category.forms?.map((form) => form.formUUID);
+      rows = cleanRows.filter((row) => uuids.includes(row.uuid));
+    }
+    return { ...{ name, rows } };
+  });
+
+  return (
+    <div className={styles.mainContent}>
+      <h3 className={styles.pageTitle}>{t("forms", "Forms")}</h3>
+      <Tabs type="container">
+        <Tab label={t("allForms", "All Forms")}>
+          <FormsTable rows={cleanRows} {...{ error, isLoading }} />
+        </Tab>
+        {categoryRows?.map((category, index) => (
+          <Tab label={category.name} key={index}>
+            <FormsTable rows={category.rows} {...{ error, isLoading }} />
+          </Tab>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+
+export default FormsPage;

package/src/forms-page/index.ts

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

package/src/forms-page/styles.scss

@@ -0,0 +1,11 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.mainContent {
+  padding: $spacing-07;
+}
+
+.pageTitle {
+  margin-bottom: $spacing-06;
+}