@openmrs/esm-cohort-builder-app 3.0.0

package/src/components/search-by-concepts/search-concept/search-concept.style.css

@@ -0,0 +1,25 @@
+.search {
+  max-height: 400px;
+  overflow: scroll;
+  position: absolute;
+  z-index: 2;
+  width: 33%;
+  background: #f0eeee;
+}
+
+.concept {
+  font-weight: bold;
+}
+
+.text {
+ padding-top: 1.5rem;
+}
+
+.notification {
+  position: fixed;
+  left: 50%;
+  bottom: 20px;
+  transform: translate(-50%, -50%);
+  margin: 0 auto;
+  z-index: 1;
+}

package/src/components/search-by-concepts/search-concept/search-concept.test.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+import { render, cleanup, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Concept } from "../../../types";
+import { SearchConcept } from "./search-concept.component";
+import * as apis from "./search-concept.resource";
+
+jest.mock("./search-concept.resource.ts");
+
+const concepts: Concept[] = [
+  {
+    uuid: "1000AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+    units: "",
+    answers: [],
+    hl7Abbrev: "ZZ",
+    name: "Whole blood sample",
+    description: "Blood samples not seperated into subtypes",
+    datatype: {
+      uuid: "8d4a4c94-c2cc-11de-8d13-0010c6dffd0f",
+      name: "N/A",
+      description: "Not associated with a datatype (e.g., term answers, sets)",
+      hl7Abbreviation: "ZZ",
+    },
+  },
+  {
+    uuid: "2a08da66-f326-4cac-b4cc-6efd68333847",
+    units: "mg/dl",
+    answers: [],
+    hl7Abbrev: "NM",
+    name: "BLOOD SUGAR",
+    description: "Laboratory measurement of the glucose level in the blood.",
+    datatype: {
+      uuid: "8d4a4488-c2cc-11de-8d13-0010c6dffd0f",
+      name: "Numeric",
+      description:
+        "Numeric value, including integer or float (e.g., creatinine, weight)",
+      hl7Abbreviation: "NM",
+    },
+  },
+];
+
+describe("Test the concept search component", () => {
+  afterEach(cleanup);
+  it("should be able to search for a concept", async () => {
+    const user = userEvent.setup();
+    jest.spyOn(apis, "getConcepts").mockResolvedValue(concepts);
+    let searchText = "";
+    const setSearchText = jest
+      .fn()
+      .mockImplementation((search: string) => (searchText = search));
+    render(
+      <SearchConcept
+        concept={null}
+        setConcept={jest.fn()}
+        searchText={searchText}
+        setSearchText={setSearchText}
+      />
+    );
+    const searchInput = screen.getByPlaceholderText("Search Concepts");
+    await waitFor(() => user.click(searchInput));
+    await waitFor(() => user.type(searchInput, "blood s"));
+
+    await waitFor(() =>
+      expect(jest.spyOn(apis, "getConcepts")).toBeCalledWith(searchText)
+    );
+    expect(screen.getByText(concepts[0].name)).toBeInTheDocument();
+    expect(screen.getByText(concepts[1].name)).toBeInTheDocument();
+  });
+
+  it("should be able to clear the current search value", async () => {
+    const user = userEvent.setup();
+    const { getByLabelText, getByPlaceholderText } = render(
+      <SearchConcept
+        concept={null}
+        setConcept={jest.fn()}
+        searchText={""}
+        setSearchText={jest.fn()}
+      />
+    );
+    const searchInput = getByPlaceholderText("Search Concepts");
+    await waitFor(() => user.click(searchInput));
+    await waitFor(() => user.type(searchInput, "blood"));
+    const clearButton = getByLabelText("Clear search");
+    await waitFor(() => user.click(clearButton));
+    expect(searchInput.getAttribute("value")).toEqual("");
+  });
+});

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

@@ -0,0 +1,209 @@
+import React, { useState } from "react";
+
+import {
+  DatePicker,
+  DatePickerInput,
+  Column,
+  NumberInput,
+  Switch,
+  ContentSwitcher,
+} from "@carbon/react";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+
+import { SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import styles from "./search-by-demographics.style.scss";
+import {
+  getDescription,
+  getQueryDetails,
+} from "./search-by-demographics.utils";
+
+const SearchByDemographics: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const [livingStatus, setLivingStatus] = useState("alive");
+  const [gender, setGender] = useState("all");
+  const [birthDayStartDate, setBirthDayStartDate] = useState("");
+  const [birthDayEndDate, setBirthDayEndDate] = useState("");
+  const [minAge, setMinAge] = useState(0);
+  const [maxAge, setMaxAge] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const genders = [
+    {
+      id: 0,
+      label: t("all", "All"),
+      value: "all",
+    },
+    {
+      id: 1,
+      label: t("males", "Male"),
+      value: "males",
+    },
+    {
+      id: 3,
+      label: t("females", "Female"),
+      value: "females",
+    },
+  ];
+
+  const livingStatuses = [
+    {
+      id: 0,
+      label: t("alive", "Alive"),
+      value: "alive",
+    },
+    {
+      id: 1,
+      label: t("dead", "Dead"),
+      value: "dead",
+    },
+  ];
+
+  const reset = () => {
+    setMaxAge(0);
+    setMinAge(0);
+    setBirthDayEndDate("");
+    setBirthDayStartDate("");
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    const demographics = {
+      gender,
+      minAge,
+      maxAge,
+      birthDayStartDate,
+      birthDayEndDate,
+      livingStatus,
+    };
+    await onSubmit(getQueryDetails(demographics), getDescription(demographics));
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Column>
+        <p className={`${styles.text} ${styles.genderTitle}`}>
+          {t("gender", "Gender")}
+        </p>
+        <div className={styles.genderContainer}>
+          <div className={styles.switch}>
+            <ContentSwitcher
+              selectedIndex={genders[0].id}
+              className={styles.contentSwitcher}
+              size="lg"
+              onChange={({ index }) => setGender(genders[index].value)}
+            >
+              {genders.map((gender) => (
+                <Switch
+                  data-testid={gender.label}
+                  key={gender.id}
+                  name={gender.value}
+                  text={gender.label}
+                />
+              ))}
+            </ContentSwitcher>
+          </div>
+          <div className={styles.switch}>
+            <ContentSwitcher
+              selectedIndex={livingStatuses[0].id}
+              className={styles.contentSwitcher}
+              size="lg"
+              onChange={({ index }) =>
+                setLivingStatus(livingStatuses[index].value)
+              }
+            >
+              {livingStatuses.map((livingStatus) => (
+                <Switch
+                  key={livingStatus.id}
+                  name={livingStatus.value}
+                  text={livingStatus.label}
+                />
+              ))}
+            </ContentSwitcher>
+          </div>
+        </div>
+      </Column>
+      <div className={styles.column}>
+        <Column className={styles.age}>
+          <Column>
+            <NumberInput
+              hideSteppers={true}
+              id="minAge"
+              data-testid="minAge"
+              label={t("ageBetween", "Age between")}
+              invalidText={t(
+                "minAgeIsNotValid",
+                "The age must be greater than 0"
+              )}
+              min={0}
+              value={minAge}
+              onChange={(event, { value }) => setMinAge(value)}
+            />
+          </Column>
+          <Column>
+            <NumberInput
+              id="maxAge"
+              hideSteppers={true}
+              data-testid="maxAge"
+              label={t("and", "and")}
+              invalidText={t(
+                "maxAgeIsNotValid",
+                "The age must be less than 200"
+              )}
+              min={0}
+              max={200}
+              value={maxAge}
+              onChange={(event, { value }) => setMaxAge(value)}
+            />
+          </Column>
+        </Column>
+      </div>
+      <div className={styles.column}>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setBirthDayStartDate(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="startDate"
+              labelText={t("birthDate", "Birth date between")}
+              value={
+                birthDayStartDate &&
+                dayjs(birthDayStartDate).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+        <Column>
+          <DatePicker
+            datePickerType="single"
+            allowInput={false}
+            onChange={(date) => setBirthDayEndDate(dayjs(date[0]).format())}
+          >
+            <DatePickerInput
+              id="endDate"
+              labelText={t("and", "and")}
+              value={
+                birthDayEndDate && dayjs(birthDayEndDate).format("DD-MM-YYYY")
+              }
+              placeholder="DD-MM-YYYY"
+              size="md"
+            />
+          </DatePicker>
+        </Column>
+      </div>
+      <SearchButtonSet
+        isLoading={isLoading}
+        onHandleSubmit={submit}
+        onHandleReset={reset}
+      />
+    </>
+  );
+};
+
+export default SearchByDemographics;

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

@@ -0,0 +1,41 @@
+@use '@carbon/styles/scss/spacing';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.contentSwitcher {
+  height: spacing.$spacing-08;
+}
+
+.column {
+ padding-top: 1.5rem;
+ display: flex;
+}
+
+.text {
+  padding-right: 1rem;
+  font-size: 0.75rem;
+  color: #525252;
+ }
+
+.switch {
+  width: 60%;
+  padding-right: 1rem;
+}
+
+.genderContainer{
+  display: flex;
+  align-items: end;
+}
+
+.ageContainer {
+   display: flex;
+   justify-content: space-between;
+   width: 34%;
+}
+
+.age {
+  display: flex;
+}
+
+.genderTitle {
+  padding-bottom: 0.5rem;
+}

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

@@ -0,0 +1,92 @@
+import React from "react";
+
+import { render, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import dayjs from "dayjs";
+
+import SearchByDemographics from "./search-by-demographics.component";
+
+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.males",
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+      {
+        key: "reporting.library.cohortDefinition.builtIn.ageRangeOnDate",
+        parameterValues: {
+          minAge: "10",
+          maxAge: "20",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+      {
+        key: "reporting.library.cohortDefinition.builtIn.diedDuringPeriod",
+        parameterValues: {
+          endDate: "2022-07-09T17:12:47+05:30",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    customRowFilterCombination: "1 AND 2 AND NOT 3",
+  },
+};
+
+describe("Test the search by demographics component", () => {
+  afterEach(cleanup);
+
+  it("should be able to select input values", async () => {
+    const submit = jest.fn();
+    const { getByTestId } = render(<SearchByDemographics onSubmit={submit} />);
+
+    fireEvent.click(getByTestId("Male"));
+    const minAgeInput = getByTestId("minAge");
+    const maxAgeInput = getByTestId("maxAge");
+
+    fireEvent.click(minAgeInput);
+    await waitFor(() => userEvent.type(minAgeInput, "10"));
+
+    fireEvent.click(maxAgeInput);
+    await waitFor(() => userEvent.type(maxAgeInput, "20"));
+
+    expectedQuery.query.rowFilters[2].parameterValues.endDate =
+      dayjs().format();
+    fireEvent.click(getByTestId("search-btn"));
+
+    await waitFor(() => {
+      expect(submit).toBeCalledWith(
+        expectedQuery,
+        "Male Patients with ages between 10 and 20 years that are alive"
+      );
+    });
+  });
+});

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

@@ -0,0 +1,129 @@
+import dayjs from "dayjs";
+
+import { composeJson } from "../../cohort-builder.utils";
+
+interface DemographicsSearchParams {
+  gender: string;
+  ageRangeOnDate?: Value[];
+  atLeastAgeOnDate?: Value[];
+  upToAgeOnDate?: Value[];
+  bornDuringPeriod?: Value[];
+  diedDuringPeriod?: Value[];
+}
+
+interface Value {
+  name: string;
+  value: number | string;
+  dataType?: string;
+  livingStatus?: string;
+}
+
+interface Demographics {
+  gender: string;
+  minAge: number;
+  maxAge: number;
+  birthDayStartDate: string;
+  birthDayEndDate: string;
+  livingStatus: string;
+}
+
+export const getDescription = ({
+  gender,
+  minAge,
+  maxAge,
+  birthDayStartDate,
+  birthDayEndDate,
+  livingStatus,
+}: Demographics) => {
+  let description =
+    gender != "all"
+      ? `${gender === "males" ? "Male" : "Female"} Patients`
+      : "All Patients";
+  if (minAge || maxAge) {
+    if (minAge && maxAge) {
+      description += ` with ages between ${minAge} and ${maxAge}`;
+    } else {
+      description += minAge
+        ? ` with minimum age of ${minAge}`
+        : ` with maximum age of ${maxAge}`;
+    }
+    description += " years";
+  }
+  if (birthDayStartDate != "" || birthDayEndDate != "") {
+    if (birthDayStartDate && birthDayEndDate) {
+      description += ` and birthdate between ${birthDayStartDate} and ${birthDayEndDate}`;
+    } else {
+      description += minAge
+        ? ` and born before ${birthDayStartDate}`
+        : ` and born before ${birthDayEndDate}`;
+    }
+  }
+  if (livingStatus) {
+    description += ` that are ${livingStatus}`;
+  }
+  return description;
+};
+
+export const getQueryDetails = ({
+  gender,
+  minAge,
+  maxAge,
+  birthDayStartDate,
+  birthDayEndDate,
+  livingStatus,
+}: Demographics) => {
+  const searchParameters: DemographicsSearchParams = { gender };
+
+  if (minAge && maxAge) {
+    searchParameters.ageRangeOnDate = [
+      { name: "minAge", value: minAge },
+      { name: "maxAge", value: maxAge },
+    ];
+  } else {
+    if (minAge) {
+      searchParameters.atLeastAgeOnDate = [{ name: "minAge", value: minAge }];
+    } else {
+      searchParameters.upToAgeOnDate = [{ name: "maxAge", value: maxAge }];
+    }
+  }
+  if (birthDayStartDate && birthDayEndDate) {
+    searchParameters.bornDuringPeriod = [
+      { name: "startDate", dataType: "date", value: birthDayStartDate },
+      { name: "endDate", dataType: "date", value: birthDayEndDate },
+    ];
+  }
+
+  const today = dayjs().format();
+  searchParameters.diedDuringPeriod = [
+    { name: "endDate", dataType: "date", value: today, livingStatus },
+  ];
+
+  const queryDetails = composeJson(searchParameters);
+
+  if (searchParameters.gender === "all") {
+    const rowFilterWithAllGenders = ["males", "females", "unknownGender"].map(
+      (gender) => {
+        return {
+          type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+          key: `reporting.library.cohortDefinition.builtIn.${gender}`,
+        };
+      }
+    );
+    let {
+      query: { rowFilters, customRowFilterCombination },
+    } = queryDetails;
+    rowFilters =
+      rowFilters.length > 0
+        ? [...rowFilters, ...rowFilterWithAllGenders]
+        : rowFilterWithAllGenders;
+    const filters = rowFilters;
+    const filterCombination = customRowFilterCombination;
+    customRowFilterCombination = filterCombination
+      ? `(${filters.length - 2} OR ${filters.length - 1} OR ${
+          filters.length
+        }) AND ${filterCombination}`
+      : "(1 OR 2 OR 3)";
+  }
+
+  return queryDetails;
+};