122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
import { LoadingOutlined } from "@ant-design/icons";
|
|
import { useLazyQuery } from "@apollo/client";
|
|
import { Select, Space, Spin, Tag } from "antd";
|
|
import _ from "lodash";
|
|
import React, {forwardRef, useEffect, useState} from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
import {
|
|
SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE,
|
|
SEARCH_JOBS_FOR_AUTOCOMPLETE
|
|
} from "../../graphql/jobs.queries";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
|
|
|
|
const {Option} = Select;
|
|
|
|
const JobSearchSelect = (
|
|
{
|
|
disabled,
|
|
convertedOnly = false,
|
|
notInvoiced = false,
|
|
notExported = true,
|
|
clm_no = false,
|
|
...restProps
|
|
},
|
|
ref
|
|
) => {
|
|
const {t} = useTranslation();
|
|
const [theOptions, setTheOptions] = useState([]);
|
|
const [callSearch, {loading, error, data}] = useLazyQuery(SEARCH_JOBS_FOR_AUTOCOMPLETE, {});
|
|
|
|
const [
|
|
callIdSearch,
|
|
{
|
|
loading: idLoading,
|
|
error: idError,
|
|
data: idData
|
|
}
|
|
] = useLazyQuery(SEARCH_JOBS_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,
|
|
...(convertedOnly || notExported
|
|
? {
|
|
...(convertedOnly ? {isConverted: true} : {}),
|
|
...(notExported ? {notExported: true} : {}),
|
|
...(notInvoiced ? {notInvoiced: true} : {})
|
|
}
|
|
: {})
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (restProps.value) {
|
|
callIdSearch({variables: {id: restProps.value}}); // Sometimes results in a no-op. Not sure how to fix.
|
|
}
|
|
}, [restProps.value, callIdSearch]);
|
|
|
|
useEffect(() => {
|
|
setTheOptions(
|
|
_.uniqBy(
|
|
[
|
|
...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
|
|
...(data && data.search_jobs ? data.search_jobs : [])
|
|
],
|
|
"id"
|
|
)
|
|
);
|
|
}, [data, idData]);
|
|
|
|
return (
|
|
<div>
|
|
<Select
|
|
ref={ref}
|
|
disabled={disabled}
|
|
showSearch
|
|
autoFocus
|
|
allowClear={!loading}
|
|
style={{
|
|
width: "100%"
|
|
}}
|
|
filterOption={false}
|
|
onSearch={handleSearch}
|
|
//loading={loading || idLoading}
|
|
suffixIcon={(loading || idLoading) && <Spin/>}
|
|
notFoundContent={loading ? <LoadingOutlined/> : null}
|
|
{...restProps}
|
|
>
|
|
{theOptions
|
|
? theOptions.map((o) => (
|
|
<Option key={o.id} value={o.id} status={o.status}>
|
|
<Space align="center">
|
|
<span>
|
|
{`${clm_no && o.clm_no ? `${o.clm_no} | ` : ""}${
|
|
o.ro_number || t("general.labels.na")
|
|
} | ${OwnerNameDisplayFunction(o)} | ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
|
|
o.v_model_desc || ""
|
|
}`}
|
|
</span>
|
|
<Tag>
|
|
<strong>{o.status}</strong>
|
|
</Tag>
|
|
</Space>
|
|
</Option>
|
|
))
|
|
: null}
|
|
</Select>
|
|
|
|
{error ? <AlertComponent message={error.message} type="error"/> : null}
|
|
{idError ? <AlertComponent message={idError.message} type="error"/> : null}
|
|
</div>
|
|
);
|
|
};
|
|
export default forwardRef(JobSearchSelect);
|