@openmrs/esm-cohort-builder-app 3.0.0

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

@@ -0,0 +1,344 @@
+import React, { useState } from "react";
+
+import {
+  DatePicker,
+  DatePickerInput,
+  Column,
+  Dropdown,
+  NumberInput,
+  Switch,
+  ContentSwitcher,
+} from "@carbon/react";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+
+import {
+  composeJson,
+  queryDescriptionBuilder,
+} from "../../cohort-builder.utils";
+import { Concept, SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import styles from "./search-by-concepts.style.scss";
+import { SearchConcept } from "./search-concept/search-concept.component";
+
+const operators = [
+  {
+    id: 0,
+    label: "<",
+    value: "LESS_THAN",
+  },
+  {
+    id: 1,
+    label: "<=",
+    value: "LESS_EQUAL",
+  },
+  {
+    id: 2,
+    label: "=",
+    value: "EQUAL",
+  },
+  {
+    id: 3,
+    label: ">=",
+    value: "GREATER_EQUAL",
+  },
+  {
+    id: 4,
+    label: ">",
+    value: "GREATER_THAN",
+  },
+];
+
+interface Observation {
+  timeModifier: string;
+  question: string;
+  operator1: string;
+  modifier: string;
+  onOrBefore: string;
+  onOrAfter: string;
+  value1: string;
+}
+
+const types = {
+  CWE: "codedObsSearchAdvanced",
+  NM: "numericObsSearchAdvanced",
+  DT: "dateObsSearchAdvanced",
+  ST: "dateObsSearchAdvanced",
+  TS: "textObsSearchAdvanced",
+  ZZ: "codedObsSearchAdvanced",
+  BIT: "codedObsSearchAdvanced",
+};
+
+const SearchByConcepts: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const [concept, setConcept] = useState<Concept>(null);
+  const [lastDays, setLastDays] = useState(0);
+  const [lastMonths, setLastMonths] = useState(0);
+  const [operatorValue, setOperatorValue] = useState(0);
+  const [operator, setOperator] = useState("LESS_THAN");
+  const [timeModifier, setTimeModifier] = useState("ANY");
+  const [onOrAfter, setOnOrAfter] = useState("");
+  const [onOrBefore, setOnOrBefore] = useState("");
+  const [searchText, setSearchText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const observationOptions = [
+    {
+      id: "option-0",
+      label: t("haveObservations", "Patients who have these observations"),
+      value: "ANY",
+    },
+    {
+      id: "option-1",
+      label: t(
+        "haveNoObservations",
+        "Patients who do not have these observations"
+      ),
+      value: "NO",
+    },
+  ];
+
+  const whichObservation = [
+    {
+      id: "option-0",
+      label: t("any", "Any"),
+      value: "ANY",
+    },
+    {
+      id: "option-1",
+      label: t("none", "None"),
+      value: "NO",
+    },
+    {
+      id: "option-2",
+      label: t("earliest", "Earliest"),
+      value: "FIRST",
+    },
+    {
+      id: "option-3",
+      label: t("recent", "Most Recent"),
+      value: "LAST",
+    },
+    {
+      id: "option-4",
+      label: t("lowest", "Lowest"),
+      value: "MIN",
+    },
+    {
+      id: "option-5",
+      label: t("highest", "Highest"),
+      value: "MAX",
+    },
+    {
+      id: "option-6",
+      label: t("average", "Average"),
+      value: "AVG",
+    },
+  ];
+
+  const reset = () => {
+    setConcept(null);
+    setLastDays(0);
+    setSearchText("");
+    setOnOrAfter("");
+    setOnOrBefore("");
+    setLastMonths(0);
+    setOperatorValue(0);
+    setOperator("LESS_THAN");
+    setTimeModifier("ANY");
+  };
+
+  const getOnOrBefore = () => {
+    if (lastDays > 0 || lastMonths > 0) {
+      return dayjs()
+        .subtract(lastDays, "days")
+        .subtract(lastMonths, "months")
+        .format();
+    }
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    const observations: Observation = {
+      modifier: "",
+      operator1: operator,
+      value1: operatorValue > 0 ? operatorValue.toString() : "",
+      question: concept.uuid,
+      onOrBefore: getOnOrBefore() || onOrBefore,
+      onOrAfter,
+      timeModifier,
+    };
+    const dataType = types[concept.hl7Abbrev];
+    const params = { [dataType]: [] };
+    Object.keys(observations).forEach((key) => {
+      observations[key] !== ""
+        ? params[dataType].push({
+            name:
+              key === "modifier"
+                ? ["CWE", "TS"].includes(concept.hl7Abbrev)
+                  ? "values"
+                  : "value1"
+                : key,
+            value:
+              key === "modifier" && ["CWE", "TS"].includes(concept.hl7Abbrev)
+                ? [observations[key]]
+                : observations[key],
+          })
+        : "";
+    });
+    await onSubmit(
+      composeJson(params),
+      queryDescriptionBuilder(observations, concept.name)
+    );
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <div>
+        <SearchConcept
+          setConcept={setConcept}
+          concept={concept}
+          searchText={searchText}
+          setSearchText={setSearchText}
+        />
+        {concept?.hl7Abbrev === "NM" ? (
+          <>
+            <Column className={styles.column}>
+              <div style={{ display: "flex" }}>
+                <div className={styles.multipleInputs}>
+                  <p style={{ paddingRight: 20 }}>
+                    {t("whatObservations", "What observations")}
+                  </p>
+                  <Dropdown
+                    id="timeModifier"
+                    onChange={(data) =>
+                      setTimeModifier(data.selectedItem.value)
+                    }
+                    initialSelectedItem={whichObservation[0]}
+                    items={whichObservation}
+                    className={styles.timeModifier}
+                    label=""
+                  />
+                </div>
+              </div>
+            </Column>
+            <Column className={styles.column}>
+              <p className={styles.value}>{t("whatValues", "What values")}</p>
+              <div className={styles.whatValuesInputs}>
+                <div className={styles.operators}>
+                  <ContentSwitcher
+                    selectedIndex={operators[0].id}
+                    className={styles.contentSwitcher}
+                    size="lg"
+                    onChange={({ index }) =>
+                      setOperator(operators[index].value)
+                    }
+                  >
+                    {operators.map((operator) => (
+                      <Switch
+                        key={operator.id}
+                        name={operator.value}
+                        text={operator.label}
+                      />
+                    ))}
+                  </ContentSwitcher>
+                </div>
+                <div className={styles.multipleInputs}>
+                  <NumberInput
+                    hideSteppers={true}
+                    id="operator-value"
+                    invalidText={t("numberIsNotValid", "Number is not valid")}
+                    label={t("valueIn", "Enter a value in ") + concept.units}
+                    min={0}
+                    size="sm"
+                    value={operatorValue}
+                    onChange={(event, { value }) => setOperatorValue(value)}
+                  />
+                </div>
+              </div>
+            </Column>
+          </>
+        ) : (
+          <Column className={styles.column}>
+            <Dropdown
+              id="timeModifier"
+              data-testid="timeModifier"
+              onChange={(data) => setTimeModifier(data.selectedItem.value)}
+              initialSelectedItem={observationOptions[0]}
+              items={observationOptions}
+              label=""
+            />
+          </Column>
+        )}
+        <Column className={styles.dateRange}>
+          <Column>
+            <NumberInput
+              hideSteppers={true}
+              id="last-months"
+              data-testid="last-months"
+              label={t("withinTheLast", "Within the last months")}
+              invalidText={t("numberIsNotValid", "Number is not valid")}
+              min={0}
+              size="sm"
+              value={lastMonths}
+              onChange={(event, { value }) => setLastMonths(value)}
+            />
+          </Column>
+          <Column>
+            <NumberInput
+              hideSteppers={true}
+              label={t("lastDays", "and / or days")}
+              id="last-days"
+              data-testid="last-days"
+              invalidText={t("numberIsNotValid", "Number is not valid")}
+              min={0}
+              size="sm"
+              value={lastDays}
+              onChange={(event, { value }) => setLastDays(value)}
+            />
+          </Column>
+        </Column>
+        <div className={styles.dateRange}>
+          <Column>
+            <DatePicker
+              datePickerType="single"
+              allowInput={false}
+              onChange={(date) => setOnOrAfter(dayjs(date[0]).format())}
+            >
+              <DatePickerInput
+                id="startDate"
+                value={onOrAfter && dayjs(onOrAfter).format("DD-MM-YYYY")}
+                labelText={t("dateRange", "Date range start date")}
+                placeholder="DD-MM-YYYY"
+                size="md"
+              />
+            </DatePicker>
+          </Column>
+          <Column>
+            <DatePicker
+              datePickerType="single"
+              allowInput={false}
+              onChange={(date) => setOnOrBefore(dayjs(date[0]).format())}
+            >
+              <DatePickerInput
+                id="endDate"
+                value={onOrBefore && dayjs(onOrBefore).format("DD-MM-YYYY")}
+                labelText={t("endDate", "End date")}
+                placeholder="DD-MM-YYYY"
+                size="md"
+              />
+            </DatePicker>
+          </Column>
+        </div>
+      </div>
+      <SearchButtonSet
+        isLoading={isLoading}
+        onHandleSubmit={submit}
+        onHandleReset={reset}
+      />
+    </>
+  );
+};
+
+export default SearchByConcepts;

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

@@ -0,0 +1,48 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.contentSwitcher {
+  height: $spacing-08;
+}
+
+.column {
+ padding-top: 1.5rem;
+}
+
+.dateRange {
+  padding-top: 1.5rem;
+  display: flex;
+ }
+
+.text {
+ padding-top: 1.5rem;
+}
+
+.multipleInputs {
+ display: flex;
+ align-items: center;
+}
+
+.timeModifier {
+  width: 300px;
+}
+
+.lastTime {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.operators {
+  width: 60%;
+  padding-right: 1rem;
+}
+
+.value {
+  padding-right: 2rem;
+}
+
+.whatValuesInputs{
+  display: flex;
+  align-items: end;
+}

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

@@ -0,0 +1,129 @@
+import React from "react";
+
+import { render, cleanup, waitFor, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import dayjs from "dayjs";
+
+import { Concept } from "../../types";
+import SearchByConcepts from "./search-by-concepts.component";
+import * as apis from "./search-concept/search-concept.resource";
+
+jest.mock("./search-concept/search-concept.resource.ts");
+
+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.numericObsSearchAdvanced",
+        parameterValues: {
+          onOrBefore: "",
+          operator1: "LESS_THAN",
+          question: "2a08da66-f326-4cac-b4cc-6efd68333847",
+          timeModifier: "ANY",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    customRowFilterCombination: "1",
+  },
+};
+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 search by concept component", () => {
+  afterEach(cleanup);
+
+  it("should be able to select input values", async () => {
+    const user = userEvent.setup();
+    jest.spyOn(apis, "getConcepts").mockResolvedValue(concepts);
+    const submit = jest.fn();
+    render(<SearchByConcepts onSubmit={submit} />);
+    const searchInput = screen.getByPlaceholderText("Search Concepts");
+    const lastDaysInput = screen.getByTestId("last-days");
+    const lastMonthsInput = screen.getByTestId("last-months");
+
+    await waitFor(() => user.click(searchInput));
+    await waitFor(() => user.type(searchInput, "blood sugar"));
+    await waitFor(() =>
+      expect(jest.spyOn(apis, "getConcepts")).toBeCalledWith("blood sugar")
+    );
+
+    await waitFor(() => user.click(screen.getByText("BLOOD SUGAR")));
+    await waitFor(() => user.click(lastDaysInput));
+    await waitFor(() => user.clear(lastDaysInput));
+    await waitFor(() => user.type(lastDaysInput, "15"));
+    await waitFor(() => user.click(lastMonthsInput));
+    await waitFor(() => user.clear(lastMonthsInput));
+    await waitFor(() => user.type(lastMonthsInput, "4"));
+    await waitFor(() => user.click(screen.getByText("Any")));
+
+    const date = dayjs().subtract(15, "days").subtract(4, "months");
+    expectedQuery.query.rowFilters[0].parameterValues.onOrBefore =
+      date.format();
+    await waitFor(() => user.click(screen.getByTestId("search-btn")));
+
+    await waitFor(() => {
+      expect(submit).toBeCalledWith(
+        expectedQuery,
+        "Patients with ANY BLOOD SUGAR  until " + date.format("D/M/YYYY")
+      );
+    });
+  });
+});

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

@@ -0,0 +1,130 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useState,
+  useRef,
+  useEffect,
+} from "react";
+
+import { Button, Column, Search, CodeSnippetSkeleton } from "@carbon/react";
+import _debounce from "lodash/debounce";
+import { useTranslation } from "react-i18next";
+
+import { Concept } from "../../../types";
+import { getConcepts } from "./search-concept.resource";
+import styles from "./search-concept.style.css";
+
+interface SearchConceptProps {
+  concept: Concept;
+  searchText: string;
+  setConcept: Dispatch<SetStateAction<Concept>>;
+  setSearchText: Dispatch<SetStateAction<String>>;
+}
+
+export const SearchConcept: React.FC<SearchConceptProps> = ({
+  concept,
+  searchText,
+  setConcept,
+  setSearchText,
+}) => {
+  const { t } = useTranslation();
+  const [searchResults, setSearchResults] = useState<Concept[]>([]);
+  const [searchError, setSearchError] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [isSearchResultsEmpty, setIsSearchResultsEmpty] = useState(false);
+
+  const onSearch = async (search: string) => {
+    setSearchResults([]);
+    setConcept(null);
+    setIsSearching(true);
+    setIsSearchResultsEmpty(false);
+    try {
+      const concepts = await getConcepts(search);
+      if (concepts.length) {
+        setSearchResults(concepts);
+      } else {
+        setIsSearchResultsEmpty(true);
+      }
+      setIsSearching(false);
+    } catch (error) {
+      setSearchError(error.toString());
+      setIsSearching(false);
+    }
+  };
+
+  const debouncedSearch = useRef(
+    _debounce(async (searchText: string) => {
+      if (searchText) {
+        await onSearch(searchText);
+      }
+    }, 500)
+  ).current;
+
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+
+  const onSearchClear = () => {
+    setIsSearchResultsEmpty(false);
+    setSearchResults([]);
+  };
+
+  const handleConceptClick = (concept: Concept) => {
+    setConcept(concept);
+    setSearchResults([]);
+    setIsSearchResultsEmpty(false);
+  };
+
+  const handleWithDebounce = (event) => {
+    setSearchText(event.target.value);
+    debouncedSearch(event.target.value);
+  };
+
+  return (
+    <div>
+      <Column className={styles.column}>
+        <Search
+          closeButtonLabelText={t("clearSearch", "Clear search")}
+          id="concept-search"
+          labelText={t("searchConcepts", "Search Concepts")}
+          placeholder={t("searchConcepts", "Search Concepts")}
+          onChange={handleWithDebounce}
+          onClear={onSearchClear}
+          size="lg"
+          value={searchText}
+        />
+        <div className={styles.search}>
+          {isSearching ? (
+            <CodeSnippetSkeleton type="multi" />
+          ) : (
+            searchResults.map((concept: Concept) => (
+              <div key={concept.uuid}>
+                <Button
+                  kind="ghost"
+                  onClick={() => handleConceptClick(concept)}
+                >
+                  {concept.name}
+                </Button>
+                <br />
+              </div>
+            ))
+          )}
+        </div>
+        {concept && (
+          <p className={styles.text}>
+            {t("whoseAnswer", "Patients with observations whose answer is ")}
+            <span className={styles.concept}>{concept.name}</span>
+          </p>
+        )}
+        {isSearchResultsEmpty && (
+          <p className={styles.text}>
+            {t("noSearchItems", "There are no search items")}
+          </p>
+        )}
+        {searchError && <span>{searchError}</span>}
+      </Column>
+    </div>
+  );
+};

package/src/components/search-by-concepts/search-concept/search-concept.resource.ts

@@ -0,0 +1,53 @@
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+import { Concept, DataType } from "../../../types";
+
+interface ConceptResponse {
+  uuid: string;
+  descriptions: Description[];
+  units: string;
+  answers: string[];
+  datatype: DataType;
+  name: { name: string };
+}
+
+interface Description {
+  locale: string;
+  description: string;
+}
+
+/**
+ * @returns Concepts
+ * @param conceptName
+ */
+export async function getConcepts(conceptName: String): Promise<Concept[]> {
+  const searchResult: FetchResponse<{ results: ConceptResponse[] }> =
+    await openmrsFetch(`/ws/rest/v1/concept?v=full&q=${conceptName}`, {
+      method: "GET",
+    });
+
+  let concepts: Concept[] = [];
+  if (searchResult.data.results.length > 0) {
+    concepts = searchResult.data.results.map((concept) => {
+      const description = concept.descriptions.filter(
+        (description: Description) =>
+          description.locale == "en" ? description.description : ""
+      );
+      const conceptData: Concept = {
+        uuid: concept.uuid,
+        units: concept.units || "",
+        answers: concept.answers,
+        hl7Abbrev: concept.datatype.hl7Abbreviation,
+        name: concept.name.name,
+        description:
+          description.length > 0
+            ? description[0].description
+            : "no description available",
+        datatype: concept.datatype,
+      };
+      return conceptData;
+    });
+  }
+
+  return concepts;
+}