Filter by conditions in eCR Library (frontend)

containers/ecr-viewer/src/app/components/Filters.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "@trussworks/react-uswds";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+
+/**
+ * Functional component that renders Filters section in eCR Library.
+ * Includes Filter component for reportable conditions.
+ * @returns The rendered Filters component.
+ */
+export const Filters = () => {
+  return (
+    <div>
+      <div className="border-top border-base-lighter"></div>
+      <div className="margin-x-3 margin-y-105 display-flex flex-align-center gap-105">
+        <span className="line-height-sans-6">FILTERS:</span>
+        <FilterReportableConditions />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Functional component for filtering eCRs in the Library based on reportable conditions.
+ * @returns The rendered FilterReportableConditions component.
+ * - Fetches conditions from the `/api/conditions` endpoint.
+ * - Users can select specific conditions or select all conditions.
+ * - Updates the browser's query string when the filter is applied.
+ */
+const FilterReportableConditions = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const [isFilterBoxOpen, setIsFilterBoxOpen] = useState(false);
+  const [conditions, setConditions] = useState<string[]>([]);
+  const [filterConditions, setFilterConditions] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  // Fetch list of conditions
+  useEffect(() => {
+    const fetchConditions = async () => {
+      try {
+        // Fetch condition list and set default state to filtering on all conditions
+        const response = await fetch("/api/conditions");
+        if (!response.ok) {
+          throw new Error("Failed to fetch conditions");
+        }
+        const allConditions = await response.json();
+        setConditions(allConditions);
+
+        const initialFilterConditions = allConditions.reduce(
+          (dict: { [key: string]: boolean }, condition: string) => {
+            dict[condition] = true;
+            return dict;
+          },
+          {} as { [key: string]: boolean },
+        );
+        setFilterConditions(initialFilterConditions);
+        updateFilterConditionsQuery(initialFilterConditions);
+      } catch (error) {
+        console.error("Error fetching conditions:", error);
+      }
+    };
+
+    fetchConditions();
+  }, []);
+
+  // Toggle filter button opening selection box
+  const toggleFilterBox = () => {
+    setIsFilterBoxOpen(!isFilterBoxOpen);
+  };
+
+  // Build list of conditions to filter on
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value, checked } = event.target;
+    setFilterConditions((prev) => {
+      if (checked) {
+        return { ...prev, [value]: true };
+      } else {
+        const { [value]: _, ...rest } = prev; // destructuring
+        return rest;
+      }
+    });
+  };
+
+  // Check/Uncheck all boxes based on Select all checkbox
+  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = event.target;
+
+    // Loop through each condition checkbox and set the checked value
+    const checkboxes = document.querySelectorAll(
+      'input[id^="condition-"]',
+    ) as NodeListOf<HTMLInputElement>;
+    checkboxes.forEach((checkbox) => {
+      (checkbox as HTMLInputElement).checked = checked;
+    });
+
+    if (checked) {
+      const updatedConditions = conditions.reduce(
+        (dict, condition) => {
+          dict[condition] = true;
+          return dict;
+        },
+        {} as { [key: string]: boolean },
+      );
+      setFilterConditions(updatedConditions);
+    } else {
+      setFilterConditions({});
+    }
+  };
+
+  const isAllSelected =
+    Object.keys(filterConditions).length === conditions.length;
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("page", "1");
+      params.set(name, value);
+      return params.toString();
+    },
+    [searchParams],
+  );
+
+  const updateFilterConditionsQuery = (filterConditions: {
+    [key: string]: boolean;
+  }) => {
+    const filterConditionsSearch = Object.keys(filterConditions).join("|");
+    if (searchParams.get("condition") !== filterConditionsSearch) {
+      router.push(
+        pathname + "?" + createQueryString("condition", filterConditionsSearch),
+      );
+    }
+  };
+
+  return (
+    <div>
+      <div className="position-relative display-flex flex-column">
+        <Button
+          className="padding-1 usa-button--outline"
+          id="button-filter-conditions"
+          aria-label="Filter by reportable condition"
+          aria-haspopup="listbox"
+          aria-expanded={isFilterBoxOpen}
+          onClick={toggleFilterBox}
+          type="button"
+        >
+          <span className="width-205 usa-icon">
+            <svg
+              className="usa-icon"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use xlinkHref={`/assets/img/sprite.svg#coronavirus`}></use>
+            </svg>
+          </span>
+          Reportable condition
+          <span
+            className="usa-tag padding-05 bg-base-darker radius-md"
+            data-testid="filter-conditions-tag"
+          >
+            {Object.keys(filterConditions).length}
+          </span>
+        </Button>
+
+        {isFilterBoxOpen && (
+          <div className="usa-combo-box top-full left-0">
+            <div className="usa-combo-box margin-top-1 bg-white position-absolute radius-md shadow-2 z-top maxh-6205 width-4305">
+              {/* Title */}
+              <legend className="line-height-sans-6 text-bold font-sans-xs padding-y-1 padding-x-105">
+                Filter by Reportable Condition
+              </legend>
+
+              {/* Select All checkbox */}
+              <div className="display-flex flex-column">
+                <div
+                  className="checkbox-color usa-checkbox padding-bottom-1 padding-x-105"
+                  key={"all"}
+                >
+                  <input
+                    id={"condition-all"}
+                    className="usa-checkbox__input"
+                    type="checkbox"
+                    value={"all"}
+                    onChange={handleSelectAll}
+                    checked={
+                      Object.keys(filterConditions).length === conditions.length
+                    }
+                  />
+                  <label
+                    className="line-height-sans-6 font-sans-xs margin-y-0 usa-checkbox__label"
+                    htmlFor={"condition-all"}
+                  >
+                    {isAllSelected ? "Deselect all" : "Select all"}
+                  </label>
+                </div>
+                <div className="border-top-1px border-base-lighter margin-x-105"></div>
+
+                {/* (Scroll) Filter Conditions checkboxes */}
+                <div className="position-relative bg-white overflow-y-auto maxh-38 display-flex flex-column gap-1 padding-y-1 padding-x-105">
+                  {conditions.map((condition) => (
+                    <div
+                      className="checkbox-color usa-checkbox"
+                      key={condition}
+                    >
+                      <input
+                        id={`condition-${condition}`}
+                        className="usa-checkbox__input"
+                        type="checkbox"
+                        value={condition}
+                        onChange={handleCheckboxChange}
+                        checked={!!filterConditions[condition]}
+                      />
+                      <label
+                        className="line-height-sans-6 font-sans-xs margin-y-0 usa-checkbox__label"
+                        htmlFor={`condition-${condition}`}
+                      >
+                        {condition}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Apply Filter Button */}
+              <div className="display-flex flex-column flex-stretch padding-x-105">
+                <div className="border-top-1px border-base-lighter margin-x-neg-105"></div>
+                <Button
+                  id="button-filter-conditions-apply"
+                  className="margin-y-1 margin-x-0 padding-y-1 padding-x-205 flex-fill"
+                  aria-label="Apply filter"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    updateFilterConditionsQuery(filterConditions);
+                  }}
+                  type="button"
+                >
+                  Apply filter
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Filters;

containers/ecr-viewer/src/app/page.tsx

@@ -5,6 +5,7 @@ import EcrPaginationWrapper from "@/app/components/EcrPaginationWrapper";
 import EcrTable from "@/app/components/EcrTable";
 import LibrarySearch from "./components/LibrarySearch";
 import NotFound from "./not-found";
+import Filters from "@/app/components/Filters";
 
 /**
  * Functional component for rendering the home page that lists all eCRs.
@@ -22,14 +23,14 @@ const HomePage = async ({
   const sortColumn = (searchParams?.columnId as string) || "date_created";
   const sortDirection = (searchParams?.direction as string) || "DESC";
   const searchTerm = searchParams?.search as string | undefined;
-  // Placeholder for given array of conditions to filter on, remove in #2751
-  const filterConditions = undefined; // Ex. ["Anthrax (disorder)", "Measles (disorder)"];
+  const filterConditions = searchParams?.condition as string | undefined;
+  const filterConditionsArr = filterConditions?.split("|");
 
   const isNonIntegratedViewer =
     process.env.NEXT_PUBLIC_NON_INTEGRATED_VIEWER === "true";
   let totalCount: number = 0;
   if (isNonIntegratedViewer) {
-    totalCount = await getTotalEcrCount(searchTerm, filterConditions);
+    totalCount = await getTotalEcrCount(searchTerm, filterConditionsArr);
   }
 
   return isNonIntegratedViewer ? (
@@ -43,14 +44,15 @@ const HomePage = async ({
             textBoxClassName="width-21-9375"
           />
         </div>
+        <Filters />
         <EcrPaginationWrapper totalCount={totalCount}>
           <EcrTable
             currentPage={currentPage}
             itemsPerPage={itemsPerPage}
             sortColumn={sortColumn}
             sortDirection={sortDirection}
             searchTerm={searchTerm}
-            filterConditions={filterConditions}
+            filterConditions={filterConditionsArr}
           />
         </EcrPaginationWrapper>
       </main>

containers/ecr-viewer/src/app/services/listEcrDataService.ts

@@ -352,8 +352,13 @@ export const generateFilterConditionsStatement = (
 ) => ({
   rawType: true,
   toPostgres: () => {
-    if (!filterConditions) {
-      return pgPromise.as.format("NULL IS NULL");
+    if (
+      !filterConditions ||
+      filterConditions.length === 0 ||
+      filterConditions.every((item) => item === "")
+    ) {
+      const subQuery = `SELECT DISTINCT erc_sub.eICR_ID FROM ecr_rr_conditions erc_sub WHERE erc_sub.condition IS NOT NULL`;
+      return `ed.eICR_ID NOT IN (${subQuery})`;
     }
 
     const whereStatement = filterConditions
@@ -371,8 +376,13 @@ export const generateFilterConditionsStatement = (
 const generateFilterConditionsStatementSqlServer = (
   filterConditions?: string[],
 ) => {
-  if (!filterConditions) {
-    return "NULL IS NULL";
+  if (
+    !filterConditions ||
+    filterConditions.length === 0 ||
+    filterConditions.every((item) => item === "")
+  ) {
+    const subQuery = `SELECT DISTINCT erc_sub.eICR_ID FROM ecr_rr_conditions erc_sub WHERE erc_sub.condition IS NOT NULL`;
+    return `ed.eICR_ID NOT IN (${subQuery})`;
   }
 
   const whereStatement = filterConditions