CareUI: Adds UserAutocompleteFormField and used it in "Assigned To" filter field of Shifting

cypress/e2e/shifting_spec/filter.cy.ts

@@ -32,8 +32,11 @@ describe("Shifting section filter", () => {
 
   it("filter by assigned to user", () => {
     cy.intercept(/\/api\/v1\/users/).as("users_filter");
-    cy.get("[name='assigned_to']").type("cypress").wait("@users_filter");
-    cy.get("[name='assigned_to']").type("{downarrow}{enter}");
+    cy.get("[id='assigned_to']")
+      .wait(100)
+      .type("cypress")
+      .wait("@users_filter");
+    cy.get("[id='assigned_to']").wait(100).type("{downarrow}{enter}");
     cy.contains("Apply").click();
   });
 

src/Common/hooks/useAsyncOptions.ts

@@ -4,6 +4,7 @@ import { useDispatch } from "react-redux";
 
 interface IUseAsyncOptionsArgs {
   debounceInterval?: number;
+  queryResponseExtractor?: (data: any) => any;
 }
 
 /**
@@ -40,7 +41,10 @@ export function useAsyncOptions<T extends Record<string, unknown>>(
       debounce(async (action: any) => {
         setIsLoading(true);
         const res = await dispatch(action);
-        if (res?.data) setQueryOptions(res.data as T[]);
+        if (res?.data)
+          setQueryOptions(
+            args?.queryResponseExtractor?.(res.data) ?? (res.data as T[])
+          );
         setIsLoading(false);
       }, args?.debounceInterval ?? 300),
     [dispatch, args?.debounceInterval]

src/Components/Common/UserAutocompleteFormField.tsx

@@ -0,0 +1,46 @@
+import { useAsyncOptions } from "../../Common/hooks/useAsyncOptions";
+import { getUserList } from "../../Redux/actions";
+import { Autocomplete } from "../Form/FormFields/Autocomplete";
+import FormField from "../Form/FormFields/FormField";
+import {
+  FormFieldBaseProps,
+  useFormFieldPropsResolver,
+} from "../Form/FormFields/Utils";
+import { UserModel } from "../Users/models";
+
+type Props = FormFieldBaseProps<UserModel> & {
+  placeholder?: string;
+};
+
+export default function UserAutocompleteFormField(props: Props) {
+  const field = useFormFieldPropsResolver(props as any);
+  const { fetchOptions, isLoading, options } = useAsyncOptions<UserModel>(
+    "id",
+    { queryResponseExtractor: (data) => data.results }
+  );
+
+  return (
+    <FormField field={field}>
+      <Autocomplete
+        id={field.id}
+        disabled={field.disabled}
+        placeholder={props.placeholder}
+        value={field.value}
+        onChange={field.handleChange}
+        options={options(field.value && [field.value])}
+        optionLabel={getUserFullName}
+        optionDescription={(option) => `${option.user_type}`}
+        optionValue={(option) => option}
+        onQuery={(query) =>
+          fetchOptions(getUserList({ limit: 5, offset: 0, search_text: query }))
+        }
+        isLoading={isLoading}
+      />
+    </FormField>
+  );
+}
+
+const getUserFullName = (user: UserModel) => {
+  const personName = user.first_name + " " + user.last_name;
+  return personName.trim().length > 0 ? personName : user.username || "";
+};

src/Components/Shifting/ListFilter.tsx

@@ -18,14 +18,14 @@ import { FieldLabel } from "../Form/FormFields/FormField";
 import FiltersSlideover from "../../CAREUI/interactive/FiltersSlideover";
 import { LegacySelectField } from "../Common/HelperInputFields";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
-import { UserSelect } from "../Common/UserSelect2";
 import moment from "moment";
 import { navigate } from "raviger";
 import parsePhoneNumberFromString from "libphonenumber-js";
 import useConfig from "../../Common/hooks/useConfig";
 import { useDispatch } from "react-redux";
 import useMergeState from "../../Common/hooks/useMergeState";
 import { useTranslation } from "react-i18next";
+import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
 
 const clearFilterState = {
   orgin_facility: "",
@@ -57,7 +57,6 @@ export default function ListFilter(props: any) {
   const [isOriginLoading, setOriginLoading] = useState(false);
   const [isShiftingLoading, setShiftingLoading] = useState(false);
   const [isAssignedLoading, setAssignedLoading] = useState(false);
-  const [isAssignedUserLoading, setAssignedUserLoading] = useState(false);
   const { t } = useTranslation();
 
   const shiftStatusOptions = (
@@ -143,16 +142,13 @@ export default function ListFilter(props: any) {
   useEffect(() => {
     async function fetchData() {
       if (filter.assigned_to) {
-        setAssignedUserLoading(true);
         const res = await dispatch(getUserList({ id: filter.assigned_to }));
-
         if (res && res.data && res.data.count) {
           setFilterState({
             ...filterState,
             assigned_user_ref: res.data.results[0],
           });
         }
-        setAssignedUserLoading(false);
       }
     }
     fetchData();
@@ -345,21 +341,14 @@ export default function ListFilter(props: any) {
         </div>
       </div>
 
-      <div>
-        <FieldLabel>{t("assigned_to")}</FieldLabel>
-        {isAssignedUserLoading ? (
-          <CircularProgress size={20} />
-        ) : (
-          <UserSelect
-            name="assigned_to"
-            multiple={false}
-            selected={filterState.assigned_user_ref}
-            setSelected={(obj) => setAssignedUser(obj)}
-            className="shifting-page-filter-dropdown"
-            errors={""}
-          />
-        )}
-      </div>
+      <UserAutocompleteFormField
+        label={t("assigned_to")}
+        name="assigned_to"
+        id="assigned_to"
+        value={filterState.assigned_user_ref}
+        onChange={({ value }) => setAssignedUser(value)}
+        errorClassName="hidden"
+      />
 
       <div className="-mt-6">
         <FieldLabel>{t("ordering")}</FieldLabel>

src/Components/Users/models.tsx

@@ -2,7 +2,7 @@ interface HomeFacilityObjectModel {
   id?: string;
   name?: string;
 }
-export interface UserModel {
+export type UserModel = {
   id?: number;
   username?: string;
   first_name?: string;
@@ -23,7 +23,7 @@ export interface UserModel {
   doctor_qualification?: string;
   doctor_experience_commenced_on?: string;
   doctor_medical_council_registration?: string;
-}
+};
 
 export interface SkillObjectModel {
   id: string;