From 629dd6ed96e3985f266f05d11275f2545c383fdf Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Thu, 23 Mar 2023 17:01:08 +0530
Subject: [PATCH] Fix location select on asset creation page (#5155)

* Fix location select on asset creation page

* Fix bug
---
 src/Components/Common/LocationSelect.tsx      | 25 +++++++++----
 src/Components/Facility/AssetCreate.tsx       | 36 ++++++++-----------
 .../Form/FormFields/Autocomplete.tsx          |  7 ++++
 3 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/Components/Common/LocationSelect.tsx b/src/Components/Common/LocationSelect.tsx
index 22fdcf27f32..fcaaa130a88 100644
--- a/src/Components/Common/LocationSelect.tsx
+++ b/src/Components/Common/LocationSelect.tsx
@@ -29,22 +29,28 @@ export const LocationSelect = (props: LocationSelectProps) => {
   const [locations, setLocations] = useState<{ name: string; id: string }[]>(
     []
   );
+  const [query, setQuery] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
   const dispatchAction: any = useDispatch();
 
   const handleValueChange = (current: string[]) => {
     if (multiple) setSelected(current);
-    else setSelected([current ? current[0] : ""]);
+    else setSelected(current ? current[0] : "");
   };
 
   useEffect(() => {
+    const params = {
+      limit: 14,
+      search_text: query,
+    };
+    setLoading(true);
     dispatchAction(
-      listFacilityAssetLocation({}, { facility_external_id: facilityId })
+      listFacilityAssetLocation(params, { facility_external_id: facilityId })
     ).then(({ data }: any) => {
-      if (data.count > 0) {
-        setLocations(data.results);
-      }
+      setLocations(data.results);
+      setLoading(false);
     });
-  }, [facilityId]);
+  }, [query, facilityId]);
 
   return props.multiple ? (
     <AutocompleteMultiSelectFormField
@@ -52,6 +58,9 @@ export const LocationSelect = (props: LocationSelectProps) => {
       value={selected as unknown as string[]}
       options={locations}
       onChange={({ value }) => handleValueChange(value as unknown as string[])}
+      onQuery={(query) => {
+        setQuery(query);
+      }}
       placeholder="Search by location name"
       optionLabel={(option) => option.name}
       optionValue={(option) => option.id}
@@ -64,6 +73,10 @@ export const LocationSelect = (props: LocationSelectProps) => {
       value={selected as string}
       options={locations}
       onChange={({ value }) => handleValueChange([value])}
+      onQuery={(query) => {
+        setQuery(query);
+      }}
+      isLoading={loading}
       placeholder="Search by location name"
       optionLabel={(option) => option.name}
       optionValue={(option) => option.id}
diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx
index ad0cb368b92..d005ba7a443 100644
--- a/src/Components/Facility/AssetCreate.tsx
+++ b/src/Components/Facility/AssetCreate.tsx
@@ -23,13 +23,14 @@ import moment from "moment";
 import SwitchV2 from "../Common/components/Switch";
 import useVisibility from "../../Utils/useVisibility";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
-import AutocompleteFormField from "../Form/FormFields/Autocomplete";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
 import TextFormField from "../Form/FormFields/TextFormField";
 import TextAreaFormField from "../Form/FormFields/TextAreaFormField";
 import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
 import useAppHistory from "../../Common/hooks/useAppHistory";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import { LocationSelect } from "../Common/LocationSelect";
+import { FieldLabel } from "../Form/FormFields/FormField";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -509,7 +510,6 @@ const AssetCreate = (props: AssetProps) => {
                 <div className="grid grid-cols-6 gap-x-6">
                   {/* General Details Section */}
                   {sectionTitle("General Details")}
-
                   {/* Asset Name */}
                   <div className="col-span-6" ref={fieldRef["name"]}>
                     <TextFormField
@@ -521,23 +521,23 @@ const AssetCreate = (props: AssetProps) => {
                       error={state.errors.name}
                     />
                   </div>
-
+                  <FieldLabel className="text-sm w-max" required>
+                    Asset Location
+                  </FieldLabel>
                   {/* Location */}
                   <div ref={fieldRef["location"]} className="col-span-6">
-                    <AutocompleteFormField
-                      name="location"
-                      label="Location"
-                      required
-                      placeholder="Select the location of the asset"
-                      options={locations}
-                      optionLabel={({ name }) => name}
-                      optionValue={({ id }) => id}
-                      value={location}
-                      onChange={({ value }) => setLocation(value)}
-                      error={state.errors.location}
+                    <LocationSelect
+                      name="Facilities"
+                      setSelected={(selectedId) =>
+                        setLocation((selectedId as string) || "")
+                      }
+                      selected={location}
+                      errors=""
+                      showAll={false}
+                      multiple={false}
+                      facilityId={facilityId as unknown as number}
                     />
                   </div>
-
                   <div className="col-span-6 flex flex-col lg:flex-row gap-x-12 xl:gap-x-16 transition-all">
                     {/* Asset Type */}
                     <div ref={fieldRef["asset_type"]} className="flex-1">
@@ -588,7 +588,6 @@ const AssetCreate = (props: AssetProps) => {
                       />
                     </div>
                   </div>
-
                   {/* Description */}
                   <div className="col-span-6">
                     <TextAreaFormField
@@ -600,7 +599,6 @@ const AssetCreate = (props: AssetProps) => {
                       error={state.errors.description}
                     />
                   </div>
-
                   {/* Divider */}
                   <div className="col-span-6">
                     <hr
@@ -612,7 +610,6 @@ const AssetCreate = (props: AssetProps) => {
                       }
                     />
                   </div>
-
                   {/* Working Status */}
                   <div ref={fieldRef["is_working"]} className="col-span-6">
                     <SwitchV2
@@ -638,7 +635,6 @@ const AssetCreate = (props: AssetProps) => {
                       error={state.errors.is_working}
                     />
                   </div>
-
                   {/* Not Working Reason */}
                   <div
                     className={
@@ -666,7 +662,6 @@ const AssetCreate = (props: AssetProps) => {
                     />
                     <ErrorHelperText error={state.errors.not_working_reason} />
                   </div>
-
                   {/* Divider */}
                   <div className="col-span-6">
                     <hr
@@ -678,7 +673,6 @@ const AssetCreate = (props: AssetProps) => {
                       }
                     />
                   </div>
-
                   {/* Asset QR ID */}
                   <div className="col-span-6">
                     <label htmlFor="asset-qr-id">Asset QR ID</label>
diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
index bb5d2a8a139..a846c9a1f65 100644
--- a/src/Components/Form/FormFields/Autocomplete.tsx
+++ b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -17,6 +17,7 @@ type AutocompleteFormFieldProps<T, V> = FormFieldBaseProps<V> & {
   optionIcon?: OptionCallback<T, React.ReactNode>;
   onQuery?: (query: string) => void;
   dropdownIcon?: React.ReactNode | undefined;
+  isLoading?: boolean;
   allowRawInput?: boolean;
 };
 
@@ -40,6 +41,7 @@ const AutocompleteFormField = <T, V>(
         optionValue={props.optionValue}
         optionDescription={props.optionDescription}
         onQuery={props.onQuery}
+        isLoading={props.isLoading}
         allowRawInput={props.allowRawInput}
         requiredError={field.error ? props.required : false}
       />
@@ -162,6 +164,11 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
 
           <DropdownTransition>
             <Combobox.Options className="origin-top-right absolute z-10 mt-0.5 cui-dropdown-base">
+              {filteredOptions.length === 0 && (
+                <div className="p-2 text-sm text-gray-500">
+                  No options found
+                </div>
+              )}
               {filteredOptions.map((option, index) => (
                 <Combobox.Option
                   id={`${props.id}-option-${option.value}`}