96 lines
3.1 KiB
JavaScript
96 lines
3.1 KiB
JavaScript
import {LoadingOutlined} from "@ant-design/icons";
|
|
import {useLazyQuery} from "@apollo/client";
|
|
import {Empty, Select} from "antd";
|
|
import _ from "lodash";
|
|
import React, {forwardRef, useEffect, useState} from "react";
|
|
import {
|
|
SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE,
|
|
SEARCH_VEHICLES_FOR_AUTOCOMPLETE,
|
|
} from "../../graphql/vehicles.queries";
|
|
import AlertComponent from "../alert/alert.component";
|
|
|
|
const {Option} = Select;
|
|
|
|
const VehicleSearchSelect = ({value, onChange, onBlur, disabled}, ref) => {
|
|
const [callSearch, {loading, error, data}] = useLazyQuery(
|
|
SEARCH_VEHICLES_FOR_AUTOCOMPLETE
|
|
);
|
|
|
|
const [callIdSearch, {loading: idLoading, error: idError, data: idData}] =
|
|
useLazyQuery(SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE);
|
|
|
|
const executeSearch = (v) => {
|
|
if (v && v.variables?.search !== "" && v.variables.search.length >= 2)
|
|
callSearch(v);
|
|
};
|
|
const debouncedExecuteSearch = _.debounce(executeSearch, 500);
|
|
|
|
const handleSearch = (value) => {
|
|
debouncedExecuteSearch({variables: {search: value}});
|
|
};
|
|
|
|
const [option, setOption] = useState(value);
|
|
|
|
useEffect(() => {
|
|
if (value === option && value) {
|
|
callIdSearch({variables: {id: value}});
|
|
}
|
|
}, [value, option, callIdSearch]);
|
|
|
|
// useEffect(() => {
|
|
// if (value !== option && onChange) {
|
|
// onChange(option);
|
|
// }
|
|
// }, [value, option, onChange]);
|
|
|
|
const handleSelect = (value) => {
|
|
setOption(value);
|
|
if (value !== option && onChange) {
|
|
onChange(value);
|
|
}
|
|
};
|
|
|
|
const theOptions = [
|
|
...(idData && idData.vehicles_by_pk ? [idData.vehicles_by_pk] : []),
|
|
...(data && data.search_vehicles ? data.search_vehicles : []),
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<Select
|
|
ref={ref}
|
|
disabled={disabled}
|
|
showSearch
|
|
autoFocus
|
|
value={option}
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
filterOption={false}
|
|
onSearch={handleSearch}
|
|
// onChange={setOption}
|
|
onChange={handleSelect}
|
|
onSelect={handleSelect}
|
|
notFoundContent={loading ? <LoadingOutlined/> : <Empty/>}
|
|
onBlur={onBlur}
|
|
>
|
|
{theOptions
|
|
? theOptions.map((o) => (
|
|
<Option key={o.id} value={o.id}>
|
|
{`${o.v_vin || ""} ${o.v_model_yr || ""} ${
|
|
o.v_make_desc || ""
|
|
} ${o.v_model_desc || ""} `}
|
|
</Option>
|
|
))
|
|
: null}
|
|
</Select>
|
|
{idLoading || loading ? <LoadingOutlined/> : null}
|
|
{error ? <AlertComponent message={error.message} type="error"/> : null}
|
|
{idError ? (
|
|
<AlertComponent message={idError.message} type="error"/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
export default forwardRef(VehicleSearchSelect);
|