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

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,33 @@
+import React from "react";
+import { Tile, Layer } from "@carbon/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 (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div
+          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
+        >
+          <h4>{headerTitle}</h4>
+        </div>
+        <EmptyDataIllustration />
+        <p className={styles.content}>{displayText}</p>
+      </Tile>
+    </Layer>
+  );
+};
+
+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,230 @@
+import {
+  ExtensionSlot,
+  getGlobalStore,
+  useStore,
+} from "@openmrs/esm-framework";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from "@carbon/react";
+import React, { useContext, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import FormBootstrap from "../FormBootstrap";
+import PatientCard from "../patient-card/PatientCard";
+import styles from "./styles.scss";
+import PatientSearchHeader from "./patient-search-header";
+import { useTranslation } from "react-i18next";
+import FormWorkflowContext, {
+  FormWorkflowProvider,
+} from "../context/FormWorkflowContext";
+import WorkflowReview from "./workflow-review";
+import PatientBanner from "./patient-banner";
+
+const formStore = getGlobalStore("ampath-form-state");
+
+const CancelModal = ({ open, setOpen }) => {
+  const { destroySession, closeSession } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const discard = async () => {
+    await destroySession();
+    setOpen(false);
+    navigate("../");
+  };
+
+  const saveAndClose = async () => {
+    await closeSession();
+    setOpen(false);
+    navigate("../");
+  };
+
+  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={() => setOpen(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="danger" onClick={discard}>
+          {t("discard", "Discard")}
+        </Button>
+        <Button kind="primary" onClick={saveAndClose}>
+          {t("saveSession", "Save Session")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+const CompleteModal = ({ open, setOpen }) => {
+  const { submitForComplete } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
+
+  const completeSession = () => {
+    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={() => setOpen(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="primary" onClick={completeSession}>
+          {t("complete", "Complete")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+const WorkflowNavigationButtons = () => {
+  const { activeFormUuid, submitForNext, workflowState, destroySession } =
+    useContext(FormWorkflowContext);
+  const store = useStore(formStore);
+  const formState = store[activeFormUuid];
+  const navigationDisabled = formState !== "ready";
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  const [completeModalOpen, setCompleteModalOpen] = useState(false);
+  const { t } = useTranslation();
+
+  if (!workflowState) return null;
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button
+          kind="primary"
+          onClick={() => submitForNext()}
+          disabled={navigationDisabled || workflowState === "NEW_PATIENT"}
+        >
+          {t("nextPatient", "Next Patient")}
+        </Button>
+        <Button
+          kind="secondary"
+          onClick={
+            workflowState === "NEW_PATIENT"
+              ? () => destroySession()
+              : () => setCompleteModalOpen(true)
+          }
+        >
+          {t("saveAndComplete", "Save & Complete")}
+        </Button>
+        <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} />
+    </>
+  );
+};
+
+const FormWorkspace = () => {
+  const {
+    patientUuids,
+    activePatientUuid,
+    activeEncounterUuid,
+    saveEncounter,
+    activeFormUuid,
+    editEncounter,
+    encounters,
+  } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
+
+  const handlePostResponse = (encounter) => {
+    if (encounter && encounter.uuid) {
+      saveEncounter(encounter.uuid);
+    }
+  };
+
+  return (
+    <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: activeFormUuid,
+                handlePostResponse,
+              }}
+            />
+          </div>
+          <div className={styles.rightPanel}>
+            <h4>Forms filled</h4>
+            <div className={styles.patientCardsSection}>
+              {patientUuids.map((patientUuid) => (
+                <PatientCard
+                  key={patientUuid}
+                  {...{
+                    patientUuid,
+                    activePatientUuid,
+                    editEncounter,
+                    encounters,
+                  }}
+                />
+              ))}
+            </div>
+            <WorkflowNavigationButtons />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const FormEntryWorkflow = () => {
+  const { workflowState } = useContext(FormWorkflowContext);
+  return (
+    <>
+      <div className={styles.breadcrumbsContainer}>
+        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+      </div>
+      {workflowState === "REVIEW" && <WorkflowReview />}
+      {workflowState !== "REVIEW" && (
+        <>
+          <PatientSearchHeader />
+          <PatientBanner />
+          <div className={styles.workspaceWrapper}>
+            <FormWorkspace />
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+const FormEntryWorkflowWrapper = () => {
+  return (
+    <FormWorkflowProvider>
+      <FormEntryWorkflow />
+    </FormWorkflowProvider>
+  );
+};
+
+export default FormEntryWorkflowWrapper;

package/src/form-entry-workflow/form-review-card/FormReviewCard.tsx

@@ -0,0 +1,50 @@
+import { Accordion, AccordionItem, Button } from "@carbon/react";
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
+import { useGetPatient, useGetEncounter } from "../../hooks";
+import styles from "./styles.scss";
+
+const FormReviewCard = ({ patientUuid }) => {
+  const { encounters, editEncounter } = useContext(FormWorkflowContext);
+  const patient = useGetPatient(patientUuid);
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+  const encounterUuid = encounters?.[patientUuid];
+  const { encounter } = useGetEncounter(encounterUuid);
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.formReviewCard}>
+      <Accordion align="start">
+        <AccordionItem
+          title={
+            <>
+              <span className={styles.identifier}>{identifier}</span>
+              <span className={styles.displayName}>
+                {givenName} {familyName}
+              </span>
+            </>
+          }
+          className={styles.accordionItem}
+        >
+          {encounter && encounter?.obs && encounter.obs?.length && (
+            <div className={styles.dataField}>
+              <ul>
+                {encounter.obs.map((obs, index) => (
+                  <li key={index}>{obs.display}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <Button kind="primary" onClick={() => editEncounter(patientUuid)}>
+            {t("goToForm", "Go To Form")}
+          </Button>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
+export default FormReviewCard;

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

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

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

@@ -0,0 +1,39 @@
+@use '@carbon/styles/scss/spacing';
+// @use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+
+.formReviewCard {
+  background-color: $ui-02;
+  padding: spacing.$spacing-02;
+}
+
+.formReviewCard :global(.cds--accordion) :global(.cds--accordion__item) {
+  border: none;
+}
+
+.formReviewCard :global(.cds--accordion__title) {
+  display: flex;
+  align-items: baseline;
+  column-gap: spacing.$spacing-05;
+}
+
+.formReviewCard :global(.cds--accordion__content) {
+  padding: spacing.$spacing-03;
+}
+
+.dataField {
+  @include type.type-style('code-02');
+  background-color: $ui-01;
+  padding: spacing.$spacing-03;
+}
+
+.displayName {
+  @include type.type-style('heading-02');
+  font-weight: bold;
+}
+
+.identifier {
+  @include type.type-style('body-compact-01')
+}

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

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

package/src/form-entry-workflow/patient-banner/PatientBanner.test.tsx

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

package/src/form-entry-workflow/patient-banner/PatientBanner.tsx

@@ -0,0 +1,86 @@
+import { age, ExtensionSlot } from "@openmrs/esm-framework";
+import { SkeletonPlaceholder, SkeletonText } from "@carbon/react";
+import React, { useContext } from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import useGetPatient from "../../hooks/useGetPatient";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
+
+const SkeletonPatientInfo = () => {
+  return (
+    <div className={styles.container}>
+      <SkeletonPlaceholder className={styles.photoPlaceholder} />
+      <div className={styles.patientInfoContent}>
+        <div className={styles.patientInfoRow}>
+          <SkeletonText width="7rem" lineCount={1} />
+        </div>
+        <div className={styles.patientInfoRow}>
+          <span>
+            <SkeletonText width="1rem" lineCount={1} />
+          </span>
+          <span>&middot;</span>
+          <span>
+            <SkeletonText width="1rem" lineCount={1} />
+          </span>
+          <span>&middot;</span>
+          <span>
+            <SkeletonText width="1rem" lineCount={1} />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PatientBanner = () => {
+  const { activePatientUuid, workflowState } = useContext(FormWorkflowContext);
+  const patient = useGetPatient(activePatientUuid);
+  const { t } = useTranslation();
+  const patientName = `${patient?.name?.[0].given?.join(" ")} ${
+    patient?.name?.[0]?.family
+  }`;
+
+  const patientPhotoSlotState = React.useMemo(
+    () => ({ patientUuid: patient?.id, patientName, size: "small" }),
+    [patient?.id, patientName]
+  );
+
+  if (workflowState === "NEW_PATIENT") return null;
+
+  if (!patient) {
+    return <SkeletonPatientInfo />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <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}>
+          <span>
+            {(patient.gender ?? t("unknown", "Unknown")).replace(/^\w/, (c) =>
+              c.toUpperCase()
+            )}
+          </span>
+          <span>&middot;</span>
+          <span>{age(patient.birthDate)}</span>
+          <span>&middot;</span>
+          <span>
+            {patient.identifier.length
+              ? patient.identifier
+                  .map((identifier) => identifier.value)
+                  .join(", ")
+              : "--"}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PatientBanner;

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

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

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

@@ -0,0 +1,45 @@
+@use '@carbon/styles/scss/spacing';
+// @use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  height: spacing.$spacing-11;
+  display: flex;
+  align-items: center;
+  background-color: $ui-02;
+  border-top: 0.0125rem solid $ui-03;
+  border-bottom: 0.0125rem solid $ui-03;
+  padding: 0 spacing.$spacing-05;
+}
+
+.photoPlaceholder {
+  height: 48px;
+  width: 48px;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  font-weight: 600;
+}
+
+.patientInfoContent {
+  width: 100%;
+  margin-left: 1rem;
+}
+
+.patientInfoRow {
+  display: flex;
+  align-items: center;
+  & > button {
+    min-height: 2rem;
+  }
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  column-gap: 0.8rem;
+}
+
+.patientEditBtn {
+  color: $ui-05;
+  margin: spacing.$spacing-03;
+}

package/src/form-entry-workflow/patient-search-header/PatientSearchHeader.tsx

@@ -0,0 +1,63 @@
+import { Add, Close } from "@carbon/react/icons";
+import {
+  ExtensionSlot,
+  interpolateUrl,
+  navigate,
+} from "@openmrs/esm-framework";
+import { Button } from "@carbon/react";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+
+const PatientSearchHeader = () => {
+  const { addPatient, workflowState, activeFormUuid } =
+    useContext(FormWorkflowContext);
+  const handleSelectPatient = (patient) => {
+    addPatient(patient.uuid);
+  };
+  const { t } = useTranslation();
+
+  if (workflowState !== "NEW_PATIENT") return null;
+
+  const afterUrl = encodeURIComponent(
+    `\${openmrsSpaBase}/forms/form/${activeFormUuid}?patientUuid=\${patientUuid}`
+  );
+  const patientRegistrationUrl = interpolateUrl(
+    `\${openmrsSpaBase}/patient-registration?afterUrl=${afterUrl}`
+  );
+
+  return (
+    <div className={styles.searchHeaderContainer}>
+      <span className={styles.padded}>{t("nextPatient", "Next patient")}:</span>
+      <span className={styles.searchBarWrapper}>
+        <ExtensionSlot
+          extensionSlotName="patient-search-bar-slot"
+          state={{
+            selectPatientAction: handleSelectPatient,
+            buttonProps: {
+              kind: "primary",
+            },
+          }}
+        />
+      </span>
+      <span className={styles.padded}>{t("or", "or")}</span>
+      <span>
+        <Button onClick={() => navigate({ to: patientRegistrationUrl })}>
+          {t("createNewPatient", "Create new patient")} <Add size={20} />
+        </Button>
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Link to="../">
+          <Button kind="ghost">
+            {t("cancel", "Cancel")} <Close size={20} />
+          </Button>
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default PatientSearchHeader;

package/src/form-entry-workflow/patient-search-header/index.ts

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