@openmrs/esm-cohort-builder-app 3.0.0

package/src/components/search-by-person-attributes/search-by-person-attributes.component.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+
+import { Column, Dropdown, TextInput } from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import { usePersonAttributes } from "./search-by-person-attributes.resource";
+import styles from "./search-by-person-attributes.style.scss";
+import {
+  getQueryDetails,
+  getSearchByAttributesDescription,
+} from "./search-by-person-attributes.utils";
+
+const SearchByPersonAttributes: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const { t } = useTranslation();
+  const { personAttributes, personAttributesError } = usePersonAttributes();
+  const [selectedAttributeValues, setSelectedAttributeValues] = useState([]);
+  const [selectedAttributeId, setSelectedAttributeId] = useState<string>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  if (personAttributesError) {
+    showToast({
+      title: t("error", "Error"),
+      kind: "error",
+      critical: true,
+      description: personAttributesError?.message,
+    });
+  }
+
+  const handleResetInputs = () => {
+    setSelectedAttributeId(null);
+    setSelectedAttributeValues([]);
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    const selectedPersonAttribute = personAttributes?.find(
+      (personAttribute) => personAttribute.value == selectedAttributeId
+    );
+    await onSubmit(
+      getQueryDetails(selectedAttributeId, selectedAttributeValues),
+      getSearchByAttributesDescription(
+        selectedPersonAttribute?.label,
+        selectedAttributeValues
+      )
+    );
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      <Column>
+        <div>
+          <Dropdown
+            id="personAttributes"
+            data-testid="personAttributes"
+            onChange={(data) => setSelectedAttributeId(data.selectedItem.value)}
+            items={personAttributes}
+            label={t("selectAttribute", "Select a person attribute")}
+          />
+        </div>
+      </Column>
+      <div className={styles.column}>
+        <Column>
+          <TextInput
+            id={"selectedAttributeValues"}
+            data-testid={"selectedAttributeValues"}
+            disabled={!selectedAttributeId}
+            labelText={t(
+              "selectedAttributeValues",
+              "Enter Comma Delimited Values"
+            )}
+            onChange={(e) =>
+              setSelectedAttributeValues(e.target.value.trim().split(","))
+            }
+          />
+        </Column>
+      </div>
+      <SearchButtonSet
+        onHandleReset={handleResetInputs}
+        onHandleSubmit={submit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default SearchByPersonAttributes;

package/src/components/search-by-person-attributes/search-by-person-attributes.resource.ts

@@ -0,0 +1,27 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWRImmutable from "swr/immutable";
+
+import { DropdownValue, Response } from "../../types";
+
+/**
+ * @returns PersonAttributes
+ */
+export function usePersonAttributes() {
+  const { data, error } = useSWRImmutable<{
+    data: { results: Response[] };
+  }>("/ws/rest/v1/personattributetype", openmrsFetch);
+
+  const personAttributes: DropdownValue[] = [];
+  data?.data.results.map((personAttribute: Response, index: number) => {
+    personAttributes.push({
+      id: index,
+      label: personAttribute.display,
+      value: personAttribute.uuid,
+    });
+  });
+  return {
+    isLoading: !data && !error,
+    personAttributes,
+    personAttributesError: error,
+  };
+}

package/src/components/search-by-person-attributes/search-by-person-attributes.style.scss

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

package/src/components/search-by-person-attributes/search-by-person-attributes.test.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import SearchByPersonAttributes from "./search-by-person-attributes.component";
+import * as apis from "./search-by-person-attributes.resource";
+
+jest.mock("./search-by-person-attributes.resource.ts");
+
+const personAttributes = [
+  {
+    id: 0,
+    label: "email",
+    value: "ac7d7773-fe9f-11ec-8b9b-0242ac1b0002",
+  },
+  {
+    id: 1,
+    label: "Birthplace",
+    value: "8d8718c2-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 2,
+    label: "Citizenship",
+    value: "8d871afc-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 3,
+    label: "Civil Status",
+    value: "8d871f2a-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 4,
+    label: "Health Center",
+    value: "8d87236c-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 5,
+    label: "Health District",
+    value: "8d872150-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 6,
+    label: "Mother's Name",
+    value: "8d871d18-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 7,
+    label: "Race",
+    value: "8d871386-c2cc-11de-8d13-0010c6dffd0f",
+  },
+  {
+    id: 8,
+    label: "Telephone Number",
+    value: "14d4f066-15f5-102d-96e4-000c29c2a5d7",
+  },
+  {
+    id: 9,
+    label: "Unknown patient",
+    value: "8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47",
+  },
+];
+
+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.personWithAttribute",
+        parameterValues: {
+          attributeType: "8d871d18-c2cc-11de-8d13-0010c6dffd0f",
+          values: ["janet", "irina"],
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+  },
+};
+
+describe("Test the search by person attributes component", () => {
+  it("should be able to select input values", async () => {
+    const user = userEvent.setup();
+    jest.spyOn(apis, "usePersonAttributes").mockReturnValue({
+      personAttributes,
+      isLoading: false,
+      personAttributesError: undefined,
+    });
+    const submit = jest.fn();
+    render(<SearchByPersonAttributes onSubmit={submit} />);
+    expect(jest.spyOn(apis, "usePersonAttributes"));
+    await waitFor(() => user.click(screen.getByText("Open menu")));
+    await waitFor(() => user.click(screen.getByText("Mother's Name")));
+    await waitFor(() =>
+      user.click(screen.getByTestId("selectedAttributeValues"))
+    );
+    await waitFor(() =>
+      user.type(screen.getByTestId("selectedAttributeValues"), "janet,irina")
+    );
+    await waitFor(() => user.click(screen.getByTestId("search-btn")));
+    expect(submit).toBeCalledWith(
+      expectedQuery,
+      "Patients with Mother's Name equal to either janet or irina"
+    );
+  });
+});

package/src/components/search-by-person-attributes/search-by-person-attributes.utils.ts

@@ -0,0 +1,42 @@
+import { composeJson } from "../../cohort-builder.utils";
+
+export const getQueryDetails = (
+  attributeId: string,
+  attributeValues: string[]
+) => {
+  const searchParameters = {
+    personWithAttribute: [
+      {
+        name: "attributeType",
+        value: attributeId,
+      },
+      {
+        name: "values",
+        value: attributeValues,
+      },
+    ],
+  };
+  const queryDetails = composeJson(searchParameters);
+
+  return queryDetails;
+};
+
+export const getSearchByAttributesDescription = (
+  attributeId: string,
+  selectedAttributeValues: string[]
+) => {
+  let description = "Patients";
+  const attributeValues =
+    selectedAttributeValues.length > 0
+      ? selectedAttributeValues.join(", ").replace(/,(?=[^,]*$)/, " or")
+      : "";
+
+  description += attributeId
+    ? ` with${attributeValues ? "" : " any"} ${attributeId}`
+    : attributeId;
+
+  description += attributeValues
+    ? ` equal to ${attributeValues.length > 1 && "either"} ${attributeValues}`
+    : "";
+  return description;
+};

package/src/components/search-history/search-history-options/search-history-options.component.tsx

@@ -0,0 +1,290 @@
+import React, { useState } from "react";
+
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  OverflowMenu,
+  OverflowMenuItem,
+  TextInput,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { downloadCSV } from "../../../cohort-builder.utils";
+import { Cohort, Patient, SearchHistoryItem } from "../../../types";
+import { createCohort, createQuery } from "./search-history-options.resources";
+
+enum Option {
+  SAVE_COHORT,
+  SAVE_QUERY,
+  DOWNLOAD,
+  DELETE,
+}
+
+interface SearchHistoryOptions {
+  searchItem: SearchHistoryItem;
+  updateSearchHistory: (selectedSearchItem: SearchHistoryItem) => void;
+}
+
+const SearchHistoryOptions: React.FC<SearchHistoryOptions> = ({
+  searchItem,
+  updateSearchHistory,
+}) => {
+  const { t } = useTranslation();
+  const [cohortName, setCohortName] = useState("");
+  const [cohortDescription, setCohortDescription] = useState("");
+  const [queryName, setQueryName] = useState("");
+  const [queryDescription, setQueryDescription] = useState("");
+  const [isDeleteCohortModalVisible, setIsDeleteCohortModalVisible] =
+    useState(false);
+  const [isSaveCohortModalVisible, setIsSaveCohortModalVisible] =
+    useState(false);
+  const [isSaveQueryModalVisible, setIsSaveQueryModalVisible] = useState(false);
+
+  const handleOption = async (option: Option) => {
+    const { patients, description } = searchItem;
+    switch (option) {
+      case Option.SAVE_COHORT:
+        setCohortDescription(description);
+        setIsSaveCohortModalVisible(true);
+        break;
+      case Option.SAVE_QUERY:
+        setQueryDescription(description);
+        setIsSaveQueryModalVisible(true);
+        break;
+      case Option.DOWNLOAD:
+        downloadCSV(patients, description);
+        break;
+      case Option.DELETE:
+        setIsDeleteCohortModalVisible(true);
+        break;
+    }
+  };
+
+  const saveCohort = async () => {
+    const cohortMembers: number[] = [];
+    const { patients } = searchItem;
+    patients.forEach((patient: Patient) =>
+      cohortMembers.push(parseInt(patient.id))
+    );
+    let cohort: Cohort = {
+      display: cohortName,
+      memberIds: cohortMembers,
+      description: cohortDescription,
+      name: cohortName,
+    };
+
+    try {
+      await createCohort(cohort);
+      setCohortName("");
+      setCohortDescription("");
+      setIsSaveCohortModalVisible(false);
+      showToast({
+        title: t("success", "Success"),
+        kind: "success",
+        critical: true,
+        description: "the cohort is saved",
+      });
+    } catch (error) {
+      showToast({
+        title: t("cohortCreateError", "Error creating the cohort"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const handleDeleteSearchItem = async () => {
+    try {
+      updateSearchHistory(searchItem);
+      setIsDeleteCohortModalVisible(false);
+      showToast({
+        title: t("success", "Success"),
+        kind: "success",
+        critical: true,
+        description: "the search item is deleted",
+      });
+    } catch (error) {
+      showToast({
+        title: t("searchItemDeleteError", "Error deleting the cohort"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const saveQuery = async () => {
+    try {
+      const { parameters } = searchItem;
+      parameters.name = queryName;
+      parameters.description = queryDescription;
+      await createQuery(parameters);
+      setQueryName("");
+      setQueryDescription("");
+      setIsSaveQueryModalVisible(false);
+      showToast({
+        title: t("success", "Success"),
+        kind: "success",
+        critical: true,
+        description: "the query is saved",
+      });
+    } catch (error) {
+      showToast({
+        title: t("queryDeleteError", "Error saving the query"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  return (
+    <>
+      <OverflowMenu
+        ariaLabel="overflow-menu"
+        size="md"
+        flipped
+        direction="top"
+        data-testid="options"
+      >
+        <OverflowMenuItem
+          data-testid="save-cohort"
+          itemText={t("saveCohort", "Save Cohort")}
+          onClick={() => handleOption(Option.SAVE_COHORT)}
+        />
+        <OverflowMenuItem
+          data-testid="save-query"
+          itemText={t("saveQuery", "Save Query")}
+          onClick={() => handleOption(Option.SAVE_QUERY)}
+        />
+        <OverflowMenuItem
+          itemText={t("downloadResults", "Download Results")}
+          onClick={() => handleOption(Option.DOWNLOAD)}
+        />
+        <OverflowMenuItem
+          data-testid="deleteFromHistory"
+          itemText={t("deleteFromHistory", "Delete from history")}
+          onClick={() => handleOption(Option.DELETE)}
+        />
+      </OverflowMenu>
+
+      <ComposedModal
+        size={"sm"}
+        open={isSaveCohortModalVisible}
+        onClose={() => setIsSaveCohortModalVisible(false)}
+      >
+        <ModalHeader>
+          <p>Save Cohort</p>
+        </ModalHeader>
+        <ModalBody hasForm>
+          <TextInput
+            data-modal-primary-focus
+            required
+            labelText={t("saveName", "Enter a name")}
+            data-testid="cohort-name"
+            id="cohort-name"
+            onChange={(e) => setCohortName(e.target.value)}
+            value={cohortName}
+          />
+          <br />
+          <TextInput
+            data-modal-primary-focus
+            required
+            labelText={t("saveDescription", "Enter a description")}
+            data-testid="cohort-description"
+            id="cohort-description"
+            onChange={(e) => setCohortDescription(e.target.value)}
+            value={cohortDescription}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            kind="secondary"
+            onClick={() => setIsSaveCohortModalVisible(false)}
+          >
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button
+            data-testid="cohort-save-button"
+            kind="primary"
+            onClick={saveCohort}
+          >
+            {t("save", "Save")}
+          </Button>
+        </ModalFooter>
+      </ComposedModal>
+      <ComposedModal
+        size={"sm"}
+        open={isSaveQueryModalVisible}
+        onClose={() => setIsSaveQueryModalVisible(false)}
+      >
+        <ModalHeader>
+          <p>Save Query</p>
+        </ModalHeader>
+        <ModalBody hasForm>
+          <TextInput
+            required
+            labelText={t("saveName", "Enter a name")}
+            id="query-name"
+            data-testid="query-name"
+            onChange={(e) => setQueryName(e.target.value)}
+            value={queryName}
+          />
+          <br />
+          <TextInput
+            required
+            labelText={t("saveDescription", "Enter a description")}
+            id="query-description"
+            onChange={(e) => setQueryDescription(e.target.value)}
+            value={queryDescription}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            kind="secondary"
+            onClick={() => setIsSaveQueryModalVisible(false)}
+          >
+            {t("cancel", "Cancel")}
+          </Button>
+          <Button
+            data-testid="query-save-button"
+            kind="primary"
+            onClick={saveQuery}
+          >
+            {t("save", "Save")}
+          </Button>
+        </ModalFooter>
+      </ComposedModal>
+      <ComposedModal
+        size={"sm"}
+        open={isDeleteCohortModalVisible}
+        onClose={() => setIsDeleteCohortModalVisible(false)}
+      >
+        <ModalHeader>
+          <p>
+            {t(
+              "deleteHistoryItem",
+              `Are you sure you want to delete ${searchItem?.description} from the search history?`,
+              {
+                searchItemName: searchItem?.description,
+              }
+            )}
+          </p>
+        </ModalHeader>
+        <ModalFooter
+          danger
+          onRequestSubmit={handleDeleteSearchItem}
+          primaryButtonText={t("delete", "Delete")}
+          secondaryButtonText={t("cancel", "Cancel")}
+        />
+      </ComposedModal>
+    </>
+  );
+};
+
+export default SearchHistoryOptions;

package/src/components/search-history/search-history-options/search-history-options.resources.ts

@@ -0,0 +1,29 @@
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+import { Cohort, Query } from "../../../types";
+
+/**
+ * @returns Cohort
+ * @param cohort
+ */
+export async function createCohort(
+  cohort: Cohort
+): Promise<FetchResponse<Cohort>> {
+  return await openmrsFetch("/ws/rest/v1/cohort", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: cohort,
+  });
+}
+
+/**
+ * @returns Query
+ * @param query
+ */
+export async function createQuery(query: Query): Promise<FetchResponse<Query>> {
+  return await openmrsFetch("/ws/rest/v1/reportingrest/adhocdataset", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: query,
+  });
+}