@openmrs/esm-patient-list-management-app 9.2.1-pre.7172 → 9.2.1-pre.7177

package/src/lists-table/lists-table.component.tsx

@@ -7,6 +7,7 @@ import {
   Button,
   DataTable,
   DataTableSkeleton,
+  Dropdown,
   InlineLoading,
   Layer,
   Search,
@@ -71,13 +72,50 @@ const ListsTable: React.FC<PatientListTableProps> = ({
   const id = useId();
   const layout = useLayoutType();
   const config = useConfig<PatientListManagementConfig>();
+  const { sessionLocation } = useSession();
   const pageSize = config.patientListsToShow ?? 10;
   const [sortParams, setSortParams] = useState({ key: '', order: 'none' });
   const [searchTerm, setSearchTerm] = useState('');
-  const responsiveSize = layout === 'tablet' ? 'lg' : 'sm';
+  const responsiveSize = layout === 'tablet' ? 'lg' : 'md';
 
   const { toggleStarredList, starredLists } = useStarredLists();
 
+  const allLocationsItem = useMemo(() => ({ id: 'all', label: t('allLocations', 'All Locations') }), [t]);
+
+  const [selectedLocation, setSelectedLocation] = useState<string>(() => {
+    if (config.defaultToCurrentLocation && sessionLocation?.uuid) {
+      return sessionLocation.uuid;
+    }
+    return 'all';
+  });
+
+  const locationOptions = useMemo(() => {
+    const locationsMap = new Map<string, string>();
+    patientLists.forEach((list) => {
+      if (list.location) {
+        locationsMap.set(list.location.uuid, list.location.display);
+      }
+    });
+    if (sessionLocation?.uuid) {
+      locationsMap.set(sessionLocation.uuid, sessionLocation.display);
+    }
+    const sortedLocations = Array.from(locationsMap.entries())
+      .map(([uuid, display]) => ({ id: uuid, label: display }))
+      .sort((a, b) => a.label.localeCompare(b.label));
+    return [allLocationsItem, ...sortedLocations];
+  }, [patientLists, sessionLocation, allLocationsItem]);
+
+  const initialDropdownItem = useMemo(() => {
+    return locationOptions.find((loc) => loc.id === selectedLocation) || allLocationsItem;
+  }, [selectedLocation, locationOptions, allLocationsItem]);
+
+  const locationFilteredLists = useMemo(() => {
+    if (selectedLocation === 'all') {
+      return patientLists;
+    }
+    return patientLists.filter((list) => list.location?.uuid === selectedLocation);
+  }, [patientLists, selectedLocation]);
+
   function customSortRow(listA, listB, { sortDirection, sortStates, ...props }) {
     const { key } = props;
     setSortParams({ key, order: sortDirection });
@@ -85,14 +123,14 @@ const ListsTable: React.FC<PatientListTableProps> = ({
 
   const filteredLists: Array<PatientList> = useMemo(() => {
     if (!searchTerm) {
-      return patientLists;
+      return locationFilteredLists;
     }
 
     return fuzzy
-      .filter(searchTerm, patientLists, { extract: (list) => `${list.display} ${list.type}` })
+      .filter(searchTerm, locationFilteredLists, { extract: (list) => `${list.display} ${list.type}` })
       .sort((r1, r2) => r1.score - r2.score)
       .map((result) => result.original);
-  }, [patientLists, searchTerm]);
+  }, [locationFilteredLists, searchTerm]);
 
   const { key, order } = sortParams;
   const sortedData =
@@ -139,23 +177,34 @@ const ListsTable: React.FC<PatientListTableProps> = ({
     <>
       <div id="tableToolBar" className={styles.searchContainer}>
         <div>{isValidating && <InlineLoading />}</div>
-        <Layer>
-          <Search
-            className={styles.searchbox}
-            id={`${id}-search`}
-            labelText=""
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
-            placeholder={t('searchThisList', 'Search this list')}
-            size={responsiveSize}
-            value={searchTerm}
-          />
-        </Layer>
+        <div className={styles.filterContainer}>
+          <Layer>
+            <Dropdown
+              id="location-filter-dropdown"
+              initialSelectedItem={initialDropdownItem}
+              items={locationOptions}
+              label=""
+              onChange={({ selectedItem }) => setSelectedLocation(selectedItem.id)}
+              titleText={t('filterByLocation', 'Filter by location')}
+              type="inline"
+            />
+          </Layer>
+          <Layer>
+            <Search
+              className={styles.searchbox}
+              id={`${id}-search`}
+              labelText={t('searchThisList', 'Search this list')}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+              placeholder={t('searchThisList', 'Search this list')}
+              size={responsiveSize}
+              value={searchTerm}
+            />
+          </Layer>
+        </div>
       </div>
       <DataTable rows={tableRows} headers={headers} size={responsiveSize} sortRow={customSortRow}>
         {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getTableContainerProps }) => (
           <TableContainer {...getTableContainerProps()} className={styles.tableContainer}>
-            {/* data-tutorial-target attribute is essential for joyride in onboarding app ! */}
-
             <Table
               {...getTableProps()}
               className={styles.table}

package/src/lists-table/lists-table.scss

@@ -81,6 +81,11 @@
 }
 
 // Patient List Table
+.filterContainer {
+  display: flex;
+  align-items: center;
+}
+
 .searchContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;

package/src/lists-table/lists-table.test.tsx

@@ -25,6 +25,7 @@ const patientLists: Array<PatientList> = [
       "Children's Obstructive Lung Disease, Bronchiectasis and Antibiotic Tolerance Study (investigates novel antibiotic treatment for persistent childhood lung infections)",
     type: 'My List',
     size: 200,
+    location: mockSession.data.sessionLocation,
   },
   {
     id: 'f1b2ca00-6742-490d-9062-5025644c7632',
@@ -33,6 +34,7 @@ const patientLists: Array<PatientList> = [
       'Genomic Evaluation of Neonatal Early Sepsis in Infants - Stratified for Risk Factors (examines genetic factors influencing sepsis risk in newborns).',
     type: 'My List',
     size: 300,
+    location: { uuid: 'loc-2', display: 'Location 2' },
   },
   {
     id: '9c5e8677-6747-4315-84c7-a20f30d795e2',
@@ -41,6 +43,7 @@ const patientLists: Array<PatientList> = [
       'Vascular Imaging and Genomics of Onset and Recovery in Stroke (analyzes cardiovascular and genetic markers predictive of stroke outcomes)',
     type: 'My List',
     size: 500,
+    location: mockSession.data.sessionLocation,
   },
   {
     id: 'be10d553-b183-4647-9be6-160d1246de8a',
@@ -49,6 +52,7 @@ const patientLists: Array<PatientList> = [
       'Equitable Quality in Cancer Treatment for Underserved Young Adults (assesses healthcare disparities in cancer treatment for young adults from disadvantaged backgrounds)',
     type: 'My List',
     size: 100,
+    location: null,
   },
   {
     id: '72a84c22-2425-4501-95b7-820b793602f3',
@@ -57,6 +61,7 @@ const patientLists: Array<PatientList> = [
       'Mental Illness and Neuroimaging Study for Personalized Assessment and Care Evaluation (develops personalized treatment plans for mental illness based on brain imaging and individual factors)',
     type: 'My List',
     size: 250,
+    location: { uuid: 'loc-2', display: 'Location 2' },
   },
   {
     id: '06ca3df6-92d6-4401-8f06-4f094b004425',
@@ -65,6 +70,7 @@ const patientLists: Array<PatientList> = [
       'Mediterranean Diet, Exercise, and Nutrition for Diabetes (evaluates the combined effects of dietary and lifestyle changes on diabetes management).',
     type: 'My List',
     size: 150,
+    location: { uuid: 'loc-3', display: 'Location 3' },
   },
 ];
 
@@ -186,4 +192,74 @@ describe('ListsTable', () => {
     await user.click(starListButton);
     await screen.findByRole('button', { name: /^unstar list$/i });
   });
+
+  it('filters patient lists by location', async () => {
+    const user = userEvent.setup();
+    render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
+
+    const locationFilter = screen.getByRole('combobox', { name: /filter by location/i });
+
+    // Initial state: All locations
+    expect(locationFilter).toHaveTextContent('All Locations');
+    expect(screen.getByText('COBALT Cohort')).toBeInTheDocument();
+    expect(screen.getByText('GENESIS Cohort')).toBeInTheDocument();
+    expect(screen.getByText('VIGOR Cohort')).toBeInTheDocument();
+    expect(screen.getByText('EQUITY Cohort')).toBeInTheDocument();
+    expect(screen.getByText('MINDSCAPE Cohort')).toBeInTheDocument();
+    expect(screen.getByText('MEND Cohort')).toBeInTheDocument();
+
+    await user.click(locationFilter);
+    await user.click(screen.getByRole('option', { name: mockSession.data.sessionLocation.display }));
+
+    expect(locationFilter).toHaveTextContent('Inpatient Ward');
+    expect(screen.getByText('COBALT Cohort')).toBeInTheDocument();
+    expect(screen.getByText('VIGOR Cohort')).toBeInTheDocument();
+    expect(screen.queryByText('GENESIS Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('EQUITY Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('MINDSCAPE Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('MEND Cohort')).not.toBeInTheDocument();
+
+    await user.click(locationFilter);
+    await user.click(screen.getByRole('option', { name: 'Location 2' }));
+
+    expect(locationFilter).toHaveTextContent('Location 2');
+    expect(screen.getByText('GENESIS Cohort')).toBeInTheDocument();
+    expect(screen.getByText('MINDSCAPE Cohort')).toBeInTheDocument();
+    expect(screen.queryByText('COBALT Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('VIGOR Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('EQUITY Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('MEND Cohort')).not.toBeInTheDocument();
+
+    // Filter back to All Locations
+    await user.click(locationFilter);
+    await user.click(screen.getByRole('option', { name: 'All Locations' }));
+
+    expect(locationFilter).toHaveTextContent('All Locations');
+    expect(screen.getByText('COBALT Cohort')).toBeInTheDocument();
+    expect(screen.getByText('GENESIS Cohort')).toBeInTheDocument();
+    expect(screen.getByText('VIGOR Cohort')).toBeInTheDocument();
+    expect(screen.getByText('EQUITY Cohort')).toBeInTheDocument();
+    expect(screen.getByText('MINDSCAPE Cohort')).toBeInTheDocument();
+    expect(screen.getByText('MEND Cohort')).toBeInTheDocument();
+  });
+
+  it('defaults to the current session location if configured', async () => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      patientListsToShow: 10,
+      defaultToCurrentLocation: true,
+    });
+
+    render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
+
+    const locationFilter = screen.getByRole('combobox', { name: /filter by location/i });
+    expect(locationFilter).toHaveTextContent('Inpatient Ward');
+
+    expect(screen.getByText('COBALT Cohort')).toBeInTheDocument();
+    expect(screen.getByText('VIGOR Cohort')).toBeInTheDocument();
+    expect(screen.queryByText('GENESIS Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('EQUITY Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('MINDSCAPE Cohort')).not.toBeInTheDocument();
+    expect(screen.queryByText('MEND Cohort')).not.toBeInTheDocument();
+  });
 });

package/translations/en.json

@@ -3,6 +3,7 @@
   "add": "Add",
   "addPatientToList": "Add patient to list",
   "allLists": "All lists",
+  "allLocations": "All Locations",
   "backToListsPage": "Back to lists page",
   "cancel": "Cancel",
   "cannotAddPatient": "Cannot add patient",
@@ -35,6 +36,7 @@
   "errorDeletingList": "Error deleting patient list",
   "errorRemovingPatientFromList": "Failed to remove patient from list",
   "errorUpdatingList": "Error updating list",
+  "filterByLocation": "Filter by location",
   "identifier": "Identifier",
   "items": "items",
   "itemsDisplayed": "{{numberOfItemsDisplayed}} items",