@openmrs/esm-cohort-builder-app 3.0.0

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,25 @@
+import React from "react";
+
+import { Layer, 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 (
+    <Layer>
+      <Tile className={styles.tile}>
+        <EmptyDataIllustration />
+        <p className={styles.content}>
+          There are no {props.displayText.toLowerCase()} to display
+        </p>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default EmptyData;

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

@@ -0,0 +1,19 @@
+@use '@carbon/styles/scss/spacing';
+@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;

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from "react";
+
+import {
+  DataTable,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Pagination,
+} from "@carbon/react";
+import { showToast } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+
+import mainStyles from "../../cohort-builder.scss";
+import { DefinitionDataRow, PaginationData } from "../../types";
+import EmptyData from "../empty-data/empty-data.component";
+import SavedCohortsOptions from "./saved-cohorts-options/saved-cohorts-options.component";
+import { onDeleteCohort, getCohorts } from "./saved-cohorts.resources";
+import styles from "./saved-cohorts.scss";
+
+interface SavedCohortsProps {
+  onViewCohort: (queryId: string) => Promise<void>;
+}
+
+const SavedCohorts: React.FC<SavedCohortsProps> = ({ onViewCohort }) => {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [cohorts, setCohorts] = useState<DefinitionDataRow[]>([]);
+  const { t } = useTranslation();
+
+  const getTableData = async () => {
+    const cohorts = await getCohorts();
+    setCohorts(cohorts);
+  };
+
+  const headers = [
+    {
+      key: "name",
+      header: t("name", "Name"),
+    },
+    {
+      key: "description",
+      header: t("description", "Description"),
+    },
+  ];
+
+  const handlePagination = ({ page, pageSize }: PaginationData) => {
+    setPage(page);
+    setPageSize(pageSize);
+  };
+
+  const handleDeleteCohort = async (cohortId: string) => {
+    try {
+      await onDeleteCohort(cohortId);
+      showToast({
+        title: t("success", "Success"),
+        kind: "success",
+        critical: true,
+        description: t("cohortIsDeleted", "the cohort is deleted"),
+      });
+      getTableData();
+    } catch (error) {
+      showToast({
+        title: t("cohortDeleteError", "Error deleting the cohort"),
+        kind: "error",
+        critical: true,
+        description: error?.message,
+      });
+    }
+  };
+
+  useEffect(() => {
+    getTableData();
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <p className={mainStyles.text}>
+        {t(
+          "savedCohortDescription",
+          "You can only search for Cohort Definitions that you have saved using a Name."
+        )}
+      </p>
+      <DataTable rows={cohorts} headers={headers} useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+                <TableHeader className={mainStyles.optionHeader}></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows
+                .slice((page - 1) * pageSize)
+                .slice(0, pageSize)
+                .map((row, index: number) => (
+                  <TableRow {...getRowProps({ row })} key={index}>
+                    {row.cells.map((cell, index: number) => (
+                      <TableCell key={index}>{cell.value}</TableCell>
+                    ))}
+                    <TableCell className={mainStyles.optionCell}>
+                      <SavedCohortsOptions
+                        cohort={cohorts[index]}
+                        onViewCohort={onViewCohort}
+                        onDeleteCohort={handleDeleteCohort}
+                      />
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      {cohorts.length > 10 && (
+        <Pagination
+          backwardText={t("previousPage", "Previous page")}
+          forwardText={t("nextPage", "Next page")}
+          itemsPerPageText={t("itemsPerPage:", "Items per page:")}
+          onChange={handlePagination}
+          page={1}
+          pageSize={10}
+          pageSizes={[10, 20, 30, 40, 50]}
+          size="md"
+          totalItems={cohorts.length}
+        />
+      )}
+      {!cohorts.length && <EmptyData displayText={t("cohorts", "cohorts")} />}
+    </div>
+  );
+};
+
+export default SavedCohorts;

package/src/components/saved-cohorts/saved-cohorts.resources.ts

@@ -0,0 +1,39 @@
+import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
+
+import { Cohort, DefinitionDataRow } from "../../types";
+
+/**
+ * @returns Cohorts
+ */
+export async function getCohorts(): Promise<DefinitionDataRow[]> {
+  const response: FetchResponse<{ results: Cohort[] }> = await openmrsFetch(
+    "/ws/rest/v1/cohort?v=full",
+    {
+      method: "GET",
+    }
+  );
+
+  let cohorts: DefinitionDataRow[] = [];
+  if (response.data.results.length > 0) {
+    response.data.results.map((cohort: Cohort) => {
+      const cohortData: DefinitionDataRow = {
+        id: cohort.uuid,
+        name: cohort.name,
+        description: cohort.description,
+      };
+      cohorts.push(cohortData);
+    });
+  }
+
+  return cohorts;
+}
+
+export const onDeleteCohort = async (cohort: string) => {
+  const result: FetchResponse = await openmrsFetch(
+    `/ws/rest/v1/cohort/${cohort}`,
+    {
+      method: "DELETE",
+    }
+  );
+  return result;
+};

package/src/components/saved-cohorts/saved-cohorts.scss

@@ -0,0 +1,15 @@
+.container {
+  background: white;
+  padding: 1rem;
+}
+
+.searchContainer {
+ display: flex;
+ margin-bottom: 2rem;
+}
+
+.searchBtn{
+  :global(.cds--btn) {
+    min-height: 1rem;
+  }
+}

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

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { render, cleanup, screen, waitFor } from "@testing-library/react";
+
+import { DefinitionDataRow } from "../../types";
+import SavedCohorts from "./saved-cohorts.component";
+import { getCohorts } from "./saved-cohorts.resources";
+
+const mockCohorts: DefinitionDataRow[] = [
+  {
+    id: "1",
+    name: "Female alive",
+    description: "Female Patients that are alive",
+  },
+  {
+    id: "2",
+    name: "Female ages between 10 and 30",
+    description:
+      "Female Patients with ages between 10 and 30 years that are alive",
+  },
+];
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+
+jest.mock("./saved-cohorts.resources", () => {
+  const original = jest.requireActual("./saved-cohorts.resources");
+  return {
+    ...original,
+    getCohorts: jest.fn(),
+  };
+});
+
+describe("Test the saved cohorts component", () => {
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+  it("should be able to search for a cohort", async () => {
+    // @ts-ignore
+    getCohorts.mockImplementation(() => mockCohorts);
+    mockOpenmrsFetch.mockReturnValue({ data: { results: mockCohorts } });
+
+    render(<SavedCohorts onViewCohort={jest.fn()} />);
+    await waitFor(() =>
+      expect(screen.getByText(mockCohorts[0].name)).toBeInTheDocument()
+    );
+
+    expect(screen.getByText(mockCohorts[1].name)).toBeInTheDocument();
+  });
+});