@openmrs/esm-fast-data-entry-app 1.0.0-pre.11 → 1.0.0-pre.17

package/src/FormEntry.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { ExtensionSlot } from "@openmrs/esm-framework";
+import useGetPatient from "./forms/useGetPatient";
+interface FormParams {
+  formUuid: string;
+  patientUuid: string;
+  visitUuid?: string;
+  visitTypeUuid?: string;
+  encounterUuid?: string;
+}
+
+const FormEntry = ({
+  formUuid,
+  patientUuid,
+  visitUuid,
+  visitTypeUuid,
+  encounterUuid,
+}: 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: () => {},
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FormEntry;

package/src/Loader.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./loader.scss";
+import { InlineLoading } from "carbon-components-react";
+import { useTranslation } from "react-i18next";
+
+const Loader: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <InlineLoading
+      className={styles.loading}
+      description={`${t("loading", "Loading")} ...`}
+    />
+  );
+};
+
+export default Loader;

package/src/Root.tsx

@@ -1,13 +1,17 @@
 import React from "react";
-import { BrowserRouter, Route } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { appPath } from "./constant";
-import FormsRoot from "./forms/FormsRoot";
+const FormsRoot = React.lazy(() => import("./forms/FormsRoot"));
+const FormWorkflow = React.lazy(() => import("./forms/FormWorkflow"));
 
 const Root = () => {
   return (
     <main>
       <BrowserRouter basename={appPath}>
-        <Route path="/:tab?" component={FormsRoot} />
+        <Switch>
+          <Route exact path="/" children={<FormsRoot />} />
+          <Route path="/:formUuid?" children={<FormWorkflow />} />
+        </Switch>
       </BrowserRouter>
     </main>
   );

package/src/forms/FormWorkflow.tsx

@@ -0,0 +1,135 @@
+import { Add20, Close20 } from "@carbon/icons-react";
+import { ExtensionSlot } from "@openmrs/esm-framework";
+import { Button } from "carbon-components-react";
+import React, { useState } from "react";
+import { useParams } from "react-router-dom";
+import FormEntry from "../FormEntry";
+import PatientCard from "./PatientCard";
+import PatientInfo from "./PatientInfo";
+import styles from "./styles.scss";
+
+const PatientSearchHeader = ({
+  patientUuids,
+  setPatientUuids,
+  setActivePatientUuid,
+}) => {
+  const handleSelectPatient = (uuid) => {
+    setPatientUuids([...patientUuids, uuid]), setActivePatientUuid(uuid);
+  };
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        backgroundColor: "white",
+        padding: "2rem 1rem",
+      }}
+    >
+      <span style={{ padding: "1rem" }}>Next patient:</span>
+      <span style={{ minWidth: "35rem" }}>
+        <ExtensionSlot
+          extensionSlotName="patient-search-bar-slot"
+          state={{
+            selectPatientAction: handleSelectPatient,
+            buttonProps: {
+              kind: "primary",
+            },
+          }}
+        />
+      </span>
+      <span style={{ padding: "1rem" }}>or</span>
+      <span>
+        <Button disabled>
+          Create new patient <Add20 />
+        </Button>
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Button kind="ghost" disabled>
+          Cancel <Close20 />
+        </Button>
+      </span>
+    </div>
+  );
+};
+
+interface ParamTypes {
+  formUuid: string;
+}
+
+const FormWorkflow = () => {
+  const { formUuid } = useParams() as ParamTypes;
+  const [patientUuids, setPatientUuids] = useState([]);
+  const [activePatientUuid, setActivePatientUuid] = useState(null);
+
+  return (
+    <div>
+      <div className={styles.breadcrumbsContainer}>
+        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+      </div>
+      {!activePatientUuid && (
+        <PatientSearchHeader
+          {...{ patientUuids, setPatientUuids, setActivePatientUuid }}
+        />
+      )}
+      {activePatientUuid && <PatientInfo patientUuid={activePatientUuid} />}
+      <div style={{ display: "flex", justifyContent: "center" }}>
+        <div style={{ width: "1100px" }}>
+          {!patientUuids.length && (
+            <div style={{ margin: "2rem", textAlign: "center" }}>
+              Please select a patient first
+            </div>
+          )}
+          {!!patientUuids.length && (
+            <div className={styles.formContainer}>
+              <div style={{ flexGrow: 1 }}>
+                <FormEntry
+                  patientUuid={activePatientUuid}
+                  {...{
+                    formUuid,
+                  }}
+                />
+              </div>
+              <div style={{ width: "13rem", textAlign: "left" }}>
+                <h4>Forms filled</h4>
+                <div
+                  style={{
+                    margin: "1rem 0",
+                    borderBottom: "1px solid #f4f4f4",
+                  }}
+                >
+                  {patientUuids.map((patientUuid) => (
+                    <PatientCard patientUuid={patientUuid} key={patientUuid} />
+                  ))}
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    rowGap: "0.5rem",
+                  }}
+                >
+                  <Button
+                    kind="primary"
+                    onClick={() => setActivePatientUuid(null)}
+                    style={{ width: "100%" }}
+                  >
+                    Next Patient
+                  </Button>
+                  <Button kind="secondary" disabled style={{ width: "100%" }}>
+                    Review & Save
+                  </Button>
+                  <Button kind="tertiary" disabled style={{ width: "100%" }}>
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FormWorkflow;

package/src/forms/FormsRoot.tsx

@@ -1,11 +1,9 @@
 import { openmrsFetch, useConfig } from "@openmrs/esm-framework";
 import { Tab, Tabs } from "carbon-components-react";
 import React from "react";
-import { from } from "rxjs";
 import useSWR from "swr";
 import { Config } from "../config-schema";
 import FormsTable from "./FormsTable";
-import { tableData } from "./mockData";
 
 export const customFormRepresentation =
   "(uuid,name,display,encounterType:(uuid,name,viewPrivilege,editPrivilege),version,published,retired,resources:(uuid,name,dataType,valueReference))";
@@ -38,12 +36,10 @@ const cleanForms = (rawFormData) => {
   }
 };
 
-const FormsRoot = ({ match }) => {
-  const { tab } = match?.params;
+const FormsRoot = () => {
   const config = useConfig() as Config;
   const { formCategories, formCategoriesToShow } = config;
   const { data: forms } = useFormEncounters();
-  const { rows: mockRows } = tableData;
   const cleanRows = cleanForms(forms);
 
   const categoryRows = formCategoriesToShow.map((name) => {

package/src/forms/FormsTable.tsx

@@ -13,7 +13,7 @@ import {
   TableToolbarSearch,
 } from "carbon-components-react";
 import React from "react";
-import { tableData } from "./mockData";
+import { Link } from "react-router-dom";
 
 const formsHeader = [
   {
@@ -29,7 +29,7 @@ const formsHeader = [
 const FormsTable = ({ rows }) => {
   const augmenteRows = rows?.map((row) => ({
     ...row,
-    actions: "Fill Form",
+    actions: <Link to={row.uuid}>Fill Form</Link>,
   }));
   if (!rows || !rows?.length) {
     return <DataTableSkeleton />;

package/src/forms/PatientCard.tsx

@@ -0,0 +1,37 @@
+import { SkeletonText } from "carbon-components-react";
+import React from "react";
+import useGetPatient from "./useGetPatient";
+
+const CardContainer = ({ children }) => {
+  return <div style={{ padding: "1rem" }}>{children}</div>;
+};
+
+const PatientCard = ({ patientUuid }) => {
+  const patient = useGetPatient(patientUuid);
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  if (!patient) {
+    return (
+      <CardContainer>
+        <SkeletonText style={{ maxWidth: "8rem" }} />
+      </CardContainer>
+    );
+  }
+
+  return (
+    <CardContainer>
+      <div
+        style={{ fontWeight: 300, fontSize: "0.8rem", lineHeight: "0.9rem" }}
+      >
+        {identifier}
+      </div>
+      <div style={{ fontWeight: "bold" }}>
+        {givenName} {familyName}
+      </div>
+    </CardContainer>
+  );
+};
+
+export default PatientCard;

package/src/forms/PatientInfo.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import PatientInfo from "./PatientInfo";
+
+describe("PatientInfo", () => {
+  it("renders placeholder information when no data is present", () => {
+    render(<PatientInfo patientUuid={null} />);
+  });
+});

package/src/forms/PatientInfo.tsx

@@ -0,0 +1,140 @@
+import {
+  age,
+  ExtensionSlot,
+  formatDate,
+  parseDate,
+} from "@openmrs/esm-framework";
+import {
+  Button,
+  SkeletonPlaceholder,
+  SkeletonText,
+} from "carbon-components-react";
+import React, { useState } from "react";
+import styles from "./patient-info.scss";
+import ChevronDown16 from "@carbon/icons-react/es/chevron--down/16";
+import ChevronUp16 from "@carbon/icons-react/es/chevron--up/16";
+import { useTranslation } from "react-i18next";
+import useGetPatient from "./useGetPatient";
+interface PatientInfoProps {
+  patientUuid: string;
+}
+
+const SkeletonPatientInfo = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.patientInfoContainer}>
+        <SkeletonPlaceholder />
+        <div className={styles.patientInfoContent}>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.patientName}>
+              <SkeletonText />
+            </span>
+          </div>
+          <div className={styles.patientInfoRow}>
+            <div className={styles.demographics}>
+              <span>
+                <SkeletonText />
+              </span>
+              <span>
+                <SkeletonText />
+              </span>
+              <span>
+                <SkeletonText />
+              </span>
+            </div>
+          </div>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.identifier}>
+              <SkeletonText />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PatientInfo: React.FC<PatientInfoProps> = ({ patientUuid }) => {
+  const patient = useGetPatient(patientUuid);
+  const { t } = useTranslation();
+  const [showContactDetails, setShowContactDetails] = useState<boolean>(false);
+  const patientName = `${patient?.name?.[0].given?.join(" ")} ${
+    patient?.name?.[0]?.family
+  }`;
+
+  const patientPhotoSlotState = React.useMemo(
+    () => ({ patientUuid: patient?.id, patientName }),
+    [patient?.id, patientName]
+  );
+
+  const toggleShowMore = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowContactDetails((prevState) => !prevState);
+  };
+
+  if (!patient) {
+    return <SkeletonPatientInfo />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={`${
+          showContactDetails
+            ? styles.activePatientInfoContainer
+            : styles.patientInfoContainer
+        }`}
+      >
+        <ExtensionSlot
+          extensionSlotName="patient-photo-slot"
+          state={patientPhotoSlotState}
+        />
+        <div className={styles.patientInfoContent}>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.patientName}>{patientName}</span>
+          </div>
+          <div className={styles.patientInfoRow}>
+            <div className={styles.demographics}>
+              <span>
+                {(patient.gender ?? t("unknown", "Unknown")).replace(
+                  /^\w/,
+                  (c) => c.toUpperCase()
+                )}{" "}
+                &middot;{" "}
+              </span>
+              <span>{age(patient.birthDate)} &middot; </span>
+              <span>
+                {formatDate(parseDate(patient.birthDate), {
+                  mode: "wide",
+                  time: false,
+                })}
+              </span>
+            </div>
+          </div>
+          <div className={styles.patientInfoRow}>
+            <span className={styles.identifier}>
+              {patient.identifier.length
+                ? patient.identifier
+                    .map((identifier) => identifier.value)
+                    .join(", ")
+                : "--"}
+            </span>
+            <Button
+              kind="ghost"
+              renderIcon={showContactDetails ? ChevronUp16 : ChevronDown16}
+              iconDescription="Toggle contact details"
+              onClick={(e) => toggleShowMore(e)}
+              disabled
+            >
+              {showContactDetails
+                ? t("showLess", "Show less")
+                : t("showAllDetails", "Show all details")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PatientInfo;

package/src/forms/patient-info.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';
+
+.container {
+  border-bottom: 0.0125rem solid $color-gray-30;
+  background-color: $ui-02;
+  padding: 0;
+}
+
+.patientInfoContainer {
+  padding: 0 0 0 $spacing-05;
+  display: flex;
+  align-items: center;
+  min-height: 7rem;
+}
+
+.activePatientInfoContainer {
+  background-color: $color-blue-10;
+  padding: 0 0 0 $spacing-05;
+  display: flex;
+  align-items: center;
+  min-height: 7rem;
+}
+
+.patientName {
+  @include carbon--type-style('productive-heading-03');
+}
+
+.patientInfoContent {
+  margin: $spacing-05 0 0 $spacing-05;
+  width: 100%;
+}
+
+.demographics {
+  @include carbon--type-style('body-short-02');
+  color: $text-02;
+  margin-top: $spacing-02;
+}
+
+.identifier {
+  @include carbon--type-style('body-short-02');
+  color: $ui-04;
+}
+
+.patientInfoRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & > button {
+    min-height: 2rem;
+  }
+}
+
+.patientEditBtn {
+  color: $ui-05;
+  margin: $spacing-03;
+}

package/src/forms/styles.scss

@@ -0,0 +1,13 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.breadcrumbsContainer > div > div > nav {
+  background-color: white;
+  padding: 0.5rem;
+  border-bottom: 1px solid $openmrs-background-grey;
+}
+
+.formContainer {
+  display: flex;
+  text-align: center;
+  margin-top: 1rem;
+}

package/src/forms/useGetPatient.ts

@@ -0,0 +1,23 @@
+import { fetchCurrentPatient } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+const useGetPatient = (patientUuid) => {
+  const [patient, setPatient] = useState(null);
+
+  useEffect(() => {
+    if (!patientUuid) {
+      setPatient(null);
+    } else {
+      getPatient(patientUuid);
+    }
+  }, [patientUuid]);
+
+  const getPatient = async (uuid) => {
+    const result = await fetchCurrentPatient(uuid);
+    setPatient(result?.data);
+  };
+
+  return patient;
+};
+
+export default useGetPatient;

package/src/index.ts

@@ -5,7 +5,11 @@
  * microfrontend.
  */
 
-import { getAsyncLifecycle, defineConfigSchema } from "@openmrs/esm-framework";
+import {
+  getAsyncLifecycle,
+  defineConfigSchema,
+  registerBreadcrumbs,
+} from "@openmrs/esm-framework";
 import { configSchema } from "./config-schema";
 
 /**
@@ -53,6 +57,14 @@ function setupOpenMRS() {
 
   defineConfigSchema(moduleName, configSchema);
 
+  registerBreadcrumbs([
+    {
+      path: `${window.spaBase}/forms`,
+      title: "Forms",
+      parent: `${window.spaBase}/home`,
+    },
+  ]);
+
   return {
     pages: [
       {

package/src/loader.scss

@@ -0,0 +1,9 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+
+.loading {
+  display: flex;
+  background-color: $openmrs-background-grey;
+  justify-content: center;
+  min-height: $spacing-09;
+}

package/tsconfig.json

@@ -1,23 +1,26 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "module": "esnext",
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "lib": [
-      "dom",
-      "es5",
-      "scripthost",
-      "es2015",
-      "es2015.promise",
-      "es2016.array.include",
-      "es2018",
-      "es2020"
-    ],
-    "resolveJsonModule": true,
-    "noEmit": true,
-    "target": "esnext"
-  }
-}
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext",
+    // "paths": {
+    //   "@openmrs/*": ["./node_modules/@openmrs/*"]
+    // }
+  }
+}

package/.husky/pre-commit

@@ -1,6 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-set -e  # die on error
-
-npx pretty-quick --staged

package/.husky/pre-push

@@ -1,6 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-set -e  # die on error
-
-yarn verify