@openmrs/esm-fast-data-entry-app 1.0.0-pre.21 → 1.0.0-pre.29

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,76 @@
+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";
+
+// helper function useful for debugging
+// given a list of forms, it will organize into permissions
+// and list which forms are associated with that permission
+const getFormPermissions = (forms) => {
+  const output = {};
+  forms?.forEach(
+    (form) =>
+      (output[form.encounterType.editPrivilege.display] = [
+        ...(output[form.encounterType.editPrivilege.display] || []),
+        form.display,
+      ])
+  );
+  return output;
+};
+
+// Function adds `id` field to rows so they will be accepted by DataTable
+// "display" is prefered for display name if present, otherwise fall back on "name'"
+const prepareRowsForTable = (rawFormData) => {
+  if (rawFormData) {
+    return rawFormData?.map((form) => ({
+      ...form,
+      id: form.uuid,
+      display: form.display || form.name,
+    }));
+  }
+  return null;
+};
+
+const FormsPage = () => {
+  const config = useConfig() as Config;
+  const { t } = useTranslation();
+  const { formCategories, formCategoriesToShow } = config;
+  const { forms, isLoading, error } = useGetAllForms();
+  const cleanRows = prepareRowsForTable(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")} (${
+            cleanRows ? cleanRows?.length : "??"
+          })`}
+        >
+          <FormsTable rows={cleanRows} {...{ error, isLoading }} />
+        </Tab>
+        {categoryRows?.map((category, index) => (
+          <Tab label={`${category.name} (${category.rows.length})`} 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;
+}

package/src/{forms → forms-table}/FormsTable.tsx

@@ -1,4 +1,3 @@
-import { ErrorState } from "@openmrs/esm-framework";
 import {
   DataTable,
   DataTableSkeleton,
@@ -14,40 +13,59 @@ import {
   TableToolbarSearch,
 } from "carbon-components-react";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import EmptyState from "../empty-state/EmptyState";
-
-const formsHeader = [
-  {
-    key: "name",
-    header: "Form name",
-  },
-  {
-    key: "actions",
-    header: "Actions",
-  },
-];
+import styles from "./styles.scss";
 
 const FormsTable = ({ rows, error, isLoading }) => {
+  const { t } = useTranslation();
+
+  const formsHeader = [
+    {
+      key: "display",
+      header: t("formName", "Form Name"),
+    },
+    {
+      key: "actions",
+      header: t("actions", "Actions"),
+    },
+    {
+      key: "actions2",
+      header: "",
+    },
+  ];
+
   const augmenteRows = rows?.map((row) => ({
     ...row,
-    actions: <Link to={row.uuid}>Fill Form</Link>,
+    actions: <Link to={row.uuid}>{t("fillForm", "Fill Form")}</Link>,
+    actions2: (
+      <Link to="#" className={styles.inactiveLink}>
+        {t("startGroupSession", "Start Group Session")}
+      </Link>
+    ),
   }));
 
   if (isLoading) return <DataTableSkeleton />;
   if (error) {
     return (
       <EmptyState
-        headerTitle="Error Loading Data"
-        displayText={`Something went wrong loading data from the server. "${error?.response?.status}: ${error?.response?.statusText}"`}
+        headerTitle={t("errorLoadingData", "Error Loading Data")}
+        displayText={`${t(
+          "dataErrorMessage",
+          "Something went wrong loading data from the server."
+        )} "${error?.response?.status}: ${error?.response?.statusText}"`}
       />
     );
   }
   if (augmenteRows.length === 0) {
     return (
       <EmptyState
-        headerTitle="No Forms To Show"
-        displayText="No forms could be found for this category. Please double check the form concept uuids and access permissions."
+        headerTitle={t("noFormsFound", "No Forms To Show")}
+        displayText={t(
+          "noFormsFoundMessage",
+          "No forms could be found for this category. Please double check the form concept uuids and access permissions."
+        )}
       />
     );
   }
@@ -63,15 +81,8 @@ const FormsTable = ({ rows, error, isLoading }) => {
       }) => {
         return (
           <TableContainer>
-            <div
-              style={{
-                position: "relative",
-                display: "flex",
-                height: "3rem",
-                justifyContent: "flex-end",
-              }}
-            >
-              <TableToolbar style={{ width: "20%", minWidth: "200px" }}>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar className={styles.tableToolbar}>
                 <TableToolbarContent>
                   <TableToolbarSearch onChange={onInputChange} />
                 </TableToolbarContent>

package/src/forms-table/index.ts

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

package/src/forms-table/styles.scss

@@ -0,0 +1,20 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  height: $spacing-09;
+  justify-content: flex-end;
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.inactiveLink {
+  color: $carbon--gray-40;
+  cursor: not-allowed;
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+import useGetAllForms from "./useGetAllForms";
+import useGetPatient from "./useGetPatient";
+
+export { useGetAllForms, useGetPatient };

package/src/hooks/useGetAllForms.ts

@@ -0,0 +1,45 @@
+import {
+  openmrsFetch,
+  userHasAccess,
+  useSession,
+} from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+const customFormRepresentation =
+  "(uuid,name,display,encounterType:(uuid,name,viewPrivilege,editPrivilege),version,published,retired,resources:(uuid,name,dataType,valueReference))";
+
+const formEncounterUrl = `/ws/rest/v1/form?v=custom:${customFormRepresentation}`;
+const formEncounterUrlPoc = `/ws/rest/v1/form?v=custom:${customFormRepresentation}&q=poc`;
+
+export function useGetAllForms(cachedOfflineFormsOnly = false) {
+  const session = useSession();
+  const showHtmlFormEntryForms = true;
+  const url = showHtmlFormEntryForms ? formEncounterUrl : formEncounterUrlPoc;
+  const { data, error } = useSWR([url, cachedOfflineFormsOnly], async () => {
+    const res = await openmrsFetch(url);
+    // show published forms, and hide component forms, and filter based on privileges
+    const forms =
+      res.data?.results?.filter(
+        (form) =>
+          // forms should be published
+          form.published &&
+          // forms should not be component forms
+          !/component/i.test(form.name)
+        // user should have privileges to edit forms
+      ) ?? [];
+
+    return forms;
+  });
+
+  return {
+    forms: data?.filter((form) =>
+      Boolean(
+        userHasAccess(form.encounterType?.editPrivilege?.display, session?.user)
+      )
+    ),
+    isLoading: !error && !data,
+    error,
+  };
+}
+
+export default useGetAllForms;

package/src/{forms/PatientInfo.test.tsx → patient-banner/PatientBanner.test.tsx}

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

package/src/{forms/PatientInfo.tsx → patient-banner/PatientBanner.tsx}

@@ -10,11 +10,11 @@ import {
   SkeletonText,
 } from "carbon-components-react";
 import React, { useState } from "react";
-import styles from "./patient-info.scss";
+import styles from "./styles.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";
+import useGetPatient from "../hooks/useGetPatient";
 interface PatientInfoProps {
   patientUuid: string;
 }

package/src/patient-banner/index.ts

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

package/src/patient-card/PatientCard.tsx

@@ -0,0 +1,51 @@
+import { SkeletonText } from "carbon-components-react";
+import React, { useContext } from "react";
+import FormWorkflowContext from "../context/FormWorkflowContext";
+import useGetPatient from "../hooks/useGetPatient";
+import styles from "./styles.scss";
+
+const CardContainer = ({ active, onClick, children }) => {
+  return (
+    <div
+      className={`${styles.cardContainer} ${!active && styles.hoverable}`}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+    >
+      {children}
+    </div>
+  );
+};
+
+const PatientCard = ({ patientUuid }) => {
+  const { activePatientUuid, 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;
+
+  if (!patient) {
+    return (
+      <CardContainer onClick={() => {}} active={true}>
+        <SkeletonText className={styles.skeletonText} />
+      </CardContainer>
+    );
+  }
+
+  const active = activePatientUuid === patientUuid;
+
+  return (
+    <CardContainer onClick={() => editEncounter(patientUuid)} active={active}>
+      <div className={styles.identifier}>{identifier}</div>
+      <div
+        className={`${styles.displayName} ${
+          active && styles.activeDisplayName
+        }`}
+      >
+        {givenName} {familyName}
+      </div>
+    </CardContainer>
+  );
+};
+
+export default PatientCard;

package/src/patient-card/index.ts

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

package/src/patient-card/styles.scss

@@ -0,0 +1,30 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.cardContainer {
+  padding: $spacing-05;
+  &:hover {
+    background-color: $carbon--gray-40;
+  }
+}
+
+
+
+.skeletonText {
+  max-width: 8rem;
+}
+
+.identifier {
+  font-weight: 300;
+  font-size: 0.8rem;
+  line-height: 0.9rem;
+}
+
+.displayName {
+  font-weight: bold;
+}
+
+.activeDisplayName {
+  color: $carbon--blue-50;
+}

package/src/patient-search-header/PatientSearchHeader.tsx

@@ -0,0 +1,47 @@
+import { Add20, Close20 } from "@carbon/icons-react";
+import { ExtensionSlot } from "@openmrs/esm-framework";
+import { Button } from "carbon-components-react";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import FormWorkflowContext from "../context/FormWorkflowContext";
+import styles from "./styles.scss";
+
+const PatientSearchHeader = () => {
+  const { addPatient } = useContext(FormWorkflowContext);
+  const handleSelectPatient = (uuid) => {
+    addPatient(uuid);
+  };
+
+  return (
+    <div className={styles.searchHeaderContainer}>
+      <span className={styles.padded}>Next patient:</span>
+      <span className={styles.searchBarWrapper}>
+        <ExtensionSlot
+          extensionSlotName="patient-search-bar-slot"
+          state={{
+            selectPatientAction: handleSelectPatient,
+            buttonProps: {
+              kind: "primary",
+            },
+          }}
+        />
+      </span>
+      <span className={styles.padded}>or</span>
+      <span>
+        <Button disabled>
+          Create new patient <Add20 />
+        </Button>
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Link to="">
+          <Button kind="ghost">
+            Cancel <Close20 />
+          </Button>
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default PatientSearchHeader;

package/src/patient-search-header/index.ts

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

package/src/patient-search-header/styles.scss

@@ -0,0 +1,17 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.searchHeaderContainer {
+  display: flex;
+  background-color: white;
+  padding: $spacing-07 $spacing-05;
+}
+
+.searchBarWrapper {
+  min-width: 35rem;
+}
+
+.padded {
+  padding: $spacing-05;
+}

package/translations/en.json

@@ -1,4 +1,13 @@
-{
-  "casualGreeting": "hey",
-  "formalGreeting": "hello"
-}
+{
+  "actions": "Actions",
+  "casualGreeting": "hey",
+  "dataErrorMessage": "Something went wrong loading data from the server.",
+  "errorLoadingData": "Error Loading Data",
+  "fillForm": "Fill Form",
+  "formalGreeting": "hello",
+  "formName": "Form Name",
+  "noFormsFound": "No Forms To Show",
+  "noFormsFoundMessage": "No forms could be found for this category. Please double check the form concept uuids and access permissions.",
+  "selectPatientFirst": "Please select a patient first",
+  "startGroupSession": "Start Group Session"
+}