@pih/esm-referrals-queue-app 1.0.5-pre.7

package/src/referrals-queue/referrals-queue.css

@@ -0,0 +1,63 @@
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1500px;
+}
+
+/* Hack inputs smaller than usual MFE */
+.container input {
+  max-height: 2.5rem;
+}
+.container select {
+  max-height: 2.5rem;
+}
+/* End inputs hack */
+
+.tableContainer {
+  height: 500px;
+  overflow-x: auto;
+  margin: 0 1rem;
+  border: 2px solid lightgrey;
+  border-radius: 0.25rem;
+}
+
+.controlsContainer {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.inputContainer {
+  display: flex;
+  width: 50%;
+  min-width: 300px;
+  text-align: left;
+  padding: 0 1rem;
+}
+
+.inputContainer label {
+  display: inline-block;
+  margin: 0 0.5rem 0.5rem 0;
+}
+
+.dateInputContainer {
+  margin: 2rem 2rem 1rem 0;
+}
+
+.dropdown {
+  width: 100%;
+  height: 3.5rem;
+  background: transparent;
+  border: 1px solid var(--omrs-color-ink-lowest-contrast);
+  background-clip: padding-box;
+  border-radius: 2px;
+  margin: 0;
+}
+.dropdown:disabled {
+  opacity: 0.8;
+  background: lightgrey;
+  cursor: not-allowed;
+}
+.dropdown:focus {
+  border: 2px solid var(--omrs-color-interaction);
+  outline: 0;
+}

package/src/referrals-queue/referrals-queue.resource.ts

@@ -0,0 +1,12 @@
+import { openmrsObservableFetch } from "@openmrs/esm-framework";
+import { map } from "rxjs/operators";
+
+export function getReferrals({
+  fromDate,
+  toDate,
+  locale,
+}): Observable<Object[]> {
+  return openmrsObservableFetch(
+    `/ws/rest/v1/reportingrest/reportdata/cd7dfde7-764a-4da6-81c2-d5887ed1df51?startDate=${fromDate}&endDate=${toDate}&locale=${locale}`
+  ).pipe(map(({ data }) => data["dataSets"][0]["rows"]));
+}

package/src/referrals-queue/referrals-queue.test.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import { of } from "rxjs";
+import {
+  render,
+  fireEvent,
+  screen,
+  within,
+  waitFor,
+} from "@testing-library/react";
+import MockDate from "mockdate";
+import ReferralsQueue from "./referrals-queue.component";
+import { getReferrals } from "./referrals-queue.resource";
+
+jest.mock("./referrals-queue.resource");
+const mockedGetReferrals = getReferrals as jest.Mock;
+
+const referrals = [
+  {
+    patient_uuid: "ptaaaaaa-2869-41a4-86af-811fa2ee65b8",
+    zl_emr_id: "PTID1",
+    patient_name: "Patient Commcare",
+    referral_date: "2020-03-25T00:00:00.000-0400",
+    details: null,
+    visit_uuid: "visitaaa-091a-46fd-a442-2a9778d91a52",
+    encounter_id: 12,
+    referral_type: "Test Referral Type",
+    encounter_uuid: "encounter-0fe1-4318-95a4-641d31745e09",
+    fulfillment_status: null,
+  },
+  {
+    patient_uuid: "ptbbbbbb-de0e-489f-b4c7-fe4579e07aa9",
+    zl_emr_id: "PTID2",
+    patient_name: "Davina Mother",
+    referral_date: "2020-03-23T00:00:00.000-0400",
+    details: "Suspected depression",
+    visit_uuid: "visitbbb-64ca-4d53-9024-574a9214f76e",
+    encounter_id: 13,
+    referral_type: "Mental Health",
+    encounter_uuid: "encounter-d5cb-4f7e-a1aa-bd6741a96381",
+    fulfillment_status: "Pending status",
+  },
+  {
+    person_uuid: "ptcccccc-de0e-489f-b4c7-fe4579e07aa9",
+    zl_emr_id: "PTID3",
+    patient_name: "Patient Prenatal",
+    referral_date: "2020-03-28T00:00:00.000-0400",
+    details: "Urgent",
+    visit_uuid: "visitccc-64ca-4d53-9024-574a9214f76e",
+    encounter_id: 14,
+    referral_type: "Family Member",
+    encounter_uuid: "encounter-67bc-435d-9929-670a98cefe4e",
+    fulfillment_status: "Test Complete",
+  },
+];
+
+(window as any).openmrsBase = "/openmrs";
+// hack around js-dom to make navigation testable
+delete window.location;
+//@ts-ignore
+window.location = { href: "/referrals-queue" };
+
+describe("referrals queue", () => {
+  const todayString = "2020-10-31";
+  beforeEach(() => {
+    MockDate.set(todayString + "T10:00:00.000-0400");
+    mockedGetReferrals.mockReset();
+    mockedGetReferrals.mockReturnValue(of(referrals));
+    render(<ReferralsQueue />);
+  });
+
+  afterEach(() => {
+    MockDate.reset();
+  });
+
+  it("renders without failing", () => {
+    // in beforeEach
+  });
+
+  it("renders the expected fields", () => {
+    for (let referral of referrals) {
+      const row = screen.getByText(referral.zl_emr_id).closest("tr");
+      within(row).getByText(referral.patient_name);
+      within(row).getByText(referral.referral_type, { selector: "td" });
+      if (referral.details) {
+        within(row).getByText(referral.details);
+      }
+      if (referral.fulfillment_status) {
+        within(row).getByText(referral.fulfillment_status);
+      }
+    }
+    screen.getByText("25 Mar");
+    screen.getByText("23 Mar");
+    screen.getByText("28 Mar");
+  });
+
+  it("navigates to the links", async () => {
+    const table = screen.getByRole("table");
+    const pt0DashLink = within(table).getByText(referrals[0].zl_emr_id);
+    fireEvent.click(pt0DashLink);
+    await waitFor(() => {
+      expect(window.location.href).toBe(
+        "/openmrs/pt-dash/" + referrals[0].patient_uuid
+      );
+    });
+    const pt1VisitLink = within(table).getByText("23 Mar");
+    fireEvent.click(pt1VisitLink);
+    await waitFor(() => {
+      expect(window.location.href).toBe(
+        `/openmrs/visit/${referrals[1].patient_uuid}/${referrals[1].visit_uuid}`
+      );
+    });
+    const pendingStatusLink = within(table).getByText("Pending status");
+    fireEvent.click(pendingStatusLink);
+    await waitFor(() => {
+      expect(window.location.href).toBe(
+        `/openmrs/home-visit-form/${referrals[1].patient_uuid}/${referrals[1].visit_uuid}/${referrals[1].encounter_uuid}`
+      );
+    });
+  });
+
+  it("doesn't make non-pending statuses into links", () => {
+    const table = screen.getByRole("table");
+    expect(within(table).getByText("Pending status").tagName).toBe("A"); // sanity check
+    expect(within(table).getByText("Test Complete").tagName).not.toBe("A"); // the actual test
+  });
+
+  it("filters by referral type", () => {
+    const dropdown = screen.getByLabelText("Referral Type", {
+      selector: "select",
+    });
+    fireEvent.change(dropdown, { target: { value: "Mental Health" } });
+    expect(screen.queryByText("PTID1")).toBeNull();
+    expect(screen.queryByText("PTID2")).not.toBeNull();
+    expect(screen.queryByText("PTID3")).toBeNull();
+  });
+
+  it("infers list of referral types from data", () => {
+    const dropdown = screen.getByLabelText("Referral Type", {
+      selector: "select",
+    });
+    fireEvent.change(dropdown, { target: { value: "Test Referral Type" } });
+    expect(screen.queryByDisplayValue("Test Referral Type")).not.toBeNull();
+  });
+
+  it("filters by statuses, with dropdown inferred from data", () => {
+    const dropdown = screen.getByLabelText("Status", { selector: "select" });
+    fireEvent.change(dropdown, { target: { value: "Test Complete" } });
+    expect(screen.queryByText("PTID1")).toBeNull();
+    expect(screen.queryByText("PTID2")).toBeNull();
+    expect(screen.queryByText("PTID3")).not.toBeNull();
+  });
+
+  it("calls getReferrals with the correct date arguments", () => {
+    const monthAgoString = "2020-09-30";
+    expect(mockedGetReferrals).lastCalledWith({
+      fromDate: monthAgoString,
+      toDate: todayString,
+      locale: "en",
+    });
+    const fromDateInput = screen.getByLabelText("From");
+    fireEvent.change(fromDateInput, { target: { value: "2020-01-01" } });
+    expect(mockedGetReferrals).lastCalledWith({
+      fromDate: "2020-01-01",
+      toDate: todayString,
+      locale: "en",
+    });
+    const toDateInput = screen.getByLabelText("To");
+    fireEvent.change(toDateInput, { target: { value: "2020-03-01" } });
+    expect(mockedGetReferrals).lastCalledWith({
+      fromDate: "2020-01-01",
+      toDate: "2020-03-01",
+      locale: "en",
+    });
+  });
+
+  it("filters the list of results by patient name query", () => {
+    const queryBox = screen.getByLabelText("Filter by patient");
+    fireEvent.change(queryBox, { target: { value: "Mother" } });
+    expect(screen.queryByText("PTID2")).not.toBeNull();
+    expect(screen.queryByText("PTID1")).toBeNull();
+  });
+
+  it("filters the list of results by patient name partial token matches", () => {
+    const queryBox = screen.getByLabelText("Filter by patient");
+    fireEvent.change(queryBox, { target: { value: "dav mo" } });
+    expect(screen.queryByText("PTID2")).not.toBeNull();
+    expect(screen.queryByText("PTID1")).toBeNull();
+  });
+
+  it("filters the list of results by patient id", () => {
+    const queryBox = screen.getByLabelText("Filter by patient");
+    fireEvent.change(queryBox, { target: { value: "ptid1" } });
+    expect(screen.queryByText("PTID1")).not.toBeNull();
+    expect(screen.queryByText("PTID2")).toBeNull();
+  });
+
+  test.todo("makes the API call with the locale from the user session");
+});

package/src/root.component.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import Root from "./root.component";
+
+describe(`<Root />`, () => {
+  it(`renders without dying`, () => {
+    render(<Root />);
+  });
+});

package/src/root.component.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+import ReferralsQueue from "./referrals-queue/referrals-queue.component";
+import styles from "./root.css";
+
+export default function Root(props) {
+  return (
+    <div className={`omrs-main-content ${styles.overflowAuto}`}>
+      <BrowserRouter basename={window["getOpenmrsSpaBase"]()}>
+        <Route path="/referrals-queue" component={ReferralsQueue} />
+      </BrowserRouter>
+    </div>
+  );
+}

package/src/root.css

@@ -0,0 +1,3 @@
+.overflowAuto {
+  overflow: auto;
+}

package/src/setup-tests.js

@@ -0,0 +1,13 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n.use(initReactI18next).init({
+  lng: "en",
+  resources: {
+    en: {},
+    fr: {},
+    ht: {},
+  },
+});
+
+window.getOpenmrsSpaBase = () => "openmrs/spa";

package/src/table/table.component.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  ConfigurableLink,
+  interpolateString,
+  useConfig,
+} from "@openmrs/esm-framework";
+import { Trans } from "react-i18next";
+import styles from "./table.css";
+import { formatDate } from "../util";
+
+export interface TableProps {
+  referrals: Referral[];
+}
+
+export default function Table(props: TableProps) {
+  const config = useConfig();
+
+  return (
+    <table className={styles.table}>
+      <thead>
+        <tr className={`omrs-bold ${styles.tr}`}>
+          <td>
+            <Trans i18nKey="emr-id">EMR ID</Trans>
+          </td>
+          <td>
+            <Trans i18nKey="name">Name</Trans>
+          </td>
+          <td>
+            <Trans i18nKey="referral-date">Referral Date</Trans>
+          </td>
+          <td>
+            <Trans i18nKey="referral-type">Referral Type</Trans>
+          </td>
+          <td>
+            <Trans i18nKey="details">Details</Trans>
+          </td>
+          <td>
+            <Trans i18nKey="status">Status</Trans>
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        {props.referrals &&
+          props.referrals.map((referral, index) => (
+            <React.Fragment key={index}>
+              <tr className={styles.tr}>
+                <td>
+                  <ConfigurableLink
+                    to={interpolateString(config.links.patientDash, {
+                      patientUuid:
+                        referral.patient_uuid || referral.person_uuid,
+                    })}
+                  >
+                    {referral.zl_emr_id}
+                  </ConfigurableLink>
+                </td>
+                <td>{referral.patient_name}</td>
+                <td>
+                  <ConfigurableLink
+                    to={interpolateString(config.links.visitPage, {
+                      patientUuid:
+                        referral.patient_uuid || referral.person_uuid,
+                      visitUuid: referral.visit_uuid,
+                    })}
+                  >
+                    {formatDate(referral.referral_date)}
+                  </ConfigurableLink>
+                </td>
+                <td>{referral.referral_type}</td>
+                <td>{referral.details}</td>
+                <td>
+                  {config.pendingStatuses.includes(
+                    referral.fulfillment_status
+                  ) ? (
+                    <ConfigurableLink
+                      to={interpolateString(config.links.homeVisitForm, {
+                        patientUuid:
+                          referral.patient_uuid || referral.person_uuid,
+                        visitUuid: referral.visit_uuid,
+                        encounterUuid: referral.encounter_uuid,
+                      })}
+                    >
+                      {referral.fulfillment_status}
+                    </ConfigurableLink>
+                  ) : (
+                    referral.fulfillment_status
+                  )}
+                </td>
+              </tr>
+            </React.Fragment>
+          ))}
+      </tbody>
+    </table>
+  );
+}

package/src/table/table.css

@@ -0,0 +1,16 @@
+.table {
+  width: 100%;
+}
+
+.tr {
+  border-bottom: 1px solid lightgrey;
+  line-height: 2rem;
+}
+
+.tr:nth-child(even) {
+  background-color: var(--omrs-color-bg-medium-contrast);
+}
+
+.table td {
+  padding: 0.25rem 0.5rem;
+}

package/src/util.ts

@@ -0,0 +1,20 @@
+import moment from "moment";
+
+// We use UTC for the present TZ because the dates in the data
+// are all midnight Eastern Time, which lines up with UTC
+// but not with, e.g. Pacific Time.
+export function formatDate(strDate: string) {
+  const date = moment.utc(strDate);
+  const today = moment.utc(new Date());
+  if (
+    date.date() === today.date() &&
+    date.month() === today.month() &&
+    date.year() === today.year()
+  ) {
+    return moment().calendar().split(" ")[0]; // locale-specific 'Today'
+  } else if (date.year() === today.year()) {
+    return date.format("DD MMM");
+  } else {
+    return date.format("DD MMM YYYY");
+  }
+}

package/translations/en.json

@@ -0,0 +1,13 @@
+{
+  "any": "Any",
+  "details": "Details",
+  "emr-id": "EMR ID",
+  "filter-by-patient": "Filter by patient",
+  "from": "From",
+  "name": "Name",
+  "referral-date": "Referral Date",
+  "referral-type": "Referral Type",
+  "referrals-queue": "Referrals Queue",
+  "status": "Status",
+  "to": "To"
+}

package/translations/es.json

@@ -0,0 +1,13 @@
+{
+  "any": "Any",
+  "details": "Detalles",
+  "emr-id": "EMR ID",
+  "filter-by-patient": "Filtrar por paciente",
+  "from": "Desde",
+  "name": "Nombre",
+  "referral-date": "Fecha de referencia",
+  "referral-type": "Tipo de referencia",
+  "referrals-queue": "Cola de referencias",
+  "status": "Estado",
+  "to": "Hasta"
+}

package/translations/fr.json

@@ -0,0 +1,13 @@
+{
+  "any": "Tout",
+  "details": "Détails",
+  "emr-id": "EMR ID",
+  "filter-by-patient": "Filtrer avec patient",
+  "from": "de",
+  "name": "Nom",
+  "referral-date": "Date de Référé",
+  "referral-type": "Type Référé",
+  "referrals-queue": "List de Référé",
+  "status": "État",
+  "to": "à"
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "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"
+  }
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("openmrs/default-webpack-config");