@openmrs/esm-cohort-builder-app 3.0.1-pre.80

package/src/cohort-builder.utils.ts

@@ -0,0 +1,197 @@
+import { Column, Patient, Query } from "./types";
+
+export const composeJson = (searchParameters) => {
+  const query: Query = {
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+    columns: [],
+    rowFilters: [],
+    customRowFilterCombination: "",
+  };
+  query.columns = addColumnsToDisplay();
+  let counter = 0;
+  query.rowFilters = [];
+  for (let field in searchParameters) {
+    if (isNullValues(searchParameters[field])) {
+      delete searchParameters[field];
+      continue;
+    }
+    if (searchParameters[field] != "all" && searchParameters != "") {
+      query.rowFilters[counter] = {};
+      query.rowFilters[counter].key = getDefinitionLibraryKey(
+        field,
+        searchParameters[field]
+      );
+    }
+    if (Array.isArray(searchParameters[field])) {
+      query.rowFilters[counter].parameterValues = getParameterValues(
+        searchParameters[field]
+      );
+    }
+    if (
+      searchParameters[field].length >= 1 &&
+      searchParameters[field][0].livingStatus === "alive"
+    ) {
+      query.rowFilters[counter].livingStatus = "alive";
+    }
+    query.rowFilters[counter].type =
+      "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition";
+    counter += 1;
+  }
+  query.customRowFilterCombination = composeFilterCombination(query.rowFilters);
+  return { query };
+};
+
+export const isNullValues = (fieldValues) => {
+  if (Array.isArray(fieldValues) && fieldValues.length >= 1) {
+    return !fieldValues[0].value;
+  }
+  return fieldValues === "all" || !fieldValues;
+};
+
+export const getDefinitionLibraryKey = (field: string, value: string) => {
+  let definitionLibraryKey = "reporting.library.cohortDefinition.builtIn";
+  switch (field) {
+    case "gender":
+      definitionLibraryKey += `.${value}`;
+      break;
+    default:
+      definitionLibraryKey += `.${field}`;
+  }
+  return definitionLibraryKey;
+};
+
+export const getParameterValues = (parameterFields) => {
+  const parameter = {};
+  parameterFields.forEach((eachParam) => {
+    parameter[eachParam.name] = eachParam.value;
+  });
+  return parameter;
+};
+
+export const composeFilterCombination = (filterColumns) => {
+  let compositionTitle = "";
+  const totalNumber = filterColumns.length;
+  for (let index = 1; index <= totalNumber; index++) {
+    if (filterColumns[index - 1].livingStatus === "alive") {
+      compositionTitle += `NOT ${index}`;
+      delete filterColumns[index - 1].livingStatus;
+    } else {
+      compositionTitle += `${index}`;
+    }
+    compositionTitle += index < totalNumber ? " AND " : "";
+  }
+  return compositionTitle;
+};
+
+export const addColumnsToDisplay = () => {
+  const columns = [
+    {
+      name: "firstname",
+      key: "preferredName.givenName",
+    },
+    {
+      name: "lastname",
+      key: "preferredName.familyName",
+    },
+    {
+      name: "gender",
+      key: "gender",
+    },
+    {
+      name: "age",
+      key: "ageOnDate.fullYears",
+    },
+    {
+      name: "patientId",
+      key: "patientId",
+    },
+  ];
+
+  const columnValues = columns.map((aColumn: Column) => {
+    aColumn.type =
+      "org.openmrs.module.reporting.data.patient.definition.PatientDataDefinition";
+    aColumn.key = `reporting.library.patientDataDefinition.builtIn.${aColumn.key}`;
+    return aColumn;
+  });
+  return columnValues;
+};
+
+export const addToHistory = (
+  description: string,
+  patients: Patient[],
+  parameters: {}
+) => {
+  const oldHistory = JSON.parse(
+    window.sessionStorage.getItem("openmrsHistory")
+  );
+  let newHistory = [];
+
+  if (oldHistory) {
+    newHistory = [...oldHistory, { description, patients, parameters }];
+  } else {
+    newHistory = [{ description, patients, parameters }];
+  }
+  window.sessionStorage.setItem("openmrsHistory", JSON.stringify(newHistory));
+};
+
+export const formatDate = (dateString: string) => {
+  const date = new Date(dateString);
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+};
+
+/**
+ * builds a query description based on query input
+ * @param {object} state the current state
+ * @param {string} conceptName the concept name
+ * @returns {string} date in the required format
+ */
+export const queryDescriptionBuilder = (state, conceptName: string) => {
+  const { timeModifier, onOrAfter, onOrBefore } = state;
+
+  const onOrAfterDescription = onOrAfter
+    ? `since ${formatDate(onOrAfter)}`
+    : "";
+  const onOrBeforeDescription = onOrBefore
+    ? `until ${formatDate(onOrBefore)}`
+    : "";
+
+  return `Patients with ${timeModifier} ${conceptName} ${onOrAfterDescription} ${onOrBeforeDescription}`.trim();
+};
+
+const convertToCSV = (patients: Patient[]) => {
+  const csv =
+    "patient_id, full_name, age, gender\n" +
+    patients
+      .map((patient) => {
+        const orderedPatient = {
+          patientId: patient.patientId,
+          name: patient.name,
+          age: patient.age,
+          gender: patient.gender,
+        };
+
+        return Object.keys(orderedPatient)
+          .map((key) => {
+            return `"${patient[key]}"`;
+          })
+          .join(",");
+      })
+      .join("\n");
+
+  return csv;
+};
+
+export const downloadCSV = (data, filename) => {
+  const blob = new Blob([convertToCSV(data)], {
+    type: "text/csv;charset=utf-8;",
+  });
+  const url = URL.createObjectURL(blob);
+
+  const pom = document.createElement("a");
+  pom.href = url;
+  pom.setAttribute("download", filename);
+  pom.click();
+};

package/src/components/composition/composition.component.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+
+import { TextInput } from "@carbon/react";
+import { showNotification } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { SearchByProps } from "../../types";
+import SearchButtonSet from "../search-button-set/search-button-set";
+import styles from "./composition.style.css";
+import {
+  createCompositionQuery,
+  isCompositionValid,
+} from "./composition.utils";
+
+const Composition: React.FC<SearchByProps> = ({ onSubmit }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [compositionQuery, setCompositionQuery] = useState("");
+  const [description, setDescription] = useState("");
+  const { t } = useTranslation();
+
+  const handleResetInputs = () => {
+    setDescription("");
+    setCompositionQuery("");
+  };
+
+  const handleCompositionQuery = (composition: string) => {
+    setCompositionQuery(composition);
+    setDescription("Composition of " + composition);
+  };
+
+  const submit = async () => {
+    setIsLoading(true);
+    try {
+      if (isCompositionValid(compositionQuery)) {
+        const searchParams = createCompositionQuery(compositionQuery);
+        await onSubmit(searchParams, description);
+      } else {
+        showNotification({
+          title: t("error", "Error!"),
+          kind: "error",
+          critical: true,
+          description: t("invalidComposition", "Composition is not valid"),
+        });
+      }
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      showNotification({
+        title: t("error", "Error!"),
+        kind: "error",
+        critical: true,
+        description: t("invalidComposition", "Composition is not valid"),
+      });
+    }
+  };
+
+  return (
+    <>
+      <TextInput
+        data-modal-primary-focus
+        required
+        labelText={t("composition", "Composition")}
+        data-testid="composition-query"
+        id="composition-query"
+        onChange={(e) => handleCompositionQuery(e.target.value)}
+        value={compositionQuery}
+      />
+      <br />
+      <TextInput
+        data-modal-primary-focus
+        required
+        labelText={t("description", "Description")}
+        data-testid="composition-description"
+        id="composition-description"
+        onChange={(e) => setDescription(e.target.value)}
+        value={description}
+      />
+      <br />
+      <p className={styles.text}>
+        {t(
+          "compositionExplanationOne",
+          "A composition query combines together the results of multiple cohorts using the logical operators: AND, OR and NOT."
+        )}
+      </p>
+      <br />
+      <p className={styles.text}>
+        {t(
+          "compositionExplanationTwo",
+          "To use this query you need to already have query results in your search history. Those existing query results can then be combined to yield the results of the composition query."
+        )}
+      </p>
+      <br />
+      <p className={styles.text}>
+        {t(
+          "compositionExplanationThree",
+          "Example: if the search history #1 is a cohort of patients who are males, and if the search history #2 is a cohort of patients with ages between 23 and 35 years; then '1 AND 2' will result in a cohort of patients who are males with ages between 23 and 35 years."
+        )}
+      </p>
+      <br />
+      <SearchButtonSet
+        onHandleReset={handleResetInputs}
+        onHandleSubmit={submit}
+        isLoading={isLoading}
+      />
+    </>
+  );
+};
+
+export default Composition;

package/src/components/composition/composition.style.css

@@ -0,0 +1,3 @@
+.text {
+  font-size: 0.85rem;
+}

package/src/components/composition/composition.test.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+
+import { render, cleanup, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Composition from "./composition.component";
+
+const mockCompositionQuery = {
+  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.codedObsSearchAdvanced",
+        parameterValues: {
+          operator1: "LESS_THAN",
+          question: "163126AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+          timeModifier: "NO",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+      {
+        key: "reporting.library.cohortDefinition.builtIn.encounterSearchAdvanced",
+        parameterValues: {
+          locationList: [
+            "1ce1b7d4-c865-4178-82b0-5932e51503d6",
+            "ba685651-ed3b-4e63-9b35-78893060758a",
+            "44c3efb0-2583-4c80-a79e-1f756a03c0a1",
+          ],
+          timeQualifier: "ANY",
+        },
+        type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+      },
+    ],
+    customRowFilterCombination: "(1) and (2)",
+  },
+};
+
+jest.mock("./composition.utils", () => {
+  const original = jest.requireActual("./composition.utils");
+  return {
+    ...original,
+    createCompositionQuery: jest
+      .fn()
+      .mockImplementation(() => mockCompositionQuery),
+  };
+});
+
+describe("Test the composition component", () => {
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  it("should be throw an error when an invalid composition query is entered", async () => {
+    const user = userEvent.setup();
+    const submit = jest.fn();
+    render(<Composition onSubmit={submit} />);
+
+    const compositionInput = screen.getByTestId("composition-query");
+    await user.click(compositionInput);
+    await waitFor(() => user.type(compositionInput, "random text"));
+
+    await waitFor(() => user.click(screen.getByTestId("search-btn")));
+    await waitFor(() => expect(submit).not.toBeCalled());
+  });
+
+  it("should be to search a composition query", async () => {
+    const compositionQuery = "1 and 2";
+
+    const user = userEvent.setup();
+    const submit = jest.fn();
+    render(<Composition onSubmit={submit} />);
+    const compositionInput = screen.getByTestId("composition-query");
+    await user.click(compositionInput);
+    await waitFor(() => user.type(compositionInput, compositionQuery));
+
+    await waitFor(() => user.click(screen.getByTestId("search-btn")));
+    await waitFor(() =>
+      expect(submit).toBeCalledWith(
+        mockCompositionQuery,
+        `Composition of ${compositionQuery}`
+      )
+    );
+  });
+});

package/src/components/composition/composition.utils.ts

@@ -0,0 +1,53 @@
+import { addColumnsToDisplay } from "../../cohort-builder.utils";
+import { Query } from "../../types";
+
+export const isCompositionValid = (search: string) => {
+  return (
+    search.match(/and|or|not|\d+|\)|\(|union|intersection|\!|\+/gi).length ===
+    search.split(/\s+/g).length
+  );
+};
+
+const formatFilterCombination = (
+  filterText: string,
+  numberOfSearches: number
+) => {
+  return filterText.replace(/\d/, (theDigit) =>
+    (parseInt(theDigit) + numberOfSearches).toString()
+  );
+};
+
+export const createCompositionQuery = (compositionQuery: string) => {
+  const search = compositionQuery.replace(/(\(|\))+/g, (char) =>
+    char === "(" ? "( " : " )"
+  );
+  const query: Query = {
+    type: "org.openmrs.module.reporting.dataset.definition.PatientDataSetDefinition",
+    columns: addColumnsToDisplay(),
+    rowFilters: [],
+    customRowFilterCombination: "",
+  };
+
+  const searchTokens = search.split(/\s+/);
+
+  searchTokens.forEach((eachToken) => {
+    if (eachToken.match(/\d/)) {
+      const history = JSON.parse(
+        window.sessionStorage.getItem("openmrsHistory")
+      );
+      const operandQuery = history[parseInt(eachToken) - 1];
+
+      const jsonRequestObject = operandQuery.parameters;
+      jsonRequestObject.customRowFilterCombination = formatFilterCombination(
+        jsonRequestObject.customRowFilterCombination,
+        query.rowFilters.length
+      );
+      query.customRowFilterCombination += `(${jsonRequestObject.customRowFilterCombination})`;
+      query.rowFilters = query.rowFilters.concat(jsonRequestObject.rowFilters);
+    } else {
+      query.customRowFilterCombination += ` ${eachToken} `;
+    }
+  });
+
+  return { query };
+};

package/src/components/empty-data/empty-data.component.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Tile } from "@carbon/react";
+import { EmptyDataIllustration } from "@openmrs/esm-patient-common-lib/src/empty-state/index";
+
+import styles from "./empty-data.style.scss";
+
+export interface EmptyDataProps {
+  displayText: string;
+}
+
+const EmptyData: React.FC<EmptyDataProps> = (props) => {
+  return (
+    <Tile className={styles.tile}>
+      <EmptyDataIllustration />
+      <p className={styles.content}>
+        There are no {props.displayText.toLowerCase()} to display
+      </p>
+    </Tile>
+  );
+};
+
+export default EmptyData;

package/src/components/empty-data/empty-data.style.scss

@@ -0,0 +1,20 @@
+@use '@carbon/styles/scss/spacing';
+// @use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style("productive-heading-01");
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}

package/src/components/saved-cohorts/saved-cohorts-options/saved-cohort-options.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { screen, render, cleanup, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { DefinitionDataRow } from "../../../types";
+import SavedCohortsOptions from "./saved-cohorts-options.component";
+
+const cohort: DefinitionDataRow = {
+  id: "1",
+  name: "Female Patients",
+  description: "Female Patients that are alive",
+};
+
+describe("Test the saved cohorts options", () => {
+  afterEach(cleanup);
+  it("should be able to view the saved cohort", async () => {
+    const user = userEvent.setup();
+    const onViewCohort = jest.fn();
+    render(
+      <SavedCohortsOptions
+        cohort={cohort}
+        onViewCohort={onViewCohort}
+        onDeleteCohort={jest.fn()}
+      />
+    );
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("view")));
+    expect(onViewCohort).toBeCalledWith(cohort.id);
+  });
+
+  it("should be able delete a cohort", async () => {
+    const user = userEvent.setup();
+    const onDeleteCohort = jest.fn();
+    render(
+      <SavedCohortsOptions
+        cohort={cohort}
+        onViewCohort={jest.fn()}
+        onDeleteCohort={onDeleteCohort}
+      />
+    );
+
+    await waitFor(() => user.click(screen.getByTestId("options")));
+    await waitFor(() => user.click(screen.getByTestId("delete")));
+    await waitFor(() => user.click(screen.getByText("Delete")));
+    expect(onDeleteCohort).toBeCalledWith(cohort.id);
+  });
+});

package/src/components/saved-cohorts/saved-cohorts-options/saved-cohorts-options.component.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+
+import {
+  ComposedModal,
+  ModalFooter,
+  ModalHeader,
+  OverflowMenu,
+  OverflowMenuItem,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import { DefinitionDataRow } from "../../../types";
+
+enum Options {
+  VIEW,
+  DELETE,
+}
+
+interface SavedCohortsOptionsProps {
+  cohort: DefinitionDataRow;
+  onViewCohort: (cohortId: string) => Promise<void>;
+  onDeleteCohort: (cohortId: string) => Promise<void>;
+}
+
+const SavedCohortsOptions: React.FC<SavedCohortsOptionsProps> = ({
+  cohort,
+  onViewCohort,
+  onDeleteCohort,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleteCohortModalVisible, setIsDeleteCohortModalVisible] =
+    useState(false);
+
+  const handleViewCohort = async () => {
+    try {
+      await onViewCohort(cohort.id);
+    } catch (error) {
+      showToast({
+        title: t("cohortViewError", "Error viewing the cohort"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  const handleOption = async (option: Options) => {
+    switch (option) {
+      case Options.VIEW:
+        handleViewCohort();
+        break;
+      case Options.DELETE:
+        setIsDeleteCohortModalVisible(true);
+        break;
+    }
+  };
+
+  const handleDeleteCohort = async () => {
+    await onDeleteCohort(cohort.id);
+    setIsDeleteCohortModalVisible(false);
+  };
+
+  return (
+    <>
+      <OverflowMenu
+        ariaLabel="overflow-menu"
+        size="md"
+        flipped
+        direction="bottom"
+        data-testid="options"
+      >
+        <OverflowMenuItem
+          data-testid="view"
+          itemText={t("view", "View")}
+          onClick={() => handleOption(Options.VIEW)}
+        />
+        <OverflowMenuItem
+          data-testid="delete"
+          itemText={t("delete", "Delete")}
+          onClick={() => handleOption(Options.DELETE)}
+        />
+      </OverflowMenu>
+
+      <ComposedModal
+        size={"sm"}
+        open={isDeleteCohortModalVisible}
+        onClose={() => setIsDeleteCohortModalVisible(false)}
+      >
+        <ModalHeader>
+          <p>
+            {t(
+              "deleteItem",
+              `Are you sure you want to delete ${cohort?.name}?`,
+              {
+                itemName: cohort?.name,
+              }
+            )}
+          </p>
+        </ModalHeader>
+        <ModalFooter
+          danger
+          onRequestSubmit={handleDeleteCohort}
+          primaryButtonText={t("delete", "Delete")}
+          secondaryButtonText={t("cancel", "Cancel")}
+        />
+      </ComposedModal>
+    </>
+  );
+};
+
+export default SavedCohortsOptions;