diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx index b0207fd1a77..4d7082a921d 100644 --- 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 || "" : "", + ), ]} /> diff --git a/src/Components/Users/UserFilter.tsx b/src/Components/Users/UserFilter.tsx index d89a79c03ee..4a070ee7cde 100644 --- 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) { /> +
+ Home Facility + + setFilterState({ + ...filterState, + home_facility: (selected as FacilityModel)?.id || "", + home_facility_ref: selected, + }) + } + selected={filterState.home_facility_ref} + errors="" + multiple={false} + /> +
+