Add option to filter users by no home facility

src/Components/Common/FacilitySelect.tsx

@@ -3,6 +3,7 @@ import AutoCompleteAsync from "../Form/AutoCompleteAsync";
 import { FacilityModel } from "../Facility/models";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
+import { t } from "i18next";
 
 interface FacilitySelectProps {
   name: string;
@@ -21,6 +22,7 @@ interface FacilitySelectProps {
   freeText?: boolean;
   selected?: FacilityModel | FacilityModel[] | null;
   setSelected: (selected: FacilityModel | FacilityModel[] | null) => void;
+  allowNone?: boolean;
 }
 
 export const FacilitySelect = (props: FacilitySelectProps) => {
@@ -39,6 +41,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     facilityType,
     district,
     state,
+    allowNone = false,
     freeText = false,
     errors = "",
   } = props;
@@ -66,6 +69,12 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
           name: text,
         });
 
+      if (allowNone)
+        return [
+          { name: t("no_home_facility"), id: "NONE" },
+          ...(data?.results || []),
+        ];
+
       return data?.results;
     },
     [searchAll, showAll, facilityType, district, exclude_user, freeText],

src/Components/Users/ManageUsers.tsx

@@ -78,7 +78,7 @@ export default function ManageUsers() {
 
   const { data: homeFacilityData } = useQuery(routes.getAnyFacility, {
     pathParams: { id: qParams.home_facility },
-    prefetch: !!qParams.home_facility,
+    prefetch: !!qParams.home_facility && qParams.home_facility !== "NONE",
   });
 
   const {
@@ -198,10 +198,7 @@ export default function ManageUsers() {
           <div className="relative block h-full overflow-visible rounded-lg bg-white shadow hover:border-primary-500">
             <div className="flex h-full flex-col justify-between @container">
               <div className="px-6 py-4">
-                <div
-                  className="flex flex-col
-                flex-wrap justify-between gap-3 @sm:flex-row"
-                >
+                <div className="flex flex-col flex-wrap justify-between gap-3 @sm:flex-row">
                   {user.username && (
                     <div
                       id="username"
@@ -264,8 +261,8 @@ export default function ManageUsers() {
                 <div
                   className={`flex ${
                     isExtremeSmallScreen
-                      ? " flex-wrap "
-                      : " flex-col justify-between md:flex-row "
+                      ? "flex-wrap"
+                      : "flex-col justify-between md:flex-row"
                   } gap-2 md:grid md:grid-cols-2`}
                 >
                   {user.user_type && (
@@ -340,9 +337,7 @@ export default function ManageUsers() {
                 )}
                 <div
                   className={`${
-                    isExtremeSmallScreen
-                      ? "flex flex-wrap "
-                      : "grid grid-cols-2 "
+                    isExtremeSmallScreen ? "flex flex-wrap" : "grid grid-cols-2"
                   }`}
                 >
                   {user.created_by && (
@@ -561,7 +556,11 @@ export default function ManageUsers() {
             value(
               "Home Facility",
               "home_facility",
-              qParams.home_facility ? homeFacilityData?.name || "" : "",
+              qParams.home_facility
+                ? qParams.home_facility === "NONE"
+                  ? t("no_home_facility")
+                  : homeFacilityData?.name || ""
+                : "",
             ),
             value(
               "Last Active",
@@ -786,7 +785,7 @@ export function UserFacilities(props: { user: any }) {
                   <span>{user?.home_facility_object?.name}</span>
                   <span
                     className={
-                      "flex items-center justify-center  rounded-xl bg-green-600 px-2 py-0.5 text-sm font-medium text-white"
+                      "flex items-center justify-center rounded-xl bg-green-600 px-2 py-0.5 text-sm font-medium text-white"
                     }
                   >
                     <CareIcon icon="l-estate" className="mr-1 pt-px text-lg" />

src/Components/Users/UserFilter.tsx

@@ -43,7 +43,7 @@ export default function UserFilter(props: any) {
 
   useQuery(routes.getAnyFacility, {
     pathParams: { id: filter.home_facility },
-    prefetch: !!filter.home_facility,
+    prefetch: !!filter.home_facility && filter.home_facility !== "NONE",
     onResponse: ({ data }) => setFilterState({ home_facility_ref: data }),
   });
 
@@ -134,6 +134,7 @@ export default function UserFilter(props: any) {
       <div className="w-full flex-none">
         <FieldLabel>Home Facility</FieldLabel>
         <FacilitySelect
+          allowNone
           name="home_facility"
           setSelected={(selected) =>
             setFilterState({
@@ -142,7 +143,11 @@ export default function UserFilter(props: any) {
               home_facility_ref: selected,
             })
           }
-          selected={filterState.home_facility_ref}
+          selected={
+            filterState.home_facility === "NONE"
+              ? { name: t("no_home_facility"), id: "NONE" }
+              : filterState.home_facility_ref
+          }
           errors=""
           multiple={false}
         />

src/Locale/en/Users.json

@@ -4,6 +4,7 @@
   "add_new_user": "Add New User",
   "no_users_found": "No Users Found",
   "home_facility": "Home Facility",
+  "no_home_facility" : "No home facility assigned",
   "clear_home_facility": "Clear Home Facility",
   "linked_facilities": "Linked Facilities",
   "no_linked_facilities": "No Linked Facilities",