@openmrs/esm-cohort-builder-app 3.0.0

package/src/components/search-by-drug-orders/search-by-drug-orders.component.tsx

@@ -0,0 +1,185 @@
+import React, { useState } from "react";
+
+import {
+  Column,
+  DatePicker,
+  DatePickerInput,
+  Dropdown,
+  MultiSelect,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+
+import { DropdownValue, DrugOrderDetails, SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import { useCareSettings, useDrugs } from "./search-by-drug-orders.resources";
+import styles from "./search-by-drug-orders.style.scss";
+import { getDescription, getQueryDetails } from "./search-by-drug-orders.utils";
+
+const SearchByDrugOrder: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const { drugs, drugsError } = useDrugs();
+  const { careSettings, careSettingsError } = useCareSettings();
+  const [activeOnOrAfter, setActiveOnOrAfter] = useState("");
+  const [activeOnOrBefore, setActiveOnOrBefore] = useState("");
+  const [activatedOnOrAfter, setActivatedOnOrAfter] = useState("");
+  const [activatedOnOrBefore, setActivatedOnOrBefore] = useState("");
+  const [selectedDrugs, setSelectedDrugs] = useState<DropdownValue[]>(null);
+  const [selectedCareSetting, setSelectedCareSetting] =
+    useState<DropdownValue>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (drugsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: drugsError?.message,
+    });
+  }
+
+  if (careSettingsError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: careSettingsError?.message,
+    });
+  }
+
+  const handleResetInputs = () => {
+    setSelectedDrugs(null);
+    setSelectedCareSetting(null);
+    setActiveOnOrAfter("");
+    setActiveOnOrBefore("");
+    setActivatedOnOrAfter("");
+    setActivatedOnOrBefore("");
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    const drugOrderParams: DrugOrderDetails = {
+      selectedDrugs,
+      selectedCareSetting,
+      activeOnOrAfter,
+      activeOnOrBefore,
+      activatedOnOrAfter,
+      activatedOnOrBefore,
+    };
+    await onSubmit(
+      getQueryDetails(drugOrderParams),
+      getDescription(drugOrderParams)
+    );
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Column>
+        <div>
+          <MultiSelect
+            id="drugs"
+            data-testid="drugs"
+            onChange={(data) => setSelectedDrugs(data.selectedItems)}
+            items={drugs}
+            label={t("selectDrugs", "Select drugs")}
+          />
+        </div>
+      </Column>
+      <div className={styles.column}>
+        <Column>
+          <Dropdown
+            id="careSettings"
+            data-testid="careSettings"
+            onChange={(data) => setSelectedCareSetting(data.selectedItem)}
+            initialSelectedItem={careSettings[0]}
+            items={careSettings}
+            label={t("selectCareSettings", "Select a care setting")}
+          />
+        </Column>
+      </div>
+      <div className={styles.column}>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setActiveOnOrAfter(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="activeOnOrAfter"
+              labelText={t("using", "Using between")}
+              value={
+                activeOnOrAfter && dayjs(activeOnOrAfter).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setActiveOnOrBefore(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="activeOnOrBefore"
+              value={
+                activeOnOrBefore && dayjs(activeOnOrBefore).format("DD-MM-YYYY")
+              }
+              labelText={t("to", "to")}
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+      </div>
+      <div className={styles.column}>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setActivatedOnOrAfter(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="activatedOnOrAfter"
+              labelText={t("used", "Used between")}
+              value={
+                activatedOnOrAfter &&
+                dayjs(activatedOnOrAfter).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setActivatedOnOrBefore(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="activatedOnOrBefore"
+              value={
+                activatedOnOrBefore &&
+                dayjs(activatedOnOrBefore).format("DD-MM-YYYY")
+              }
+              labelText={t("and", "and")}
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+      </div>
+      <SearchButtonSet
+        onHandleReset={handleResetInputs}
+        onHandleSubmit={submit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default SearchByDrugOrder;

package/src/components/search-by-drug-orders/search-by-drug-orders.resources.ts

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+
+import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWRImmutable from "swr/immutable";
+
+import { DropdownValue, Response } from "../../types";
+
+/**
+ * @returns Drugs
+ */
+export function useDrugs() {
+  const { data, error } = useSWRImmutable<{
+    data: { results: Response[] };
+  }>("/ws/rest/v1/drug", openmrsFetch);
+
+  const results = useMemo(() => {
+    const drugs: DropdownValue[] = [];
+    data?.data.results.map((drug: Response, index: number) => {
+      drugs.push({
+        id: index,
+        label: drug.display,
+        value: drug.uuid,
+      });
+    });
+    return {
+      isLoading: !data && !error,
+      drugs,
+      drugsError: error,
+    };
+  }, [data, error]);
+
+  return results;
+}
+
+/**
+ * @returns CareSettings
+ */
+export function useCareSettings() {
+  const { data, error } = useSWRImmutable<{
+    data: { results: Response[] };
+  }>("/ws/rest/v1/caresetting", openmrsFetch);
+
+  const results = useMemo(() => {
+    const careSettings: DropdownValue[] = [];
+    data?.data.results.map((careSetting: Response, index: number) => {
+      careSettings.push({
+        id: index,
+        label: careSetting.display,
+        value: careSetting.uuid,
+      });
+    });
+    return {
+      isLoading: !data && !error,
+      careSettings,
+      careSettingsError: error,
+    };
+  }, [data, error]);
+
+  return results;
+}

package/src/components/search-by-drug-orders/search-by-drug-orders.style.scss

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

package/src/components/search-by-drug-orders/search-by-drug-orders.test.tsx

@@ -0,0 +1,159 @@
+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 SearchByDrugOrder from "./search-by-drug-orders.component";
+import { useCareSettings, useDrugs } from "./search-by-drug-orders.resources";
+
+const mockCareSettings = [
+  {
+    id: 0,
+    label: "Isolation Ward",
+    value: "ac7d7773-fe9f-11ec-8b9b-0242ac1b1102",
+  },
+  {
+    id: 1,
+    label: "Armani Hospital",
+    value: "8d8718c2-c2cc-11de-8d13-0010c6effd0f",
+  },
+  {
+    id: 2,
+    label: "Pharmacy",
+    value: "8d871afc-c2cc-11de-8d13-0010c6dffd0f",
+  },
+];
+
+const mockDrugs = [
+  {
+    id: 0,
+    label: "Triomune-40",
+    value: "ac7d7773-fe9f-11ec-8b9b-0242ac1b0402",
+  },
+  {
+    id: 1,
+    label: "Valium",
+    value: "8d8718c2-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 2,
+    label: "Aspirin",
+    value: "9d971afc-c2cc-11de-8d13-0010c6dffd0f",
+  },
+];
+
+const expectedQuery = {
+  query: {
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+    columns: [
+      {
+        name: "firstname",
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.givenName",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "lastname",
+        key: "reporting.library.patientDataDefinition.builtIn.preferredName.familyName",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "gender",
+        key: "reporting.library.patientDataDefinition.builtIn.gender",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "age",
+        key: "reporting.library.patientDataDefinition.builtIn.ageOnDate.fullYears",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+      {
+        name: "patientId",
+        key: "reporting.library.patientDataDefinition.builtIn.patientId",
+        type: "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition",
+      },
+    ],
+    rowFilters: [
+      {
+        key: "reporting.library.cohortDefinition.builtIn.drugOrderSearch",
+        parameterValues: {
+          careSetting: mockCareSettings[2].value,
+          drugs: [mockDrugs[0].value, mockDrugs[1].value],
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    customRowFilterCombination: "1",
+  },
+};
+
+jest.mock("./search-by-drug-orders.resources", () => {
+  const original = jest.requireActual("./search-by-drug-orders.resources");
+  return {
+    ...original,
+    useCareSettings: jest.fn(),
+    useDrugs: jest.fn(),
+  };
+});
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+describe("Test the search by drug orders component", () => {
+  it("should be able to select input values", async () => {
+    // @ts-ignore
+    useCareSettings.mockImplementation(() => ({
+      careSettings: mockCareSettings,
+      isLoading: false,
+      careSettingsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockCareSettings },
+    });
+
+    // @ts-ignore
+    useDrugs.mockImplementation(() => ({
+      drugs: mockDrugs,
+      isLoading: false,
+      drugsError: undefined,
+    }));
+    mockOpenmrsFetch.mockReturnValueOnce({
+      data: { results: mockCareSettings },
+    });
+
+    const submit = jest.fn();
+    const { getByTestId, getByTitle, getByText } = render(
+      <SearchByDrugOrder onSubmit={submit} />
+    );
+
+    waitFor(() => {
+      fireEvent.click(getByText(translations.selectDrugs));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByText(mockDrugs[1].label));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByText(mockDrugs[2].label));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByTitle(mockCareSettings[0].label));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByText(mockCareSettings[2].label));
+    });
+
+    waitFor(() => {
+      fireEvent.click(getByTestId("search-btn"));
+    });
+
+    await waitFor(() => {
+      expect(submit).toBeCalledWith(
+        expectedQuery,
+        `Patients who taking ${mockDrugs[1].label} and ${mockDrugs[2].label} from Pharmacy`
+      );
+    });
+  });
+});

package/src/components/search-by-drug-orders/search-by-drug-orders.utils.ts

@@ -0,0 +1,118 @@
+import { formatDate } from "@openmrs/esm-framework";
+
+import { composeJson } from "../../cohort-builder.utils";
+import { DrugOrderDetails } from "./../../types/index";
+
+export const getDescription = ({
+  selectedDrugs,
+  selectedCareSetting,
+  activeOnOrBefore,
+  activeOnOrAfter,
+  activatedOnOrBefore,
+  activatedOnOrAfter,
+}: DrugOrderDetails) => {
+  let description =
+    "Patients who taking " +
+    selectedDrugs
+      .map((drug) => drug.label)
+      .join(", ")
+      .replace(/,(?=[^,]*$)/, " and");
+
+  if (selectedCareSetting) {
+    description += ` from ${selectedCareSetting.label}`;
+  }
+
+  if (activeOnOrAfter) {
+    const date = formatDate(new Date(activeOnOrAfter), { mode: "standard" });
+    if (activeOnOrBefore) {
+      description += ` from ${date}`;
+    } else {
+      description += ` on or after ${date}`;
+    }
+  }
+
+  if (activeOnOrBefore) {
+    const date = formatDate(new Date(activeOnOrBefore), { mode: "standard" });
+    if (activeOnOrAfter) {
+      description += ` to ${date}`;
+    } else {
+      description += ` on or before ${date}`;
+    }
+  }
+
+  if (activatedOnOrAfter) {
+    const date = formatDate(new Date(activatedOnOrAfter), { mode: "standard" });
+    if (activatedOnOrBefore) {
+      description += ` from ${date}`;
+    } else {
+      description += ` on or after ${date}`;
+    }
+  }
+
+  if (activatedOnOrBefore) {
+    const date = formatDate(new Date(activatedOnOrBefore), {
+      mode: "standard",
+    });
+    if (activatedOnOrAfter) {
+      description += ` to ${date}`;
+    } else {
+      description += ` on or before ${date}`;
+    }
+  }
+
+  return description;
+};
+
+export const getQueryDetails = ({
+  selectedDrugs,
+  selectedCareSetting,
+  activeOnOrBefore,
+  activeOnOrAfter,
+  activatedOnOrBefore,
+  activatedOnOrAfter,
+}: DrugOrderDetails) => {
+  const searchParams = { drugOrderSearch: [] };
+  if (activeOnOrAfter) {
+    searchParams.drugOrderSearch.push({
+      name: "activeOnOrAfter",
+      value: activeOnOrAfter,
+    });
+  }
+
+  if (activatedOnOrAfter) {
+    searchParams.drugOrderSearch.push({
+      name: "activatedOnOrAfter",
+      value: activatedOnOrAfter,
+    });
+  }
+
+  if (activatedOnOrBefore) {
+    searchParams.drugOrderSearch.push({
+      name: "activatedOnOrBefore",
+      value: activatedOnOrBefore,
+    });
+  }
+
+  if (selectedCareSetting) {
+    searchParams.drugOrderSearch.push({
+      name: "careSetting",
+      value: selectedCareSetting.value,
+    });
+  }
+
+  if (selectedDrugs.length) {
+    searchParams.drugOrderSearch.push({
+      name: "drugs",
+      value: selectedDrugs.map((form) => form.value),
+    });
+  }
+
+  if (activeOnOrBefore) {
+    searchParams.drugOrderSearch.push({
+      name: "activeOnOrBefore",
+      value: activeOnOrBefore,
+    });
+  }
+
+  return composeJson(searchParams);
+};