Adds prompt for ICD11 search field #8232 (#8233)

* Adds prompt for ICD11 search field * Minor changes
ohcnetwork · Jul 31, 2024 · f356406 · f356406
1 parent 1cf0733
commit f356406
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 33 deletions.
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
@@ -71,6 +71,7 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
         )}
         optionLabel={(option) => option.label}
         optionValue={(option) => option}
+        minQueryLength={2}
         onQuery={(query) => refetch({ query: { query } })}
         isLoading={loading}
         error={hasError ? t("diagnosis_already_added") : undefined}

diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -18,6 +18,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionDescription?: OptionCallback<T, string>;
   optionIcon?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
+  minQueryLength?: number;
   onQuery?: (query: string) => void;
   dropdownIcon?: React.ReactNode | undefined;
   isLoading?: boolean;
@@ -45,6 +46,7 @@ const AutocompleteFormField = <T, V>(
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         optionDisabled={props.optionDisabled}
+        minQueryLength={props.minQueryLength}
         onQuery={props.onQuery}
         isLoading={props.isLoading}
         allowRawInput={props.allowRawInput}
@@ -69,6 +71,7 @@ type AutocompleteProps<T, V = T> = {
   optionDescription?: OptionCallback<T, React.ReactNode>;
   optionDisabled?: OptionCallback<T, boolean>;
   className?: string;
+  minQueryLength?: number;
   onQuery?: (query: string) => void;
   requiredError?: boolean;
   isLoading?: boolean;
@@ -95,6 +98,7 @@ type AutocompleteProps<T, V = T> = {
 export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
   const { t } = useTranslation();
   const [query, setQuery] = useState(""); // Ensure lower case
+
   useEffect(() => {
     props.onQuery?.(query);
   }, [query]);
@@ -136,6 +140,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
   const options = props.allowRawInput ? getOptions() : mappedOptions;
 
   const value = options.find((o) => props.value == o.value);
+
   const filteredOptions =
     props.onQuery === undefined
       ? options.filter((o) => o.search.includes(query))
@@ -198,43 +203,48 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
 
           <DropdownTransition>
             <Combobox.Options className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right">
-              {filteredOptions.length === 0 && (
+              {props.minQueryLength && query.length < props.minQueryLength ? (
+                <div className="p-2 text-sm text-secondary-500">
+                  {`Please enter at least ${props.minQueryLength} characters to search`}
+                </div>
+              ) : filteredOptions.length === 0 ? (
                 <div className="p-2 text-sm text-secondary-500">
                   No options found
                 </div>
-              )}
-              {filteredOptions.map((option, index) => (
-                <Combobox.Option
-                  id={`${props.id}-option-${option.label}-value-${index}`}
-                  key={`${props.id}-option-${option.label}-value-${index}`}
-                  className={dropdownOptionClassNames}
-                  value={option}
-                  disabled={option.disabled}
-                >
-                  {({ active }) => (
-                    <div className="flex flex-col">
-                      <div className="flex justify-between">
-                        <span>{option.label}</span>
-                        <span>{option.icon}</span>
-                      </div>
-                      {option.description && (
-                        <div
-                          className={classNames(
-                            "text-sm font-normal",
-                            option.disabled
-                              ? "text-secondary-700"
-                              : active
-                                ? "text-primary-200"
-                                : "text-secondary-700",
-                          )}
-                        >
-                          {option.description}
+              ) : (
+                filteredOptions.map((option, index) => (
+                  <Combobox.Option
+                    id={`${props.id}-option-${option.label}-value-${index}`}
+                    key={`${props.id}-option-${option.label}-value-${index}`}
+                    className={dropdownOptionClassNames}
+                    value={option}
+                    disabled={option.disabled}
+                  >
+                    {({ active }) => (
+                      <div className="flex flex-col">
+                        <div className="flex justify-between">
+                          <span>{option.label}</span>
+                          <span>{option.icon}</span>
                         </div>
-                      )}
-                    </div>
-                  )}
-                </Combobox.Option>
-              ))}
+                        {option.description && (
+                          <div
+                            className={classNames(
+                              "text-sm font-normal",
+                              option.disabled
+                                ? "text-secondary-700"
+                                : active
+                                  ? "text-primary-200"
+                                  : "text-secondary-700",
+                            )}
+                          >
+                            {option.description}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </Combobox.Option>
+                ))
+              )}
             </Combobox.Options>
           </DropdownTransition>
         </div>