@openmrs/esm-cohort-builder-app 3.0.0

package/src/components/search-by-enrollments/search-by-enrollments.component.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+
+import {
+  Column,
+  DatePicker,
+  DatePickerInput,
+  MultiSelect,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+
+import { useLocations } from "../../cohort-builder.resources";
+import { DropdownValue, SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import { usePrograms } from "./search-by-enrollments.resources";
+import styles from "./search-by-enrollments.style.scss";
+import { getQueryDetails, getDescription } from "./search-by-enrollments.utils";
+
+const SearchByEnrollments: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const { programs, programsError } = usePrograms();
+  const { locations, locationsError } = useLocations();
+  const [enrolledOnOrAfter, setEnrolledOnOrAfter] = useState("");
+  const [enrolledOnOrBefore, setEnrolledOnOrBefore] = useState("");
+  const [completedOnOrAfter, setCompletedOnOrAfter] = useState("");
+  const [completedOnOrBefore, setCompletedOnOrBefore] = useState("");
+  const [selectedLocations, setSelectedLocations] =
+    useState<DropdownValue[]>(null);
+  const [selectedPrograms, setSelectedPrograms] =
+    useState<DropdownValue[]>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (programsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: programsError?.message,
+    });
+  }
+
+  if (locationsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: locationsError?.message,
+    });
+  }
+
+  const handleResetInputs = () => {
+    setSelectedPrograms(null);
+    setEnrolledOnOrAfter("");
+    setEnrolledOnOrBefore("");
+    setCompletedOnOrAfter("");
+    setCompletedOnOrBefore("");
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    const searchParams = {
+      enrolledOnOrAfter,
+      enrolledOnOrBefore,
+      completedOnOrAfter,
+      completedOnOrBefore,
+      selectedPrograms,
+      selectedLocations,
+    };
+    await onSubmit(getQueryDetails(searchParams), getDescription(searchParams));
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Column>
+        <div>
+          <MultiSelect
+            id="programs"
+            data-testid="programs"
+            onChange={(data) => setSelectedPrograms(data.selectedItems)}
+            items={programs}
+            label={t("selectPrograms", "Select programs")}
+          />
+        </div>
+      </Column>
+      <Column>
+        <div>
+          <MultiSelect
+            id="locations"
+            data-testid="locations"
+            onChange={(data) => setSelectedLocations(data.selectedItems)}
+            items={locations}
+            label={t("selectLocations", "Select locations")}
+          />
+        </div>
+      </Column>
+      <div className={styles.column}>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setEnrolledOnOrAfter(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="enrolledOnOrAfter"
+              labelText={t("enrolledBetween", "Enrolled between")}
+              value={
+                enrolledOnOrAfter &&
+                dayjs(enrolledOnOrAfter).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setEnrolledOnOrBefore(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="enrolledOnOrBefore"
+              labelText={t("and", "and")}
+              value={
+                enrolledOnOrBefore &&
+                dayjs(enrolledOnOrBefore).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+      </div>
+      <div className={styles.column}>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setCompletedOnOrAfter(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="completedOnOrAfter"
+              labelText={t("completedBetween", "Completed between")}
+              value={
+                completedOnOrAfter &&
+                dayjs(completedOnOrAfter).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setCompletedOnOrBefore(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="completedOnOrBefore"
+              labelText={t("and", "and")}
+              value={
+                completedOnOrBefore &&
+                dayjs(completedOnOrBefore).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+      </div>
+      <SearchButtonSet
+        onHandleReset={handleResetInputs}
+        onHandleSubmit={submit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default SearchByEnrollments;

package/src/components/search-by-enrollments/search-by-enrollments.resources.ts

@@ -0,0 +1,31 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWRImmutable from "swr/immutable";
+
+import { DropdownValue, Response } from "../../types";
+
+interface ProgramsResponse extends Response {
+  name: string;
+}
+
+/**
+ * @returns Programs
+ */
+export function usePrograms() {
+  const { data, error } = useSWRImmutable<{
+    data: { results: ProgramsResponse[] };
+  }>("/ws/rest/v1/program", openmrsFetch);
+
+  const programs: DropdownValue[] = [];
+  data?.data.results.map((program: ProgramsResponse, index: number) => {
+    programs.push({
+      id: index,
+      label: program.name,
+      value: program.uuid,
+    });
+  });
+  return {
+    isLoading: !data && !error,
+    programs,
+    programsError: error,
+  };
+}

package/src/components/search-by-enrollments/search-by-enrollments.style.scss

@@ -0,0 +1,4 @@
+.column {
+ padding-top: 1.5rem;
+ display: flex;
+}

package/src/components/search-by-enrollments/search-by-enrollments.test.tsx

@@ -0,0 +1,158 @@
+import React from "react";
+
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+
+import translations from "../../../translations/en.json";
+import { useLocations } from "../../cohort-builder.resources";
+import SearchByEnrollments from "./search-by-enrollments.component";
+import { usePrograms } from "./search-by-enrollments.resources";
+
+const mockLocations = [
+  {
+    id: 0,
+    label: "Isolation Ward",
+    value: "ac7d7773-fe9f-11ec-8b9b-0242ac1b0002",
+  },
+  {
+    id: 1,
+    label: "Armani Hospital",
+    value: "8d8718c2-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 2,
+    label: "Pharmacy",
+    value: "8d871afc-c2cc-11de-8d13-0010c6dffd0f",
+  },
+];
+
+const mockPrograms = [
+  {
+    id: 0,
+    value: "64f950e6-1b07-4ac0-8e7e-f3e148f3463f",
+    label: "HIV Care and Treatment",
+  },
+  {
+    id: 1,
+    value: "ac1bbc45-8c35-49ff-a574-9553ff789527",
+    label: "HIV Preventative Services (PEP/PrEP)",
+  },
+];
+
+const expectedQuery = {
+  query: {
+    columns: [
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.givenName",
+        name: "firstname",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.familyName",
+        name: "lastname",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.gender",
+        name: "gender",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.ageOnDate.fullYears",
+        name: "age",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.patientId",
+        name: "patientId",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+    ],
+    customRowFilterCombination: "1",
+    rowFilters: [
+      {
+        key: "reporting.library.cohortDefinition.builtIn.patientsWithEnrollment",
+        parameterValues: {
+          programs: [mockPrograms[0].value],
+          locationList: [mockLocations[2].value],
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+  },
+};
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock("./search-by-enrollments.resources", () => {
+  const original = jest.requireActual("./search-by-enrollments.resources");
+  return {
+    ...original,
+    usePrograms: jest.fn(),
+  };
+});
+
+jest.mock("../../cohort-builder.resources", () => {
+  const original = jest.requireActual("../../cohort-builder.resources");
+  return {
+    ...original,
+    useLocations: jest.fn(),
+  };
+});
+
+describe("Test the search by enrollments component", () => {
+  it("should be able to select input values", async () => {
+    // @ts-ignore
+    useLocations.mockImplementation(() => ({
+      locations: mockLocations,
+      isLoading: false,
+      locationsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockLocations },
+    });
+
+    // @ts-ignore
+    usePrograms.mockImplementation(() => ({
+      programs: mockPrograms,
+      isLoading: false,
+      programsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockPrograms },
+    });
+
+    const submit = jest.fn();
+    const { getByTestId, getByText } = render(
+      <SearchByEnrollments onSubmit={submit} />
+    );
+
+    waitFor(() => {
+      fireEvent.click(getByText(translations.selectLocations));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByText(mockLocations[2].label));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByText(translations.selectPrograms));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByText(mockPrograms[0].label));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByTestId("search-btn"));
+    });
+
+    await waitFor(() => {
+      expect(submit).toBeCalledWith(
+        expectedQuery,
+        `Patients enrolled in ${mockPrograms[0].label} at ${mockLocations[2].label}`
+      );
+    });
+  });
+});

package/src/components/search-by-enrollments/search-by-enrollments.utils.ts

@@ -0,0 +1,69 @@
+import { composeJson } from "../../cohort-builder.utils";
+import { DropdownValue } from "../../types";
+
+interface EnrollmentsSearchParams {
+  enrolledOnOrAfter: string;
+  enrolledOnOrBefore: string;
+  completedOnOrAfter: string;
+  completedOnOrBefore: string;
+  selectedPrograms: DropdownValue[];
+  selectedLocations: DropdownValue[];
+}
+
+export const getQueryDetails = ({
+  enrolledOnOrAfter,
+  enrolledOnOrBefore,
+  completedOnOrAfter,
+  completedOnOrBefore,
+  selectedPrograms,
+  selectedLocations,
+}: EnrollmentsSearchParams) => {
+  const searchParameter = {
+    patientsWithEnrollment: [
+      {
+        name: "programs",
+        value: selectedPrograms?.map((location) => location.value),
+      },
+      enrolledOnOrAfter && {
+        name: "enrolledOnOrAfter",
+        value: enrolledOnOrAfter,
+      },
+      enrolledOnOrBefore && {
+        name: "enrolledOnOrBefore",
+        value: enrolledOnOrBefore,
+      },
+      completedOnOrAfter && {
+        name: "completedOnOrAfter",
+        value: completedOnOrAfter,
+      },
+      completedOnOrBefore && {
+        name: "completedOnOrBefore",
+        value: completedOnOrBefore,
+      },
+      {
+        name: "locationList",
+        value: selectedLocations?.map((location) => location.value),
+      },
+    ],
+  };
+  const queryDetails = composeJson(searchParameter);
+
+  return queryDetails;
+};
+
+export const getDescription = ({
+  selectedPrograms,
+  selectedLocations,
+}: EnrollmentsSearchParams) => {
+  let description = `Patients enrolled in ${selectedPrograms
+    ?.map((location) => location.label)
+    .join(", ")}`;
+
+  if (selectedLocations?.length) {
+    description =
+      description +
+      ` at ${selectedLocations?.map((location) => location.label).join(", ")}`;
+  }
+
+  return description;
+};

package/src/components/search-by-location/search-by-location.component.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+import { Column, Dropdown, MultiSelect } from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { useLocations } from "../../cohort-builder.resources";
+import { DropdownValue, SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import styles from "./search-by-location.style.scss";
+import { getQueryDetails, getDescription } from "./search-by-location.utils";
+
+const SearchByLocation: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const methods = [
+    {
+      id: 0,
+      label: t("anyEncounter", "Any Encounter"),
+      value: "ANY",
+    },
+    {
+      id: 1,
+      label: t("mostRecentEncounter", "Most Recent Encounter"),
+      value: "LAST",
+    },
+    {
+      id: 2,
+      label: t("earliestEncounter", "Earliest Encounter"),
+      value: "FIRST",
+    },
+  ];
+  const { locations, locationsError } = useLocations();
+  const [selectedLocations, setSelectedLocations] =
+    useState<DropdownValue[]>(null);
+  const [selectedMethod, setSelectedMethod] = useState<DropdownValue>(
+    methods[0]
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (locationsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: locationsError?.message,
+    });
+  }
+
+  const handleResetInputs = () => {
+    setSelectedLocations(null);
+    setSelectedMethod(null);
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    await onSubmit(
+      getQueryDetails(selectedMethod.value, selectedLocations),
+      getDescription(selectedMethod.label, selectedLocations)
+    );
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Column>
+        <div>
+          <MultiSelect
+            id="locations"
+            data-testid="locations"
+            onChange={(data) => setSelectedLocations(data.selectedItems)}
+            items={locations}
+            label={t("selectLocations", "Select locations")}
+          />
+        </div>
+      </Column>
+      <div className={styles.column}>
+        <Column>
+          <Dropdown
+            id="methods"
+            data-testid="methods"
+            onChange={(data) => setSelectedMethod(data.selectedItem)}
+            initialSelectedItem={methods[0]}
+            items={methods}
+            label={t("selectMethod", "Select a method")}
+          />
+        </Column>
+      </div>
+      <SearchButtonSet
+        onHandleReset={handleResetInputs}
+        onHandleSubmit={submit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default SearchByLocation;

package/src/components/search-by-location/search-by-location.style.scss

@@ -0,0 +1,4 @@
+.column {
+ padding-top: 1.5rem;
+ display: flex;
+}

package/src/components/search-by-location/search-by-location.test.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+
+import translations from "../../../translations/en.json";
+import { useLocations } from "../../cohort-builder.resources";
+import SearchByLocation from "./search-by-location.component";
+
+const mockLocations = [
+  {
+    id: 0,
+    label: "Isolation Ward",
+    value: "ac7d7773-fe9f-11ec-8b9b-0242ac1b0002",
+  },
+  {
+    id: 1,
+    label: "Armani Hospital",
+    value: "8d8718c2-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 2,
+    label: "Pharmacy",
+    value: "8d871afc-c2cc-11de-8d13-0010c6dffd0f",
+  },
+];
+
+const expectedQuery = {
+  query: {
+    columns: [
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.givenName",
+        name: "firstname",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.familyName",
+        name: "lastname",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.gender",
+        name: "gender",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.ageOnDate.fullYears",
+        name: "age",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        key: "reporting.library.patientDataDefinition.builtIn.patientId",
+        name: "patientId",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+    ],
+    customRowFilterCombination: "1",
+    rowFilters: [
+      {
+        key: "reporting.library.cohortDefinition.builtIn.encounterSearchAdvanced",
+        parameterValues: {
+          locationList: [mockLocations[2].value],
+          timeQualifier: "LAST",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+  },
+};
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock("../../cohort-builder.resources", () => {
+  const original = jest.requireActual("../../cohort-builder.resources");
+  return {
+    ...original,
+    useLocations: jest.fn(),
+  };
+});
+
+describe("Test the search by location component", () => {
+  it("should be able to select input values", async () => {
+    // @ts-ignore
+    useLocations.mockImplementation(() => ({
+      locations: mockLocations,
+      isLoading: false,
+      locationsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockLocations } });
+
+    const submit = jest.fn();
+    const { getByTestId, getByTitle, getByText } = render(
+      <SearchByLocation onSubmit={submit} />
+    );
+
+    fireEvent.click(getByText(translations.selectLocations));
+    fireEvent.click(getByText(mockLocations[2].label));
+    fireEvent.click(getByTitle("Any Encounter"));
+    fireEvent.click(getByText("Most Recent Encounter"));
+    fireEvent.click(getByTestId("search-btn"));
+
+    await waitFor(() => {
+      expect(submit).toBeCalledWith(
+        expectedQuery,
+        `Patients in ${mockLocations[2].label} (by method ANY_ENCOUNTER).`
+      );
+    });
+  });
+});

package/src/components/search-by-location/search-by-location.utils.ts

@@ -0,0 +1,40 @@
+import { composeJson } from "../../cohort-builder.utils";
+import { DropdownValue } from "../../types";
+
+export const getQueryDetails = (
+  method: string,
+  selectedLocations: DropdownValue[]
+) => {
+  const locations = [];
+  selectedLocations?.map((location) => locations.push(location.value));
+  const searchParameter = {
+    encounterSearchAdvanced: [
+      { name: "locationList", value: locations },
+      { name: "timeQualifier", value: method },
+    ],
+  };
+  const queryDetails = composeJson(searchParameter);
+
+  return queryDetails;
+};
+
+export const getDescription = (
+  method: string,
+  selectedLocations: DropdownValue[]
+) => {
+  let description = `Patients in ${selectedLocations
+    ?.map((location) => location.label)
+    .join(", ")}`;
+  switch (method) {
+    case "FIRST":
+      description += " (by method EARLIEST_ENCOUNTER).";
+      break;
+    case "LAST":
+      description += " (by method LATEST_ENCOUNTER).";
+      break;
+    default:
+      description += " (by method ANY_ENCOUNTER).";
+      break;
+  }
+  return description;
+};