@openmrs/esm-cohort-builder-app 3.0.0

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

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+
+import {
+  DatePicker,
+  DatePickerInput,
+  Column,
+  NumberInput,
+  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 { SearchByProps, DropdownValue } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import { useEncounterTypes, useForms } from "./search-by-encounters.resources";
+import styles from "./search-by-encounters.style.scss";
+import { getDescription, getQueryDetails } from "./search-by-encounters.utils";
+
+const SearchByEncounters: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const [atLeastCount, setAtLeastCount] = useState(0);
+  const [atMostCount, setAtMostCount] = useState(0);
+  const { encounterTypes, encounterTypesError } = useEncounterTypes();
+  const [selectedEncounterTypes, setSelectedEncounterTypes] = useState<
+    DropdownValue[]
+  >([]);
+  const [encounterLocations, setEncounterLocations] = useState<DropdownValue[]>(
+    []
+  );
+  const [encounterForms, setEncounterForms] = useState<DropdownValue[]>([]);
+  const { locations, locationsError } = useLocations();
+  const { forms, formsError } = useForms();
+  const [onOrBefore, setOnOrBefore] = useState("");
+  const [onOrAfter, setOnOrAfter] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (locationsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: locationsError?.message,
+    });
+  }
+
+  if (formsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: formsError?.message,
+    });
+  }
+
+  if (encounterTypesError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: encounterTypesError?.message,
+    });
+  }
+
+  const reset = () => {
+    setAtLeastCount(0);
+    setAtMostCount(0);
+    setOnOrBefore("");
+    setOnOrAfter("");
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    const encounterDetails = {
+      onOrAfter,
+      atLeastCount,
+      atMostCount,
+      encounterForms,
+      encounterLocations,
+      onOrBefore,
+      selectedEncounterTypes,
+    };
+    await onSubmit(
+      getQueryDetails(encounterDetails),
+      getDescription(encounterDetails)
+    );
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Column>
+        <div>
+          <MultiSelect
+            id="encounters"
+            data-testid="encounters"
+            onChange={(data) => setSelectedEncounterTypes(data.selectedItems)}
+            items={encounterTypes}
+            label={t("selectEncounterTypes", "Select encounter types")}
+          />
+        </div>
+      </Column>
+      <MultiSelect
+        id="forms"
+        data-testid="forms"
+        onChange={(data) => setEncounterForms(data.selectedItems)}
+        items={forms}
+        label={t("selectForms", "Select forms")}
+      />
+
+      <MultiSelect
+        id="locations"
+        data-testid="locations"
+        onChange={(data) => setEncounterLocations(data.selectedItems)}
+        items={locations}
+        label={t("selectLocations", "Select locations")}
+      />
+      <div className={styles.column}>
+        <Column className={styles.encounterRange}>
+          <div className={styles.multipleInputs}>
+            <NumberInput
+              hideSteppers={true}
+              id="atLeastCount"
+              data-testid="atLeastCount"
+              label={t("atLeast", "at least")}
+              min={0}
+              size="sm"
+              value={atLeastCount}
+              onChange={(event, { value }) => setAtLeastCount(value)}
+            />
+          </div>
+          <div className={styles.multipleInputs}>
+            <NumberInput
+              hideSteppers={true}
+              id="atMostCount"
+              data-testid="atMostCount"
+              label={t("upto", "upto this many")}
+              min={0}
+              size="sm"
+              value={atMostCount}
+              onChange={(event, { value }) => setAtMostCount(value)}
+            />
+          </div>
+        </Column>
+      </div>
+      <div className={styles.column}>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setOnOrAfter(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="onOrAfter"
+              labelText={t("from", "From")}
+              value={onOrAfter && dayjs(onOrAfter).format("DD-MM-YYYY")}
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setOnOrBefore(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="onOrBefore"
+              value={onOrBefore && dayjs(onOrBefore).format("DD-MM-YYYY")}
+              labelText={t("to", "to")}
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+      </div>
+      <SearchButtonSet
+        isLoading={isLoading}
+        onHandleSubmit={submit}
+        onHandleReset={reset}
+      />
+    </>
+  );
+};
+
+export default SearchByEncounters;

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

@@ -0,0 +1,51 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWRImmutable from "swr/immutable";
+
+import { DropdownValue, Response } from "../../types";
+
+/**
+ * @returns Locations
+ */
+export const useForms = () => {
+  const { data, error } = useSWRImmutable<{
+    data: { results: Response[] };
+  }>("/ws/rest/v1/form", openmrsFetch);
+
+  const forms: DropdownValue[] = [];
+  data?.data.results.map((form: Response, index: number) => {
+    forms.push({
+      id: index,
+      label: form.display,
+      value: form.uuid,
+    });
+  });
+
+  return {
+    isLoading: !data && !error,
+    forms,
+    formsError: error,
+  };
+};
+
+/**
+ * @returns EncounterTypes
+ */
+export const useEncounterTypes = () => {
+  const { data, error } = useSWRImmutable<{
+    data: { results: Response[] };
+  }>("/ws/rest/v1/encountertype", openmrsFetch);
+
+  const encounterTypes: DropdownValue[] = [];
+  data?.data.results.map((encounterType: Response, index: number) => {
+    encounterTypes.push({
+      id: index,
+      label: encounterType.display,
+      value: encounterType.uuid,
+    });
+  });
+  return {
+    isLoading: !data && !error,
+    encounterTypes,
+    encounterTypesError: error,
+  };
+};

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

@@ -0,0 +1,12 @@
+.column {
+ padding-top: 1.5rem;
+ display: flex;
+}
+
+.multipleInputs {
+ margin-right: 0.2rem;
+}
+
+.encounterRange {
+  display: flex;
+}

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

@@ -0,0 +1,202 @@
+import React from "react";
+
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { render, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import translations from "../../../translations/en.json";
+import { useLocations } from "../../cohort-builder.resources";
+import SearchByEncounters from "./search-by-encounters.component";
+import { useForms, useEncounterTypes } from "./search-by-encounters.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 mockEncounterTypes = [
+  {
+    id: 0,
+    value: "0cd5d4cb-204e-419a-9dd7-1e18e939ce4c",
+    label: "Patient Tracing Form",
+  },
+  {
+    id: 1,
+    value: "3044916a-7e5f-478b-9091-803233f27f91",
+    label: "Transfer Out",
+  },
+  {
+    id: 2,
+    value: "41af1931-184e-45f8-86ca-d42e0db0b8a1",
+    label: "Viral Load results",
+  },
+  {
+    id: 3,
+    value: "d7151f82-c1f3-4152-a605-2f9ea7414a79",
+    label: "Visit Note",
+  },
+  {
+    id: 4,
+    value: "67a71486-1a54-468f-ac3e-7091a9a79584",
+    label: "Vitals",
+  },
+];
+
+const mockForms = [
+  {
+    id: 0,
+    value: "bb826dc9-8c1a-4b19-83c9-b59e5e128a7b",
+    label: "POC Patient Consent",
+  },
+  {
+    id: 1,
+    value: "9326eb32-d0fd-40c3-8c30-69d5774af06d",
+    label: "POC Patient Consent v1.2",
+  },
+  {
+    id: 2,
+    value: "7f5ce1d4-a42e-4b59-840e-f239d844cf9b",
+    label: "POC Test Form",
+  },
+];
+
+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: {
+          atLeastCount: "10",
+          atMostCount: "20",
+          encounterTypeList: [mockEncounterTypes[4].value],
+          formList: [mockForms[1].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-encounters.resources", () => {
+  const original = jest.requireActual("./search-by-encounters.resources");
+  return {
+    ...original,
+    useForms: jest.fn(),
+    useEncounterTypes: jest.fn(),
+  };
+});
+
+jest.mock("../../cohort-builder.resources", () => {
+  const original = jest.requireActual("../../cohort-builder.resources");
+  return {
+    ...original,
+    useLocations: jest.fn(),
+  };
+});
+
+describe("Test the search by encounters component", () => {
+  afterEach(cleanup);
+  it("should be able to select input values", async () => {
+    // @ts-ignore
+    useForms.mockImplementation(() => ({
+      forms: mockForms,
+      isLoading: false,
+      formsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockForms },
+    });
+
+    // @ts-ignore
+    useEncounterTypes.mockImplementation(() => ({
+      encounterTypes: mockEncounterTypes,
+      isLoading: false,
+      encounterTypesError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockEncounterTypes },
+    });
+
+    // @ts-ignore
+    useLocations.mockImplementation(() => ({
+      locations: mockLocations,
+      isLoading: false,
+      locationsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockLocations },
+    });
+
+    const submit = jest.fn();
+    const { getByTestId, getByText } = render(
+      <SearchByEncounters onSubmit={submit} />
+    );
+
+    fireEvent.click(getByText(translations.selectEncounterTypes));
+    fireEvent.click(getByText(mockEncounterTypes[4].label));
+    fireEvent.click(getByText(translations.selectForms));
+    fireEvent.click(getByText(mockForms[1].label));
+    fireEvent.click(getByText(translations.selectLocations));
+    fireEvent.click(getByText(mockLocations[2].label));
+
+    const atLeastCountInput = getByTestId("atLeastCount");
+    const atMostCountInput = getByTestId("atMostCount");
+    fireEvent.click(atLeastCountInput);
+    await userEvent.type(atLeastCountInput, "10");
+    fireEvent.click(atMostCountInput);
+    await userEvent.type(atMostCountInput, "20");
+
+    fireEvent.click(getByTestId("search-btn"));
+    await waitFor(async () => {
+      expect(submit).toBeCalledWith(
+        expectedQuery,
+        `Patients with Encounter of Types ${mockEncounterTypes[4].label} at ${mockLocations[2].label} from ${mockForms[1].label} at least 10 times  and at most 20 times`
+      );
+    });
+  });
+});

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

@@ -0,0 +1,113 @@
+import { composeJson } from "../../cohort-builder.utils";
+import { EncounterDetails } from "../../types";
+
+export const getDescription = ({
+  selectedEncounterTypes,
+  encounterLocations,
+  encounterForms,
+  atLeastCount,
+  atMostCount,
+  onOrAfter,
+  onOrBefore,
+}: EncounterDetails) => {
+  let description = "Patients with Encounter of";
+  const selectedEncounters = selectedEncounterTypes
+    .map((encounterType) => encounterType.label)
+    .join(", ")
+    .replace(/,(?=[^,]*$)/, " and ");
+
+  description += selectedEncounters
+    ? ` Type${selectedEncounters.length > 1 ? "s" : ""} ${selectedEncounters}`
+    : " any Type";
+  if (encounterLocations.length) {
+    description += ` at ${encounterLocations
+      .map((location) => location.label)
+      .join(", ")}`;
+  }
+  if (encounterForms.length) {
+    description += ` from ${encounterForms
+      .map((form) => form.label)
+      .join(", ")}`;
+  }
+  if (atLeastCount) {
+    description += ` at least ${atLeastCount} ${
+      atLeastCount > 1 ? "times" : "time"
+    }`;
+  }
+  if (atMostCount) {
+    description += ` ${atLeastCount ? " and" : ""} at most ${atMostCount} ${
+      atMostCount > 1 ? "times" : "time"
+    }`;
+  }
+  if (onOrAfter) {
+    if (onOrBefore) {
+      description += ` from ${onOrAfter}`;
+    } else {
+      description += ` on or after ${onOrAfter}`;
+    }
+  }
+  if (onOrBefore) {
+    if (onOrAfter) {
+      description += ` to ${onOrBefore}`;
+    } else {
+      description += ` on or before ${onOrBefore}`;
+    }
+  }
+  return description;
+};
+
+export const getQueryDetails = ({
+  onOrAfter,
+  atLeastCount,
+  atMostCount,
+  encounterForms,
+  encounterLocations,
+  onOrBefore,
+  selectedEncounterTypes,
+}: EncounterDetails) => {
+  const searchParams = { encounterSearchAdvanced: [] };
+  if (onOrAfter) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "onOrAfter",
+      value: onOrAfter,
+    });
+  }
+  if (atLeastCount) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "atLeastCount",
+      value: atLeastCount,
+    });
+  }
+  if (atMostCount) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "atMostCount",
+      value: atMostCount,
+    });
+  }
+  if (encounterForms.length) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "formList",
+      value: encounterForms.map((form) => form.value),
+    });
+  }
+  if (encounterLocations.length) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "locationList",
+      value: encounterLocations.map((location) => location.value),
+    });
+  }
+  if (onOrBefore) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "onOrBefore",
+      value: onOrBefore,
+    });
+  }
+  if (selectedEncounterTypes.length > 0) {
+    searchParams.encounterSearchAdvanced.push({
+      name: "encounterTypeList",
+      value: selectedEncounterTypes.map((encounterType) => encounterType.value),
+    });
+  }
+
+  return composeJson(searchParams);
+};