Skip to content

Commit

Permalink
Fix location select on asset creation page (#5155)
Browse files Browse the repository at this point in the history 
* Fix location select on asset creation page

* Fix bug
  • Loading branch information
@Ashesh3
Ashesh3 authored Mar 23, 2023
1 parent be1ad45 commit 629dd6e
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 27 deletions.
25 changes: 19 additions & 6 deletions src/Components/Common/LocationSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,29 +29,38 @@ 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
name={name}
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}
Expand All @@ -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}
Expand Down
36 changes: 15 additions & 21 deletions src/Components/Facility/AssetCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down Expand Up @@ -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
Expand All @@ -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">
Expand Down Expand Up @@ -588,7 +588,6 @@ const AssetCreate = (props: AssetProps) => {
/>
</div>
</div>

{/* Description */}
<div className="col-span-6">
<TextAreaFormField
Expand All @@ -600,7 +599,6 @@ const AssetCreate = (props: AssetProps) => {
error={state.errors.description}
/>
</div>

{/* Divider */}
<div className="col-span-6">
<hr
Expand All @@ -612,7 +610,6 @@ const AssetCreate = (props: AssetProps) => {
}
/>
</div>

{/* Working Status */}
<div ref={fieldRef["is_working"]} className="col-span-6">
<SwitchV2
Expand All @@ -638,7 +635,6 @@ const AssetCreate = (props: AssetProps) => {
error={state.errors.is_working}
/>
</div>

{/* Not Working Reason */}
<div
className={
Expand Down Expand Up @@ -666,7 +662,6 @@ const AssetCreate = (props: AssetProps) => {
/>
<ErrorHelperText error={state.errors.not_working_reason} />
</div>

{/* Divider */}
<div className="col-span-6">
<hr
Expand All @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions src/Components/Form/FormFields/Autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand All @@ -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}
/>
Expand Down Expand Up @@ -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}`}
Expand Down

0 comments on commit 629dd6e

Please sign in to comment.