User Filters: Adds support for filtering by home facility

ohcnetwork · Apr 22, 2024 · 30664e3 · 30664e3
1 parent 88e1a0b
commit 30664e3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
@@ -75,6 +75,11 @@ export default function ManageUsers() {
   const extremeSmallScreenBreakpoint = 320;
   const isExtremeSmallScreen = width <= extremeSmallScreenBreakpoint;
 
+  const { data: homeFacilityData } = useQuery(routes.getAnyFacility, {
+    pathParams: { id: qParams.home_facility },
+    prefetch: !!qParams.home_facility,
+  });
+
   const {
     data: userListData,
     loading: userListLoading,
@@ -92,6 +97,7 @@ export default function ManageUsers() {
       alt_phone_number: qParams.alt_phone_number,
       user_type: qParams.user_type,
       district_id: qParams.district,
+      home_facility: qParams.home_facility,
     },
   });
 
@@ -546,6 +552,11 @@ export default function ManageUsers() {
               "district",
               qParams.district ? districtData?.name || "" : "",
             ),
+            value(
+              "Home Facility",
+              "home_facility",
+              qParams.home_facility ? homeFacilityData?.name || "" : "",
+            ),
           ]}
         />
       </div>

diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx
@@ -10,6 +10,10 @@ import DistrictAutocompleteFormField from "../Common/DistrictAutocompleteFormFie
 import StateAutocompleteFormField from "../Common/StateAutocompleteFormField";
 import { useTranslation } from "react-i18next";
 import * as Notify from "../../Utils/Notifications";
+import { FacilitySelect } from "../Common/FacilitySelect";
+import { FacilityModel } from "../Facility/models";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
 
 const parsePhoneNumberForFilterParam = (phoneNumber: string) => {
   if (!phoneNumber) return "";
@@ -29,6 +33,14 @@ export default function UserFilter(props: any) {
     user_type: filter.user_type || "",
     district: filter.district || "",
     state: filter.state || "",
+    home_facility: filter.home_facility || "",
+    home_facility_ref: null,
+  });
+
+  useQuery(routes.getAnyFacility, {
+    pathParams: { id: filter.home_facility },
+    prefetch: !!filter.home_facility,
+    onResponse: ({ data }) => setFilterState({ home_facility_ref: data }),
   });
 
   const applyFilter = () => {
@@ -40,6 +52,7 @@ export default function UserFilter(props: any) {
       user_type,
       district,
       state,
+      home_facility,
     } = filterState;
     const data = {
       first_name: first_name || "",
@@ -49,6 +62,7 @@ export default function UserFilter(props: any) {
       user_type: user_type || "",
       district: district || "",
       state: district ? state || "" : "",
+      home_facility: home_facility || "",
     };
     if (state && !district) {
       Notify.Warn({
@@ -111,6 +125,23 @@ export default function UserFilter(props: any) {
         />
       </div>
 
+      <div className="w-full flex-none">
+        <FieldLabel>Home Facility</FieldLabel>
+        <FacilitySelect
+          name="home_facility"
+          setSelected={(selected) =>
+            setFilterState({
+              ...filterState,
+              home_facility: (selected as FacilityModel)?.id || "",
+              home_facility_ref: selected,
+            })
+          }
+          selected={filterState.home_facility_ref}
+          errors=""
+          multiple={false}
+        />
+      </div>
+
       <StateAutocompleteFormField {...field("state")} errorClassName="hidden" />
       <DistrictAutocompleteFormField
         errorClassName="hidden"