Consultation Form Enhancement: No home facility docs

src/Components/Common/UserAutocompleteFormField.tsx

@@ -16,6 +16,7 @@ type Props = FormFieldBaseProps<UserModel> & {
   homeFacility?: string;
   userType?: UserRole;
   showActiveStatus?: boolean;
+  noResultsLabel?: string;
 };
 
 export default function UserAutocompleteFormField(props: Props) {
@@ -83,6 +84,7 @@ export default function UserAutocompleteFormField(props: Props) {
                 : getUserList({ ...search_filter, search_text: query }),
             )
           }
+          noResultsLabel={props.noResultsLabel ?? "No options found"}
           isLoading={isLoading}
         />
       </div>

src/Components/Facility/ConsultationForm.tsx

@@ -1414,6 +1414,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                           userType={"Doctor"}
                           homeFacility={facilityId}
                           error={state.errors.treating_physician}
+                          noResultsLabel="No home facility doctors available"
                         />
                       </div>
 

src/Components/Form/FormFields/Autocomplete.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Combobox } from "@headlessui/react";
 import { DropdownTransition } from "../../Common/components/HelperComponents";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
@@ -7,6 +7,7 @@ import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
 import FormField from "./FormField";
 import { classNames } from "../../../Utils/utils";
 import { useTranslation } from "react-i18next";
+import * as Notifications from "../../../Utils/Notifications.js";
 
 type OptionCallback<T, R> = (option: T) => R;
 
@@ -71,6 +72,7 @@ type AutocompleteProps<T, V = T> = {
   isLoading?: boolean;
   allowRawInput?: boolean;
   error?: string;
+  noResultsLabel?: string;
 } & (
   | {
       required?: false;
@@ -136,6 +138,21 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
       ? options.filter((o) => o.search.includes(query))
       : options;
 
+  const prevQuery = useRef("");
+  useEffect(() => {
+    if (
+      query &&
+      prevQuery.current !== query &&
+      filteredOptions.length === 0 &&
+      props.noResultsLabel
+    ) {
+      Notifications.Error({
+        msg: props.noResultsLabel,
+      });
+    }
+    prevQuery.current = query;
+  }, [query, filteredOptions, props.noResultsLabel]);
+
   return (
     <div
       className={
@@ -195,7 +212,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
             <Combobox.Options className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right">
               {filteredOptions.length === 0 && (
                 <div className="p-2 text-sm text-gray-500">
-                  No options found
+                  {props.noResultsLabel ?? "No options found"}
                 </div>
               )}
               {filteredOptions.map((option, index) => (